Graphical User Interfaces

Tonga Institute of Higher Education

Graphical User Interfaces

Graphical User Interface – A program that displays program information using windows

GUI Objects Control

Classes used to implement user interface components

Message Box / Dialog Box An attention getter Displays information to the user Forces user to do something click before continuing Use JOptionPane class

Frames / Windows Frame – Is a container for other GUI elements. Use JFrame class Allows user to see a window Contains other controls

UI Objects / Controls - 1 Control

Discussed earlier Frame

Discussed earlier Label

Adds text to the window Text Box

Allows user to enter text

Text Box

Label

Frame

UI Objects / Controls - 2 Combo Box

Allows user to select one option from a list of options The user may see the options when they click on the control

Radio Button Allows user to select an option from a group of options Only one option may be selected at a time Lets users see options

Check Box Allows user to turn one option on or off (True or False)

Combo Box

Radio Button

Check Box

UI Objects / Controls - 3 Button

Initiates code when clicked

Button

Packages for GUIs

Abstract Windowing Toolkit (AWT)Older packageStill useful

Swing Very popular

A Simple Form Tells the class thatIt is a frame

Constructor

PackageNeeded

Settings for the framego in the constructor

Demonstration

Simple Form

GUIDemo1

Layouts

FlowLayout Arranges controls in a left-to-right flow. Similar to a paragraph Each line is centered

GridLayout Arranges controls in a rectangular grid Each control is divided into equal-sized rectangles

BorderLayout Arranges controls to fit in 5 regions

NORTH SOUTH WEST EAST CENTER

Only 1 object may be in each region

Coding LayoutsConstructor

Additional Code Follows

You must includethese steps whenyou set up a layout

Can beFlowLayout,GridLayout, Or BorderLayout

Demonstration

Layouts

GUIDemo2

Absolute Positioning

Constructor

Used to put controls exactly in a place that you give coordinates for.

Used to set the exact size of a control.

Set location withx and y coordinates Set size with width

and height values

You must includethese steps!

Demonstration

Absolute Positioning

GUIDemo3

Other Controls

Most controlswork the sameway!

Demonstration

Other Controls

GUIDemo4

Radio Buttons

Radio Groupscontain Radio Buttons

Demonstration

Radio Buttons

GUIDemo5

Code Conventions

Different companies use different prefixes to identify controls Button – btn, cmd Check Box – chk Combo Box – cbo Frame – frm Label – lbl Radio Button – rad, rdo, opt Text Box – txt

Use the ones you like. Be consistent!