Tip:
Highlight text to annotate it
X
In this video, we'll make a very simple GUI using Eclipse that adds and subtracts numbers.
First, I'm going to install WindowBuilder. The directions from the website didn't work
for me, but the following process did. From the Help menu, pick install new software.
In the work with, type http, then double-click to select Juno (or whatever version you have),
mine is -- http://download.eclipse.org/releases/juno. Click the triangle to the left to expand General
Purpose tools, then scroll down and check Swing Designer, all the SWT Designers except
XWT and WindowBuilder Cores and WindowBuilder GroupLayout Support. Push next. Eclipse will
modify the request slightly. Push next again, accept the terms of the license agreement
and push finish. Now, click "yes" to restart Eclipse to complete
the installation. We get a new welcome screen, which I'll close and we're ready to create
the user interface. From the file menu, pick new, then project. Now on the wizard screen
we have a new section for WindowBuilder. I'll expand that, then SWT Designer, then SWT/JFace
Java project. When I push Next, it asks for the name of the project. I'll call this "Calculator"
and press Finish. I now right click on the new project, pick
new, and "Other". I'll expand WindowBuilder, then SWT Designer, then SWT, then select "Application
Window" and push next. I need to give the class a name, for example "Calc" and hit finish.
At this point, I have a main class, with a main method. Clicking on the design tab, I
can now create my GUI. In the middle, you'll see a large palette of things I can add to
my application. We'll need places to enter the numbers, so I'll add two text controls.
I click on the Text control and then place it in the window. After clicking text control
again to place the second, you'll note that Eclipse helps me line up the two boxes. Now
I can click on the right edge and make them bigger. Again, Eclipse helps me make the second
one the same size as the first. A good user interface will tell the user what
they are supposed to put in the boxes, so I'll add a couple of labels. I can type the
text for the label right away. I'll type "First number", then resize the label to make it
big enough. For the second, I'll click away so I can show how to change the text later.
To the left, I have a section for properties. I can scroll down in this and change the text
from "New Label" to "Second number". Scrolling up to Bounds, I can change the width manually
to one hundred instead of using the mouse. Eclipse allows me to change the GUI either
using the designer, or by writing Java code. Switching to source view, I'll change the
window title. It was "SWT Application", but I'll change it to "Simple Calculator". When
I go back to Design view, you'll see the preview of the window has the new title.
Next I'll add a couple of buttons for addition and subtraction. I'll change these so they
display "+" and "-". Back in the properites, you'll see "toolTipText", which is what is
displayed when you hover over the button with the mouse. I'll add some text here saying
"add" and "subtract". Now I need a place for the answer. Again,
I'll use a label. I set the text to "The answer is:". The answer is pretty important, so I'll
make the font bigger. In the properties area, scrolling to font, I click on the three dots,
which brings up a dialog where I can select a font type, style and size. Let's go with
Script, bold and 24 point font. I'll now drag the right edge over to show the whole text
and leave space on the right to make room for the answer.
OK, now we're ready to make something happen when they push a button. First, I'll change
the name of the variable for the button to something more meaningful, like "plusButton".
Remember by convention, you don't capitalize the first letter of a variable name. Instead
of using the properties, this time I'll use the components list under structure, and right
click on each and select rename. I'll go ahead and give meaningful names to the two text
fields and the answer label. Double-clicking on the plus button brings
me back to source view, where it has created a method to fill in the code that will be
run when the button is pushed. I'll add code to parse the text from the two text fields
into integer variables. Since the user might not type a valid number, I'll add a try-catch
block. If the number is bad, I'll display an error dialog. This can be done with the
static method MessageDialog.openError. The parent is shell, the message will be "bad
first number", and the title will be "Error". Eclipse shows an error with the lightbulb
and red X since the MessageDialog class has not been imported. Eclipse will automatically
resolve the error for me if I click and then double-click on the choice to add the import.
If the user typed invalid input, I want to return and not try to compute an answer.
Now I can copy and paste this and do the second number. I need to change the error message,
the variable name, and also which text field I'm reading.
Now I can make the answer be number1 plus number2. But I have an error again! This is
because number1 and number2 were declared inside the try-catch blocks, and go away when
the try-catch is over. To fix this, I'll declare number1 and number2 at the beginning of the
method. Now we're almost done! All that's left is
to display the answer. I'll set the text of the answer field. Now Eclipse gives me an
error. I see the lightbulb with the red X to the left.
answerLabel is not visible at this point. This is because it appears lower in the method.
I'll cut and paste that higher in the code. There's still an error though. Now it says
that answerLabel may not be referred to in this method unless it is changed to be final.
The "quick fix" solves the problem. Now I can switch back to design view and do
the same for minus. Copy and paste the code and change the plus to minus.
Now we'll run the program. If I type in text instead of a number and push "+", I get the
error. But, if I put in a couple of good numbers in, then the right thing happens.