groupexample.html

jsf、swing的官方指南

<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="linkAHEAD"><a href="group.html">How to Use GroupLayout</a></div>
<div class="nolinkBHEAD">A GroupLayout Example</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=group.html>&laquo;&nbsp;Previous</a>&nbsp;&bull;&nbsp;<a target=_top href=../TOC.html>Trail</a>&nbsp;&bull;&nbsp;<a target=_top href=spring.html>Next&nbsp;&raquo;</a>
            </div>
            <div id=PageTitle>A GroupLayout Example</div>
            <blockquote>
As an example of GUI creation with <code>GroupLayout</code>, let's create a layout for this "Find" dialog box:
<p><center><IMG SRC="../../figures/uiswing/layout/find.png" WIDTH="348" HEIGHT="121" ALIGN="BOTTOM" ALT="Find."></center></p>



<p>
<p>

<h3>Horizontal layout</h3>

<p>
Examining the horizontal dimension <i> from left to right</i>,&nbsp;we
can see there are 3 groups in a sequence. The first one is actually not a group,
just a component -- the label. The second one is a group containing the text field and
the check boxes (we'll decompose it later). And the third is a group of the two
buttons. As illustrated here:


<p><center><IMG SRC="../../figures/uiswing/layout/find_a1.PNG" WIDTH="348" HEIGHT="105" ALIGN="BOTTOM" ALT="Find."></center></p>




<p>
Let's sketch out the sequential group in code. Note that
<code>GroupLayout.Alignment.LEADING</code> corresponds to left alignment in the horizontal dimension. Also note we don't specify gaps, assuming the <i>gap auto-insertion</i> feature is turned on.
<blockquote><pre>
layout.setHorizontalGroup(layout.createSequentialGroup()
    .addComponent(label)
    .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING))
    .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING))
);
</pre></blockquote>




<p>
Now let's decompose the group in the middle. This is the hardest one. There's a text field in
parallel with a sequence of two parallel groups each containing two check boxes.
See the following illustration:


<p><center><IMG SRC="../../figures/uiswing/layout/find_a2.PNG" WIDTH="210" HEIGHT="111" ALIGN="BOTTOM" ALT="Find_a2."></center></p>



<p>
Let's add the corresponding code:

<blockquote><pre>
layout.setHorizontalGroup(layout.createSequentialGroup()
    .addComponent(label)
    .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
         .addComponent(textField)
         .addGroup(layout.createSequentialGroup()
              .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
                  .addComponent(caseCheckBox)
                  .addComponent(wholeCheckBox))
              .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
                  .addComponent(wrapCheckBox)
                  .addComponent(backCheckBox))))
     .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING))
);
</pre></blockquote>




<p>
We want the text field to be resizable, but that happens automatically
since <code>JTextField</code> returns the right maximum size by default.

<p>
The remaining group on the right is trivial: it contains just two buttons. Here's the code:
<blockquote><pre>
layout.setHorizontalGroup(layout.createSequentialGroup()
    .addComponent(label)
    .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
        .addComponent(textField)
        .addGroup(layout.createSequentialGroup()
            .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
                .addComponent(caseCheckBox)
                .addComponent(wholeCheckBox))
            .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
                .addComponent(wrapCheckBox)
                .addComponent(backCheckBox))))
    .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
        .addComponent(findButton)
        .addComponent(cancelButton))
);
</pre></blockquote>




<p>
And finally, we'd like the buttons to have always the same size, so let's link
them:
<blockquote><pre>
layout.linkSize(SwingConstants.HORIZONTAL, findButton, cancelButton);
</pre></blockquote>			
		


<p>
Now we are done with the horizontal dimension. Let's switch to the vertical dimension. From now,
we'll only need to think about the y
axis.

<p>

<h3>Vertical layout</h3>


<p>
In the vertical dimension, we examine the layout from <i>top to bottom</i>. We
definitely want all the components on the first line aligned on baseline. So
along the vertical axis there is a sequence of the baseline group, followed by a
group of the remaining components. See the following picture.

<p><center><IMG SRC="../../figures/uiswing/layout/find_a3.PNG" WIDTH="384" HEIGHT="94" ALIGN="BOTTOM" ALT="Find_a3."></center></p>



<p>
Let's sketch out the code. First, we need to define two parallel groups. Note that
<code>GroupLayout.Alignment.LEADING</code> corresponds to the top alignment in the
vertical dimension.
<blockquote><pre>
layout.setVerticalGroup(layout.createSequentialGroup()
    .addGroup(layout.createParallelGroup(GroupLayout.Alignment.BASELINE))
    .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING))
);
</pre></blockquote>

<p>
We can fill the baseline group right away:
<blockquote><pre>
layout.setVerticalGroup(layout.createSequentialGroup()
    .addGroup(layout.createParallelGroup(GroupLayout.Alignment.BASELINE)
        .addComponent(label)
        .addComponent(textField)
        .addComponent(findButton))
    .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING))
);
</pre></blockquote>


<p>
Now let's look at the bottom group. Note the Cancel button is not on a shared
baseline with
the check boxes; it is aligned at the top. So the second parallel group comprises
the button and a sequential group of two baseline groups with check boxes:

<p><center><IMG SRC="../../figures/uiswing/layout/find_a4.PNG" WIDTH="332" HEIGHT="51" ALIGN="BOTTOM" ALT="Find_a4."></center></p>
<p>

The corresponding code looks as follows:
<blockquote><pre>
layout.setVerticalGroup(layout.createSequentialGroup()
    .addGroup(layout.createParallelGroup(GroupLayout.Alignment.BASELINE)
        .addComponent(label)
        .addComponent(textField)
        .addComponent(findButton))
    .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
        .addGroup(layout.createSequentialGroup()
            .addGroup(layout.createParallelGroup(GroupLayout.Alignment.BASELINE)
                .addComponent(caseCheckBox)
                .addComponent(wrapCheckBox))
            .addGroup(layout.createParallelGroup(GroupLayout.Alignment.BASELINE)
                .addComponent(wholeCheckBox)
                .addComponent(backCheckBox)))
        .addComponent(cancelButton))
);
</pre></blockquote>

<p>
So, we've created a
complete layout, including resize behavior, without specifying a single
number in pixels&mdash;a true cross platform layout. Note that we don't
need to specify gaps between components, we get correct spacing automatically
and according to the look and feel guidelines. Here's the complete code for
the Find dialog's layout:

<blockquote><pre>
GroupLayout layout = new GroupLayout(getContentPane());
getContentPane().setLayout(layout);
layout.setAutocreateGaps(true);
layout.setAutocreateContainerGaps(true);

layout.setHorizontalGroup(layout.createSequentialGroup()
    .addComponent(label)
    .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
        .addComponent(textField)
        .addGroup(layout.createSequentialGroup()
            .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
                .addComponent(caseCheckBox)
                .addComponent(wholeCheckBox))
            .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
                .addComponent(wrapCheckBox)
                .addComponent(backCheckBox))))
    .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
        .addComponent(findButton)
        .addComponent(cancelButton))
);
layout.linkSize(SwingConstants.HORIZONTAL, findButton, cancelButton);

layout.setVerticalGroup(layout.createSequentialGroup()
    .addGroup(layout.createParallelGroup(GroupLayout.Alignment.BASELINE)
        .addComponent(label)
        .addComponent(textField)
        .addComponent(findButton))
    .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
        .addGroup(layout.createSequentialGroup()
            .addGroup(layout.createParallelGroup(GroupLayout.Alignment.BASELINE)
                .addComponent(caseCheckBox)
                .addComponent(wrapCheckBox))
            .addGroup(layout.createParallelGroup(GroupLayout.Alignment.BASELINE)
                .addComponent(wholeCheckBox)
                .addComponent(backCheckBox)))
        .addComponent(cancelButton))
);
</pre></blockquote>




<p>
Here is the complete 
<a class="SourceLink" target="_blank" href="examples/Find.java"><code>Find.java </code></a> file. You can compile and run it. Try resizing the dialog horizontally to see how the layout automatically adjusts to the new size.

        </blockquote>
        <div class=NavBit>
            <a target=_top href=group.html>&laquo; Previous</a>
            &bull;
            <a target=_top href=../TOC.html>Trail</a>
            &bull;
            <a target=_top href=spring.html>Next &raquo;</a>
        </div>
    </div>
    <div id=Footer>
<div id=TagNotes>
    Problems with the examples? Try <a target="_blank"
        href=../../information/run-examples.html>Compiling and Running
        the Examples: FAQs</a>.
    <br>
    Complaints? Compliments? Suggestions? <a target="_blank"
        href="http://developer.sun.com/contact/tutorial_feedback.jsp">Give
    us your feedback</a>.
<br><br>
    <a target="_blank" href="../../information/copyright.html">Copyright</a>
    1995-2006 Sun Microsystems, Inc.  All rights reserved.
    <span id=Download>
</span></div> 

    </div>
    <div class=PrintHeaders>
        <b>Previous page:</b> How to Use GroupLayout
        <br><b>Next page:</b> How to Use SpringLayout
    </div>
    </body>
</html>