2. ISE 582: Information Technology for Industrial Engineering Instructor: Elaine Chew University of Southern California Department of Industrial and Systems Engineering Lecture 10 JAVA Cup 9: Images, Interactive Forms Winston & Narasimhan: Chapt 47,49

3. 13 November 2003Web Technology for IE2 JAVA Cup 9 Adding Images to Applets Creating Forms and Firing Events

4. 13 November 2003Web Technology for IE3 Adding Images to Applets Move Image Files into Applets Define Subclass of JComponent Display Images (in paint method) using drawImage (from Graphics class) Modify other parts of program

5. 13 November 2003Web Technology for IE4 The Parts MovieApplication MovieAuxiliaries MovieDataInterface, MovieData, MovieDataObserver MovieListListener MovieInterface, Movie, MovieObserver MeterInterface, Meter, MeterListener PosterInterface, Poster

6. 13 November 2003Web Technology for IE5 The Poster Interface public interface PosterInterface { // Setter public abstract void setImageFile (String fileName); } public void setImageFile (String s) { if (s != file) { file = s; if (file == null) {image = null;} else { image = MovieAuxiliaries.readMovieImage(file); }

7. 13 November 2003Web Technology for IE6 The Poster Class Itself import java.awt.*; import javax.swing.*; import java.util.*; public class Poster extends JComponent implements PosterInterface { private String file; private Image image; public void setImageFile (String s) {... } public void paint(Graphics g) {... } public Dimension getMinimumSize() {return new Dimension(200, 300);} public Dimension getPreferredSize() {return new Dimension(200, 300);} }

8. 13 November 2003Web Technology for IE7 Remember… public static Image readMovieImage(String fileName) { try { URL url = MovieAuxiliaries.class.getResource(fileName); if (url == null) {return null;} ImageProducer producer = (ImageProducer) (url.getContent()); if (producer == null) {return null;} Toolkit tk = Toolkit.getDefaultToolkit(); Image image = tk.createImage(producer); return image; } catch (IOException e) {System.out.println(e);}; return null; } Auxiliaries

9. 13 November 2003Web Technology for IE8 The DrawImage Method Defined in Graphics class An instance method Arguments specify the image, the origin, the dimensions and the component Usage: g.drawImage(image,x,y,width,height,component)

10. 13 November 2003Web Technology for IE9 Poster class: paint: drawImage public void paint (Graphics g) { if (image != null) { Dimension d = getSize(); g.drawImage(image,10,10,d.width-20,d.height-20,this); } g.drawImage(,,,,, )

11. 13 November 2003Web Technology for IE10 Getting Image Dimensions Usage: image.getWidth(this) Usage: image.getHeight(this) this = component Method needs to know about the image- displaying properties of the component.

12. 13 November 2003Web Technology for IE11 Poster class: paint method 2 public void paint(Graphics g) { if (image != null) { Dimension d = getSize(); int x, y, width, height, border = 20; double imageRatio = (float) image.getHeight(this) / image.getWidth(this); double windowRatio = (float) d.height / d.width; if (imageRatio > windowRatio) { height = d.height - border; width = image.getWidth(this) * (d.height - border) / image.getHeight(this); } else { width = d.width - border; height = image.getHeight(this) * (d.width - border) / image.getWidth(this); } x = (d.width - width) / 2; y = (d.height - height) / 2; g.drawImage(image, x, y, width, height, this); }}

13. 13 November 2003Web Technology for IE12 Changes to MovieObserver class import java.util.*; public class MovieObserver implements Observer { private MovieApplication applet; public MovieObserver (MovieApplication a) { applet = a; } public void update (Observable observable, Object object) { applet.getMeter().setValue(applet.getMovie().rating()); applet.getMeter().setTitle(applet.getMovie().getTitle()); applet.getPoster().setImageFile(applet.getMovie().getPoster()); }

14. 13 November 2003Web Technology for IE13 Additions to MovieApplication import... ; public class MovieApplication extends JApplet { // Declare instance variables: private Poster poster;... etc... // Define constructor public MovieApplication() { getMovie(); getMovieData(); getContentPane().add("West", getMeter()); getContentPane().add("East", new JScrollPane(getJList())); getContentPane().add("Center", getPoster()); } // Define getters and setters... public Poster getPoster () { if (poster == null) {setPoster(new Poster());} return poster; } public void setPoster (Poster p) { poster = p; } } Application

15. 13 November 2003Web Technology for IE14 Image Loading drawImage displays the image incrementally, as the chunks are loading The rest of the display shows the movie properties quickly Java separates image loading and display from the rest of program This is because Java is multithreaded

16. 13 November 2003Web Technology for IE15 Creating Forms and Firing Events Define and deploy components such as labels and buttons Create mechanisms to edit movie instance variables easily Firing events that activate property- change listeners

17. 13 November 2003Web Technology for IE16 Hierarchy of Swing Classes

18. 13 November 2003Web Technology for IE17 Form Elements Form elements are instances of: –JLabel class –JTextField class –JButton class In theory: These are all components and can be connected to the applet’s content pane

19. 13 November 2003Web Technology for IE18 The JPanel Class In practice: Connect form elements to an instance of a subclass of the JPanel class The JPanel class is Java’s generic container Each JApplet and JFrame has a content pane, every content pane is by default an instance of the JPanel class Instances of JPanel class are called panels.

20. 13 November 2003Web Technology for IE19 RatingPanelInterface public interface RatingPanelInterface { // Setters public abstract void setValue1 (int value) ; public abstract void setValue2 (int value) ; public abstract void setValue3 (int value) ; // Getters public abstract int getValue1 () ; public abstract int getValue2 () ; public abstract int getValue3 () ; }

21. 13 November 2003Web Technology for IE20 Notice that… None of the setters and getters have names that hint of movies Principle: views should exhibit no knowledge of a particular domain Any view that implements the interface will work well for displaying and manipulating three values

22. 13 November 2003Web Technology for IE21 Starting the Ratings Panel import java.awt.*; import java.util.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; public class RatingPanel extends JPanel implements RatingPanelInterface { private int value1, value2, value3; private JTextField field1, field2, field3; private JButton button1Plus, button2Plus, button3Plus; private JButton button1Minus, button2Minus, button3Minus; // Constructor defined here // Setters and getters defined here // Local listener defined here } public Dimension getMinimumSize(){return new Dimension(300,75);} public Dimension getPreferredSize(){return new Dimension(300,75);} }

23. 13 November 2003Web Technology for IE22 The JLabel Constructor Instances of the JLabel class, when added to a panel, displays the string provided to the JLabel constructor Usage: add(new JLabel(label));

24. 13 November 2003Web Technology for IE23 The JTextField Constructor JTextField constructor requires an initial string and the number of columns in the textfield Usage: field1 = new JTextField(“0”,20); add field1; If value1 is an integer, you need to convert it to string: field1 = new JTextField(String.valueOf(value1),20); To fetch the current string and convert to int: Integer.parseInt(field1.getText()); To change what appears in the text field: field1.setText(String.valueOf(value1));

25. 13 November 2003Web Technology for IE24 The JButton Constructor The JButton constructor produces a button labeled by the constructor’s string. Usage: button1Plus = new JButton(“+”)

26. 13 November 2003Web Technology for IE25 The Grid Layout Manager You can arrange all labels, text fields, and buttons in a panel using an instance of the GridLayout layout manager The GridLayout constructor takes four arguments: #rows, #cols, row spacing, col spacing Usage: setLayout(new GridLayout (3,4,3,3));

27. 13 November 2003Web Technology for IE26 RatingPanel : Constructor RatingPanel (String x, String y, String z) { setLayout(new GridLayout (3,4,3,3)); value1 = value2 = value3 = 0; field1 = new JTextField(String.valueOf(value1),20); button1Plus = new JButton(“+”); button1Minus = new JButton(“-”); // ditto for other text fields and buttons... add(new JLabel (x)); add(field1); add(button1Minus); add(button1Plus); // ditto for other labels, text fields, and buttons … // attach listeners here... }

28. 13 November 2003Web Technology for IE27 Rating Panel : Get / Set Getters: public int getValue1() { return value1; } Setters: public void setValue1(int v) { value1 = v; field1.setText(String.valueOf(value1)); }

29. 13 November 2003Web Technology for IE28 What have we got so far? A RatingPanel constructor that creates and arranges labels, text fields, and buttons Getters and setters that assign values and update text fields

30. 13 November 2003Web Technology for IE29 What do we need now? Connect a listener to the text fields and buttons Arrange for the entire form to produce events and activate connected listeners Lower-level listener maintains the form’s instance variables Higher-level listener fetches information from form and relays it to a model

31. 13 November 2003Web Technology for IE30 Action Event Listeners Text fields activate connected action-event listeners when you press Enter or click on another component Buttons produce action events when you click on them Action events are instances of the ActionEvent class Action-event listeners implement the ActionListener interface The interface requires the definition of the actionPerformed method Lower Level

32. 13 November 2003Web Technology for IE31 Adding Action Listener RatingPanel (String x, String y, String z) { // labels, text fields and buttons created // attach listeners here... LocalActionListener listener = new LocalActionListener(); field1.addActionListener(listener); button1Plus.addActionListener(listener); button1Minus.addActionListener(listener); // ditto for other text fields and buttons... } Lower Level

33. 13 November 2003Web Technology for IE32 Local Action Listener Class class LocalActionListener implements ActionListener { public void actionPerformed(ActionEvent e) { if (e.getSource() == field1) { setValue1(Integer.parseInt(field1.getText())); } else if (e.getSource() == button1Plus) { setValue1(value1 + 1); } else if (e.getSource() == button1Minus) { setValue1(value1 - 1); } // Ditto for other text fields and buttons } Lower Level

34. 13 November 2003Web Technology for IE33 Sequence of Events If you type a new value and press Enter: –ActionEventListener calls actionPerformed –actionPerformed calls getText –actionPerformed sets the new value If you press the “+” button: –ActionEventListener calls actionPerformed –actionPerformed sets the new value Lower Level

35. 13 November 2003Web Technology for IE34 Property Change Listeners firePropertyChange method: –Activates connected property-change listeners by calling the listener’s propertyChange method propertyChange method: –Typically fetches values from views and relays them to models addPropertyChangeListener method: –Adds property-change listeners to components in which calls to firePropertyChange occur Higher Level

36. 13 November 2003Web Technology for IE35 Changing the Setters public void setValue1(int v) { value1 = v; field1.setText(String.valueOf(value1)); firePropertyChange(“value1”,oldValue,value1); } Higher Level

37. 13 November 2003Web Technology for IE36 What Next? Define a Form Listener to be activated by property-change events This listener implements PropertyChangeListener interface Interface requires propertyChange method Requires importation of java.beans package Higher Level

38. 13 November 2003Web Technology for IE37 The Form Listener import java.beans.*; public class RatingPanelListener implements PropertyChangeListener {private MovieApplication applet; public RatingPanelListener(MovieApplication a) { applet = a; } public void propertyChange (PropertyChangeEvent e) { String property = e.getPropertyName(); if (applet.getMovie() instanceof Movie) { if (property.equals("value1")) { applet.getMovie().setScript(applet.getForm().getValue1()); } else if (property.equals("value2")) { applet.getMovie().setActing(applet.getForm().getValue2()); } else if (property.equals("value3")) { applet.getMovie().setDirection(applet.getForm().getValue3()); } }}} Higher Level

39. 13 November 2003Web Technology for IE38 Modifications to Application imports … // new instance variable private RatingPanel form; // in constructor... getContentPane().add(“South”, getForm()); // new getter public RatingPanel getForm () { if (form == null) { setForm(new RatingPanel("Script", "Acting", "Direction")); } return form; } // new setter public void setForm (RatingPanel f) { form = f; form.addPropertyChangeListener(new RatingPanelListener(this)); } Application

40. 13 November 2003Web Technology for IE39 Sequence of Events When Script value is changed in form: –LocalActionListener calls setValue1 –setValue1 calls setText and firePropertyChange –firePropertyChange calls propertyChange –propertyChange calls getValue1 and setScript So we know a change in view -> model

41. 13 November 2003Web Technology for IE40 Modifications to MovieObserver import java.util.*; public class MovieObserver implements Observer { private MovieApplication applet; public MovieObserver (MovieApplication a) { applet = a; } public void update (Observable observable, Object object) { applet.getMeter().setValue(applet.getMovie().rating()); applet.getMeter().setTitle(applet.getMovie().getTitle()); applet.getPoster().setImageFile(applet.getMovie().getPoster()); applet.getForm().setValue1(applet.getMovie().getScript()); applet.getForm().setValue2(applet.getMovie().getActing()); applet.getForm().setValue3(applet.getMovie().getDirection()); }}

42. 13 November 2003Web Technology for IE41 Sequence of Events When setScript is called in model: –MovieObserver calls update –update calls getScript, setValue1 getActing, setValue2 getDirection, setValue3 Does this create an endless loop?