1. Scott Grissom, copyright 2004Ch 12: Swing Slide 1 How do I learn GUI development? Use these lecture notes to supplement chapter 12 Refer to the online documentation available from the course web site Use the sample code available on the EOS machines ~grissom/163/Demos

2. Scott Grissom, copyright 2004Ch 12: Swing Slide 2 Java JFC/Swing Java provides strong support for building GUIs through the javax.swing package Platform independence same code same appearance The book covers: containers (12.2.2) layout managers (12.2.3) event classes (12.4) listener classes (12.4) GUI components (12.3)

3. Scott Grissom, copyright 2004Ch 12: Swing Slide 3 Event-Driven Programming Events signal important user actions, like a mouse click Listeners contain methods that respond to specific events GUI components are the screen elements that a user manipulates with the mouse and keyboard Layout managers govern how the components appear on the screen

4. Scott Grissom, copyright 2004Ch 12: Swing Slide 4 Containers (12.2.2) A container is a special category of GUI components that hold other components A Japplet is a container used for applets A JFrame is used for an application A JPanel is used to group related components together for appearances

5. Scott Grissom, copyright 2004Ch 12: Swing Slide 5 Layout Managers (12.2.3) One approach is to explicitly place components setLocation(int x, int y) wrt to upper left corner this is discouraged! Java JFC layout is dynamic to allow for different screen sizes and platforms automatically sizes and places components There are several layout managers to choose from: flow layout border layout grid layout box layout (not in book) Each container has a particular layout manager as default

6. Scott Grissom, copyright 2004Ch 12: Swing Slide 6 Flow Layout Components are placed in a row from left to right in the order in which they are added New rows are created as needed Flow layout is the default layout for JPanels and Japplets Components are displayed at their preferred size Refer to sample code ~grissom/163/Demos/flowLayout.java

7. Scott Grissom, copyright 2004Ch 12: Swing Slide 7 Border Layout Defines five locations where a component can be added North, South, East, West, and Center The programmer specifies the area in which a component should appear add(BorderLayout.NORTH, comp) Only one component per location Components expand to full size Use a JPanel to hold more than one Default for JFrame Refer to sample code ~grissom/163/Demos/borderLayout.java

8. Scott Grissom, copyright 2004Ch 12: Swing Slide 8 JPanels Place multiple components inside a Panel Set the layout manager Sample Code JPanel p = new JPanel(); p.setLayout(new FlowLayout()); Jbutton b1 = new Jbutton(“one”); Jbutton b2 = new Jbutton(“two”); p.add (b1); p.add (b2); getContentPane().add(p,BorderLayout.NORTH); Refer to sample code ~grissom/163/Demos/panelLayout.java

9. Scott Grissom, copyright 2004Ch 12: Swing Slide 9 Box Layout Not covered in book Components are placed in a row OR a column as specified Create space between components Box.createRigidArea() Box.createHorizontalGlue() Sample Code BoxLayout b; b = new BoxLayout(this, BoxLayout.X_AXIS) Refer to sample code ~grissom/163/Demos/boxLayout.java

10. Scott Grissom, copyright 2004Ch 12: Swing Slide 10 Grid Layout Components are placed in a grid with a user-specified number of columns and rows Each cell is the same size Components placed left to right and top to bottom GridBag layout is a more advanced manager Feel free to experiment

11. Scott Grissom, copyright 2004Ch 12: Swing Slide 11 The Big GUI Picture Refer to the sample code on the pink handout GUIcounter.java Counter.java Copy these files, compile them and run the application Experiment by changing attributes and see the results Code available on EOS ~grissom/163/Demos/GUIcounter.java ~grissom/163/Demos/Counter.java

12. Scott Grissom, copyright 2004Ch 12: Swing Slide 12 Events & Listeners (12.4) When the user performs an action, an event is fired Special methods, event handlers, are called automatically by the system But only if the component has been registered properly For example A mother and her son at the park

13. Scott Grissom, copyright 2004Ch 12: Swing Slide 13 Buttons (as an example) Buttons only generate one kind of event, actionEvent An action event requires a special method to be provided public void actionPerformed(ActionEvent e) String str = e.getActionCommand(); if (str.equals(“sort”) or JComponent = e.getSource(); if (comp == SortButton)

14. Scott Grissom, copyright 2004Ch 12: Swing Slide 14 Using GUI Components Four Critical Steps 1)define as an instance variable 2)instantiate the component in the JFrame constructor 3)display within a container 4)register a listener For Example sortButton = new JButton (“Sort”); getContentPane().add (sortButton); sortButton.addActionListener(this);

15. Scott Grissom, copyright 2004Ch 12: Swing Slide 15 Other events Other components generate other events See Table 12.5 on page 734 Which events are fired? mouse moves over a component window is iconified JCheckbox is checked

16. Scott Grissom, copyright 2004Ch 12: Swing Slide 16 Who is listening? There are several approaches to assigning listening responsibility Each have strengths and weaknesses I prefer to have the Frame listen (Figure 12.16)

17. Scott Grissom, copyright 2004Ch 12: Swing Slide 17 GUI Components (12.3) There are several GUI components that permit specific kinds of user interaction: JTextField, JTextArea JButton, JComboBox, JCheckBox JLabel, JMenu Important Methods inherited from JComponent setBackground(Color c) setEnabled(boolean) setSize(width, height) setVisible(boolean)

18. Scott Grissom, copyright 2004Ch 12: Swing Slide 18 JTextField and JTextArea A text field displays a single line of text in a GUI It can be made editable A text area displays multiple lines of text A text area automatically has scrollbars on its bottom and right sides if needed Sample Code JTextField text = new JTextField (15); place on screen text.setText(“my name”); String str = text.getText( );

19. Scott Grissom, copyright 2004Ch 12: Swing Slide 19 JButton A button can be created with or without a label An application is usually designed such that when a button is pressed, a particular action occurs JButton generates action events Sample Code JButton b = new JButton(“label”); getContentPane().add(b); b.addActionListener(this); Sample Action Listener JButton current = (JButton) e.getSource(); if (current == b) // do something

20. Scott Grissom, copyright 2004Ch 12: Swing Slide 20 JComboBox A combo box displays a list of choices when pushed The user can then scroll through and choose the appropriate option JComboBox generates action events and item events Sample Code String[] pets = {“bird”, “cat”, “dog”, “rabbit”}; JCombo petList = new JComboBox(pets); petList.setSelectedIndex(3); contentPane().add(petList); petList.addItemListener(this); Sample Item Listener JComboBox cb = (JComboBox) e.getSource(); String pet = (String) cb.getSelectedItem();

21. Scott Grissom, copyright 2004Ch 12: Swing Slide 21 JOptionPanes Simple solution for common message boxes that requires little code Different styles are provided WARNING_MESSAGE ERROR_MESSAGE PLAIN_MESSAGE Sample Code JOptionPane.showMessageDialog (frame, “my specific warning message”, “some title”, JOptionPane.WARNING_MESSAGE); JOptionPane.showMessageDialog (frame, “my specific error message”, “some title”, JOptionPane.ERROR_MESSAGE);

22. Scott Grissom, copyright 2004Ch 12: Swing Slide 22 JFileChooser (not in book) Allows a user to select a file by navigating directories The selected filename including the full path are returned Programmer chooses between a Save or Open dialog Refer to the online documentation for several customized options including file filters Sample Code chooser = new JFileChooser( ); int choice = chooser.showOpenDialog(this); if (choice == JFileChooser.APPROVE_OPTION){ File f = chooser.getSelectedFile( ); // do something with the file }

23. Scott Grissom, copyright 2004Ch 12: Swing Slide 23 Menus (12.4) Create pull down menus They appear in the menu bar Advanced Options keyboard shortcuts cascading menus adding icons Sample code to create a menu // create the menu bar menuBar = new JMenuBar(); // build a menu fileMenu = new JMenu(“File”); quitItem = new JMenuItem(“Quit”); quitItem.addActionListener(this); fileMenu.add(quitItem); // add menu to the bar menuBar.add(fileMenu);

24. Scott Grissom, copyright 2004Ch 12: Swing Slide 24 More Menus Menu Items generate action events Sample Action Listener if (e.getSource() == quitItem) // do something

25. Scott Grissom, copyright 2004Ch 12: Swing Slide 25 Class Play three GUI components GUI 1 GUI 2 GUI 3 two event listeners clap double clap four methods the user

26. Scott Grissom, copyright 2004Ch 12: Swing Slide 26 Window Events Windows generate a number of events the most important for us is the close event Create a window adaptor to hide most of the methods class myWindowHandler extends WindowAdapter{ public void windowClosing(WindowEvent e){ System.exit(0); } Register this listener from within the GUI constructor addWindowListener (new myWindowHandler());

27. Scott Grissom, copyright 2004Ch 12: Swing Slide 27 Model View Pattern Separate GUI front end from the application provides flexibility for future interface development View create frames and components create instance of model handle events Model manage data respond to View requests should not know anything about the View Responsibilities Tom and Mary have their own jobs and will be upset if someone else does it

28. Scott Grissom, copyright 2004Ch 12: Swing Slide 28 GUI Design Careful design of a graphical user interface is key to a viable software system To the user, the user interface is the system For each situation, consider which components are best suited and how they should best be arranged Group Activity Design a VCR display with TV screen, play, stop, ff, rewind, volume control, channel controls