Graphical User Interface IST 311 / MIS 307

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

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

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

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

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

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

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

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

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

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

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

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.*;

Basic GUI How to arrange the interface?

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

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

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

Basic GUI

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

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

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

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

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)

Color and Font

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

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)

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