Java GUI

Structure of a GUI App A GUI app consists of a frame controls code This app is made of: Frame – window Controls – such as buttons and labels Properties – such as size, color Methods – built in procedures related to properties Event Methods – such as clicking General Methods – code not related to objects

Steps in Building a GUI Create the frame. Create the user interface by placing controls on the frame. Write code for control event methods, and perhaps other methods. We will use the java Swing and AWT components, so import javax.swing.*; import java.awt.*;

Testing The event-driven nature of Java allows you to build your app in stages and test it at each stage. Build one method, or part of a method, and get it working before moving on. This minimizes errors and increases your confidence. Build a little, test a little, modify a little, and test again!

Swing Controls These all have names beginning with J JFrame JButton basic container for other controls title property establishes caption JButton used to start some action text property establishes the caption JLabel allows placement of formatted text on a frame text property establishes the caption

Swing Controls, continued JTextField accepts a single line of typed information JTextArea accepts multiple lines of scrollable typed info JCheckBox provides yes or no answer JRadioButton allows selection from a mutually exclusive group JComboBox users can choose from a drop down list

Swing Controls, continued JList like a combo box with the list always visible allows multiple selections JScroll a scroll bar control used to select from a range of values always buddied with another related control

Creating a Frame This is the first step in building a GUI app The following is an example from the Stopwatch project

Extending the JFrame means that this Stopwatch object takes on all characteristics of such a frame. This is the constructor. It has the same name as the class. It is called from the main method. These are methods.

User Interface Once the frame is created, we ‘place’ controls in the frame. The layout manager determines how controls are arranged. There are several to choose from. The GridBagLayout offers a nice interface appearance by placing controls into a rectangular frame like a table or a 2D array.

User Interface, cont. A frame contains several panes. Controls are placed into the content pane. The GridBagLayout manager divides the content pane into rows and columns.

Placing a Control into a GridBag Layout Declare the control Create the control Set the desired control properties Add the control to the desired position We will declare all the controls with class level scope so that any method in the class may use them.

JButton startButton = new JButton(); Adding Controls Declare the control ControlType controlName; For ex, JButton startButton; Create the control controlName = new ControlType(); For ex, startButton = new JButton(); You may combine steps 1 & 2: JButton startButton = new JButton();

startButton.setText(“Start Timing”); Adding Controls, cont. Set the desired control properties controlName.setPropertyName(PropertyValue); For ex, startButton.setText(“Start Timing”);

Adding Controls, cont. Add the control to the desired position Declare a GridBagConstraints object to allow position GridBagConstraints gridConstraints = new GridBagConstraints(); Choose x and y location. gridConstraints.gridx =0; gridConstraints.gridy=0; Add the control. getContentPane().add(controlName,gridConstraints); For ex, getContentPane().add(startButton,gridConstraints);

Adding Controls, cont. To finalize placement of controls in the frame, execute a pack method. pack(); This “packs” the grid layout onto the frame and makes the controls visible.

Stopwatch Project Complete the Stopwatch project GUI from Learn Java (GUI Applications), Chapter 1. pages 1-29 to 1-35 pages 1-44 to 1-50

Event Methods The next step is to add code in event methods and their corresponding listeners. There are two ways…one for AWT and one for Swing objects. Listeners are added into the frame constructor code.

AWT Event Listeners Event listeners for AWT objects are implemented using adapters. Every project needs to “listen” for the event when the user closes the window. Add this code to the frame constructor.

Swing Event Listeners actionPerformed event methods are added using ActionListener.

controlNameActionPerformed We could add the code for the action to the listener, but it is cleaner to add it in an external method as shown here: This makes editing, modifying, and testing easier.

Stopwatch, cont. Complete the Stopwatch project GUI from Learn Java (GUI Applications), Chapter 1. pages 1-62 to 1-64 Try the options on page 1-69 Savings Account Project, Learn Java (GUI App) p 2-28 to 2-35