Computer Science [3] Computer Science [3] Java Programming II - Java Programming II - Laboratory Laboratory

Course Course Lab 4 -1 :Lab 4 -1 :

Introduction to Graphical user interface Introduction to Graphical user interface GUI Components GUI Components

Faculty of Engineering & ITSoftware Engineering Department

WWW.PALINFONET.COM

Eng.Omar Al-Nahal

Introduction to Graphical user Introduction to Graphical user interface (GUI) interface (GUI) ReviewReview

Simple GUI-Based Input/Output with JOptionPane - ReviewSimple GUI-Based Input/Output with JOptionPane - Review

Simple GUI-Based Input/Output with JOptionPaneSimple GUI-Based Input/Output with JOptionPane - - ReviewReview

OutputOutput

JOptionPane Message Dialog Constants

4

GUI ElementsGUI Elements The key elements of a Java graphical user interface areThe key elements of a Java graphical user interface are::

• GUI componentsGUI components• layout managerslayout managers• event processingevent processing

GUI componentsGUI components, such as text fields and buttons, are the , such as text fields and buttons, are the screen elements that a user manipulates with the mouse screen elements that a user manipulates with the mouse and keyboardand keyboard

Layout managersLayout managers govern how the components appear on the govern how the components appear on the screen.screen.

EventsEvents signal important user actions. signal important user actions.

5

ContainersContainers A A containercontainer is a special category of GUI components that group is a special category of GUI components that group

other components.other components.

All containers are components, but not all components are All containers are components, but not all components are containers.containers.

An applet is a container.An applet is a container.

Therefore,buttons, text fields, and other Component can be Therefore,buttons, text fields, and other Component can be added to an applet to be displayed.added to an applet to be displayed.

Each container has an associated layout manager to control the Each container has an associated layout manager to control the way components in it are displayed.way components in it are displayed.

6

ContainersContainers Some containers must be attached to another graphical Some containers must be attached to another graphical

surfacesurface::• PanelPanel• AppletApplet

Other containers can be moved independentlyOther containers can be moved independently::• WindowWindow• FrameFrame• DialogDialog

7

ContainersContainers

Component

Container

WindowPanel

DialogFrameApplet

Some basic GUI components. Some basic GUI components. Swing Swing OverviewOverview

Classes from package Classes from package javax.swingjavax.swing defines various GUI components defines various GUI components objects with which the user interacts via the mouse, the keyboard or objects with which the user interacts via the mouse, the keyboard or another form of inputanother form of input..

Component

Object

Container

Window

Frame

JFrame JComponent

JPanel

JLabel JMenuBar

AbstractButton

JButtonJMenu

JMenuItem

JTextFieldJTextArea

JTextComponent

Hierarchy ofHierarchy ofSwing Swing ClassesClassesAWT

Swing

Class

Abstract Class

Layout manager classes are in the AWT.

Swing OverviewSwing Overview

Common superclasses of many of the Swing componentsCommon superclasses of many of the Swing components

ComponentComponent class class• Operations common to most GUI components are found in Operations common to most GUI components are found in ComponentComponent class. class.

ContainerContainer class class

• Two important methods originates in this classTwo important methods originates in this class– add add — adds components to a — adds components to a containercontainer..– setLayoutsetLayout — enables a program to specify the layout — enables a program to specify the layout

manager that helps a manager that helps a ContainerContainer position and size its position and size its components.components.

java.lang.Object

java.awt.Container

Javax.swing,JComponent

java.awt.Component

JLabelJLabelAA label label is a display area for a short text, an image.is a display area for a short text, an image.

javax.swing.JLabel -text: String -icon: javax.swing.Icon -horizontalAlignment: int -horizontalTextPosition: int -verticalAlignment: int -verticalTextPosition: int -iconTextGap: int

+JLabel() +JLabel(icon: javax.swing.Icon) +JLabel(icon: Icon, hAlignment: int) +JLabel(text: String) +JLabel(text: String, icon: Icon,

hAlignment: int) +JLabel(text: String, hAlignment: int)

The label’s text. The label’s image icon. The horizontal alignment of the text and icon on the label. The horizontal text position relative to the icon on the label. The vertical alignment of the text and icon on the label. The vertical text position relative to the icon on the label. The gap between the text and the icon on the label (JDK 1.4).

Creates a default label with no text and icon. Creates a label with an icon. Creates a label with an icon and the specified horizontal alignment. Creates a label with text. Creates a label with text, an icon, and the specified horizontal alignment.

Creates a label with text and the specified horizontal alignment.

javax.swing.JComponent

The get and set methods for these data fields are provided in the class, but omitted in the UML diagram for brevity.

JLabel ConstructorsJLabel Constructors

The constructors for labels are as follows:The constructors for labels are as follows:

JLabel()JLabel()

JLabel(String text, int horizontalAlignment)JLabel(String text, int horizontalAlignment)

JLabel(String text)JLabel(String text)

JLabel(Icon icon)JLabel(Icon icon)

JLabel(Icon icon, int horizontalAlignment)JLabel(Icon icon, int horizontalAlignment)

JLabel(String text, Icon icon, int horizontalAlignmentJLabel(String text, Icon icon, int horizontalAlignment))

See Label.java

JTextFields , JPasswordFields & Text Text AreasAreas.

A A text fieldtext field is an input area where the user can type in characters. Text fields are is an input area where the user can type in characters. Text fields are useful in that they enable the user to enter in variable data .useful in that they enable the user to enter in variable data .

javax.swing.JTextField -columns: int -horizontalAlignment: int

+JTextField() +JTextField(column: int) +JTextField(text: String) +JTextField(text: String, columns: int)

The number of columns in this text field. The horizontal alignment of this text field (default: LEFT). Creates a default empty text field with number of columns set to 0. Creates an empty text field with specified number of columns. Creates a text field initialized with the specified text. Creates a text field initialized with the specified text and columns.

javax.swing.text.JTextComponent -text: String -editable: boolean

The text contained in this text component. Indicates whether this text component is editable (default: true).

The get and set methods for these data fields are provided in the class, but omitted in the UML diagram for brevity.

A text area is similar, but displays multiple lines of textThey are defined by the TextField and TextArea classesA text area automatically has scrollbars on its bottom .

JTextFieldJTextField Constructors Constructors

JTextField(int columns)Creates an empty text field with the specified number of columns.

JTextField(String text)Creates a text field initialized with the specified text.

JTextField(String text, int columns)Creates a text field initialized with the specified text and the column size.

JTextField Methods

getText()Returns the string from the text field.

setText(String text)

Puts the given string in the text field.

setEditable(boolean editable)Enables or disables the text field to be edited. By default,

editable is true.

setColumns(int)Sets the number of columns in this text field.

See Area.java

See JTextField.java See TestJText.java

See TestArea.java

Buttons

JButton inherits AbstractButton and provides several constructors to create buttons.

javax.swing.JButton +JButton() +JButton(icon: javax.swing.Icon) +JButton(text: String) +JButton(text: String, icon: Icon)

Creates a default button with no text and icon. Creates a button with an icon. Creates a button with text. Creates a button with text and an icon.

javax.swing.AbstractButton

JButton ConstructorsThe following are JButton constructors:JButton()JButton(String text)JButton(String text, Icon icon)JButton(Icon icon)

See JButton.java

JCheckBox

JCheckBox inherits all the properties such as text, icon, mnemonic, verticalAlignment, horizontalAlignment, horizontalTextPosition, verticalTextPosition, and selected from AbstractButton, and provides several constructors to create check boxes.

javax.swing.JCheckBox +JCheckBox() +JCheckBox(text: String) +JCheckBox(text: String, selected:

boolean) +JCheckBox(icon: Icon) +JCheckBox(text: String, icon: Icon) +JCheckBox(text: String, icon: Icon,

selected: boolean)

Creates a default check box button with no text and icon. Creates a check box with text. Creates a check box with text and specifies whether the check box is

initially selected. Creates a checkbox with an icon. Creates a checkbox with text and an icon. Creates a check box with text and an icon, and specifies whether the check

box is initially selected.

javax.swing.AbstractButton

javax.swing.JToggleButton

See CheckBox.java

JRadioButton

Radio buttons are variations of check boxes. They are Radio buttons are variations of check boxes. They are often used in the group, where only one button is checked often used in the group, where only one button is checked at a time.at a time.

javax.swing.JRadioButton +JRadioButton() +JRadioButton(text: String) +JRadioButton(text: String, selected:

boolean) +JRadioButton(icon: Icon) +JRadioButton(text: String, icon: Icon) +JRadioButton(text: String, icon: Icon,

selected: boolean)

Creates a default radio button with no text and icon. Creates a radio button with text. Creates a radio button with text and specifies whether the radio button is

initially selected. Creates a radio button with an icon. Creates a radio button with text and an icon. Creates a radio button with text and an icon, and specifies whether the radio

button is initially selected.

javax.swing.AbstractButton

javax.swing.JToggleButton

See JRadio.java

JComboBox

A combo box is a simple list of items from which the user can choose. It performs basically the same function as a list, but can get only one value.

javax.swing.JComboBox +JComboBox() +JComboBox(items: Object[]) +addItem(item: Object): void +getItemAt(index: int): Object +getItemCount(): int +getSelectedIndex(): int +setSelectedIndex(index: int): void +getSelectedItem(): Object +setSelectedItem(item: Object): void +removeItem(anObject: Object): void +removeItemAt(anIndex: int): void +removeAllItems(): void

Creates a default empty combo box. Creates a combo box that contains the elements in the specified array. Adds an item to the combo box. Returns the item at the specified index. Returns the number of items in the combo box. Returns the index of the selected item. Sets the selected index in the combo box. Returns the selected item. Sets the selected item in the combo box. Removes an item from the item list. Removes the item at the specified index in the combo box. Removes all items in the combo box.

javax.swing.JComponent

JComboBox MethodsTo add an item to a JComboBox jcbo, usejcbo.addItem(Object item)To get an item from JComboBox jcbo, usejcbo.getItem() See ComBobox .java

MenusMenus Java provides several classes—JMenuBar, JMenu, JMenuItem, JCheckBoxMenuItem, and JRadioButtonMenuItem —to implement menus in a frame.

A JFrame or JApplet can hold a menu bar to which the pull-down menus are attached.

Menus consist of menu items that the user can select (or toggle on or off). Menu bars can be viewed as a structure to support menus.

Menu DemoMenu Demo

The The JMenuBarJMenuBar Class ClassA menu bar holds menus; the menu bar can only be added to a frame. Following is the code to create and add a JMenuBar to a frame:

TheThe Menu Menu ClassClassYou attach menus onto a JMenuBar. The following code creates two menus, Operation and Help, and adds them to the JMenuBar

See Menu.java

The The JMenuItemJMenuItem Class ClassYou add menu items on a menu.

JMenuBar menubar;JMenu menu1, menu2, submenu;JMenuItem task1, task2, task3, task4, task5,task6,task7;

The The Sub menusYou can add submenus into

menu items

submenu.add(task1= new JMenuItem("Addition"));submenu.add(task2= new JMenuItem("subtraction"));submenu.add(task6= new JMenuItem("Multiplication"));submenu.add(task7= new JMenuItem("Qutation"));