GUI

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. Component Class • 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.

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. Buttons • 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);

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 and Listeners • 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. Examples • Bouncing Ball • Ball (mouse) • Digital Note • Word Finder

50. Bouncing Ball (Framework)