Lecture 9 java gui
1 / 145

Lecture 9 Java GUI - PowerPoint PPT Presentation

  • Uploaded on

Lecture 9 Java GUI. Cheng-Chia Chen. Contents. java GUI evolution Swing Components and Containing Hierarchy Layout Management Java Event Model and Event Handling javaBeans Reference: The Java Tutorial on the trail: Creating a GUI with JFC/Swing. Evolution of Java GUI.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Lecture 9 Java GUI' - hilde

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Lecture 9 java gui

Lecture 9 Java GUI

Cheng-Chia Chen


  • java GUI evolution

  • Swing Components and Containing Hierarchy

  • Layout Management

  • Java Event Model and Event Handling

  • javaBeans


  • The Java Tutorial on the trail: Creating a GUI with JFC/Swing

Evolution of java gui
Evolution of Java GUI

  • Java 1.0 AWT built in 30 days, and it shows

  • Java 1.1 AWT significantly improved, but GUI not finished yet

  • Java 2 Swing: very different, vastly improved

  • This lecture cover Swing only.

Swing jfc is very powerful
Swing/JFC is very powerful

  • Start with the simple approach so you can create basic applications

  • Most of the time this will satisfy your needs

  • If you want to modify the standard elements, you can, but...

    • You’ll have to work harder and learn more

    • A number of big, thick books are available

Swing jfc

  • Very easy to add keyboard accelerators, tooltips, graphics

  • Pluggable look and feel

  • Provides ways to change just about everything, but you must work to understand how

Swing components and the containment hierarchy





Image Icons


Layered Panes and Internal Frames (MDI)

Lists and List Boxes


Popup Menus

Radio Buttons

Progress Bars

Scrolling Support


Splitter Control

Tabbed Panes

Swing Components and the containment hierarchy

Swing features and conecpts
Swing features and Conecpts

  • Components and the containment hierarchy

  • Swing Components and the Containment Hierarchy

  • Layout Management

  • Event Handling

  • Painting

  • Threads and Swing

  • More Swing Features and Concepts

  • The Anatomy of a Swing-Based Program

Swing components and the containment hierarchy1
Swing Components and the Containment Hierarchy

  • An example:

  • Four components in this GUI:

    • a frame, or main window (JFrame) --- top-level container

    • a panel, sometimes called a pane (JPanel) --- intermediate container

    • a button (JButton) --- atomic components

    • a label (JLabel) --- atomic components

Lecture 9 java gui

Classification of swing components
Classification of swing components the panel to the content pane:

  • Top-Level Containers

    • The components at the top of any Swing containment hierarchy.

  • General-Purpose Containers

    • Intermediate containers that can be used under many different circumstances.

  • Special-Purpose Containers

    • Intermediate containers that play specific roles in the UI.

  • Basic Controls

    • Atomic components that exist primarily to get input from the user;

    • they generally also show simple state.

  • Uneditable Information Displays

    • Atomic components that exist solely to give the user information.

  • Editable Displays of Formatted Information

    • Atomic components that display highly formatted information that (if you choose) can be edited by the user.

Top level containers
top-level containers the panel to the content pane:

Frame ( and JFrame)

Applet (and JApplet)

Dialog ( and JDialog)

General purpose containers
General-Purpose Containers the panel to the content pane:

Panel ( and JPanel)





Special purpose containers
Special-Purpose Containers the panel to the content pane:

Root Pane



Basic controls
Basic Controls the panel to the content pane:






List ( and JList)

Basic controls1
Basic Controls the panel to the content pane:


Choice ( and JComboBox)


Uneditable information displays
Uneditable Information Displays the panel to the content pane:


Label ( and JLabel)


Editable displays of formatted information
Editable Displays of Formatted Information the panel to the content pane:




FileDialog ( and JFileChooser)


Lecture 9 java gui

ImageObserver the panel to the content pane:






















Structure of the java.awt (AWT) package.

Layout management
Layout Management the panel to the content pane:

  • the GUIs of five programs, each of which displays five buttons.

Common layout tasks
Common layout tasks the panel to the content pane:

  • Identical Buttons, almost identical codes. why do they look so different?

    • use different layout managers to control the size and position of the buttons.

  • the common layout tasks:

    • Setting the layout manager :

    • JPanel pane = new JPanel();

    • pane.setLayout(new BorderLayout());

    • Providing hints about a component :

    • privide size Hints : setMinimumSize(Dimension), setPreferredSize(..), setMaximumSize(..)

    • provide alignmentHints: setAllignmentX(float), setAlignmentY(float)

    • Putting space between components :

    • the layout manager : can specify hgap and vgap.

    • putting invisible component:

    • empty border : best for components that have no default border, eg: JPanel, Jlabel

Event handling
Event Handling the panel to the content pane:

  • Every time the user types a character (KeyEvent) or pushes a mouse button( MouseEvent), an event occurs.

  • Any object can be notified of the event.

    • implement the appropriate interface and

    • be registered as an event listener on the appropriate event source.

  • Swing components can generate many kinds of events.

Example gui events
Example GUI Events the panel to the content pane:

  • Act that results in the event Listener type

  • User clicks a button,

    presses Return while typing in a ActionListener

    text field, or chooses a menu item

  • User closes a frame (main window) WindowListener

  • User presses a mouse button

    while the cursor is over a component MouseListener

  • User moves the mouse over a component MouseMotionListener

  • Component becomes visible ComponentListener

  • Component gets the keyboard focus FocusListener

  • Table or list selection changes ListSelectionListener

Java event model

system: the panel to the content pane:

Java Event Model

  • delegation ( or forwarding ) model

l = new EventListener(…)


b=new EventSource(…)



Event e1 occurs


Event e2 occurs



How to implement an event handler
How to Implement an Event Handler the panel to the content pane:

  • Implement and instantiate an event Listener :

    • public class MyClass implements XXXListener { …}

    • XXXListener l = (XXXListener) new MyClass(…);

  • Register the eventListener as an listener on event source:

    • aEventSource.addXXXListener( l ) ;

  • From now on, every time an event e occurs, the event source object will call the appropriate doXXXAction(e) from l.

  • Threads and Event Handling :

    • Event-handling code executes in a single thread, the event-dispatching thread.

    • => Event handlers should execute very quickly, Otherwise, the program's perceived performance will be poor. If needing lengthy operation, starting up another thread

How painting works
How Painting Works the panel to the content pane:

1. background

2. custom painting

3. border

4. children

More swing features and concepts
More Swing Features and Concepts the panel to the content pane:

  • Features that JComponent provides

    • the ability to have borders,

    • tool tips, and

    • a configurable look and feel.

  • Icons

    • Many Swing components -- notably buttons and labels -- can display images. You specify these images as Icon objects.

  • Actions

    • provide support for sharing data and state between two or more components that can generate action events.

  • Pluggable Look & Feel support

    • A single program can have any one of several looks and feels.

    • can let the user determine the look and feel, or

    • can specify the look and feel programatically.

  • Support for assistive technologies

  • Separate data and state models

Using swing components
Using Swing Components the panel to the content pane:

  • The JComponent Class

  • Using Top-Level Containers

  • Using Intermediate Swing Containers

  • Using Atomic Components

The jcomponent class
The JComponent Class the panel to the content pane:

  • JComponent  Container  Component

  • Tool tips:

    • setToolTipText(String)

  • Borders

    • The setBorder method allows you to specify the border that a component displays around its edges.

  • Keyboard-generated actions

    • Using the registerKeyboardAction method, you can enable the user to use the keyboard, instead of the mouse, to operate the GUI.

  • Application-wide pluggable look and feel

    • UIManager.setLookAndFeel(…)

  • Properties

    • can associate one or more properties (name/object pairs) with any JComponent.

    • putClientProperty(…), getClientProperty(…)

Lecture 9 java gui

  • Support for layout the panel to the content pane:

    • get/set minimum/preferred/maximum Size(..).

    • get/set alignmentX/Y(…)

  • Support for accessibility

  • Double buffering

  • Methods to increase efficiency

    • getX(), getY(), getWidth(), getHeight(),…

The jcomponent api
The JComponent API the panel to the content pane:

  • Customizing Component Appearance :

    • get/set for properties: border, forground, background, font, opaque

    • eg: setBorder(Border) / Border getBorder(), …

  • Setting Component State

    • void setToolTipText(String)

    • void setEnabled(boolean b) , boolean isEnabled()

    • void setLocale(Locale l) , Locale getLocale()

    • void setCursor(Cursor), Cursor getCursor() // mouse curser Icon

    • void setVisible(boolean) , boolean isVisible()

  • Handling Events :

    • add/remove (component, mouse, mouseMotion, key, container, focus) Listenser

    • get/set nextFocusComponent property

    • requestFocus(), hasFocus()

    • boolean contains(int x, int y), contains(Point)

    • Component getComponentAt(int, int)

Lecture 9 java gui

  • Painting Components the panel to the content pane:

    • void repaint() , repaint(int, int, int, int), repaint(Rectangle)

    • void revalidate() : ReLay out the component and its affected containers.

    • void paintComponent(Graphics)

  • Dealing with the Containment Hierarchy

    • Component add(Component[,int index | Object constraint])

    • void remove(int) , void remove(Component comp) , void removeAll()

    • JRootPane getRootPane()

    • Container getParent()

    • int getComponentCount()

    • Component getComponent(int)

    • Component[] getComponents()

Lecture 9 java gui

  • Laying Out Components the panel to the content pane:

    • get/set LayoutManager property: layout

    • get/set Dimension properties: minimumSize, preferredSize,

    • maximumSize

    • get/set float property: allignmentX, allignmentY

  • Getting Size and Position Information

    • int getWidth(), getHeight(), getX(), getY()

    • Dimension getSize(), Dimension getSize(Dimension)

    • Rectangle getBounds() , Rectangle getBounds(Rectangle)

    • Point getLocation() , getLocation(Point), getLocationOnScreen();

    • Insets getInsets()

  • Specifying Absolute Size and Position

    • setLocation(int,int) setLocation(Point), setSize(int,int), setSize(Dimension), setBounds(int x,y,w,h), setBounds(Rectangle)

Using top level containers
Using Top-Level Containers the panel to the content pane:

  • three generally useful top-level container classes:

    • JFrame, JDialog, and JApplet.

  • Each has a content pane that contains the visible components in the GUI.

  • Can optionally add a menu bar to a top-level container.

    • positioned within the top-level container, but outside the content pane.

Lecture 9 java gui

  • Adding Components to the Content Pane : the panel to the content pane:

    • frame.getContentPane().add(yellowLabel, BorderLayout.CENTER);

  • Adding a Menu Bar :

    • frame.setJMenuBar(cyanMenuBar);

  • The Root Pane :

How to make frames main windows
How to Make Frames (Main Windows) the panel to the content pane:

  • code creates and

  • sets up the frame

The code
the code the panel to the content pane:

public static void main(String s[]) {

JFrame frame = new JFrame("FrameDemo");

frame.addWindowListener(new WindowAdapter() {

public void windowClosing(WindowEvent e) {System.exit(0);}


//...create a blank label, set its preferred size...

frame.getContentPane().add(emptyLabel, BorderLayout.CENTER);




Jframe apis
JFrame APIs the panel to the content pane:

  • Constructors: JFrame(), JFrame(String)

  • void setDefaultCloseOperation(int), int getDefaultCloseOperation()

    • Possible choices: DO_NOTHING_ON_CLOSE, HIDE_ON_CLOSE (the default) , DISPOSE_ON_CLOSE

  • void setContentPane(Container) , Container getContentPane()

  • void setJMenuBar(JMenuBar) , JMenuBar getJMenuBar()

Using intermediate swing containers
Using Intermediate Swing Containers the panel to the content pane:

  • Panel

    • The most flexible, frequently used intermediate container.

  • Scroll Pane

    • Provides scroll bars around a large or growable component.

  • Split Pane

    • Displays two components in a fixed amount of space, letting the user adjust the amount of space devoted to each component.

  • Tabbed Pane

    • Contains multiple components but shows only one at a time. The user can easily switch between components.

  • Tool Bar

    • Holds a group of components (usually buttons) in a row or column, optionally allowing the user to drag the tool bar into different locations.

Special intermediate containers
special intermediate containers the panel to the content pane:

  • Internal Frame

    • Looks like a frame and has much the same API, but must appear within another window.

  • Layered Pane

    • Provides a third dimension, depth, for positioning components. You specify the position and size of each component. One type of layered pane, a desktop pane, is designed primarily to contain and manage internal frames.

  • Root Pane :

    • Provides behind-the-scenes support to top-level containers.

How to use panels
How to Use Panels the panel to the content pane:

Lecture 9 java gui

  • Setting the Layout Manager : the panel to the content pane:

    • JPanel aPanel = new JPanel();

    • aPanel.setLayout(new BorderLayout());

  • Adding Components

    • aFlowPanel.add(aComponent);

    • aFlowPanel.add(anotherComponent);

    • aBorderPanel.add(aComponent, BorderLayout.CENTER);

    • aBorderPanel.add(anotherComponent, BorderLayout.SOUTH);

The jpanel api
The JPanel API the panel to the content pane:

  • Constructors: JPanel() , JPanel(LayoutManager)

  • void add(Component [, Object ] [, int ]),

  • void add(String, Component)

  • int getComponentCount()

  • Component getComponent(int)

  • Component[] getComponents()

  • Component getComponentAt( [int, int | Point] )

  • void remove(Component), void remove(int) , void removeAll()

  • void setLayout(LayoutManager), LayoutManager getLayout()

How to use scroll panes
How to Use Scroll Panes the panel to the content pane:

textArea = new JTextArea(5, 30);

JScrollPane scrollPane = new JScrollPane(textArea);


contentPane.setPreferredSize(new Dimension(400, 100));


contentPane.add(scrollPane, BorderLayout.CENTER);

How to use split pane
How to use Split Pane the panel to the content pane:

The code1
the code the panel to the content pane:

//Create a split pane with the two scroll panes in it.

splitPane = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT,

listScrollPane, pictureScrollPane);



//Provide minimum sizes for the two components in the split pane

Dimension minimumSize = new Dimension(100, 50);



How to use tool bars
How to Use Tool Bars the panel to the content pane:

Lecture 9 java gui

public ToolBarDemo() { ... the panel to the content pane:

JToolBar toolBar = new JToolBar();



JPanel contentPane = new JPanel();

contentPane.setLayout(new BorderLayout());


contentPane.add(toolBar, BorderLayout.NORTH);

contentPane.add(scrollPane, BorderLayout.CENTER);



Lecture 9 java gui

protected void addButtons(JToolBar toolBar) { the panel to the content pane:

JButton button = null;

//first button

button = new JButton(new ImageIcon("images/left.gif"));

... toolBar.add(button);

//second button

button = new JButton(new ImageIcon("images/middle.gif"));

... toolBar.add(button);

//third button

button = new JButton(new ImageIcon("images/right.gif"));

... toolBar.add(button); }

  • Other methods:

    • isFloatable(), setFloatable(boolean)

    • addSeparator()

Using atomic components
Using Atomic Components the panel to the content pane:

  • The following atomic components exist primarily to get input from the user:

  • Button, Check Box, Radio Button

    • Provides easy-to-use, easy-to-customize button implementations.

  • Combo Box

    • Provides both uneditable and editable combo boxes -- buttons that bring up menus of choices.

  • List

    • Displays a group of items that the user can choose.

  • Menu

    • Includes menu bar, menu, and menu item implementations, including specialized menu items such as check box menu items.

  • Slider

    • Lets the user choose one of a continuous range of values.

  • Text Field

    • Lets the user enter a single line of text data.

Lecture 9 java gui

  • Some atomic components exist only to give information: the panel to the content pane:

  • Label : Presents some text, an icon, or both.

  • Progress Bar : Displays progress toward a goal.

  • Tool Tip : Brings up a small window that describes another component.

  • The rest of the atomic components provide formatted information and a way of editing it:

  • Color Chooser : A UI for choosing colors; can be used inside or outside a dialog.

  • File Chooser :A UI for choosing files and directories.

  • Table: An extremely flexible component that displays data in a grid format.

  • Text Support : A framework including everything from simple text components, such as text fields, to a full-featured, extensible kit for building text editors.

  • Tree : A component that displays hierarchical data.

How to use buttons check boxes and radio buttons
How to Use Buttons, Check Boxes, and Radio Buttons the panel to the content pane:

ImageIcon leftButtonIcon = new ImageIcon("images/right.gif")

b1 = new JButton("Disable middle button", leftButtonIcon);


  • position of the text relative to the icon




    b1.addActionListener(this); b1.setToolTipText(“… ");

Lecture 9 java gui

The code2
the code text

//In initialization code:

chinButton = new JCheckBox("Chin");



glassesButton = new JCheckBox("Glasses");


glassesButton.setSelected(true); …

// Register a listener for the check boxes.

CheckBoxListener myListener = new CheckBoxListener();

chinButton.addItemListener(myListener); …


How to use radiobuttons
How to use RadioButtons text

  • Radio buttons are groups of buttons in which, by convention, only one button at a time can be selected.

  • Swing release supports radio buttons with the JRadioButton and ButtonGroup classes.

Lecture 9 java gui

//In initialization code: text

// Create the radio buttons.

JRadioButton birdButton = new JRadioButton(birdString);



birdButton.setSelected(true); …

// Group the radio buttons.

ButtonGroup group = new ButtonGroup();

group.add(birdButton); group.add(catButton);

group.add(dogButton); group.add(rabbitButton);


Lecture 9 java gui

// Register a listener for the radio buttons. text

RadioListener myListener = new RadioListener();







class RadioListener implements ActionListener ... {

public void actionPerformed(ActionEvent e) {

picture.setIcon(new ImageIcon("images/"

+ e.getActionCommand()

+ ".gif"));



The event listener
The event listener text

class CheckBoxListener implements ItemListener {

public void itemStateChanged(ItemEvent e) {


Object source = e.getItemSelectable();

if (source == chinButton) { //...make a note of it...

} else if (source == glassesButton) { //...make a note of it...

} else if (source == hairButton) { //...make a note of it...

} else if (source == teethButton) { //...make a note of it...


if (e.getStateChange() == ItemEvent.DESELECTED)

//...make a note of it...

picture.setIcon(/* new icon */);


} }

Lecture 9 java gui

final JLabel banner = new JLabel("Welcome to the Tutorial Zone!",


banner.setForeground(Color.yellow); ...

final JColorChooser tcc = new ColorChooser ( banner.getForeground()); // initial selected color ...

getContentPane().add(tcc, BorderLayout.CENTER);

  • A color chooser uses an instance of ColorSelectionModel to contain and manage the current selection, which fires a change event whenever the user changes the color in the color chooser.

Lecture 9 java gui

  • The example program registers a change listener with the color selection model so that it can update the banner at the top of the window. The following code registers and implements the change listener:


    new ChangeListener() {

    public void stateChanged(ChangeEvent e) {

    Color newColor = tcc.getColor();


    } } );

File chooser
File Chooser color selection model so that it can update the banner at the top of the window. The following code registers and implements the change listener:

Lecture 9 java gui

//Create a file chooser color selection model so that it can update the banner at the top of the window. The following code registers and implements the change listener:

final JFileChooser fc = new JFileChooser();


// Event Handler for the OpenFile button

public void actionPerformed(ActionEvent e) { // container

int returnVal = fc.showOpenDialog(FileChooserDemo.this);

//= fc.showDialog(FileChooserDemo.this, “OK”)

// other: fc.ShowSaveDialog(…)

if (returnVal == JFileChooser.APPROVE_OPTION) {

// other possibilities: CANCEL_OPTION, ERROR_OPTION

File file = fc.getSelectedFile();

//this is where a real application would open the file.

log.append("Opening: " + file.getName() + "." + newline);

} else {

log.append("Open command cancelled by user." + newline);

} }

Label color selection model so that it can update the banner at the top of the window. The following code registers and implements the change listener:

Lecture 9 java gui

ImageIcon icon = new ImageIcon("images/middle.gif"); color selection model so that it can update the banner at the top of the window. The following code registers and implements the change listener:

. . .

// 2nd arg sets the position of contents relative to label

label1 = new JLabel("Image and Text", icon, JLabel.CENTER);

//Set the position of the text, relative to the icon:



label2 = new JLabel("Text-Only Label");

label3 = new JLabel(icon);

//Add labels to the JPanel.

add(label1); add(label2); add(label3);

Using html on a label
Using HTML on a Label color selection model so that it can update the banner at the top of the window. The following code registers and implements the change listener:

  • The action listener for the button executes this single line of code:

  • theLabel.setText(htmlTextArea.getText());

Combo boxes
Combo Boxes color selection model so that it can update the banner at the top of the window. The following code registers and implements the change listener:

  • very different forms: uneditable and editable.

  • Uneditable Combo Box: Editable Como Box

Lecture 9 java gui

String[] petStrings = { "Bird", "Cat", "Dog", "Rabbit", "Pig" };

// Create the combo box, select item at index 4.

// Indices start at 0, so 4 specifies the pig.

JComboBox petList = new JComboBox(petStrings);



petList.addActionListener(new ActionListener() {

public void actionPerformed(ActionEvent e) {

JComboBox cb = (JComboBox)e.getSource();

String petName = (String)cb.getSelectedItem();

picture.setIcon(new ImageIcon("images/" +

petName + ".gif"));



Lecture 9 java gui

String[] "Pig" };patternExamples = { "dd MMMMM yyyy", "dd.MM.yy", "MM/dd/yy", "yyyy.MM.dd G 'at' hh:mm:ss z",

"EEE, MMM d, ''yy", "h:mm a", "H:mm:ss:SSS", "K:mm a,z", "yyyy.MMMMM.dd GGG hh:mm aaa"


. . .

JComboBox patternList = new JComboBox(patternExamples);



. . .

// still use getSelectedItem() to fetch selected item even it is entered by user.

Lecture 9 java gui

//...where member variables are declared: "Pig" };

static Vector imageList; … // not limited to Strings

// Create the list of images and put it in a scroll pane

JList list = new JList(imageList); list.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);


JScrollPane listScrollPane = new JScrollPane(list);

  • possible selection modes:




Lecture 9 java gui

Lecture 9 java gui

public void valueChanged(ListSelectionEvent e) { changes.

if (e.getValueIsAdjusting()) return;

JList theList = (JList)e.getSource();

if (theList.isSelectionEmpty()) { picture.setIcon(null);

} else {

int index = theList.getSelectedIndex();

ImageIcon newImage = new ImageIcon("images/" +



picture.setPreferredSize(new Dimension(


newImage.getIconHeight() ));




Adding items to and removing items from a list
Adding Items to and Removing Items from a List changes.

  • ListModel listModel = new DefaultListModel();

  • listModel.addElement("Alison Huml");

  • listModel.addElement("Kathy Walrath");

  • listModel.addElement("Lisa Friendly");

  • listModel.addElement("Mary Campione");

  • list = new JList(listModel);

Lecture 9 java gui

public void actionPerformed(ActionEvent e) { changes.

int index = list.getSelectedIndex(); // or int[ ] getSelectedIndecies()


int size = listModel.getSize();

//Nobody's left, disable firing

if (size == 0) { fireButton.setEnabled(false);

//Adjust the selection

} else {

//removed item in last position

if (index == listModel.getSize())


//otherwise select same index


} }

Creating menus
Creating Menus changes.

//in the constructor for a JFrame subclass:

JMenuBar menuBar;

JMenu menu, submenu;

JMenuItem menuItem;

JCheckBoxMenuItem cbMenuItem;

JRadioButtonMenuItem rbMenuItem;


//Create the menu bar.

menuBar = new JMenuBar();


Lecture 9 java gui

//Build the first menu. changes.

menu = new JMenu("A Menu");



"The only menu in this program that has menu items");


//a group of JMenuItems

menuItem = new JMenuItem("A text-only menu item", KeyEvent.VK_T);


KeyEvent.VK_1, ActionEvent.ALT_MASK));


"This doesn't really do anything");


Lecture 9 java gui

//a group of radio button menu items changes.


ButtonGroup group = new ButtonGroup();

rbMenuItem = new JRadioButtonMenuItem("A radio button menu item");





rbMenuItem = new JRadioButtonMenuItem("Another one");




Lecture 9 java gui

//a group of check box menu items changes.


cbMenuItem = new JCheckBoxMenuItem("A check box menu item");



cbMenuItem = new JCheckBoxMenuItem("Another one");



Lecture 9 java gui

//a submenu changes.

menu.addSeparator(); submenu = new JMenu("A submenu");


menuItem = new JMenuItem("An item in the submenu");


KeyEvent.VK_2, ActionEvent.ALT_MASK));


menuItem = new JMenuItem("Another item");

submenu.add(menuItem); menu.add(submenu);

//Build second menu in the menu bar.

menu = new JMenu("Another Menu"); menu.setMnemonic(KeyEvent.VK_N);


"This menu does nothing");


Handling events from menu items
Handling Events from Menu Items changes.

  • To detect when the user selects a JMenuItem, you can listen for action events (just as you would for a JButton).

  • To detect when the user selects a JRadioButtonMenuItem, you can listen for either action events or item events.

  • For JCheckBoxMenuItems, you generally listen for item events

    public class MenuDemo ... implements ActionListener,

    ItemListener { ...

    public void actionPerformed(ActionEvent e) {… }

    public void itemStateChanged(ItemEvent e) {... }

Bringing up a popup menu
Bringing Up a Popup Menu changes.

//Create the popup menu.

JPopupMenu popup = new JPopupMenu();

menuItem = new JMenuItem("A popup menu item");

menuItem.addActionListener(this); popup.add(menuItem);

menuItem = new JMenuItem("Another popup menu item");

menuItem.addActionListener(this); popup.add(menuItem);

//Add listener to components that can bring up popup menus.

MouseListener popupListener = new PopupListener();




Lecture 9 java gui

class PopupListener extends MouseAdapter { changes.

public void mousePressed(MouseEvent e) { maybeShowPopup(e); }

public void mouseReleased(MouseEvent e) { maybeShowPopup(e); }

private void maybeShowPopup(MouseEvent e) {

if (e.isPopupTrigger()) { popup.show(e.getComponent(),

e.getX(), e.getY()); } } }

Using text components
Using Text Components changes.

  • JTextComponent Hierarchy

Lecture 9 java gui

// An Example of Using a Text Field changes.

JTextField textField = new JTextField(10);



//An Example of Using a Password Field

JPasswordField passwordField = new JPasswordField(10);



// Event handler for both components

public void actionPerformed(ActionEvent e) {

… if (e.getActionCommand().equals(textFieldString)) {

JTextField source = (JTextField)e.getSource();

actionLabel.setText(prefix + source.getText() + "\"");

} else { JPasswordField source = (JPasswordField)e.getSource();

actionLabel.setText(prefix + new String(source.getPassword()) + "\"“ ) ; } }

Using text area
Using Text Area changes.

JTextArea textArea = new JTextArea(

"This is an editable JTextArea " +

"that has been initialized with the setText method. " +

"A text area is a \"plain\" text component, " +

"which means that although it can display text " +

"in any font, all of the text is in the same font."


textArea.setFont( new Font("Serif", Font.ITALIC, 16));



JEditorPane changes.

  • the foundation for Swing's styled text components and provides the mechanism through which you can add support for custom text formats.

  • Using an Editor Pane to Display Text from a URL:

    JEditorPane editorPane = new JEditorPane();


    ...//create a URL object for the TextSamplerDemoHelp.html file...

    try {


    } catch (IOException e) {

    System.err.println("Attempted to read a bad URL: " + url);


Using a text pane
Using a Text Pane changes.

JTextPane textPane = new JTextPane();

String[] initString = { /* ... fill array with initial text ... */ };

String[] initStyles = { /* ... fill array with names of styles ... */ };

//Create the styles we need.


Document doc = textPane.getDocument();

//Load the text pane with styled text.

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

doc.insertString(doc.getLength(), initString[i],

textPane.getStyle(initStyles[i])); }

} catch (BadLocationException ble) {

System.err.println("Couldn't insert initial text.");


Layout components within a container
Layout components within a container changes.

  • Probably different than other GUIs you’ve used

  • All code, no resources

  • Components are placed on panel using “layout manager” based on the order in which you add( ) the components

  • Size, shape and placement quite different depending on layout manager

  • Applet and application window size also affects layout

Types of layouts
Types of Layouts changes.

  • FlowLayout

  • BorderLayout

  • GridLayout

  • CardLayout

  • GridBagLayout

  • BoxLayout

  • NullLayout

FlowLayout changes.

  • Components “flow” onto form left-to-right and top-to-bottom

  • Components take on “normal” size

The code3
The Code changes.

Container contentPane = getContentPane();

contentPane.setLayout(new FlowLayout());

contentPane.add(new JButton("Button 1"));

contentPane.add(new JButton("2"));

contentPane.add(new JButton("Button 3"));

contentPane.add(new JButton("Long-Named Button 4"));

contentPane.add(new JButton("Button 5"));

The flowlayout api
The FlowLayout API changes.

  • Three constructors:

    • public FlowLayout()

    • public FlowLayout(int alignment)

    • public FlowLayout(int alignment, int horizontalGap, int verticalGap)

  • The alignment argument must have one of the values :

    • FlowLayout.LEFT, FlowLayout.CENTER, FlowLayout.RIGHT.

  • horizontalGap and verticalGap specify the number of pixels to put between components.

    • default gap value = 5 pixels.

  • Properties:

    • Alignment, Hgap, Vgap: int, RW,

BorderLayout changes.

  • Container divided into five regions: West, North, East, South, Center.

Example changes.

public class BorderLayout1 extends JApplet {

public void init() {

Container cp = getContentPane();

cp.setLayout(new BorderLayout()); // default is FlowLayout

cp.add(new JButton("North") , BorderLayout.NORTH);

// cp.add(BorderLayout.NORTH, new JButton("North")); // also ok!

// cp.add(new JButton("North"), “North”); // also ok!

cp.add(BorderLayout.SOUTH, new JButton("South"));

cp.add(BorderLayout.EAST, new JButton("East"));

cp.add(BorderLayout.WEST, new JButton("West"));

cp.add(BorderLayout.CENTER, new JButton("Center"));

} }

  • Default for most things

Additional properties of borderlayout
Additional properties of BorderLayout changes.

  • (Horizontal and Vertical ) Gaps between components

  • constructor:

    • BorderLayout(int hgap, int vgap)

  • methods:

    • void setHgap(int)

    • void setVgap(int)

GridLayout changes.

  • Organized in rows & columns

The code4
The code changes.

  • Container contentPane = getContentPane();

    contentPane.setLayout(new GridLayout(3,2));

    contentPane.add(new JButton("Button 1"));

    contentPane.add(new JButton("2"));

    contentPane.add(new JButton("Button 3"));

    contentPane.add(new JButton("Long-Named Button 4"));

    contentPane.add(new JButton("Button 5"));

  • APIs:

    public GridLayout(int rows, int columns [, int hgap, int vgap ])

CardLayout changes.

  • Use JTabbedPane instead.

    import java.awt.*;

    public class main extends JApplet implement ActionListner {

    CardLayout cards = new CardLayout();

    JButton b1 = new JButton(“one”), …, b3 = new JButton(“three”);

    b1.addActionListner( this); … ; b3.addActionListner(this)

    public void init() {

    setLayout( cards );

    add( new Button("one"), "one" );

    add( new Button("two"), "two" );

    add( new Button("three"), "three" );


    public void actionPerformed( ActionEvent e) { // flip to next card!

    cards.next( this ); }


Cardlayout api
CardLayout API changes.

  • void first(Container)

  • void next(Container)

  • void previous(Container)

  • void last(Container)

  • void show(Container, String cardID)

    • show card identified by cardID.

GridBagLayout changes.

  • Flexible layout manager that aligns components horizontally and vertically, without requiring that the components be the same size

  • Quite a mess to program

    • Must use GridBagConstraints

    • This is what happens without resources

  • You can accomplish a lot by combining other layout managers.

  • To make it easier, Swing has BoxLayout

BoxLayout changes.

  • Place all components in a row or in a column.

  • Much of the benefit of GridBagLayout without the pain

  • Has helper class Box which uses BoxLayout and builds components for you

BoxLayout changes.

Lecture 9 java gui

The Layout structure changes.











JPanel (BorderLayout)


The code5
The Code changes.

JScrollPane listScroller = new JScrollPane(list);

listScroller.setPreferredSize(new Dimension(250, 80));

listScroller.setMinimumSize(new Dimension(250, 80));



//Lay out the label and scroll pane from top to bottom.

JPanel listPane = new JPanel();

listPane.setLayout(new BoxLayout(listPane, BoxLayout.Y_AXIS));

JLabel label = new JLabel(labelText);


listPane.add(Box.createRigidArea(new Dimension(0,5)));



Lecture 9 java gui

// Lay out the buttons from left to right. changes.

JPanel buttonPane = new JPanel();

buttonPane.setLayout(new BoxLayout(buttonPane, BoxLayout.X_AXIS));

buttonPane.setBorder(BorderFactory.createEmptyBorder(0, 10, 10, 10));



buttonPane.add(Box.createRigidArea(new Dimension(10, 0)));


// Put everything together, using the content pane's BorderLayout.

Container contentPane = getContentPane();

contentPane.add(listPane, BorderLayout.CENTER);

contentPane.add(buttonPane, BorderLayout.SOUTH);

Box layout features
Box Layout Features changes.

  • the box layout takes the components‘ alignments and minimum, preferred, and maximum sizes into account.

  • Respect each component's requested minimum and maximum heights.

  • Use preferred height ( or weight ) as default.

  • layout principles:

    • tries to make all of its container's components equally wide -- as wide as the largest preferred width.

    • container wider => make all the components as wide as the container.

    • If the components aren't all the same width then X alignment comes into play.

Container wider than maximumsize
Container wider than maximumSize changes.

  • All components’s AllignmentX are LEFT_ALLIGNMENT(0.0)

  • All components’s AllignmentX are CENTER_ALLIGNMENT(0.5)

  • All components’s AllignmentX are RIGHT_ALLIGNMENT(1.0)

When no component has maximumsize
When no component has maximumSize changes.

  • same allignmentX => made as wide as their container.

  • different allignmentX :

    • components with an X alignment of 0.0 (left) or 1.0 (right) will be smaller.

    • components with an intermediate X alignment will be as wide as their container

Using invisible components as filler
Using Invisible Components as Filler changes.

  • to have space between components:

    • add an empty border to one or both components, or

    • insert invisible components to provide the space.

    • use Box class to create invisible components.

  • Creating invisible components with Box and Box.Filler.

Rigid area
Rigid area changes.

  • Use this when you want a fixed-size space between two components.

  • container.add(firstComponent);

  • container.add(Box.createRigidArea(new Dimension(5,0)));

  • container.add(secondComponent);

Lecture 9 java gui
Glue changes.

  • container.add(firstComponent);

  • container.add(Box.createHorizontalGlue());

  • container.add(secondComponent);

Custom box filler
Custom Box.Filler changes.

// ensure 5~100 pixels b/t components and 100 px height


Dimension minSize = new Dimension(5, 100);

Dimension prefSize = new Dimension(5, 100);

Dimension maxSize = new Dimension(Short.MAX_VALUE, 100);

container.add(new Box.Filler(minSize, prefSize, maxSize));


Specifying component sizes
Specifying Component Sizes changes.

  • change the minimum, preferred, and maximum sizes in two ways:

  • Invoking setXxxSize method ( defined by the JComponent class).

    • comp.setMinimumSize(new Dimension(50, 25));

    • comp.setPreferredSize(new Dimension(50, 25));

    • comp.setMaximumSize(new Dimension(Short.MAX_VALUE, Short.MAX_VALUE ));

  • Overriding getXxxSize method:

    • ...//in a subclass of a component class:

    • public Dimension getMaximumSize() {

    • size = getPreferredSize();

    • size.width = Short.MAX_VALUE;

    • return size;

    • }

The box and boxlayout api
The Box and BoxLayout API changes.

  • Constructors:

    • BoxLayout(Container, int axis)

    • Box(int axies)

    • // create a Box : subclass of Container but not JComponent

    • static Box createHorizontalBox() // = new Box(BoxLayout.X_AXIS)

    • static Box createVerticalBox()

  • Constructors or methods creating Space Fillers

    • Component createRigidArea(Dimension) Create a rigid lightweight component.

    • Component createHorizontalGlue()

    • Component createVerticalGlue()

    • Component createGlue() Create a glue lightweight component.

    • Horizontal glue and vertical glue can be very useful.

    • Component createHorizontalStrut()

    • Component createVerticalStrut() Create a "strut" lightweight component. We

    • recommend using rigid areas instead of struts.

    • Box.Filler(Dimension, Dimension, Dimension)

Null layout absolute positioning
Null Layout (absolute Positioning) changes.

  • setLayout(null);

  • Programmers are responsible for setting the size and position of each component. ( via setBounds(x, y, witdth, height))

The code6
The code changes.

public class NoneWindow extends JFrame { . . .

private boolean laidOut = false; private JButton b1, b2, b3;

public NoneWindow() {

Container contentPane = getContentPane();


b1 = new JButton("one"); contentPane.add(b1);

b2 = new JButton("two"); contentPane.add(b2);

b3 = new JButton("three"); contentPane.add(b3);

Insets insets = contentPane.getInsets();

b1.setBounds(25 + insets.left, 5 + insets.top, 75, 20);

b2.setBounds(55 + insets.left, 35 + insets.top, 75, 20);

b3.setBounds(150 + insets.left, 15 + insets.top, 75, 30);

. . .

} . . . }

Event handling1
Event Handling changes.

  • Not limited to ActionListener

    • InputEvent: KeyEvent, MouseEvent, MouseMotionEvent,

    • ContainerEvent, ComponentEvent,…

  • Each type of event represented by a class

  • Component responds to an event by making an event object and calling each “listener” registered for that event

  • An event listener implements a particular listener interface using an inner class

  • addXXXListener( ) adds a listener to your component, removeXXXListener( ) un-registers it

Java event model1

system: changes.

Java Event Model

  • delegation ( or forwarding ) model

l = new EventListener(…)


b=new EventSource(…)



Event e1 occurs


Event e2 occurs



Lecture 9 java gui

  • Event type: changes. ItemEvent

    • listener interface: ItemListener

    • add-and-remove-methods : addItemListener( ),removeItemListener( )

    • Components supporting this event : Checkbox, CheckboxMenuItem, Choice, List and anything that implements ItemSelectable.

  • Event type: TextEvent

    • listener interface: TextListener

    • add-and-remove-methods : addTextListener( ), removeTextListener( )

    • Components supporting this event :Anything derived from TextComponent, including TextArea and TextField

Subinterfaces of eventlistner and their methods
Subinterfaces of EventListner and their methods changes.

  • Listener interface/ adapter Methods in interface

  • ActionListener actionPerformed(ActionEvent)

  • AdjustmentListener adjustmentValueChanged(AdjustmentEvent)

  • ComponentListener, componentHidden(ComponentEvent)

    ComponentAdapter componentShown(ComponentEvent)



  • ContainerListener, componentAdded(ContainerEvent)

    ContainerAdapter componentRemoved(ContainerEvent)

  • FocusListener, focusGained(FocusEvent) // get keyboard

    FocusAdapter focusLost(FocusEvent) // lost keyboard

Subinterfaces of eventlistner and their methods1
Subinterfaces of EventListner and their methods changes.

  • Listener interface w/ adapter Methods in interface

  • KeyListener, keyPressed(KeyEvent)

    KeyAdapter keyReleased(KeyEvent)


  • MouseListener, mouseClicked(MouseEvent)

    MouseAdapter mouseEntered(MouseEvent)




  • MouseMotionListener, mouseDragged(MouseEvent)

  • MouseMotionAdapter mouseMoved(MouseEvent)

Subinterfaces of eventlistner and their methods2
Subinterfaces of EventListner and their methods changes.

  • Listener interface w/ adapter Methods in interface

    WindowListener, windowOpened(WindowEvent)







  • ItemListener itemStateChanged(ItemEvent)

  • TextListener textValueChanged(TextEvent)

And more in swing
And more in Swing: changes.

  • AncestorListner

  • CaretListner, CellEditorListner

  • ChangeListner

  • HyperlinkListner

  • InternalFrameListner

  • ListDataListner

  • ListSelectionListner

  • MenuDragMouseListner, MenuKeyListner,,MenuListner

  • PopupMenuListner

  • TreeExpansionListner, TreeSelectionListner, TreeWillExpandListner

  • java.bean.propertyChangeListner, vetoableChangeListner

JavaBeans changes.

  • Component programming model

  • True power in visual programming

  • Must be able to instantiate, query and configure objects at design time

  • Java 1.1 reflection provides method and field information on a live object

    • Methods, arguments, return values

  • Beans specifies a naming convention

    • Identifies design-time fields, event handlers

What is a bean
What is a Bean? changes.

  • Just a class (thus easy to learn & use)

  • Supports three concepts:

    • Properties

    • Events

    • Methods

  • Follows naming convention to identify these

    • Java call this convention a “design pattern”

Properties methods events
Properties, Methods, Events changes.

  • For a property named xxxx of type T, create two methods:

    • pubic T getXxxx( ) // capitalize the first char

    • public void setXxxx(T ).

    • (First letter automatically capitalized).

    • boolean property: may also use “is” instead of “get.”

    • boolean isXxxx()

    • Ordinary methods are public

  • Events use the same “Listeners,” with add- and remove- methods like before

  • You can create your own event types

A simple bean
A Simple Bean changes.

class Spots {}

public class Frog {

private int jumps;

private Color color;

private Spots spots;

private boolean jmpr;

public int getJumps() { return jumps; }

public void setJumps(int js) { jumps = js; }

public Color getColor() { return color; }

public void setColor(Color c) { color = c; }

public Spots getSpots() { return spots; }

public void setSpots(Spots newSpots) { spots = newSpots; }

Lecture 9 java gui

public boolean isJumper() { return jmpr; } changes.

public void setJumper(boolean j) { jmpr = j; }

public void addActionListener(ActionListener l) { //...


public void removeActionListener(ActionListener l) { // ...


public void addKeyListener(KeyListener l) { // ...


public void removeKeyListener(KeyListener l) { // ...


// An "ordinary" public method:

public void croak() { System.out.println("Ribbet!"); }


Introspection changes.

  • Introspector automatically analyzes a Bean for properties, events & methods

Summary changes.

  • “Listener” event model and Beans are a big step forward

  • Swing is the best UI library I’ve seen

  • All Swing components are JavaBeans

  • Numerous application builders use Beans

  • Beans enable RAD environments

  • Beans support more sophistication than shown here

Summary changes.

  • Java GUI has gone through a lot of design changes

  • Enough of an intro to get you started

  • Use a GUI builder for serious development

  • Other references:

    • “Core Java 2” by Horstmann & Cornell, Prentice-Hall

    • Online help

Problem 4
Problem 4 changes.

  • Create an JFrame with a text field and 3 buttons. When you press each button, make some different text appear in the text field.

  • Add a check box to your JFrame,capture the event and insert different text into the text field.

  • Add a set of radio buttons which change the text in the text field.

  • Add a menu that changes the text field when any of its menu item is selected.

More java topics
More Java topics … changes.

  • Not detailed:

    • JDBC, RMI, JavaBeans

    • advanced Swing :Jtree, JTable, JText,…

  • Not covered:

    • Java Security model

    • Internationalization ( i18n, l10n )

    • Native Methods,

    • Java 2D, Java 3D, Java mulitmedia framework (JMF)

    • XML, JavaMail

  • J2EE:

    • JDBC, RMI, Servlet and JavaServer page, java IDL (Corba), Java Transaction service (JTS), RMI over IIOP, Java Message Queue(JMQ), JNDI, Enterprise JavaBeans

  • J2ME:

    • KVM, Configuration: CLDP,

    • profile: MIDP

Lecture 9 java gui
J2ME changes.

  • Java 2 platform targeted at consumer electronics and embedded devices.

  • consists of

    • a virtual machine ( KVM, thirdParty: Colored KVM, J9 ) and

    • a set of APIs suitable for providing tailored runtime environments for consumer and embedded electronics.

  • two primary kinds of components

    • Configurations: low-level APIs and optimized virtual machines targeted at two broad categories of devices:

    • 180K ~512K(CLDC: Connection limited device configuration), and 512K+

    • profile: a specification that details the JavaTM technology APIs, built on top of and utilizing the underlying Configuration, necessary to provide a complete runtime environment for a specific kind of device.

    • Known profiles: MIDP (Mobile Information Device profile)