Presentation is loading. Please wait.

Presentation is loading. Please wait.

ITEC220 GUI Lecture – Part 1 References  Java Software Solutions,” by Lewis & Loftus  Chapter 3  Chapter 4  Chapter 5  Chapter 6  Java Foundations-Introduction.

Published byCornelius Boone Modified over 9 years ago

Similar presentations

Presentation on theme: "ITEC220 GUI Lecture – Part 1 References  Java Software Solutions,” by Lewis & Loftus  Chapter 3  Chapter 4  Chapter 5  Chapter 6  Java Foundations-Introduction."— Presentation transcript:

1 ITEC220 GUI Lecture – Part 1 References  Java Software Solutions,” by Lewis & Loftus  Chapter 3  Chapter 4  Chapter 5  Chapter 6  Java Foundations-Introduction to Program Design & Data Structures,” by Lewis, DePasquale, and Chase  Chapter 6

2 Chapter 3 Using Classes and Objects References Java Software Solutions,” by Lewis & Loftus  Chapter 3  Chapter 4  Chapter 5  Chapter 6 Java Foundations-Introduction to Program Design & Data Structures,” by Lewis, DePasquale, and Chase  Chapter 6

3 © 2004 Pearson Addison-Wesley. All rights reserved2-3 Outline Components and Containers Images

4 © 2004 Pearson Addison-Wesley. All rights reserved2-4 Graphical Applications They are called command-line applications, which interact with the user using simple text prompts Let's examine some Java applications that have graphical components These components will serve as a foundation to programs that have true graphical user interfaces (GUIs)

5 © 2004 Pearson Addison-Wesley. All rights reserved2-5 GUI Components A GUI component is an object that represents a screen element such as a button or a text field GUI-related classes are defined primarily in the java.awt and the javax.swing packages The Abstract Windowing Toolkit (AWT) was the original Java GUI package The Swing package provides additional and more versatile components Both packages are needed to create a Java GUI- based program

6 © 2004 Pearson Addison-Wesley. All rights reserved2-6 GUI Containers A GUI container is a component that is used to hold and organize other components A frame is a container that is used to display a GUI-based Java application A frame is displayed as a separate window with a title bar – it can be repositioned and resized on the screen as needed A panel is a container that cannot be displayed on its own but is used to organize other components A panel must be added to another container to be displayed

7 © 2004 Pearson Addison-Wesley. All rights reserved2-7 GUI Containers A GUI container can be classified as either heavyweight or lightweight A heavyweight container is one that is managed by the underlying operating system A lightweight container is managed by the Java program itself Occasionally this distinction is important A frame is a heavyweight container and a panel is a lightweight container

8 © 2004 Pearson Addison-Wesley. All rights reserved2-8 Labels A label is a GUI component that displays a line of text Labels are usually used to display information or identify other components in the interface Let's look at a program that organizes two labels in a panel and displays that panel in a frame See Authority.java (page 144)Authority.java This program is not interactive, but the frame can be repositioned and resized

9 © 2004 Pearson Addison-Wesley. All rights reserved2-9 Nested Panels Containers that contain other components make up the containment hierarchy of an interface This hierarchy can be as intricate as needed to create the visual effect desired The following example nests two panels inside a third panel – note the effect this has as the frame is resized See NestedPanels.java (page 146)NestedPanels.java

10 © 2004 Pearson Addison-Wesley. All rights reserved2-10 Outline Components and Containers Images

11 © 2004 Pearson Addison-Wesley. All rights reserved2-11 Images Images are often used in a programs with a graphical interface Java can manage images in both JPEG and GIF formats As we've seen, a JLabel object can be used to display a line of text It can also be used to display an image That is, a label can be composed of text, and image, or both at the same time

12 © 2004 Pearson Addison-Wesley. All rights reserved2-12 Images The ImageIcon class is used to represent an image that is stored in a label The position of the text relative to the image can be set explicitly The alignment of the text and image within the label can be set as well See LabelDemo.java (page 149)LabelDemo.java

13 Chapter 4 Writing Classes References Java Software Solutions,” by Lewis & Loftus  Chapter 3  Chapter 4  Chapter 5  Chapter 6 Java Foundations-Introduction to Program Design & Data Structures,” by Lewis, DePasquale, and Chase  Chapter 6

14 © 2004 Pearson Addison-Wesley. All rights reserved2-14 Outline Graphical User Interfaces Buttons and Text Fields

15 © 2004 Pearson Addison-Wesley. All rights reserved2-15 Graphical User Interfaces A Graphical User Interface (GUI) in Java is created with at least three kinds of objects:  components  events  listeners We've previously discussed components, which are objects that represent screen elements  labels, buttons, text fields, menus, etc. Some components are containers that hold and organize other components  frames, panels, applets, dialog boxes

16 © 2004 Pearson Addison-Wesley. All rights reserved2-16 Events An event is an object that represents some activity to which we may want to respond For example, we may want our program to perform some action when the following occurs:  the mouse is moved  the mouse is dragged  a mouse button is clicked  a graphical button is clicked  a keyboard key is pressed  a timer expires Events often correspond to user actions, but not always

17 © 2004 Pearson Addison-Wesley. All rights reserved2-17 Events and Listeners The Java standard class library contains several classes that represent typical events Components, such as a graphical button, generate (or fire) an event when it occurs A listener object "waits" for an event to occur and responds accordingly We can design listener objects to take whatever actions are appropriate when an event occurs

18 © 2004 Pearson Addison-Wesley. All rights reserved2-18 Events and Listeners Component A component object may generate an event Listener A corresponding listener object is designed to respond to the event Event When the event occurs, the component calls the appropriate method of the listener, passing an object that describes the event

19 © 2004 Pearson Addison-Wesley. All rights reserved2-19 GUI Development Generally we use components and events that are predefined by classes in the Java class library Therefore, to create a Java program that uses a GUI we must:  instantiate and set up the necessary components  implement listener classes for any events we care about  establish the relationship between listeners and components that generate the corresponding events Let's now explore some new components and see how this all comes together

20 © 2004 Pearson Addison-Wesley. All rights reserved2-20 Outline Buttons and Text Fields

21 © 2004 Pearson Addison-Wesley. All rights reserved2-21 Buttons A push button is a component that allows the user to initiate an action by pressing a graphical button using the mouse A push button is defined by the JButton class It generates an action event The PushCounter example displays a push button that increments a counter each time it is pushed See PushCounter.java (page 186)PushCounter.java See PushCounterPanel.java (page 187)PushCounterPanel.java

22 © 2004 Pearson Addison-Wesley. All rights reserved2-22 Push Counter Example The components of the GUI are the button, a label to display the counter, a panel to organize the components, and the main frame The PushCounterPanel class is represents the panel used to display the button and label The PushCounterPanel class is derived from JPanel using inheritance The constructor of PushCounterPanel sets up the elements of the GUI and initializes the counter to zero

23 © 2004 Pearson Addison-Wesley. All rights reserved2-23 Push Counter Example The ButtonListener class is the listener for the action event generated by the button It is implemented as an inner class, which means it is defined within the body of another class That facilitates the communication between the listener and the GUI components Inner classes should only be used in situations where there is an intimate relationship between the two classes and the inner class is not needed in any other context

24 © 2004 Pearson Addison-Wesley. All rights reserved2-24 Push Counter Example Listener classes are written by implementing a listener interface The ButtonListener class implements the ActionListener interface An interface is a list of methods that the implementing class must define The only method in the ActionListener interface is the actionPerformed method The Java class library contains interfaces for many types of events

25 © 2004 Pearson Addison-Wesley. All rights reserved2-25 Push Counter Example The PushCounterPanel constructor:  instantiates the ButtonListener object  establishes the relationship between the button and the listener by the call to addActionListener When the user presses the button, the button component creates an ActionEvent object and calls the actionPerformed method of the listener The actionPerformed method increments the counter and resets the text of the label

26 © 2004 Pearson Addison-Wesley. All rights reserved2-26 Text Fields Let's look at another GUI example that uses another type of component A text field allows the user to enter one line of input If the cursor is in the text field, the text field component generates an action event when the enter key is pressed See Fahrenheit.java (page 190)Fahrenheit.java See FahrenheitPanel.java (page 191)FahrenheitPanel.java

27 © 2004 Pearson Addison-Wesley. All rights reserved2-27 Fahrenheit Example Like the PushCounter example, the GUI is set up in a separate panel class The TempListener inner class defines the listener for the action event generated by the text field The FahrenheitPanel constructor instantiates the listener and adds it to the text field When the user types a temperature and presses enter, the text field generates the action event and calls the actionPerformed method of the listener The actionPerformed method computes the conversion and updates the result label

28 Chapter 5 Conditionals and Loops References Java Software Solutions,” by Lewis & Loftus  Chapter 3  Chapter 4  Chapter 5  Chapter 6 Java Foundations-Introduction to Program Design & Data Structures,” by Lewis, DePasquale, and Chase  Chapter 6

29 © 2004 Pearson Addison-Wesley. All rights reserved2-29 Outline More Components

30 © 2004 Pearson Addison-Wesley. All rights reserved2-30 Dialog Boxes A dialog box is a window that appears on top of any currently active window It may be used to:  convey information  confirm an action  allow the user to enter data  pick a color  choose a file A dialog box usually has a specific, solitary purpose, and the user interaction with it is brief

31 © 2004 Pearson Addison-Wesley. All rights reserved2-31 Dialog Boxes The JOptionPane class provides methods that simplify the creation of some types of dialog boxes See EvenOdd.java (page 262)EvenOdd.java

32 © 2004 Pearson Addison-Wesley. All rights reserved2-32 Check Boxes A check box is a button that can be toggled on or off It is represented by the JCheckBox class Unlike a push button, which generates an action event, a check box generates an item event whenever it changes state (is checked on or off) The ItemListener interface is used to define item event listeners The check box calls the itemStateChanged method of the listener when it is toggled

33 © 2004 Pearson Addison-Wesley. All rights reserved2-33 Check Boxes Let's examine a program that uses check boxes to determine the style of a label's text string It uses the Font class, which represents a character font's:  family name (such as Times or Courier)  style (bold, italic, or both)  font size See StyleOptions.java (page 265)StyleOptions.java See StyleOptionsPanel.java (page 266)StyleOptionsPanel.java

34 © 2004 Pearson Addison-Wesley. All rights reserved2-34 Radio Buttons A group of radio buttons represents a set of mutually exclusive options – only one can be selected at any given time When a radio button from a group is selected, the button that is currently "on" in the group is automatically toggled off To define the group of radio buttons that will work together, each radio button is added to a ButtonGroup object A radio button generates an action event

35 © 2004 Pearson Addison-Wesley. All rights reserved2-35 Radio Buttons Let's look at a program that uses radio buttons to determine which line of text to display See QuoteOptions.java (page 269) QuoteOptions.java See QuoteOptionsPanel.java (page 270) QuoteOptionsPanel.java Compare and contrast check boxes and radio buttons  Check boxes work independently to provide a boolean option  Radio buttons work as a group to provide a set of mutually exclusive options

36 Chapter 6 Object-Oriented Design References Java Software Solutions,” by Lewis & Loftus  Chapter 3  Chapter 4  Chapter 5  Chapter 6 Java Foundations-Introduction to Program Design & Data Structures,” by Lewis, DePasquale, and Chase  Chapter 6

37 © 2004 Pearson Addison-Wesley. All rights reserved2-37 Outline GUI Design and Layout

38 © 2004 Pearson Addison-Wesley. All rights reserved2-38 GUI Design We must remember that the goal of software is to help the user solve the problem To that end, the GUI designer should:  Know the user  Prevent user errors  Optimize user abilities  Be consistent Let's discuss each of these in more detail

39 © 2004 Pearson Addison-Wesley. All rights reserved2-39 Know the User Knowing the user implies an understanding of:  the user's true needs  the user's common activities  the user's level of expertise in the problem domain and in computer processing We should also realize these issues may differ for different users Remember, to the user, the interface is the program

40 © 2004 Pearson Addison-Wesley. All rights reserved2-40 Prevent User Errors Whenever possible, we should design user interfaces that minimize possible user mistakes We should choose the best GUI components for each task For example, in a situation where there are only a few valid options, using a menu or radio buttons would be better than an open text field Error messages should guide the user appropriately

41 © 2004 Pearson Addison-Wesley. All rights reserved2-41 Optimize User Abilities Not all users are alike – some may be more familiar with the system than others Knowledgeable users are sometimes called power users We should provide multiple ways to accomplish a task whenever reasonable  "wizards" to walk a user through a process  short cuts for power users Help facilities should be available but not intrusive

42 © 2004 Pearson Addison-Wesley. All rights reserved2-42 Be Consistent Consistency is important – users get used to things appearing and working in certain ways Colors should be used consistently to indicate similar types of information or processing Screen layout should be consistent from one part of a system to another For example, error messages should appear in consistent locations

43 © 2004 Pearson Addison-Wesley. All rights reserved2-43 Layout Managers A layout manager is an object that determines the way that components are arranged in a container There are several predefined layout managers defined in the Java standard class library: Defined in the AWT Defined in Swing Flow Layout Border Layout Card Layout Grid Layout GridBag Layout Box Layout Overlay Layout

44 © 2004 Pearson Addison-Wesley. All rights reserved2-44 Layout Managers Every container has a default layout manager, but we can explicitly set the layout manager as well Each layout manager has its own particular rules governing how the components will be arranged Some layout managers pay attention to a component's preferred size or alignment, while others do not A layout manager attempts to adjust the layout as components are added and as containers are resized

45 © 2004 Pearson Addison-Wesley. All rights reserved2-45 Layout Managers We can use the setLayout method of a container to change its layout manager JPanel panel = new JPanel(); panel.setLayout(new BorderLayout()); The following example uses a tabbed pane, a container which permits one of several panes to be selected See LayoutDemo.java (page 340) LayoutDemo.java See IntroPanel.java (page 341) IntroPanel.java

46 © 2004 Pearson Addison-Wesley. All rights reserved2-46 Flow Layout Flow layout puts as many components as possible on a row, then moves to the next row Rows are created as needed to accommodate all of the components Components are displayed in the order they are added to the container Each row of components is centered horizontally in the window by default, but could also be aligned left or right Also, the horizontal and vertical gaps between the components can be explicitly set See FlowPanel.java (page 343) FlowPanel.java

47 © 2004 Pearson Addison-Wesley. All rights reserved2-47 Border Layout A border layout defines five areas into which components can be added North South CenterEastWest

48 © 2004 Pearson Addison-Wesley. All rights reserved2-48 Border Layout Each area displays one component (which could be a container such as a JPanel ) Each of the four outer areas enlarges as needed to accommodate the component added to it If nothing is added to the outer areas, they take up no space and other areas expand to fill the void The center area expands to fill space as needed See BorderPanel.java (page 346) BorderPanel.java

49 © 2004 Pearson Addison-Wesley. All rights reserved2-49 Grid Layout A grid layout presents a container’s components in a rectangular grid of rows and columns One component is placed in each cell of the grid, and all cells have the same size As components are added to the container, they fill the grid from left-to-right and top-to-bottom (by default) The size of each cell is determined by the overall size of the container See GridPanel.java (page 349) GridPanel.java

50 © 2004 Pearson Addison-Wesley. All rights reserved2-50 Box Layout A box layout organizes components horizontally (in one row) or vertically (in one column) Components are placed top-to-bottom or left-to- right in the order in which they are added to the container By combining multiple containers using box layout, many different configurations can be created Multiple containers with box layouts are often preferred to one container that uses the more complicated gridbag layout manager

51 © 2004 Pearson Addison-Wesley. All rights reserved2-51 Box Layout Invisible components can be added to a box layout container to take up space between components  Rigid areas have a fixed size  Glue specifies where excess space should go A rigid area is created using the createRigidArea method of the Box class Glue is created using the createHorizontalGlue or createVerticalGlue methods See BoxPanel.java (page 352) BoxPanel.java

52 © 2004 Pearson Addison-Wesley. All rights reserved2-52 Borders A border can be put around any Swing component to define how the edges of the component should be drawn Borders can be used effectively to group components visually The BorderFactory class contains several static methods for creating border objects A border is applied to a component using the setBorder method

53 © 2004 Pearson Addison-Wesley. All rights reserved2-53 Borders An empty border  buffers the space around the edge of a component  otherwise has no visual effect A line border  surrounds the component with a simple line  the line's color and thickness can be specified An etched border  creates the effect of an etched groove around a component  uses colors for the highlight and shadow

54 © 2004 Pearson Addison-Wesley. All rights reserved2-54 Borders A bevel border  can be raised or lowered  uses colors for the outer and inner highlights and shadows A titled border  places a title on or around the border  the title can be oriented in many ways A matte border  specifies the sizes of the top, left, bottom, and right edges of the border separately  uses either a solid color or an image

55 © 2004 Pearson Addison-Wesley. All rights reserved2-55 Borders A compound border  is a combination of two borders  one or both of the borders can be a compound border See BorderDemo.java (page 355) BorderDemo.java

56 © 2004 Pearson Addison-Wesley. All rights reserved2-56 Borders

Download ppt "ITEC220 GUI Lecture – Part 1 References  Java Software Solutions,” by Lewis & Loftus  Chapter 3  Chapter 4  Chapter 5  Chapter 6  Java Foundations-Introduction."

Similar presentations

Introduction to Java 2 Programming

Introduction to Java 2 Programming
OLD BUSINESS : Lets talk about the next exam Project proposals – Functional Definitions Go over homework – NEW BUSINESS: Chapter 4 today GUIs Assignment.

OLD BUSINESS : Lets talk about the next exam Project proposals – Functional Definitions Go over homework – NEW BUSINESS: Chapter 4 today GUIs Assignment.
Unit 121 A layout manager is an object that determines the manner in which components are arranged in a container. Each layout manager implements one of.

Unit 121 A layout manager is an object that determines the manner in which components are arranged in a container. Each layout manager implements one of.
1 Graphical User Interfaces AWT and Swing packages Frames and Panels Components Nested Panels Images Reading for this Lecture: L&L, 3.9 – 3.11.

1 Graphical User Interfaces AWT and Swing packages Frames and Panels Components Nested Panels Images Reading for this Lecture: L&L, 3.9 – 3.11.
Graphic User Interfaces Layout Managers Event Handling.

Graphic User Interfaces Layout Managers Event Handling.
Copyright © 2009 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 2-1 Outline Graphics Applets Drawing Shapes Components and Containers Images.

Copyright © 2009 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 2-1 Outline Graphics Applets Drawing Shapes Components and Containers Images.
ITEC220 GUI Lecture – Part 2 References  Java Software Solutions,” by Lewis & Loftus  Chapter 7  Chapter 8  Chapter 9  Java Foundations-Introduction.

ITEC220 GUI Lecture – Part 2 References  Java Software Solutions,” by Lewis & Loftus  Chapter 7  Chapter 8  Chapter 9  Java Foundations-Introduction.
Chapter 9: Graphical User Interfaces Copyright 2002, Matthew Evett. These slides are based on slides copyrighted by John Lewis and William Loftus, 2002,

Chapter 9: Graphical User Interfaces Copyright 2002, Matthew Evett. These slides are based on slides copyrighted by John Lewis and William Loftus, 2002,
Chapter 5: Keyboard I/O & Simple GUI’s Copyright 2002, Matthew Evett. These slides are based on slides copyrighted by John Lewis and William Loftus, 2002,

Chapter 5: Keyboard I/O & Simple GUI’s Copyright 2002, Matthew Evett. These slides are based on slides copyrighted by John Lewis and William Loftus, 2002,
Chapter Day 17. © 2007 Pearson Addison-Wesley. All rights reserved6-2 Agenda Day 17 Problem set 3 posted  10 problems from chapters 5 & 6  Due in 3.

Chapter Day 17. © 2007 Pearson Addison-Wesley. All rights reserved6-2 Agenda Day 17 Problem set 3 posted  10 problems from chapters 5 & 6  Due in 3.
Chapter Day 6. © 2007 Pearson Addison-Wesley. All rights reserved2-2 Agenda Day 5 Questions from last Class?? Problem set 1 DUE Problem set 2 posted 

Chapter Day 6. © 2007 Pearson Addison-Wesley. All rights reserved2-2 Agenda Day 5 Questions from last Class?? Problem set 1 DUE Problem set 2 posted 
Chapter Day 10. © 2007 Pearson Addison-Wesley. All rights reserved4-2 Agenda Day 10 Questions from last Class?? Problem set 2 posted  10 programs from.

Chapter Day 10. © 2007 Pearson Addison-Wesley. All rights reserved4-2 Agenda Day 10 Questions from last Class?? Problem set 2 posted  10 programs from.
Chapter Day 14. © 2007 Pearson Addison-Wesley. All rights reserved5-2 Agenda Day 14 Problem set 3 posted  10 problems from chapters 5 & 6  Due in 11.

Chapter Day 14. © 2007 Pearson Addison-Wesley. All rights reserved5-2 Agenda Day 14 Problem set 3 posted  10 problems from chapters 5 & 6  Due in 11.
CS102--Object Oriented Programming Lecture 19: – The Swing Package (II) Copyright © 2008 Xiaoyan Li.

CS102--Object Oriented Programming Lecture 19: – The Swing Package (II) Copyright © 2008 Xiaoyan Li.
Chapter 4 Writing Classes 5 TH EDITION Lewis & Loftus java Software Solutions Foundations of Program Design © 2007 Pearson Addison-Wesley. All rights reserved.

Chapter 4 Writing Classes 5 TH EDITION Lewis & Loftus java Software Solutions Foundations of Program Design © 2007 Pearson Addison-Wesley. All rights reserved.
1 GUI Elements in Java Nelson Padua-Perez Chau-Wen Tseng Department of Computer Science University of Maryland, College Park.

1 GUI Elements in Java Nelson Padua-Perez Chau-Wen Tseng Department of Computer Science University of Maryland, College Park.
Chapter 13: Advanced GUIs and Graphics J ava P rogramming: From Problem Analysis to Program Design, From Problem Analysis to Program Design, Second Edition.

Chapter 13: Advanced GUIs and Graphics J ava P rogramming: From Problem Analysis to Program Design, From Problem Analysis to Program Design, Second Edition.
Scott Grissom, copyright 2006Ch 11: GUI Slide 1 Graphical User Interfaces (Ch 11) Careful design of a graphical user interface is key to a viable software.

Scott Grissom, copyright 2006Ch 11: GUI Slide 1 Graphical User Interfaces (Ch 11) Careful design of a graphical user interface is key to a viable software.
ELC 312 Day 6. © 2004 Pearson Addison-Wesley. All rights reserved4-2 Agenda Questions? Problem set two Posted in WebCT  Due Sept 30  On Page 153&154.

ELC 312 Day 6. © 2004 Pearson Addison-Wesley. All rights reserved4-2 Agenda Questions? Problem set two Posted in WebCT  Due Sept 30  On Page 153&154.
Chapter Day 9. © 2007 Pearson Addison-Wesley. All rights reserved4-2 Agenda Day 8 Questions from last Class?? Problem set 2 posted  10 programs from.

Chapter Day 9. © 2007 Pearson Addison-Wesley. All rights reserved4-2 Agenda Day 8 Questions from last Class?? Problem set 2 posted  10 programs from.

Similar presentations

Ads by Google