Week 12

1. Week 12 Graphical User Interfaces Chapter 11

2. Designing Program with Graphical User Interfaces • Programs have two parts/classes: • the User Interface • the engine • In Connect4 • User interface is board and drawing the board • The engine is what does the logic: calculates win/lose etc. • GUI is User Interface: how program is shown to user

3. Implementating GUIs:GUI parts • Components • buttons, menus, textfields, etc. • Event Handling • instead of executing methods when called (by BlueJ or in code), execute methods when an event occurs (e.g., mouse click on a button) • Layout • Where on the screen to put the components. use LayoutManager

4. GUIs • Components • JFrames and Windows • creating a Window • Menus • adding a Window to the menu • Event Handling • handling events that happen in the Window • Layouts • arranging components in the Window

5. Swing • Java has AWT (old, Abstract Window Toolkit) and Swing (based on AWT) • Swing prefixes components with J • e.g., Button is from AWT, JButton is Swing • We’ll use Swing • To use Swing: import javax.swing.*; // note ‘x’

6. Java GUI • The Java GUI packages • GUI classes are found in two packages: • AWT (Abstract Windows Toolkit) • Swing • Swing components are based on AWT classes • Java 2 released Swing as an alternative to AWT • AWT uses platform-specific GUI components • Swing is less reliant on platform-specific components AWT Swing more less reliance on platform-specific GUI components heavyweightcomponents lightweightcomponents

7. Java GUI The Java GUI inheritance hierarchy AWT LayoutManager Panel Applet JApplet Object Component Container Window Frame JFrame Color Dialog JDialog JComponent Swing Components we will use

8. Java GUI The Java GUI inheritance hierarchy JMenuBar JMenuItem AbstractButton JButton JComboBox JScrollPane JComponent … JLabel JTextArea JTextComponent JTextField JPasswordField JPanel … etc. Swing components we will use

9. Building a Window Frame (whole window) • Everything is in a top level container (JFrame) • JFrame has • Title bar • Menu bar (optional) • Content Pane title bar menu bar content pane

10. Code for a JFrame 3. pack frame. arrange components windowFrame.pack( ) 4. make the frame visible (can also make it invisible, as in quitWord) windowFrame.setVisible(true);

11. Code for a Frame To build a JFrame, do 4 things (From 150 lab3 GuiInterface.java) 1. Create new JFrame and put a title in private JFrame windowFrame = new JFrame(“Word Jumble 1.0”); 2. Tie parts to JFrame (component, menubar, etc) // if gameWordPanel already exists – type JPanel Container cp = WindowFrame.getContentPane( ); cp.add(gameWordPanel); OR windowFrame.getContentPane().add(gameWordPanel); OR (in Java5): windowFrame.add(gameWordPanel);

12. JFrame • Lots of parts to a JFrame, mostly ContentPane • content panes can hold any number of components • (4 components in windowFrame in lab3) • contentPane (only one) vs JPanel (can have lots) • Pre-Java5 • add content (components) to the contentPane • Now, add to the JFrame. adds to contentPane

13. Some Components • JButton • JPanel • JLabel • Lots, look at: http://java.sun.com/j2se/1.5.0/docs/api/javax/swing/package-summary.html

14. minimize maximize close come for free title bar { component (JPanel) Also in lab3, what to do on close (click on red X): windowFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

15. GUIs • JFrames and Windows • creating a Window • Menus • adding a Window to the menu • Event Handling • handling events that happen in the Window • Layouts • arranging components in the Window

16. Building a Window Frame (whole window) • Everything is in a JFrame • JFrame has • Title bar • Menu bar (optional) • Content Pane title bar menu bar content pane

17. Adding menus: 3 parts • JMenuBar • Displayed below the title. • Contains the menus. • JMenu • e.g. File. Contains the menu items. • JMenuItem • e.g. Open. Individual items.

18. private void makeMenuBar(JFrame frame) { JMenuBar menubar = new JMenuBar(); frame.setJMenuBar(menubar); // create the File menu JMenu fileMenu = new JMenu("File"); menubar.add(fileMenu); JMenuItem openItem = new JMenuItem("Open"); fileMenu.add(openItem); JMenuItem quitItem = new JMenuItem("Quit"); fileMenu.add(quitItem); } } To add JMenuBar to JFrame { To add JMenu to JMenuBar { To add JMenuItem to JMenu

19. Struts and Glue • Invisible components used as spacing. • Available from the Box class. • Strut: fixed size. • Component createHorizontalStrut(int width) • Component createVerticalStrut(int height) • Glue: fills available space. • Component createHorizontalGlue() • Component createVerticalGlue()

20. Pushing a menu to the right menu = new JMenu("File"); menubar.add(menu); menu = new JMenu("Filter"); menubar.add(menu); menubar.add(Box.createHorizontalGlue()); menu = new JMenu("Help"); menubar.add(menu); Glue (invisible)

21. GUIs • Components • JFrames and Windows • creating a Window • Menus • adding a Window to the menu • Event Handling • handling events that happen in the Window • Layouts • arranging components in the Window

22. Events • We can now put items on a JFrame and arrange them. We need to be able to do something with them. • Action Events • mouse click, mouse over, window action, menu choice, etc. • General, ActionListener • Something happened • in java.awt.event • (http://java.sun.com/j2se/1.5.0/docs/api/javax/swing/event/package-summary.html)

23. “Check” button in Lab 3:add ActionListener event actionPerformed in the outer class class someclass { // inside some method: b = new JButton("Check"); b.addActionListener(this); // "this" is the current class public void actionPerformed(ActionEvent e) { System.out.println("Check is " + e.getActionCommand()); checkWord(); } }

24. Action Listeners: Inner Classes class someclass { // inside some method: b = new JButton("Check"); b.addActionListener(new checkAction( )); private class checkAction implements ActionListener { public void actionPerformed(ActionEvent e) { System.out.println("Check is " + e.getActionCommand()); checkWord(); } } // end of checkAction } // end of someclass

25. A third way:anonymous inner classes //Associate actionlistener with button and write actionPerformed b = new JButton("Check"); b.addActionListener(new ActionListener( ) { public void actionPerformed(ActionEvent e) { System.out.println("Check is " + e.getActionCommand()); checkWord(); } } );

26. Anonymous class elements Anonymous object creation • b.addActionListener( • new ActionListener() • { • public void actionPerformed(ActionEvent e) • { • System.out.println("Check is " + • e.getActionCommand()); • checkWord(); • } • } • ); Class definition Actual parameter

27. GUIs • JFrames and Windows • creating a Window • Menus • adding a Window to the menu • Event Handling • handling events that happen in the Window • Layouts • arranging components in the Window

28. Layout managers • Manage limited space for components. • FlowLayout, BorderLayout, GridLayout, BoxLayout, GridBagLayout (most flexible, hardest) • Manage Container objects, e.g. a content pane. • Each imposes its own style.

29. FlowLayout

30. BorderLayoutdefault for top level containers (JFrame)

31. GridLayout

32. BoxLayout Note: no component resizing.

33. Layout Manager Lab 3 • 4 JPanels gameWordPanel, gameGuessPanel, gameButtonPanel, gameStatusPanel

34. Layout Managers – Lab 3 Container contentPane = windowFrame.getContentPane ( ); contentPane.setLayout(new GridLayout(4, 1)); OR windowFrame.getContentPane().setLayout(new GridLayout(4,1)); OR windowFrame.setLayout(new GridLayout(4, 1)); // add panels in order windowFrame.getContentPane().add(gameWordPanel); windowFrame.getContentPane().add(gameGuessPanel); windowFrame.getContentPane().add(gameButtonPanel); windowFrame.getContentPane().add(gameStatusPanel);

35. Buttons and nested layoutsUse JPanels and embedded layouts A GridLayout inside a FlowLayout inside a BorderLayout.