Lecture 10 -  · Lecture 10 JAVA Cup 9: Images, Interactive Forms 15 November 2001 Information...

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

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

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

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

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

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.

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

; }}

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

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

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.

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

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

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(“+”)

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

}

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

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

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

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

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

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

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

}}

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?