CBOP3203

Graphical User Interface (GUI) components inJava Applets.

With Abstract Window Toolkit (AWT) we canbuild an applet that has the basic GUIcomponents like button, text input, scroll barand others.

Swing class library have many advantages and choices in terms of different types of GUI components, characteristic and running in different computer environment.

Provides graphical user interface (GUI)components that are used in all Java applets andapplications

Contains classes that can be extended and theirproperties inherited; classes can also be abstract

Ensures that every GUI component that isdisplayed on the screen is a subclass of theabstract class Component or MenuComponent

Has Container, which is an abstract subclass ofComponent and includes two subclasses:◦ Panel

◦ Window

Part of the AWT Class Hierarchy

Object

Component

ButtonTextComponent

Checkbox ChoiceContainer

Label

TextArea TextField

ScrollBarCanvas

Panel ScrollPaneWindow

Dialog Frame

Applet

List

Add components with the add() method.

The two main types of containers are Windowand Panel.

A Window is a free floating window on the display.

A Panel is a container of GUI components that must exist in the context of some other container, such as window or applet.

The position and size of a component in acontainer is determined by a layout manager.

You can control the size or position ofcomponents by disabling the layout manager.

You must then use setLocation(), setSize(), orsetBounds() on components to locate them inthe container.

import javax.swing.*;

import java.awt.*;

public class AppletSwing extends JApplet {

public void init() {

Container conpane=getContentPane();

conpane.setBackground(Color.blue);

conpane.setLayout(new FlowLayout());

}

}Provides work space for JAppletComponents

are placed ina container

Control components are very important forthe communication between the user and themachine. There are many control componentsin Java that offer different types of services.

JButtonJCheckBox JComboBox

JList

JMenu

JRadioButton

JSlider JSpinner

JTextField

JPasswordField

JColorChooser

JEditorPane and JTextPane

JFileChooser

JTree

JTable

JTextArea

JLabel

JProgressBar

JSeparator

JToolTip

A button in Swing library is known as JButtonas in javax.swing.JButton

Normally a button is used as a control component to:◦ Start an action.

◦ Change a form or character.

◦ Display a menu.

◦ Display another window.

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

public class TestButton extends JApplet {private JButton btnYes, btnNo;public void init(){Container conpane=getContentPane();conpane.setLayout(new FlowLayout());btnYes=new JButton("Yes");conpane.add(btnYes);btnNo=new JButton("No");conpane.add(btnNo);}

}

Using FlowLayout

Declare the button

Creating and

Labeling

Adding button to the container

If we want the program to receive input fromthe user, we need to use the text fieldcomponent. In Swing, the component used toreceive the input from the user is calledJTextField.

import javax.swing.*;

import java.awt.*;

public class TestTextField extends JApplet {

public void init(){

Container conpane=getContentPane();

conpane.setLayout(new FlowLayout());

JTextField txtName=new JTextField(20);

conpane.add(txtName);

}

}

Like JTextField, JPasswordField are single-lineareas in which text entered by the user fromkeyboard will be displayed. A JPasswordFieldwill hide the data that is been enteredassuming the data entered is secret is onlyknown to the user.

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

public class TestPasswordField extends JApplet {public void init(){Container conpane=getContentPane();conpane.setLayout(new FlowLayout());

JPasswordField pwd =new JPasswordField();pwd.setEchoChar('*');conpane.add(pwd);}

}

If we want to label the container, we mustbuild an object JLabel. Generally the objectJTextField and JLabel are created together.

The following lines will add a label to thecontainer “conpane”.

JLabel lblName=new JLabel(“Name:”);

conpane.add(lblName);

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

public class TestTextLabel extends JApplet {private JLabel lblName;private JTextField txtName;

public void init(){Container conpane=getContentPane();conpane.setLayout(new FlowLayout());

txtName=new JTextField(20);conpane.add(lblName);

lblName=new JLabel("Name:");conpane.add(txtName);}

}

We have discussed earlier the use of text fieldto input data but this is not suitable if wewant the user to choose from a list ofchoices. Swing has a component that is moresuitable for this type of job that is theJRadioButton. If the user wants to choose onlyone from a list of choices, JRadioButtoncomponent can be used.

import javax.swing.*;import java.awt.*;public class ChooseTVChannels extends JApplet {

private JCheckBox tv1,tv2,tv3, ntv7;public void init(){Container conpane = getContentPane();conpane.setLayout(new FlowLayout());tv1 = new JCheckBox("TV1", false);conpane.add(tv1);tv2 = new JCheckBox("TV2", true);conpane.add(tv2);tv3 = new JCheckBox("TV3", false);conpane.add(tv3);ntv7 = new JCheckBox("NTV7", true);conpane.add(ntv7);}

}

User can chose more than one favorite channels

import javax.swing.*;import java.awt.*;public class RadioButtonExample extends JApplet {

private JRadioButton tv1,tv2,tv3,ntv7;private ButtonGroup tv;public void init( ){Container conpane = getContentPane( );conpane.setLayout(new FlowLayout());tv = new ButtonGroup( );tv1 = new JRadioButton("TV1",false);tv.add(tv1);conpane.add(tv1);tv2 = new JRadioButton ("TV2",false);tv.add(tv2);conpane.add(tv2);tv3 = new JRadioButton ("TV3",false);tv.add(tv3);conpane.add(tv3);ntv7 = new JRadioButton ("NTV7",true);tv.add(ntv7);conpane.add(ntv7);}

}

user is allowed to choose only one from the list at one time

Creating a logical identifier for JRadioButton group

Adding radio button to the logical group tv

If we have many choices to choose from(maybe more than 5), radio buttoncomponent is not a good choice. It would bebetter to use a list or what is known in Swingas JList.

import javax.swing.*;import java.awt.*;public class myList extends JApplet {

private JList TVList;private String[] item={"TV1","TV2","TV3","NTV7"};public void init( ){Container conpane = getContentPane();conpane.setLayout(new FlowLayout());TVList = new JList(item);TVList.setVisibleRowCount(3);TVList.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);JScrollPane scrollPane = new JScrollPane(TVList);conpane.add(scrollPane);}

}

Creating a list object with a array data (above) as the parameter

Combo box is a component like the list component (JList) where the user has a multiple choices to make at one time. Combo box component in Swing is known as JComboBox. JComboBox is different from JListbecause it hides the list. When combo box is displayed the user needs to click the arrow displayed before the user can see the list. Then the user can choose one item from the list.

import javax.swing.*;import java.awt.*;public class comboBox extends JApplet {

private JComboBox cmbTV;private String [] item={"TV1","TV2","TV3","NTV7"};public void init( ){Container conpane= getContentPane();conpane.setLayout(new FlowLayout());cmbTV = new JComboBox(item);conpane.add(cmbTV);}

}

In Swing, Panel is known as JPanel. Panel is acontainer-like content pane where you can placeand arrange any Swing components in aparticular window.

Panel will act as a sub-container.

Component arrangement is done by dividing the window space into groups of components. For example, we can build a Panel for the button and others for the list or combo box.

Provide a space for components.

Allow subpanels to have their own layout manager.

import javax.swing.*;import java.awt.*;public class TestPanel extends JApplet {

public void init( ){Container conpane= getContentPane();conpane.setLayout(new FlowLayout());JPanel panel=new JPanel(); //creating the JPanel Object JButton btnYes = new JButton("Yes");JButton btnNo = new JButton("No");

panel.add(btnYes); //adding object JButton “Yes” to the Panel

panel.add(btnNo); //adding object JButton “No” to the Panel

conpane.add(panel); //adding object JPanel to the main container }

}

In Swing, text area is known as JTextArea.The function is the same as JTextField. Thedifference is in the usage, where the height ismore than a line. When a user places theJTextArea to a program, the user must statethe number of line used.

import javax.swing.*;import java.awt.*;public class TextArea extends JApplet {

private JTextArea teks;public void init( ){Container conpane = getContentPane();conpane.setLayout(new FlowLayout());JPanel panel = new JPanel();teks = new JTextArea(10,10);JScrollPane skrol = new JScrollPane(teks,JScrollPane.VERTICAL_SCROLLBAR_ALWAYS,JScrollPane.HORIZONTAL_SCROLLBAR_ALWAYS);teks.setLineWrap(true);panel.add(skrol);conpane.add(panel);}

}

Slider in Swing component is known asJSlider. Two very common usages for sliderare:1. Using slider as a control, when the bar is moved,

it represents a value.

2. A replacement to the text field when themaximum and minimum input range is known.

import javax.swing.*;import java.awt.*;public class mySlider extends JApplet {

public void init( ){Container conpane = getContentPane( );conpane.setLayout(new FlowLayout( ));JSlider skrol = new JSlider(JSlider.HORIZONTAL,0, 100,50);skrol.setMajorTickSpacing(50);skrol.setMinorTickSpacing(5);skrol.setPaintTicks(true);skrol.setPaintLabels(true);conpane.add(skrol);}

}

orientation and the specified minimum, maximum, and initialvalues

The number of values between the major tick marks -- the larger marks that break up the minor tick marks.

The number of values between the minor tick marks -- the smaller marks that occur between the major tick marks.

Layout manager is used to arrange the GUIcomponents in the container.

Each container (such as Panel or Frame) has adefault layout manager associated with it,which you can change by calling setLayout.

Layout manager is responsible for decidingthe layout policy and size of each of itscontainer’s child components.

The layout manager is in java.awt package. There are eight-layout managers. Some of them are:

FlowLayout:◦ This is the easiest layout manager. The

components are arranged horizontally until thereis no more space, then a new line is added for thenext component.

BorderLayout◦ Divides the container into five areas that is north,

south, east, west and center.

GridBagLayout◦ GridBagLayout is a sophisticated, flexible layout

manager. It aligns components by placing themwithin a grid of cells, allowing components to spanmore than one cell. The rows in the grid can havedifferent heights, and grid columns can havedifferent widths.

GridLayout◦ Arranges all the components into rows and

columns.

◦ It aligns components by placing them within a gridof cells, allowing components to span more thanone cell. The rows in the grid can have differentheights, and grid columns can have differentwidths.

CardLayout◦ This layout is also known as tabbed. Each

component is piled on top so that only onecomponent is displayed at one time.

◦ The CardLayout class lets you implement an areathat contains different components at differenttimes.

BoxLayout◦ The BoxLayout class puts components in a single

row or column. It respects the components'requested maximum sizes and also lets you aligncomponents.

Null◦ Places the components into the container without

a layout manager. We use the NULL layoutmanager when placing the component on theapplet physical location. This is notrecommended for application where the windowalways changes.

import javax.swing.*;import java.awt.*;public class BorderLayout extends JApplet {

private JButton north,south,east,west,center;public void init( ){Container conpane = getContentPane( );//conpane.setLayout(new BorderLayout( ));north = new JButton("North");south = new JButton("South");east = new JButton("East");west = new JButton("West");center = new JButton("Center");conpane.add("North",north);conpane.add("South",south);conpane.add("East",east);conpane.add("West",west);conpane.add("Center",center);}

}

import java.awt.*;import javax.swing.*;public class Calculator extends JApplet {

private JButton b0, b1, b2, b3, b4;private JButton b5, b6, b7, b8, b9;private JButton b10, b11, b12, b13, b14, b15;

public void init( ) {Container conpane = getContentPane( );conpane.setBackground(Color.white);JPanel panel = new JPanel( );panel.setLayout(new GridLayout(4,4));b7 = new JButton("7"); panel.add(b7);b8 = new JButton("8"); panel.add(b8);b9 = new JButton("9"); panel.add(b9);b10 = new JButton("/"); panel.add(b10);b4 = new JButton("4"); panel.add(b4);b5 = new JButton("5"); panel.add(b5);b6 = new JButton("6"); panel.add(b6);b11 = new JButton("*"); panel.add(b11);b1 = new JButton("1"); panel.add(b1);b2 = new JButton("2"); panel.add(b2);b3 = new JButton("3"); panel.add(b3);b12 = new JButton("-"); panel.add(b12);b0 = new JButton("0"); panel.add(b0);b13 = new JButton("."); panel.add(b13);b14 = new JButton("+"); panel.add(b14);b15 = new JButton("="); panel.add(b15);conpane.add("Center",panel);}

}

Q1. Create an applet that can display thefollowing component. No event handling isneeded for the components.

name

address

e-mail

Q2. Create an applet that can display thefollowing component. No event handling isneeded for the components.

Q3. Create an applet that can display thefollowing component. No event handling isneeded for the components.

Q4. Create an applet with the following GUI. You do not have to provide any functionality.

Q5. Create an applet with the following GUI. You do not have to provide any functionality.