Eduzine© - "Hello, World!"

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.

Google Web Toolkit says, "Hello, World!" - Part 2

eduzine@edujinionline.com (Eduzine) — Tue, 27 May 2008 15:31:49 -0700

Introduction

In the second article in the series - Google Web Toolkit says, "Hello, World!" - we learn how to do the same stuff in, probably, a more structured manner: use Eclipse IDE to write the code, compile and launch. So that we don't have to switch across the Java editor, command prompt and the browser.

And the code - available at downloads in the GWT category.

Getting Started

The software required are:

Java SDK from Sun Java Website
Eclipse IDE from Eclipse website. If you are confused what to download, get the Eclipse IDE for Java EE developers directly from here.
Google Web Toolkit from Google Code Website
Apache Tomcat from Apache Website
Cypal Studio here

Step 1: Creating Web Application

First step is to create a "Dynamic Web Project" in Eclipse.

Choose Web -> Dynamic Web Project.

Select appropriate Web Server Runtime - the "Target Runtime". [If the only entry that you get is <none>, create a "New..." one. Point it to the Apache Tomcat folder.] From the "Configurations", select "Cypal Studio GWT Project".

Finally, provide a meaningful "Context Root", or leave it as it.

Open the "Project Explorer" view. You should see similar to as shown below.

Step 2: Adding a Module

Our web application is now ready. What we now need is to add the "HelloWorld" module as what we did through the applicationCreator.cmd utility earlier. However, this time we will use the GUI.

We need to add a new "GWT Module" to our application. Follow these steps:

Add a new item:
Add a new Module:
Give the name of the package as com.edujinilabs.tutorials.gwt.hw (note that there is no 'client' as we had earlier), and the name of the class as HelloWorld.

The module has been added. The following artifacts would have been generated:

Module definition file: com/edujinilabs/tutorials/gwt/hw/HelloWorld.gwt.xml
HTML file: com/edujinilabs/tutorials/gwt/hw/public/HelloWorld.html
Implementation Code: com/edujinilabs/tutorials/gwt/hw/client/HelloWorld.java
Empty package com.edujinilabs.tutorials.gwt.hw.server

Step 3: Hello World Implementation

We, now, have the skeleton to push in our code. What we shall do is have a simple Button on the click of which we shall show a simple alert. Update the class HelloWorld to the following code:

package com.edujinilabs.tutorials.gwt.hw.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

public class HelloWorld implements EntryPoint
{
    public void onModuleLoad()
    {
        Button helloBtn = new Button();
        helloBtn.setText("Say Hello");

        helloBtn.addClickListener(new ClickListener() {
            public void onClick(Widget sender)
            {
                Window.alert("Hello, World!");
            }
        });

        RootPanel.get().add(helloBtn);
    }
}

Step 4: Launching the Application

We need to configure two things to launch and run the application. First, create a new "Run" configuration. Go to Run -> Run..., and follow these steps:

Add a new configuration:
Provide a meaningful name to the configuration. Choose the project (if not already chosen) and the module.
Select the "Parameters" tab and configure the memory to be provided on the heap:

Click, optionally Apply and then, Run.

Voila! We again the got the Google Web Toolkit Development Shell! Great, isn't it - noting that we did not touch anything outside Eclipse IDE this time.

What next? Click on the button and "Say Hello".

Summary

We can use the Cypal Studio plug-in for Eclipse to ease our life working with GWT. Well, of course, the power lies with GWT.

Google Web Toolkit says, "Hello, World!" - Part 1

eduzine@edujinionline.com (Eduzine) — Mon, 26 May 2008 15:34:00 -0700

Introduction

Google Web Toolkit (from Google, at Google Code) is a fantastic framework with a very interesting concept - write in Java run in JavaScript! This article demonstrates how to get started with Google Web Toolkit.

The first part of the article demonstrates how to use the default tools provided in GWT to write the "Hello World" application. The second in the series will demonstrate how to use Cypal Studio Plug-in for Eclipse to make your life easy when it comes to creating, compiling and running GWT applications.

As usual, the code is available in the Downloads section. Direct link to the Google Web Toolkit category is here.

What you need to know

You will need to know Java, at the least because, as I mentioned earlier, majority of the code is written in Java. And please, no generics.

Step 1: Getting Started

Well, the first step is to download Java SDK, if you already don't have one. And then, you will need GWT.

Here's the list, bulleted:

Java SDK from Sun Java Website
Google Web Toolkit from Google Code Website

I don't think there should be any trouble to download and install.

Step 2: Looking at GWT

Browse to the folder where you extracted Google Web Toolkit. The folder structure should be similar to shown below.

Step 3: Creating GWT Application

The very first step that you will do with GWT, after all installation, is to create a GWT Application.

If you look at the files, you will notice a file applicationCreator.cmd. You guessed it right, that's our starting point.

At the command prompt, go the folder and issue the following command:

applicationCreator.cmd -out gwt-hello-world com.edujinilabs.tutorials.gwt.hw.clent.HelloWorld

You will notice a set of files created for you.

Step 4: Launching Application in 'Hosted' Mode

Descend into the folder gwt-hello-world. You will notice two files - HelloWorld-compile.cmd and HelloWorld-shell.cmd

Launch HelloWorld-shell.cmd. You will notice two windows opened - one titled "Google Web Toolkit Development Shell / Port 8888" and the other titled "Wrapper HTML for HelloWorld".

In the second window, click the button that reads "Click me". Voila! It says, "Hello World!".

Where's the code?

If you go into the folder gwt-hello-world/src/com/edujinilabs/tutorials/gwt/hw/client, you will notice HelloWorld.java. Yes, that's where the original code is.

Where's the JavaScript?

Ok! I agree. Browsers do not, yet, natively run Java code. So, where's the JavaScript? It's hidden right now. Let's generate. On the command prompt, issue the following command (in the same folder as where you issued HelloWorld-shell.cmd:

HelloWorld-compile.cmd

Descend into the folder www/com.edujinilabs.tutorials.gwt.hw.HelloWorld. You will notice two files - HelloWorld.html and com.edujinilabs.tutorials.gwt.hw.HelloWorld.nocache.js. Now, that's where the code is.

Conclusion

Well, without getting into even a single line of code, we have been able to say, "Hello World!" using Google Web Toolkit. We have been able to get a peek into where the original Java code resides, and where do we get the compiled / generated JavaScript and HTML content.

We shall explore Google Web Toolkit in greater depth in next articles. Keep watching the category Google Web Toolkit / GWT