TCU CoSc 10403 Programming with Java Visual Design (Chapter 5)

TCU CoSc 10403 Programming with Java

Visual Design

(Chapter 5)

Containers & Layout Managers• Java provides two features that give us the ability to

make a GUI look the way we want it to, regardless of the system in which the program is running.

• Layout classes allow the programmer to specify how the hierarchy of Containers and their components will appear to the user.

• The Container subclass permits the programmer to think of visual design as a hierarchical organization.

3

Arranging components

Containers• Container objects are used to group Components (widgets)

together for display purposes.

• There is no limit to the number of Components that a Container can hold.

• A Container is itself a component - can be nested!

Component

Applet

Panel

Container

Window

JApplet

5

FlowLayout• Use:

add(component);

to add a component when using a FlowLayout

• Components are added left-to-right

• If no room, a new row is started

• Exact layout depends on size of Applet/JApplet

• Components are made as small as possible

• FlowLayout is convenient but often provides little control over the placement of components within a container.

The FlowLayout Class

Constructors:

(1) FlowLayout()Creates a FlowLayout object with center alignment and horizontal

and vertical gaps of five pixel each. This is the default Layout Manager for Applets, Panels, and JPanels (not for JApplets!!).

(2) FlowLayout(int alignment)Constructs a FlowLayout object with the specified alignment and a

default gap of five pixels in each direction.

(3) FlowLayout(int alignment, int hGap, int vGap)Constructs a FlowLayout object with the specified alignment and

gaps

FlowLayout Exampleimport java.awt.*;

import javax.swing.*;

public class FlowLayoutDemo extends

JApplet

{

JButton b1 = new JButton("Front");

JButton b2 = new JButton("Left");

JButton b3 = new JButton("Top");

JButton b4 = new JButton("Back");

JButton b5 = new JButton("Right");

JButton b6 = new JButton("Bottom");

public void init()

{

setLayout(new FlowLayout());

add(b1);

add(b2);

add(b3);

add(b4);

add(b5);

add(b6);

}

}

FlowLayout Manager (centered, 5,5);

FlowLayout myLO = new FlowLayout(FlowLayout.LEFT,20,2);setLayout(myLO);

FlowLayout myLO = new FlowLayout(FlowLayout.RIGHT,20,5);

setLayout(myLO);

The BorderLayout Class• In a BorderLayout, the Container is divided into five regions: North, East, West, South,

and Center.

• At most five components can be added.

• To add Component(s) to a Container that has a BorderLayout, we MUST use the version of the add() method that takes an additional String argument:

void add(String location, Component c)

• The location is specified using one of the five class constants:BorderLayout.WEST (“West”), BorderLayout.EAST (“East”),

BorderLayout.SOUTH (“South”), BorderLayout.NORTH (“North”), and BorderLayout.CENTER (“Center”)

North

South

West Center East

The BorderLayout Class (continued)• Component(s) do not have to be added to each region – any missing ones will be

treated as Component(s) of size 0.

• Horizontal and vertical gaps between regions can be specified (the default is 0 unless specified).

• When the Container is laid out, the North and South Component(s) are given their full heights and any remaining vertical space is allotted to the East, Center, and West regions. In addition, these two Component(s) are given the full Container width.

• In the horizontal direction, the East and West regions are given their full widths and any remaining width is given to the Center region.

• BorderLayout will automatically resize the Component(s) (particularly in the Center) to fill the available space.

• To prevent resizing during layout, Component(s) can be placed in Panel(s) or JPanel(s), and then the Panel(s)/JPanel(s) can be added to the Container.

The BorderLayout Class

Constructors:

(1) BorderLayout()Creates a BorderLayout object with center alignment and horizontal

and vertical gaps of zero pixels each.

(2) BorderLayout(int hGap, int vGap)Constructs a BorderLayout object with center alignment and the

specified alignment and gaps

BorderLayout Exampleimport java.awt.*;


public class BorderLayoutDemo extends JApplet

{

BorderLayout myLO = new BorderLayout();

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");

public void init()

{

setLayout(myLO);

add(BorderLayout.NORTH,b1);

add("South",b2);

add(BorderLayout.EAST,b3);

add("West",b4);

add(BorderLayout.CENTER,b5);

}

}



public class BorderLayoutDemo2 extends JApplet

{




JButton b4 = new JButton("West is the longest button");


public void init()

{

setLayout(new BorderLayout());

add("North",b1);

add("South",b2);

add("East",b3);

add("West",b4);

add("Center",b5);

}

}




{





public void init()

{


add("North",b1);

add("South",b2);

add("West",b4);

add("Center",b5);

}

}

Empty “East” region

Empty “East” & “Center” regions




{






public void init()

{


add("North",b1);

add("South",b2);

add("East",b3);

add("West",b4);

//add("Center",b5);

}

}Notice the “hole”?Notice the “hole”?




{






public void init()

{

//note: BorderLayout is the default - even

//if not specified

//setLayout(new FlowLayout());

add(BorderLayout.NORTH,b1);

add("South",b2);

add(BorderLayout.EAST,b3);

add("West",b4);

add(BorderLayout.CENTER,b5);

}

}

What you will get if you mistakenly write:


BorderLayout is the default.

The GridLayout Class• In a GridLayout, the Container is divided into equal sized regions (cells) similar

to the squares on “graph paper”.

• In this layout scheme, both the number of rows and number of columns are specified.

• When adding Component(s) to a GridLayout, they are placed in the layout in a left to right, top down order.

• Cells are of equal size and are completely filled across before filling of a new row begins.

• Obviously, the last row may not be completely filled.

• If more items are added to the Container than there are cells, the layout will allocate enough columns to fit all the Component(s).

• GridLayout will resize the Component(s) so that its cells are filled.

• The layout allows the user to specify both horizontal and vertical spacing (with a default size of 0).

The GridLayout Class

Constructors:1. GridLayout()

Creates a new GridLayout with one row, and unlimited number of columns, and no horizontal and vertical gaps between cells.

2. GridLayout(int rows, int cols)Creates a new GridLayout with the number of rows and columns

as specified.

3. GridLayout(int rows, int cols, int hgap, int vgap)

Creates a new GridLayout with number of rows, columns, horizontal, and vertical gaps as specified.

GridLayout Exampleimport java.awt.*;


public class GridLayoutDemo extends JApplet

{

JButton b1 = new JButton("One");

JButton b2 = new JButton("Two");

JButton b3 = new JButton("Three");

JButton b4 = new JButton("Four");

JButton b5 = new JButton("Five");

public void init()

{

setLayout(new GridLayout(2,3,5,10));

add(b1);

add(b2);

add(b3);

add(b4);

add(b5);

}

}

setLayout(new GridLayout(1,3));

Additional columns automatically allocated to fit all the components.


setLayout(new GridLayout(2,1)); setLayout(new GridLayout(4,1));

Java computes the number of columns needed without regard to the values provided in the constructor.

Container Example

Roll #20

Crate of Jolly Ranchers (lifesavers - assorted)

Watermelon rolls (box)

Peach rolls (box)

Green Apple rolls (box)

Variety pack rolls(box)Roll #1

Roll #20

. . .

Roll #1Roll #20

. . .Roll #1

. . .

Roll #20

. . .

Roll #1

Raspberry pieces

Lemon pieces Tangerine pieces

Rootbeer pieces

. . .

Watermelon piece1

. . .

. . .

Peach piece 1

. . .. . .

. . .

. . .

Controlling Layouts

• Component(s) placement on a form are controlled by a layout manager that decides how the Component(s) lie largely based on the order that they are add(ed) to the form.

• The size, shape, and placement of components will differ from one layout manager to another.

• Layout managers adapt to the dimensions of your Applet/JApplet or application window, so if that window dimension is changed the size, shape, and placement of the components could change.

• We use Containers to group components into manageable units that help with their presentation on the screen.

• An Applet/JApplet is one such container and several others (each with its own specific purpose) are defined in the Java API.

• Container(s) are subdivided into those that must be attached to another graphical surface (e.g., Panel/JPanel and Applet/JApplet) and those that can be moved independently (Window and its children: Frame and Dialog).

Keeping Track of Things

•A container knows–what components are in it (could be other containers)–It’s own (local) coordinate system

•A component knows–It’s parent (the container it is in)

• There is no limit to the number of Components a Container can hold.

• Each Container has its own Layout Manager (of which there are 6 provided in Java (Flow, Border, Grid, GridBag, Card, and Box – we will only use the first 3!!).

• If a container's default layout manager doesn't suit your needs, you can easily replace it with another one.

Adding Components to a Container

• void add(Component c)–Add to the end of a list of components in this container

• void add(Component c, int position)–Add component at specified position (starting at 0; must be

between 0 and current # of components; -1 to add at end)

• void add(String name, Component C)–Useful with some Layout managers (Border and Card)

• Warning!!!–If you add a component that has already been placed in another

container, it will be removed from original container

The Containment Hierarchy• The containment hierarchy is not determined by the order in which you add

Component(s) to a Container, but rather by which ones you add to which.

• There is no limit to the number of Component(s) a Container may hold.

• Since the Container class is a subclass of Component, a Container object has access to all the Component methods through inheritance (we’ve used some of these already : setSize(), setForeground(), setBackground(etc.).

• Since a Container is itself a Component, we can put Containers within other Containers.

• By so doing, each Container can have its own LayoutManager that determines how its Component(s) will be arranged within the Container when it is displayed. Note: each Container has its own local coordinate system, measured from the anchor point of its bounding rectangle.

• The Container class is a large class having around 40 methods.

The JPanel Class

• The Container of choice for arranging Component(s).

• JPanel is a class of Container that is itself contained within a Container.

• JPanel is a Container that does not create a separate window of its own.

• It is suitable for holding other Components such as JButton(s), JComboBox(s), JLabel(s), etc.

• Once a top-level window is defined (implicit in the case of a JApplet), the JPanel class can be used to divide up the larger area into manageable sections. Each can have its own Layout Manager.

The JPanel ClassConstructors:

(1) JPanel()Builds a JPanel object with default layout manager (FlowLayout).

(2) JPanel(LayoutManager layout)Builds a JPanel object with the indicated layout manager.

Methods:

A JPanel has no additional methods of interest to us, beyond those it inherits from Container, Component, and Object.

• void setLayout(LayoutManager layout)Allows the user to change the LayoutManager of this Container.

• void doLayout()Instructs this Container’s LayoutManager to lay out the Component(s). Used to force layout to take place, rather than waiting for it to be done automatically for you.

• LayoutManager getLayout()Returns the current LayourManager for this Container.

• Dimension getMinimumSize()• Dimension getPreferredSize()

Asks the LayoutManager to compute the minimum or perferred sizes, necessary to hold all of this Container’s Component(s).

FlowLayout Panel Demoimport java.awt.*;import javax.swing.*;

public class FlowLayoutPanelDemo extends JApplet { JButton b1 = new JButton("One"); JButton b2 = new JButton("Two"); JButton b3 = new JButton("Three"); JButton b4 = new JButton("Four"); JButton b5 = new JButton("Five"); JButton b6 = new JButton("Six"); JPanel p = new JPanel(); //defaults to FlowLayout public void init() { setLayout(new FlowLayout()); add(b1); add(b2); add(b3); add(p); p.add(b4); p.add(b5); p.add(b6); }}

import java.awt.*;


public class BorderLayoutPanelDemo extends JApplet

{

BorderLayout myLO = new BorderLayout();

JPanel p1 = new JPanel();






public void init()

{

this.setLayout(myLO);

add("North",b1);

add("South",b2);

add("East",b3);

add("West",b4);

add("Center",p1);

p1.add(b5);

}

}

Buttons, BorderLayout, & Panels

import java.awt.*;import javax.swing.*;

public class BorderLayoutPanelDemo1 extends JApplet { JButton b1 = new JButton("One"); JButton b2 = new JButton("Two"); JButton b3 = new JButton("Three"); JButton b4 = new JButton("Four"); JButton b5 = new JButton("Five"); JButton b6 = new JButton("Six"); JButton b7 = new JButton("Seven"); JButton b8 = new JButton("Eight"); JButton b9 = new JButton("Nine"); JPanel p = new JPanel(new BorderLayout()); public void init() { setLayout(new FlowLayout()); add(b1); add(b2); add(b3); add(b4); add(p); p.add("North",b5); p.add("West",b6); p.add("Center",b7); p.add("East",b8); p.add("South",b9); }}

BorderLayout Panel Demo


public class ButtonTest extends JApplet { JButton b0 = new JButton ("0");JButton b1 = new JButton ("1");JButton b2 = new JButton ("2");JButton b3 = new JButton ("3");

public void init() {setLayout(new GridLayout(2,2));

add(b0); add(b1); add(b2); add(b3);}

}


public class ButtonTest extends JApplet {JButton b0 = new JButton ("0");JButton b1 = new JButton ("1");JButton b2 = new JButton ("2");JButton b3 = new JButton ("3");

JPanel p = new JPanel();

public void init() { p.setLayout(new GridLayout(2,2));

p.add(b0); p.add(b1); p.add(b2); p.add(b3);

add(p);}

}

GridLayout & Panels


public class GridLayoutPanelDemo extends JApplet { JButton b1 = new JButton("One"); JButton b2 = new JButton("Two"); JButton b3 = new JButton("Three"); JButton b4 = new JButton("Four"); JButton b5 = new JButton("Five"); JButton b6 = new JButton("Six"); JButton b7 = new JButton("Seven"); JButton b8 = new JButton("Eight"); JButton b9 = new JButton("Nine");

JPanel p = new JPanel(new GridLayout(3,2)); public void init() { setLayout(new FlowLayout()); add(b1); add(b2); add(b3); add(b4); add(p); p.add("North",b5); p.add("West",b6); p.add("Center",b7); p.add("East",b8); p.add("South",b9); }}

GridLayout Panel Demo

import java.awt.*;


public class PanelDemo extends JApplet

{

JButton b1 = new JButton("One"), b2 = new JButton("Two"), b3 = new JButton("Three”), b4 = new JButton("Four”); JButton b5 = new JButton("Five"), b6 = new JButton("Six”), b7 = new JButton("Seven");

JTextArea ta1 = new JTextArea(5,15), ta2 = new JTextArea(5,15), ta3 = new JTextArea(5,15);

JTextField tf1 = new JTextField(15), tf2 = new JTextField(15);

JComboBox c1 = new JComboBox();

JPanel p1 = new JPanel(), p2 = new JPanel (new BorderLayout()), p3 = new JPanel (new GridLayout(2,1));

JPanel p4 = new JPanel (new BorderLayout()), p5 = new JPanel(), p6 = new JPanel(), p7 = new JPanel();

public void init()

{


add(b1);

add(p1);

p1.add(b2);

add(p2);

p2.add("North",b3);

p2.add("West",c1);

p2.add("East",ta3);

p2.add("South",tf1);

add(p3);

p3.add(b4);

p3.add(ta1);

add(p4);

p4.add("North",p5);

p5.add(b5);;

p4.add("Center",p6);

p6.add(ta2);

p4.add("South",p7);

p7.add(tf2);

}

}

import java.awt.*;


public class AddPanelDemo extends JApplet

{

JPanel pa = new JPanel();//defaults to FlowLayout

JButton b = new JButton ("Help");

JTextField tf = new JTextField("Enter name here",20);

JTextArea ta = new JTextArea("HELLO",5,20);public void init() {

add(pa);pa.add(b); pa.add(tf); pa.add(ta);

}}

import java.awt.*;


public class AddPanelDemo extends JApplet

{

JPanel pa = new JPanel(); //defaults to FlowLayout

JButton b = new JButton ("Help");

JTextField tf = new JTextField("Enter name here",20);

JTextArea ta = new JTextArea("HELLO",5,20);

public void init()

{

add(pa);

pa.add(b); pa.add(tf); pa.add(ta,0);

}

}

Example

Text Figure 4.2import java.awt.*;import java.applet.Applet;

public class TrivialApplet extends Applet{

// These declarations could be done in any order.Panel panelA = new Panel();Panel panelB = new Panel();Panel panelA1 = new Panel();Panel panelA2 = new Panel();Button button1 = new Button("button1");Button button2 = new Button("button2");List list1 = new List();List list2 = new List();TextField textfield = new TextField("textfield");Choice choice = new Choice();

public void init() { // Now we build the containment hierarcy, from the // botton up.

panelA1.add(button1);panelA1.add(list1); // done with panelA1


panelA.add(panelA1);panelA.add(panelA2); // done with panelA

panelB.add(textfield);panelB.add(choice); // done with panelB

add(panelA); // add panelA to the appletadd(panelB); // add panelB to the applet -- finished!

}}

What we want to achieve:

button1

button2 list2

list1 textfield

choice

panelB

panelA1

applet

panelA

panelA2

Will this code do it?

Result



// These declarations could be done in any order.Panel panelA = new Panel(new GridLayout(2,1));Panel panelB = new Panel(new GridLayout(2,1));Panel panelA1 = new Panel();Panel panelA2 = new Panel();Button button1 = new Button("button1");Button button2 = new Button("button2");List list1 = new List();List list2 = new List();TextField textfield = new TextField("textfield");Choice choice = new Choice();

public void init() {






}}

What we get:

Stretched -











}}

What we get:










add(“West”,panelA); // add panelA to the appletadd(“East”,panelB); // add panelB to the applet --

finished!}

}

What we get:

import java.awt.*;import java.applet.Applet;


// These declarations could be done in any order.Panel panelA = new Panel(new GridLayout(2,1));Panel panelB = new Panel(new GridLayout(2,1,5,5));Panel panelA1 = new Panel();Panel panelA2 = new Panel();Panel mainPanel = new Panel(new FlowLayout());Button button1 = new Button("button1");Button button2 = new Button("button2");List list1 = new List();List list2 = new List();TextField textfield = new TextField("textfield");Choice choice = new Choice();






mainPanel.add(panelA); // add panelA to the appletmainPanel.add(panelB); // add panelB to the applet --

finished!add(mainPanel);

}}

What we get:

Some Container Methodsimport java.awt.*;import java.applet.Applet;

public class Demo extends Applet{ Panel pa = new Panel();

Button b = new Button ("Help");TextField tf = new TextField("Enter name here",25);TextArea ta = new TextArea("HELLO",5,20);public void init() {

pa.add(b); pa.add(tf); pa.add(ta,0);add(pa);

pa.remove(b); // remove a component}

}

import java.awt.*;import java.applet.Applet;

public class Demo extends Applet{ Panel pa = new Panel();

Button b = new Button ("Help");TextField tf = new TextField("Enter name here",25);TextArea ta = new TextArea("HELLO",5,20);public void init() {

pa.add(b); pa.add(tf); pa.add(ta,0);add(pa);int cnt = pa.countComponents();System.out.println(“Num of components is “ + cnt);

}}

import java.awt.*;


public class NullLayoutDemo extends JApplet

{

JLabel greeting = new JLabel("Hello -- welcome to my java applet");

JLabel prompt = new JLabel ("Please enter your name:");

JTextField inputLine = new JTextField(20);

JButton continueButton = new JButton( "Continue");

int xPos = 0, yPos = 0;

public void init()

{

//setLayout(null);

// add the components and set their location

add(greeting);

greeting.setLocation(0,0);

add(prompt);

prompt.setLocation(10,50);

add(inputLine);

inputLine.setLocation(10,100);

add(continueButton);

continueButton.setLocation(15,150);

}

}

setLocation is ignored since the default is BorderLayout.CENTER

The result when the setLayout(null)

command is uncommented.

Absolute Positioning of GUI Objects

import java.awt.*;



{






public void init()

{

setLayout(null);



add(greeting);

greeting.setBounds(5,5,40,10);

add(prompt);

prompt.setBounds(10,30,20,10);

add(inputLine);

inputLine.setBounds(10,100,25,30);


continueButton.setBounds(15,150,20,5);

}

}

Absolute Positioning of GUI Objects (continued)

import java.awt.*;

import java.applet.Applet;

public class NullLayoutDemo extends Applet

{

Label greeting = new Label("Hello -- welcome to my java applet");

Label prompt = new Label ("Please enter your name:");

TextField inputLine = new TextField(20);

Button continueButton = new Button( "Continue");


int w = 100, h = 20;

public void init()

{

setLayout(null);


add(greeting);

greeting.setBounds(xPos,yPos,2*w,2*h);

add(prompt);

prompt.setBounds(6*xPos,yPos+3*h,2*w,yPos+h);

add(inputLine);

inputLine.setBounds(xPos,yPos+5*h,2*w,yPos+h);


continueButton.setBounds(8*xPos,7*h,w,yPos+h);

}

}


import java.awt.*;



{





int xPos = 5, yPos = 5, width = 100, height = 20;

public void init()

{

setLayout(null);

// add the components

add(greeting);

add(prompt);

add(inputLine);

add(continueButton);;

// set both the components size and location

greeting.setSize(300,20);

greeting.setLocation(5,5);

prompt.setSize(150,20);

prompt.setLocation(25,25);

inputLine.setSize(150,20);

inputLine.setLocation(12,60);

continueButton.setSize(90,20);

continueButton.setLocation(60,100);

}

}


Documents

TCU CoSc 10403 Programming with Java Visual Design (Chapter 5)