1. Problem Solving with Data Structures using Java: A Multimedia Approach Chapter 13: User Interface Structures

2. Chapter Objectives

3. Story Building a Graphical User Interface in Java Adding pieces to a JFrame Buttons, panels, etc. Constructing a GUI is building a tree Layout managers Layout managers are GUI tree renderers Making out GUIs do something Listeners Building a tool for picture manipulations

4. Old style Java: Abstract Window Toolkit - AWT Original Graphical User Interface (GUI) Classes Container Objects Frame - Main window with title and border. Panel - groups components Canvas - create custom components Input and Output Classes Label - not editable text Button - pushing fires an event Checkboxes and Radio Buttons TextField - input and output of text TextArea - input and output of multiple lines of text List - Select one or more items from a displayed list Choice - Select one from a drop down list

5. From AWT to Swing AWT had many problems. Users didn’t like the “look” of AWT user interfaces. Programmers had a hard time using AWT. Sun released a new user interface toolkit called Swing. Easier for developers. More flexible to make a look that users will like.

6. Basic components of Swing A main window is called a JFrame. A group of components (e.g., a set of radio buttons) is collected in a JPanel, then placed in a JFrame.

7. Swing - javax.swing Replacements for most AWT components JButton – was Button (images and text) New GUI components in Swing For Viewing Trees - JTree For showing two things at once: Split Pane - JSplitPane Table - JTable Supports multiple look-and-feel themes Java (also called metal), Windows, Mac, Motif

8. Swing Top-Level Containers JFrame - main window with title, maybe a menu bar, and the ability to minimize, maximize, and close the window JApplet - main window for an applet. Inherits from java.applet.Applet JDialog – pop-up window for simple communication with the user Like the JFileChooser

9. Swing General Containers JPanel - group components JScrollPane - add scroll bars to a component JSplitPane - display two separate panes

10. Working with a JFrame Pass the title when you create it JFrame frame = new JFrame("FrameDemo"); Add components to the content pane JLabel label = new JLabel("Hello World"); frame.getContentPane().add(label, BorderLayout.CENTER); Set the size of the JFrame frame.pack(); // as big as needs to be to display contents Display the JFrame frame.setVisible(true); // display the frame

11. JFrame Options When creating a GUI application Have your main class inherit from JFrame So the new class is a JFrame Or have your main class inherit from JPanel And create a JFrame in the main() method: Create the main class object Add the main class object to the content pane of the JFrame If your class inherits from JPanel It can be reused in another application Even an applet

12. GUITree Class import javax.swing.*; // Need this to reach Swing components /** * A GUI that has various components in it, to demonstrate * UI components and layout managers (rendering) */ public class GUItree extends JFrame { /** * Constructor that takes no arguments */ public GUItree() { /* create the JFrame with the title */ super("GUI Tree Example"); /* Put in a panel with a label in it */ JPanel panel1 = new JPanel(); this.getContentPane().add(panel1); JLabel label = new JLabel("This is panel 1!"); panel1.add(label); //NOTICE THAT THIS IS COMMENTED OUT! // Put in another panel with two buttons in it JPanel panel2 = new JPanel(); this.getContentPane().add(panel2); JButton button1 = new JButton("Make a sound"); panel2.add(button1); JButton button2 = new JButton("Make a picture"); panel2.add(button2); //

13. Rest of GUITree /* set the size to fit the contents and show it */ this.pack(); this.setVisible(true); } /** test this class */ public static void main(String[] args){ GUItree gt = new GUItree(); }

14. Whole GUITree public GUItree(){ super("GUI Tree Example"); /* Put in a panel with a label in it */ JPanel panel1 = new JPanel(); this.getContentPane().add(panel1); JLabel label = new JLabel("This is panel 1!"); panel1.add(label); /* Put in another panel with two buttons in it */ JPanel panel2 = new JPanel(); this.getContentPane().add(panel2); JButton button1 = new JButton("Make a sound"); panel2.add(button1); JButton button2 = new JButton("Make a picture"); panel2.add(button2); this.pack(); this.setVisible(true); }

15. Where did panel1 go? Why can we see it in the original one (left), but not with panel2 (right)? It’s there, but the current rendering is smashing it all together.

16. GUItree is a tree JFrame JPanel JLabel “This is panel1!” JPanel JButton “Make a sound” JButton “Make a picture” All the components are there. Which are visible depends on how the components are placed in the window display – that is, how they are rendered.

17. Layout Managers are renderers We can specify exactly where things go. setLayout(null) - the programmer must give all components a size and position setBounds(topLeftX,topLeftY,width,height); Better: Use a Layout Manager! Arranges the components in a container and sets their size Handles resizing components when the main window is resized The programmer just adds the components to the container

18. Layouts - Flow, Border, Grid Flow Layout - left to right, no extra space Border Layout - Center item gets extra space Grid Layout - same size components

19. Flowed GUITree /** * A GUI that has various components in it, to demonstrate * UI components and layout managers (rendering) **/ import javax.swing.*; // Need this to reach Swing components import java.awt.*; // Need this to reach FlowLayout public class GUItreeFlowed extends JFrame { public GUItreeFlowed(){ super("GUI Tree Flowed Example"); this.getContentPane().setLayout(new FlowLayout()); /* Put in a panel with a label in it */ JPanel panel1 = new JPanel(); this.getContentPane().add(panel1); JLabel label = new JLabel("This is panel 1!"); panel1.add(label); /* Put in another panel with two buttons in it */ JPanel panel2 = new JPanel(); this.getContentPane().add(panel2); JButton button1 = new JButton("Make a sound"); panel2.add(button1); JButton button2 = new JButton("Make a picture"); panel2.add(button2); this.pack(); this.setVisible(true); } } > GUItreeFlowed gtf = new GUItreeFlowed();

20. Automatically reflows when resized Made bigger

21. Bordered GUItree /** * A GUI that has various components in it, to demonstrate * UI components and layout managers (rendering) **/ import javax.swing.*; // Need this to reach Swing components import java.awt.*; // Need this to reach BorderLayout public class GUItreeBordered extends JFrame { public GUItreeBordered(){ super("GUI Tree Bordered Example"); this.getContentPane().setLayout(new BorderLayout()); /* Put in a panel with a label in it */ JPanel panel1 = new JPanel(); this.getContentPane().add(panel1,BorderLayout.NORTH); JLabel label = new JLabel("This is panel 1!"); panel1.add(label); /* Put in another panel with two buttons in it */ JPanel panel2 = new JPanel(); this.getContentPane().add(panel2,BorderLayout.SOUTH); JButton button1 = new JButton("Make a sound"); panel2.add(button1); JButton button2 = new JButton("Make a picture"); panel2.add(button2); this.pack(); this.setVisible(true); } > GUItreeBordered gtb = new GUItreeBordered();

22. Resizing now follows borders Made bigger

23. Other Layouts - None, GridBag, Card None (null) - programmer specified GridBag - flexible grid Card - one card shown at a time

24. BoxLayout Two types Horizontal - BoxLayout.X_AXIS Vertical - BoxLayout.Y_AXIS Can use rigidAreas to leave a set amount of space between components Box.createRigidArea(new Dimension(0,5))); Can use horizontal and/or vertical glue to take up extra space Box.createHorizontalGlue());

25. Boxed GUItree /** * A GUI that has various components in it, to demonstrate * UI components and layout managers (rendering) **/ import javax.swing.*; // Need this to reach Swing components public class GUItreeBoxed extends JFrame { public GUItreeBoxed(){ super("GUI Tree Boxed Example"); this.getContentPane().setLayout(new BoxLayout(this.getContentPane(), BoxLayout.Y_AXIS)); /* Put in a panel with a label in it */ JPanel panel1 = new JPanel(); this.getContentPane().add(panel1); JLabel label = new JLabel("This is panel 1!"); panel1.add(label); /* Put in another panel with two buttons in it */ JPanel panel2 = new JPanel(); this.getContentPane().add(panel2); JButton button1 = new JButton("Make a sound"); panel2.add(button1); JButton button2 = new JButton("Make a picture"); panel2.add(button2); this.pack(); this.setVisible(true); } BoxLayout is weird—it takes the paneas an input, and whether you want vertical or horizontal (Y or X_AXIS) “boxing”

26. Differs in resizing behavior: It’s all in boxes (not borders)

27. Which Layout to Use? An applet or application can have multiple panels (JPanel) and have a different layout in each panel. Panels can be inside of other panels. If you want components to not use extra space and stay centered then use FlowLayout() Or use BorderLayout and put one component that uses all extra space in the center. Use a Box and line up components vertically or horizontally

28. A Calvacade of Swing Components Next few slides show you some of the many user interface components in Swing. You don’t have to know all of these! They’re here for your benefit. These are not in the textbook. Wait a few slides, and we’ll go through how to use basic buttons and text.

29. Swing JScrollPane JScrollPane - adds scroll bars to component textArea = new JTextArea(5, 30); JScrollPane scrollPane = new JScrollPane(textArea); contentPane.add(scrollPane, BorderLayout.CENTER);

30. Swing Special Purpose Containers JTabbedPane - display contents of current tab JToolBar - groups buttons with icons JOptionPane - display dialog box JInternalFrame - inside frames

31. Swing Text Components JLabel - not editable text and/or image JLabel firstNameLabel = new JLabel(“Label 5”,dukeIcon); JTextField - one line text entry and/or display JTextField nameField = new JTextField(40); String name = nameField.getText(); JPasswordField - hides typed characters JPasswordField passField = new JPasswordField(8); String password = passField.getPassword(); JTextArea - multi-line text entry and/or display JTextArea commentArea = new JTextArea(2,30); String comment = commentArea.getText(); commentArea.setText(comment);

32. Swing List Components JList - displays a list of items and user may select one or more Color colors[] = {“Black”, “Blue”, “Green}; JList colorList = new JList(colors); colorList.setVisibleRowCount(2); String color = colorList.getSelectedValue(); JComboBox - drop down list with selected displayed, can set up for text entry too JComboBox colorBox = new JComboBox(colorList); String currColor = colorBox.getSelectedItem();

33. Swing Slider and Progress Bar JSlider - show a value in a range or pick a value from a continuous range s = new JSlider(100, 1000, 400); s.setPaintTicks(true); s.setMajorTickSpacing(100); s.getValue(); // get the current value from a slider JProgressBar - used to show how long a user needs to wait yet. progressBar = new JProgressBar(JProgressBar.HORIZONTAL, 0, text.length());

34. Color Chooser JColorChooser - use to pick a color Use the static method showDialog and pass it the parent component, title, and current color Color newColor = JColorChooser.showDialog( parentComponent,title,selColor); Example Color newColor = JColorChooser.showDialog( this, “Pick a new background color”,this.getBackground());

35. File Chooser JFileChooser - use to pick a file // create the file chooser final JFileChooser fc = new JFileChooser(); // display the chooser as a dialog and get the return value int returnVal = fc.showOpenDialog(frame); // if the return value shows that the user selected a file if (returnVal == JFileChooser.APPROVE_OPTION) { File file = fc.getSelectedFile(); }

36. Key to Interactive User Interfaces: Events An event is an object that represents an action: user clicks the mouse user presses a key on the keyboard user closes a window In Swing, objects add or implement listeners for events. Listeners are interfaces. Interfaces are not classes: They define functionality that other classes implement. It’s a contract that certain functionality will be provided.

37. Events and Listeners Say you want to know when your favorite band will be giving a tour in your city You might sign-up to be notified and give your e- mail address Your name and e-mail is added to a list When the event is scheduled in your city You will be notified via e- mail that the tour is coming

38. Events and Listeners

39. Adapters Swing provides abstract classes (adapters) that agree to implement some implementors. Define methods you need for that listener, but don’t do anything You can inherit from an adapter and only override the methods you want to handle. class MyMouseAdapter extends MouseAdapter { /** Method to handle the click of a mouse */ public void mouseClicked(MouseEvent e) { … } }

40. Anonymous Inner Classes You can create a new listener in place with an anonymous inner class b.addFocusListener(new FocusListener () { public void focusGained (FocusEvent evt) { … } public void focusLost(FocusEvent evt) { … } }); Looks like you’re creating a new instance. Defining methods on the unnamed, anonymous new class.

41. Interactive GUItree: Starting out /** * A GUI that has various components in it, to demonstrate * UI components and layout managers (rendering). * Now with Interactivity! **/ import javax.swing.*; // Need this to reach Swing components import java.awt.*; // Need this to reach FlowLayout import java.awt.event.*; // Need this for listeners and events public class GUItreeInteractive extends JFrame { public GUItreeInteractive(){ super("GUI Tree Interactive Example"); this.getContentPane().setLayout(new FlowLayout()); /* Put in a panel with a label in it */ JPanel panel1 = new JPanel(); this.getContentPane().add(panel1); JLabel label = new JLabel("This is panel 1!"); panel1.add(label);

42. Interactive GUItree: First button /* Put in another panel with two buttons in it */ JPanel panel2 = new JPanel(); this.getContentPane().add(panel2); JButton button1 = new JButton("Make a sound"); button1.addActionListener( new ActionListener() { // Here's the listener // Here's the method we're overriding public void actionPerformed(ActionEvent fred) { Sound s = new Sound(FileChooser.getMediaPath("warble-h.wav")); s.play(); } ); panel2.add(button1);

43. Interactive GUItree: Second button JButton button2 = new JButton("Make a picture"); button2.addActionListener( new ActionListener() { // Here's the listener // Here's the method we're overriding public void actionPerformed(ActionEvent mabel) { Picture p = new Picture(FileChooser.getMediaPath("shops.jpg")); p.show(); } ); panel2.add(button2); this.pack(); this.setVisible(true); } } An inner class can access instance variables of the outer class, but not local variables of the method (unless they’re final).

44. Example: A Picture Tool Negate and flip picture with GUI. Use a stack of pictures to support undo.

45. PictureTool import java.awt.*; import javax.swing.*; import java.awt.event.*; import java.util.Stack; /** * Class that demonstrates creating a graphical * user interface to work with pictures * @author Barb Ericson */ public class PictureTool extends JFrame { /** picture for the label */ Picture picture = new Picture(300,300); /** picture label */ JLabel pictureLabel = null; /** stack to hold old pictures for undo */ Stack pictureStack = new Stack ();

46. Constructor /** * Constructor that sets up the GUI */ public PictureTool() { // set title on JFrame super("Picture Tool"); // set up the menu setUpMenu(); // set the picture in the label pictureLabel = new JLabel(); setPicture(picture); this.getContentPane().add( pictureLabel,BorderLayout.CENTER); // set the frame size and show it this.pack(); this.setVisible(true); } We will use a JLabel instance to display our picture.

47. Creating a menu /** * Method to set up the menu */ private void setUpMenu() { // set up the menu bar JMenuBar menuBar = new JMenuBar(); setJMenuBar(menuBar); // create the file menu JMenu fileMenu = new JMenu("File"); menuBar.add(fileMenu); JMenuItem openItem = new JMenuItem("Open"); JMenuItem saveItem = new JMenuItem("Save"); JMenuItem saveAsItem = new JMenuItem("Save As"); fileMenu.add(openItem); fileMenu.add(saveItem); fileMenu.add(saveAsItem); Private method because only our class uses this: To set up the menus. This part creates the pieces. Then we tell the items what to do. Private method because only our class uses this: To set up the menus. This part creates the pieces. Then we tell the items what to do.

48. Opening a picture file // handle the open openItem.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { addPictureToStack(); String file = FileChooser.pickAFile(); setPicture(new Picture(file)); } }); We add current picture to stack, then do pickAFile and set the new picture

49. Saving a picture // handle the save saveItem.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { String file = picture.getFileName(); picture.write(file); } });

50. SaveAs // handle the save as saveAsItem.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { String file = SimpleInput.getString ("Enter filename"); picture.write(FileChooser.getMediaPath(file)); } });

51. Creating Tools Menu // create the tools menu JMenu toolsMenu = new JMenu("Tools"); menuBar.add(toolsMenu); JMenuItem negateItem = new JMenuItem("Negate"); JMenuItem flipItem = new JMenuItem("Flip"); JMenuItem undoItem = new JMenuItem("Undo"); toolsMenu.add(negateItem); toolsMenu.add(flipItem); toolsMenu.add(undoItem);

52. Negate tool // handle negate negateItem.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { addPictureToStack(); picture.negate(); setPicture(picture); } }); Each tool saves the current picture on a stack (for future undo’s), applys the tool method, then updates the picture JLabel display.

53. Flip tool // handle flip flipItem.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { addPictureToStack(); Picture flippedPict = picture.flip(); setPicture(flippedPict); } });

54. What if we need to undo? // handle undo undoItem.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { if (!pictureStack.empty()) { Picture pict = pictureStack.pop(); setPicture(pict); } }); } If stack isn’t empty, pop the first one and reset the picture to that.

55. Pushing a copy of the picture on the stack /** * Method to save the current picture on the stack */ private void addPictureToStack() { pictureStack.push(picture.copy()); }

56. Displaying the current picture /** * Method to set the picture to a new picture * @param p the new picture to use */ public void setPicture(Picture p) { picture = p; pictureLabel.setIcon(new ImageIcon(p.getImage())); this.pack(); // resize for the new picture } JLabel doesn’t actually show pictures – but it can show Icons, and we can convert a picture to an icon.

57. Main method /** * Main method for testing */ public static void main(String[] args) { PictureTool pictTool = new PictureTool(); if (args.length > 0) { pictTool.setPicture(new Picture(args[0])); } We check to see if the tool was started from a command line, with a picture filename as an opening argument.

58. Getting arguments from CommandLine Trying arguments in DrJava 

59. Can open picture with PictureTool: From Command line

60. Extra Example: A Rhythm Constructing Tool Take a name of a sound to add to a root Weave a number of times Repeat a number times Play the result Solves exercise 13.2

61. Building the RhythmTool class /** * A Rhythm-constructing tool **/ import javax.swing.*; // Need this to reach Swing components import java.awt.*; // Need this to reach FlowLayout import java.awt.event.*; // Need this for listeners and events public class RhythmTool extends JFrame { /* Base of sound that we're creating */ public SoundElement root; /* Sound that we're creating to add in. */ public SoundElement newSound; /* Declare these here so we can reach them inside listeners */ private JTextField filename; private JTextField count; int num; Each of the values that we’ll access from inside the listeners must be declared as instance variables (fields) of the tools.

62. Starting the Window (JFrame) public RhythmTool(){ super("Rhythm Tool"); FileChooser.setMediaPath("D:/cs1316/mediasources/"); //CHANGE ME! root = new SoundElement(new Sound(1)); // Nearly empty sound newSound = new SoundElement(new Sound(1)); // Ditto // Layout for the window overall this.getContentPane().setLayout(new BorderLayout());

63. Filename field /* First panel has new sound field */ JPanel panel1 = new JPanel(); // Put panel one at the top this.getContentPane().add(panel1,BorderLayout.NORTH); // Create a space for entering a new sound filename filename = new JTextField("soundfilename.wav"); filename.addActionListener( new ActionListener() { public void actionPerformed(ActionEvent e) { /* When hit return in filename field, * create a new sound with that name. * Printing is for debugging purposes. **/ newSound = new SoundElement( new Sound( FileChooser.getMediaPath(filename.getText()))); System.out.println("New sound from "+ FileChooser.getMediaPath(filename.getText())); } ); panel1.add(filename);

64. Number field /* Put in another panel with number field * and repeat & weave buttons */ JPanel panel2 = new JPanel(); // This layout is for the PANEL, not the WINDOW panel2.setLayout(new BorderLayout()); // Add to MIDDLE of WINDOW this.getContentPane().add(panel2,BorderLayout.CEN TER); // Add a field for arguments for Repeat and Weave count = new JTextField("10"); num = 10; // Default value count.addActionListener( new ActionListener() { public void actionPerformed(ActionEvent e) { // Here's how we convert a string to a number num = Integer.parseInt(count.getText()); } ); // Add to top of panel panel2.add(count,BorderLayout.NORTH);

65. Repeat button // Now do the Repeat button JButton button1 = new JButton("Repeat"); button1.addActionListener( new ActionListener() { public void actionPerformed(ActionEvent e) { // Repeat the number of times specified root.repeatNext(newSound,num); } ); // Add to RIGHT of PANEL panel2.add(button1,BorderLayout.EAST);

66. Weave button // Now do the Weave button JButton button2 = new JButton("Weave"); button2.addActionListener( new ActionListener() { public void actionPerformed(ActionEvent e) { // We'll weave 10 copies in // every num times root.weave(newSound,10,num); } ); // Add to LEFT of PANEL panel2.add(button2,BorderLayout.WEST);

67. Play Button (and end) /* Put in another panel with the Play button */ JPanel panel3 = new JPanel(); // Put in bottom of WINDOW this.getContentPane().add(panel3,BorderLayout.SOUTH); JButton button3 = new JButton("Play"); button3.addActionListener( new ActionListener() { // If this gets triggered, play the composed sound public void actionPerformed(ActionEvent e) { root.playFromMeOn(); } ); panel3.add(button3); // No layout manager here this.pack(); this.setVisible(true); } }