Transcript GUI 1

GUI Basics
Agenda
•
•
•
•
•
What GUI
How to make in java
Creating frames
Frequently used GUI components
Layout Managers
What GUI
What is 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”).
5-4
What is GUI?
5-5
How to make in java
How to make in java
• To make GUI in java we use AWT or
Swing
5-7
GUI Class Hierarchy (Swing)
5-8
Some basic GUI components
5-9
Using a GUI Component
1. Create it
Instantiate object: b = new JButton(“Press me”);
2. Configure it
b.setText(“press me”);
3. Add it
Press me
panel.add(b);
4. Listen to it
Events: Listeners
5-10
Creating frames
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.
5-12
Creating Frames
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);
}
}
Or:
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();
}
}
5-13
Centering Frames
•
•
•
•
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);
5-14
Centering Frames, cont.
5-15
Adding Components to
Frame
// Add a button into the frame
frame.add( new JButton("OK"));
// 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 bold
JCheckBox jchkBold = new JCheckBox("Bold");
// Create a radio button with text red
JRadioButton jrbRed = new JRadioButton("Red");
// Create a combo box with choices red, green, and blue
JComboBox jcboColor = new JComboBox(new
String[]{"Red", "Green", "Blue"});
5-17
Frequently used GUI
components
java.awt.Component
+getFont(): java.awt.Font
Returns the font of this component.
+setFont(f: java.awt.Font): void
Sets the font of this component.
+getBackground(): java.awt.Color
Returns the background color of this component.
+setBackground(c: Color): void
Sets the background color of this component.
+getForeground(): java.awt.Color
Returns the foreground color of this component.
+setForeground(c: Color): void
Sets the foreground color of this component.
+getWidth(): int
Returns the width of this component.
+getHeight(): int
Returns the height of this component.
+getPreferredSize(): Dimension
Returns the preferred size of this component.
+setPreferredSize(d: Dimension) : void
Sets the preferred size of this component.
+isVisible(): boolean
Indicates whether this component is visible.
+setVisible(b: boolean): void
Shows or hides this component.
java.awt.Container
+add(comp: Component): Component
Appends a component to the container.
+add(comp: Component, index: int): Component Adds a component to the container with the specified index.
Removes the component from the container.
+remove(comp: Component): void
+getLayout(): LayoutManager
Returns the layout manager for this container.
+setLayout(l: LayoutManager): void
Sets the layout manager for this container.
+paintComponents(g: Graphics): void
Paints each of the components in this container.
javax.swing.JComponent
+getToolTipText(): String
Returns the tool tip text for this component. Tool tip text is displayed
when the mouse points on the component without clicking.
+setToolTipText(test: String): void
Sets a new tool tip text for this component.
+getBorder(): javax.swing.border.Border
Returns the border for this component.
+setBorder(border: Border): void
Sets a new border for this component.
5-19
Buttons
• 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.
5-20
javax.swing.JComponent
javax.swing.AbstractButton
+getActionCommand(): String
Returns the action command of this button.
+setActionCommand(s: String): void
Sets a new action command for this button.
+getText(): String
Returns the button’s text (i.e., the text label on the button).
+setText(text: String): void
Sets the button’s text.
+getIcon(): javax.swing.Icon
Returns the button’s default icon.
+setIcon(icon: Icon): void
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.
+getPressedIcon(): javax.swing.Icon
Returns the pressed icon (displayed when the button is pressed).
+setPressedIcon(pressedIcon: Icon): void Sets a pressed icon for the button.
+getRolloverIcon(): javax.swing.Icon
Returns the rollover icon (displayed when the mouse is over the button).
+setRolloverIcon(pressedIcon: Icon):
void
Sets a rollover icon for the button.
+getMnemonic(): int
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.
+setMnemonic(mnemonic: int): void
Sets a mnemonic key value of this button.
+getHorizontalAlignment(): int
Returns the horizontal alignment of the icon and text on the button.
+setHorizontalAlignment(alignment: int): Sets the horizontal alignment of the icon and text. (default: CENTER)
void
+getHorizontalTextPosition(): int
Returns the horizontal text position relative to the icon on the button.
+setHorizontalTextPosition(position: int): Sets the horizontal text position of the text relative to the icon. (default:
void
RIGHT)
+getVerticalAlignment(): int
Returns the vertical alignment of the icon and text on the button.
+setVerticalAlignment(vAlignment: int):
void
Sets the vertical alignment of the icon and text. (default: CENTER).
+getVerticalTextPosition(): int
Returns the vertical text position relative to the icon on the button.
+setVerticalTextPosition(position: int) :
void
Sets the vertical text position of the text relative to the icon. (default:
CENTER)
+isBorderPainted(): Boolean
Indicates whether the border of the button is painted.
+setBorderPainted(b: boolean): void
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.
+getIconTextGap(): int
Returns the gap between the text and the icon on the button. (JDK 1.4)
+setIconTextGap(iconTextGap: int): void Sets a gap between the text and the icon on the button. (JDK 1.4)
+isSelected(): Boolean
Returns the state of the button. True if the check box or radio button is
selected, false if it's not.
+setSelected(b: boolean): void
Sets the state for the check box or radio button.
5-21
JButton
JButton inherits AbstractButton and provides several
constructors to create buttons.
5-22
JButton Properties
•
•
•
•
•
•
•
•
text
Icon
mnemonic
horizontalAlignment
verticalAlignment
horizontalTextPosition
verticalTextPosition
iconTextGap
5-23
Icons
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");
5-24
Layout Managers
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.
5-26
Kinds of Layout Managers
• FlowLayout
• GridLayout
• BorderLayout
5-27
FlowLayout
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.
5-28
FlowLayout Constructors
• 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.
5-29
FlowLayout Exercise
Write a program that adds three labels and text
fields into the content pane of a frame with a
FlowLayout manager.
5-30
Questions
Thanks