2. GUIS
▪ Recall from the previous lecture: create a frame and
then get the content pane for that frame
▪ Now we’re going to place some stuff on the pane.
▪ Recall that the different elements on the frame are
going to be objects
• Frame objects
• Button objects
• TextField objects
• Label objects
• Menu objects
• Checkbox objects
• List objects
• Radio objects
3. GUIS
Recall from the last lecture:
▪ Many of the GUI components are from the javax.swing
package
▪ Also java.awt package
4. GUIS
▪ Generally, these objects have methods that we can use
to interact with them:
– A.add(B) – adds component B to component A
– A.setSize(width, height)
– A.setLayout(…)
– A.setVisible(…)
▪ Will see examples of this in the next lecture
▪ This lecture will focus on placement.
6. Adding objects to frames
Object placement
▪ Components on our frames are objects created from different
classes – e.g. button objects, checkbox objects etc.
▪ We can place them on different parts of the frame, for now,
placing them on content pane
7. Adding objects to frames
▪ Recall from previous lecture, the part of the frame that
we put stuff on is called the content pane – everything
but the title, menu bars and border.
▪ When we add stuff to our frame, we actually add it to
the content pane
Frame
Content pane
Buttons
8. Adding objects to frames
Object placement
▪ So we need to get hold of the content pane before we can add
stuff to it:
Container cp = jf.getContentPane();
▪ Once we have something to add to the content pane…
okButton = //Code for creating buttons – see later
▪ … we use the content pane’s add() method.
cp.add(okButton);
10. Object Placement
▪ We need a way to determine where objects are placed
▪ Two ways:
– Layout manager
– Absolute positioning (doesn’t use a Layout Manager)
▪ Either way, done through the setLayout(…) method.
11. Object Placement
▪ Have to decide what we giving a Layout Manager e.g.
content pane.
▪ If it is the content pane, we get need get it:
Container cp = jf.getContentPane();
12. Object Placement
▪ Absolute positioning: each GUI object’s position is
specified explicitly.
▪ Use the setLayout() method of the content pane object.
Container cp = jf.getContentPane();
...
cp.setLayout(null);
▪ Then, when objects are added, need to specify their
size and position – will see later.
14. GUIS – to be omitted
Example:
▪ FlowLayout puts the objects left to
right, top to bottom
▪ GridLayout puts the objects in a
grid
▪ BorderLayout, CardLayout…
1 2 3
4 5 6
NORTH
SOUTH
WEST EAST
CENTER
15. Object Placement
Setting the Layout Manager:
▪ Again, assume we are giving the content pane a Layout
Manager
Container cp = jf.getContentPane();
▪ Then call the setLayout(…) method and pass it an instance of
the layout class
FlowLayout LM = new FlowLayout();
cp.setLayout(LM);
16. Object Placement
▪ Alternatively…
cp.setLayout(new FlowLayout());
▪ Or, if we want to be really fancy:
jf.getContentPane().setLayout(new FlowLayout());
▪ If we want to use a different layout manager:
cp.setLayout(new BorderLayout());
cp.setLayout(new GridLayout());
18. GUIs ‐ FlowLayout
▪ FlowLayout: GUI components are
placed left to right, top to bottom.
19. GUIs ‐ FlowLayout
▪ We can specify some options when we create layout manager
objects by passing class constants to the constructor:
▪ Recall: class constants are a way to give meaningful names to
certain values.
▪ So when creating a new FlowLayout object, we can pass it a
class constant from the FlowLayout class to specify e.g. centre
alignment
cp.setLayout(new FlowLayout(FlowLayout.CENTER));
cp.setLayout(new FlowLayout(FlowLayout.LEFT));
▪ Default is FlowLayout.CENTER
20. GUIs ‐ FlowLayout
▪ Can also specify the gap between components
cp.setLayout(new FlowLayout(FlowLayout.CENTER, 5, 10));
21. GUIs – BorderLayout
▪ BorderLayout: GUI components are
arranged in five regions: North, South,
East, West and Centre.
▪ Call the setLayout() method but pass it a
BorderLayout object:
cp.setLayout(new BorderLayout());
NORTH
SOUTH
WEST EAST
CENTER
• Can also change the gaps:
cp.setLayout(new BorderLayout(5, 10));
22. GUIs – BorderLayout
▪ BorderLayout:
▪ North, South, East and West regions take
as much space as they need, Centre
region takes the rest.
NORTH
SOUTH
WEST EAST
CENTER
• When we add components now, the second argument is the
region, again specified with class constants:
cp.add(okButton, BorderLayout.WEST);
cp.add(cancelButton, BorderLayout.EAST);
23. GUIS ‐ GridLayout
▪ GridLayout: GUI components are arranged
in a grid, specified on creation
▪ Each “cell” on the grid is the same size
▪ Call the setLayout() method, pass it a
GridLayout object, with no of rows and cols…
cp.setLayout(new GridLayout(2, 3));
1 2 3
4 5 6
• … or can also specify the gaps
cp.setLayout(new GridLayout(2, 3, 5, 5));
24. GUIS ‐ GridLayout
1 2 3
4 5 6
• Added components are then added to fill
row by row:
cp.add(Button1);
cp.add(Button2);
cp.add(Button3);
...
• Also, GridBayLayout – more control
26. Panels
▪ So far we have set the layout of content panes…
Container cp = jf.getContentPane();
cp.setLayout(new FlowLayout());
▪ …but now we are going to set the layout of panels
▪ Panels are JPanel objects which are like mini
content panes
– Can add components to panels
– Set panel’s layout
▪ Enable the sectioning of the frame into different logical
sections.
27. Panels
▪ Content pane has a
layout manager, its
components are
arranged accordingly.
▪ But if a component is a
panel, it will have its
own layout manager
for the components
inside of it.
▪ We can even have
nested panels – panels
within panels
Frame
Content pane
Buttons
Panel
Panel
29. GUIS ‐ BoxLayout
▪ BoxLayout: like an advanced FlowLayout
▪ Components are arranged in either vertical or horizontal
orientation – horizontal can be left-to-right or right-to-left
30. GUIS ‐ BoxLayout
▪ Can also add invisible components to help
with the spacing:
▪ Rigid area – creates a fixed space between
components
▪ Box class has a class method to return a
rigid area:
▪ This method takes a Dimension object –
specifies the height and width in pixels
Box.createRigidArea(new Dimension(10, 0))
31. GUIS ‐ BoxLayout
▪ Can also add invisible components to help
with the spacing:
▪ Glue – creates space as much horizontal or
vertical space as necessary to shove the
components to the border.
▪ Box class has a class method to return glue:
Box.createHorizontalGlue();
Box.createVerticalGlue();
32. GUIS ‐ BoxLayout
▪ Can also add invisible components to help
with the spacing:
▪ Filler – creates a flexible space with a
maximum, minimum and preferred size.
▪ Box class can be used to create Filler
objects, constructor takes Dimension objects:
new Box.Filler( , , )
new Dimension(10,10)
new Dimension(10,20)
new Dimension(10,30)
33. GUIS ‐ BoxLayout
▪ So let’s put this altogether – let’s imagine we have a
panel on our form that contains the buttons:
▪ Create a panel:
JPanel buttonPanel = new JPanel();
▪ Set the panel’s layout, by passing it a BoxLayout object
– takes:
– Object it is being applied to and the axis (top-down vs left-right)
buttonPanel.setLayout(new BoxLayout(buttonPanel, BoxLayout.LINE_AXIS));
OR
buttonPanel.setLayout(new BoxLayout(buttonPanel, BoxLayout.PAGE_AXIS));
34. GUIS ‐ BoxLayout
▪ So let’s put this altogether – let’s imagine we have a panel on our
form that contains the buttons:
▪ Create buttons (don’t worry about this for now):
JButton okButton = new JButton("OK");
JButton cancelButton = new JButton("Cancel");
▪ Now add the buttons with some “invisible components”
buttonPanel.add(Box.createHorizontalGlue());
buttonPanel.add(okButton);
buttonPanel.add(Box.createRigidArea(new Dimension(10, 0)));
buttonPanel.add(cancelButton);
