1. Graphical User Interface
IST 311 / MIS 307

2. Graphical User Interface
GUI programming based on model known as event-driven programming
Means the program reacts to events based on user’s interactions with GUI

3. Graphical User Interface
There are 2 distinct libraries of GUI components in Java2
Abstract Windowing Toolkit (AWT)
Original Java GUI classes
Java Foundation Classes (JFC)
Includes the Swing component set
Released with Java 2 and extend capabilities of AWT classes
Generally don’t mix counterparts in the same program

4. Graphical User Interface
Look and Feel
The style and appearance of GUI components
AWT classes are tied to the local platform’s GUI features
Running on Windows, components will adopt Windows style, running on Mac, adopt that operating system style
AWT classes may not behave the same on different operating systems

5. Graphical User Interface
Look and Feel
Swing GUI components, developer has the option to decide between a “standard” look and feel vs. platform’s GUI style
Swing classes support new functionality
Image inside a button
Behave the same on different operating systems
Swing widgets add an initial J to the names of their corresponding AWT counterparts.
java.awt.Button vs. javax.swing.JButton

6. Basic GUI Some way to provide help to the user
Some way to allow input of information
Some way to allow output of information
Some way to control the interaction between the user and the device

7. Basic GUI Java applications use JFrame as the top-level window
A frame is a GUI window with a title bar and rudimentary functionalty
JFrame is a subclass of Container
To display JFrame, must give it a size and make it visible
Must be able to exit the application when the user closes the frame

8. Basic GUI
JFrame since Java 5 allows you to place components into the content pane with add method
add(okButton);

9. Basic GUI Swing components to handle input, output, control, and help
JLabel: a display for a short string of text, an image, or both; good for a prompt to user; not for input
JTextField: allows input / output of a single line of text
getText( ) and setText( ) methods

10. Basic GUI
JTextArea: multi-line text area used for either input or output
Does not contain scrollbars by default
Can make it un-editable to prevent user typing
JButton: control for the interface; implement an ActionListener to handle the user’s action event

11. Java Event Model
Anything that happens while the computer is running is an event
Keystroke, mouse click, insert a disk, etc.
When a Java program is running, events passed up through the operating system to program
Events that belong to the program must be handled by the program

12. Java Event Model
When something happens within GUI component, an event object is generated and passed to the event listener
A event listener is any object that implements a listener interface
A GUI component, such as a button, is called the event source

13. import java.awt.event.*;
Java Event Model
Must write a method to handle the event
JButton this is named actionPerformed
ActionListener is defined in:
import java.awt.event.*;

14. Basic GUI
How to arrange the interface?

15. Basic GUI Layout Manager
Determine how components are positioned on frames and panels
Panel is an invisible container
Several layout managers in Java:
FlowLayout
BorderLayout
GridLayout
By default, Java uses:
BorderLayout for frames
FlowLayout for panels

16. Basic GUI FlowLayout Manager
Places components onto a frame as you add them, left to right, top to bottom
Components retain their normal size on the frame

17. Basic GUI BorderLayout Manager
Divide the JFrame into 5 areas: north, south, east, west, and center
Components placed on a frame expand to fill the space available
When one or more border areas are unused, the other areas will extend to fill the unused area
Except Center; center is left blank

18. Basic GUI

19. Basic GUI BorderLayout Manager
One limitation of BorderLayout is that only one component may be added to each area
To add several components to an area, you must first add them to a JPanel and then add the panel to the area
JPanel inputPanel = new JPanel( );
inputPanel.add(prompt);
inputPanel.add(input);
getContentPane( ).add(inputPanel, “North”);

20. Basic GUI GridLayout Manager
Create a two-dimensional grid with rows and columns
setLayout(new GridLayout(4, 3, 1, 1));
Where:
4 represents rows
3 represents columns
1, 1 represent spacing between rows and columns; the higher the number, the larger the spacing

21. Basic GUI GridLayout Manager
Components added will expand to fill the available space

22. Basic GUI Import declarations import javax.swing.* import java.awt.*
For GUI components like JButton, JLabel
import java.awt.*
For JFrame container
For layout managers
import java.awt.event.*
For ActionListener interface
For ActionEvent class

23. Public Methods for Swing Components
JButton
setEnabled(true or false)
JTextField
JTextField (int)
JTextField (String)
getText( ): String
setEnabled (true or false)
JTextArea
JTextArea (row, col)
append (String)
setText (String)

24. Color and Font

25. Color and Font Every component has 2 colors: foreground and background
JButton’s label is drawn in foreground color on the button’s background color

26. Color and Font
Color is represented by mixing red, green, and blue as a value from 0 to 255
Color.black : (0, 0, 0)
Color.blue : (0, 0, 255)
Color.green : (0, 255, 0)
Color.red : (255, 0, 0)
Color.pink : (255, 175, 175)
Color.orange : (255, 200, 0)
Color.magenta : (255, 0, 255)

27. Color and Font
JLabel logoLabel = new JLabel(“ “, SwingConstants.CENTER);
logoLabel.setForeground(Color.blue);
logoLabel.setFont(new Font(“TimesRoman”, Font.ITALIC,36));
logoLabel.setText(“Penn State Marina”);