1 / 67 COP 3503 FALL 2012 SHAYAN JAVED LECTURE 14 Programming Fundamentals using Java 1

2 / 67 Graphical-User Interfaces (GUIs)

3 / 67 So far...  Only created text-based programs  No fancy graphics (buttons! menus! text-fields!)

4 / 67 Graphical-User Interfaces (GUI)  Going to look at how to create GUIs in Java

5 / 67 Graphical-User Interfaces (GUI)  Going to look at how to create GUIs in Java  Use the SWING API (for desktop-programs)

6 / 67 Graphical-User Interfaces (GUI)  Going to look at how to create GUIs in Java  Use the SWING API (for desktop-programs)  Use the AWT API (for Java Applets – on the web)

7 / 67 The SWING API  Used to create desktop applications.

8 / 67 The SWING API  Used to create desktop applications.  Uses the Model-View-Controller software engineering design pattern.

9 / 67 Model-View-Controller design  Model:  Manages the behavior and data of the application.  Changes state.

10 / 67 Model-View-Controller design  Model:  Manages the behavior and data of the application.  Changes state.  View:  Renders the model into a form for interaction. (Button, textbox, checkbox, etc.)

11 / 67 Model-View-Controller design  Model:  Manages the behavior and data of the application.  Changes state.  View:  Renders the model into a form for interaction. (Button, textbox, checkbox, etc.)  Controller:  Receives user input and initiates a response by interacting with the model.

12 / 67 The SWING API  Example: Scrabble

13 / 67 The GUI API  Use the NetBeans IDE for easy drag-and-drop creation.

14 / 67 The GUI API  Use the NetBeans IDE for easy drag-and-drop creation.  But we are going to focus on basic code

15 / 67 The GUI API  3 Groups of classes:  Component Classes:  Buttons, Labels, TextFields, etc.

16 / 67 The GUI API  3 Groups of classes:  Component Classes:  Buttons, Labels, TextFields, etc.  Container Classes:  Frames, Panels, Applets, etc.

17 / 67 The GUI API  3 Groups of classes:  Component Classes:  Buttons, Labels, TextFields, etc.  Container Classes:  Frames, Panels, Applets, etc.  Helper Classes:  Graphics, Color, Font, etc.

18 / 67 The SWING API  Simple Window  Represented by the JFrame class

19 / 67 The SWING API import javax.swing.JFrame; public static void main(String[] args) { JFrame frame = new JFrame(“A Title”); frame.setSize(400, 300); frame.setLocation(10, 300); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); }

20 / 67 The SWING API – add components import javax.swing.*; public static void main(String[] args) { JFrame frame = new JFrame(“A Title”); JButton button = new JButton(“OK”); frame.add(button); frame.setSize(400, 300);... }

21 / 67 The SWING API – add components  A JFrame containts a content pane.

22 / 67 The SWING API – add components  A JFrame containts a content pane.  Content pane = instance of java.awt.Container;

23 / 67 The SWING API – add components  A JFrame containts a content pane.  Content pane = instance of java.awt.Container;  Objects are added to it  frame.add( Component )

24 / 67 The SWING API – add components  A JFrame containts a content pane.  Content pane = instance of java.awt.Container;  Objects are added to it  frame.add( Component )  frame.remove( Component )

25 / 67 Layout Managers  Components in content pane are laid out by layout managers.

26 / 67 Layout Managers  Components in content pane are laid out by layout managers.  Multiple types:  FlowLayout  GridLayout  BorderLayout

27 / 67 Layout Managers - FlowLayout  Components arranged left to right in order.  One row fills up, a new row is started

28 / 67 Layout Managers - FlowLayout  java.awt.FlowLayout  Properties:  alignment: int (CENTER/LEFT/RIGHT/etc.)  hgap, vgap: int (the gaps – default: 5 pixels)

29 / 67 Layout Managers - FlowLayout  java.awt.FlowLayout  Properties:  alignment: int (CENTER/LEFT/RIGHT/etc.)  hgap, vgap: int (the gaps – default: 5 pixels)  Constructors:  FlowLayout()  FlowLayout(alignment, hgap, vgap)

30 / 67 Layout Managers - FlowLayout public class ShowFlowLayout extends JFrame { public ShowFlowLayout() { // set the flow layout setLayout(new FlowLayout(FlowLayout.LEFT, 10, 20); add(new JButton(“Button”)); add(new JTextField(8)); }

31 / 67 Layout Managers - GridLayout  Arrange components in a grid (matrix) formation.  Placed left-to-right.

32 / 67 Layout Managers - GridLayout  Arrange components in a grid (matrix) formation.  Placed left-to-right.  Properties:  rows, columns: int  hgap, vgap: int (the gaps – default: 5 pixels)

33 / 67 Layout Managers - GridLayout public class ShowGridLayout extends JFrame { public ShowGridLayout() { // set the Grid layout – 3 rows, 2 columns setLayout(new GridLayout(3, 2, 10, 10); add(new JButton(“Button”)); add(new JTextField(8)); }

34 / 67 Layout Managers - BorderLayout  Default Layout for ContentPanes (Jframe)  Divides container into 5 areas:  East, West, South, North, Center  Components are added into one of these areas  Properties:  hgap, vgap: int (the gaps – default: 5 pixels)

35 / 67 Layout Managers - BorderLayout public class ShowBorderLayout extends JFrame { public ShowBorderLayout() { // set the Border Layout setLayout(new BorderLayout(10, 10); add(new JButton(“Button”), BorderLayout.EAST); add(new JTextField(8), BorderLayout.WEST); }

36 / 67 The SWING API  Looked at adding Components to the Window (Frame).  And how to lay them out.

37 / 67 The SWING API  Looked at adding Components to the Window (Frame).  And how to lay them out.  But often need “sub-windows” to create more complex interfaces.

38 / 67 Using JPanels as Subcontainers  Panels are subcontainers.

39 / 67 Using JPanels as Subcontainers  Panels are subcontainers.  Can add components to them

40 / 67 Using JPanels as Subcontainers  Panels are subcontainers.  Can add components to them  Also set layouts (default: FlowLayout)

41 / 67 Using JPanels as Subcontainers  Panels are subcontainers.  Can add components to them  Also set layouts (default: FlowLayout) JPanel panel = new JPanel(); panel.add(new JButton(“OK”));

42 / 67 Using JPanels // set the Border Layout of the JFrame setLayout(new BorderLayout(10, 10); // add a Panel to the West and East JPanel p1 = new JPanel(); add(p1, BorderLayout.WEST); JPanel p2 = new JPanel(); p2.setLayout(new GridLayout(2, 2, 5, 5)); add(p2, BorderLayout.EAST); // add components to the east panel p2.add(new JTextField(8)); p2.add(new JButton(“Button1”)); p2.add(new JTextField(8)); p2.add(new JButton(“Button2”)); // one button to the west panel p1.add(new JButton(“Button3”));

43 / 67 Adding Components  Need to add components for interaction.

44 / 67 Adding Components  Need to add components for interaction.  Some useful ones:  JButton  JTextField  JCheckBox  JComboBox  JMenuBar  etc...

45 / 67 Model-View-Controller design  Model: (ALREADY IMPLEMENTED)  Manages the behavior and data of the application.  Changes state.  View: DONE  Renders the model into a form for interaction. (Button, textbox, checkbox, etc.)  Controller:  Receives user input and initiates a response by interacting with the model.

46 / 67 Interaction and Events  Need to handle events from various GUI components.

47 / 67 Interaction and Events  Need to handle events from various GUI components.  Button clicks, text field changes, menu selection, etc.

48 / 67 Interaction and Events  Need to handle events from various GUI components.  Button clicks, text field changes, menu selection, etc.  Event-driven programming

49 / 67 Interaction and Events  Components generate different kinds of Events

50 / 67 Interaction and Events  Components generate different kinds of Events  ActionEvent, ItemEvent, ChangeEvent, MouseEvent, KeyEvent

51 / 67 Interaction and Events  Components generate different kinds of Events  ActionEvent, ItemEvent, ChangeEvent, MouseEvent, KeyEvent  Example: JButton generates ActionEvent

52 / 67 Interaction and Events  Components generate different kinds of Events  ActionEvent, ItemEvent, ChangeEvent, MouseEvent, KeyEvent  Example: JButton generates ActionEvent  Mouse pressed/moved/dragged: MouseEvent

53 / 67 Interaction and Events  Components generate different kinds of Events  ActionEvent, ItemEvent, ChangeEvent, MouseEvent, KeyEvent  Example: JButton generates ActionEvent  Mouse pressed/moved/dragged: MouseEvent  JCheckBox: ItemEvent, ActionEvent

54 / 67 Interaction and Events  Need to “listen” for Events.  Source object fires an event, and an object interested in the event handles it.  Latter object called a “listener”

55 / 67 Interaction and Events  For an object to be a listener, it needs to implement an interface.

56 / 67 Interaction and Events  For an object to be a listener, it needs to implement an interface.  Interface should correspond to the Event.  ActionListener for ActionEvent  MouseListener for MouseEvent  KeyListener for KeyEvent

57 / 67 Interaction and Events  For an object to be a listener, it needs to implement an interface.  Interface should correspond to the Event.  ActionListener for ActionEvent  MouseListener for MouseEvent  KeyListener for KeyEvent object.addXListener(...)

58 / 67 ActionListener interface class AClass implements ActionListener { public void actionPerformed(ActionEvent e) { // do whatever you want }

59 / 67 ActionListener interface class AClass implements ActionListener { public void actionPerformed(ActionEvent e) { // do whatever you want } JButton button = new JButton(“OK”); button.addActionListener(new AClass());

60 / 67 ActionListener interface  ActionEvent methods:

61 / 67 ActionListener interface  ActionEvent methods:  Object getSource(): returns the object on which the Event initially occurred. (in java.util.EventObject)

62 / 67 ActionListener interface  ActionEvent methods:  Object getSource(): returns the object on which the Event initially occurred. (in java.util.EventObject)  String getActionCommand(): returns the command string (text of the button for ex.)

63 / 67 ItemListener interface Used for check boxes, toggle buttons, etc. class AClass implements ItemListener { public void itemStatechanged(ItemEvent e) { // do whatever you want }

64 / 67 ItemListener interface  ItemEvent methods:  Object getItem(): Component-specific object.  int getStateChange(): The new state of the associated object.

65 / 67 Interaction and Events  Look at some other useful Events:  MouseEvent  KeyEvent  WindowEvent

66 / 67 Interaction and Events  Look at some other useful Events:  MouseEvent  KeyEvent  WindowEvent  Experiment!

67 / 67 Summary  Windows and Panels  Layouts  Add Components  Add Listeners  Handle Events