Procedure

Basic Visual Editor Test 2

This test will demonstrate the creation of a simple SWT graphical application using the Visual Editor.

Creating Project

First create a new Java Project by pressing the New button on the tool bar.
Select Java from the list on the left, and Java Project on the right.
Click Next, and name the project VE Demo and click Finish.

Adding the SWT Library

Select the project in the Package Explorer, then mouse button 2 and select Properties. Choose Java Build Path on the list on the left, then the Libraries tab.
Press the Add Library button and choose Standard Widget Toolkit (SWT). 

Hit the Next button, then Finish, then OK.

Creating Visual Class

Select the project again in the Package Explorer, then mouse button 2 and from the New menu, select Visual Class.


In the wizard, name the new class SayHello, choose to extend other and make sure the Superclass is listed as java.lang.Object and click Finish.

The Visual Editor will now launch with an empty canvas.

Initial Editing

Select the Shell from the SWT drawer on the palate.
Click and drag on the canvas surface to drop and size the Shell.

Once the Shell is dropped and resized properly, click on it on the canvas to Direct Edit the title of the shell. Enter "Say Hello"

into the white box that pops up, and press enter when done.


The title of the shell will change to reflect the new text.
From the Property sheet, change the value of the layout property to GridLayout

Creating Greeting Text

Choose a Label from the palate.  Move the cursor over the center of the Shell click to drop.  The label will be placed in the upper-left corner of the window.  From the property sheet, expand the layoutData property by pressing the + button.  Set the following properties: grabExcessHorizontalSpace -> true, grabExcessVerticalSpace -> true, horizontalAlignment -> CENTER.

In the source panel, scroll to the bottom of the createSShell () method.  Look for the following line of code:
label.setText("Label");
Change the word Label to Hello, so the line will read:

label.setText("Hello");

The canvas will update to show the new text. Next the font size should be increased to make it show up better.  Select the font property on the property sheet,
and press the gray ... button on the right to bring up the font property editor.  Select Arial, Bold, and size 36.  Press OK.


To change the label text's color, select the foreground property on the property sheet, then press the gray ... button
to launch the color property editor.  Select the Named Colors tab at the top of the editor, then choose blue from the
basic colors list and press OK.

Adding the Control Panel

Select a Composite from the palate and drop it into position to the right of the Label.  From the property sheet, expand the layoutData property, and set grabExcessHorizontalSpace -> true and horizontalAlignment -> CENTER.  Select the layout property and change it to FillLayout.  Expand the layout property and set the spacing sub property to 10.



Next, select Label on the palatte and drop it on the composite.  Change the text property to say "Enter your name:".  
Next, drop a Text on the Composite using the Java Beans View.
Next, select Button on the palatte and drop it on the Composite after the text field using the Java Beans View.  Bring up Direct Edit on the button and change its text to "Say Hello"

Adding Event

To make the program actually do something, an event needs to be added.  Select the "Say Hello" button on the canvas.  
Mouse button two to bring up the context menu, go down to Events, and select Add Event.  Select the selection event,
and widgetSelected, then press Finish.  This will add an  event which will occur when the button is clicked.  

In the source code pane, look for the line of code:
System.out.println("widgetSelected()"); // TODO Auto-generated stub widgetSelected()
Remove that line from the source, and replace it with the following line:
label.setText("Hello " + text.getText());

When you are finished, your application should look something like this:


Running the Application

Try running the application by selecting Run As->Java Bean from the Run menu.
The application should launch and should look like what is represented on the graphical canvas.
Enter your name into the text field and press the Say Hello button.  The text of the Hello label should change to reflect the entered name.