COP 3503 FALL 2012 Shayan Javed Lecture 14

1. COP 3503 FALL 2012ShayanJavedLecture 14 Programming Fundamentals using Java

2. Graphical-User Interfaces (GUIs)

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

4. Graphical-User Interfaces (GUI) • Going to look at how to create GUIs in Java

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

6. 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. The SWING API • Used to create desktop applications.

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

9. Model-View-Controller design • Model: • Manages the behavior and data of the application. • Changes state.

10. 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. 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. The SWING API • Example: Scrabble

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

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

15. The GUI API • 3 Groups of classes: • Component Classes: • Buttons, Labels, TextFields, etc.

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

17. 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. The SWING API • Simple Window • Represented by the JFrame class

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

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

21. The SWING API – add components • A JFramecontaints a content pane.

22. The SWING API – add components • A JFramecontaints a content pane. • Content pane = instance ofjava.awt.Container;

23. The SWING API – add components • A JFramecontaints a content pane. • Content pane = instance ofjava.awt.Container; • Objects are added to it • frame.add( Component )

24. The SWING API – add components • A JFramecontaints a content pane. • Content pane = instance ofjava.awt.Container; • Objects are added to it • frame.add( Component ) • frame.remove( Component )

25. Layout Managers • Components in content pane are laid out by layout managers.

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

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

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

29. 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. Layout Managers - FlowLayout public class ShowFlowLayoutextendsJFrame { publicShowFlowLayout() { // set the flow layout setLayout(newFlowLayout(FlowLayout.LEFT, 10, 20); add(newJButton(“Button”)); add(newJTextField(8)); } }

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

32. 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. Layout Managers - GridLayout public class ShowGridLayoutextendsJFrame { publicShowGridLayout() { // set the Grid layout – 3 rows, 2 columns setLayout(newGridLayout(3, 2, 10, 10); add(newJButton(“Button”)); add(newJTextField(8)); } }

34. 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. Layout Managers - BorderLayout public class ShowBorderLayoutextendsJFrame { publicShowBorderLayout() { // set the Border Layout setLayout(newBorderLayout(10, 10); add(newJButton(“Button”), BorderLayout.EAST); add(newJTextField(8), BorderLayout.WEST); } }

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

37. 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. Using JPanels as Subcontainers • Panels are subcontainers.

39. Using JPanels as Subcontainers • Panels are subcontainers. • Can add components to them

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

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

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

43. Adding Components • Need to add components for interaction.

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

45. 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. Interaction and Events • Need to handle events from various GUI components.

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

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

49. Interaction and Events • Components generate different kinds of Events

50. Interaction and Events • Components generate different kinds of Events • ActionEvent, ItemEvent, ChangeEvent, MouseEvent, KeyEvent