Graphical User Interfaces -- Introduction

Slides:



Advertisements
Similar presentations
Introduction to Java 2 Programming
Advertisements

Java GUI building with the AWT. AWT (Abstract Window Toolkit) Present in all Java implementations Described in (almost) every Java textbook Adequate for.
Graphic User Interfaces Layout Managers Event Handling.
Event Driven Programming and GUIs Part 3 CS221 – 4/15/09.
Lecture 15 Graphical User Interfaces (GUI’s). Objectives Provide a general set of concepts for GUI’s Layout manager GUI components GUI Design Guidelines.
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.
1 GUI Elements in Java Nelson Padua-Perez Chau-Wen Tseng Department of Computer Science University of Maryland, College Park.
GUI Layout Managers Arkadiusz Edward Komenda. Outline Components and Containers Layout Managers Flow Layout Grid Layout Border Layout Nested 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.
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.
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.
Java Programming Chapter 10 Graphical User Interfaces.
20-753: Fundamentals of Web Programming Copyright © 1999, Carnegie Mellon. All Rights Reserved. 1 Lecture 16: Java Applets & AWT Fundamentals of Web Programming.
Chapter 13 Advanced GUIs and Graphics. Chapter Objectives Learn about applets Explore the class Graphics Learn about the class Font Explore the class.
Department of Mechanical Engineering, LSUSession VII MATLAB Tutorials Session VIII Graphical User Interface using MATLAB Rajeev Madazhy
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.
Introduction to GUI in Java 1. Graphical User Interface Java is equipped with many powerful,easy to use GUI component such as input and output dialog.
Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 1 Graphical User Interfaces --
Java Software Solutions Lewis and Loftus Chapter 7 1 Copyright 1997 by John Lewis and William Loftus. All rights reserved. Graphics -- Introduction The.
Java Programming: Advanced Topics 1 Common Elements of Graphical User Interfaces Chapter 6.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. Chapter 12 - Graphical User Interface Concepts: Part.
Ch 3-4: GUI Basics Java Software Solutions Foundations of Program Design Sixth Edition by Lewis & Loftus Coming up: GUI Components.
 2002 Prentice Hall, Inc. All rights reserved Introduction Graphical User Interface (GUI) –Gives program distinctive “look” and “feel” –Provides.
1 Outline 1 Introduction 2 Overview of Swing Components 3 JLabel 4 Event Handling 5 TextFields 6 How Event Handling Works 7 JButton 8 JCheckBox and JRadioButton.
Graphics and Event-Driven Programming in Java John C. Ramirez Department of Computer Science University of Pittsburgh.
Creating Graphical User Interfaces (GUI’s) with MATLAB By Jeffrey A. Webb OSU Gateway Coalition Member.
Timer class and inner classes. Processing timer events Timer is part of javax.swing helps manage activity over time Use it to set up a timer to generate.
Java Applets: GUI Components, Events, Etc. Ralph Westfall June, 2010.
GUI Programming using NetBeans. RHS – SOC 2 GUI construction We have previously talked about elements in a (simple) GUI –Frames, Panes and Dialogs –Text.
Computer Science [3] Java Programming II - Laboratory Course Lab 4: Common GUI Event Types and Listener Interfaces Layout Mangers Faculty of Engineering.
Copyright © 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Starting Out with Programming Logic & Design Second Edition by Tony Gaddis.
Object Oriented Programming.  Interface  Event Handling.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Chapter 6 – Graphical User Interfaces Java Foundations: Introduction to Programming.
Introduction to Java Chapter 9 - Graphical User Interfaces and Applets1 Chapter 9 Graphical User Interfaces and Applets.
Csc Basic Graphical User Interface (GUI) Components.
Java Programming, Second Edition Chapter Thirteen Understanding Swing Components.
Computer Science [3] Java Programming II - Laboratory Course Lab 4 -1 : Introduction to Graphical user interface GUI Components Faculty of Engineering.
JAVA: An Introduction to Problem Solving & Programming, 6 th Ed. By Walter Savitch ISBN © 2012 Pearson Education, Inc., Upper Saddle River,
Chapter 10 - Writing Graphical User Interfaces1 Chapter 10 Writing Graphical User Interfaces.
MATLAB and SimulinkLecture 61 To days Outline Graphical User Interface (GUI) Exercise on this days topics.
1 Graphical User Interfaces Introduction zUsers have become accustomed to using a graphical user interface (GUI) through which they interact with a program.
AWT Vs SWING. 2 AWT (Abstract Window Toolkit) Present in all Java implementations Described in most Java textbooks Adequate for many applications Uses.
CSC 205 Programming II Lecture 5 AWT - I.
Java FX: Scene Builder.
Chapter 9: Graphical User Interfaces
Christopher Budo, Davis Nygren, spencer franks, Luke miller
Chapter Topics 15.1 Graphical User Interfaces
Graphical User Interface Concepts: Part I
Ellen Walker Hiram College
Chap 7. Building Java Graphical User Interfaces
Chapter 13: Advanced GUIs and Graphics
Timer class and inner classes
Creating Graphical User Interfaces
Introduction to Computing Using Java
AWT Components and Containers
Event loops.
Event loops 17-Jan-19.
Event loops 17-Jan-19.
Chapter 15: GUI Applications & Event-Driven Programming
Event loops 8-Apr-19.
GUI building with the AWT
Event loops.
Advanced GUIs and Graphics
Event loops 19-Aug-19.
Graphical User Interface
TA: Nouf Al-Harbi NoufNaief.net :::
TA: Nouf Al-Harbi NoufNaief.net :::
Presentation transcript:

Graphical User Interfaces -- Introduction Users have become accustomed to using a graphical user interface (GUI) through which they interact with a program Java provides strong support for building GUIs through the java.awt package This chapter focuses on: GUI components event-driven programming containers and component hierarchies layout managers

GUI Elements The key elements of a Java graphical user interface are: GUI components layout managers event processing GUI components, such as text fields and buttons, are the screen elements that a user manipulates with the mouse and keyboard Layout managers govern how the components appear on the screen Events signal important user actions, like a mouse click

Event-Driven Programming Programs with GUIs must respond to events, generated by GUI components, that indicate that specific actions have occurred A special category of classes, called listeners, wait for events to occur Therefore, a GUI program is composed of: the code that presents the GUI to the user the listeners that wait for events to occur the specific code that is executed when events occur

Event-Driven Programming There is a listener interface defined for each event type Each listener interface contains the abstract methods required to respond to specific events A listener class implements a particular listener interface Listeners are "added" to a particular GUI component When a component generates an event, the method corresponding to that event is executed in the listener See CardTest.java

The GUI Program Model Listeners Program- GUI specific Handle events Add listeners GUI Program- specific Event effects

Event Interfaces Multiple listeners can be added to a component Multiple components can be processed by the same listener Furthermore, one listener class can implement multiple listener interfaces Therefore one class can listen for many types of events See TwoListen.java

Containers A container is a special category of GUI components that group other components All containers are components, but not all components are containers An applet is a container Therefore, buttons, text fields, and other components can be added to an applet to be displayed Each container has an associated layout manager to control the way components in it are displayed

Containers Some containers must be attached to another graphical surface: panel applet Other containers can be moved independently: window frame dialog See MyFrame.java, FrameWithPanel.java, ExGui.java

Containers Component Container Window Panel Dialog Frame Applet

Component Hierarchies A GUI is created when containers and other components are put together The relationships between these components form a component hierarchy For example, an applet can contain panels which contain other panels which contain buttons, etc. See Rings_Display.java Careful design of the component hierarchy is important for visually pleasing and consistent GUIs

GUI Components There are several GUI components that permit specific kinds of user interaction: labels text fields text areas lists buttons scrollbars

Labels A label defines a line of text displayed on a GUI Labels are static in the sense that they cannot be selected or modified by the human user once added to a container A label is instantiated from the Label class The Label class contains several constructors and methods for setting up and modifying a label's content and alignment See SampleLable.java

Text Fields and Text Areas A text field displays a single line of text in a GUI It can be made editable, and provide a means to get input from the user A text area is similar, but displays multiple lines of text They are defined by the TextField and TextArea classes A text area automatically has scrollbars on its bottom and right sides See SampleTextField.java, SampleTextArea.java

Lists A list, in the Java GUI sense, is used to display a list selectable strings A list component can contain any number of strings and can be instantiated to allow multiple selections within it The size of the list is specified by the number of visible rows or strings within it A scrollbar will automatically appear on the right side of a list if the number of items exceed the visible area See SampleList.java

Buttons The java.awt package supports four distinct types of buttons: Push buttons Choice Buttons Checkbox buttons Radio buttons Each button type serves a particular purpose See SampleButton.java

Choice button A choice button is a single button which displays a list of choices when pushed The user can then scroll through and choose the appropriate option The current choice is displayed next to the choice button It is defined by the Choice class See SampleChoice.java

Checkbox button A checkbox button can be toggled on or off A set of checkbox buttons are often used to define a set of options as a group, though one can be used by itself If used in a group, more than one option can be chosen at any one time Defined by the Checkbox class See SampleCheckBox.java

Radio buttons A radio button, like a checkbox button, is toggled on or off Radio buttons must be grouped into a set, and only one button can be selected at any one time When one button of a group is selected, the currently selected button in that group is automatically reset They are used to select among a set of mutually exclusive options See SampleRadioButtons.java

Scrollbars A scrollbar is a slider that indicates a relative position or quantity They are automatic on text areas and list components, but can be used independently The position of the slider in the range corresponds to a particular numeric value in a range associated with the scrollbar A scrollbar is defined by the Scrollbar class See Zoom.java

Layout Managers There are five predefined layout managers in the java.awt package: flow layout border layout card layout grid layout Each container has a particular layout manager associated with it by default A programmer can also create custom layout managers

Flow Layout Components are placed in a row from left to right in the order in which they are added A new row is started when no more components can fit in the current row The components are centered in each row by default The programmer can specify the size of both the vertical and horizontal gaps between the components Flow layout is the default layout for panels and applets See Flow.java

Grid Layout Components are placed in a grid with a user-specified number of columns and rows Each component occupies exactly one grid cell Grid cells are filled left to right and top to bottom All cells in the grid are the same size See Grid.java

Border Layout Defines five locations each of which a component or components can be added North, South, East, West, and Center The programmer specifies the area in which a component should appear The relative dimensions of the areas are governed by the size of the components added to them See Border.java

Border Layout North West Center East South

Card Layout Components governed by a card layout are "stacked" such that only one component is displayed on the screen at any one time Components are ordered according to the order in which they were added to the container Methods control which component is currently visible in the container See Card.java

GUI Design Careful design of a graphical user interface is key to a viable software system To the user, the user interface is the system For each situation, consider which components are best suited and how they should best be arranged See Quotes.java