Information Technology for Industrial Engineers 15 November ISE 582: Information Technology for Industrial Engineers

Transcription

1 ISE 582: Information Technology for Industrial Engineers University of Southern California Department of Industrial and Systems Engineering Lecture 10 JAVA Cup 9: Images, Interactive Forms Handouts & Announcements Lecture 10 slides READ Winston & Narasimhan : Chapter 47 ( pp ) Chaper 49 ( pp ) Homework 6 15 November 2001 Information Technology for IEs 2 1

2 Adding Images to Applets JAVA Cup 8 Creating Forms and Firing Events 15 November 2001 Information Technology for IEs 3 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 15 November 2001 Information Technology for IEs 4 2

3 MovieApplication MovieAuxiliaries MovieDataInterface, MovieData, MovieDataObserver MovieListListener MovieInterface, Movie, MovieObserver MeterInterface, Meter, MeterListener PosterInterface, Poster The Parts 15 November 2001 Information Technology for IEs 5 The Poster Interface public interface PosterInterface { // Setter public abstract void setimagefile (String filename); 15 November 2001 Information Technology for IEs 6 3

4 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); 15 November 2001 Information Technology for IEs 7 Auxiliaries 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; 15 November 2001 Information Technology for IEs 8 4

5 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) 15 November 2001 Information Technology for IEs 9 Poster class: setimagefile method public void setimagefile (String s) { if (s!= file) { file = s; if (file == null) { image = null; else { image = MovieAuxiliaries.readMovieImage (file); repaint(); 15 November 2001 Information Technology for IEs

6 Poster class: paint method public void paint (Graphics g) { if (image!= null) { Dimension d = getsize(); g.drawimage(image,10,10,d.width-20,d.height- 20,this); 15 November 2001 Information Technology for IEs 11 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. 15 November 2001 Information Technology for IEs

7 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); 15 November 2001 Information Technology for IEs 13 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()) ; 15 November 2001 Information Technology for IEs

8 Application 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; 15 November 2001 Information Technology for IEs 15 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 15 November 2001 Information Technology for IEs

9 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 propertychange listeners 15 November 2001 Information Technology for IEs 17 Hierarchy of Swing Classes Component Container Window Panel JComponent Frame Applet JPanel JList JFrame JApplet JLabel JButton JTextField 15 November 2001 Information Technology for IEs

10 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 15 November 2001 Information Technology for IEs 19 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. 15 November 2001 Information Technology for IEs

11 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 () ; 15 November 2001 Information Technology for IEs 21 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 15 November 2001 Information Technology for IEs

12 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); 15 November 2001 Information Technology for IEs 23 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)); 15 November 2001 Information Technology for IEs

13 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)); 15 November 2001 Information Technology for IEs 25 The JButton Constructor The JButton constructor produces a button labeled by the constructor s string. Usage: button1plus = new JButton( + ) 15 November 2001 Information Technology for IEs

14 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)); 15 November 2001 Information Technology for IEs 27 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 November 2001 Information Technology for IEs

15 Rating Panel : Get / Set Getters: public int getvalue1() { return value1; Setters: public void getvalue1(int v) { value1 = v; field1.settext(string.valueof(value1)); 15 November 2001 Information Technology for IEs 29 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 15 November 2001 Information Technology for IEs

16 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 15 November 2001 Information Technology for IEs 31 Lower Level 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 15 November 2001 Information Technology for IEs

17 Lower Level 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 November 2001 Information Technology for IEs 33 Local Action Listener Class class LocalActionListener implements ActionListener { Lower Level 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 15 November 2001 Information Technology for IEs

18 Lower Level 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 15 November 2001 Information Technology for IEs 35 Higher Level 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 15 November 2001 Information Technology for IEs

19 Higher Level Changing the Setters public void getvalue1(int v) { value1 = v; field1.settext(string.valueof(value1)); firepropertychange( value1,oldvalue,value1); 15 November 2001 Information Technology for IEs 37 Higher Level 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 15 November 2001 Information Technology for IEs

20 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(); Higher Level 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()); 15 November 2001 Information Technology for IEs 39 Application 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)); 15 November 2001 Information Technology for IEs

21 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 15 November 2001 Information Technology for IEs 41 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()); 15 November 2001 Information Technology for IEs

22 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? 15 November 2001 Information Technology for IEs