GUI development in Eclipse Created by: Oo Theong Siang Contributions: Li Mengran, Loh Jianxiong Christopher, Cheu Wee Loon, Tania Chattopadhyay
Transcript
Slide 1
Created by: Oo Theong Siang Contributions: Li Mengran, Loh
Jianxiong Christopher, Cheu Wee Loon, Tania Chattopadhyay
Slide 2
Graphic User Interface (GUI) WindowBuilder Pro In this section,
we will show you how to install WindowBuilder Pro, and give a
simple tutorial on how to use it to build Java GUI with SWT. o To
build GUIs inside Eclipse, we are going to use WindowBuilder Pro: a
drag- and-drop Java GUI creator for the Eclipse IDE. o
WindowBuilder is a component for the Eclipse IDE and is available
as a plug-in. o WindowBuilder supports both Standard Widget
Toolset(SWT) and Swing two Java GUI libraries. o SWT documentation
can be found here:
http://www.eclipse.org/swt/docs.phphttp://www.eclipse.org/swt/docs.php
2
Slide 3
Installing WindowBuilder Pro To install WindowBuilder Pro with
Eclipse 4.4 Luna, start up Eclipse and click on Help -> Install
New Software 3
Slide 4
Installing WindowBuilder Pro 1.Enter the update URL here.
Update URL depends on your Eclipse version. Find the update URL for
your Eclipse version from this pagethis page 2.Hit Enter to query
update site 4
Slide 5
Installing WindowBuilder Pro 5 Select all packages, then click
Next. Then click Next all the way until the installation finishes.
If you are prompted with a User License Agreement, remember to
accept.
Slide 6
How GUI works Appearance Behavior Top-level Container Sub
Container . ComponentComponentComponent Hierarchical Structure of
Containers And Components Event Handlers button_click, mouse_click,
window_resize, etc button_click, mouse_click, window_resize, etc
6
Slide 7
Appearance 7 Label component Button components Components are
functional parts for input and output This entire window is the
top-level container Containers hold components together logically
and graphically
Slide 8
8 GUI Button Dispatching Mechanism Handler 1 Handler 2 Handler
3 Event Sources Event Handlers Behavior Event-driven Programming
Button TOPIC: GUI programming from ground up SPEAKER: FrankSLIDE
User This is handled by the SWT library. Dont worry about it. We do
these.
Slide 9
Publish/Subscribe style of programming Publishers do not send
events directly to subscribers. Instead, they send to the
dispatcher Subscribers do not actively poll the publishers for
events. Instead, they indicate to the dispatcher the events they
are interested in. The dispatcher acts as an agent, receiving
events from publishers and dispatching them to interested
subscribers. 9
Slide 10
Time to get our hands dirty Select File -> New -> Project
Select SWT/Jface Java Project then click Next 10
Slide 11
Create a new project. 11 Enter FirstGUI as project name and
click Finish
Slide 12
Add a new container class 12 Right click on the src folder in
Package Explorer, select New -> Other
Slide 13
Add a new container class 13 Go to the folder WindowBuilder
-> SWT Designer -> Forms, then select Composite and press
Next. A composite is basically a generic container.
Slide 14
Add a new container class 14 Enter a name, say Calculator then
click Finish
Slide 15
The Editor, Source View 15 Not much different from a normal
Java class, eh? Well, this is the source view. We can program our
entire GUI by coding here, though its not really efficient to do
so. We can click Design to switch to design view, where we can draw
our GUI in a WYSIWYG manner. Alternatively we can alternate between
these two modes by pressing F12
Slide 16
Main function 16 We dont have a main function yet. So before
going into design view, add the following main function: public
static void main(String[] args){ Display display = new Display();
Shell shell = new Shell(display); Calculator calc = new
Calculator(shell, SWT.NONE); calc.pack(); shell.pack();
shell.open(); while(!shell.isDisposed()){
if(!display.readAndDispatch()) display.sleep(); } - Display is the
backend, handling interface to the operating systems and also
serving as the dispatcher. - Shell is a window. - The pack function
simply asks the components to resize themselves to take minimum
space that fit.
Slide 17
Import the necessary libraries 17 You may have some errors with
Shell or SWT which have not been imported yet. However, notice the
light bulb besides the red cross, this is something Eclipse IDE can
help us handle. Click at the light bulb, choose Import from the
list of suggestions by Eclipse.
Slide 18
The Editor, Design View 18 This is the drawing canvas. Click on
the blank area to select our blank container. Notice the black
border around the container. That indicates we have successfully
selected it. Properties of the selected object can be viewed and
changed here, in the Property View. The Palette. We can drag and
drop stuff from here to the canvas.
Slide 19
Layout 19 With our top-level container selected, open the drop
down menu next to the Layout property, and select FormLayout. This
property guides the container in positioning the components it
contains. FormLayout provides help in aligning the edges of the
components contained in the container.
Slide 20
Label 20 Click Label to select it, then move the cursor to the
canvas. Drag and draw a label here
Slide 21
Properties 21 Select the Label just drawn by clicking on it. In
the properties view, we can view or change the variable name
associated with the selected object. In this case, the labels
variable name is lblNewLabel Change the alignment to RIGHT by
selecting it in the drop down menu Change the text to 0 by clicking
on the field next to the property text and typing
Slide 22
What you should see Now press F12 to switch to source view.
22
Slide 23
In Source View 23 Notice that when we draw on the canvas, the
codes reflect the changes. This chunk of codes correspond to the
addition of that label. Notice that this label is declared solely
in the constructor. This makes it hard for us to refer to it later
on. The logical thing to do is to convert this label into a member
of the Calculator class. We can either do it in the source view
manually, or in the design view, click Convert local to field in
the properties view of the label.
Slide 24
Sub container 24 Now we draw a sub container to hold all the
buttons. Select Composite, then draw it on the canvas as shown.
Then select the drawn composite, and change its layout to
GridLayout. GridLayout organizes its components in grid, which is a
perfect fit for our array of buttons.
Slide 25
Button 25 Select Button, then place it at column 0, row 0 of
the grid.
Slide 26
Buttons, Buttons 26 Then add 15 more buttons to fill the grid
like this If the sub-container is too small to hold 16 buttons,
increase its size by dragging the corners of the selection.
Slide 27
Change Button Text 27 (1) Now change the buttons text
properties in the same way. You should see this: (2) Notice that
the buttons are shrunk to fit the text size. Wed actually like them
to be larger. Heres how: Double click on this scale 1.
Slide 28
Extra room for expansion 28 Now we have all the room in the
world for expansion. Enlarge the button 1 as you see fit, then
double click the scale 1 to contract this column to fit the
button.
Slide 29
Now resize all the other buttons bigger 29
Slide 30
Appearance completed 30 Now we are going to add event handlers
so that pressing these 9 digit buttons will increment the number
shown in the label accordingly. Of course, this is not so
calculator-like. However, in doing so, you will learn everything
you need to know for the calculator GUI. The task to complete the
calculator is then left as your own exercise.
Slide 31
Add button click event handler 31 (1) Select button 1 first.
(2) In the properties view, click the green Show Events button. (3)
Go to selection and double-click widgetSelected
Slide 32
Event Handler Code 32 You will be automatically brought to
source view. Notice the skeleton provided by the IDE. It is an
instance of an anonymous class that extends SelectionAdapter. Add
the following piece of codes into the method widgetSelected: Button
b = (Button)e.getSource(); int num =
Integer.parseInt(lblNewLabel.getText()); num +=
Integer.parseInt(b.getText()); lblNewLabel.setText(num+""); Its
pretty self-explanatory. e is the event object, from which we can
find its publisher by the method getSource. We get the number on
the button and increment it to the number in the label. Number on
the label Number on the button Set label to incremented number
Slide 33
Run it! 33 Run our program, even though it only responds to
button 1. Try clicking on it and see that the number in the label
increases.
Slide 34
Optimization Then we realize that writing a handler for each
different button click can be quickly tiring. We want one handler
to deal with all those 9 buttons. 34 Previous Now Of course, we
must let the Calculator class implement the SelectionListener
interface
Slide 35
After you type implements SelectionListener, you will get an
error if SelectionListener is not imported. Click on the icon and
choose Import SelectionListener from the suggestions. 35 The error
icon is still there because we do not have the methods
widgetDefaultSelected() and widgetDefaultSelected(). Open the
suggestions box again and choose Add unimplemented methods. Since
the SelectionAdapter is not used anymore, you may remove this
import statement.
Slide 36
Optimization 36 Rename the SelectionEvent parameter to e. If
Eclipse warns you that the variable cannot be resolved, you can
declare it at class scope. Refer to example code line 22.
Slide 37
Optimization 37 Then simply let the Calculator class subscribe
to all the other 8 buttons like this. For this example, choose only
those buttons which correspond to integers in the calculator, not
+, - etc.