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 package  Still useful Swing  Very popular

A Simple Form Tells the class that It is a frame Constructor Package Needed Settings for the frame go 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 Layouts Constructor Additional Code Follows You must include these steps when you set up a layout Can be FlowLayout, 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 with x and y coordinates Set size with width and height values You must include these steps!

Demonstration Absolute Positioning GUIDemo3

Other Controls Most controls work the same way!

Demonstration Other Controls GUIDemo4

Radio Buttons Radio Groups contain 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!