1. Peter Andreae Computer Science Victoria University of Wellington Copyright: Peter Andreae, Victoria University of Wellington User Interface COMP 112 #30 2014

2. © Peter Andreae COMP 112 28:2 Outline Building more complicated user interfaces: Swing. Admin: No lecture next Monday (Queen’s Birthday) Final lecture: summary, exam, Tues 3 rd June No lecture 5 th June Lab on Friday, but not next week.

3. © Peter Andreae COMP 112 28:3 Implementing User Interfaces in Java How do you build an interface without ecs100 and the UI? Simple text interfaces: use System.in and System.out Getting input from user and outputting results using modal dialog boxes (JOptionPane) Building GUI’s from Swing Components.

4. © Peter Andreae COMP 112 28:4 System.in and System.out input stream and output stream connected to the terminal window from which the java program was invoked: import java.util.*; import java.io.*; public class SystemIOExample{ public static void main(String[ ] arguments){ Scanner input = new Scanner(System.in); System.out.print("Enter quantity: "); int quantity = input.nextInt(); System.out.print("Enter price: "); double price = input.nextDouble(); System.out.printf("Cost: $%.2f%n", (price*1.15*quantity)); System.out.printf("GST: $%.2f%n", (price*0.15*quantity)); }

5. © Peter Andreae COMP 112 28:5 Modal Dialog Boxes Standard GUI interfaces give the user control – program sits and does nothing – responds to the user’s actions Modal Dialog Boxes – program is in control of the dialog, – puts up a dialog box for the user to enter values – program waits until the user responds (like the UI.ask… methods, but fancier.) Modal Dialog Boxes can be very simple: question with yes / no buttons to answer question with one text box Modal Dialog Boxes can be complex: eg, PowerPoint or BlueJ options dialog boxes.

6. © Peter Andreae COMP 112 28:6 JOptionPane JOptionPane provides three very simple modal dialog boxes, & a constructor and methods for making more complex ones. import javax.swing.JOptionPane; public static void ask(){ int ans = JOptionPane.showConfirmDialog(null, "do it now?"); while (ans==JOptionPane.CANCEL_OPTION){ ans = JOptionPane.showConfirmDialog(null, "YES OR NO! "); } if (ans==JOptionPane.YES_OPTION){ doSomething(); } JOptionPane.showMessageDialog(null, "I've done it!"); String name = JOptionPane.showInputDialog(“Enter your name"); System.out.println("Bye "+name); } There are also many other optional parameters

7. © Peter Andreae COMP 112 28:7 Full GUI interfaces Painful programming! GUI’s built from complex set of components that all have to be put together carefully. Requires lots of different listeners to respond to the different components. Lots of different toolkits for building them: Swing is a standard library; (reportedly not very nice) Using a graphical interface builder is a sensible way to go You drag and drop the components It builds most of the code You write the code for the listeners pathdrawer, namecompleter.

8. © Peter Andreae COMP 112 28:8 Creating a window with a text area private JTextArea textA ; public void createNewFrame(){ JFrame frame = new JFrame("Output"); frame.setSize(200,300); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); textA = new JTextArea(40,60); JScrollPane textSP = new JScrollPane(textA); frame.add(textSP, BorderLayout.CENTER); frame.pack(); frame.setVisible(true); } Instruction to the Layout Manager

9. © Peter Andreae COMP 112 28:9 Layout Managers When a GUI component contains other components, what happens if the window is resized? Need to readjust sizes and positions of all the components. Layout manager = object attached to the component that does this. eg FlowLayout, BorderLayout, GridLayout, …. Button

10. © Peter Andreae COMP 112 28:10 Using a JTextArea use setText(….) and append(….) to change the contents: public void interact() { UI.println("Enter text on multiple lines"); while (true){ UI.print(">"); String line = UI.nextLine(); textA.append("COPY: "+line+"\n"); if (line.startsWith("clear")){ textA.setText(null); } if (line.contains("quit")){ UI.quit(); }

11. © Peter Andreae COMP 112 28:11 Pathfinder: a larger interface private JFrame frame; private JComponent drawing; private void setupInterface(){ frame = new JFrame("Graphics Example"); frame.setSize(windowSize,windowSize+50); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); drawing = new JComponent(){ protected void paintComponent(Graphics g){redraw(g);} }; frame.add(drawing, BorderLayout.CENTER); JPanel panel = new JPanel(); frame.add(panel, BorderLayout.NORTH); panel.add(new JLabel("Click on cities to find routes")); : graphical output: called by java whenever it wants to refresh, the window, or when asked by the program container for buttons etc

12. © Peter Andreae COMP 112 28:12 Buttons and Panels private void setupInterface(){ // Set up a window. : JButton button = new JButton("Reset"); panel.add(button); button.addActionListener(new ActionListener(){ public void actionPerformed(ActionEvent ev){ resetCities(); } }); button = new JButton("Load"); panel.add(button); button.addActionListener(new ActionListener(){ public void actionPerformed(ActionEvent ev){loadCities();} }); button = new JButton("Quit"); panel.add(button); button.addActionListener(new ActionListener(){ public void actionPerformed(ActionEvent ev){System.exit(0);} }); Listener for the buttons:

13. © Peter Andreae COMP 112 28:13 Labels and TextField private JFrame frame; private JComponent drawing; private JTextField cityEntry; private void setupInterface(){ : panel.add(new JLabel("Start City")); cityEntry = new JTextField(5); panel.add(cityEntry); cityEntry.addActionListener(new ActionListener(){ public void actionPerformed(ActionEvent e){ selectCity(cityEntry.getText()); drawing.repaint(); } }); Listener for the text field:

14. © Peter Andreae COMP 112 28:14 Mouse private JFrame frame; private JComponent drawing; private JTextField cityEntry; private void setupInterface(){ : drawing.addMouseListener(new MouseAdapter(){ public void mouseReleased(MouseEvent e){ findCity(e.getPoint()); drawing.repaint(); // ask to have the JComponent repainted } }); // Once it is all set up, make the interface visible frame.setVisible(true); } Listener for the mouse:

15. © Peter Andreae COMP 112 28:15 Redrawing on a Graphics object public void redraw(Graphics g){ cities.draw(g, origin, scale, new Color(100,180,255)); …. } public void draw(Graphics g, Location origin, double scale, Color col){ for (City city : cities){ city.draw(g, origin, scale, col); } public void draw(Graphics g, Location origin, double scale, Color col){ Point p = loc.getPoint(origin, scale); g.setColor(col); g.fillOval(p.x-radius, p.y-radius, 2*radius, 2*radius); g.drawString(""+id, p.x-5, p.y+2); } Draw a city set Draw a city Passes the Graphics object to be drawn on