Panels and Layouts

Flow Layout | Grid Layout | Panels in Panels | Questions

Positioning Tricks

1. Don’t worry so much

• Does it really, really matter if the button is exactly where you want it?
• Unless it’s REALLY ugly, it doesn’t matter.
• You never notice that Ms. Gorski spends no effort on positioning, she doesn’t notice all of the time that you spend on it. Just move on.
• Ms. Gorski has never managed to convince anyone of this but the fact that you can’t precisely position things in applets is a FEATURE. Because java's applets are designed to run on many different operating systems, all with different screen sizes, widgets are placed on the screen depending on the space available.

• Put the widgets on in the order you want.
• Fidget around with the window size until it looks good.
• in init():

  resize(230,100);
  resize(xdimension, ydimension);

• the key to this is making them "hide" by making them the same colour as the background colour
• option 1: make a gif that is the background colour and import it in a label
• option 2: write on a label to make the right length and setForeground to be the background colour so it doesn’t show up

4. Put spaces around titles and labels to “center”

5. If you must, use panels. (Instructions follow).

Layout Options

• Panels have "layouts" or ways of ordering them. We will have two main ones: Grid layout and Flow Layout.
• A layout can be applied to an entire applet or to a panel in an object.
• The layout types are:
  • flowLayout – the default, it adds things in a row.
  • gridLayout – it adds things in rows and columns. Each box is the same size (it expands widgets to make them all the same size)
  • borderLayout – there is a North, South, East, West and Center space to add things
  • cardLayout – the most complex. Cards are used to make screens.
    

Flow Layout

import java.applet.Applet;
import java.awt.*;
import javax.swing.*;
public class FlowLayouttest extends Applet
{
JButton b1, b2;
JPanel p1;
public void init () {
p1 = new JPanel (new FlowLayout ());
b1 = new JButton ("A");
b2 = new JButton ("B");
p1.add (b1);
p1.add (b2);
p1.setBackground (Color.blue);
add (p1);
}
} 

The new code concerning the panel is in bold. First we declare the panel object, then we construct the panel. When constructing it, we tell the panel that we want it to be a flow layout. We add the widgets to the panel in the order we wish them to appear, then we add the entire panel to the applet.  

Grid Layout

This code applies a grid layout to a panel. This means that it doesn't fit the entire screen.

import java.applet.Applet;
import java.awt.*;
import javax.swing.*;
public class GridLayoutTest extends Applet
{ //three poorly name buttons for our panel
JLabel l1, l2, l3;
//three poorly named buttons for our panel
JButton b1, b2, b3; //the grid panel
JPanel grid;
public void init ()
{ //construct the buttons and labels
l1 = new JLabel ("Label 1");
l2 = new JLabel ("Label 2");
l3 = new JLabel ("Label 3");
b1 = new JButton ("1");
b2 = new JButton ("2");
b3 = new JButton ("3");
//construct the panel to be a grid
//3 down, 2 across, spacing of 10 pixels all around
grid = new JPanel (new GridLayout (3, 2,10,10));
//add the items to the grid, left to right, then top to bottom
grid.add (l1);
grid.add (b1);
grid.add (l2);
grid.add (b2);
grid.add (l3);
grid.add (b3);
//add the entire grid panel to the applet
add (grid);
}
}

Suppose however, that we delete the panel and set the entire applet to be a grid layout. The, the widget's size will be expanded to fill the entire screen. The code in init will look like this:

import java.applet.Applet;
import java.awt.*;
import javax.swing.*;
public class GridLayoutTest extends Applet
{ //three poorly name buttons for our panel
JLabel l1, l2, l3;
//three poorly named buttons for our panel
JButton b1, b2, b3;
//the grid panel
JPanel grid;
public void init ()
{ //construct the buttons and labels
l1 = new JLabel ("Label 1");
l2 = new JLabel ("Label 2");
l3 = new JLabel ("Label 3");
b1 = new JButton ("1");
b2 = new JButton ("2");
b3 = new JButton ("3");
setLayout (new GridLayout (3, 2,10,10));
//add the items to the applet
add (l1);
add (b1);
add (l2);
add (b2);
add (l3);
add (b3);
} }

Note: Since the gridLayout makes everything the same size, it you don’t want the widgets to all be the same size, you need to:

• make a little panels
• Add the widget to the little panel
• Add the little panel to the grid

Note2: There are two other layouts that I have not discussed here. They are the cardlayout (which allows multiple screens) and the border layout (which allows you to position things around the borders). Examples of these are found on the I:// in the Unit 2 folder.

Panels in Panels.

You can stack panels up. Here, there is a flowlayout panel inside a gridlayout panel.

import java.applet.Applet;
import java.awt.*;
import javax.swing.*;
public class GridLayoutTest extends Applet
{ //three poorly name buttons for our panel
JLabel l1, l2, l3;
//three poorly named buttons for our panel
JButton b1, b2, b3,b4,b5;
  //the grid panel
JPanel g1,p1;
public void init ()
{
g1 = new JPanel (new GridLayout (2, 2));
p1 = new JPanel (new FlowLayout ());
b1 = new JButton ("A");
b2 = new JButton ("B");
b3 = new JButton ("C");
b4 = new JButton ("D");
b5 = new JButton ("E");
p1.add (b1);
p1.add (b2);
p1.setBackground (Color.blue);
g1.add (p1);
g1.add (b3);
g1.add (b4);
g1.add (b5);
add (g1);
}
}

Layout and Panel Questions:

1. Make these layouts:

(a)              

 (b)