Graphical User Interfaces

1. Graphical User Interfaces Tonga Institute of Higher Education

2. Graphical User Interfaces • Graphical User Interface – A program that displays program information using windows

3. 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

4. UI Objects / Controls - 1 • Control • Discussed earlier • Frame • Discussed earlier • Label • Adds text to the window • Text Box • Allows user to enter text Label Frame Text Box

5. 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) Radio Button Check Box Combo Box

6. UI Objects / Controls - 3 • Button • Initiates code when clicked Button

7. Packages for GUIs • Abstract Windowing Toolkit (AWT) • Older package • Still useful • Swing • Very popular

8. A Simple Form Tells the class that It is a frame Package Needed Constructor Settings for the frame go in the constructor

9. Demonstration Simple Form GUIDemo1

10. 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

11. Coding Layouts Constructor Can be FlowLayout, GridLayout, Or BorderLayout You must include these steps when you set up a layout Additional Code Follows

12. Demonstration Layouts GUIDemo2

13. Absolute Positioning • Used to put controls exactly in a place that you give coordinates for. • Used to set the exact size of a control. Constructor You must include these steps! Set location with x and y coordinates Set size with width and height values

14. Demonstration Absolute Positioning GUIDemo3

15. Other Controls Most controls work the same way!

16. Demonstration Other Controls GUIDemo4

17. Radio Buttons Radio Groups contain Radio Buttons

18. Demonstration Radio Buttons GUIDemo5

19. 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!