Chapter 7 GUI design

So far this semester Have programmed in a stop and wait mode Program displays dialog box and waits for user to respond This was the way programs were previously created (back in my early days)

Modern design (Event driven) Today’s users control the program They decide what they want to do next User’s control the flow of the program Thing about MS word many options to choose from Programming in an event driven environment requires careful GUI design

Section 7.1 AWT, Swing GUI design is also a study of Object Orientation Creating GUI is done by using pre-existing objects Early versions of Java used AWT Java 1.2 introduced a new library called Swing

Swing versus AWT AWT matches corresponding components in the OS platform dependent Swing API looks the same on all platforms platform independent

AWT versus Swing AWT relies on the platform peer component to draw it. Swing uses components written entirely in Java is called lightweight component

Categories of Classes Swing GUI component AWT layout manager AWT event classes AWT listener classes Top of page 441

GUI component classes Includes windows objects buttons text fields menu items containers panels applets

Example See components bottom of page 441 GUI design page 442

Hierarchy Page abstract classes Container Component JComponent AbstractButton

Containers Containers hold components Panels are containers group components Windows are containers top level displayed by OS windows contains panels Applet is special kind of container Applet is contained in a window, specifically the browser

Browser applet Interaction Applet context is the browser or applet viewer Applets are caused to run in the browser via the applet tag bottom of page 444

Browser create object The browser instantiates your object and then calls init DistanceGUI dGUI new DistanceGUI(); dGUI.init(); When user loads different page or overlays browser calls stop When user returns calls start User exits browser calls destroy

Your task Properly override the init method in Japplet to perform the necessary tasks. See diagram top of page 446.

Designing your GUI This is the GUI we need to create

Adding components We need to add the components in the proper order See code pages

Order We declare as class data fields input output toKms toMiles need to be used though out the class

Order Declare as local variables (to init()) inputLab dataPanel buttonPanel These are the “objects” we are placing in our GUI (this slide and previous)

Placing objects Now that we declared objects we must place them correctly First we set the layout manager We set this to FlowLayout (left to right) (top to bottom) more later We add components to the container via add() method We must add the components before adding the container.

Code dataPanel.add(inputLab); adds the inputLab label to the Panel dataPanel.add(input); adds the input field to the Panel getContentPane().add(dataPanel); What does “getContentPane” look like? Adds the dataPanel to the applets content pane

Data Panel Input Label Input Field has “focus”

Code input.requestFocus(); puts the cursor in the input field it “has focus” code then repeats previous slide to add the buttons to the button panel and the panel to the pane

Code getContentPane().add(output); adds the output area to the pane Output area

2 more important lines toMiles.addActionListener(this); toKms.addActionListener(this); Makes the buttons “work” Has them listen for user events More in next section 7.3

“Extras” Other methods exist to change components appearance component.setBackground(Color col); component.setForeground(Color col); component.setBorder(Border bor);

Example buttonPanel.setBorder(BorderFactory. createTitledBorder("Control Panel"));

Java Event Driven Model On the scale of “cool”, “very cool” or “super cool” Event driven programming is “super cool” Our program then responds to the user rather then the user responding to our program.

Java Event Model Haw events are handled is the event model. An event generator is an object that generates events. An event listener is an object that listens for and responds to events. The AWTEvent class handles these functions for Java

How to The event generator and event listener must “know about” each other for this to work. Must register itself with listener. // Register applet as listener for button toMiles.addActionListener(this); toKms.addActionListener(this);

Format generatorObject.addActionListener (listenerObject); ActionListener is an interface not a class A class must implement ActionListener

Now What? We have solved half the problem We have a listener registered for the generators Now we must make the program respond to these events

Interface Remember interfaces contain abstract methods. Implementers must define those methods ActionListener has one method actionPerformed(ActionEvent e);

Automatic actionPerformed method is called automatically when event occurs. You do not need to call this, java does this for you What do we want to do when event occurs? See code page 458

Methods and Objects See table of methods bottom page 459 Doing GUI design is simply a matter of learning to use the java GUI classes and methods Swing AWT

BTW Did you notice something “very cool” about the applet? No loop but program continues running Just keeps responding to the event A “built in” loop until you exit the app

Section 7.4 GUI in application Creating a GUI “application” Use the same basic techniques as for Applet Basically 3 changes to our applet GUI will make it an application

Step 1 Instead of extending JApplet we extend Jframe JFrame is a typical GUI “window” It has: border title buttons, minimize, maximize, close

Step 2 Replace the init() method with a constructor. The new constructor has the same body as init(). Used when application creates an instance of the object.

Step 3 Write a main method for the application class. Create the object and takes care of properly closing it when user “closes” window.

Example Code on pages of text. Application class on 464. See running code in Jbuilder and a “new” way of testing our code. embed main method directly in the worker class. Creates instance of itself

Section 7.5 Making choices Look at Check boxes not mutually exclusive can check many Look at Radio buttons mutually exclusive can only check one

Check boxes Provide boolean data to program true (checked) false (not checked) See GUI page 465 See code pages 466 – 467 Run code in Jbuilder Also look at in HTML

Radio Buttons Since radio buttons are designed to be mutually exclusive can put radio buttons in a group only one can be picked swing class ButtonGroup ButtonGroup controls that can only select one

Code Code puts buttons into an array see page 469 first create array of buttons for loop to put buttons on panel add buttons to group registers action listener Bottom loop to find one choosen

Code complete example Review code pages 470 – arrays of radio buttons 3 groups of code to set these up actionPerformed checks array to see one choosen look at in HTML

Combo boxes Allows selection of one of many choices setSelectedIndex() returns index of the selection (starts with 0) Can initialize using arrays of strings can also use addItem to add individually Review code Look at in JBuilder

Review Methods for making choices page 475

Section 7.6 This is our old friend the phone book class You looked at this several different time. They have now front-ended it with a GUI Review the code pages

Section 7.7 Inner classes Sometimes methods get quite lengthy For instance the actionPerformed() You can create separate listener classes respond to specific event respond to group of events These should be inner classes wholly contained in GUI class allows for referencing private data fields

Differences? Class visibility is private only used within the class Action event only for submit button do not need to check source already checked before sent to this class See code pages 486 – 487 See code page 488

Changes to original The class (PhoneBookGUI) no longer implements ActionListener Bottom of page 488 shows code to register new inner classes as ActionListeners. Inner classes nested somewhere in Class Not in method typically at very beginning Or more likely at very end

Java Layout Managers Determines size and placements of objects Defaults Applet flow JApplet border Panel or JPanel flow Can change via setLayout()

Flow Layout Simplest Puts as many components in row as possible When row is filled go to next row In row components are centered (default), left or right justified

Border Layout Sets up 5 areas 1 component per area Can put a container (panel) with multiple components in an area See layout middle page 491

Box layout New layout in Swing Placement in single row (X_AXIS) single column (Y_AXIS) See example middle 492 See total example pages

Grid Layout Allows use to create a 2d grid to place components. See 4x3 example top of page 497 Code page

Payroll app Review application page 499 – 508 Show GUI designer in Jbuilder new application then use designer tab create panel set flow manager to null add some controls

Common Programming errors Create listener for event generator Make sure you implement required interface.