ISE 582 Information Technology for Industrial Engineering Instructor

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 13 November 2003 Web Technology for IE

JAVA Cup 9 • Adding Images to Applets • Creating Forms and Firing Events 13 November 2003 Web Technology for IE 2

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

The Parts • • Movie. Application Movie. Auxiliaries Movie. Data. Interface, Movie. Data. Observer Movie. Listener Movie. Interface, Movie. Observer Meter. Interface, Meter. Listener Poster. Interface, Poster 13 November 2003 Web Technology for IE 4

The Poster Interface public interface Poster. Interface { // Setter public abstract void set. Image. File (String file. Name); } public void set. Image. File (String s) { if (s != file) { file = s; if (file == null) {image = null; } else { image = Movie. Auxiliaries. read. Movie. Image(file); } }} 13 November 2003 Web Technology for IE 5

The Poster Class Itself import java. awt. *; import javax. swing. *; import java. util. *; public class Poster extends JComponent implements Poster. Interface { private String file; private Image image; public void set. Image. File (String s) {. . . } public void paint(Graphics g) {. . . } public Dimension get. Minimum. Size() {return new Dimension(200, 300); } public Dimension get. Preferred. Size() {return new Dimension(200, 300); } } 13 November 2003 Web Technology for IE 6

Auxiliaries Remember… public static Image read. Movie. Image(String file. Name) { try { URL url = Movie. Auxiliaries. class. get. Resource(file. Name); if (url == null) {return null; } Image. Producer producer = (Image. Producer) (url. get. Content()); if (producer == null) {return null; } Toolkit tk = Toolkit. get. Default. Toolkit(); Image image = tk. create. Image(producer); return image; } catch (IOException e) {System. out. println(e); }; return null; } 13 November 2003 Web Technology for IE 7

The Draw. Image Method • Defined in Graphics class • An instance method • Arguments specify the image, the origin, the dimensions and the component • Usage: g. draw. Image(image, x, y, width, height, component) 13 November 2003 Web Technology for IE 8

Poster class: paint: draw. Image g. draw. Image(<image>, <x>, <y>, <width>, <height>, <component>) public void paint (Graphics g) { if (image != null) { Dimension d = get. Size(); g. draw. Image(image, 10, d. width-20, d. height-20, this); }} 13 November 2003 Web Technology for IE 9

Getting Image Dimensions • • Usage: image. get. Width(this) Usage: image. get. Height(this) this = component Method needs to know about the imagedisplaying properties of the component. 13 November 2003 Web Technology for IE 10

Poster class: paint method 2 public void paint(Graphics g) { if (image != null) { Dimension d = get. Size(); int x, y, width, height, border = 20; double image. Ratio = (float) image. get. Height(this) / image. get. Width(this); double window. Ratio = (float) d. height / d. width; if (image. Ratio > window. Ratio) { height = d. height - border; width = image. get. Width(this) * (d. height - border) / image. get. Height(this); } else { width = d. width - border; height = image. get. Height(this) * (d. width - border) / image. get. Width(this); } x = (d. width - width) / 2; y = (d. height - height) / 2; g. draw. Image(image, x, y, width, height, this); }} 13 November 2003 Web Technology for IE 11

Changes to Movie. Observer class import java. util. *; public class Movie. Observer implements Observer { private Movie. Application applet; public Movie. Observer (Movie. Application a) { applet = a; } public void update (Observable observable, Object object) { applet. get. Meter(). set. Value(applet. get. Movie(). rating()); applet. get. Meter(). set. Title(applet. get. Movie(). get. Title()); applet. get. Poster(). set. Image. File(applet. get. Movie(). get. Poster()); } } 13 November 2003 Web Technology for IE 12

Application Additions to Movie. Application import. . . ; public class Movie. Application extends JApplet { // Declare instance variables: private Poster poster; . . . etc. . . // Define constructor public Movie. Application() { get. Movie(); get. Movie. Data(); get. Content. Pane(). add("West", get. Meter()); get. Content. Pane(). add("East", new JScroll. Pane(get. JList())); get. Content. Pane(). add("Center", get. Poster()); } // Define getters and setters. . . public Poster get. Poster () { if (poster == null) {set. Poster(new Poster()); } return poster; } public void set. Poster (Poster p) { poster = p; } } 13 November 2003 Web Technology for IE 13

Image Loading • draw. Image 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 13 November 2003 Web Technology for IE 14

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 13 November 2003 Web Technology for IE 15

Hierarchy of Swing Classes 13 November 2003 Web Technology for IE 16

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

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. 13 November 2003 Web Technology for IE 18

Rating. Panel. Interface public interface Rating. Panel. Interface { // Setters public abstract void set. Value 1 (int value) ; public abstract void set. Value 2 (int value) ; public abstract void set. Value 3 (int value) ; // Getters public abstract int get. Value 1 () ; public abstract int get. Value 2 () ; public abstract int get. Value 3 () ; } 13 November 2003 Web Technology for IE 19

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 13 November 2003 Web Technology for IE 20

Starting the Ratings Panel import java. awt. *; import java. util. *; import java. awt. event. *; import javax. swing. event. *; public class Rating. Panel extends JPanel implements Rating. Panel. Interface { private int value 1, value 2, value 3; private JText. Field field 1, field 2, field 3; private JButton button 1 Plus, button 2 Plus, button 3 Plus; private JButton button 1 Minus, button 2 Minus, button 3 Minus; // Constructor defined here // Setters and getters defined here // Local listener defined here } public Dimension get. Minimum. Size(){return new Dimension(300, 75); } public Dimension get. Preferred. Size(){return new Dimension(300, 75); } } 13 November 2003 Web Technology for IE 21

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)); 13 November 2003 Web Technology for IE 22

The JText. Field Constructor • JText. Field constructor requires an initial string and the number of columns in the textfield • Usage: field 1 = new JText. Field(“ 0”, 20); add field 1; • If value 1 is an integer, you need to convert it to string: field 1 = new JText. Field(String. value. Of(value 1), 20); • To fetch the current string and convert to int: Integer. parse. Int(field 1. get. Text()); • To change what appears in the text field: field 1. set. Text(String. value. Of(value 1)); 13 November 2003 Web Technology for IE 23

The JButton Constructor • The JButton constructor produces a button labeled by the constructor’s string. • Usage: button 1 Plus = new JButton(“+”) 13 November 2003 Web Technology for IE 24

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

Rating. Panel : Constructor Rating. Panel (String x, String y, String z) { set. Layout(new Grid. Layout (3, 4, 3, 3)); value 1 = value 2 = value 3 = 0; field 1 = new JText. Field(String. value. Of(value 1), 20); button 1 Plus = new JButton(“+”); button 1 Minus = new JButton(“-”); // ditto for other text fields and buttons. . . add(new JLabel (x)); add(field 1); add(button 1 Minus); add(button 1 Plus); // ditto for other labels, text fields, and buttons … // attach listeners here. . . } 13 November 2003 Web Technology for IE 26

Rating Panel : Get / Set • Getters: public int get. Value 1() { return value 1; } • Setters: public void set. Value 1(int v) { value 1 = v; field 1. set. Text(String. value. Of(value 1)); } 13 November 2003 Web Technology for IE 27

What have we got so far? • A Rating. Panel constructor that creates and arranges labels, text fields, and buttons • Getters and setters that assign values and update text fields 13 November 2003 Web Technology for IE 28

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 13 November 2003 Web Technology for IE 29

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 Action. Event class • Action-event listeners implement the Action. Listener interface • The interface requires the definition of the action. Performed method 13 November 2003 Web Technology for IE 30

Lower Level Adding Action Listener Rating. Panel (String x, String y, String z) { // labels, text fields and buttons created // attach listeners here. . . Local. Action. Listener listener = new Local. Action. Listener(); field 1. add. Action. Listener(listener); button 1 Plus. add. Action. Listener(listener); button 1 Minus. add. Action. Listener(listener); // ditto for other text fields and buttons. . . } 13 November 2003 Web Technology for IE 31

Lower Level Local Action Listener Class class Local. Action. Listener implements Action. Listener { public void action. Performed(Action. Event e) { if (e. get. Source() == field 1) { set. Value 1(Integer. parse. Int(field 1. get. Text())); } else if (e. get. Source() == button 1 Plus) { set. Value 1(value 1 + 1); } else if (e. get. Source() == button 1 Minus) { set. Value 1(value 1 - 1); } // Ditto for other text fields and buttons } 13 November 2003 Web Technology for IE 32

Lower Level Sequence of Events • If you type a new value and press Enter: – Action. Event. Listener calls action. Performed – action. Performed calls get. Text – action. Performed sets the new value • If you press the “+” button: – Action. Event. Listener calls action. Performed – action. Performed sets the new value 13 November 2003 Web Technology for IE 33

Higher Level Property Change Listeners • fire. Property. Change method: – Activates connected property-change listeners by calling the listener’s property. Change method • property. Change method: – Typically fetches values from views and relays them to models • add. Property. Change. Listener method: – Adds property-change listeners to components in which calls to fire. Property. Change occur 13 November 2003 Web Technology for IE 34

Higher Level Changing the Setters public void set. Value 1(int v) { value 1 = v; field 1. set. Text(String. value. Of(value 1)); fire. Property. Change(“value 1”, old. Value, value 1); } 13 November 2003 Web Technology for IE 35

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

Higher Level The Form Listener import java. beans. *; public class Rating. Panel. Listener implements Property. Change. Listener {private Movie. Application applet; public Rating. Panel. Listener(Movie. Application a) { applet = a; } public void property. Change (Property. Change. Event e) { String property = e. get. Property. Name(); if (applet. get. Movie() instanceof Movie) { if (property. equals("value 1")) { applet. get. Movie(). set. Script(applet. get. Form(). get. Value 1()); } else if (property. equals("value 2")) { applet. get. Movie(). set. Acting(applet. get. Form(). get. Value 2()); } else if (property. equals("value 3")) { applet. get. Movie(). set. Direction(applet. get. Form(). get. Value 3()); } }}} 13 November 2003 Web Technology for IE 37

Application Modifications to Application imports … // new instance variable private Rating. Panel form; // in constructor. . . get. Content. Pane(). add(“South”, get. Form()); // new getter public Rating. Panel get. Form () { if (form == null) { set. Form(new Rating. Panel("Script", "Acting", "Direction")); } return form; } // new setter public void set. Form (Rating. Panel f) { form = f; form. add. Property. Change. Listener(new Rating. Panel. Listener(this)); } 13 November 2003 Web Technology for IE 38

Sequence of Events • When Script value is changed in form: – Local. Action. Listener calls set. Value 1 – set. Value 1 calls set. Text and fire. Property. Change – fire. Property. Change calls property. Change – property. Change calls get. Value 1 and set. Script • So we know a change in view -> model 13 November 2003 Web Technology for IE 39

Modifications to Movie. Observer import java. util. *; public class Movie. Observer implements Observer { private Movie. Application applet; public Movie. Observer (Movie. Application a) { applet = a; } public void update (Observable observable, Object object) { applet. get. Meter(). set. Value(applet. get. Movie(). rating()); applet. get. Meter(). set. Title(applet. get. Movie(). get. Title()); applet. get. Poster(). set. Image. File(applet. get. Movie(). get. Poster()); applet. get. Form(). set. Value 1(applet. get. Movie(). get. Script()); applet. get. Form(). set. Value 2(applet. get. Movie(). get. Acting()); applet. get. Form(). set. Value 3(applet. get. Movie(). get. Direction()); }} 13 November 2003 Web Technology for IE 40

Sequence of Events • When set. Script is called in model: – Movie. Observer calls update – update calls • get. Script, set. Value 1 • get. Acting, set. Value 2 • get. Direction, set. Value 3 • Does this create an endless loop? 13 November 2003 Web Technology for IE 41