F5105

Interactive Java Programming

Chapter 2.1:-

Basic GUI Components

Outline
Objectives Introduction JLabel JTextFields and JPasswordField JButton JCheckBox and JRadioButton JComboBox JList Multiple-Selection Lists Event Handling Model

 Mouse Event Handling Mouse Event Adapter Classes Keyboard Event Handling FlowLayout Layout Manager BorderLayout Layout Manager GridLayout Layout Manager Panels

Objectives
To understand the design principles of graphical user interfaces To be able to build graphical user interfaces To understand the packages containing GUI components and event handling classes and interfaces To be able to create and manipulate buttons labels, lists, text fields and panels To understand mouse events and keyboard events To understand and be able to use layout managers.

Introduction
A GUI give program a distinctive look and feel Example in IE window with some of its GUI components menu bar (File, Edit, View, ..) buttons text field (user can type) label (to the left of text field)
Menu Button Label Text field Menu bar

 GUIs are build from GUI components:

Component Description
JLabel JtextField JButton JCheckBox JComboBox JList JPanel Uneditable text/icon area Area user inputs data from keyboard Area that triggers an event Area either selected / not selected Drop down list for selection A list where user can make selection Container where components can be placed

Swing Overview
Classes that are used to create GUI components are part of GUI components from package javax.swing The original GUI components from Abstract Windowing Toolkit package java.awt Fig 12.3 (below) show common superclasses of many Swing components
java.lang.Object java.awt.Component

java.awt.Container

javax.swing.JComponent Fig 12.3

JLabel
Labels: provide text instructions or information on a GUI. display a single line or read-only text Following are Label constructors and methods.
public class LabelTest extends JFrame { private JLabel label1, label2, label3; // JLabel constructor with a string argument label1 = new JLabel( "Label with text" ); label1.setToolTipText( "This is label1" ); c.add( label1 );

// JLabel constructor with string, Icon and alignment arguments Icon bug = new ImageIcon( "bug1.gif" ); label2 = new JLabel( "Label with text and icon", bug, SwingConstants.LEFT ); label2.setToolTipText( "This is label2" ); c.add( label2 );

javax.Swing support two image formats: GIF and JPEG/JPG

SwingConstants.CENTER, SwingConstants.BOTTOM

// JLabel constructor no arguments label3 = new JLabel(); label3.setText( "Label with icon and text at bottom" ); label3.setIcon( bug ); label3.setHorizontalTextPosition( SwingConstants.CENTER ); label3.setVerticalTextPosition( SwingConstants.BOTTOM ); label3.setToolTipText( "This is label3" ); c.add( label3 ); the statement indicate that the text will be centered horizontally and will appear at the bottom of the label. Thus icon will appear above the text

JTextFields & JPasswordField

JTextFields is single-line areas in which text can be entered by user from the keyboard JPasswordFields (package javax.swing) show that the character was typed as the user enters characters, but hides the characters (e.g., ***).

When user press Enter key in JTextField or JPasswordField the action event occurs
// Fig. 12.7: TextFieldTest.java import java.awt.*; import java.awt.event.*; import javax.swing.*;

TextFieldTest.java
public class TextFieldTest extends JFrame { private JTextField text1, text2, text3; private JPasswordField password; public TextFieldTest() { ... // construct textfield with default sizing text1 = new JTextField( 10 ); // 10 columns c.add( text1 ); // construct textfield with default text text2 = new JTextField( "Enter text here" ); // size as text c.add( text2 );

TextFieldTest.java
// construct textfield with default text and // 20 visible elements and no event handler text3 = new JTextField( "Uneditable text field", 20 ); text3.setEditable( false ); c.add( text3 ); // construct textfield with default text password = new JPasswordField( "Hidden text" ); c.add( password ); // TextFieldHandler is inner class for event handling TextFieldHandler handler = new TextFieldHandler(); text1.addActionListener( handler ); // as for text2 & text3 password.addActionListener( handler );

TextFieldTest.java
// inner class for event handling private class TextFieldHandler implements ActionListener { public void actionPerformed( ActionEvent e ) { String s = ""; if ( e.getSource() == text1 ) // as for text2, & text3 s = "text1: " + e.getActionCommand(); // from keyboard else if ( e.getSource() == password ) { JPasswordField pwd = (JPasswordField) e.getSource(); s = "password: " + new String( pwd.getPassword() ); } // else if JOptionPane.showMessageDialog( null, s ); } //actionPerformed } // TextFieldhandler

JButton
A Button is a component that the user click to trigger a specific action. Several types of buttons: command buttons, checkboxes, toggle (on/off) buttons and radio buttons A command button generates a button event when the user clicks the button with the mouse. Fig 12.10 ButtonTest.java program example of creating buttons

Example: ButtonTest.java
import java.awt.*; import java.awt.event.*; import javax.swing.*; public class ButtonTest extends JFrame { // declaration private JButton ButtonOK, ButtonCancel; // ButtonTest constructor public ButtonTest() { super( "Testing Buttons" ); Container c = getContentPane(); c.setLayout( new FlowLayout() );

ButtonTest.java
// create buttons ButtonOK = new JButton( "OK" ); c.add( ButtonOK ); // put button on container ButtonCancel = new JButton( "Cancel" ); c.add( ButtonCancel ); setSize( 275, 100 ); // size of window show();// show window on screen } // ButtonTest constructor public static void main( String args[] ) { ButtonTest app = new ButtonTest(); } // main } //ButtonTest class

JCheckbox and JRadioButton

The Swing GUI component contain 3 types of state button JToggleButton, JCheckBox and JRadioButton They have on/off or true/false values Class JCheckBox & JRadioButton are subclasses of JToggleButton

Example: CheckBoxTest.java
public class CheckBoxTest extends JFrame { private JTextField t; // declaration private JCheckBox bold, italic; public CheckBoxTest() { t = new JTextField( Lihat font berubah", 20 ); t.setFont( new Font( "TimesRoman", Font.PLAIN, 14 ) ); c.add( t ); // create checkbox objects & label Bold bold = new JCheckBox( "Bold" ); c.add( bold ); // add object to Container c italic = new JCheckBox( "Italic" ); c.add( italic ); / /CheckBoxTest constructor

CheckBoxTest.java
private class CheckBoxHandler implements ItemListener { private int valBold = Font.PLAIN; // declaration with default value private int valItalic = Font.PLAIN;

public void itemStateChanged( ItemEvent e ) { if ( e.getSource() == bold ) if ( e.getStateChange() == ItemEvent.SELECTED ) valBold = Font.BOLD; else valBold = Font.PLAIN;
if ( e.getSource() == italic ) if ( e.getStateChange() == ItemEvent.SELECTED ) valItalic = Font.ITALIC; else valItalic = Font.PLAIN;

CheckBoxTest.java
// set current font after ItemEvent.SELECTED t.setFont( new Font( "TimesRoman", valBold + valItalic, 14 ) ); t.repaint(); } // itemStateChanged } // CheckBoxHandler } //CheckBox class

JRadioButton : exercise.

JComboBox (Choice Buttons)

A combo box sometimes called a drop-down list provides a list of item from which the user can make selection. Combo box implemented using class JComboBox
// Fig 12.13 ComboBoxTest.java public class ComboBoxTest extends JFrame { private JComboBox images; // declaration private JLabel label; private String names[] = { a1.gif", a2.gif" }; private Icon icons[] = { new ImageIcon( names[ 0 ] ), new ImageIcon( names[ 1 ] ), };

icons[1] contain a2.gif

Example: ComboBoxTest.java
public ComboBoxTest() {//constructor // create JComboBox object using the Strings in array names images = new JComboBox( names ); images.setMaximumRowCount( 3 ); // no. of element displayed // inner class that implement ItemListener images.addItemListener( new ItemListener() { // listen to state chage public void itemStateChanged( ItemEvent e ) { // get image index and set label for icon label.setIcon( icons[ images.getSelectedIndex() ] ); } } ); c.add( images ); // add image to Container }

JList
A list display a series of items from which the user may select one or more items. List are created with class JList class JList support single-selection list and multiple-selection lists // Fig 12..14 ListTest.java public class ListTest extends JFrame { private JList colorList; // declaration private Container c; private String colorNames[] = { "Black", "Blue, ...}; private Color colors[] = { Color.black, Color.blue, ...};

Example: ListTest.java
public ListTest() { // constructor // create a list with the items in the colorNames array colorList = new JList( colorNames ); colorList.setVisibleRowCount( 4 ); // 4 items visible in list // do not allow multiple selections colorList.setSelectionMode( ListSelectionModel.SINGLE_SELECTION ); // add a JScrollPane containing the JList to the content pane c.add( new JScrollPane( colorList ) ); } // ListTest Constructor

Multiple-Selection Lists
A multiple-selection list enables the user to select many item from the JList by clicking once on each desired item. A SINGLE_INTERVAL_SELECTION Allow selection contiguous range of items clicking the first item, then holding Shift key while clicking the last item A MULTIPLE_INTERVAL_SELECTION Allow continuous item to be select by holding Ctrl key while clicking the item To de-select an item, hold the Ctrl key while clicking an item a second time (at first list)

Example: MultipleSelection.java
public class MultipleSelection extends JFrame { private JList colorList, copyList; private JButton copy; public MultipleSelection() { colorList = new JList( colorNames ); // instantiate colorList.setVisibleRowCount( 5 ); //no. of visible items colorList.setFixedCellHeight( 15 ); // height of pixel colorList.setSelectionMode( ListSelectionModel.MULTIPLE_INTERVAL_SELECTION ); c.add( new JScrollPane( colorList ) );

What is Interface?
In many ways, Interface is very similar to abstract class but it marks with

interface keyword instead of abstract class

keyword.

public interface InterfaceName { }

Unlike abstract class which can also contain nonabstract methods, interface contain ONLY abstract methods and constants.

28

How to define interface?

Defining an interface: <modifier> interface InterfaceName{ /* Constant declarations */ /* Method signatures */ } E.g: public interface Moveable{ final int MAX_MOVE = 20; final int MIN_MOVE = 1; public void move(); }

29

Differences between interface and abstract class (1) Like abstract class, 1. if a class implement an interface, you have to override the interfaces methods in the class. 2. You cannot create instances from an interface by using new operator.
3. Interface can be a type as well.
Runnable r;

4. the purpose of creating interface is because of polymorphism.

30

Differences between interface and abstract class (2)

Unlike abstract class, 1. You can have multiple interface in one class. To implement those interfaces, use implements keyword and separate interfaces by comma.
public class Test implements Runnable, ActionListener, MouseMotionListener { /* Overridden interfaces methods */ }

2. Interface uses interface keyword. 3. Interface is NOT designed to be superclass. Interface is designed to add some behaviors to a class.
31

Different between interface and abstract class (3)

4. In the relationships, we say that: 4.1. A relationship between class/abstract class and class is a strong relationship. It is known as IS-A relationship. E.g: A duck is a bird. It clearly means the duck is really a bird. So the bird can be a superclass of a duck. It could be either concrete or abstract class. 4.2. A relationship between class and interface is a weak relationship. It is known as Is-kind-of relationship. E.g: A duck is flyable. Flyable can never ever be the superclass of the duck. It just means this duck can fly. So flyable is interface.

32