1. 1 UFCE3T-15-M Object- oriented Design and Programming Block 3 GUI Programming Jin Sa

2. 2 Objectives GUI components –To distinguish simple GUI components. –To create user interfaces using frames, panels, and some simple UI components –To use JPanel as subcontainers Layout Managers –To understand the role of layout managers –To use the FlowLayout, GridLayout, and BorderLayout managers to layout components in a container

3. 3 Objectives Event-driven programming –To explain the concept of event-driven programming –To understand event, event source, and event classes –To register listener objects in the source object; to declare listener classes and write the code to handle events –To understand how an event is handled

4. 4 Objectives Graphics –To specify colors using the Color class –To paint graphics using the paintComponent method on a panel –To draw strings, lines, rectangles and ovals using the drawing methods in the Graphics class

5. 5 Graphical User Interface A Graphical User Interface (GUI) presents a number of graphical elements to the user to interact with the program. Examples: windows, menus, buttons, text areas. AWT and Swing: standard sets of classes in Java for building GUIs. In Java, to write a GUI program, we can derive new classes from those provided in AWT or Swing.

6. 6 Examples of GUI Objects Button LabelText field Check Box Radio Button Combo Box

7. 7 Swing vs. AWT When Java was introduced, the GUI classes were bundled in a library known as the Abstract Windows Toolkit (AWT). With the release of Java 2, the AWT user-interface components were replaced by a more robust, versatile, and flexible library known as Swing components.

8. 8 Frames Frame is a window that is not contained inside another window. Frame is the basis to contain other user interface components in Java GUI applications. The Frame class can be used to create windows. For Swing GUI programs, use JFrame class to create widows.

9. 9 Creating Frames import javax.swing.JFrame; import javax.swing.JButton; import java.awt.*; public class MyFrame extends JFrame { MyFrame(String title) { setTitle(title); setSize(400,300); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); } public static void main(String[] args) { MyFrame frame = new MyFrame("MyFrame"); } } See MyFrame.java in CodeBlock3

10. 10 JButton Some of the JButton constructors: JButton() JButton(String text)

11. 11 JTextField A text field is an input area where the user can type in characters. Text fields are useful in that they enable the user to enter in variable data (such as a name or a description). JTextField(int columns) Creates an empty text field with the specified number of columns. JTextField(String text) Creates a text field initialized with the specified text. JTextField(String text, int columns) Creates a text field initialized with the specified text and the column size. getText() Returns the string from the text field. setText(String text) Puts the given string in the text field.

12. 12 JLabel A label is a display area for a short text. JLabel() JLabel(String text)

13. 13 Container Some GUI components are called containers because they can contain a number of components. Examples: windows, frames, panels. Often we need to display a number of components on the screen. By putting these components into a number of containers makes it easier to manage their presentation on the screen.

14. 14 Adding Components into a Frame // Add a button into the frame getContentPane().add(new JButton("OK")); Title bar Content pane See MyFrame.java in CodeBlock3

15. 15 Content Pane The content pane is a subclass of Container. The statement in the previous example can be replaced by the following lines: Container container = getContentPane(); container.add(new JButton("OK")); The content pane container is automatically created when a JFrame object is created. A JFrame object uses the content pane to hold components in the frame.

16. 16 Using Panels as Sub-Containers Panels act as sub-containers for grouping user interface components. It is recommended that you place the user interface components in panels and place the panels in a frame. You can also place panels in a panel. To add a component to JFrame, you actually add it to the content pane of JFrame. To add a component to a panel, you add it directly to the panel using the add method.

17. 17 Creating a JPanel You can use new JPanel() to create a panel with a default FlowLayout manager or new JPanel(LayoutManager) to create a panel with the specified layout manager. Use the add(Component) method to add a component to the panel. For example, JPanel p = new JPanel(); p.add(new JButton("OK"));

18. 18 Layout Managers The GUI components are placed in containers. Each container has a layout manager to tell us how the GUI components within the container can be arranged. Layout managers are set in containers using the setLayout(LayoutManager) method in a container.

19. 19 Kinds of Layout Managers FlowLayout GridLayout BorderLayout

20. 20 The FlowLayout Manager The components are arranged in the container from left to right in the order in which they were added. When one row becomes filled, a new row is started. ShowFlowLayout

21. 21 FlowLayout Constructors public FlowLayout(int alignment) Constructs a new FlowLayout with a specified alignment and a default gap of five pixels for both horizontal and vertical. public FlowLayout() Constructs a new FlowLayout with a default center alignment and a default gap of five pixels for both horizontal and vertical.

22. 22 Example of the FlowLayout Manager Write a program that adds three labels and text fields into the content pane of a frame with a FlowLayout manager. (Not ideal, see GridLayout later.) ShowFlowLayoutName

23. 23 The GridLayout Manager The GridLayout manager arranges components in a grid (matrix) formation with the number of rows and columns defined by the constructor. The components are placed in the grid from left to right starting with the first row, then the second, and so on.

24. 24 A GridLayout Constructor public GridLayout(int rows, int columns) Constructs a new GridLayout with the specified number of rows and columns.

25. 25 Example of the GridLayout Manager Rewrite the program in the preceding example using a GridLayout manager instead of a FlowLayout manager to display the labels and text fields. ShowGridLayout

26. 26 The BorderLayout Manager The BorderLayout manager divides the container into five areas: East, South, West, North, and Center. Components are added to a BorderLayout by using the add method. add(Component, constraint), where constraint is BorderLayout.EAST, BorderLayout.SOUTH, BorderLayout.WEST, BorderLayout.NORTH, or BorderLayout.CENTER.

27. 27 Example of the BorderLayout ShowBorderLayout

28. 28 Example This example uses panels to organize components. The program creates a user interface for a Microwave oven. TestPanels

29. 29 Event-driven Programming GUI components allow users to interact with them, which generate events. Actions can be taken to respond to the events. Event-driven programming is a technique for constructing programs that operate in response to events as they occur. See the effect of ShowActionEvent.java and TestActionEvent.java

30. 30 Event-driven Programming The object in which an event is generated is called the source object; the object in which corresponding actions are performed is called the listening object (or the listener). Sources: button1 and button2 in ShowActionsEvent Listening object: this object in ShowActionEvent;

31. 31 Event-driven Programming The programmer must explicitly register the listener object with the source object. jbtOk.addActionListener(btListener); button1.addActionListener(this);

32. 32 Events An event can be defined as a type of signal to the program that something has happened. The event is generated by external user actions such as mouse movements, mouse clicks, and keystrokes, or by the operating system, such as a timer.

33. 33 Selected User Actions SourceEvent Type User ActionObjectGenerated Click a button JButtonActionEvent Press return on a text field JTextFieldActionEvent Window opened, closed, etc. WindowWindowEvent Mouse pressed, released, etc. ComponentMouseEvent Key released, pressed, etc. ComponentKeyEvent

34. 34 Event Classes There are different kinds of events, e.g. press buttons, select items, closing windows. Java has pre-defined classes to represent different kinds of events. Each kind of event is defined as a class. ActionEvent defines events such as pressing a button. WindowEvent defines events such as closing a window and opening a window. ItemEvent defines events such as select an item.

35. 35 Event Information An event object contains whatever properties are pertinent to the event. You can identify the source object of the event using the getSource() instance method

36. 36 Listener Interfaces For each event class, Java also has a corresponding action (method) class or interface, e.g. For ActionEvent, the ActionListener interface specifies a method to deal with the events in ActionEvent. For WindowEvent, the WindonListener interface specifies a set of methods such as windowClosing and windowOpened. For ItemEvent, the ItemListener interface specifies a set of methods such as itemStateChanged.

37. 37 Handling Events If an object is registered to listen to a particular class of events, that object needs to implement the corresponding interface and the listening object must implement all the methods specified in the interface.

38. 38 Selected Event Handlers Event ClassListener InterfaceListener Methods (Handlers) ActionEventActionListeneractionPerformed(ActionEvent) ItemEventItemListeneritemStateChanged(ItemEvent) WindowEventWindowListenerwindowClosing(WindowEvent) windowOpened(WindowEvent) windowIconified(WindowEvent) windowDeiconified(WindowEvent) windowClosed(WindowEvent) windowActivated(WindowEvent) windowDeactivated(WindowEvent) MouseEventMouseListenermousePressed(MouseEvent) mouseReleased(MouseEvent) mouseClicked(MouseEvent) mouseExited(MouseEvent) mouseEntered(MouseEvent)

39. 39 Example showActionEvent.java showActionListener.java

40. 40 Example with more than one listener A source event may be registered with more than one listener. See ShowActionListner.java

41. 41 The Color Class You can set colors for GUI components by using the java.awt.Color class. Thirteen standard colors (black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange, pink, red, white, yellow) are defined as constants in java.awt.Color.

42. 42 Setting Colors You can use the following methods to set the component’s background and foreground colors: setBackground(Color c) setForeground(Color c) Example: see myFrame.java

43. 43 Drawing in Swing JPanel can be used to draw graphics (including text) and enable user interaction. To draw in a panel, you usually create a new class that extends JPanel and override the paintComponent method to tell the panel how to draw things. You can then display strings, draw geometric shapes, and view images on the panel. void paintCompnenet(Graphics g)

44. 44 Graphics The Graphics object g is created automatically by the JVM for every visible GUI component. This object controls how information is drawn. You can use various drawing methods defined in the Graphics class to draw strings and geometric figures.

45. 45 Java Coordinate System

46. 46 paintComponent The paintComponent method is automatically invoked to paint the graphics context when the component is first displayed or whenever the component needs to be redisplayed. Invoking super.paintComponent(g) is necessary to ensure that the viewing area is cleared before a new drawing is displayed. If the user wishes to invoke the paintComponent method, the user uses the repaint() method, which causes the paintComponent to be invoked by the system. The user should never invoke the paintComponent method directly.

47. 47 Drawing Geometric Figures and Strings Drawing Lines, e.g.drawLine(50,50,100,200) Drawing Rectangles, e.g. drawRect(20,20,100,50) Drawing Ovals, e.g. drawOval(30,30,50,50); Drawing Strings, e.g. drawString(Hello”, 50,50);

48. 48 Example Concept: extends JFrame, uses container to arrange components, uses the Graphics object, event driven prog. See MyDrawing.java