ISE 582: Information Technology for Industrial Engineering Instructor: Elaine Chew University of Southern California Department of Industrial and Systems.

Slides:



Advertisements
Similar presentations
Java GUI building with the AWT. AWT (Abstract Window Toolkit) Present in all Java implementations Described in (almost) every Java textbook Adequate for.
Advertisements

Graphic User Interfaces Layout Managers Event Handling.
Introduction to Java Classes, events, GUI’s. Understand: How to use TextPad How to define a class or object How to create a GUI interface How event-driven.
Chapter 14 Applets. 2 Knowledge Goals Understand the differing roles of applications and applets Understand how a browser operates Understand the role.
CS102--Object Oriented Programming Lecture 19: – The Swing Package (II) Copyright © 2008 Xiaoyan Li.
ISE 582: Information Technology for Industrial Engineering Instructor: Elaine Chew University of Southern California Department of Industrial and Systems.
ISE 582: Information Technology for Industrial Engineering Instructor: Elaine Chew University of Southern California Department of Industrial and Systems.
ISE 582: Web Technology for Industrial Engineering University of Southern California DJE Dept of Industrial and Systems Engineering Lecture 9 JAVA Cup.
GUI and Event-Driven Programming Part 2. Event Handling An action involving a GUI object, such as clicking a button, is called an event. The mechanism.
1 Class 8. 2 Chapter Objectives Use Swing components to build the GUI for a Swing program Implement an ActionListener to handle events Add interface components.
Chapter 6: Graphical User Interface (GUI) and Object-Oriented Design (OOD) J ava P rogramming: Program Design Including Data Structures Program Design.
Lesson 35: Review of the Java GUI. The JFrame, Container and JButton.
Io package as Java’s basic I/O system continue’d.
Java Programming Chapter 10 Graphical User Interfaces.
Chapter 9: Applets Jim Burns Fall Outline Learn about applets Learn about applets Write an HTML doc to host an applet Write an HTML doc to host.
Introduction to GUI Java offers a great number of pre-defined classes to support the development of graphical user interfaces –These are broken down into.
Java Programming, 3e Concepts and Techniques Chapter 3 Section 65 – Manipulating Data Using Methods – Java Applet.
1 Event Driven Programming wirh Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
Java Programming: From Problem Analysis to Program Design, Second Edition1  Learn about basic GUI components.  Explore how the GUI components JFrame,
1 CSC111H Graphical User Interfaces (GUIs) Introduction GUIs in Java Understanding Events A Simple Application The Containment Hierarchy Layout Managers.
Applets and Frames CS 21a: Introduction to Computing I First Semester,
Graphical User Interface CSI 1101 N. El Kadri. Plan - agenda Graphical components Model-View-Controller Observer/Observable.
MIT AITI 2003 Lecture 17. Swing - Part II. The Java Event Model Up until now, we have focused on GUI's to present information (with one exception) Up.
GUI programming Graphical user interface-based programming.
Java GUI building with Swing. 2 AWT (Abstract Window Toolkit) Present in all Java implementations Described in (almost) every Java textbook Adequate for.
GUI Components and Design Here we add one more component to our programs, JButtons –JButtons can only be inserted into JPanels (or JApplets) –Clicking.
Lesson 34: Layering Images with Java GUI. The FlowLayout RECAP.
Ch 3-4: GUI Basics Java Software Solutions Foundations of Program Design Sixth Edition by Lewis & Loftus Coming up: GUI Components.
– Advanced Programming P ROGRAMMING IN Lecture 21 Introduction to Swing.
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
Copyright © 2002, Systems and Computer Engineering, Carleton University c-Gui3.ppt * Object-Oriented Software Development Part 18-c Building.
MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -1 Lecture 3 - Graphical User Interfaces r GUI toolkits in Java API r JFrame r GUI components.
Swing GUI Components You can create graphics components to place on your applet using classes available in the Swing package ( javax.swing ) Class names.
An Introduction to Programming and Object Oriented Design using Java 3 rd Edition. Dec 2007 Jaime Niño Frederick Hosch Chapter 18 Integrating user interface.
Layout Managers Arranges and lays out the GUI components on a container.
1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces (GUIs)
Applets and Frames. Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L14: GUI Slide 2 Applets Usually.
Java Programming Applets. Topics Write an HTML document to host an applet Understand simple applets Use Labels with simple AWT applets Write a simple.
1 / 67 COP 3503 FALL 2012 SHAYAN JAVED LECTURE 14 Programming Fundamentals using Java 1.
Java GUI. Graphical User Interface (GUI) a list a button a text field a label combo box checkbox.
Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif.
1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces (GUIs)
1 GUI programming Graphical user interface-based programming Chapter G1 (pages )
Java Programming: From Problem Analysis to Program Design, 3e Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
Introduction to Java Chapter 9 - Graphical User Interfaces and Applets1 Chapter 9 Graphical User Interfaces and Applets.
Java Programming: From Problem Analysis to Program Design, Second Edition1 Lecture 5 Objectives  Learn about basic GUI components.  Explore how the GUI.
Chapter 10 - Writing Graphical User Interfaces1 Chapter 10 Writing Graphical User Interfaces.
Swing GUI Components So far, we have written GUI applications which can ‘ draw ’. These applications are simple, yet typical of all Java GUI applications.
Lesson 28: More on the GUI button, frame and actions.
Graphical User Interface (GUI)
Applets. 9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L12: Applets Slide 2 Applets Usually.
MIT AITI 2004 Swing Event Model Lecture 17. The Java Event Model In the last lecture, we learned how to construct a GUI to present information to the.
5-1 GUIs and Events Rick Mercer. 5-2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces to respond.
GUIs & Event-Driven Programming Chapter 11 Review.
AWT Vs SWING. 2 AWT (Abstract Window Toolkit) Present in all Java implementations Described in most Java textbooks Adequate for many applications Uses.
Java Visual Applications CSIS 3701: Advanced Object Oriented Programming.
GUIs and Events Rick Mercer.
Introduction Many Java application use a graphical user interface or GUI (pronounced “gooey”). A GUI is a graphical window or windows that provide interaction.
CompSci 230 S Programming Techniques
Java Applet What is a Java Applet? How is applet compiled?
Swing JComponents.
A First Look at GUI Applications
“Form Ever Follows Function” Louis Henri Sullivan
Graphical User Interface (pronounced "gooey")
Ellen Walker Hiram College
MVC Paradigm The MVC paradigm breaks applications or interfaces into three parts: the model, the view, and the controller. A --> 25 % B --> 60 % C -->
Graphical user interface-based programming
CiS 260: App Dev I Chapter 6: GUI and OOD.
GUI building with the AWT
Graphical User Interface
Presentation transcript:

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 2003Web Technology for IE2 JAVA Cup 9 Adding Images to Applets Creating Forms and Firing Events

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

13 November 2003Web Technology for IE4 The Parts MovieApplication MovieAuxiliaries MovieDataInterface, MovieData, MovieDataObserver MovieListListener MovieInterface, Movie, MovieObserver MeterInterface, Meter, MeterListener PosterInterface, Poster

13 November 2003Web Technology for IE5 The Poster Interface public interface PosterInterface { // Setter public abstract void setImageFile (String fileName); } public void setImageFile (String s) { if (s != file) { file = s; if (file == null) {image = null;} else { image = MovieAuxiliaries.readMovieImage(file); }

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

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

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

13 November 2003Web Technology for IE9 Poster class: paint: drawImage public void paint (Graphics g) { if (image != null) { Dimension d = getSize(); g.drawImage(image,10,10,d.width-20,d.height-20,this); } g.drawImage(,,,,, )

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

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

13 November 2003Web Technology for IE12 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()); }

13 November 2003Web Technology for IE13 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; } } Application

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

13 November 2003Web Technology for IE15 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 property- change listeners

13 November 2003Web Technology for IE16 Hierarchy of Swing Classes

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

13 November 2003Web Technology for IE18 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 2003Web Technology for IE19 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 () ; }

13 November 2003Web Technology for IE20 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 2003Web Technology for IE21 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);} }

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

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

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

13 November 2003Web Technology for IE26 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... }

13 November 2003Web Technology for IE27 Rating Panel : Get / Set Getters: public int getValue1() { return value1; } Setters: public void setValue1(int v) { value1 = v; field1.setText(String.valueOf(value1)); }

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

13 November 2003Web Technology for IE29 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 2003Web Technology for IE30 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 Lower Level

13 November 2003Web Technology for IE31 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... } Lower Level

13 November 2003Web Technology for IE32 Local Action Listener Class class 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

13 November 2003Web Technology for IE33 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 Lower Level

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

13 November 2003Web Technology for IE35 Changing the Setters public void setValue1(int v) { value1 = v; field1.setText(String.valueOf(value1)); firePropertyChange(“value1”,oldValue,value1); } Higher Level

13 November 2003Web Technology for IE36 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 Higher Level

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

13 November 2003Web Technology for IE38 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)); } Application

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

13 November 2003Web Technology for IE40 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()); }}

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