1 / 24

Graphical User Interfaces (GUIs)

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

marymgibson
Download Presentation

Graphical User Interfaces (GUIs)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related