box.html

jsf、swing的官方指南

<p>

As an alternative to using invisible components,
you can sometimes use empty borders to create space around components.
For example, the preceding code snippet uses
empty borders to put 10 pixels
between all sides of the dialog and its contents,
and between the two parts of the contents.
Borders are completely independent of layout managers.
They're simply how Swing components draw their edges.
See
<a class="TutorialLink" target="_top" href="../components/border.html">How to Use Borders</a> for more information.

<p>

The following sections discuss <code>BoxLayout</code>
in more detail:

<ul>
<li> <a href="#features">Box layout features</a>
<li> <a href="#filler">Using invisible components as filler</a>
<li> <a href="#alignment">Fixing alignment problems</a>
<li> <a href="#size">Specifying component sizes</a>
<li> <a href="#api">The box layout API</a>
<li> <a href="#eg">Examples that use box layouts</a>
</ul>

Don't let the length of the <code>BoxLayout</code> discussion
scare you!
You can probably use <code>BoxLayout</code>
with the information you already have.
If you run into trouble or you want to take advantage of
<code>BoxLayout</code>'s power,
read on.

</blockquote>
<h3>
<a name="features">
Box Layout Features
</a>
</h3>
<blockquote>

As we said before,
<code>BoxLayout</code> arranges components either
on top of each other
or in a row.
As the box layout arranges components,
it takes the components'
alignments and minimum, preferred, and maximum sizes into account.
In this section, we'll talk about top-to-bottom layout.
The same concepts apply to left-to-right or right-to-left layout.
You simply substitute X for Y,
height for width, and so on.

<blockquote><hr><strong>Version note:</strong>&nbsp;Before 1.4, no constants existed for specifying the
box layout's axis
in a localizable way.
Instead, you specified <code>X_AXIS</code>
(left to right)
or <code>Y_AXIS</code>
(top to bottom)
when creating the <code>BoxLayout</code>.
Our examples now use the constants
<code>LINE_AXIS</code> and <code>PAGE_AXIS</code>,
which are preferred
because they enable programs to adjust
to languages that have different orientations.
In the default, left-to-right orientation,
<code>LINE_AXIS</code> specifies left-to-right layout
and <code>PAGE_AXIS</code> specifies top-to-bottom layout.
<hr></blockquote>

<p>

When a <code>BoxLayout</code> lays out components
from top to bottom,
it tries to size each component at the component's preferred height.
If the amount of vertical space is not ideal,
the box layout tries to adjust each components' height
so that the components fill
the available amount of space.
However, the components might not fit exactly,
since <code>BoxLayout</code>
respects each component's requested minimum and maximum heights.
Any extra space appears at the bottom of the container.

<p>

A top-to-bottom box layout
tries to make all of its container's components equally wide &#151;
as wide as the largest preferred width.
If the container is forced to be wider than that,
then the box layout tries to make all the components
as wide as the container.
If the components aren't all the same width
(due to restricted maximum size
or to any of them having strict left or right alignment),
then X alignment comes into play.

<p>

The X alignments affect not only the components' positions
relative to each other,
but also the location of the components (as a group)
within their container.
The following figures illustrate alignment
of components that have restricted maximum widths.


<p align=center>
<IMG SRC="../../figures/uiswing/layout/BoxLayoutDemo-left.png" WIDTH="124" HEIGHT="181" ALT="Three left-aligned components">&nbsp;
<IMG SRC="../../figures/uiswing/layout/BoxLayoutDemo-center.png" WIDTH="126" HEIGHT="181" ALT="Three center-aligned components">&nbsp;
<IMG SRC="../../figures/uiswing/layout/BoxLayoutDemo-right.png" WIDTH="124" HEIGHT="181" ALT="Three right-aligned components"></p>

<p>
In the first figure, all three components have an X alignment
of 0.0 (<code>Component.LEFT_ALIGNMENT</code>).
This means that the components' left sides
should be aligned.
Furthermore, it means that all three components are positioned
as far left in their container as possible.

<p>

In the second figure,
all three components have an X alignment
of 0.5 (<code>Component.CENTER_ALIGNMENT</code>).
This means that the components' centers
should be aligned,
and that the components should be positioned
in the horizontal center of their container.

<p>

In the third figure,
the components have an X alignment
of 1.0 (<code>Component.RIGHT_ALIGNMENT</code>).
You can guess what that means for the components'
alignment and position relative to their container.

<p>

You might be wondering what happens
when the components have both restricted maximum sizes
and different X alignments.
The next figure shows an example of this:

<p><center><IMG SRC="../../figures/uiswing/layout/BoxLayoutDemo-wacky.png" WIDTH="249" HEIGHT="181" ALIGN="BOTTOM" ALT="Three components with mixed X alignments"></center></p>
<p>
As you can see, the left side of the component
with an X alignment of 0.0
(<code>Component.LEFT_ALIGNMENT</code>)
is aligned with the center of the component
that has the 0.5 X alignment
(<code>Component.CENTER_ALIGNMENT</code>),
which is aligned with
the right side of the component
that has an X alignment of 1.0
(<code>Component.RIGHT_ALIGNMENT</code>).
Mixed alignments like this are further discussed in
<a href="#alignment">Fixing Alignment Problems</a>.

<p>

What if none of the components has a maximum width?
Well, if all the components have identical X alignment,
then all components are made as wide as their container.
If the X alignments are different,
then any component with an X alignment of 0.0 (left)
or 1.0 (right) will be smaller.
All components with an intermediate X alignment (such as center)
will be as wide as their container.
Here are two examples:

<p align=center>
<IMG SRC="../../figures/uiswing/layout/BoxLayoutDemo-left2.png" WIDTH="200" HEIGHT="181" ALT="Three components with mixed X alignments and no maximum size">&nbsp;
<IMG SRC="../../figures/uiswing/layout/BoxLayoutDemo-wacky2.png" WIDTH="202" HEIGHT="181" ALT="Three components with mixed X alignments and no maximum size"></p>

To get to know <code>BoxLayout</code> better,
you can run your own experiments with BoxLayoutDemo2.


<blockquote><hr><strong>Try this:</strong>&nbsp;
<ol>
<li> <a href="http://java.sun.com/docs/books/tutorialJWS/uiswing/layout/examples/BoxLayoutDemo2.jnlp">Run BoxLayoutDemo2</a> using
<a class="TutorialLink" target="_top" href="../../information/javawebstart.html">Java<sup><font size=-2>TM</font></sup> Web Start</a>.    Or, to compile and run the example yourself,
     consult the
     <a href="examples/index.html#BoxLayoutDemo2">example index</a>.
<br>
     You'll see a window like the one above that contains three
     rectangles.  Each rectangle is an instance of <code>BLDComponent</code>,
     which is a <code>JComponent</code> subclass.

<li> Click inside one of the rectangles.
     <br>
     This is how you change the rectangle's X alignment.

<li> Click the check box at the bottom of the window.
     <br>
     This turns off restricted sizing for all the rectangles.

<li> Make the window taller.
     <br>
     This makes the rectangles' container
     larger than the sum of the rectangles' preferred sizes.
     The container is a <code>JPanel</code> that has
     a red outline, so that you can tell where the container's
     edges are.
</ol>
<hr></blockquote>

<p>

</blockquote>
<h3>
<a name="filler">
Using Invisible Components as Filler
</a>
</h3>
<blockquote>

Each component controlled by a box layout
butts up against its neighboring components.
If you want to have space between components,
you can either add an empty
<a href="border.html">border</a> to one or both components,
or insert invisible components to provide the space.
You can create invisible components
with the help of the <code>Box</code> class.

<p>

The
<a class="APILink" target="_blank" href="http://java.sun.com/javase/6/docs/api/javax/swing/Box.html"><code>Box</code></a> class defines a nested class,
<a class="APILink" target="_blank" href="http://java.sun.com/javase/6/docs/api/javax/swing/Box.Filler.html"><code>Box.Filler</code></a> that provides invisible components.
The <code>Box</code> class
provides convenience methods
to help you create common kinds of filler.
The following table gives details about
creating invisible components with <code>Box</code> and
<code>Box.Filler</code>.

<p>


<table border=1>
<tr>
<th colspan = 2>Type
</th>
<th>Size Constraints
</th>
<th>How to Create
</th>
</tr>

</tr>
<tr><td colspan=2><a href="#rigidarea">rigid area</a></td>
 </td>
 <td>

<CENTER>
<IMG SRC="../../figures/uiswing/layout/7fill.gif" WIDTH="42" HEIGHT="42" ALT="Three components with mixed X alignments and no maximum size"></CENTER>

 </td>
</td>
<td><pre>Box.createRigidArea(size)</pre></td></tr>


</td>
</tr>
<tr>
<td rowspan=2><a href="#glue">glue</a>
</td>
<td> horizontal
</td>
<td>

<CENTER>
<IMG SRC="../../figures/uiswing/layout/9fill.gif" WIDTH="60" HEIGHT="13" ALT="Three components with mixed X alignments and no maximum size"></CENTER>

</td>
<td>
<pre>
Box.createHorizontalGlue()
</pre>

</td>
</tr>
<tr>
</td>
<td> vertical
</td>
<td>

<CENTER>
<IMG SRC="../../figures/uiswing/layout/8fill.gif" WIDTH="13" HEIGHT="60" ALT="Three components with mixed X alignments and no maximum size"></CENTER>
</td>
<td>
<pre>
Box.createVerticalGlue()
</pre>

</td>
</tr>
<tr>
<td colspan=2><a href="#box.filler">custom <code>Box.Filler</code></a></td>
</td>
<td><em>(as specified)</em></td>
</td>
<td> <pre>new Box.Filler(minSize, prefSize,
               maxSize)</pre></td>
</tr>
</table>

<p>

Here's how you generally use each type of filler:
<dl>
<dt> <a name="rigidarea"><strong>Rigid area</strong></a>
<dd> Use this when you want a fixed-size space between two components.
     For example, to put 5 pixels between two components
     in a left-to-right box,
     you can use this code:
<blockquote><pre>
container.add(firstComponent);
container.add(Box.createRigidArea(new Dimension(5,0)));
container.add(secondComponent);
</pre></blockquote>

<TABLE>
 <TR>
   <TD>

<IMG SRC="../../figures/uiswing/layout/3fill.gif" WIDTH="169" HEIGHT="95" ALT="Without rigid area">   </TD>
   <TD>
<IMG SRC="../../figures/uiswing/layout/6fill.gif" WIDTH="168" HEIGHT="95" ALT="With rigid area">   </TD>

 </TR>
</TABLE>

<p>
<hr>
<strong>Note:</strong>
The <code>Box</code> class provides another kind of filler
for putting fixed space between components: a
vertical or horizontal strut.
Unfortunately, struts have unlimited maximum heights or widths
(for horizontal and vertical struts, respectively).
This means that if you use a horizontal box within a vertical box,
for example,
the horizontal box can sometimes become too tall.
For this reason,
we recommend that you use rigid areas instead of struts.
<hr>
<p>

<dt> <a name="glue"><strong>Glue</strong></a>
<dd> Use this to specify where excess space in a layout
     should go.
     Think of it as semi-wet glue &#151;
     stretchy and expandable, yet taking up no space
     unless you pull apart the components that it's sticking to.
     For example, by putting horizontal glue
     between two components in a left-to-right box,
     you make any extra space go between those components,
     instead of to the right of all the components.
     Here's an example of making the space in a left-to-right box
     go between two components,
     instead of to the right of the components:
     <blockquote><pre>
container.add(firstComponent);
container.add(Box.createHorizontalGlue());
container.add(secondComponent);
</pre></blockquote>

<TABLE>
 <TR>
   <TD>
<IMG SRC="../../figures/uiswing/layout/2fill.gif" WIDTH="171" HEIGHT="99" ALT="Without horizontal glue">   </TD>
   <TD>
<IMG SRC="../../figures/uiswing/layout/5fill.gif" WIDTH="171" HEIGHT="99" ALT="With glue">   </TD>

 </TR>
</TABLE>


<p>

<dt> <a name="box.filler"><strong>Custom <code>Box.Filler</code></strong></a>
<dd> Use this to specify a component
     with whatever minimum, preferred, and maximum
     sizes you want.  For example,
     to create some filler in a left-to-right layout that puts
     at least 5 pixels between two components
     and ensures that the container has a minimum height of 100 pixels,
     you could use this code:
<blockquote><pre>
container.add(firstComponent);
Dimension minSize = new Dimension(5, 100);
Dimension prefSize = new Dimension(5, 100);
Dimension maxSize = new Dimension(Short.MAX_VALUE, 100);
container.add(new Box.Filler(minSize, prefSize, maxSize));
container.add(secondComponent);

</pre></blockquote>

<TABLE>
 <TR>
   <TD>
<IMG SRC="../../figures/uiswing/layout/1fill.gif" WIDTH="171" HEIGHT="99" ALT="Without custom filler">   </TD>
   <TD>
<IMG SRC="../../figures/uiswing/layout/4fill.gif" WIDTH="166" HEIGHT="121" ALT="With custom filler">   </TD>

 </TR>
</TABLE>

</dl>


</blockquote>
<h3>
<a name="alignment">
Fixing Alignment Problems
</a>
</h3>
<blockquote>

Two types of alignment problems sometimes occur with <code>BoxLayout</code>:

<ul>
<li> A group of components all have the same alignment,
     but you want to change their alignment
     to make them look better.
     For example, instead of having the centers of
     a group of left-to-right buttons all in a line,
     you might want the bottoms of the buttons to be aligned.
     Here's an example:

<p>
<IMG SRC="../../figures/uiswing/layout/AlignmentDemo-0.png" WIDTH="458" HEIGHT="214" ALT="Customizing alignment">
<li> Two or more components controlled
     by a <code>BoxLayout</code> have different default alignments,
     which causes them to be mis-aligned.
     For example, as the following shows,
     if a label and a panel
     are in a top-to-bottom box layout,
     the label's left edge is, by default,
     aligned with the center of the panel.

<p>
<IMG SRC="../../figures/uiswing/layout/AlignmentDemo-1.png" WIDTH="458" HEIGHT="214" ALT="X alignment mismatch"></ul>

<p>

In general, all the components
controlled by a top-to-bottom <code>BoxLayout</code> object
should have the same X alignment.
Similarly,
all the components controlled by a left-to-right <code>Boxlayout</code>
should generally have the same Y alignment.
You can set a <code>JComponent</code>'s X alignment
by invoking its <code>setAlignmentX</code> method.
An alternative available to all components is to override the
<code>getAlignmentX</code> method
in a custom subclass of the component class.
Similarly, you set the Y alignment of a component