GUI Tutorial 2

What did we do last time?  Basic flow  instance variables, set up in ctor, close operation, size, visible  JFrame  Event-driven programming  action listener for buttons  Simple pop-up dialogs (JOptionPane)  Layout managers  BorderLayout, FlowLayout, GridLayout  JPanel  JTextField, JLabel, Jbutton, JCheckBox, JComboBox, JRadioButton, JRadioGroup  Borders and Fonts

What will we do this time?  Add actions to other controls  JMenu/JMenuItem  JTextArea  Panel Communication  Simple Drawing

Add a menu  Menus are added to the JFrame – not a JPanel  Menus are added via setJMenuBar – not add  The menu system consists of one JMenuBar and one or more objects of type JMenu containing JMenuItem  In the JFrame constructor: JMenuBar menuBar = new JMenuBar(); setJMenuBar(menuBar); menuBar.add(createFileMenu());

The menu private JMenu createFileMenu() { JMenu menu = new JMenu("File"); menu.add(createFileExitItem()); return menu; } private JMenuItem createFileExitItem() { JMenuItem item = new JMenuItem("Exit"); class MenuItemListener implements ActionListener { public void actionPerformed(ActionEvent e) { System.exit(0); } item.addActionListener(new MenuItemListener()); return item; }

Coordination between Objects (JPanel) Main panel Control Panel

Objects coordinate via function calls (“messages”)  Remember that communication between objects can be thought of as message passing. For our program, we’ll create a DisplayPanel to display a summary of the choices. This panel should be updated every time a change is made to one of the panels. DisplayPanel ToFromPanel Update the status PreferencePanel WillDrivePanel

Panel Communication - UML

First create a DisplayPanel public class DisplayPanel extends JPanel { // Variables for message private String name, fromCity,toCity, willDrive, music; // display – multiple lines allowed in JTextArea private JTextArea display; public DisplayPanel() { // set some default values name = "Someone"; fromCity = "Somewhere"; toCity = "Somewhere"; willDrive = "needs a ride"; music = "no music"; display = new JTextArea(2, 20); display.setLineWrap(true); // uses multiple lines display.setWrapStyleWord(true); // breaks on word boundaries updateDisplay(); add(display ); }

Update method private void updateDisplay() { display.setText(name + " " + willDrive + " from " + fromCity + " to " + toCity + " and prefers " + music); } } // end class

Let’s display  Update the constructor of the JFrame (CarpoolGUI) // Create DisplayPanel first DisplayPanel dp = new DisplayPanel(); add(dp, BorderLayout.SOUTH); // The rest has not changed… yet! PreferencePanel pPanel = new PreferencePanel(); add(pPanel, BorderLayout.EAST); ToFromPanel tfPanel = new ToFromPanel(); add(tfPanel, BorderLayout.CENTER); WillDrivePanel wdPanel = new WillDrivePanel(); add(wdPanel, BorderLayout.NORTH);

All panels now display Now we need to add some action

Panel communication  Other panels will need to be able to send values to set the variables for this message. Use Eclipse to create setters for DisplayPanel.

How can other panels update the display?  Other panels will need to have access to the DisplayPanel. How to do this? Send a reference into the constructor.  In the PreferencePanel: private DisplayPanel dp; public PreferencePanel(DisplayPanel dp) { this.dp = dp;...  Update all the panels. notice use of this keyword

How to access the DisplayPanel  Update the constructor of the JFrame (CarpoolGUI) // Create DisplayPanel first DisplayPanel dp = new DisplayPanel(); add(dp, BorderLayout.SOUTH); // Send it into other 3 panels PreferencePanel pPanel = new PreferencePanel(dp); add(pPanel, BorderLayout.EAST); ToFromPanel tfPanel = new ToFromPanel(dp); add(tfPanel, BorderLayout.CENTER); WillDrivePanel wdPanel = new WillDrivePanel(dp); add(wdPanel, BorderLayout.NORTH);

Add action – radio button  Need a radio listener private class RadioListener implements ActionListener { public void actionPerformed(ActionEvent e) { if (musicButton.isSelected()) dp.setMusic("music"); else dp.setMusic("no music"); } Need to add listener to each button RadioListener listener = new RadioListener(); musicButton.addActionListener(listener); noMusicButton.addActionListener(listener);

Need to call updateDisplay  In DisplayPanel, the setters need to cause the display to update, for example: public void setMusic(String music) { this.music = music; updateDisplay(); }

Add action - CheckBox private class CheckboxListener implements ActionListener { public void actionPerformed(ActionEvent e) { if (willDriveCB.isSelected()) dp.setWillDrive("will drive"); else dp.setWillDrive("needs a ride"); }  Add the action listener to our check box: willDriveCB.addActionListener(new CheckboxListener());

Add action – Focus Listener  The Java interpreter knows which component has the “focus” – e.g., if the mouse is in the name field, it has focus. If you click on some other field, the name field “loses” focus.  FocusListener is an interface that can be used to respond to focus events.  Two methods must be defined: focusGained and focusLost. You must write both of these methods, even if you’re only interested in one type of event. The other method may have an empty body.  Be sure to include java.awt.event.*; (or specific classes)

Our focus listener private class NameListener implements FocusListener { // We don’t care when we get focus public void focusGained(FocusEvent e) {} // When we lose focus, need to update the display public void focusLost(FocusEvent e) { dp.setName(name.getText()); }  Add the focus listener to the name field. Since only one component uses this listener, we don’t bother creating a local variable. name.addFocusListener(new NameListener());

Add action - ComboBox  Fires both action events and item events. Item events respond to any change of state, whether caused by the program or the user. Action events are called when the user interacts with the component.  For user actions, both events will be generated. You should only listen for one type of event. Typically you’re interested in the user’s actions, so use an action listener.

Add action - ComboBox  We’ll use the same listener for both boxes. We’ll use the ActionEvent getSource method to determine which one changed. private class ComboListener implements ActionListener { public void actionPerformed(ActionEvent e) { if (e.getSource() == toCity) dp.setToCity(toCity.getSelectedItem().toString()); else dp.setFromCity(fromCity.getSelectedItem().toString()); }  Add the listener to both combo boses. ComboListener listener = new ComboListener(); fromCity.addActionListener(listener); toCity.addActionListener(listener);

That’s all, folks!

Eclipse Hint:  Edit > Select All (Ctrl-A)  Source > Correct Indentation (Ctrl-I)  All programs that are turned in for grading should be neatly formatted!

Drawing

The Graphics class –Get the concept! From the Sun documentation: The Graphics class is the abstract base class for all graphics contexts that allow an application to draw onto components that are realized on various devices, as well as onto off-screen images. A Graphics object encapsulates state information needed for the basic rendering operations that Java supports. This state information includes the following properties:  The Component object on which to draw.  A translation origin for rendering and clipping coordinates.  The current clip.  The current color.  The current font.  The current logical pixel operation function (XOR or Paint).  The current XOR alternation color (see setXORMode(java.awt.Color)).setXORMode(java.awt.Color)

Graphics class continued  Sample methods:  drawImage  drawLine/fillLine  drawOval/fillOval  drawRect/fillRect  drawString  setColor  setFont x: 0.. y0..y0.. Example line from ~10 10 to ~20 20

Graphics class – VERY IMPORTANT  Graphics is abstract, can’t call constructor directly  Can be obtained by calling getGraphics on a component  Automatically created for the paintComponent method of any class that extends JComponent (either directly or indirectly)  paintComponent is called automatically when the component needs to be redrawn  initial load  when repaint() method called  when screen is resized etc.  BEST STRATEGY: write the paintComponent method, call repaint() when you need to update the drawing usually don’t need to!

Drawing – Basic Strategy 1. As always, create a JFrame 2. Create a class that extends JComponent or JPanel to contain your drawing 3. Add that JPanel to your JFrame (often to the CENTER) 4. In that class, override paintComponent(Graphics g) method. 5. Inside the method, use draw commands as needed to create your image (e.g., g.drawLine(…)) 6. paintComponent will be called automatically when the screen needs to be redrawn (e.g., when first displayed, if minimized then maximized, etc). 7. Inside paintComponent, call super.paintComponent for required housekeeping – IMPORTANT! 8. If you need to update the drawing, do not call paintComponent directly. Instead, call repaint(). Example: change player’s position in Clue, call repaint() on your board (either board.repaint(); or repaint(); depending on what method is updating the player’s location).

Create a JPanel import javax.swing.*; import java.awt.*; public class DrawPanel extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); g.setColor(Color.BLUE); g.drawRect(10, 15, 20, 20); } Remember this for housekeeping (e.g., background)

Create a frame, add the component public class DrawFrame extends JFrame { private DrawPanel drawPanel; public DrawFrame() { drawPanel = new DrawPanel(); // paintComponent will automatically be // called 1 time add(drawPanel, BorderLayout.CENTER); setSize(300, 300); } public static void main(String[] args) { DrawFrame frame = new DrawFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); }

Let’s make some changes public class DrawPanel extends JPanel { private int x, y; public DrawPanel() { x = 10; y = 15; } public void paintComponent(Graphics g) { super.paintComponent(g); g.setColor(Color.BLUE); g.drawRect(x, y, 20, 20); } public void translate(int dx, int dy) { x += dx; y += dy; // Must include this to see changes repaint(); }

And call it from main… public void updateDrawing(int dx, int dy) { drawPanel.translate(dx, dy); } public static void main(String[] args) { DrawFrame frame = new DrawFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); // This will cause rectangle to display in new location frame.updateDrawing(100, 100); }

Let’s put in a delay public void updateDrawing(int dx, int dy) { this.dx = dx; // need to add instance variables this.dy = dy; // 1000 millisecond delay Timer t = new Timer(1000, new TimerListener()); t.start(); } private class TimerListener implements ActionListener { public void actionPerformed(ActionEvent e) { drawPanel.translate(dx, dy); } Be sure to get javax.swing.Timer

Complete Program public class DrawFrame extends JFrame { private DrawPanel drawPanel; private int dx, dy; public DrawFrame() { drawPanel = new DrawPanel(10, 15); add(drawPanel, BorderLayout.CENTER); setSize(300, 300); } public void updateDrawing(int dx, int dy) { this.dx = dx; this.dy = dy; Timer t = new Timer(1000, new TimerListener()); t.start(); } private class TimerListener implements ActionListener { public void actionPerformed(ActionEvent e) { drawPanel.translate(dx, dy); } } public static void main(String[] args) { DrawFrame frame = new DrawFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); frame.updateDrawing(5, 10); } public class DrawPanel extends JPanel { private int x, y; public DrawPanel(int x, int y) { this.x = x; this.y = y; } public void paintComponent(Graphics g) { super.paintComponent(g); g.setColor(Color.BLUE); g.drawRect(x, y, 20, 20); System.out.println("Called paint component"); } public void translate(int dx, int dy) { x += dx; y += dy; // Must include this to see changes repaint(); }