1 GUI Programming (Part III). Graphical User Interfaces (Part III) Overview GUI Programming Issues. GUI Programming in Java: Then and Now. Overview

GUI Programming (Part

III).1

Graphical User Interfaces (Part III)

Overview GUI Programming Issues.

GUI Programming in Java: Then and Now.

Overview of AWT and Swing Graphics Elements.

Layout Managers.

Some Examples.

Coming Next: GUI Programming (Part IV).


III).2

AWT GUI Programming Issues GUI programming consists of the following aspects:

Graphics: line drawing, filling, icons, etc Windows (Containers, Components, Layout): gadgets for interaction Events: handling interaction, timings, etc Media: photos, video, sound, etc Concurrency: doing several things at once

We have touched on all of these aspects except concurrency in the preceding lectures. In the this and the next lectures, we will be considering more AWT graphics components and containers (as well as introducing Swing components) that can be used

to develop more interesting GUIs. All the components used in our graphics applications so far are from the AWT library. Although the AWT is multiplatform (i.e, programs using AWT components run on different computer platforms without change), it was not written in Java and, as a

result, it could not benefit from Java’s object-oriented virtues. AWT components rely on native “peer” user interface elements (buttons, text fields, menus etc) of the underlying OS to render and operate them.


III).3

GUI Programming in Java: Then and Now

This reliance of the AWT components on the native platform gives AWT the following historical limitations: slow on some platforms (e.g., windows) portability problems (slightly different look, some behaviors different) least common denominator phenomenon; rigid look

After many programmer complaints that Java with AWT does not qualify for “write once run everywhere” but “write once debug everywhere”, SUN Microsystems responded with the Java Foundation Classes (JFC) a.k.a Swing.

Unlike AWT, Swing components do not rely on native peers, instead the Java Virtual Machine renders and controls all components. Swing completely controls the look and feel of all components and enables the creation of fast, flexible and extensible graphics components. Four important points to remember about Swing:

1) The API is your best friend 2) Put a J in front of almost everything 3) Only “add” to a top-level container (JFrame, JApplet) by getting the container’s content-pane: getContentPane(); 4) DON’TDON’T mix Swing and AWT components.


III).4

AWT and Swing Graphics Elements Graphics Components and Containers can be grouped into the following main headings

1.) Buttons (see classes Button, JButton): This class creates labeled buttons which generate ActionEvent (as seen in Lecture 13)

2.) Text components (see JTextComponent, JTextArea, JTextField): Allow multi-line (or single-line in case of JTextField) text display are which may be set to be read-only or to allow editing.

3.) Choices (Radio buttons, check boxes, combo boxes): Creates selectable/checkable buttons and boxes, selectable drop-down lists and look and feel renditions.

4.) Menus (see JMenuBar, JMenu, JMenuItem):Provide encapsulations for a platforms menus.

5.) Labels (see JLabel): Components for placing single-line, read-only text in a container.

6.) Panels: The simplest container class (with FlowLayout default manganer) that provides space in which an application can attach any other component, including other panels.

7.) etc

See Example 2 for a simple demonstration of some of these components.


III).5

Complete GUIs

Containers withSeparate LayoutManagers

A Combo Box, RadioButtons, and CheckBoxes

Pulldown Menus


III).6

Layout Managers A layout manager is an object that determines the manner in which components are automatically arranged in a container. Here are some predefined layout managers Java (the last two are defined in Swing)

FlowLayout: puts as many components in a row as possible, then moves to the next row. Components are displayed in the order they are added. BorderLayout: defines 5 areas (North, East, South, West and Center) into which components can be added. Each of these areas could contain a container. CardLayout: Treats each component in the container as a card, only one is visible at a time, and the container acts as a stack of cards. GridLayout: Partitions the Frame into a fixed number of rows and columns. GridBagLayout: Aligns components vertically and horizontally, without requiring that the components be of the same size. BoxLayout: organises components either horizontally (in a row) or vertically (in a column). OverlayLayout: Arranges components over the top of each other.

Every container has a default layout manager which can be changed using setLayout().


III).7

The GridLayout Manager

keypadPanel.setLayout( new GridLayout(4,3,1,1));

A GridLayout arranges components in a two-dimensional grid.

4 rows and 3 columns

1 space between each row

and column

Design Critique: We should use BorderLayout for top-level window.


III).8

GUI Design Critique

Problem: The default layout for a JPanel is FlowLayout but we need GridLayout.

We got the keypad layout

wrong!


III).9

The BorderLayout Manager

Use add(Component, String) method to add components to a border layout :

North

South

CenterWest East

A BorderLayout divides the container into five areas: north, south, east, west, and center.

getContentPane().setLayout(new BorderLayout(2, 2));

getContentPane().add(keypadPanel, "East");

Horizontal and vertical gaps.


III).10

The BorderLayout Manager

prompt:

JTextArea for displaying file atcenter of border layout

JTextField

JButtons

Convert

JLabel

JFrame

1 2 3

4 5 6

7 8 9

0 .C

Keypad Panel

Containment Hierarchy

JFrame (Border)

Prompt JLabel

Display JTextArea

Convert JButton

Input JTextField

Keypad JPanel (Grid)

12 JButtons

Input JPanel (Flow)

Control JPanel (Border)

Control Panel

InputPanel

N

C

E

Panels are used to group components by function.

All the controls are grouped together.


III).11

Anatomy of a Swing JFrameThe surface of a Swing frame is covered with four panes.

Three of them, namely the root pane, the layered pane, and the glass pane are of no interest to most Java programmers.

You need to know about the content pane, which holds the components that you want to display in the window

To add a component to the content pane of a frame, you must first get a reference to the content pane object by calling the getContentPane method.

This method returns a reference of type Container.


III).12

Example 1: Using Simple Swing Components

import javax.swing.*;

import java.awt.*;

import java.awt.event.*;

public class CountButtonPushes extends JFrame implements ActionListener {

private JButton button = new JButton("Press me");

private JLabel total = new JLabel( "Running total:");

private JTextField tally = new JTextField(10);

private int sum = 0;

public CountButtonPushes() {

super("A Container With Components");

setSize(500,500);

Container cp = getContentPane();

cp.setLayout(new FlowLayout());

cp.add(total);

cp.add(tally);

cp.add (button);

button.addActionListener(this);

show();

}

public void actionPerformed( ActionEvent e ) {

sum = sum + 1; // add number to sum

tally.setText(Integer.toString(sum));

}

public static void main(String args [] ) {

new CountButtonPushes();

}

}


III).13

Example 1 (Cont’d) Example 1 in the preceding slide is the same as in Lecture 10 except that in this case we need to add the components to the content pane of the JFrame window.

Run this program side-by-side the equivalent one in Lecture 10 that extends the AWT’s Frame and observe the behavior of the two programs.

Example 2 on the next slide is meant to provide a way of experimenting with the different layout managers.

In this example, different Swing components are created and added to the main JFrame Container as well as a JPanel subcontainer.

As you might guess, many of these Swing components have more than one constructor. You should consult the Java 2 SDK documentation for more details on these.

In order to facilitate your understanding of layout managers, you should run this program with the different standard layout managers to see their effect.


III).14

Example 2: Understanding Layout Managers

import javax.swing.*;import java.awt.*;

public class UsingLayoutManagers extends JFrame {

private String courses[] = { "One", "Two", "Three",

"Four", "Five", "Six", "Seven", "Eight",

"Nine", "Ten", "Eleven"};

private JCheckBox jcb = new JCheckBox("A check box");

private JRadioButton jrb = new JRadioButton("Radio Button");

private JPanel jp = new JPanel();

private Choice jc = new Choice();

private JComboBox jcbb = new JComboBox();

public UsingLayoutManagers() {

super("Experimenting with Layout Managers.");

setSize(500,500);



//cp.setLayout(new FlowLayout(FlowLayout.LEFT));

//cp.setLayout(new GridLayout(3,5));

//cp.setLayout(new GridBagLayout());

//cp.setLayout(new BorderLayout());

for (int i=0; i<courses.length; i++){

cp.add(new JButton(courses[i]));

}

cp.add(jcb); cp.add(jrb);

jc.add("UNIX"); jc.add("Windows");

jc.add("Macintosh");

jp.add(jc);

cp.add(jp); cp.add(jcbb);

show();}


new UsingLayoutManagers();}}


III).15

Example 3: Multiple Listeners to ActionEvent

import javax.swing.*;import java.awt.*;

import java.awt.event.*;

public class UsingLayoutManagers1 extends JFrame implements ActionListener {

private JPanel jp = new JPanel();

private JTextField jtf = new JTextField(21);

private JButton buttons[] = new JButton[5];

private String courses[] = {"ICS102",

"ICS201", "ICS202", "ICS232", "ICS313"};

public UsingLayoutManagers1() {

super("Experimenting with Layout Managers!");

setSize(500,500);



for (int i=0; i<courses.length; i++){

buttons[i] = new JButton(courses[i]);

buttons[i].addActionListener(this);

cp.add(buttons[i]);

}

jp.add(jtf);

cp.add(jp);

show();

}


III).16

Example 3: Multiple Listeners to ActionEvent (Cont’d)

public void actionPerformed( ActionEvent ae) {

for (int i = 0; i<courses.length; i++){

if (ae.getSource() == buttons[i])

jtf.setText("You Pressed "+ buttons[i].getText());

}

}


new UsingLayoutManagers1();

}

}

Example2


III).17

Example 3: Multiple Listeners to ActionEvent (Cont’d)

Example 3 creates and adds a number of buttons to a JFrame and registers all these buttons to listen to an action event.

The getSource()method returns the object on which the Event initially occurred

The getText() method is used to return a button's text.

You may make similar modifications to this program as you did to the program in Example 2 above to add to your experience with layout managers.

We will consider more interesting examples involving with multiple Swing controls (components and containers)

Documents

1 GUI Programming (Part III). Graphical User Interfaces (Part III) Overview GUI Programming Issues. GUI Programming in Java: Then and Now. Overview