1 / 58

Chapter 7 GUI design

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

rance
Télécharger la présentation

Chapter 7 GUI design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related