AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE GUI Components ikt403 – Object-Oriented Software Development.

Slides:



Advertisements
Similar presentations
Graphical User Interfaces (Part IV)
Advertisements

CS18000: Problem Solving and Object-Oriented Programming.
Graphic User Interfaces Layout Managers Event Handling.
CMSC 341 Building Java GUIs. 09/26/2007 CMSC 341 GUI 2 Why Java GUI Development? Course is about Data Structures, not GUIs. We are giving you the opportunity.
Dale Roberts GUI Programming using Java - Mouse Events Dale Roberts, Lecturer Computer Science, IUPUI Department of Computer.
Fall 2007CS 225 Graphical User Interfaces Event Handling Appendix C.
Event Handling Events and Listeners Timers and Animation.
1 L48 Advanced GUI Component (3). 2 OBJECTIVES  To use additional layout managers.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. 4 th Ed Chapter Chapter 14 GUI and Event-Driven Programming.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. 4 th Ed Chapter Chapter 14 GUI and Event-Driven Programming.
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.
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 L46 Advanced GUI Component (1). 2 OBJECTIVES  To create and manipulate sliders, and menus,
Graphical User Interface Components: Part 1
More on Creating GUIs in Java using Swing David Meredith Aalborg University.
Java Programming Chapter 10 Graphical User Interfaces.
Chapter 13 Advanced GUIs and Graphics. Chapter Objectives Learn about applets Explore the class Graphics Learn about the class Font Explore the class.
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.
Java GUIs and Graphics CNS Outline  Introduction  Events  Components  Layout managers  Drawing  Introduction  Events  Components  Layout.
Java Programming: Advanced Topics 1 Common Elements of Graphical User Interfaces Chapter 6.
Graphical User Interface Components Chapter What You Will Learn Text Areas Text Areas Sliders Sliders Menus Menus –With frames –Pop up menus Look.
Session 11 Border Layout, using Panels, Introduction to PinBallGame.
Dale Roberts GUI Programming using Java - Event Handling Dale Roberts, Lecturer Computer Science, IUPUI Department of Computer.
Graphical User Interface Components: Part 1 Chapter 11.
 2002 Prentice Hall, Inc. All rights reserved Introduction Graphical User Interface (GUI) –Gives program distinctive “look” and “feel” –Provides.
– Advanced Programming P ROGRAMMING IN Lecture 21 Introduction to Swing.
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.
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
Graphics and Event-Driven Programming in Java John C. Ramirez Department of Computer Science University of Pittsburgh.
Layout Managers Arranges and lays out the GUI components on a container.
Chapter 15: Advanced GUI Topics. Objectives Use content panes Use color Learn more about layout managers Use JPanel s to increase layout options Create.
Omer Boyaci.  GUIs are event driven.  When the user interacts with a GUI component, the interaction—known as an event—drives the program to perform.
Computer Science [3] Java Programming II - Laboratory Course Lab 4: Common GUI Event Types and Listener Interfaces Layout Mangers Faculty of Engineering.
Object-Oriented Software Engineering
Lec.10 (Chapter 8 & 9) GUI Jiang (Jen) ZHENG June 27 th, 2005.
Interactive Programs Java API. Terminology Event—an action or occurrence, not part of a program, detected by the program. Events can be Event—an action.
Object Oriented Programming.  Interface  Event Handling.
Agenda Introduction. Event Model. Creating GUI Application. Event Examples.
Introduction to Java Chapter 9 - Graphical User Interfaces and Applets1 Chapter 9 Graphical User Interfaces and Applets.
CPSC 233 Tutorial Xin Apr 6, Reading files An example available on my website pages.cpsc.ucalgary.ca/~liuxin.
Graphical User Interface Components: Part 1 Chapter 11.
Creating User Interfaces Event-Driven Programming.
Creating a Window. A basic window in Java is represented by an object of the class Window in the package java.awt.
Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 1 McGraw-Hill/Irwin Chapter 3 Designing the Interface with Layout Managers.
Computer Science [3] Java Programming II - Laboratory Course Lab 4 -1 : Introduction to Graphical user interface GUI Components Faculty of Engineering.
 Many event-listener interfaces contain multiple methods.  An adapter class implements an interface and provides a default implementation (with an empty.
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.
 Figure illustrates a hierarchy containing many event classes from the package java.awt.event.  Used with both AWT and Swing components.  Additional.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Chapter 7-3 ( Book Chapter 14) GUI and Event-Driven Programming.
Chapter 10 - Writing Graphical User Interfaces1 Chapter 10 Writing Graphical User Interfaces.
1 Lecture 8: User Interface Components with Swing.
Jozef Goetz Credits: Copyright  Pearson Education, Inc. All rights reserved. expanded by J. Goetz, 2016.
Introduction to GUI in 1 Graphical User Interface 3 Nouf Almunyif.
CIS 270—Application Development II Chapter 11—GUI Components: Part I.
© Copyright by Pearson Education, Inc. All Rights Reserved. Appendix I GUI Components and Event Handling Android How to Program, 3/e.
GUI Programming using Java - Event Handling
11 GUI Components: Part 1.
Christopher Budo, Davis Nygren, spencer franks, Luke miller
11 GUI Components: Part 1.
Appendix I GUI Components and Event Handling
Advanced User Interfaces
Graphical User Interface (GUI) Components: Part 1 Java How to Program, 9 th Edition Chapter 14.
Chap 7. Building Java Graphical User Interfaces
Chapter 13: Advanced GUIs and Graphics
GUI Programming using Java - Mouse Events
Chapter 7-3 (Book Chapter 14)
Advanced GUIs and Graphics
Presentation transcript:

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE GUI Components ikt403 – Object-Oriented Software Development

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Introduction to Event Handling GUIs are event-driven –A user interaction creates an event Common events are clicking a button, typing in a text field, selecting an item from a menu, closing a window and moving the mouse –The event causes a call to a method called an event handler

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Text Fields and an Introduction to Event Handling with Nested Classes Class JTextComponent –Superclass of JTextField Superclass of JPasswordField –Adds echo character to hide text input in component –Allows user to enter text in the component when component has the application’s focus

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create a new JTextField

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create a new JTextField Create a new uneditable JTextField Create a new JPasswordField Create event handlerRegister event handler Create event handler class by implementing the ActionListener interface Declare actionPerformed method

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Steps Required to Set Up Event Handling for a GUI Component Several coding steps are required for an application to respond to events –Create a class for the event handler –Implement an appropriate event-listener interface –Register the event handler

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Common GUI Event Types and Listener Interfaces Event types –All are subclasses of AWTEvent –Some declared in package java.awt.event –Those specific to Swing components declared in javax.swing.event

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Common GUI Event Types and Listener Interfaces Delegation event model –Event source is the component with which user interacts –Event object is created and contains information about the event that happened –Event listener is notified when an event happens

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Some event classes of package java.awt.event

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Some common event-listener interfaces of package java.awt.event.

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE How Event Handling Works Remaining questions –How did the event handler get registered? –How does the GUI component know to call actionPerformed rather than some other event-handling method?

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Registering Events Every JComponent has instance variable listenerList –Object of type EventListenerList –Maintains references to all its registered listeners

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Event registration for JTextField textField1

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Event-Handler Invocation Events are dispatched to only the event listeners that match the event type –Events have a unique event ID specifying the event type MouseEvent s are handled by MouseListener s and MouseMotionsListener s KeyEvent s are handled by KeyListener s

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Mouse Event Handling Mouse events –Create a MouseEvent object –Handled by MouseListener s and MouseMotionListener s –MouseInputListener combines the two interfaces –Interface MouseWheelListener declares method mouseWheelMoved to handle MouseWheelEvent s

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE MouseListener and MouseMotionListener interface methods.

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE MouseListener and MouseMotionListener interface methods.

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Look-and-Feel Observation Method calls to mouseDragged and mouseReleased are sent to the MouseMotionListener for the Component on which a mouse drag operation started. Similarly, the mouseReleased method call at the end of a drag operation is sent to the MouseListener for the Component on which the drag operation started.

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create JPanel to capture mouse events Set background to whiteCreate JLabel and add to application

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create event handler for mouse events Register event handler Implement mouse listener interfaces Find location of mouse click Declare mouseClicked methodDeclare mousePressed methodDeclare mouseReleased method

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Declare mouseEntered methodSet background of JPanel Declare mouseExited methodSet background of JPanel

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Declare mouseDragged methodDeclare mouseMoved method

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Adapter Classes Adapter class –Implements event listener interface –Provides default implementation for all event-handling methods

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Software Engineering Observation When a class implements an interface, the class has an “is a” relationship with that interface. All direct and indirect subclasses of that class inherit this interface. Thus, an object of a class that extends an event-adapter class is an object of the corresponding event-listener type (e.g., an object of a subclass of MouseAdapter is a MouseListener ).

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Extending MouseAdapter MouseAdapter –Adapter class for MouseListener and MouseMotionListener interfaces –Extending class allows you to override only the methods you wish to use

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Common Programming Error If you extend an adapter class and misspell the name of the method you are overriding, your method simply becomes another method in the class. This is a logic error that is difficult to detect, since the program will call the empty version of the method inherited from the adapter class.

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Event-adapter classes and the interfaces they implement in package java.awt.event.

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Register event handler

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Get number of times mouse button was clicked Test for right mouse buttonTest for middle mouse button

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Key-Event Handling KeyListener interface –For handling KeyEvent s –Declares methods keyPressed, keyReleased and keyTyped

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Implement KeyListener interface Set background colorRegister application as event handler for itself

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Declare keyPressed method Get code of pressed key Declare keyReleased method Get code of released keyDeclare keyTyped method Output character typed

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Test if it was an action key Determine any modifiers pressed

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Layout Managers Layout managers –Provided to arrange GUI components in a container –Provide basic layout capabilities –Implement the interface LayoutManager

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE FlowLayout –Simplest layout manager –Components are placed left to right in order they are added –Components can be left aligned, centered or right aligned

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Layout managers.

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create FlowLayout Set layout of application

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Add JButton ; FlowLayout will handle placement Set alignment to left Adjust layout Add JButton ; FlowLayout will handle placement Set alignment to center

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Adjust layout Add JButton ; FlowLayout will handle placement Set alignment to right Adjust layout

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE BorderLayout –Arranges components into five regions – north, south, east, west and center –Implements interface LayoutManager2 –Provides horizontal gap spacing and vertical gap spacing

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Look-and-Feel Observation Each container can have only one layout manager. Separate containers in the same application can use different layout managers.

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Look-and-Feel Observation If no region is specified when adding a Component to a BorderLayout, the layout manager assumes that the Component should be added to region BorderLayout.CENTER.

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Common Programming Error When more than one component is added to a region in a BorderLayout, only the last component added to that region will be displayed. There is no error that indicates this problem.

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Declare BorderLayout instance variable Create BorderLayout Set layoutRegister event handler

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Add buttons to application using layout manager constants Make button invisibleMake button visible Update layout

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline horizontal gapvertical gap

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE GridLayout –Divides container into a grid –Every component has the same width and height

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Declare two GridLayout instance variables Create GridLayout Set layout

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Add button to JFrame Use second layoutUse first layout Update layout

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE GridBagLayout GridBagLayout Layout Manager –Similar to GridLayout in that it arranges components in a grid, but more flexible The components can vary in size and can be added in any order –Determining the appearance of the GUI Draw the GUI on paper Draw a grid over it, dividing the components into rows and columns –The initial row and column numbers should be 0 –Used by the GridBagLayout layout manager to properly place the components in the grid

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE GridBagLayout (Cont.) GridBagConstraints object –Describes how a component is placed in a GridBagLayout –anchor specifies the relative position of the component in an area that it does not fill Constants: NORTH, NORTHEAST, EAST, SOUTHEAST, SOUTH, SOUTHWEST, WEST, NORTHWEST and CENTER (the default) –fill defines how the component grows if the area in which it can be displayed is larger than the component Constants: NONE (the default), VERTICAL, HORIZONTAL and BOTH

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE GridBagLayout (Cont.) –gridx and gridy specify where the upper-left corner of the component is placed in the grid –gridwidth and gridheight specify the number of columns and rows a component occupies –weightx and weighty specify how to distribute extra horizontal and vertical space to grid slots in a GridBagLayout when the container is resized A zero value indicates that the grid slot does not grow in that dimension on its own –However, if the component spans a column/row containing a component with nonzero weight value, it will grow in the same proportion as the other components in that column/row Use positive nonzero weight values to prevent “huddling”

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Designing a GUI that will use GridBagLayout. Column Row

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE GridBagConstraints fields.

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create a GridBagLayout object Create a GridBagConstraints object

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Cause the JTextArea to always fill its entire allocated area Call utility method addComponent with the JTextArea object, row, column and numbers of columns and rows to span as arguments When the window is resized, button2 will grow

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline button3 will still grow because of the weight values of button2 Set constraints and add component

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Using Menus with Frames Menus –Allow the user to perform actions without unnecessarily cluttering a GUI with extra components –Can be attached only to objects of the classes that provide member setMenuBar, such as JFrame and JApplet –Class MenuBar Contains the methods necessary to manage a menu bar –Class JMenu Contains the methods necessary for managing menus –Class JMenuItem Contains the methods necessary to manage menu items –Can be used to initiate an action or can be a submenu

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Using Menus with Frames (Cont.) –Class JCheckBoxMenuItem Contains the methods necessary to manage menu items that can be toggled on or off –Class JRadioButtonMenuItem Contains the methods necessary to manage menu items that can be toggled on or off like JCheckBoxMenuItem s When multiple JRadioButtonMenuItem s are maintained as part of a ButtonGroup, only one item in the group can be selected at a given time –Mnemonics Special characters that can provide quick access to a menu or menu item from the keyboard

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create a JMenu Call JMenu method setMnemonic Add the “ About… ” JMenuItem to fileMenu

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create an ActionListener to process aboutItem ’s action event Display a message dialog box Create and add menu item exitItem Register an ActionListener that terminates the application

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Add fileMenu to a JMenuBar and attach the JMenuBar to the application window Create menu formatMenu Create submenu colorMenu Create JRadioButtonMenuItem array colorItems Create a ButtonGroup to ensure that only one of the menu items is selected at a time Add JRadioButtonMenuItem s to colorMenu and register ActionListener s

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Invoke AbstractButton method setSelected Add colorMenu to formatMenu and add a horizontal separator line Create JRadioButtonMenuItem array fonts Create a ButtonGroup to ensure that only one of the menu items is selected at a time Add JRadioButtonMenuItem s to colorMenu and register ActionListener s Set default selection and add horizontal separator

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create JCheckBoxMenuItem s Add fontMenu to formatMenu and formatMenu to the JMenuBar

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Determine the selected JRadioButtonMenuItem getSource method returns a reference to the JRadioButtonMenuItem that generated the event

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Called if the user selects a JCheckBoxMenuItem in the fontMenu Determine whether either or both of the JCheckBoxMenuItem s are selected

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Menu Mnemonic characters Menu bar

AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Menu items Expanded submenu Separator line