Chapter 6Chapter 6

Graphical User Interface (GUI) and Graphical User Interface (GUI) and Object-Oriented Design (OOD)Object-Oriented Design (OOD)

Chapter ObjectivesChapter Objectives

Learn about classes used to build simple GUIsLearn about classes used to build simple GUIs Learn to use GUI components Frame, Label, Textile, Learn to use GUI components Frame, Label, Textile,

and JButtonand JButton Become familiar with the concept of event-driven Become familiar with the concept of event-driven

programming,programming, events and event handlers events and event handlers Explore object-oriented design using GUI as an one Explore object-oriented design using GUI as an one

exampleexample Learn how to identify objects, classes, and members Learn how to identify objects, classes, and members

of a classof a class

Graphical User Interface (GUI) Graphical User Interface (GUI) ComponentsComponents

We have already met JOptionPane from the swing We have already met JOptionPane from the swing library. It allowed us to use single variable text input library. It allowed us to use single variable text input boxes and information boxesboxes and information boxes

Now we will look at the basic components used to Now we will look at the basic components used to build User interfaces which allow us to:build User interfaces which allow us to: view inputs and outputs simultaneously in a single windowview inputs and outputs simultaneously in a single window To Input values of inputs in any orderTo Input values of inputs in any order To change input values in window To change input values in window To click on buttons to initiate an action to produce an To click on buttons to initiate an action to produce an

outputoutput

Java GUI ComponentsJava GUI Components

Graphical User Interface (GUI) Graphical User Interface (GUI) ComponentsComponents

GUI componentsGUI components WindowsWindows LabelsLabels Text areasText areas ButtonsButtons

A Window has a title, a content pane, additional GUI A Window has a title, a content pane, additional GUI components can be placed on the content pane components can be placed on the content pane

Labels indicate what the contents of a text box is, Labels indicate what the contents of a text box is, what the purpose of a button is, etc.what the purpose of a button is, etc.

A text area can be used to display and/or input dataA text area can be used to display and/or input data Pushing a button is associated with an action or eventPushing a button is associated with an action or event

GUI CreationGUI Creation First create a Window with a label indicating First create a Window with a label indicating

the purpose of the GUI. You can specify the the purpose of the GUI. You can specify the size of the window in pixels.size of the window in pixels.

Access the content pane of the window and Access the content pane of the window and choose the layout of the components choose the layout of the components

Add the desired GUI components (labels and Add the desired GUI components (labels and text areas)text areas)

Add any buttons and handle the events Add any buttons and handle the events associated with those buttonsassociated with those buttons

Creating a WindowCreating a Window

Create a Window by declaring an instance of a Create a Window by declaring an instance of a JFrame object, by using a constructor.JFrame object, by using a constructor.

The class JFrame provides various methods to The class JFrame provides various methods to control attributes of a windowcontrol attributes of a window

Attributes associated with window objectsAttributes associated with window objects TitleTitle Width (measured in pixels)Width (measured in pixels) Height (measured in pixels)Height (measured in pixels)

Methods Provided by the class Methods Provided by the class FrameFrame

Methods Provided by the class Methods Provided by the class FrameFrame

Two Ways to Create a WindowTwo Ways to Create a Window

First way First way Declare object of type JFrameDeclare object of type JFrame Instantiate objectInstantiate object Use various methods to manipulate windowUse various methods to manipulate window

Second waySecond way Create subclass of JFrame containing application Create subclass of JFrame containing application

program by extending definition of class JFrame. program by extending definition of class JFrame. JFrame is a superclass of the new subclassJFrame is a superclass of the new subclass

Utilizes mechanism of inheritanceUtilizes mechanism of inheritance

Content PaneContent Pane

Inner area of GUI window (below title bar, Inner area of GUI window (below title bar, inside border)inside border)

To access content pane:To access content pane: Declare reference variable of type ContainerDeclare reference variable of type Container Use method getContentPane of class JFrameUse method getContentPane of class JFrame

Methods Provided by the class Methods Provided by the class ContainerContainer

class JLabelclass JLabel Class to create and modify JLabel objects (labels)Class to create and modify JLabel objects (labels)

A label may be aligned left, center or rightA label may be aligned left, center or right A label may include text and/or an iconA label may include text and/or an icon

To create a labelTo create a label Declare and Instantiate object of type JLabel Declare and Instantiate object of type JLabel

May modify attributes to control display of labelsMay modify attributes to control display of labels To add a label to a container (display the label in the To add a label to a container (display the label in the

content pane) use the method add from the container content pane) use the method add from the container classclass

Methods Provided by the class Methods Provided by the class JLabelJLabel

Methods Provided by the class Methods Provided by the class JLabelJLabel

class JTextFieldclass JTextField Used to create and modify JTextField objects Used to create and modify JTextField objects

belonging to class JTextFieldbelonging to class JTextField Text field may accept input or display valuesText field may accept input or display values May specify length in characters of text fieldMay specify length in characters of text field

To create text fieldTo create text field Declare reference variable of type JTextFieldDeclare reference variable of type JTextField Instantiate objectInstantiate object

To add a text field to a container (display the label in To add a text field to a container (display the label in the content pane) use the method add from the the content pane) use the method add from the container classcontainer class

Methods Provided by the class JTextFieldMethods Provided by the class JTextField