Beginners Trail

This section is a good starting point if you have never built widget-based user interfaces (web or other) before. It explains the basic terms and procedures and gets you started with the way of visually constructing your applications. It also gives you an introduction to the most important W4 Toolkit classes.

Composing the user interface

A W4 Toolkit application consists of one or more WebForms, the top-level container of the library. Containers are populated with components. The visual gui builder makes it easy to compose user interfaces. It has a palette of component types, in the Widget Selector (in the upper part of the workbench). You simply select a component and put it into the Designer editor which displays the WebForm you are currently working on.

You must create a WebForm, which is a Java class that extends the abstract class com.w4t.WebForm. In the visual gui builder, a wizard does this for you. The only thing you have to provide is a name (and a package name) for you class.

The WebButton is a component (actually, a WebComponent), and as such it has properties.

The properties of a component determine its look, feel and behaviour. For example, the label property is the text that appears on the button, and the link property determines whether the button appears as a pushbutton or as a weblink. There are properties for colors, sizes and other things.

Whenever you add a new component to the form, or change properties, W4T Eclipse generates the Java code for the WebForm. You can see it (and you should save it from time to time via the Save button in the Eclipse toolbar), when you switch from the Designer to the Java Editor tab on the bottom of the editor.

Play around with some components and their properties, and see the changes this makes in the generated code.

Note that there can be more than one component of a given type on the WebForm. You could e.g. have several WebButtons on your form. Which of them you are working at depends on which of them is selected in the Outline view (the window at the lower left side). Every component has a unique name (that is: unique for the WebForm it belongs to). This name corresponds to the variable name the component has in the generated code.

Let's wrap up what we have so far: there is nothing more to composing a user interface than:


What happens when a user clicks on a WebButton. Of course, that depends on what you want to happen: you must implement the functionality to be executed in that case.

The general mechanism for something that happens on user click is an event handling architecture, similarly to that of AWT, Swing or SWT. For the moment, the only thing you need to know is that there is a method that is called when the button is clicked, and that is the method we are going to implement.

The Designer creates the necessary method declaration for you. Select the button in the Outline view. The Properties view shows the properties of that particular button now. As we are not interested in properties at the moment, but in events, we switch at the bottom of the Properties view to Events.

Events for button clicks are called action events. So select in the Events view what sounds approximatel like that, namely: webActionPerformed. Click into the table cell and hit the '+' button that appears there. As you can see, a new method has been added in the table cell.

Now look at the source code. In a section between two special tags a method declaration has appeared:

  private void doLoginPanelWebActionPerformed( WebActionEvent e ) throws Exception {

That is the entry point for your implementation. All code that you type in here will be executed when the button is clicked by the user.

Caveat lector: as the Designer generates all code for your classes whenever properties of components change, everything you write into the file goes lost, except what you put into the '//$userdefinedEventListener' block. If your implementation grows larger, you may extract it into separate methods of the same class (see How to put userdefined code into generated classes), or (better) start using commands (see How to use commands).

Launching and debugging your application

You run a W4 Toolkit application exactly like you run any Java application in Eclipse. Typically, you select a WebForm in the Navigator or Package Explorer and open it from the menu Run > Run As ... > W4 Toolkit Application. (Or use the corresponding toolbar button in the Eclipse workbench, the one that looks like a running man ...).

Example application

There is an example application packaged with W4T Eclipse that demonstrates how an application can be built using W4 Toolkit and W4T Eclipse.

More sources of information

Apart from the texts in the Eclipse help system, there is additional information material, including whitepapers, FAQs and licensing information at the W4 Toolkit and W4T Eclipse homepage:

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