1 of 106

ALPINE SKI HOUSE

2 of 106

GRAPHICAL USER INTERFACES

Use SWING components

ALPINE SKI HOUSE

3 of 106

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

4 of 106

SWING

  • Part of the Java Foundation Classes (JFC)
  • Provides a rich set of GUI components
  • Used to create a Java program with a graphical user interface (GUI)
  • Swing components are lightweight
    • Not weighed down by GUI capabilities of platform
    • More portable than heavyweight components
  • Swing components allow programmer to specify look and feel
    • Can change depending on platform
    • Can be same across all platforms

ALPINE SKI HOUSE

ALPINE SKI HOUSE

5 of 106

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

6 of 106

SWING VS. AWT

SWING

AWT

  • Robust, versatile, flexible library for GUI interfaces
  • simple GUI interfaces
  • for comprehensive GUI project
  • not for comprehensive GUI project
  • printed directly on screen using Java code
  • more complicated (coding based on c++)
  • known as lightweight component
  • known as heavyweight component

ALPINE SKI HOUSE

ALPINE SKI HOUSE

7 of 106

SWING

7

GUI Class Hierarchy

ALPINE SKI HOUSE

8 of 106

SWING

Container Classes

8

Container classes can contain other GUI components.

ALPINE SKI HOUSE

9 of 106

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

10 of 106

SWING

GUI Components

10

ALPINE SKI HOUSE

11 of 106

SWING

  • 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 JFrame class can be used to create windows.
  • For Swing GUI programs, use JFrame class to create windows.

JFrames

11

ALPINE SKI HOUSE

12 of 106

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

13 of 106

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

14 of 106

SWING

JFrame Class

14

ALPINE SKI HOUSE

15 of 106

SWING

  • Thirteen standard colors (black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange, pink, red, white, yellow) are defined as constants in java.awt.Color.

  • The standard color names are constants, but they are named as variables with lowercase for the first word and uppercase for the first letters of subsequent words.

  • Thus the color names violate the Java naming convention. Since JDK 1.4, you can also use the new constants: BLACK, BLUE, CYAN, DARK_GRAY, GRAY, GREEN, LIGHT_GRAY, MAGENTA, ORANGE, PINK, RED, WHITE, and YELLOW.

Standard Colors

15

ALPINE SKI HOUSE

16 of 106

SWING

  • You can use the following methods to set the component’s background and foreground colors:

setBackground(Color c)

setForeground(Color c)

Example:

jbt.setBackground(Color.yellow);

jbt.setForeground(Color.red);

Setting Colors

16

ALPINE SKI HOUSE

17 of 106

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

18 of 106

SWING

  • Panels act as sub-containers for grouping user interface components.
  • It is recommended that you place the user interface components in panels and place the panels in a frame. You can also place panels in a panel.
  • To add a component to JFrame, you actually add it to the content pane of JFrame. To add a component to a panel, you add it directly to the panel using the add method.

Using Panels as Sub-Containers

18

ALPINE SKI HOUSE

19 of 106

SWING

  • You can use new JPanel() to create a panel with a default FlowLayout manager or new JPanel(LayoutManager) to create a panel with the specified layout manager.
  • Use the add(Component) method to add a component to the panel. For example,

JPanel p = new JPanel();

p.add(new JButton("OK"));

Creating a JPanel

19

ALPINE SKI HOUSE

20 of 106

SWING

This example uses panels to organize components. The program creates a user interface for a Microwave oven.

JPanels Example

20

ALPINE SKI HOUSE

21 of 106

SWING

JLabel

21

A label is a display area for a short text, an image, or both.

ALPINE SKI HOUSE

22 of 106

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

23 of 106

SWING

  • JLabel inherits all the properties from JComponent and has many properties similar to the ones in JButton, such as text, icon, horizontalAlignment, verticalAlignment, horizontalTextPosition, verticalTextPosition, and iconTextGap.

JLabel Properties

23

ALPINE SKI HOUSE

24 of 106

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

25 of 106

SWING

  • 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 generalized in javax.swing.AbstractButton.

JButton

25

ALPINE SKI HOUSE

26 of 106

SWING

AbstractButton

26

ALPINE SKI HOUSE

27 of 106

SWING

JButton inherits AbstractButton and provides several constructors to create buttons.

JButton

27

ALPINE SKI HOUSE

28 of 106

SWING

The following are JButton constructors:

JButton()

JButton(String text)

JButton(String text, Icon icon)

JButton(Icon icon)

JButton Constructors

28

ALPINE SKI HOUSE

29 of 106

SWING

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

JButton Properties

29

ALPINE SKI HOUSE

30 of 106

SWING

  • A regular button has a default icon, pressed icon, and rollover icon.
  • Normally, you use the default icon. All other icons are for special effects.
  • A pressed icon is displayed when a button is pressed and a rollover icon is displayed when the mouse is over the button but not pressed.

Default Icons, Pressed Icon, and Rollover Icon

30

(A) Default icon (B) Pressed icon (C) Rollover icon

ALPINE SKI HOUSE

31 of 106

SWING

  • Horizontal alignment specifies how the icon and text are placed horizontally on a button.
  • You can set the horizontal alignment using one of the five constants: LEADING, LEFT, CENTER, RIGHT, TRAILING. At present, LEADING and LEFT are the same and TRAILING and RIGHT are the same.
  • Future implementation may distinguish them. The default horizontal alignment is SwingConstants.TRAILING.

Horizontal Alignments

31

ALPINE SKI HOUSE

32 of 106

SWING

  • Vertical alignment specifies how the icon and text are placed vertically on a button.
  • You can set the vertical alignment using one of the three constants: TOP, CENTER, BOTTOM.
  • The default vertical alignment is SwingConstants.CENTER.

Vertical Alignments

32

ALPINE SKI HOUSE

33 of 106

SWING

  • Horizontal text position specifies the horizontal position of the text relative to the icon.
  • You can set the horizontal text position using one of the five constants: LEADING, LEFT, CENTER, RIGHT, TRAILING.
  • The default horizontal text position is SwingConstants.RIGHT.

Horizontal Text Positions

33

ALPINE SKI HOUSE

34 of 106

SWING

  • Vertical text position specifies the vertical position of the text relative to the icon.
  • You can set the vertical text position using one of the three constants: TOP, CENTER.
  • The default vertical text position is SwingConstants.CENTER.

Vertical Text Positions

34

ALPINE SKI HOUSE

35 of 106

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

36 of 106

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

37 of 106

SWING

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

JRadioButton

37

ALPINE SKI HOUSE

38 of 106

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

39 of 106

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

40 of 106

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

41 of 106

SWING

  • JToggleButton is push button with two states. When a toggle button is pressed, it stays pressed. When it is pressed a second time, it releases. Therefore, each time a toggle button is pushed, it toggles between its two states.
  • JToggleButton is an extension of AbstractButton and is used to represent buttons that can be toggled on and off (as opposed to buttons like JButton which, when pushed, “pop back up”). It should be noted that while the subclasses of JToggleButton (JCheckBox and JRadioButton) are the kinds of JToggleButtons most commonly used, JToggleButton is not an abstract class. When used directly, it typically has the appearance of a JButton that does not pop back up when pressed.
  • Each time JToggleButton is pressed, it generates ItemEvent. ItemEvents are handled by implementing the ItemListener interface.

JToggleButton

ALPINE SKI HOUSE

42 of 106

SWING

JToggleButton (example)

ALPINE SKI HOUSE

43 of 106

SWING

  • A JScrollPane provides a scrollable view of a component. When screen real estate is limited, use a scroll pane to display a component that is large or one whose size can change dynamically. Other containers used to save screen space include split panes and tabbed panes.
  • A scroll pane may use two separate instances of JScrollBar for the scroll bars. The scroll bars provide the interface for the user to manipulate the visible area. The following figure shows the three areas of a scroll bar: the knob (sometimes called the thumb), the (arrow) buttons, and the track.

JScrollPane

ALPINE SKI HOUSE

44 of 106

SWING

  • As croll bar is a control that enables the user to select from a range of values. The scrollbar appears in two styles: horizontal and vertical.

JScrollBar

44

ALPINE SKI HOUSE

45 of 106

SWING

Scroll Bar Properties

45

ALPINE SKI HOUSE

46 of 106

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

47 of 106

SWING

JSlider is similar to JScrollBar, but JSlider has more properties and can appear in many forms.

JSlider

47

ALPINE SKI HOUSE

48 of 106

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

49 of 106

SWING

  • JTextField is a lightweight component that allows the editing of a single line of text.
  • JTextField is intended to be source-compatible with java.awt.TextField where it is reasonable to do so. This component has capabilities not found in the java.awt.TextField class. The superclass should be consulted for additional capabilities.
  • JTextField has a method to establish the string used as the command string for the action event that gets fired. The java.awt.TextField used the text of the field as the command string for the ActionEvent.
  • JTextField will use the command string set with the setActionCommand method if not null, otherwise it will use the text of the field as a compatibility with java.awt.TextField.

JTextField

ALPINE SKI HOUSE

50 of 106

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

51 of 106

SWING

  • 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 Constructors

51

ALPINE SKI HOUSE

52 of 106

SWING

    • text
    • horizontalAlignment
    • editable
    • columns

JTextField Properties

52

ALPINE SKI HOUSE

53 of 106

SWING

  • 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.�The length of the text field is changeable.

JTextField Methods

53

ALPINE SKI HOUSE

54 of 106

SWING

JTextFields (example)

54

ALPINE SKI HOUSE

55 of 106

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

56 of 106

SWING

  • JTextArea(int rows, int columns)

Creates a text area with the specified number of rows and columns.

  • JTextArea(String s, int rows, int columns)

Creates a text area with the initial text and�the number of rows and columns specified.

JTextArea Constructors

56

ALPINE SKI HOUSE

57 of 106

SWING

    • text
    • editable
    • columns
    • lineWrap
    • wrapStyleWord
    • rows
    • lineCount
    • tabSize

JTextArea Properties

57

ALPINE SKI HOUSE

58 of 106

SWING

JTextArea (example)

58

ALPINE SKI HOUSE

59 of 106

SWING

  • JOptionPane makes it easy to pop up a standard dialog box that prompts users for a value or informs them of something.
  • While the JOptionPane class may appear complex because of the large number of methods, almost all uses of this class are one-line calls to one of the static showXxxDialog methods shown below

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

60 of 106

SWING

ALPINE SKI HOUSE

61 of 106

TYPES OF LAYOUT MANAGERS

  • FlowLayout
  • GridLayout
  • BorderLayout
  • BoxLayout

61

ALPINE SKI HOUSE

ALPINE SKI HOUSE

62 of 106

ABOUT LAYOUT MANAGERS

  • Each container has a layout manager, which is responsible for arranging the components in a container.
  • The container's setLayout method can be used to set a layout manager.
  • Certain types of containers have default layout managers.
  • The layout manager places the components according to the layout manager's rules, property settings and the constraints associated with each component.
  • Each layout manager has a particular set of rules specific to that layout manager.

62

ALPINE SKI HOUSE

ALPINE SKI HOUSE

63 of 106

THE SIZE OF COMPONENTS IN A CONTAINER

The size of a component in a container is determined by many factors, such as:

  • The type of layout manager used by the container.
  • The layout constraints associated with each component
  • The size of the container.
  • Certain properties common to all components (such as preferredSize, minimumSize, maximumSize, alignmentX, and alignmentY).

63

ALPINE SKI HOUSE

ALPINE SKI HOUSE

64 of 106

PREFERREDSIZE

  • The preferredSize property indicates the ideal size at which the component looks best. Depending on the rules of the particular layout manager, this property may or may not be considered.
  • For example, the preferred size of a component is used in a container with a FlowLayout manager, but ignored if it is placed in a container with a GridLayout manager.

 

64

ALPINE SKI HOUSE

ALPINE SKI HOUSE

65 of 106

MINIMUMSIZE

  • The minimumSize property specifies the minimum size at which the component is useful. For most GUI components, minimumSize is the same as preferredSize.
  • Layout managers generally respect minimumSize more than preferredSize.

 

ALPINE SKI HOUSE

ALPINE SKI HOUSE

66 of 106

MAXIMUMSIZE

  • The maximumSize property specifies the maximum size needed by a component, so that the layout manager won't wastefully give space to a component that does not need it.
  • For instance, BorderLayout limits the center component's size to its maximum size, and gives the space to edge components.

ALPINE SKI HOUSE

ALPINE SKI HOUSE

67 of 106

FLOWLAYOUT

  • FlowLayout is the default layout manager.
  • FlowLayout implements a simple layout style, which is similar to how words flow in a text editor.
  • Components are laid out from the upper-left corner, left to right and top to bottom. When no more components fit on a line, the next one appears on the next line.
  • A small space is left between each component, above and below, as well as left and right.

ALPINE SKI HOUSE

68 of 106

FLOWLAYOUT

  • The constructors for FlowLayout are shown below:
      • FlowLayout( )
      • FlowLayout(int how)
      • FlowLayout(int how, int horz, int vert)

ALPINE SKI HOUSE

69 of 106

FLOWLAYOUT

      • FlowLayout( )
        • The first form creates the default layout, which centers components and leaves five pixels of space between each component.

ALPINE SKI HOUSE

70 of 106

FLOWLAYOUT

      • FlowLayout(int how)
    • The second form lets you specify how each line is aligned. Valid values for how are as follows:
        • FlowLayout.LEFT
        • FlowLayout.CENTER
        • FlowLayout.RIGHT
      • These values specify left, center, and right alignment, respectively.

ALPINE SKI HOUSE

71 of 106

FLOWLAYOUT

f.setLayout(new FlowLayout(FlowLayout.RIGHT));  

//setting flow layout of right alignment  

ALPINE SKI HOUSE

72 of 106

FLOWLAYOUT

      • FlowLayout(int how, int horz, int vert)
    • The third form allows specifying the horizontal and vertical space left between components in horz and vert, respectively.

ALPINE SKI HOUSE

73 of 106

THE FLOWLAYOUT CLASS

73

ALPINE SKI HOUSE

74 of 106

FLOWLAYOUT EXAMPLE

74

ALPINE SKI HOUSE

75 of 106

GRIDLAYOUT

  • A GridLayout object places components in a grid of cells.
  • Each component takes all the available space within its cell, and each cell is exactly the same size.
  • If the GridLayoutDemo window is resized, the GridLayout object changes the cell size so that the cells are as large as possible, given the space available to the container.

ALPINE SKI HOUSE

76 of 106

GRIDLAYOUT

  • GridLayout lays out components in a two dimensional grid.
  • When you instantiate a GridLayout, you define the number of rows and columns.
  • The constructors supported by GridLayout are shown below:
        • GridLayout( )
        • GridLayout(int numRows, int numColumns )
        • GridLayout(int numRows, int numColumns, int horz, int vert)

ALPINE SKI HOUSE

77 of 106

GRIDLAYOUT

        • GridLayout( )
          • The first form creates a single-column grid layout.

ALPINE SKI HOUSE

78 of 106

GRIDLAYOUT

        • GridLayout(int numRows, int numColumns )
          • The second form creates a grid layout with the specified number of rows and columns.

f.setLayout(new GridLayout(3,3));  

//setting grid layout of 3 rows and 3 columns  

ALPINE SKI HOUSE

79 of 106

GRIDLAYOUT

        • GridLayout(int numRows, int numColumns, int horz, int vert)
    • The third form allows you to specify the horizontal and vertical space left between components in horz and vert, respectively. Either numRows or numColumns can be zero.
    • Specifying numRows as zero allows for unlimited-length columns. Specifying numColumns as zero allows for unlimited-length rows.

ALPINE SKI HOUSE

80 of 106

THE GRIDLAYOUT CLASS

80

ALPINE SKI HOUSE

81 of 106

GRIDLAYOUT : EXAMPLE

81

ALPINE SKI HOUSE

82 of 106

BORDERLAYOUT

  • The BorderLayout class implements a common layout style for top-level windows.
  • It has four narrow, fixed-width components at the edges and one large area in the center.
  • The four sides are referred to as north, south, east, and west.
  • The middle area is called the center.

ALPINE SKI HOUSE

83 of 106

BORDERLAYOUT

  • The constructors defined by BorderLayout are shown below:
      • BorderLayout( )
      • BorderLayout(int horz, int vert)

ALPINE SKI HOUSE

84 of 106

BORDERLAYOUT

  • The first form creates a default border layout.
  • The second allows you to specify the horizontal and vertical space left between components in horz and vert, respectively.
  • BorderLayout defines the following constants that specify the regions:
      • BorderLayout.CENTER
      • BorderLayout.SOUTH
      • BorderLayout.EAST
      • BorderLayout.WEST
      • BorderLayout.NORTH

ALPINE SKI HOUSE

85 of 106

THE BORDERLAYOUT CLASS

85

ALPINE SKI HOUSE

86 of 106

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

87 of 106

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

88 of 106

BOXLAYOUT

  • A layout manager that allows multiple components to be laid out either vertically or horizontally.
  • The components will not wrap so, for example, a vertical arrangement of components will stay vertically arranged when the frame is resized.

ALPINE SKI HOUSE

89 of 106

BOXLAYOUT

  • The BoxLayout manager is constructed with an axis parameter that specifies the type of layout that will be done.
  • There are four choices:
    • X_AXIS - Components are laid out horizontally from left to right.
    • Y_AXIS - Components are laid out vertically from top to bottom.
    • LINE_AXIS - Components are laid out the way words are laid out in a line, based on the container's ComponentOrientation property.
    • PAGE_AXIS - Components are laid out the way text lines are laid out on a page, based on the container's ComponentOrientation property.

ALPINE SKI HOUSE

90 of 106

BOX LAYOUT EXAMPLE

setLayout (new BoxLayout (this, BoxLayout.Y_AXIS)); 

ALPINE SKI HOUSE

91 of 106

BOX LAYOUT EXAMPLE

setLayout (new BoxLayout(this, BoxLayout.X_AXIS)); 

ALPINE SKI HOUSE

92 of 106

CARD LAYOUT

  • The CardLayout class manages the components in such a manner that only one component is visible at a time.
  • It treats each component as a card that is why it is known as CardLayout.

ALPINE SKI HOUSE

93 of 106

CARD LAYOUT CLASS

  • Constructors of CardLayout class:
    • CardLayout(): creates a card layout with zero horizontal and vertical gap.
    • CardLayout(int hgap, int vgap): creates a card layout with the given horizontal and vertical gap

ALPINE SKI HOUSE

94 of 106

CARD LAYOUT

  • Commonly used methods of CardLayout class:
    • public void next(Container parent): is used to flip to the next card of the given container.
    • public void previous(Container parent): is used to flip to the previous card of the given container.
    • public void first(Container parent): is used to flip to the first card of the given container.
    • public void last(Container parent): is used to flip to the last card of the given container.
    • public void show(Container parent, String name): is used to flip to the specified card with the given name.

ALPINE SKI HOUSE

95 of 106

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

96 of 106

-END -CHAPTER 2

Intergrative Programming Technologies

Puan Azilah Binti Abd Rahim

Encik Wan Ahmad Hilmi Bin A Rahim

ALPINE SKI HOUSE

97 of 106

YOUR TITLE�GOES HERE

SUBTITLE GOES HERE

97

ALPINE SKI HOUSE

98 of 106

DIVIDER SLIDE TITLE

SUBTITLE GOES HERE

98

ALPINE SKI HOUSE

99 of 106

99

ALPINE SKI HOUSE

100 of 106

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

101 of 106

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

102 of 106

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

103 of 106

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

104 of 106

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

105 of 106

ALPINE SKI HOUSE

106 of 106

CUSTOMIZE THIS TEMPLATE

106

Template Editing Instructions and Feedback

ALPINE SKI HOUSE

ALPINE SKI HOUSE