Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

45
Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse

Transcript of Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Page 1: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Copyright © 2008-2015 Curt Hill

First Window Builder Program

Easy GUIs in Eclipse

Page 2: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Preliminaries• Goal: Create a Windows program

using Eclipse with the Window Builder plugin

• The problem to solve is to take the number of years and convert it into the number of seconds of a persons life

• Simple GUI with:– Two buttons– One input– One output

Copyright © 2008-2015 Curt Hill

Page 3: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Disclaimer• There is a lot to know• So we have much to cover• Fortunately, it is easier than it

might seem• We will follow with a

demonstration• We will have more presentations to

further explain things

Copyright © 2008-2015 Curt Hill

Page 4: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Needed Objects• JFrame

– A window and container

• JButton• JTextField

– A field to type in data

• JLabel• LayoutManager

– Organizes GUI objects in a container– Handles the resizing

• ListenersCopyright © 2008-2015 Curt Hill

Page 5: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Process• First we do the normal things:• Start Eclipse

– The Window Builder plugin should have been previously installed

• Close all open projects• Create a new project

– We do not create the new Java class

• This is where it starts to change• We add a Windows application• We do this with dropdown menu

Copyright © 2008-2015 Curt Hill

Page 6: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Add an Application Window

Copyright © 2008-2015 Curt Hill

Page 7: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Fill in Package and Name

Copyright © 2008-2015 Curt Hill

Page 8: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

After Finish Clicked

Copyright © 2008-2015 Curt Hill

Page 9: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

What do we have?• A program with 44 lines• 3 methods

– Main– initialize– NewWindow

• We are not yet ready to modify the Java code

• Notice at the bottom of the code there are two tabs– Source and design

Copyright © 2008-2015 Curt Hill

Page 10: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Looking at Source

Copyright © 2008-2015 Curt Hill

Page 11: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Now Click on Design

Copyright © 2008-2015 Curt Hill

Page 12: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Commentary• On the right is a stylized preview of

what the window will look like• The middle pane describes

components we can drag onto the window

• On lower left is property inspector• First we will change the window

characteristics• We click on the window in the right

pane • Scroll down to title and type

Copyright © 2008-2015 Curt Hill

Page 13: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Add a title

Copyright © 2008-2015 Curt Hill

Page 14: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

If we run we get

Copyright © 2008-2015 Curt Hill

Page 15: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Click Flow and Drag

Copyright © 2008-2015 Curt Hill

Page 16: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Adding Components• We click on items and then drag

over to window• First start with a Jlabel• Click it• Click in the Window

Copyright © 2008-2015 Curt Hill

Page 17: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Jlabel Added

Copyright © 2008-2015 Curt Hill

Page 18: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Change Contents• After we drop it, it should be

selected in the property inspector• Change the Text property to Years

Copyright © 2008-2015 Curt Hill

Page 19: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Text Property Changed

Copyright © 2008-2015 Curt Hill

Page 20: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Next• We are now up to 51 lines and

have coded nothing• The next thing to do is add the

input box• This is the Java JTextField• Similar to the JLabel as far as

adding• Also similar to JLabel for setting

the original value• It may precede or follow the label

Copyright © 2008-2015 Curt Hill

Page 21: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

JTextField Dragging

Copyright © 2008-2015 Curt Hill

Page 22: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Setting Text

Copyright © 2008-2015 Curt Hill

Page 23: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Buttons• The slightly harder one is buttons• They have the same drag, set

value as JLabels and JTextAreas• They also need an event handler• Even that is not hard• We must show the events

Copyright © 2008-2015 Curt Hill

Page 24: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Button Placed

Copyright © 2008-2015 Curt Hill

Page 25: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Show Events Clicked

Copyright © 2008-2015 Curt Hill

Page 26: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Scroll Down and Opened

Copyright © 2008-2015 Curt Hill

Page 27: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Action• When you double click on the

Mouse Clicked slot it generates an event handler

• The event handler is method that is called when the event occurs

• It then takes you to the code page• The event handler is called

mouseClicked• It is preceded by an annotation

@overrideCopyright © 2008-2015 Curt Hill

Page 28: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Code

Copyright © 2008-2015 Curt Hill

Page 29: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Event Handler• The event handler is now an empty

method in the initialized method• Now we have to make that method

do something• Many programs and event

handlers have this basic form:// Get data// Do computations// Display results

Copyright © 2008-2015 Curt Hill

Page 30: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Getting Data• The main problem is that a textfield

always has type String text in it• If we are interested in numerics

then we must convert the String to a number

• This is done with static methods of a wrapper class– Usually Integer.parseInteger or

Double.parseDouble

• We cannot use Scanner– That is console/file based

Copyright © 2008-2015 Curt Hill

Page 31: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

TextField to Numerics• To convert an edit box value to a

usable numeric value, we use the wrapper classes– Integer– Double

• A wrapper class makes a class out of a primitive

• Then it gives static methods that are useful for that primitive

• Today we want parseInt from Integer or parseDouble from Double

Copyright © 2008-2015 Curt Hill

Page 32: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Conversion• We can use this:

String val = textField.getText();int v = Integer.parseInt(val);

• Or combine into one:int i = Integer.parseInt(edit1.getText());double d = Double.parseDouble(edit1.getText());

• This causes the value to be obtained from the edit box named edit1 and converted into an int or double

Copyright © 2008-2015 Curt Hill

Page 33: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Back to a String• To display a result in either a

JTextField or JLabel requires the setText method

• This may only take a String• There is no String constructor that

takes a numeric• There is however the valueOf method• Thus:lab1.setText( String.valueOf(d));

Copyright © 2008-2015 Curt Hill

Page 34: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Another Conversion• You may also concatenate a

number to a string painlessly:int a = b*c/2;String s = “Answer: “+a;

• However, you may not assign a number to a string directly without valueOfs = a; // Illegals = String.valueOf(a); // OK

Copyright © 2008-2015 Curt Hill

Page 35: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Static Methods• parseInt, parseDouble, and valueOf

are all static methods• A static method does not need an

instance of the type• We usually use the class name as

if it were an instance:Integer.parseInt(x);Double.parseDouble(y);String.valueOf(u);

Copyright © 2008-2015 Curt Hill

Page 36: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Casts• Why do we not cast these

conversions?• Casts only work on primitive types• A String is not a primitive so it

must use a static method to convert values into it

• Similarly the wrapper methods also use static methods to make a double out of a string

Copyright © 2008-2015 Curt Hill

Page 37: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Get Data• The data is in the text field named text

• The method call:text.getText() will get it

• Then we convert into an integer with:Integer.parseInt(…)

• We use:int years = Integer.parseInt( text.getText());

Copyright © 2008-2015 Curt Hill

Page 38: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Do Computations• The computation is merely a bunch

of multiplications to convert years into seconds

• Multiply by– Days in year– Hours in day– Minutes in an hour– Seconds in a minutedouble sec = years*365.25*24*60*60;

Copyright © 2008-2015 Curt Hill

Page 39: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Display Results• System.out.println is used for

console programs• In a GUI we put the result in a

Label or TextField• In this example the label is named

label• We use the setText method:

label.setText(“”+sec);

Copyright © 2008-2015 Curt Hill

Page 40: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Event Handler

Copyright © 2008-2015 Curt Hill

Page 41: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Are we done?• This program is now 80 lines

– Three of which we have coded

• It still needs some work:– An exit button– An about button

• However, most of that can wait until we get this part under control

Copyright © 2008-2015 Curt Hill

Page 42: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

New Button• Exit button is simple, add a new:

– Button– Event handler

• The event handler method should execute:System.exit(0);

• This enlarges the program to 82 lines

• The About needs a dialog which will wait for a future presentation

Copyright © 2008-2015 Curt Hill

Page 43: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

With Exit Button

Copyright © 2008-2015 Curt Hill

Page 44: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Errors• In generating this presentation I

received an error in Windows Builder

• The program would compile and run

• So I exited Eclipse and started it and it was fine

Copyright © 2008-2015 Curt Hill

Page 45: Copyright © 2008-2015 Curt Hill First Window Builder Program Easy GUIs in Eclipse.

Lastly• We are up to about 89 lines• Seven of these we coded directly

– Four Java lines– Three comment lines

• The rest Windows Builder generated

• We will next do the demo

Copyright © 2008-2015 Curt Hill