1 IM103 week 8 (C&K ch17, p412) Advanced graphic programming Learning objectives By the end of this chapter you should be able to:  create dialogue windows.

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

2D Graphics Drawing Things. Graphics In your GUI, you might want to draw graphics E.g. draw lines, circles, shapes, draw strings etc The Graphics class.
Unit 3 Graphical User Interface (GUI) Dr. Magdi AMER.
1 Chapter 7 Graphics and Event Handling. 2 Overview The java.awt and javax.swing packages and their subpackages support graphics and event handling. Many.
June 1, 2000 Object Oriented Programming in Java (95-707) Advanced Topics 1 Lecture 9 Object Oriented Programming in Java Advanced Topics Abstract Windowing.
© The McGraw-Hill Companies, 2006 Chapter 18 Advanced graphics programming.
CS3157 Java UI Recitation. Material Covered: Overview of AWT components, Event Handling, creating applets, and sample UI. Not covered in recitation: Drawing,
Unit 111 Java GUI Components and Events  Learning Outcomes oDistinguish between GUI components and containers. oIdentify and distinguish top-level containers.
Chapter 13: Advanced GUIs and Graphics J ava P rogramming: From Problem Analysis to Program Design, From Problem Analysis to Program Design, Second Edition.
Java GUI building with the AWT. 2 AWT (Abstract Window Toolkit) Present in all Java implementations Described in most Java textbooks Adequate for many.
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.
Chapter 13 Advanced GUIs and Graphics. Chapter Objectives Learn about applets Explore the class Graphics Learn about the class Font Explore the class.
Java Programming, 3e Concepts and Techniques Chapter 3 Section 65 – Manipulating Data Using Methods – Java Applet.
Java Software Solutions Lewis and Loftus Chapter 10 1 Copyright 1997 by John Lewis and William Loftus. All rights reserved. Graphical User Interfaces --
Java Programming: From Problem Analysis to Program Design, 4e Chapter 12 Advanced GUIs and Graphics.
Chapter 13 Java AWT – Part II (Optional) Lecture Slides to Accompany An Introduction to Computer Science Using Java (2nd Edition) by S.N. Kamin, D. Mickunas,
Graphical User Interface CSI 1101 N. El Kadri. Plan - agenda Graphical components Model-View-Controller Observer/Observable.
GUI programming Graphical user interface-based programming.
Java Programming 1 Java Programming II Events, AWT, and Swing.
C13a, AWT Create, display, facilitate user interaction with window objects software framework: a way of structuring generic solutions to common problems.
Cs884(Prasad)java12AWT1 Abstract Windowing Toolkit Support for Graphical User Interface (Event-driven programming)
MT311 Java Application Development and Programming Languages Li Tak Sing ( 李德成 )
Objectives of This Session
1 Block1 – unit 2 (The Case study in Budd 5-6).  create a small application that uses the Abstract Windowing Toolkit (AWT)  Swing packages to simulate.
More on Hierarchies 1. When an object of a subclass is instantiated, is memory allocated for only the data members of the subclass or also for the members.
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
1 Unit 5 GUI Aum Amriteshwaryai Namah. 2 Overview Shall learn how to reuse the graphics classes provided by Java for constructing Graphical User Interface.
GUI Clients 1 Enterprise Applications CE00465-M Clients with Graphical User Interfaces.
Even-Driven Programming and basic Graphical User Interface.
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.
Concurrent Programming and Threads Threads Blocking a User Interface.
Java Applets: GUI Components, Events, Etc. Ralph Westfall June, 2010.
OOP (Java): GUI Intro/ OOP Objectives – –use an image viewer application to introduce Java's GUI features Semester 2,
Creating a GUI with JFC/Swing. What are the JFC and Swing? JFC –Java Foundation Classes –a group of features to help people build graphical user interfaces.
9.1 Java Packages A collection of classes Allows classes to be grouped arbitrarily Hierarchical structure independent of inheritance Classes can.
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.
Intro to Applets. Applet Applets run within the Web browser environment Applets bring dynamic interaction and live animation to an otherwise static HTML.
CIS Intro to JAVA Lecture Notes Set 8 9-June-05.
Creating a Window. A basic window in Java is represented by an object of the class Window in the package java.awt.
CSI 3125, Preliminaries, page 1 AWT Control. CSI 3125, Preliminaries, page 2 AWT Control The AWT supports the following types of controls: ■ Labels ■
Graphical User Interfaces (GUI). PART ONE About GUI’s.
Rina System development with Java Instructors: Rina Zviel-Girshin Lecture 10.
What Is an Event? Events – Objects that describe what happened Event sources – The generator of an event Event handlers – A method that receives an event.
Chapter 12: The Abstract Window Toolkit Java Programming FROM THE BEGINNING Copyright © 2000 W. W. Norton & Company. All rights reserved. 1 Chapter 12.
Chapter 10 - Writing Graphical User Interfaces1 Chapter 10 Writing Graphical User Interfaces.
1 Java and AWT CPS 470 Spring 1998 Laura Campbell.
Lesson 28: More on the GUI button, frame and actions.
Graphical User Interface (GUI)
C13b, AWT cont.. Panel Container that acts like a Component Can be added into other components (like Frames, other Panels) private Panel makeScrollBars()
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.
Java Programming (By Rama Bhadra Rao M) You can Trace me in Day 5
AWT Vs SWING. 2 AWT (Abstract Window Toolkit) Present in all Java implementations Described in most Java textbooks Adequate for many applications Uses.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Chapter 7 ( Book Chapter 14) GUI and Event-Driven Programming.
CSC 205 Programming II Lecture 5 AWT - I.
GUI building with the AWT
Aum Amriteshwaryai Namah
Advanced GUIs II CS Lecture
Chap 7. Building Java Graphical User Interfaces
JAVA AWT.
AWT.
AWT Components and Containers
Constructors, GUI’s(Using Swing) and ActionListner
Menu Bars and Menus.
GUI building with the AWT
Advanced GUIs II CS Lecture
Advanced GUIs and Graphics
Graphical User Interface
Presentation transcript:

1 IM103 week 8 (C&K ch17, p412) Advanced graphic programming Learning objectives By the end of this chapter you should be able to:  create dialogue windows in Java;  create pull-down and pop-up menus;  use the FileDialog class to access the computer's file system;  use a number of methods of the Graphics class;  add scrollbars and images to components.

2 The Dialog class this class provides a separate frame that pops up, allowing communication between the user and the program.

3 The ChangingFaceWithDialog class Pressing this button causes this dialogue to appear

4 originally, the background colour was not set within the class itself, but was the job of the frame in which it was run; in the new application, responsibility will be given to the ChangingFaceWithDialog class itself; it will therefore be the ChangingFaceWithDialog object that will be painted with the correct background colour rather than the frame; the face will start off with the default (white) background and then the user can choose the colour by pressing the "Set Background Colour" button; pressing this button causes a separate dialogue window to be displayed. Building the ChangingFaceWithDialog class

5 The ColourDialog class : the attributes import java.awt.*; import java.awt.event.*; class ColourDialog extends Dialog implements ActionListener { private Button okButton = new Button("OK"); private Label greenLabel = new Label("Green ",Label.CENTER); private Label yellowLabel = new Label("Yellow",Label.CENTER); private Label greyLabel = new Label("Grey ",Label.CENTER); // create the checkboxes private Checkbox greenBox = new Checkbox(); private Checkbox yellowBox = new Checkbox(); private Checkbox greyBox = new Checkbox(); ……………………………………………………………

6 // create a checkbox group to link the checkboxes together private CheckboxGroup box = new CheckboxGroup(); /* declare a reference to the location of the component whose background colour is to be changed */ private Component associatedComponent; …………………………………………………………… The ColourDialog class : the attributes continued

public ColourDialog(Frame frameIn, Component componentIn) { /* call the constructor of Dialog with the associated frame as a parameter */ super(frameIn); /* assign the associatedComponent attribute to the component that has been sent in as a parameter */ associatedComponent = componentIn; /* set the layout to FlowLayout (BorderLayout is the default for Dialogs) */ setLayout(new FlowLayout()); // set the background colour of the dialog window setBackground(Color.red); …………………………………………………………… The ColourDialog class : the constructor

8 …………………………………………………………… // assign the checkboxes to a group greenBox.setCheckboxGroup(box); yellowBox.setCheckboxGroup(box); greyBox.setCheckboxGroup(box); // add the components to the Dialog add(greenLabel); add(greenBox); add(yellowLabel); add(yellowBox); add(greyLabel); add(greyBox); add(okButton); // add the ActionListener okButton.addActionListener(this); …………………………………………………………… The ColourDialog class : the constructor continued

9 …………………………………………………………… /* set the location of the dialogue window, relative to the top left-hand corner of the frame */ setLocation(300,300); /* use the pack method to automatically size the dialogue window */ pack(); // make the dialogue visible setVisible(true); } The ColourDialog class : the constructor continued

/* the actionPerformed method determines what happens when the okButton is pressed */ public void actionPerformed(ActionEvent e) { if(greenBox.getState() == true) { associatedComponent.setBackground(Color.green); } else if(yellowBox.getState() == true) { associatedComponent.setBackground(Color.yellow); } else if(greyBox.getState() == true) { associatedComponent.setBackground(Color.lightGray); } // close down the dialogue window dispose(); } } // end of ColourDialog class The ColourDialog class : the actionPerformed method

11 The ChangingFaceWithDialog class most of this is the same as the ChangingFace class; the new features are: 1.The ChangingFaceWithDialog class needs to know the location of the frame it is going to run in, because it has to pass this information to a Dialog object each time one is created. So we have this attribute: Frame parentFrame; the constructor header looks like this: public ChangingFaceWithDialog(Frame frameIn) and the constructor contains this line: parentFrame = frameIn; 2.There is a new option in the ActionPerformed method, to create a ColourDialog object: if(e.getSource() == backgroundButton) { new ColourDialog(parentFrame, this); }

12 An alternative implementation of the ChangingFaceWithDialog class to make the background change as soon as the colour is selected we would make the following changes: 1.Make the class implement the ItemListener interface as well as the ActionListener interface: class ColourDialog extends Dialog implements ActionListener, ItemListener 2.In the constructor, add ItemListeners to each of the checkboxes: greenBox.addItemListener(this); yellowBox.addItemListener(this); greyBox.addItemListener(this);

13 An alternative implementation of the ChangingFaceWithDialog class …. …. continued 3.Implement an itemStateChanged method that will determine what happens when the state of a checkbox is changed: public void itemStateChanged(ItemEvent e) { if(e.getSource()== greenBox) { associatedComponent.setBackground(Color.green); } else if(e.getSource() == yellowBox) { associatedComponent.setBackground(Color.yellow); } else if(e.getSource() == greyBox) { associatedComponent.setBackground(Color.lightGray); }

14 An alternative implementation of the ChangingFaceWithDialog class …. ….. continued 4.Modify the actionPerformed method so that all it does is dispose of the dialogue box (when the okButton is pressed): public void actionPerformed(ActionEvent e) { dispose(); }

15 Modal and non-modal dialogues an object of the Dialog class can be modal or non-modal; in a non-modal dialogue, any listening components on the originating frame are still enabled and we can therefore interact with the frame even while the dialogue is visible; in a modal dialogue, interaction with the parent frame is frozen until the dialogue is disposed of; to create a modal dialogue we use a different constructor, which takes a second, boolean, parameter; if this parameter is true a modal dialogue will be created, if false a non-modal dialogue will be created; in the constructor of the ColourDialog, we could have created a modal dialogue by calling the constructor of the superclass like this: super(frameIn, true);

16 Creating menus Graphical menu options are provided in one of two ways: either by a bar at the top of the window, referred to as a pull- down menu; or by a box that pops up as required - a pop-up menu.

17 Pull-down menus

18 The ChangingFaceWithMenu class Attributes private MenuBar bar = new MenuBar(); private Menu backgroundMenu = new Menu("Background"); private Menu moodMenu = new Menu("Mood"); private MenuItem greenChoice = new MenuItem("Green"); private MenuItem yellowChoice = new MenuItem("Yellow"); private MenuItem greyChoice = new MenuItem("Grey"); private MenuItem smileChoice = new MenuItem("Smile"); private MenuItem frownChoice = new MenuItem("Frown");

19 The components that make up a pull-down menu MenuBar Menu MenuItem

20 The ChangingFaceWithMenu class The constructor public ChangingFaceWithMenu(Frame frameIn) { /* add the menu bar to the associated frame (which has been passed in as a paramter */ frameIn.setMenuBar(bar); // add the top-level menus to the menu bar bar.add(backgroundMenu); bar.add(moodMenu); // add the sub-menu items to the top-level menus backgroundMenu.add(greenChoice); backgroundMenu.add(yellowChoice); backgroundMenu.add(greyChoice); moodMenu.add(smileChoice); moodMenu.add(frownChoice); ……………………………………………………………………………………………

21 ……………………………………………………………… // add ActionListeners to the menu items greenChoice.addActionListener(this); yellowChoice.addActionListener(this); greyChoice.addActionListener(this); smileChoice.addActionListener(this); frownChoice.addActionListener(this); } The ChangingFaceWithMenu class The constructor - continued

22 Popup menus

23 this is similar to the ColourDialog class; however, the responsibility for changing the mood, as well as the background colour, now lies with the popup menu; this class therefore needs to have access to the isHappy attribute of the ChangingFaceWithPopup class; we therefore need to provide the ChangingFaceWithPopup class with a setHappy method. but now the associated component that we send in to the constructor of our FacePopupMenu class can no longer be just any old component; this is because selecting one of the mood menu options will have to invoke the setHappy method - and a Component object doesn't have such a method; the solution is to create an interface; we will call the interface Smileable, and we will give it a setHappy method; then we can get our ChangingFaceWithPopup class to implement Smileable (thus guaranteeing that it will have a setHappy method). The FacePopupMenu class

24 import java.awt.*; interface Smileable { public void setHappy(boolean moodIn); /* the FacePopupMenu class will need to use the following two methods. Any class that implements Smileable must define these methods. The ChangingFaceWithPopup class will define them because it inherits them from component */ public void setBackground(Color c); public void repaint(); } The Smileable interface

25 The Choice class and the List class

26 The FileDialog class A FileDialog object interacts with the computer's operating system to enable us to search directories and select files; In the FileHandler class below, choosing the select option creates a FileDialog object.

27 The FileHandler class: choosing the select option in a Windows environment

28 The FileHandler class: choosing the select option in a UNIX environment

The FileHandler class: the actionPerformed method public void actionPerformed(ActionEvent e) { if(e.getSource() == selectChoice) { // create a new FileDialog object and make it visible FileDialog fd = new FileDialog(associatedFrame); fd.show(); // get the name of the selected file selectedFile = fd.getFile(); /* get the full name of the directory in which the selected file is located */ dir = fd.getDirectory(); viewArea.append("Selected File: " + dir + selectedFile + '\n'); }

if(e.getSource() == runChoice) { // create a RunTime object Runtime rt = Runtime.getRuntime(); try { // run the file rt.exec(dir + selectedFile); } catch(IOException ioe) { if(selectedFile == null) // no file selected { viewArea.append("No file selected\n"); } else { viewArea.append("Not an executable file\n"); } } The FileHandler class: the actionPerformed method.... continued

31 Using scrollbars

import java.awt.*; import java.awt.event.*; class ScrollbarDemo extends Panel implements AdjustmentListener { // declare and initialize a horizontal scrollbar private Scrollbar bar = new Scrollbar(Scrollbar.HORIZONTAL); private Label valueLabel = new Label(); public ScrollbarDemo (int MinIn, int MaxIn) { setLayout(new BorderLayout()); // set the minimum and maximum values for the scrollbar bar.setMinimum(MinIn); bar.setMaximum(MaxIn); // add the scrollbar to the top of the panel add("North", bar); // set the initial text for the label valueLabel.setText("Current value: " + MinIn); // add the label to the panel add("South", valueLabel); // add the listener to the scrollbar bar.addAdjustmentListener(this); } …………………………………………………………………… The ScrollBarDemo class

33 ………………………………………………………………… // the event-handler public void adjustmentValueChanged(AdjustmentEvent e) { valueLabel.setText("Current value: " + bar.getValue()); } The ScrollBarDemo class …. continued

34 The ExpandingRectangle class

35 public void adjustmentValueChanged(AdjustmentEvent e) { if(e.getAdjustable() == widthBar) { /* set the width of the rectangle to the value of the horizontal scrollbar and repaint */ width = widthBar.getValue(); repaint(); } if(e.getAdjustable() == heightBar) { /* set the height of the rectangle to the value of the vertical scrollbar and repaint */ height = heightBar.getValue(); repaint(); } The ExpandingRectangle class - the event handler

Adding images to components import java.awt.*; class ImageHolder extends Canvas /* A Canvas is similar to a Panel, but is not a subclass of Container, so we can't add other components to it */ { public void paint(Graphics g) { /* the getDefaultToolkit method returns a Toolkit object containing the necessary information about our system */ Toolkit kit = Toolkit.getDefaultToolkit(); // the getImage method loads the image from file Image image = kit.getImage("Java.gif"); g.drawImage(image, 10, 10, this); }

37 Running the ImageHolder class in a frame

38 import java.awt.*; public class RunImageHolder1 { public static void main(String[] args) { EasyFrame frame = new EasyFrame("Image display"); ImageHolder holder = new ImageHolder(); // create a ScrollPane SrollPane pane = new ScrollPane(ScrollPane.SCROLLBARS_ALWAYS); // add the holder to theScrollPane pane.add(holder); // add the ScrollPane to the frame frame.add(pane); frame.setSize(250,340); frame.setVisible(true); } Using the ScrollPane class

39 ScrollPane.SCROLLBARS _ AS _ NEEDED ScrollPane.SCROLLBARS _ NEVER ScrollPane.SCROLLBARS _ ALWAYS The ScrollPane class: Options for the constructor parameter

40 Displaying an image using the ScrollPane class