1. GUI Graphical User Interface

2. Outline Introduction Packages Components Layout Manager Events and Listeners Examples

3. Introduction

4. Definition Abbreviated GUI (pronounced GOO-ee). Program interface that takes advantage of the computer's graphics capabilities to make the program easier to use. User interface based on graphics (icons and pictures and menus) instead of text; uses a mouse as well as a keyboard as an input device. Includes standard formats for representing text and graphics.

5. History Douglas Engelbart's Augmentation of Human Intellect project at SRI in the 1960s developed the On-Line System, which incorporated a mouse-driven cursor and multiple windows. The first GUI was designed by Xerox Corporation's Palo Alto Research Center in 1973. Features: 3-button mouse, bit-mapped display,the use of graphical windows, ethernet network. Macintosh team at Apple Computer (included members of the Xerox PARC group) continued to develop such ideas in the first commercially successful product to use a GUI, the Apple Macintosh, released in January 1984. One reason for their slow acceptance: require considerable CPU power and a high-quality monitor.

6. Java GUI GUI frameworks Part of Java Foundation Classes (JFC) Two important packages: Abstract Window Toolkit (AWT). Provides the basic support for building GUIs. Swing. Extension of AWT, provides extensive support for building high-quality GUIs. Components, also known as widgets, are the building blocks of the visual aspect. Each GUI is characterized by its visual appearance and its behavior pattern in response to user input.

7. Packages

8. Abstract Window Toolkit

9. What is it? Is a GUI toolkit that is supplied with all Java systems. Provides the basic support for building graphical user interfaces using components Java.awt provides the classes for the interfaces AWT is designed to be portable and work across multiple platforms

10. Components: represents something that has a position and size and can be painted on the screen and receive input events. Component subclasses of the Component class. Two types: Primitive components: components that do not contain other components. Containers: contain other primitive components and containers. Component Class

11. Container Class A container is a type of component that provides a rectangular area within which other components can be organized by a layout manager. Container IS-A Component so a Container can go inside another Container Some subclasses of container class are: Dialog: window that takes input from a user Window: borderless and titleless top-level window Frame: Top-level window with a title and a border.

12. Swing Package Built on top of Abstract Windows Toolkit (AWT) Subclass of the Component class Subclass of Container class

13. What does it do? Provides components to communicate with user Input from keyboard or mouse Output to console Similar to AWT but enhanced

14. Disadvantages of AWT Poor performance Lack of sophistication Heavyweight Looks determined by Platform

15. Benefits of Swing Pluggable look and feel Constant look and behavior Eliminates overhead Lightweight Improved components More robust

16. Components

17. AWT Components

18. Swing Components

19. Components Buttons Checkboxes Radio buttons Combo boxes (drop down menus) Textfields Labels

20. The Button class creates pushbuttons with text labels. Button button = new Button("..."); add(button); A JButton can be instantiated and used in a GUI just like a java.awt.Button. JButton myButton = new JButton("Tiger"); add(myButton); Buttons

21. Checkboxes Checkboxes are toggle buttons that operate independently of other checkboxes or can be put into a group so that they operate like radio buttons. Checkbox cb = new Checkbox("..."); somePanel.add(cb); JCheckBox is similar to an AWT Checkbox that is not in a CheckboxGroup. JCheckBox cb1 = new JCheckBox("Choose Me", true);

22. Radio Buttons In AWT, radio buttons are checkboxes that belong to the same CheckboxGroup; which ensures that only one checkbox is selected at a time. CheckboxGroup cbGroup = new CheckboxGroup(); Checkbox cb1 = new Checkbox("...", cbGroup, true); add(cb1); Each JRadioButton is added to a ButtonGroup so the group behaves as a set of radio buttons. ButtonGroup rbg = new ButtonGroup(); radioButton = new JRadioButton("$45,000"); add (radioButton);

23. Combo Boxes Choice produces pull-down menus with a single selection showing, the other options get displayed when the user clicks with the mouse. Known as "combo boxes," "drop-down list boxes," or "option menus“. Choice choice = new Choice(); choice.addItem("..."); choice.addItem("...");... somePanel.add(choice); JComboBox works like AWT's Choice component JComboBox combo1 = new JComboBox(); combo1.addItem (“Mercury”);

24. TextFields Textfields create boxed areas to display and/or read a single line of text. (TextArea can display multiple lines, but no ActionEvent). Java textfields do not permit mixed fonts or colors within a single textfield. TextField lastNameField = new TextField(15); add(lastNameField); JTextField behaves very similarly to AWT TextField. JTextField tf = new JTextField(); tf.setText("TextField");

25. Labels Simple textual displays, without any associated actions. Label label = new Label("..."); add(label); A JLabel is a single line label similar to java.awt.Label. Additional functionality that a JLabel has is the ability to: Add an Icon Set the vertical and horizontal position of text relative to the Icon Set the relative position of contents within component JLabel plainLabel = new JLabel("Plain Small Label");

26. Layout Manager

27. What it is It allows to format components on the screen in a platform-independent way. LayourtManager interface Programs with a consistent and reasonable appearance

28. Flow Layout Default layout for the Panel class. Components adjust to fit screen. Components’ flow change based upon the new width and height.

29. To create a Flow Layout Three constuctors FlowLayout(align, hGap,vGap) Creates a flow layout with the alignment set to align and the horizontal and vertical gaps. FlowLayout(align)- creates a flow layout with the given aligh and the horizontal and vertical gaps set to the default value FlowLayout() – creates a flow layout with the align, horizontal and vertical gap set to the default value.

30. Example

31. Grid Layout What is it and what does it do Layout manager that arranges components in a rectangular grid All components given same size Components can be stretched vertically and horizontally

32. Implementation Constructors GridLayout (r,c,hGap,vGAp) Creates a grid layout manager with r rows and c columns and with the horizontal and vertical gaps set to hGap and vGAp GridLayout (r,c) Creates a grid layout manager with r rows and c columns and with the horizontal and vertical gaps set to 0 GridLayout () Creates a grid layout manager with a single row and with the horizontal gap set to 0

33. Examples

34. Border Layout What it is and what it does Layout manager that arranges as many as five components in five positions identified as North,South,East, and Center Can be stretched vertically or horizontally to fill the space between components

35. Constructors BorderLayout (hGap, vGap) Creates a border layout manager with the horizontal and vertical gaps set to hGap and vGap BorderLayout () Creates a border layout manager with the horizontal and vertical gaps set to 0

36. Examples

37. Events and Listeners

38. Events occur when the user interacts with the GUI. Listeners are used to respond to the event Each kind of Event is related to is own Listener

39. Events The user can interact with the Gui in some different ways: with the mouse with the keyboard with a button others

40. Listeners “Listen” the information of the event and respond to it Different mechanisms of adding listeners: part of the class defining Gui inner class separate class anonymous local class

41. Types of Events and Listeners ActionEvent  ActionListener KeyEvent  KeyListener MouseEvent  MouseListener

42. ActionEvent ActionEvent occurs when the user clicks a button, choose a menu item or press Enter in a Text file. Methods: String getActionCommand() Int getModifiers() Object getSource()

43. ActionListener ActionListener is used to respond to ActionEvent Methods: actionPerformed(ActionEvent)

44. KeyEvent KeyEvents occur when the user type at the keyboard. Methods: int getKeyChar() int getKeyCode() String getKeyText() others.

45. KeyListener KeyListener is used to respond KeyEvents Methods: keyTyped(KeyEvent) keyPressed(KeyEvent) keyReleased(keyEvent)

46. MouseEvent MouseEvent occurs when the user uses the mouse to interact with a component. Methods: getClickCount() getX() getY() Others.

47. MouseListener MouseListener is used to respond to MouseEvents Methods: mouseClicked(MouseEvent) mousePressed(MouseEvent) mouseReleased(MouseEvent) mouseEntered(MouseEvent) mouseExited(MouseEvent)

48. Examples

49. Bouncing Ball Ball (mouse) Digital Note Word Finder

50. Bouncing Ball (Framework)

51. Bouncing Ball (Code)

52. Ball (mouse)

53. public boolean mouseDown (Event e, int x, int y) { x_speed = - (x_speed); return true; }

54. Word Finder

55. Digital Note

56. Questions?