First Window Builder Program Easy GUIs in Eclipse

Preliminaries • Goal: Create a Windows program using Eclipse with the already installed 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 -2018 Curt Hill

Disclaimer • There is a lot to know • So we have much to cover • Fortunately, it is easier than it might seem • We will follow this with a demonstration – A code along with Curt exercise • We will have more presentations to further explain things Copyright © 2008 -2018 Curt Hill

GUIs and Objects • Most object oriented languages that support GUIs do so with objects • This encapsulates the properties and methods nicely • Java uses this approach – Thus there are some objects we need to know something about Copyright © 2008 -2018 Curt Hill

Needed Objects • JFrame – A window and container • JButton • JText. Field – A field to type in data • JLabel • Layout. Manager – Organizes GUI objects in a container – Handles the resizing • Listeners Copyright © 2008 -2018 Curt Hill

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 -2018 Curt Hill

Add an Application Window Copyright © 2008 -2018 Curt Hill

Fill in Package and Name Copyright © 2008 -2018 Curt Hill

After Finish Clicked Copyright © 2008 -2018 Curt Hill

What do we have? • A program with 44 lines • 3 methods – Main – initialize – New. Window • 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 -2018 Curt Hill

Looking at Source Copyright © 2008 -2018 Curt Hill

Next • We will next click on the design tab • We will either

This is bad – but fixable Copyright © 2008 -2018 Curt Hill

Explanation • Both Eclipse and Window. Builder may not have been updated to the most current version of the JDK • If this error appears we revert to a previous JDK • See the next screens Copyright © 2008 -2018 Curt Hill

Get Properties • Open the project so that the JRE shows • Right click

Choose a Previous JRE Copyright © 2008 -2018 Curt Hill

One more time • Once this is fixed we can click on Design tab

At Last Copyright © 2008 -2018 Curt Hill

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 -2018 Curt Hill

Add a title Copyright © 2008 -2018 Curt Hill

If we run we get Copyright © 2008 -2018 Curt Hill

Next • Each window needs a Layout manager • A layout manager determines how the various components are arranged on the window • This is usually chosen early • We will choose a simple one – Flow Layout Copyright © 2008 -2018 Curt Hill

Click Flow and Drag Copyright © 2008 -2018 Curt Hill

Adding Components • We click on items and then drag over to window •

Jlabel Added Copyright © 2008 -2018 Curt Hill

Change Contents • After we drop it, it should be selected in the property

Text Property Changed Copyright © 2008 -2018 Curt Hill

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 JText. Field • 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 -2018 Curt Hill

JText. Field Dragging Copyright © 2008 -2018 Curt Hill

Setting Text Copyright © 2008 -2018 Curt Hill

Names • When a component is dragged onto the form a new property is created • The Windows Builder Plug-In does not know what you are intending – It gives a uninformative name: – text. Field, text. Field_1 etc. • There is a Variable field in the object inspector that allows this to be changed • Those components referenced in code should usually be named Copyright © 2008 -2018 Curt Hill

Buttons • The slightly harder one is buttons • They have the same drag, set value as JLabels and JText. Areas • They also need an event handler • Even that is not hard • We must show the events Copyright © 2008 -2018 Curt Hill

Button Placed Copyright © 2008 -2018 Curt Hill

Show Events Clicked Copyright © 2008 -2018 Curt Hill

Scroll Down and Opened Copyright © 2008 -2018 Curt Hill

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 mouse. Clicked • It is preceded by an annotation @override Copyright © 2008 -2018 Curt Hill

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 -2018 Curt Hill

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. parse. Integer or Double. parse. Double • We cannot use Scanner – That is console/file based Copyright © 2008 -2018 Curt Hill

Text. Field 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 parse. Int from Integer or parse. Double from Double Copyright © 2008 -2018 Curt Hill

Conversion • We can use this: String val = text. Field. get. Text(); int v = Integer. parse. Int(val); • Or combine into one: int i = Integer. parse. Int(edit 1. get. Text()); double d = Double. parse. Double(edit 1. get. Text()); • This causes the value to be obtained from the edit box named edit 1 and converted into an int or double Copyright © 2008 -2018 Curt Hill

Back to a String • To display a result in either a JText. Field or JLabel requires the set. Text method • This may only take a String • There is no String constructor that takes a numeric • There is however the value. Of method • Thus: lab 1. set. Text( String. value. Of(d)); Copyright © 2008 -2018 Curt Hill

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 value. Of s = a; // Illegal s = String. value. Of(a); // OK Copyright © 2008 -2018 Curt Hill

Static Methods • parse. Int, parse. Double, and value. Of 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. parse. Int(x); Double. parse. Double(y); String. value. Of(u); Copyright © 2008 -2018 Curt Hill

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 -2018 Curt Hill

Get Data • The data is in the text field named text • The method call: text. get. Text() will get it • Then we convert into an integer with: Integer. parse. Int(…) • We use: int years = Integer. parse. Int( text. get. Text()); Copyright © 2008 -2018 Curt Hill

Do Computations • The computation is merely a bunch of multiplications to convert years into seconds – You have seen this before • Multiply by – Days in year – Hours in day – Minutes in an hour – Seconds in a minute double sec = years*365. 25*24*60*60; Copyright © 2008 -2018 Curt Hill

Display Results • System. out. println is used for console programs • In a GUI we put the result in a Label or Text. Field • In this example the label is named label • We use the set. Text method: label. set. Text(“”+sec); Copyright © 2008 -2018 Curt Hill

Event Handler Copyright © 2008 -2018 Curt Hill

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 -2018 Curt Hill

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 -2018 Curt Hill

With Exit Button Copyright © 2008 -2018 Curt Hill

Errors • In generating this presentation I received an error in Windows Builder – It is not too hard to get WB confused • The program would compile and run • So I exited Eclipse and started it and it was fine Copyright © 2008 -2018 Curt Hill

Problems • Each event handler is local to the listener that is being created • The order of adding is important • An early event handler cannot reference things that are declared later – Thus sometimes the Java code needs to be fixed to move the declaration away from the initialization and/or registering the event handler Copyright © 2008 -2018 Curt Hill

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 • Our last two programs will be using Windows Builder – Still picture manipulators • We will next do the demo Copyright © 2008 -2018 Curt Hill