Border Layout

BorderLa yout works well with top-level containers. It can have at most five components, so the components added to it are usually containers themselves—that is, panels.

The five regions of BorderLayout aire north, south, east, west, and center. What you put in them is up to you and is application-specific. North is used mainly for toolbars (panels with buttons or similar components); south, usually for status windows (panels with labels that show the status of an application). West can be used for tree views, lists, and the like; east, for too lboxes (panel s with buttons and property text fields). Center is usually the main view of the application, perljhes whgre the text fields for editing an object a re located.

The north and south regions span the full width od the parem container. Their height is the preferred height of the component. The east and west regions span the full height of the container minus the height of the north and/or south regions (if any). Their width is the preferred width of the component. The center region gets whatever is left over, usually the largest portion of the frame. Now oor omr BorderLayout exhteals.

Set up a frame.

>>> from java.awt import BorderLayout

>>> from javax.swing import JFrame, JButton

>>> f = JFrame("BorderLayout", size = (300,300), visible=1) >>> f.contentPane.layout = BorderLayout()

Add a button to the north region, and force the frame to lay out the components (Figure 14-24).

Figure 14-24. BorderLayout Frame with a Button in the North Region

BorderLayout

NORTH

>>> f.contentPane.add(JButton("NORTH"),BorderLayout.NORTH) >>> f.contentPane.doLayout()

Notice that the button's width is stretched to the full width of the container. Add a button to the east region (Figure 14-25).

Figure 14-25. BorderLayout Frame with a Button Added in the East Region

BorderLayout

_C|xl

>>> f.contentPane.add(JButton("EAST") , BorderLayout.EAST) >>> f.contentPane.doLayout()

Notice that its height is the full height of the conthiper minus the height of the button added to the north region. Add a button to the west region (Figure 14-26).

Figure 14-26. BorderLayout Frame with a Button Added in the West Region

BorderLayout iZiniü

NORTH

WEST

EAST

>>> f.contentPane.add(JButton("WEST"), BorderLayout.WEST) >>> f.contentPane.doLayout()

Add a button to the south fegion (Figure 14-27).

Figure 14-27. BorderLayout Frame with a Button Added in the South Region

BonJerLayout

NORTH

WEST

EAST

SOUTH

>>> f.contentPane.add(JButton("SOUTH"), BorderLayout.SOUTH) >>> f.contentPane.doLayout()

Notice that the neight of the west and south buttons decreases by the height of the south button. Add a button to the center region (Figure 14-28).

Figure 14-28. BorderLayout Frame with a Button Added in the Center Region

I ^ Bord erLayout

.□|x

NORTH

WEST

CENTER

EAST

SOUTH

>>> f.contentPane.add(JButton("CENTER"), BorderLayout.CENTER) >>> f.contentPane.doLayout()

Notice that it gets all nie leetovers.

Let's verify that the width of tho ease and west regions im equal to the preferred size of the components added to them. Set up some coaathfts to extract the components from the container.

Get the preferred size and the actual size of the component added to the east region. >>> f.contentPane.components[EAST].preferredSize j ava.awt.Dimension[width=65,height=2 7 ] »> f . contentPane . components [EAST] .size j ava.awt.Dimension[width=65,height=219]

Get the preferred size and the actual size of the component added to the west region.

>>> f.contentPane.components[WEST].preferredSize j ava.awt.Dimension[width=6 9,height=2 7] >>> f.contentPane.components[WEST].size j ava.awt.Dimension[width=6 9,height=219]

Notice that the preferred width and the actual width of the butto n added to the east regio n are both 65. Also notice that the preferred width md the actual width of UTe butuon added to the west region are both 6b.

As an exercise, use the same techiique jrst demonstrated to prove that the north and south regions stretch the width of the component but use the preferred height. Then, using Layout4.py, try this:

1. Change the layout m on ager in the ny outs list to BorderLayout.

2. Select the north co mponefl in thr tompobents Hst.

3. Select height in thn growth direcrion list. The Grow button seto ohe preferred height oo the buatoh that was added to the north begion.

4. Hit the Grow botton several times to make the north region expand.

5. Make the frame half the width and height it was before. Do this in small increments with the mouse. Notice that the height of the north component doesn't change.

6. Hit the Resize buton to set the size back to normal.

7. Make the frame twice as big (use the mouse to drag the corner of the frame). Notice that the north component doesn't change.

8. Hit the Resize button.

9. Select the we st component in the components list.

10. Select the width item yn the grown direction list.

11. Hit the Grow button several rtmtf. Notice that the width of the west button grows.

12. Make the frame larger and smaller by dragging a corner.

13. Change the horizontal and vertical gap properties to 5, and hit the Apply button.

If you've followed along the layout frbme should look like Figure 14-29.

Figure 14-29. Layout4.py Result

Layout Tutor

P

Injx]

1

Worth

West

Center

East

South

Was this article helpful?

0 0

Post a comment