A 'Hello World' application

This text guides you step by step through the implementation of a simple 'Hello World' application using W4T Eclipse.


Step 1: Open the W4T Eclipse Perspective

If you not already have the W4T Eclipse Perspective open, go to the menu Window > Open Perspective and choose W4T Eclipse.

(If you do not see the entry in your menu, choose Other - the W4T Eclipse Perspective should now be visible in the list.)


Step 2: Create a new W4 Toolkit project

Open the New Project wizard, either from the menu File - New - Project or by right-clicking into the Navigator or Package Explorer and choosing New - Project.

Choose W4 Toolkit in the left half of the wizard and W4 ToolkitProject on the right.

Specify a name for the new project, e.g. 'Hello World Project'.

In addition, it is recommended to specify a folder for your sources. You can do this on the last page of the wizard (click the Add Folder ... button on the right and select Create New Folder ...; enter a name and confirm that the project folder should be no longer the source folder for the project).

Press Finish.


Step 3: Create a WebForm and open the visual editor

Right-click the source folder and select from the context menu New > WebForm.

In the wizard, specify a package name (e.g. com.mycorp.test or whatever your like - but don't leave it empty) and a name (say, 'HelloWorld', which would be really appropriate ...).

Press Finish.

The W4T Eclipse editor should have already opened and displayed the source code of the newly created WebForm. (If not, right-click the source file and select Open With ... > W4T Eclipse.)

At the bottom of the editor are three tabs for source code, design mode, and preview mode. Select the Designer tab from these to open the visual editor.


Step 4: Add and configure components

Choose a WebLabel from the WidgetSelector by clicking it, and insert it into one of the regions of the WebForm: select one of the small, colored buttons (these buttons are generally placeholders for regions in the W4T Eclipse designer).

Do the same with a fresh WebButton.

In the Properties view on the right side of the Workbench, you can edit attributes of the components. Just select the WebButton, which is by now aptly named as 'webButton1', and change it's label property.

Switch the tab on the right side from Properties to Events. Click into the webActionPerformed cell and add an entry for a WebActionEvent (simply hit the '+' button that appears in the cell).

W4T Eclipse has by now generated all the code for the components you have added, including the event entry methods for the event. You can have a look at it by changing back to the Java Editor tab on the bottom of the editor.

BTW: Don't forget to save from time to time ...

The event entry method looks like this:


      //$userdefinedEventListener_start
      private void doWebButton1WebActionPerformed( WebActionEvent e ) throws Exception {

      }
      //$userdefinedEventListener_end
  

We will now advise the button's event listener to do something interesting when the button is clicked. Type the following line into the event method:


      //$userdefinedEventListener_start
      private void doWebButton1WebActionPerformed( WebActionEvent e ) throws Exception {
        webLabel1.setValue( "HELLO WORLD!" );
      }
      //$userdefinedEventListener_end
  


Step 5: Launch and debug the application from within the IDE

Before you can launch the Hello World application, you have to tell W4T Eclipse where to find a web browser on your computer (it is a web application, after all). Open the preferences dialog from the menu Window > Preferences and choose W4T Eclipse > W4WARP. (BTW: W4WARP is the name of the internal server used by W4T Eclipse.) Browse to the executable of a web browser you have installed on your system for the External Browser entry:

Make sure you have the HelloWorld form open in the visual designer. Choose Run As ... either from the menu Run or from the toolbar button that looks like a running man:

The external browser opens and starts the application in a new session.

Note: you can set breakpoints and start the application with Debug As ... instead of Run As ..., just as you would do with every Java application.


Step 6: Package the application and deploy it to an external server

As a web application, you will probably want to test-run the Hello World application on a 'real' application server (e.g. Jakarta Tomcat). To that end, you need a web application archive (.war file) to deploy it to the server.

W4T Eclipse provides a wizard to package a complete web application into a .war file which contains your application along with everything else it needs (e.g. the W4 Toolkit library).

Right-click the project and select Export from the popup menu, then select WAR file (W4 Toolkit) from the list.

Now select the checkbox of your project and specify a name for the .war archive that will be generated.

Press Next.

Specify whether you want classes only or classes and sources to be exported.

Press Next.

Enter the startup form name for the application. The startup form is the fully qualified class name of a WebForm. Since we have only one form, we specify its name here:

Press Finish.

(When you run the deployment wizard for the first time, it asks you for permission to create a temporary directory. Hit OK here.)

The .war archive has been created now. Deploy it to your application server (e.g. copy it to the webapps/ directory, if you use Tomcat). Enjoy and start planning your next application :-)


Copyright (c) 2003 by Innoopract Informationssysteme GmbH. All rights reserved.