lecture 10 - · lecture 10 java cup 9: images, interactive forms 15 november 2001 information...
TRANSCRIPT
![Page 1: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/1.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 1
ISE 582: Information Technologyfor Industrial Engineers
University of Southern California
Department of Industrial and Systems Engineering
Lecture 10JAVA Cup 9: Images, Interactive Forms
15 November 2001 Information Technology for IEs 2
Handouts & Announcements
• Lecture 10 slides
• READ Winston & Narasimhan :– Chapter 47 ( pp 305-311 )
– Chaper 49 ( pp 325-339 )
• Homework 6
![Page 2: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/2.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 2
15 November 2001 Information Technology for IEs 3
JAVA Cup 8
• Adding Images to Applets
• Creating Forms and Firing Events
15 November 2001 Information Technology for IEs 4
Adding Images to Applets
• Move Image Files into Applets
• Define Subclass of JComponent
• Display Images (in paint method) usingdrawImage (from Graphics class)
• Modify other parts of program
![Page 3: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/3.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 3
15 November 2001 Information Technology for IEs 5
The Parts• MovieApplication
• MovieAuxiliaries• MovieDataInterface, MovieData, MovieDataObserver
• MovieListListener
• MovieInterface, Movie, MovieObserver
• MeterInterface, Meter, MeterListener
• PosterInterface, Poster
15 November 2001 Information Technology for IEs 6
The Poster Interfacepublic interface PosterInterface { // Setter public abstract void setImageFile (String fileName);}
![Page 4: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/4.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 4
15 November 2001 Information Technology for IEs 7
The Poster Class Itselfimport 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 8
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
![Page 5: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/5.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 5
15 November 2001 Information Technology for IEs 9
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 10
Poster class: setImageFile methodpublic void setImageFile (String s) { if (s != file) { file = s; if (file == null) { image = null; } else { image = MovieAuxiliaries.readMovieImage (file); } repaint(); } }
![Page 6: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/6.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 6
15 November 2001 Information Technology for IEs 11
Poster class: paint methodpublic 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 12
Getting Image Dimensions
• Usage: image.getWidth(this)
• Usage: image.getHeight(this)
• this = component
• Method needs to know about theimage-displaying properties of thecomponent.
![Page 7: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/7.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 7
15 November 2001 Information Technology for IEs 13
Poster class: paint method 2public 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 14
Changes to MovieObserver classimport 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())
; }}
![Page 8: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/8.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 8
15 November 2001 Information Technology for IEs 15
Additions to MovieApplicationimport ... ;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 November 2001 Information Technology for IEs 16
Image Loading
• drawImage displays the imageincrementally, as the chunks areloading
• The rest of the display shows the movieproperties quickly
• Java separates image loading anddisplay from the rest of program
• This is because Java is multithreaded
![Page 9: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/9.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 9
15 November 2001 Information Technology for IEs 17
Creating Forms and Firing Events
• Define and deploy components such aslabels and buttons
• Create mechanisms to edit movieinstance variables easily
• Firing events that activate property-change listeners
15 November 2001 Information Technology for IEs 18
Hierarchy of Swing Classes
JFrame
Frame
Window
JApplet
Applet
Panel
JPanel JList
JLabel JTextField
JButton
JComponent
Container
Component
![Page 10: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/10.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 10
15 November 2001 Information Technology for IEs 19
Form Elements
• Form elements are instances of:– JLabel class
– JTextField class
– JButton class
• In theory: These are all componentsand can be connected to the applet’scontent pane
15 November 2001 Information Technology for IEs 20
The JPanel Class
• In practice: Connect form elements to aninstance 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 instanceof the JPanel class
• Instances of JPanel class are called panels.
![Page 11: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/11.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 11
15 November 2001 Information Technology for IEs 21
RatingPanelInterfacepublic 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 22
Notice that…
• None of the setters and getters havenames that hint of movies
• Principle: views should exhibit noknowledge of a particular domain
• Any view that implements the interfacewill work well for displaying andmanipulating three values
![Page 12: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/12.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 12
15 November 2001 Information Technology for IEs 23
Starting the Ratings Panelimport 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 24
The JLabel Constructor
• Instances of the JLabel class, whenadded to a panel, displays the stringprovided to the JLabel constructor
• Usage: add(new JLabel(label));
![Page 13: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/13.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 13
15 November 2001 Information Technology for IEs 25
The JTextField Constructor
• JTextField constructor requires an initial stringand 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 tostring: field1 = newJTextField(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 26
The JButton Constructor
• The JButton constructor produces abutton labeled by the constructor’sstring.
• Usage: button1Plus = new JButton(“+”)
![Page 14: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/14.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 14
15 November 2001 Information Technology for IEs 27
The Grid Layout Manager
• You can arrange all labels, text fields, andbuttons in a panel using an instance of theGridLayout layout manager
• The GridLayout constructor takes fourarguments: #rows, #cols, row spacing, colspacing
• Usage: setLayout(new GridLayout (3,4,3,3));
15 November 2001 Information Technology for IEs 28
RatingPanel : ConstructorRatingPanel (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 ...
}
![Page 15: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/15.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 15
15 November 2001 Information Technology for IEs 29
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 30
What have we got so far?
• A RatingPanel constructor that createsand arranges labels, text fields, andbuttons
• Getters and setters that assign valuesand update text fields
![Page 16: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/16.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 16
15 November 2001 Information Technology for IEs 31
What do we need now?
• Connect a listener to the text fields andbuttons
• Arrange for the entire form to produceevents and activate connected listeners
• Lower-level listener maintains theform’s instance variables
• Higher-level listener fetches informationfrom form and relays it to a model
15 November 2001 Information Technology for IEs 32
Action Event Listeners• Text fields activate connected action-event
listeners when you press Enter or click onanother component
• Buttons produce action events when you clickon them
• Action events are instances of the ActionEventclass
• Action-event listeners implement theActionListener interface
• The interface requires the definition of theactionPerformed method
Lower Level
![Page 17: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/17.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 17
15 November 2001 Information Technology for IEs 33
Adding Action ListenerRatingPanel (String x, String y, String z) {
// labels, text fields and buttons created// attach listeners here ...LocalActionListener listener = newLocalActionListener();field1.addActionListener(listener);button1Plus.addActionListener(listener);button1Minus.addActionListener(listener);// ditto for other text fields and buttons ...
}
Lower Level
15 November 2001 Information Technology for IEs 34
Local Action Listener Classclass 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
![Page 18: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/18.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 18
15 November 2001 Information Technology for IEs 35
Sequence of Events
• If you type a new value and pressEnter:– 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
15 November 2001 Information Technology for IEs 36
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
![Page 19: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/19.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 19
15 November 2001 Information Technology for IEs 37
Changing the Setterspublic void getValue1(int v) {
value1 = v;field1.setText(String.valueOf(value1));firePropertyChange(“value1”,oldValue,value1);
}
Higher Level
15 November 2001 Information Technology for IEs 38
What Next?
• Define a Form Listener to be activatedby property-change events
• This listener implementsPropertyChangeListener interface
• Interface requires propertyChangemethod
• Requires importation of java.beanspackage
Higher Level
![Page 20: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/20.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 20
15 November 2001 Information Technology for IEs 39
The Form Listenerimport 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
15 November 2001 Information Technology for IEs 40
Modifications to Applicationimports …// new instance variableprivate RatingPanel form;// in constructor ...getContentPane().add(“South”, getForm());// new getterpublic RatingPanel getForm () { if (form == null) { setForm(new RatingPanel("Script", "Acting", "Direction")); } return form; }// new setterpublic void setForm (RatingPanel f) { form = f; form.addPropertyChangeListener(new RatingPanelListener(this)); }
Application
![Page 21: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/21.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 21
15 November 2001 Information Technology for IEs 41
Sequence of Events
• When Script value is changed in form:– LocalActionListener calls setValue1
– setValue1 calls setText andfirePropertyChange
– firePropertyChange calls propertyChange
– propertyChange calls getValue1 andsetScript
• So we know a change in view -> model
15 November 2001 Information Technology for IEs 42
Modifications to MovieObserverimport 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());
}}
![Page 22: Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries](https://reader031.vdocument.in/reader031/viewer/2022031009/5b93046609d3f2d1448c853c/html5/thumbnails/22.jpg)
Information Technology for Industrial Engineers 15 November 2001
http://www-classes.usc.edu/engr/ise/582 22
15 November 2001 Information Technology for IEs 43
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?