Representing Structure and Behavior with Trees

Representing Structure and Behavior with Trees

Graphical User Interfaces are Trees CS1316: Representing Structure and Behavior 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

Making GUIs do something Layout managers are GUI tree renderers Listeners Building a musical instrument Old style Java: Abstract Window Toolkit - AWT Original Graphical User Interface (GUI) Classes

Container Objects Input and Output Classes Frame - Main window with title and border. Panel - groups components Canvas - create custom components Label - not editable text Button - pushing fires an event

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 Checkboxes and Radio Buttons Swing - javax.swing Replacements for most AWT components

New GUI components JButton - Button (images and text) JFrame - Frame (main window) JPanel Panel (container) Trees - JTree Split pane - JSplitPane Table - JTable Supports multiple looks and feels

Java - also called metal, Windows, Mac, Motif 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 Swing General Containers JPanel - group components JScrollPane - add scroll bars to a component JSplitPane - display two separate panes 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 JFrame Options

When creating a GUI application Have your main class inherit from JFrame Or have your main class inherit from JPanel So it is a JFrame 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 GUITree Class /** * 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 GUItree extends JFrame { 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);*/ Welcome to DrJava. > GUItree gt = new GUItree(); this.pack(); this.setVisible(true); } } 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); } Whered panel1 go? Its

there, but the current rendering is smashing it all together. GUItree is a tree JFrame JPanel JLabel This is panel1! JPanel JButton Make a sound JButton Make a picture Layout Managers are renderers

How are the components assigned a position and size? 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 as well Handles when the main window is resized The programmer just adds the components to the container

Layouts - Flow, Border, Grid Flow Layout - left to right, no extra space Border Layout - Center item gets extra space Grid Layout - same size components 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); > GUItreeFlowed gtf = new GUItreeFlowed(); /* 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); } } Automatically reflows when resized 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); > GUItreeBordered gtb = new GUItreeBordered(); /* 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); } }

Resizing now follows borders Other Layouts - None, GridBag, Card None (null) - programmer specified GridBag Card - flexible grid - one card shown at a time BoxLayout Two types

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

Box.createHorizontalGlue()); 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); BoxLayout is weird it takes the paneas an input, and whether you want vertical or horizontal (Y or X_AXIS) boxing /* 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); }

} Differs in resizing behavior: Its all in boxes (not borders) 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 For the most control use null layout. Much like LayeredSceneElement! Nested Panel Example Often an application uses a BorderLayout

Main panel in Center Other panels in North, South, West, and East as needed Using FlowLayout or Box In the application at right The main panel is in the center The button panel is in the north

Using FlowLayout A Calvacade of Swing Components Next few slides show you some of the many user interface components in Swing. You dont have to know all of these! Theyre here for your benefit. Wait a few slides, and well go through how to use basic buttons and text. Swing JScrollPane

JScrollPane - adds scroll bars to component textArea = new JTextArea(5, 30); JScrollPane scrollPane = new JScrollPane(textArea); contentPane.add(scrollPane, BorderLayout.CENTER); Swing Special Purpose Containers JTabbedPane - display contents of current tab JToolBar - groups buttons with icons JOptionPane - display dialog box

JInternalFrame - inside frames 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); 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(); 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()); 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()); 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(); } 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. Its a contract that certain functionality will be provided. 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 email address Your name and e-mail is added to a list When the event is scheduled in your city You will be notified via email that the tour is coming Events and Listeners Event Listener

Example ActionEvent ActionListener Button Pushed AdjustmentEvent AdjustmentListener Move a scrollbar FocusEvent FocusListener Tab into a textarea

ItemEvent ItemListener Checkbox checked KeyEvent KeyListener MouseEvent MouseListener Keystroke occurred in a component Mouse button click MouseEvent MouseMotionListener

Mouse moves or drags TextEvent TextListener WindowEvent WindowListener A texts component text changed Window was closed Adapters An adapter is an abstract class that provides empty implementations for a listener interface.

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) {} } Named Inner Classes In Swing, you can use inner classes which are classes declared inside another class. public class ClassName { attributes constructors

methods // named inner class class MyMouseAdapter extends MouseAdapter { methods } } 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) { } });

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);

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 e) { Sound s = new Sound(FileChooser.getMediaPath("warble-h.wav")); s.play(); } } ); panel2.add(button1); 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 e) { Picture p = new Picture(FileChooser.getMediaPath("shops.jpg")); p.show(); } } ); An inner class can access panel2.add(button2); this.pack(); this.setVisible(true); } } instance variables of the outer class, but not local variables of the method. 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 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 { Each of the values that well access from inside the listeners must be declared as instance

variables (fields) of the tools. /* 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; Starting the Window (JFrame) public RhythmTool(){ super("Rhythm Tool"); 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()); 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); 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); 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);

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); 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); } }

Recently Viewed Presentations

  • Present, Past, and Future Tenses

    Present, Past, and Future Tenses

    Present Continuous(Future Meaning) Present continuous is used for a planned future event or action. Ex. I'm driving to the mall later this afternoon. The present continuous is not used for the future with verbs such as rain, snow, get sick,...
  • Diapositiva 1 - Sociedad Española de Oncología Médica

    Diapositiva 1 - Sociedad Española de Oncología Médica

    ¿Está indicado el tratamiento perioperatorio en cáncer de recto? En contra Dr. Joan Maurel Oncologia Médica Hospital Clínic Barcelona RDT ¿Pre-op o post-op?
  • Using Data to Inform Teaching & Learning

    Using Data to Inform Teaching & Learning

    I can study a subject which really interests me. I will learn about the demands of Year 11 and Year 12 in one subject rather than in five subjects. I may gain a 10% boost to my ATAR score by...
  • Fatigue in Palliative Care - Rowans Hospice

    Fatigue in Palliative Care - Rowans Hospice

    Definition "A distressing persistent, subjective sense of physical, emotional and/or cognitive tiredness or exhaustion related to cancer or cancer treatment that is not proportional to recent activity and interferes with usual functioning."2012 National Comprehensive Cancer Network. Intensity is the key...
  • The BBC Own It keyboard and app!

    The BBC Own It keyboard and app!

    The Own It app will help you to make smart choices, feel more confident and get advice when you need it. Download from your Apple or GooglePlay app store. If you're under 13, make sure your parent or guardian has...
  • COMMERCIALIZATION STRATEGY REPORT 2013 1 Commercialization Strategy Report

    COMMERCIALIZATION STRATEGY REPORT 2013 1 Commercialization Strategy Report

    South West Pacific. South West Pacific region sits astride major shipping routes that connect between Asia, ANZ and Americas. ... Pilotage. Bunkering. Fresh water supply. Food provisions. Store supply. Stevedoring. Warehousing. Dry-docking and repair.
  • Observing the Solar System

    Observing the Solar System

    Observing the Solar System Section 20.1 Early Observations Greek Observations Saw star patterns in the sky travel together (Constellations) Early Observations Some stars seemed to wander (planets) They were later named by the Romans (Mercury, Venus, Mars, Jupiter, Saturn) Early...
  • Russia, China, and the Birth of Communism

    Russia, China, and the Birth of Communism

    The Russian Revolution . Czars Resist Change. Alexander III halted all reforms and clung to . autocracy (total. control) Anyone who . questioned. the czar, worshipped outside of Russian Orthodox Church, or spoke