Standard Widget Toolkit: Part 1 - Hello, World!

eduzine@edujinionline.com (Eduzine) — Wed, 25 Jun 2008 15:58:16 -0700

Introduction

With this article, we start a series on Standard Widget Toolkit (SWT) and Eclipse Plug-in Framework at Eduzine^©. It is assumed that you have already heard about Eclipse and you are gungho about exploring it and may be getting into all its details.

SWT is the base UI toolkit to create the UI, mainly the native widgets. Then there is JFace, an abstraction that sits on top of JFace (a large part of it) and adds power to native widgets. And finally, there is Eclipse Plug-in Framework that helps creating applications in a modular fashion. Default implementation of the Eclipse Workbench (the main UI cockpit) uses SWT and JFace for its UI.

Following the tradition started few decades back, we start with "Hello, World!" application.

Downloads

The downloads are available in the Downloads area in the Eclise Standard Widget Toolkit category.

Pre-requisites

To get started, the following pre-requisites would be considered:

You know Java programming langauge.
You have JDK (not only JRE) installed on your machine (from http://java.sun.com).
You have Eclipse installed on your machine (from http://www.eclipse.org).

Case Study

We will create our final application in multiple steps. Here's the brief overview of these steps:

Step 1: Create a window that contains a text that reads "Hello, World!".
Step 2: Create a window that has a button on click of which we get launch other window with a text that reads, "Hello, World!".

And the "top level window" with a "Title Bar", "Minimize", "Maximize" and "Close" buttons - the one that interacts with the Desktop or "Window Manager" - is known as Shell in SWT.

Getting Started - Creating Project

We start by creating a project using Eclipse IDE. Follow these steps to create and configure a simple Java application project.

Step 1: In the "New Project" wizard, select "Java Project". Click Next.

Step 2: Give the name of the project - "HelloWorldSWT". Click Next.

Step 3: Go to the "Libraries" Tab. Click "Add External Jars..." button.

Step 4: Browse to the "plugins" folder within the folder where Eclipse is installed. Add references to org.eclipse.swt_<version>.jar and org.eclipse.swt.win32.win32.x86_<version>.jar. Click Finish.

Entry Point

Now that we have the project, let us create a class HelloWorldClass that will act as the entry point (through the main method) for our application.

Implementation: Step 1

Let's get started with the implementation. The first thing that we will ever need to create the UI is an instance of org.eclipse.swt.widgets.Display. The top-level window, as discussed earlier, is an instance of org.eclipse.swt.widgets.Shell.

Update the code for HelloWorldClass to as follows:

package com.edujinilabs.eduzine.eclipse.swt;

import org.eclipse.swt.SWT;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

/**
  Part of the Eduzine (http://eduzine.edujini-labs.com) Articles.
  Downloads available at http://downloads.edujini-labs.com
  (C) 2008, Edujini Labs Pvt Ltd.
  http://www.edujini-labs.com
 */
public class HelloWorldClass
{
  public static void main(String[] args)
  {
    Display display = new Display();
    Shell mainWindow = new Shell(display, SWT.DIALOG_TRIM);

    mainWindow.setText("Eduzine: SWT Hello World");
    mainWindow.open();
  }
}

Right click on the file and select "Run As..." -> "SWT Application".

While launching, keep a close eye on the monitor. What do you see?

Ouch! The new windows seems to be launched but also lost somewhere.

Well, if that's the case... you are on absolutely correct track!

The reason for this behaviour is that the open method is a non-blocking call meaning that it opens up the window and returns immediately. And in our code, nobody stops the controls to get transferred past-end of the main causing the application to terminate.

So, the next step is to add the code that does the following:

Waits indefinitely, only to be terminated if we click the close [X] button on the title-bar of the main window.
Does not use CPU cycles if no activity is to be performed.
Respond to events, if there is any activity and again go for indefinite wait.
On closing the main window, it frees up the resources used, especially OS resources like Font, Color, Pen/Brush etc.

The loop that does the first-three steps mentioned above is known as event loop.

Update the main method to the following code:

public class HelloWorldClass
{
  public static void main(String[] args)
  {
    Display display = new Display();
    Shell mainWindow = new Shell(display, SWT.DIALOG_TRIM);

    mainWindow.setText("Eduzine: SWT Hello World");
    mainWindow.open();

    while(!mainWindow.isDisposed())
    {
      if(!display.readAndDispatch())
      {
        display.sleep();
      }
    }
    display.dispose();
  }
}

Launch the application again. Not posting the screenshot since it's a huge window.

The next step is to add a text on the window that reads "Hello, World!". We make use of the Widget named Label.

The constructors of all basic widgets require the information about the parent container in which they will be placed - the containers referred to as Composite widgets. The second parameter to the constructor is a number (integer) representing the styles. We will explore the styles soon. So, what are we waiting for? Let's update the code... And ah! We shall resize the window to a smaller size.

public class HelloWorldClass
{
  public static void main(String[] args)
  {
    Display display = new Display();
    Shell mainWindow = new Shell(display, SWT.DIALOG_TRIM);

    Label hwLabel = new Label(mainWindow, SWT.NONE);
    hwLabel.setText("Hello, World!");

    mainWindow.setText("Eduzine: SWT Hello World");
    mainWindow.setSize(300, 200);
    mainWindow.open();

    while(!mainWindow.isDisposed())
    {
      if(!display.readAndDispatch())
      {
        display.sleep();
      }
    }
    display.dispose();
  }
}

Things look much better now except only that we are yet, unable to see the Label.

Layout Manager

All Composite widgets use a layout manager - technically a subclass of org.eclipse.swt.layout.GridLayout - to layout the child widgets within themselves.

For our purpose, we make use of org.eclipse.swt.layout.GridLayout. We explore it later on. Update the code to as follows:

    Display display = new Display();
    Shell mainWindow = new Shell(display, SWT.DIALOG_TRIM);

    GridLayout layout = new GridLayout();
    mainWindow.setLayout(layout);

    Label hwLabel = new Label(mainWindow, SWT.NONE);
    hwLabel.setText("Hello, World!");

Launch the application! Voila! Got the "Hello, World!". The expected output is as below:

Implementation - Step 2

Now that we've got a simple but working application, let's move on to the next step, making it interactive. We replace the Label with a org.eclipse.swt.widgets.Button and popup a new window that reads, "Hello, World!"

Firstly, we replace Label with Button. Update the code to as follows:

package com.edujinilabs.eduzine.eclipse.swt;

import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

public class HelloWorldClass
{
  public static void main(String[] args)
  {
    Display display = new Display();
    Shell mainWindow = new Shell(display, SWT.DIALOG_TRIM);

    GridLayout layout = new GridLayout();
    mainWindow.setLayout(layout);

    Button hwBtn = new Button(mainWindow, SWT.NONE);
    hwBtn.setText("Say Hello");

    mainWindow.setText("Eduzine: SWT Hello World");
    mainWindow.setSize(300, 200);
    mainWindow.open();

    while(!mainWindow.isDisposed())
    {
      if(!display.readAndDispatch())
      {
        display.sleep();
      }
    }
    display.dispose();
  }
}

Subsequently, we create a class HelloWorldWindow with similar UI as created earlier. However, this time, the new class will have a new method open that will actually launch the UI. The definition of the class is as follows:

package com.edujinilabs.eduzine.eclipse.swt;

import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Shell;

public class HelloWorldWindow
{
  private Shell window;

  public HelloWorldWindow(Shell parent)
  {
    this.window = new Shell(parent, SWT.DIALOG_TRIM);

    GridLayout layout = new GridLayout();
    window.setLayout(layout);

    Label hwBtn = new Label(window, SWT.NONE);
    hwBtn.setText("Hello, World!");

    window.setText("Eduzine: Child");
    window.setSize(200, 100);
  }

  public void open()
  {
    this.window.open();
  }
}

Now, the only missing link is to launch this window on the click of the button! What are we waiting for then? Let's do it! Update HelloWorldClass to as follows:

  public static void main(String[] args)
  {
    Display display = new Display();
    final Shell mainWindow = new Shell(display, SWT.DIALOG_TRIM);

    GridLayout layout = new GridLayout();
    mainWindow.setLayout(layout);

    Button hwBtn = new Button(mainWindow, SWT.NONE);
    hwBtn.setText("Say Hello");

    hwBtn.addSelectionListener(new SelectionAdapter() {
      public void widgetSelected(SelectionEvent e)
      {
        HelloWorldWindow w = new HelloWorldWindow(mainWindow);
        w.open();
      }
    });
    
    ...
  }

On launch, the output expected is follows (Hey! Don't forget to click the button).

Summary

In this article, we learnt how to get started with Standard Widget Toolkit, the UI Toolkit created for initially for Eclipse and now used by millions of developers worldwide!

In subsequent articles, we explore about SWT and Eclipse, and environment around them.

Eduzine© - Eclipse