Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries

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




JAVA Cup 8

• Adding Images to Applets

• Creating Forms and Firing Events


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




The Parts• MovieApplication

• MovieAuxiliaries• MovieDataInterface, MovieData, MovieDataObserver

• MovieListListener

• MovieInterface, Movie, MovieObserver

• MeterInterface, Meter, MeterListener

• PosterInterface, Poster


The Poster Interfacepublic interface PosterInterface { // Setter public abstract void setImageFile (String fileName);}




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);}}


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




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)


Poster class: setImageFile methodpublic void setImageFile (String s) { if (s != file) { file = s; if (file == null) { image = null; } else { image = MovieAuxiliaries.readMovieImage (file); } repaint(); } }




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);}

}


Getting Image Dimensions

• Usage: image.getWidth(this)

• Usage: image.getHeight(this)

• this = component

• Method needs to know about theimage-displaying properties of thecomponent.




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); }}


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())

; }}




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


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




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


Hierarchy of Swing Classes

JFrame

Frame

Window

JApplet

Applet

Panel

JPanel JList

JLabel JTextField

JButton

JComponent

Container

Component




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


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.




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 () ;

}


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




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);}}


The JLabel Constructor

• Instances of the JLabel class, whenadded to a panel, displays the stringprovided to the JLabel constructor

• Usage: add(new JLabel(label));




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));


The JButton Constructor

• The JButton constructor produces abutton labeled by the constructor’sstring.

• Usage: button1Plus = new JButton(“+”)




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));


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 ...

}




Rating Panel : Get / Set

• Getters:public int getValue1() { return value1; }

• Setters:public void getValue1(int v) {

value1 = v;field1.setText(String.valueOf(value1));

}


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




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


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




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


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




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


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




Changing the Setterspublic void getValue1(int v) {

value1 = v;field1.setText(String.valueOf(value1));firePropertyChange(“value1”,oldValue,value1);

}

Higher Level


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




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


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




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


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());

}}




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?

Documents

Lecture 10 - · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information Technology for IEs 2 Handouts & Announcements ... return null;} Auxiliaries