group.html

jsf、swing的官方指南

    <div id=TopBar> <div id=TopBar_tr> <div id=TopBar_tl> <div id=TopBar_br> <div id=TopBar_bl> 
                        <div id=TopBar_right> 
                            <a target="_blank"
                                href="http://java.sun.com/javase/6/download.jsp">Download
                                the JDK</a>
                            <br>
                            <a href="../../search.html" target="_blank">Search the
                                Tutorials</a>
                            <br>
                            <a href="javascript:toggleLeft()"
                                id="ToggleLeft">Hide the TOC</a>
                        </div>
                    </div> </div> </div> </div> </div>
    <div class=PrintHeaders>
        <b>Trail:</b> Creating a GUI with JFC/Swing
        <br><b>Lesson:</b> Laying Out Components Within a Container
    </div>

    <div id=LeftBar class=LeftBar_shown>
        <div id=Contents>
            <div class="linkLESSON"><a href="index.html">Laying Out Components Within a Container</a></div>
<div class="linkAHEAD"><a href="visual.html">A Visual Guide to Layout Managers</a></div>
<div class="linkAHEAD"><a href="using.html">Using Layout Managers</a></div>
<div class="linkAHEAD"><a href="howLayoutWorks.html">How Layout Management Works</a></div>
<div class="linkAHEAD"><a href="layoutlist.html">How to Use Various Layout Managers</a></div>
<div class="linkAHEAD"><a href="border.html">How to Use BorderLayout</a></div>
<div class="linkAHEAD"><a href="box.html">How to Use BoxLayout</a></div>
<div class="linkAHEAD"><a href="card.html">How to Use CardLayout</a></div>
<div class="linkAHEAD"><a href="flow.html">How to Use FlowLayout</a></div>
<div class="linkAHEAD"><a href="gridbag.html">How to Use GridBagLayout</a></div>
<div class="linkAHEAD"><a href="grid.html">How to Use GridLayout</a></div>
<div class="nolinkAHEAD">How to Use GroupLayout</div>
<div class="linkBHEAD"><a href="groupExample.html">A GroupLayout Example</a></div>
<div class="linkAHEAD"><a href="spring.html">How to Use SpringLayout</a></div>
<div class="linkAHEAD"><a href="custom.html">Creating a Custom Layout Manager</a></div>
<div class="linkAHEAD"><a href="none.html">Doing Without a Layout Manager (Absolute Positioning)</a></div>
<div class="linkAHEAD"><a href="problems.html">Solving Common Layout Problems</a></div>
</div>
    </div>
    <div id=MainFlow class=MainFlow_indented>
            <span id=BreadCrumbs>
                <a href=../../index.html target=_top>Home Page</a>
                &gt;
                <a href=../index.html target=_top>Creating a GUI with JFC/Swing</a>
                &gt;
                <a href=index.html target=_top>Laying Out Components Within a Container</a>
            </span>
            <div class=NavBit>
                <a target=_top href=grid.html>&laquo;&nbsp;Previous</a>&nbsp;&bull;&nbsp;<a target=_top href=../TOC.html>Trail</a>&nbsp;&bull;&nbsp;<a target=_top href=groupExample.html>Next&nbsp;&raquo;</a>
            </div>
            <div id=PageTitle>How to Use GroupLayout</div>
            <blockquote>
<p><code>GroupLayout</code> is a layout manager that was developed for GUI builders such as Matisse, the GUI builder 
in NetBeans 5.0.  
Although the layout manager was originally designed to suit the GUI builder needs, it also works well for manual coding. 
This discussion will teach you how <code>GroupLayout</code> works and show you
how you can use <code>GroupLayout</code> to build GUIs, whether you choose to
use a GUI builder like Matisse or write your own code.

<p>
<p>


<h3>Design Principle: Independent Dimensions</h3>

<p>
<code>GroupLayout</code> works with the
horizontal and vertical layouts separately. The layout is defined for each dimension independently.  You don't need to worry about the <i> vertical</i>
dimension when defining the <i> horizontal</i> layout, and vice versa, as the layout along each axis is totally independent
of the layout along the other axis.
<p>

When focusing on just one dimension, you only have to solve half the problem at one time. This is easier than handling both dimensions at once. 
This means, of course, that each component needs to be defined twice in the layout. If you forget to do this, <code>GroupLayout</code> will generate
an exception.
<p>

<p>
<h3>Layout Organization: Hierarchical Groups</h3>


<p>
<code>GroupLayout</code> uses two types of arrangements -- sequential and parallel, combined with
hierarchical composition. 
<p>
<ol>
<li>
With <b>sequential</b> arrangement, the components are simply placed
one after another, just like <code>BoxLayout</code> or <code>FlowLayout</code> would do along one
axis. The position of each component is defined as being relative to the
preceding component.<p>
</li>
<li>
The second way places the components in <b>parallel</b>&mdash;on top of each other in the same space. They can be 
baseline-, top-, or bottom-aligned along the vertical axis. Along the horizontal axis, they can be left-, right-, or center-aligned if the components are not all the 
same size.

</li>
</ol>
<p>
Usually, components placed in parallel in one dimension are in a sequence in
the other, so that they don't overlap. 

<p>
What makes these two arrangements powerful is that they can be nested
hierarchically. For this purpose <code>GroupLayout</code> defines <b>layout
groups</b>.
A group is either sequential or parallel and may contain components, other groups, and gaps (discussed below).
<p>
The size of a sequential group is the sum of the sizes of the contained elements,
and the size of a parallel group corresponds to the size of the largest element (although, 
depending on the elements and where the baseline lands, the size of a baseline-aligned group may be a 
bit larger than the largest element).
<p>
Defining a layout means defining how the components should be grouped by combining the
sequential and parallel arrangements. 

<p>
Let's use a simple example to see how it works in practice.
<p>

<h3>An Example</h3>


<p>
Let's start with something simple, just three components in a row:</p>
<p><center><IMG SRC="../../figures/uiswing/layout/example1a.PNG" WIDTH="151" HEIGHT="31" ALIGN="BOTTOM" ALT="Three components in a row."></center></p>
<p>
<p>We will express this layout using groups. Starting with the horizontal
axis it's easy to see there is a <i>sequential
group</i> of 3 components arranged from left to right. Along the vertical axis there is a <i> parallel group</i>
 of the same 3 components with the same location, size, and baseline:

<p><center><IMG SRC="../../figures/uiswing/layout/groups1a.PNG" WIDTH="397" HEIGHT="69" ALIGN="BOTTOM" ALT="groups1a."></center></p>
<p>
<p>
In pseudo code, the layout specification might look like this (the real code is in the <i>Writing Code</i> section below):


<blockquote><pre>
horizontal layout = sequential group { c1, c2, c3 }
vertical layout = parallel group (BASELINE) { c1, c2, c3 }
</pre></blockquote>

<p>
This illustrates a principle mentioned earlier: components grouped sequentially in one
dimension usually form a parallel group in the other dimension.</p>
<p>Now let's add one more component, C4, left-aligned with C3:


<p><center><IMG SRC="../../figures/uiswing/layout/example1b.PNG" WIDTH="160" HEIGHT="62" ALIGN="BOTTOM" ALT="example1b."></center></p>


<p>
Along the horizontal axis the new component occupies the same horizontal space as C3 so that it forms a parallel group with C3.
Along the vertical axis C4 forms a sequential group with the original parallel group of the three components.


<p><center><IMG SRC="../../figures/uiswing/layout/groups1b.PNG" WIDTH="413" HEIGHT="112" ALIGN="BOTTOM" ALT="groups1b."></center></p>


<p>
<p>
In pseudo code, the layout specification now looks like this:

<blockquote><pre>
horizontal layout = sequential group { c1, c2, <b>parallel group (LEFT) { </b>c3,<b> c4 }</b> }
vertical layout = <b>sequential group {</b> parallel group (BASELINE) { c1, c2, c3 }, <b>c4 }</b>
</pre></blockquote>

<p>
Now you understand the most important aspects of designing layouts with <code>GroupLayout</code>. There are just a few more details
to explain: how to add gaps, how to define size and resize behavior, how to define justified layout, and how to write real code.

<p>

<h3>Gaps</h3>

<p>
A gap can be thought of as an invisible component of a certain size. Gaps of
arbitrary size can be added to groups just like components or other
groups. Using gaps you can precisely control the distance
between components or from the container border.

<p>

<code>GroupLayout</code> also defines <i>automatic</i> gaps that correspond to <i> preferred distances</i> between neighboring components 
(or between a component and container border).
The size of such a gap is computed dynamically based on the look and feel the
application is using (the <code>LayoutStyle</code> class is used for this). There
are two advantages to using automatic (preferred) gaps: you don't have to specify the
pixel sizes of the gaps, and they automatically adjust to the look and feel the UI runs with, reflecting the
actual look and feel guidelines.
<p>
<code>GroupLayout</code> distinguishes between 
(a) the preferred gap between two components and
(b) the preferred gap between a component and the
container border. 

There are corresponding methods in the <code>GroupLayout</code> API for adding these
gaps (<code>addPreferredGap</code> and <code>addContainerGap</code>). There are
three types of component gaps: <b>related</b>, <b> unrelated</b> and <b>indented</b>.
The <code>LayoutStyle.ComponentPlacement</code> enum defines corresponding constants to be used as parameters of the 
<code>addPreferredGap</code>
method: <code>RELATED</code>, <code>UNRELATED</code> and <code>INDENT</code>. The difference between
related and unrelated gaps is just in size&mdash;the distance between unrelated components is a bit
bigger. <i>Indented</i> represents a preferred horizontal distance of two
components when one of them is positioned underneath the second with an indent.


<p><center><IMG SRC="../../figures/uiswing/layout/gaps.PNG" WIDTH="340" HEIGHT="77" ALIGN="BOTTOM" ALT="gaps."></center></p>
<p>
<p>
As mentioned above, <code>GroupLayout</code> can insert gaps
automatically&mdash;if you don't add your
own gaps explicitly, it adds the <i>related</i> preferred gaps for you. This is not the
default behavior, however. You have to turn this feature on by invoking <code>setAutoCreateGaps(true)</code> and <code>setAutoCreateContainerGaps(true)</code> on the <code>GroupLayout</code>.
Then you'll get correct spacing automatically.

<p>

<h3>Writing Code</h3>

<p>
Now, let's take a look at the actual code to create the layout described
above.

<p>
Let's assume we have a container named <code>panel</code> and the same four
components already presented (<code>c1</code>, <code>c2</code>, <code>c3</code>, and <code>c4</code>). First, 
we create a new <code>GroupLayout</code> object and
associate it with the panel:

<blockquote><pre>
GroupLayout layout = new GroupLayout(panel);
 panel.setLayout(layout);
</pre></blockquote>

<p>
We specify automatic gap insertion:

<blockquote><pre>
layout.setAutoCreateGaps(true);
layout.setAutoCreateContainerGaps(true);
</pre></blockquote>

<p>
Then, we define the groups and add the components. We establish a root group
for each dimension using the <code>setHorizontalGroup</code> and <code>setVerticalGroup</code> methods.
Groups are created via <code>createSequentialGroup</code> and <code>createParallelGroup</code> methods. 
Components are added to groups by using the <code>addComponent</code> method.

<blockquote><pre>
layout.setHorizontalGroup(
   layout.createSequentialGroup()
      .addComponent(c1)
      .addComponent(c2)
      .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
           .addComponent(c3)
           .addComponent(c4))
);
layout.setVerticalGroup(
   layout.createSequentialGroup()
      .addGroup(layout.createParallelGroup(GroupLayout.Alignment.BASELINE)
           .addComponent(c1)
           .addComponent(c2)
           .addComponent(c3))