Modern Event-Driven GUI Design in Java Programming

1. Chapter 7 GUI design

2. 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)

3. 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

4. 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

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

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

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

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

9. Example • See components bottom of page 441 • GUI design page 442

10. Hierarchy • Page 443 • 4 abstract classes • Container • Component • JComponent • AbstractButton

11. 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

12. 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

13. 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

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

15. Designing your GUI • This is the GUI we need to create

16. Adding components • We need to add the components in the proper order • See code pages 448 - 449

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

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

19. 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.

20. 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

21. Data Panel Input Label Input Field has “focus”

22. 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

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

24. 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

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

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

27. 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.

28. 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

29. 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);

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

31. 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

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

33. 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

34. 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

35. 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

36. 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

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

38. 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.

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

40. Example • Code on pages 462-463 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

41. 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

42. 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

43. 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

44. 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

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

46. 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 472-473 • Look at in JBuilder

47. Review • Methods for making choices • page 475

48. 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 480 - 483

49. 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

50. 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