ALPINE SKI HOUSE
GRAPHICAL USER INTERFACES
Use SWING components
ALPINE SKI HOUSE
CLO
1. apply knowledge and skills to create a user interfaces for an interactive java programming. (C3, P3, PLO1, PLO2)
2. design a program that integrates the database and web to build a java web based application. (C5, P3, PLO1, PLO2)
3. produce an interactive application program using appropriate Java programming environment. (P4, A3, PLO2, PLO4)
ALPINE SKI HOUSE
SWING
ALPINE SKI HOUSE
ALPINE SKI HOUSE
CREATING GUI OBJECTS
// 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");
// 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"});
Button
Label
Text field
Check Box
Radio Button
Combo Box
ALPINE SKI HOUSE
ALPINE SKI HOUSE
SWING VS. AWT
SWING | AWT |
|
|
|
|
|
|
|
|
ALPINE SKI HOUSE
ALPINE SKI HOUSE
SWING
7
GUI Class Hierarchy
ALPINE SKI HOUSE
SWING
Container Classes
8
Container classes can contain other GUI components.
ALPINE SKI HOUSE
SWING
GUI Helper Classes
9
The helper classes are not subclasses of Component. They are used to describe the properties of GUI components such as graphics context, colors, fonts, and dimension.
ALPINE SKI HOUSE
SWING
GUI Components
10
ALPINE SKI HOUSE
SWING
JFrames
11
ALPINE SKI HOUSE
SWING
Creating JFrames
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);
}
}
ALPINE SKI HOUSE
SWING
import javax.swing.*;
public class HelloWorldSwing {
public static void main(String[] args) {
JFrame frame = new JFrame("HelloWorldSwing");
final JLabel label = new JLabel("Hello World");
frame.getContentPane().add(label);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.pack();
frame.setVisible(true);
}
}
JFrame (example)
pack() causes a window to be sized to fit the preferred size and layouts of its sub-components
ALPINE SKI HOUSE
SWING
JFrame Class
14
ALPINE SKI HOUSE
SWING
Standard Colors
15
ALPINE SKI HOUSE
SWING
setBackground(Color c)
setForeground(Color c)
Example:
jbt.setBackground(Color.yellow);
jbt.setForeground(Color.red);
Setting Colors
16
ALPINE SKI HOUSE
SWING
Font myFont = new Font(name, style, size);
Example:
Font myFont = new Font("SansSerif ", Font.BOLD, 16);
Font myFont = new Font("Serif", Font.BOLD+Font.ITALIC, 12);
JButton jbtOK = new JButton("OK“);
jbtOK.setFont(myFont);
The Font Class
17
Font Names
Standard font names that are supported in all platforms are: SansSerif, Serif, Monospaced, Dialog, or DialogInput.
Font Style
Font.PLAIN (0), Font.BOLD (1), Font.ITALIC (2), and Font.BOLD + Font.ITALIC (3)
ALPINE SKI HOUSE
SWING
Using Panels as Sub-Containers
18
ALPINE SKI HOUSE
SWING
JPanel p = new JPanel();
p.add(new JButton("OK"));
Creating a JPanel
19
ALPINE SKI HOUSE
SWING
This example uses panels to organize components. The program creates a user interface for a Microwave oven.
JPanels Example
20
ALPINE SKI HOUSE
SWING
JLabel
21
A label is a display area for a short text, an image, or both.
ALPINE SKI HOUSE
SWING
JLabel Constructors
22
The constructors for labels are as follows:
JLabel()
JLabel(String text, int horizontalAlignment)
JLabel(String text)
JLabel(Icon icon)
JLabel(Icon icon, int horizontalAlignment)
JLabel(String text, Icon icon, int horizontalAlignment)
ALPINE SKI HOUSE
SWING
JLabel Properties
23
ALPINE SKI HOUSE
SWING
Using Labels
24
// Create an image icon from image file
ImageIcon icon = new ImageIcon("image/grapes.gif");
// Create a label with text, an icon,
// with centered horizontal alignment
JLabel jlbl = new JLabel("Grapes", icon, SwingConstants.CENTER);
// Set label's text alignment and gap between text and icon
jlbl.setHorizontalTextPosition(SwingConstants.CENTER);
jlbl.setVerticalTextPosition(SwingConstants.BOTTOM);
jlbl.setIconTextGap(5);
ALPINE SKI HOUSE
SWING
JButton
25
ALPINE SKI HOUSE
SWING
AbstractButton
26
ALPINE SKI HOUSE
SWING
JButton inherits AbstractButton and provides several constructors to create buttons.
JButton
27
ALPINE SKI HOUSE
SWING
The following are JButton constructors:
JButton()
JButton(String text)
JButton(String text, Icon icon)
JButton(Icon icon)
JButton Constructors
28
ALPINE SKI HOUSE
SWING
JButton Properties
29
ALPINE SKI HOUSE
SWING
Default Icons, Pressed Icon, and Rollover Icon
30
(A) Default icon (B) Pressed icon (C) Rollover icon
ALPINE SKI HOUSE
SWING
Horizontal Alignments
31
ALPINE SKI HOUSE
SWING
Vertical Alignments
32
ALPINE SKI HOUSE
SWING
Horizontal Text Positions
33
ALPINE SKI HOUSE
SWING
Vertical Text Positions
34
ALPINE SKI HOUSE
SWING
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.
JCheckBox
35
ALPINE SKI HOUSE
SWING
Add three check boxes named Centered, Bold, and Italic into Example 15.1 to let the user specify whether the message is centered, bold, or italic.
Check Boxes (example)
36
ButtonDemo
CheckBoxDemo
ALPINE SKI HOUSE
SWING
JRadioButton
37
ALPINE SKI HOUSE
SWING
ButtonGroup btg = new ButtonGroup();
btg.add(jrb1);
btg.add(jrb2);
Grouping Radio Buttons
38
setLayout(new FlowLayout());�� JRadioButton b1 = new JRadioButton("A");� b1.addActionListener(this);� add(b1);�� JRadioButton b2 = new JRadioButton("B");� b2.addActionListener(this);� add(b2);�� JRadioButton b3 = new JRadioButton("C");� b3.addActionListener(this);� add(b3);�� ButtonGroup bg = new ButtonGroup();� bg.add(b1);� bg.add(b2);� bg.add(b3);�
ALPINE SKI HOUSE
SWING
Grouping Radio Buttons
39
setLayout(new FlowLayout());�� JRadioButton b1 = new JRadioButton("A");� b1.addActionListener(this);� add(b1);�� JRadioButton b2 = new JRadioButton("B");� b2.addActionListener(this);� add(b2);�� JRadioButton b3 = new JRadioButton("C");� b3.addActionListener(this);� add(b3);�� ButtonGroup bg = new ButtonGroup();� bg.add(b1);� bg.add(b2);� bg.add(b3);�
ALPINE SKI HOUSE
SWING
Add three radio buttons named Red, Green, and Blue into the preceding example to let the user choose the color of the message.
Radio Buttons (example)
40
ButtonDemo
CheckBoxDemo
RadioButtonDemo
ALPINE SKI HOUSE
SWING
JToggleButton
ALPINE SKI HOUSE
SWING
JToggleButton (example)
ALPINE SKI HOUSE
SWING
JScrollPane
ALPINE SKI HOUSE
SWING
JScrollBar
44
ALPINE SKI HOUSE
SWING
Scroll Bar Properties
45
ALPINE SKI HOUSE
SWING
This example uses horizontal and vertical scrollbars to control a message displayed on a panel. The horizontal scrollbar is used to move the message to the left or the right, and the vertical scrollbar to move it up and down.
JScrollBar (example)
46
ALPINE SKI HOUSE
SWING
JSlider is similar to JScrollBar, but JSlider has more properties and can appear in many forms.
JSlider
47
ALPINE SKI HOUSE
SWING
Rewrite the preceding program using the sliders to control a message displayed on a panel instead of using scroll bars.
JSliders (example)
48
ALPINE SKI HOUSE
SWING
JTextField
ALPINE SKI HOUSE
SWING
A text field 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 (such as a name or a description).
JTextField
50
ALPINE SKI HOUSE
SWING
Creates an empty text field with the specified number of columns.
Creates a text field initialized with the specified text.
Creates a text field initialized with the�specified text and the column size.
JTextField Constructors
51
ALPINE SKI HOUSE
SWING
JTextField Properties
52
ALPINE SKI HOUSE
SWING
Returns the string from the text field.
Puts the given string in the text field.
Enables or disables the text field to be edited. By default, editable is true.
Sets the number of columns in this text field.�The length of the text field is changeable.
JTextField Methods
53
ALPINE SKI HOUSE
SWING
JTextFields (example)
54
ALPINE SKI HOUSE
SWING
If you want to let the user enter multiple lines of text, you cannot use text fields unless you create several of them. The solution is to use JTextArea, which enables the user to enter multiple lines of text.
JTextArea
55
ALPINE SKI HOUSE
SWING
Creates a text area with the specified number of rows and columns.
Creates a text area with the initial text and�the number of rows and columns specified.
JTextArea Constructors
56
ALPINE SKI HOUSE
SWING
JTextArea Properties
57
ALPINE SKI HOUSE
SWING
JTextArea (example)
58
ALPINE SKI HOUSE
SWING
JOptionPane
Method | Description |
showConfirmDialog | Asks a confirming question, like yes/no/cancel. |
showInputDialog | Prompt for some input. |
showMessageDialog | Tell the user about something that has happened. |
showOptionDialog | The Grand Unification of the above three. |
ALPINE SKI HOUSE
SWING
ALPINE SKI HOUSE
TYPES OF LAYOUT MANAGERS
61
ALPINE SKI HOUSE
ALPINE SKI HOUSE
ABOUT LAYOUT MANAGERS
62
ALPINE SKI HOUSE
ALPINE SKI HOUSE
THE SIZE OF COMPONENTS IN A CONTAINER
The size of a component in a container is determined by many factors, such as:
63
ALPINE SKI HOUSE
ALPINE SKI HOUSE
PREFERREDSIZE
64
ALPINE SKI HOUSE
ALPINE SKI HOUSE
MINIMUMSIZE
ALPINE SKI HOUSE
ALPINE SKI HOUSE
MAXIMUMSIZE
ALPINE SKI HOUSE
ALPINE SKI HOUSE
FLOWLAYOUT
ALPINE SKI HOUSE
FLOWLAYOUT
ALPINE SKI HOUSE
FLOWLAYOUT
ALPINE SKI HOUSE
FLOWLAYOUT
ALPINE SKI HOUSE
FLOWLAYOUT
f.setLayout(new FlowLayout(FlowLayout.RIGHT));
//setting flow layout of right alignment
ALPINE SKI HOUSE
FLOWLAYOUT
ALPINE SKI HOUSE
THE FLOWLAYOUT CLASS
73
ALPINE SKI HOUSE
FLOWLAYOUT EXAMPLE
74
ALPINE SKI HOUSE
GRIDLAYOUT
ALPINE SKI HOUSE
GRIDLAYOUT
ALPINE SKI HOUSE
GRIDLAYOUT
ALPINE SKI HOUSE
GRIDLAYOUT
f.setLayout(new GridLayout(3,3));
//setting grid layout of 3 rows and 3 columns
ALPINE SKI HOUSE
GRIDLAYOUT
ALPINE SKI HOUSE
THE GRIDLAYOUT CLASS
80
ALPINE SKI HOUSE
GRIDLAYOUT : EXAMPLE
81
ALPINE SKI HOUSE
BORDERLAYOUT
ALPINE SKI HOUSE
BORDERLAYOUT
ALPINE SKI HOUSE
BORDERLAYOUT
ALPINE SKI HOUSE
THE BORDERLAYOUT CLASS
85
ALPINE SKI HOUSE
THE BORDERLAYOUT MANAGER
The BorderLayout manager divides the container into five areas: East, South, West, North, and Center. Components are added to a BorderLayout by using the add method.
86
add(Component, constraint), where constraint is BorderLayout.EAST, BorderLayout.SOUTH, BorderLayout.WEST, BorderLayout.NORTH, or BorderLayout.CENTER.
ALPINE SKI HOUSE
BORDERLAYOUT EXAMPLE
f=new JFrame();
JButton b1=new JButton("NORTH");;
JButton b2=new JButton("SOUTH");;
JButton b3=new JButton("EAST");;
JButton b4=new JButton("WEST");;
JButton b5=new JButton("CENTER");;
f.add(b1,BorderLayout.NORTH);
f.add(b2,BorderLayout.SOUTH);
f.add(b3,BorderLayout.EAST);
f.add(b4,BorderLayout.WEST);
f.add(b5,BorderLayout.CENTER);
f.setSize(300,300);
f.setVisible(true);
87
ALPINE SKI HOUSE
BOXLAYOUT
ALPINE SKI HOUSE
BOXLAYOUT
ALPINE SKI HOUSE
BOX LAYOUT EXAMPLE
setLayout (new BoxLayout (this, BoxLayout.Y_AXIS));
ALPINE SKI HOUSE
BOX LAYOUT EXAMPLE
setLayout (new BoxLayout(this, BoxLayout.X_AXIS));
ALPINE SKI HOUSE
CARD LAYOUT
ALPINE SKI HOUSE
CARD LAYOUT CLASS
ALPINE SKI HOUSE
CARD LAYOUT
ALPINE SKI HOUSE
CARD LAYOUT EXAMPLE
CardLayoutExample(){
c=getContentPane();
card=new CardLayout(40,30);
//create CardLayout object with 40 hor space and 30 ver space
c.setLayout(card);
ALPINE SKI HOUSE
-END -CHAPTER 2
Intergrative Programming Technologies
Puan Azilah Binti Abd Rahim
Encik Wan Ahmad Hilmi Bin A Rahim
ALPINE SKI HOUSE
YOUR TITLE�GOES HERE
SUBTITLE GOES HERE
97
ALPINE SKI HOUSE
DIVIDER SLIDE TITLE
SUBTITLE GOES HERE
98
ALPINE SKI HOUSE
99
ALPINE SKI HOUSE
TITLE GOES HERE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida eros erat. Proin a tellus sed risus lobortis sagittis eu quis est. Duis ut aliquam nisi. Suspendisse vehicula mi diam, sit amet lacinia massa sodales ac. Fusce condimentum egestas nunc a maximus.
Quisque et orci purus. Proin dolor mi, ultrices sit amet ipsum placerat, congue mattis turpis. Donec vestibulum eros eget mauris dignissim, ut ultricies dolor viverra. Phasellus efficitur ante nec sem convallis, in ornare est accumsan.
100
ALPINE SKI HOUSE
ANOTHER TITLE�GOES HERE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida eros erat. Proin a tellus sed risus lobortis sagittis eu quis est. Duis ut aliquam nisi. Suspendisse vehicula mi diam, sit amet lacinia massa sodales ac. Fusce condimentum egestas nunc a maximus.
Quisque et orci purus. Proin dolor mi, ultrices sit amet ipsum placerat, congue mattis turpis. Donec vestibulum eros eget mauris dignissim, ut ultricies dolor viverra. Phasellus efficitur ante nec sem convallis, in ornare est accumsan.
101
ALPINE SKI HOUSE
ALPINE SKI HOUSE
YET ANOTHER TITLE GOES HERE
COMPARISON POINT 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida eros erat. Proin a tellus sed risus lobortis sagittis eu quis est. Duis ut aliquam nisi. Suspendisse vehicula mi diam, sit amet lacinia massa sodales ac. Fusce condimentum egestas nunc a maximus.Quisque et orci purus. Proin dolor mi, ultrices sit amet ipsum placerat, congue mattis turpis. Donec vestibulum eros eget mauris dignissim, ut ultricies dolor viverra. Phasellus efficitur ante nec sem convallis, in ornare est accumsan.
COMPARISON POINT 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida eros erat. Proin a tellus sed risus lobortis sagittis eu quis est. Duis ut aliquam nisi. Suspendisse vehicula mi diam, sit amet lacinia massa sodales ac. Fusce condimentum egestas nunc a maximus.Quisque et orci purus. Proin dolor mi, ultrices sit amet ipsum placerat, congue mattis turpis. Donec vestibulum eros eget mauris dignissim, ut ultricies dolor viverra. Phasellus efficitur ante nec sem convallis, in ornare est accumsan.
102
ALPINE SKI HOUSE
ALPINE SKI HOUSE
TITLE HERE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida eros erat. Proin a tellus sed risus lobortis sagittis eu quis est. Duis ut aliquam nisi. Suspendisse vehicula mi diam, sit amet lacinia massa sodales ac. Fusce condimentum egestas nunc a maximus.
Quisque et orci purus. Proin dolor mi, ultrices sit amet ipsum placerat, congue mattis turpis. Donec vestibulum eros eget mauris dignissim, ut ultricies dolor viverra. Phasellus efficitur ante nec sem convallis, in ornare est accumsan.
103
ALPINE SKI HOUSE
TABLE TITLE GOES HERE
104
YOUR HEADING | YOUR HEADING | YOUR HEADING | YOUR HEADING |
Place content here | Place content here | Place content here | Place content here |
Place content here | Place content here | Place content here | Place content here |
Place content here | Place content here | Place content here | Place content here |
Place content here | Place content here | Place content here | Place content here |
Place content here | Place content here | Place content here | Place content here |
Place content here | Place content here | Place content here | Place content here |
Place content here | Place content here | Place content here | Place content here |
Place content here | Place content here | Place content here | Place content here |
ALPINE SKI HOUSE
ALPINE SKI HOUSE
ALPINE SKI HOUSE
CUSTOMIZE THIS TEMPLATE
106
Template Editing Instructions and Feedback
ALPINE SKI HOUSE
ALPINE SKI HOUSE