1. Graphical User Interfaces (GUIs)
GUI: An application that uses graphical objects to interact with users
GUI applications consist of:
Events: A user or programmatic action
Listeners: A method that responds to an event
Components: A GUI object
Containers: A collection of components
listener interface: An interface that contains listeners
Adapter class: A class that implements a listener interface with default methods
layout managers: An object that defines how components in a container present to the user
special features: Methods that customize a GUI's look and feel

2. Java GUI Facilities AWT (Abstract windowing toolkit)
Designed for creating applets
Not powerful enough for application programs
Simple and easy to use, and supported by almost all browsers
Peer model relies on platform-dependent native code (heavyweight)
Swing (The creator was a "swing" dancer)
Newer and more sophisticated GUI facility
Swing class names start with the letter 'J'.
Consistent look and feel across operating systems
Does not depend on operating system facilities (lightweight)
Many swing classes extend their AWT counterparts
Most application developers now use Swing, not AWT
Supports a pluggable look and feel (UIManager.setLookAndFeel("javax.swing.plaf.windowsLookAndFeel");
AWT and Swing are each a collection of Java classes for GUI development
Java GUI facilities are large and complex. We focus only on a small subset

3. AWT vs. Swing AWT advantages over Swing Swing advantages over AWT
Simpler to learn and use
Less idiosyncracies
Swing advantages over AWT
Much greater functionality
Portability. Consistent look and feel across platforms
Vendor support. AWT functionality is frozen
Built-in double buffering overlaps processing with I/O

4. Containers and Components
Java GUI applications principally consist of containers and components
Container
A Java class instantiated to hold groups of components
Examples: JApplet, JFrame, JPanel, JTabbedPanel, JScrollPane
Component
A Java class instantiated to create a type of GUI object
Examples: JButton, JCheckBox, JComboBox, JColorChooser, JFileChooser, JLabel, JList, JMenu, JOptionPane, JPasswordField, JRadioButton, JSlider, JTextArea, JTextField, JToggleButton, JTree

5. Layout Managers Java Layout Managers Comments
Objects that controls how a container's components display
Java Layout Managers
AWT: Flow, Border, Card, Grid, GridBag
Swing: Flow, Border, Card, Grid, GridBag, Box, Overlay
Comments
If a GUI doesn't choose a layout, Java uses FlowLayout
Each layout manager
has its own idiosyncrasies
responds to window resizing differently
May or may not respond to a component's preferred size or alignment preferences

6. Layout Manager Summary
AWT managers
Flow: left-to-right, top-to-bottom in order (The default)
Border: Sections for North, South, Center, East, West
Card: Tab like capability, display one card at a time
Grid: two dimensional array of components
GridBag: two dimensional array of components where components can span rows and columns
Swing managers
Box: vertical or horizontal list of components
Overlay: components that can overlap each other.
See the demo program on the class web-page (by Lewis/Loftus)

7. Overlay Layout Example
OverlayLayout allows a container to display components over the top of each other.

8. GridBagLayout GridBagLayout defines a grid of cells.
Components can span rows and columns and have varied heights and widths.

9. CardLayout Example
CardLayout allows GUIs to display different panels at different times.
CardLayout GUIs often use a combo box to control what panel displays
JTabbedPane is an alternative to C

10. GUI Design
The goal is to use Java GUI facilities to solve a user's application problem.
The first steps for a GUI designer is to:
Fully understand the problem
Design the way the application interact with the user
Create a GUI containment hierarchy
GUI applications need to be
Be robust, properly handling all possible errors. For example, make sure to see what happens when the window is resized.
Be intuitive and easy to use
Should have a consistent interface across panels and frames

11. GUI Look and Feel

12. GUI Containment Hierarchy
Note: This slide ties to the picture shown on the previous slide
North Panel: Two labels, flow layout
South Panel: Two Buttons, box layout
East Panel: Slider, label, combo box, box layout
West Panel: Three box panels with label and text field, panel with two radio buttons, box layout
Center Panel: Six check boxes, label, and text field
Designers likely would create a class for each of the five sections

13. General Comments
It is not hard to create a GUI application, but it can be tedious
There is a drag and drop capability to create GUI components but it creates unreadable code
GUIs in java have many single line Statements
To create GUI components
To set GUI properties
To call special methods
Good design
Break up GUI applications to a set of panel or component classes.
This makes the code easier to maintain

14. Steps to create a GUI Application
Create a class hierarchy diagram for the application
Determine components should be in their own Java class
Instantiate the application's JFrame with its title
Configure the window close procedure
Instantiate the components and set their properties
Call the JFrame getContentPane() method to get the default application container.
Add the components to the JFrame application container
Set the size of the frame
Make the frame visible
Note: It is possible for a JFrame to have multiple containers (layers)

15. Steps to Create a Component or Container Class
GUI component class signature line
Extend the appropriate component class (extends)
Implement the appropriate listener (implements)
Create references to the needed sub-components
Instantiate the components in the constructor class or in the applet init() method
Define the layout for containers
Call methods for setting custom properties
Add components to containers
Add listeners

16. Components JButton JButton button = new Jbutton(“Add”);
button.setMnemonic(‘A’);
button.setToolTipText(“Add a record”);
JFrame JFrame frame = new JFrame("A Title");
JTextField JTextField data = new JTextField(“”)
String text = data.getText();
JLabel JLabel label = new JLabel(“label to display”);
label.setText(“new Text”);
JComboBox JComboBox box = new JComboBox(array or object);
JRadioButton JRadioButton button= new JRadioButton(“end”, true);
JCheckBox JCheckBox box = new JCheckBox((“Bold”, true);
Jlist Jlist list = new Jlist(array or object);
JScrollPane JScrollPane scroll = new JScrollPane(array or object);
JtabbedPane JTabbedPane pane = new JTabbedPane();
pane.addTab(“label”, container);

17. Listeners: Methods responding to Events
Examples
MouseListener – respond to user mouse events
Add "implements MouseListener" to the GUI class
Code listener methods (e.g. mouseClicked()) and attach to the GUI object
MouseMotionListener – respond to mouse movements
Add "implements MouseMotionListener" to the GUI class
Code listener methods (e.g. mouseMoved()) and attach to the GUI object
ActionListener – Recponds once to button selections
Add "implements ActionListener" to the GUI class
Code the "actionPerformed" method and attach to the GUI object
ItemListener – Responds multiple times to changes to a component
Add "implements ItemListener" to the GUI class
Code the "itemStateChanged" method
Attach the ItemListener to the GUI object
Window Listener – respond to clicks of a frame's X button
Create a class that extends WindowAdapter
Code the WindowListener methods and attach to the frame

18. Future Direction Model, View, Controller (MVC)
Model: The classes that manipulate the data managed by the application
View: The User interface. Can be manually created, but normally created by a GUI builder (Java – Scene Builder), which generates XML.
Controller: The module that responds to user events and is a bridge between the Model and the view
Design Pattern: A framework that can be used as a starting point to create many applications of a particular category (e.g. Master – Detail)

19. Languages vary between platforms
Languages Used
Languages vary between platforms
Desktops, Laptops, Microsoft tablets: Java/Java FX
Apple-based Desktops, Laptops, iPhones, Ipods, iPads: Objective C moving to Swift
Android-based phones and tablets: Java/Dalvik

20. Terminology The object describing the application environment
Android: Context
Java-FX: Stage
Apple: View
Listeners
Android and Java: Listeners
Apple: targets and delegates
Objects holding other objects
Views, Scenes (Java)
Objects for buttons, text fields, etc.
Components, widgets, controls

21. Creating a View Java/FX View organization (Tree Structure)
Create in code: not recommended
Create using XML: possible but not the best
Use the Scene Builder with drag and drop
View organization (Tree Structure)
Root View
Child Views

22. Java FX example Note: No public static void main(String[] args)
public class FXMLExample extends Application { public static void main(String[] args) { Application.launch(FXMLExample.class, args); public void start(Stage stage) throws Exception { Parent root = FXMLLoader.load(getClass().getResource("example.fxml")); stage.setTitle("FXML Welcome"); stage.setScene(new Scene(root, 300, 275)); stage.show();

23. Simple FXML Example Created by the Java/FX Scene builder
<?import javafx.scene.*?> <?import javafx.scene.control.*?> <?import fxml.MyGroup?> <MyGroup xmlns:fx=" <children> <Button text="Click Me!" onAction="#handleButtonAction" /> <Label fx:id="label" translateX="0" translateY="30" text=""/> </children> </MyGroup >
Created by the Java/FX Scene builder

24. Partial Controller Code
import javafx.scene.control.Button Import javafx.scene.control Label Public class JavaFXAppController implements Initializable private Label Private Button lblButton Private void handleButtonAction(ActionEvent event) { /* Code goes here */ } Public void initialize(URL url, ResourceBundle rb) { /* Code goes here; called after inflating the XML */ } }
Note: From the Scene Buider, select this class file and then for each component, enter the names shown above under annotations