GUI BasicsGUI Basics

Agenda

• What GUI• How to make in java• Creating frames• Frequently used GUI components• Layout Managers

What GUI

• A graphical user interface (GUI) is a type of user interface item that allows people to interact with programs in more ways than typing.

• A GUI (pronounced “GOO-ee”).

What is GUI?

5-4

What is GUI?

5-5

How to make in java

• To make GUI in java we use AWT or Swing

How to make in java

5-7

GUI Class Hierarchy (Swing)

5-8

Some basic GUI components

5-9

1. Create itInstantiate object: b = new JButton(“Press me”);

2. Configure itb.setText(“press me”);

3. Add itpanel.add(b);

4. Listen to itEvents: Listeners

Press me

Using a GUI Component

5-10

Creating frames

• Frame is a window that is not contained inside another window.

• Frame is the basis to contain other user interface components in Java GUI applications.

• The Frame class can be used to create windows.

• For Swing GUI programs, use JFrame class to create widows.

Frames

5-12

import javax.swing.*;public class MyFrame { public static void main(String[] args) { JFrame frame = new JFrame("Test Frame"); frame.setSize(400, 300); frame.setVisible(true); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); }

}

import javax.swing.*; public class MyFrame extends JFrame { public MyFrame() { setSize(400, 300); setVisible(true); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { MyFrame frame = new MyFrame(); } }

Or:

Creating Frames

5-13

• By default, a frame is displayed in the upper-left corner of the screen.

• To display a frame at a specified location, you can use the setLocation(x, y) method in the JFrame class.

• This method places the upper-left corner of a frame at location (x, y).

• setLocationRelativeTo(null);

Centering Frames

5-14

Centering Frames, cont.

5-15

// Add a button into the frameframe.add( new JButton("OK"));

Adding Components to Frame

// Create a button with text OK JButton jbtOK = new JButton("OK");  // Create a label with text "Enter your name: "JLabel jlblName = new JLabel("Enter your name: ");

// Create a text field with text "Type Name Here"JTextField jtfName = new JTextField("Type Name Here");

5-16

Adding Components to Frame

// Create a check box with text boldJCheckBox jchkBold = new JCheckBox("Bold");  // Create a radio button with text redJRadioButton jrbRed = new JRadioButton("Red");  // Create a combo box with choices red, green, and blueJComboBox jcboColor = new JComboBox(new String[]{"Red", "Green", "Blue"});  

5-17

Frequently used GUI components

java.awt.Container

+add(comp: Component): Component

+add(comp: Component, index: int): Component

+remove(comp: Component): void

+getLayout(): LayoutManager

+setLayout(l: LayoutManager): void

+paintComponents(g: Graphics): void

Appends a component to the container.

Adds a component to the container with the specified index.

Removes the component from the container.

Returns the layout manager for this container.

Sets the layout manager for this container.

Paints each of the components in this container.

java.awt.Component

+getFont(): java.awt.Font

+setFont(f: java.awt.Font): void

+getBackground(): java.awt.Color

+setBackground(c: Color): void

+getForeground(): java.awt.Color

+setForeground(c: Color): void

+getWidth(): int

+getHeight(): int

+getPreferredSize(): Dimension

+setPreferredSize(d: Dimension) : void

+isVisible(): boolean

+setVisible(b: boolean): void

Returns the font of this component.

Sets the font of this component.

Returns the background color of this component.

Sets the background color of this component.

Returns the foreground color of this component.

Sets the foreground color of this component.

Returns the width of this component.

Returns the height of this component.

Returns the preferred size of this component.

Sets the preferred size of this component.

Indicates whether this component is visible.

Shows or hides this component.

javax.swing.JComponent

+getToolTipText(): String

+setToolTipText(test: String): void

+getBorder(): javax.swing.border.Border

+setBorder(border: Border): void

Returns the tool tip text for this component. Tool tip text is displayed when the mouse points on the component without clicking.

Sets a new tool tip text for this component.

Returns the border for this component.

Sets a new border for this component.

5-19

• A button is a component that triggers an action event when clicked.

• Swing provides regular buttons, toggle buttons, check box buttons, and radio buttons.

• The common features of these buttons are represented in: – javax.swing.AbstractButton.

Buttons

5-20

javax.swing.AbstractButton

+getActionCommand(): String

+setActionCommand(s: String): void

+getText(): String

+setText(text: String): void

+getIcon(): javax.swing.Icon

+setIcon(icon: Icon): void

+getPressedIcon(): javax.swing.Icon

+setPressedIcon(pressedIcon: Icon): void

+getRolloverIcon(): javax.swing.Icon

+setRolloverIcon(pressedIcon: Icon): void

+getMnemonic(): int

+setMnemonic(mnemonic: int): void

+getHorizontalAlignment(): int

+setHorizontalAlignment(alignment: int): void

+getHorizontalTextPosition(): int

+setHorizontalTextPosition(position: int): void

+getVerticalAlignment(): int

+setVerticalAlignment(vAlignment: int): void

+getVerticalTextPosition(): int

+setVerticalTextPosition(position: int) : void

+isBorderPainted(): Boolean

+setBorderPainted(b: boolean): void

+getIconTextGap(): int

+setIconTextGap(iconTextGap: int): void

+isSelected(): Boolean

+setSelected(b: boolean): void

Returns the action command of this button.

Sets a new action command for this button.

Returns the button’s text (i.e., the text label on the button).

Sets the button’s text.

Returns the button’s default icon.

Sets the button's default icon. This icon is also used as the "pressed" and "disabled" icon if there is no explicitly set pressed icon.

Returns the pressed icon (displayed when the button is pressed).

Sets a pressed icon for the button.

Returns the rollover icon (displayed when the mouse is over the button).

Sets a rollover icon for the button.

Returns the mnemonic key value of this button. You can select the button by pressing the ALT key and the mnemonic key at the same time.

Sets a mnemonic key value of this button.

Returns the horizontal alignment of the icon and text on the button.

Sets the horizontal alignment of the icon and text. (default: CENTER)

Returns the horizontal text position relative to the icon on the button.

Sets the horizontal text position of the text relative to the icon. (default: RIGHT)

Returns the vertical alignment of the icon and text on the button.

Sets the vertical alignment of the icon and text. (default: CENTER).

Returns the vertical text position relative to the icon on the button.

Sets the vertical text position of the text relative to the icon. (default: CENTER)

Indicates whether the border of the button is painted.

Draws or hides the border of the button. By default, a regular button’s border is painted, but the border for a check box and a radio button is not painted.

Returns the gap between the text and the icon on the button. (JDK 1.4)

Sets a gap between the text and the icon on the button. (JDK 1.4)

Returns the state of the button. True if the check box or radio button is selected, false if it's not.

Sets the state for the check box or radio button.

javax.swing.JComponent

5-21

JButton inherits AbstractButton and provides several constructors to create buttons.

JButton

5-22

• text• Icon• mnemonic• horizontalAlignment• verticalAlignment• horizontalTextPosition• verticalTextPosition• iconTextGap

JButton Properties

5-23

An icon is a fixed-size picture; typically it is small and used to decorate components.

To create an image, use its concrete class javax.swing.ImageIcon

For example:ImageIcon icon = new ImageIcon("photo.gif");

Icons

5-24

Layout Managers

• The UI components are placed in containers. Each container has a layout manager to arrange the UI components within the container.

• Layout managers are set in containers using the setLayout(LayoutManager) method in a container.

Layout Managers

5-26

• FlowLayout • GridLayout • BorderLayout

Kinds of Layout Managers

5-27

The components are arranged in the container from left to right in the order in which they were added. When one row becomes filled, a new row is started.

FlowLayout

5-28

• public FlowLayout(int align, int hGap, int vGap)Constructs a new FlowLayout with a specified alignment, horizontal gap, and vertical gap. The gaps are the distances in pixel between components.

• public FlowLayout(int alignment)Constructs a new FlowLayout with a specified alignment and a default gap of five pixels for both horizontal and vertical.

• public FlowLayout()Constructs a new FlowLayout with a default center alignment and a default gap of five pixels for both horizontal and vertical.

FlowLayout Constructors

5-29

Write a program that adds three labels and text fields into the content pane of a frame with a FlowLayout manager.

FlowLayout Exercise

5-30

Questions

Thanks