1

Swing BasicsSwing Basics

Sang ShinSang Shinwww.JPassion.comwww.JPassion.com

““Learn with JPassion!”Learn with JPassion!”

1

2

Topics

• What is Swing?• Containers• Using Top-level containers• Layout managers• GUI components

What is Swing? What is Swing?

44

What is Swing?

• Swing is a Java library (framework) for creating GUIs (Graphical User Interface)> Part of a larger JFC (Java Foundation classes)> Replaces but uses an older library, AWT (Abstract Window Toolkit)

• Swing apps will use look-and-feel of the system they’re running on> Or can be set by the program

55

What Makes up Swing?

• Swing components – UI components> E.g. buttons, text-fields, frames, etc.

• Containers> A set of UI components are contained and managed by a container

• Layout managers> Dictates how you arrange the UI components

• UI event handling> When you click a button, the event handler is called to handle it

ContainersContainers

77

Container Hierarchy

• Top-level containers> Place for other Swing components to paint themselves> e.g., JFrame, JDialog, JApplet

• Intermediate containers (Lightweight container)> Simplify positioning of atomic components> e.g., JPanel, JSplitPane, JTabbedPane

88

Containers & Components

• All Swing GUI objects are Components• Some are also Containers

> Example: JFrame, JPanel, etc• You place other Components inside Containers

> Example: a JFrame has JButton's, JTextField's, etc.> Example: a JPanel is part of a window, in which we organize GUI

components

99

What We Do with Containers

• Add components to them• Determine how these items will be arranged on the screen

> Through Layout control by associating a Swing layout-manager with each container

Using Top-Level ContainersUsing Top-Level Containers

1112

Three Top-Level Containers in Swing• Swing provides three generally useful top-level container

classes> JFrame> JDialog> JApplet

1213

Containment Hierarchy & Container• To appear onscreen, every GUI component must be part of a

containment hierarchy> A containment hierarchy is a tree of components that has a top-level

container as its root• Each GUI component can be contained only once

> If a component is already in a container and you try to add it to another container, the component will be removed from the first container and then added to the second

• Each top-level container has a content pane that, generally speaking, contains (directly or indirectly) the visible components in that top-level container's GUI

• You can optionally add a menu bar to a top-level container> The menu bar is by convention positioned within the top-level

container, but outside the content pane

1314

Top-Level Container: JFrame• The example JFrame below contains a dark green menu bar (with no

menus) and, in the frame's content pane, a large blank, yellow label

1415

Top-Level Container & Containment Hierarchy

• Each program that uses Swing components has at least one top-level container> This top-level container is the root of a containment hierarchy — the

hierarchy that contains all of the Swing components that appear inside the top-level container

• A standalone application with a Swing-based GUI has at least one containment hierarchy with a JFrame as its root> For example, if an application has one main window and two dialogs,

then the application has three containment hierarchies, and thus three top-level containers - One containment hierarchy has a JFrame as its root, and each of the other two has a JDialog object as its root.

1516

Adding Components To Content Pane• You find the content pane of a top-level container by calling

the getContentPane() method of the JFrame object> frame.getContentPane().add(yellowLabel, BorderLayout.CENTER);

• The default content pane is a simple intermediate container that inherits from JComponent, and that uses a BorderLayout as its layout manager.

1617

Customizing Content Pane• It's easy to customize the content pane — setting the layout

manager or adding a border, for example• However, there is one tiny gotcha - The getContentPane

method returns a Container object, not a JComponent object.> This means that if you want to take advantage of the content pane's

JComponent features, you need to either typecast the return value or create your own component (such as JPanel) to be the content pane

1718

Setting Content Pane with JPanel• To make a component the content pane, use the top-level

container's setContentPane method. For example:

// Create a panel and add components to it.JPanel contentPane = new JPanel(new BorderLayout());contentPane.setBorder(someBorder);contentPane.add(someComponent, BorderLayout.CENTER);contentPane.add(anotherComponent, BorderLayout.PAGE_END);

topLevelContainer.setContentPane(contentPane);

Layout ManagersLayout Managers

19

What is and Why Use Layout Managers?

• Definition:> Determines the position and size of the multiple components

within a container> Governs the layout of theses components in the container

• If no layout manager is used, you will need to position the elements manuallypublic void setBounds(int x, int y, int width, int height)

> Method of the Component class> Quite difficult and tedious if you have several Component

objects> Need to call this method for each object

20

Built-in LayoutManager classes

• Built-in Layout Manager classes> FlowLayout> BorderLayout> GridLayout> GridBagLayout> CardLayout

• Setting the layout manager:void setLayout(LayoutManager mgr)

21

The FlowLayout Manager

• Default manager for the Panel class and its subclasses > The Applet class is a subclass of Panel

• Positions the components in a left to right and top to bottom manner, starting at the upper-left hand corner

22

The FlowLayout Manager

• Has three constructors:

23

FlowLayout Manager

class FlowLayoutDemo extends JFrame { public static void main(String args[]) { FlowLayoutDemo fld = new FlowLayoutDemo(); fld.setLayout(new FlowLayout(FlowLayout.RIGHT, 10, 10)); fld.add(new JButton("ONE")); fld.add(new JButton("TWO")); fld.add(new JButton("THREE")); fld.setSize(100, 100); fld.setVisible(true); }}

24

The FlowLayout Manager

• Sample output:

25

The BorderLayout Manager

• Default layout for Window objects and its subclasses> Includes those of Frame and Dialog type

• Divides Container object into five parts where Component objects are added> North - stretch horizontally> South - stretch horizontally> East - adjust vertically> West - adjust vertically> Center - adjusts in both directions

26

The BorderLayout Manager

• Has two constructors

> Parameters hgap and vgap refers to the spacing between the components within the container

27

The BorderLayout Manager

• Adding a component to a specified region:> Use the add method and pass two arguments:

> Component to add> Region where the component is to be positioned

> Only one component can be placed in one region• Valid regions:

> BorderLayout.NORTH> BorderLayout.SOUTH> BorderLayout.EAST> BorderLayout.WEST> BorderLayout.CENTER

28

The BorderLayout Managerclass BorderLayoutDemo extends JFrame { public static void main(String args[]) { BorderLayoutDemo bld = new BorderLayoutDemo(); bld.setLayout(new BorderLayout(10, 10)); bld.add(new JButton("NORTH"), BorderLayout.NORTH); bld.add(new JButton("SOUTH"), BorderLayout.SOUTH); bld.add(new JButton("EAST"), BorderLayout.EAST); bld.add(new JButton("WEST"), BorderLayout.WEST); bld.add(new JButton("CENTER"), BorderLayout.CENTER); bld.setSize(200, 200); bld.setVisible(true); }}

29

The BorderLayout Manager

• Sample output: • After resizing:

30

The GridLayout Manager

• Like FlowLayout> Positions components from left to right and top to bottom> Starts adding components at the upper-lefthand corner

• Divides the container into a number of rows and columns> Regions are equally sized> Ignores the component's preferred size

31

The GridLayout Manager

• Has the following constructors:

32

The GridLayout Manager

class GridLayoutDemo extends JFrame { public static void main(String args[]) { GridLayoutDemo gld = new GridLayoutDemo(); gld.setLayout(new GridLayout(2, 3, 4, 4)); gld.add(new JButton("ONE")); gld.add(new JButton("TWO")); gld.add(new JButton("THREE")); gld.add(new JButton("FOUR")); gld.add(new JButton("FIVE")); gld.setSize(200, 200); gld.setVisible(true); }}

33

The GridLayout Manager

• Sample output:

• After resizing:

34

Panels and Complex Layouts

• For more complex layouts> Can combine the different layout managers> Use of panels at the same time

• Recall:> A Panel is a Container and a Component> Can insert Components into the Panel > Can add Panel to a Container

Swing GUI ComponentsSwing GUI Components

36

Swing GUI Components

• Package is found in javax.swing

• Written entirely using Java> Have the same look and feel even when executed on

different platforms

• Provides more interesting components than AWT > Color chooser> Option pane

37

Swing GUI Components

• Names of the Swing GUI components are almost similar to that of AWT> Name of AWT components but prefixed with J> Example:

> AWT: Button class> Corresponding Swing component: JButton class

38

Swing GUI Components

39

Swing GUI Components

40

Swing: Setting Up Top-Level Containers

• Top-level containers in Swing are slightly incompatible with those in AWT> In terms of adding components to the container

• Adding a component to the container:> Get the content pane of the container

> Use the getContentPane method> Add components to the content pane

> Still use the add method

41

Swing: A JFrame Example1 import javax.swing.*;2 import java.awt.*;3 class SwingDemo {4 JFrame frame;5 JPanel panel;6 JTextField textField;7 JButton button;8 Container contentPane;9 public static void main(String args[]) {10 SwingDemo sd = new SwingDemo();11 sd.launchFrame();12 }13 //continued...

42

Swing: A JFrame Example

14 void launchFrame() {15 /* initialization */16 frame = new JFrame("My First Swing Application");17 panel = new JPanel();18 textField = new JTextField("Default text");19 button = new JButton("Click me!");20 contentPane = frame.getContentPane();21 //add components to panel–FlowLayout by default22 panel.add(textField);23 panel.add(button);24 /* add components to contentPane– BorderLayout */25 contentPane.add(panel, BorderLayout.CENTER);26 frame.pack(); //Size of frame based on components27 frame.setVisible(true);28 }29 }

43

Swing: A JFrame Example

• Sample output:

44

Swing: A JOptionPane Example1 import javax.swing.*;2 class JOptionPaneDemo {3 JOptionPane optionPane;4 void launchFrame() {5 optionPane = new JOptionPane();6 String name = optionPane.showInputDialog(7 "Hi, what's your name?");8 optionPane.showMessageDialog(null, 9 "Nice to meet you, " + name + ".", 10 "Greeting...",optionPane.PLAIN_MESSAGE);11 System.exit(0);12 }13 public static void main(String args[]) {14 new JOptionPaneDemo().launchFrame(); } }

45

Swing: A JFrame Example

• Sample output:

46

Thank you!Thank you!

Sang ShinSang ShinMichèle GarocheMichèle Garoche

http://www.javapassion.comhttp://www.javapassion.com““Learn with Passion!”Learn with Passion!”

39