Graphical User Interfaces (GUIs)

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 • 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 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 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 • 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); } @Override 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 <?import javafx.scene.*?> <?import javafx.scene.control.*?> <?import fxml.MyGroup?> <MyGroup xmlns:fx="http://javafx.com/fxml"> <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 {@FXML private Label lblNumber; @FXML Private Button lblButton @FXML Private void handleButtonAction(ActionEvent event) { /* Code goes here */ } Public void initialize(URL url, ResourceBundlerb) { /* 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 the @FXML annotations