1. 1 Graphical User Interfaces Introduction zUsers have become accustomed to using a graphical user interface (GUI) through which they interact with a program  Java provides strong support for building GUIs through the java.awt package zThis lecture focuses on: yevent-driven programming yGUI components ycontainers and component hierarchies ylayout managers

2. 2 GUI Elements zThe key elements of a Java graphical user interface are: yGUI components ylayout managers yevent processing zGUI components, such as text fields and buttons, are the screen elements that a user manipulates with the mouse and keyboard zLayout managers govern how the components appear on the screen zEvents signal important user actions, like a mouse click

3. 3 Event-Driven Programming zPrograms with GUIs must respond to events, generated by GUI components, that indicate that specific actions have occurred zA special category of classes, called listeners, wait for events to occur zTherefore, a GUI program is composed of: ythe code that presents the GUI to the user ythe listeners that wait for events to occur ythe specific code that is executed when events occur

4. 4 Event-Driven Programming zThere is a listener interface defined for each event type zEach listener interface contains the abstract methods required to respond to specific events zA listener class implements a particular listener interface zListeners are "added" to a particular GUI component zWhen a component generates an event, the method corresponding to that event is executed in the listener zSee the mimicmimic Mimic.javaMimic.java mimic-GUI mimic-listnermimic-GUI mimic-listner

5. 5 The GUI Program Model Listeners Program- specific GUI Event effects Add listeners Handle events

6. 6 Event Interfaces zMultiple listeners can be added to a component zMultiple components can be processed by the same listener zFurthermore, one listener class can implement multiple listener interfaces zTherefore one class can listen for many types of events zSee Events AppletEvents Applet Events.java

7. 7 Example Event Interfaces Some Interfaces and classes (see the Component Class Hierarchy in slide 16) zActionListener interface contains ActionPerformed(ActionEvent) for events generated by Button, List, TexField, and MenuItem classes zWindowListener interface for events generated by the Window class zFor the Component class ComponentListener, MouseListener, KeyListner, and FocusListener

8. 8 Event Classes in the Package java.awt.event

9. 9

10. 10 Listener Interfaces in java.awt.event

11. 11

12. 12

13. 13 Summary of Event Handling in AWT zA listener object is an instance of a class that implements a listener interface zAn event source is an object that can register listener objects and send them event objects eventSourceObject.addEventListener(eventListenerObject); zThe event source sends out event objects to all registered listeners when an event occurs zThe listener objects determine their reaction to the event

14. 14 Containers zA container is a special category of GUI components that group other components zAll containers are components, but not all components are containers zAn applet is a container zTherefore, buttons, text fields, and other components can be added to an applet to be displayed zEach container has an associated layout manager to control the way components in it are displayed

15. 15 Containers zSome containers must be attached to another graphical surface: ypanel yapplet zAn applet is a special type of a panel that is attached to a browser or appletviewer window zOther containers can be moved independently: ywindow yframe ydialog

16. 16 Containers Component Container Window Panel Dialog Frame Applet Other GUI Components Button, scrollbar,..etc

17. 17 Component Hierarchies zA GUI is created when containers and other components are put together zThe relationships between these components form a component hierarchy zFor example, an applet can contain panels which contain other panels which contain buttons, etc.  See Rings_Display.java The AppletRings_Display.javaThe Applet zCareful design of the component hierarchy is important for visually pleasing and consistent GUIs

18. 18 GUI Components zThere are several GUI components that permit specific kinds of user interaction: ylabels ytext fields ytext areas ylists ybuttons yscrollbars

19. 19 Labels zA label defines a line of text displayed on a GUI zLabels are static in the sense that they cannot be selected or modified by the human user once added to a container  A label is instantiated from the Label class  The Label class contains several constructors and methods for setting up and modifying a label's content and alignment

20. 20 Text Fields and Text Areas zA text field displays a single line of text in a GUI zIt can be made editable, and provide a means to get input from the user zA text area is similar, but displays multiple lines of text  They are defined by the TextField and TextArea classes zA text area automatically has scrollbars on its bottom and right sides  See Fahrenheit.java The applet Fahrenheit.javaThe applet

21. 21 Lists zA list, in the Java GUI sense, is used to display a list selectable strings zA list component can contain any number of strings and can be instantiated to allow multiple selections within it zThe size of the list is specified by the number of visible rows or strings within it zA scrollbar will automatically appear on the right side of a list if the number of items exceed the visible area  A list is defined by the List class

22. 22 Buttons  The java.awt package supports four distinct types of buttons: yPush buttons yChoice Buttons yCheckbox buttons yRadio buttons zEach button type serves a particular purpose

23. 23 Push Button zA push button is a single button which can be created with or without a label zA system is usually designed such that when a push button is pressed, a particular action occurs  It is defined by the Button class private Button uppercase = new Button ("Uppercase"); private Button lowercase = new Button ("Lowercase");

24. 24 Choice button zA choice button is a single button which displays a list of choices when pushed zThe user can then scroll through and choose the appropriate option zThe current choice is displayed next to the choice button  It is defined by the Choice class private Choice font_choice = new Choice(); font_choice.addItem ("Courier"); font_choice.addItem ("Times"); font_choice.addItem ("Helvetica");

25. 25 Checkbox button zA checkbox button can be toggled on or off zA set of checkbox buttons are often used to define a set of options as a group, though one can be used by itself zIf used in a group, more than one option can be chosen at any one time  Defined by the Checkbox class private Checkbox bold = new Checkbox ("Bold"); private Checkbox italic = new Checkbox ("Italic");

26. 26 Radio buttons zA radio button, like a checkbox button, is toggled on or off zRadio buttons must be grouped into a set, and only one button can be selected at any one time zWhen one button of a group is selected, the currently selected button in that group is automatically reset zThey are used to select among a set of mutually exclusive options  Radio button sets are defined by the Checkbox and CheckboxGroup classes

27. 27 Radio Button private CheckboxGroup topic = new CheckboxGroup(); private Checkbox comedy = new Checkbox ("Comedy", topic, true); private Checkbox philosophy = new Checkbox ("Philosophy", topic, false); private Checkbox carpentry = new Checkbox ("Carpentry", topic, false);

28. 28 Scrollbars zA scrollbar is a slider that indicates a relative position or quantity zThey are automatic on text areas and list components, but can be used independently zThe position of the slider in the range corresponds to a particular numeric value in a range associated with the scrollbar  A scrollbar is defined by the Scrollbar class  See Zoom.java The Applet Zoom.javaThe Applet

29. 29 Layout Managers  There are five predefined layout managers in the java.awt package: yflow layout yborder layout ycard layout ygrid layout ygrid bag layout zEach container has a particular layout manager associated with it by default zA programmer can also create custom layout managers

30. 30

31. 31 Flow Layout zComponents are placed in a row from left to right in the order in which they are added zA new row is started when no more components can fit in the current row zThe components are centered in each row by default zThe programmer can specify the size of both the vertical and horizontal gaps between the components zFlow layout is the default layout for panels and applets  See Flow.java The Applet Flow.javaThe Applet

32. 32 Grid Layout zComponents are placed in a grid with a user- specified number of columns and rows zEach component occupies exactly one grid cell zGrid cells are filled left to right and top to bottom zAll cells in the grid are the same size  See Grid.java The Applet Grid.javaThe Applet

33. 33 Border Layout zDefines five locations each of which a component or components can be added yNorth, South, East, West, and Center zThe programmer specifies the area in which a component should appear zThe relative dimensions of the areas are governed by the size of the components added to them  See Border.java The Applet Border.javaThe Applet

34. 34 Border Layout North South West East Center

35. 35 Card Layout zComponents governed by a card layout are "stacked" such that only one component is displayed on the screen at any one time zComponents are ordered according to the order in which they were added to the container zMethods control which component is currently visible in the container  See Card.java The Applet Card.javaThe Applet

36. 36 Grid Bag Layout zDesigned as a two-dimensional grid of columns and rows zHowever, not all cells in the grid are the same size zComponents may span multiple columns and rows  Each component in a grid bag layout is associated with a set of constraints, defined by the GridBagConstraints class zA grid bag layout is the most versatile, and most complex, of the predefined layout managers  See Grid_Bag.java The Applet Grid_Bag.javaThe Applet

37. 37 GUI Design zCareful design of a graphical user interface is key to a viable software system zTo the user, the user interface is the system zFor each situation, consider which components are best suited and how they should best be arranged  See Quotes.java The Applet Quotes.javaThe Applet