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

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

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

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 Java GUI applications principally consist of containers and components

Layout Managers 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 Objects that controls how a container's components display

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)

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

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

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

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

GUI Look and Feel

GUI Containment Hierarchy 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 Note: This slide ties to the picture shown on the previous slide Designers likely would create a class for each of the five sections

General Comments It is not hard to create a GUI application, but it can be tedious There is no drag and drop capability to create GUI components like we have in Visual Basic 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

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

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

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);

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

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)

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

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

Creating a View Java/FX –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

Java FX example 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(); } Note: No public static void main(String[] args)

Simple FXML Example

Partial Controller Code import javafx.scene.control.Button Import javafx.scene.control Label Public class JavaFXAppController implements Initializable private Label Private Button Private void handleButtonAction(ActionEvent event) { /* Code goes here */ } Public void initialize(URL url, ResourceBundle rb) { /* Code goes here */ } }