This is an automated email from the ASF dual-hosted git repository.
git-site-role pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/netbeans-website.git
The following commit(s) were added to refs/heads/asf-site by this push:
new 2aca745 Automated site publishing by Jenkins build 1131
2aca745 is described below
commit 2aca7453229036cee1d9e426a429ad9a494ac7d1
Author: jenkins <bui...@apache.org>
AuthorDate: Tue Jan 21 21:19:03 2020 +0000
Automated site publishing by Jenkins build 1131
---
content/kb/docs/java/quickstart-gui.html | 1233 +++++++++++++++++-------------
1 file changed, 702 insertions(+), 531 deletions(-)
diff --git a/content/kb/docs/java/quickstart-gui.html
b/content/kb/docs/java/quickstart-gui.html
index bebefff..45b4f66 100644
--- a/content/kb/docs/java/quickstart-gui.html
+++ b/content/kb/docs/java/quickstart-gui.html
@@ -101,19 +101,6 @@
<ul class="sectlevel2">
<li><a href="#_creating_a_project">Creating a Project</a></li>
<li><a href="#_creating_a_jframe_container">Creating a JFrame
Container</a></li>
-<li><a href="#_free_design">Free Design</a></li>
-<li><a href="#_automatic_component_positioning_snapping">Automatic Component
Positioning (Snapping)</a></li>
-<li><a href="#_visual_feedback">Visual Feedback</a></li>
-<li><a href="#_adding_components_the_basics">Adding Components: The
Basics</a></li>
-<li><a href="#_adding_individual_components_to_the_form">Adding Individual
Components to the Form</a></li>
-<li><a href="#_adding_multiple_components_to_the_form">Adding Multiple
Components to the Form</a></li>
-<li><a href="#_inserting_components">Inserting Components</a></li>
-<li><a href="#_component_alignment">Component Alignment</a></li>
-<li><a href="#_baseline_alignment">Baseline Alignment</a></li>
-<li><a href="#_adding_aligning_and_anchoring">Adding, Aligning, and
Anchoring</a></li>
-<li><a href="#_component_sizing">Component Sizing</a></li>
-<li><a href="#_indentation">Indentation</a></li>
-<li><a href="#_finishing_up">Finishing Up</a></li>
</ul>
</li>
</ul>
@@ -177,101 +164,90 @@ Alternatively, you can find a JFrame form by choosing
New > Other > Swing
2. Enter <code>ContactEditorUI</code> as the Class Name.
3. Enter <code>my.contacteditor</code> as the package.
4. Click Finish.</p>
-<p class="tableblock">The IDE creates the <code>ContactEditorUI</code> form
and the <code>ContactEditorUI</code> class within the
<code>ContactEditorUI.java</code> application and opens the
<code>ContactEditorUI</code> form in the GUI Builder. Notice that the
<code>my.contacteditor</code> package replaces the default package.</p></td>
+<p class="tableblock">The IDE creates the <code>ContactEditorUI</code> form
and the <code>ContactEditorUI</code> class within the
<code>ContactEditorUI.java</code> application and opens the
<code>ContactEditorUI</code> form in the GUI Builder. Notice that the
<code>my.contacteditor</code> package replaces the default package.</p>
+<p class="tableblock"><a href="#top">top</a></p>
+<p class="tableblock">== Getting Familiar with the GUI Builder</p>
+<p class="tableblock">Now that we’ve set up a new project for our
application, let’s take a minute to familiarize ourselves with the GUI
Builder’s interface.</p>
+<p class="tableblock">NOTE: To explore the GUI Builder interface with an
interactive demo, view the <a
href="http://bits.netbeans.org/media/quickstart-gui-explore.swf";>Exploring GUI
Builder (.swf)</a> screencast.</p>
+<p
class="tableblock">[.feature] — image::images/01_gb_ui-small.png[role="left",
link="images/01_gb_ui.png"] — 
+When we added the JFrame container, the IDE opened the newly-created
<code>ContactEditorUI</code> form in an Editor tab with a toolbar containing
several buttons, as shown in the preceding illustration. The ContactEditor form
opened in the GUI Builder’s Design view and three additional windows
appeared automatically along the IDE’s edges, enabling you to navigate,
organize, and edit GUI forms as you build them.</p>
+<p class="tableblock">The GUI Builder’s various windows include:</p>
+<p class="tableblock">* *Design Area. *The GUI Builder’s primary window
for creating and editing Java GUI forms. The toolbar’s Source button
enables you to view a class’s source code, the Design button allows you
to view a graphical view of the GUI components, the History button allows you
to access the local history of changes of the file. The additional toolbar
buttons provide convenient access to common commands, such as choosing between
Selection and Connection mode [...]
+* *Navigator. *Provides a representation of all the components, both visual
and non-visual, in your application as a tree hierarchy. The Navigator also
provides visual feedback about what component in the tree is currently being
edited in the GUI Builder as well as allows you to organize components in the
available panels.
+* *Palette. *A customizable list of available components containing tabs for
JFC/Swing, AWT, and JavaBeans components, as well as layout managers. In
addition, you can create, remove, and rearrange the categories displayed in the
Palette using the customizer.
+* *Properties Window. *Displays the properties of the component currently
selected in the GUI Builder, Navigator window, Projects window, or Files
window.</p>
+<p class="tableblock">If you click the Source button, the IDE displays the
application’s Java source code in the Editor with sections of code that
are automatically generated by the GUI Builder indicated by grey areas (they
become blue when selected), called Guarded Blocks. Guarded blocks are protected
areas that are not editable in Source view. You can only edit code appearing in
the white areas of the Editor when in Source view. If you need to make changes
to the code within a Gu [...]
+<p class="tableblock">NOTE: For advanced developers, the Palette Manager is
available that enables you to add custom components from JARs, libraries, or
other projects to the Palette. To add custom components through the Palette
Manager, choose Tools > Palette > Swing/AWT Components.</p>
+<p class="tableblock"><a href="#top">top</a></p>
+<p class="tableblock">== Key Concepts</p>
+<p class="tableblock">The IDE’s GUI Builder solves the core problem of
Java GUI creation by streamlining the workflow of creating graphical
interfaces, freeing developers from the complexities of Swing layout managers.
It does this by extending the current NetBeans IDE GUI Builder to support a
straightforward "Free Design" paradigm with simple layout rules that are easy
to understand and use. As you lay out your form, the GUI Builder provides
visual guidelines suggesting optimal sp [...]
+<p class="tableblock">[quote]
+----</p>
+<p class="tableblock">=== Free Design</p>
+<p class="tableblock">In the IDE’s GUI Builder, you can build your forms
by simply putting components where you want them as though you were using
absolute positioning. The GUI Builder figures out which layout attributes are
required and then generates the code for you automatically. You need not
concern yourself with insets, anchors, fills, and so forth.</p>
+<p class="tableblock">=== Automatic Component Positioning (Snapping)</p>
+<p class="tableblock">As you add components to a form, the GUI Builder
provides visual feedback that assists in positioning components based on your
operating system’s look and feel. The GUI Builder provides helpful inline
hints and other visual feedback regarding where components should be placed on
your form, automatically snapping components into position along guidelines. It
makes these suggestions based on the positions of the components that have
already been placed in the fo [...]
+<p class="tableblock">=== Visual Feedback</p>
+<p class="tableblock">The GUI Builder also provides visual feedback regarding
component anchoring and chaining relationships. These indicators enable you to
quickly identify the various positioning relationships and component pinning
behavior that affect the way your GUI will both appear and behave at runtime.
This speeds the GUI design process, enabling you to quickly create
professional-looking visual interfaces that work.</p>
+<p class="tableblock">----</p>
+<p class="tableblock"><a href="#top">top</a></p>
+<p class="tableblock">== First Things First</p>
+<p class="tableblock">Now that you have familiarized yourself with the GUI
builder’s interface, it’s time to begin developing the UI of our
ContactEditor application. In this section we’ll take a look at using the
IDE’s Palette to add the various GUI components that we need to our
form.</p>
+<p class="tableblock">Thanks to the IDE’s Free Design paradigm, you no
longer have to struggle with layout managers to control the size and position
of the components within your containers. All you need to do is drag and drop
the components you need to your GUI form as shown in the illustrations that
follow.</p>
+<p class="tableblock">[quote]
+----
+NOTE: Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-add.swf";>Adding individual
and multiple components (.swf)</a> screencast for an interactive demo on the
section below.</p>
+<p class="tableblock">=== Adding Components: The Basics</p>
+<p class="tableblock">Though the IDE’s GUI Builder simplifies the
process of creating Java GUIs, it is often helpful to sketch out the way you
want your interface to look before beginning to lay it out. Many interface
designers consider this a "best practice" technique, however, for the purposes
of this tutorial you can simply peek at how our completed form should look by
jumping ahead to the <a href="#previewing_form">Previewing your GUI
</a>section.</p>
+<p class="tableblock">Since we’ve already added a JFrame as our
form’s top-level container, the next step is to add a couple of JPanels
which will enable us to cluster the components of our UI using titled borders.
Refer to the following illustrations and notice the IDE’s "drag and drop"
behavior when accomplishing this.</p></td>
</tr>
</tbody>
</table>
-<div class="listingblock">
-<div class="content">
-<pre><<top,top>>
-
-
-== Getting Familiar with the GUI Builder
-
-Now that we've set up a new project for our application, let's take a minute
to familiarize ourselves with the GUI Builder's interface.
-
-NOTE: To explore the GUI Builder interface with an interactive demo, view the
link:http://bits.netbeans.org/media/quickstart-gui-explore.swf[+Exploring GUI
Builder (.swf)+] screencast.
-
-[.feature]
---
-image::images/01_gb_ui-small.png[role="left", link="images/01_gb_ui.png"]
---
-
-When we added the JFrame container, the IDE opened the newly-created
``ContactEditorUI`` form in an Editor tab with a toolbar containing several
buttons, as shown in the preceding illustration. The ContactEditor form opened
in the GUI Builder's Design view and three additional windows appeared
automatically along the IDE's edges, enabling you to navigate, organize, and
edit GUI forms as you build them.
-
-The GUI Builder's various windows include:
-
-* *Design Area. *The GUI Builder's primary window for creating and editing
Java GUI forms. The toolbar's Source button enables you to view a class's
source code, the Design button allows you to view a graphical view of the GUI
components, the History button allows you to access the local history of
changes of the file. The additional toolbar buttons provide convenient access
to common commands, such as choosing between Selection and Connection modes,
aligning components, setting componen [...]
-* *Navigator. *Provides a representation of all the components, both visual
and non-visual, in your application as a tree hierarchy. The Navigator also
provides visual feedback about what component in the tree is currently being
edited in the GUI Builder as well as allows you to organize components in the
available panels.
-* *Palette. *A customizable list of available components containing tabs for
JFC/Swing, AWT, and JavaBeans components, as well as layout managers. In
addition, you can create, remove, and rearrange the categories displayed in the
Palette using the customizer.
-* *Properties Window. *Displays the properties of the component currently
selected in the GUI Builder, Navigator window, Projects window, or Files window.
-
-If you click the Source button, the IDE displays the application's Java source
code in the Editor with sections of code that are automatically generated by
the GUI Builder indicated by grey areas (they become blue when selected),
called Guarded Blocks. Guarded blocks are protected areas that are not editable
in Source view. You can only edit code appearing in the white areas of the
Editor when in Source view. If you need to make changes to the code within a
Guarded Block, clicking the De [...]
-
-NOTE: For advanced developers, the Palette Manager is available that enables
you to add custom components from JARs, libraries, or other projects to the
Palette. To add custom components through the Palette Manager, choose Tools
> Palette > Swing/AWT Components.
-
-<<top,top>>
-
-
-== Key Concepts
-
-The IDE's GUI Builder solves the core problem of Java GUI creation by
streamlining the workflow of creating graphical interfaces, freeing developers
from the complexities of Swing layout managers. It does this by extending the
current NetBeans IDE GUI Builder to support a straightforward "Free Design"
paradigm with simple layout rules that are easy to understand and use. As you
lay out your form, the GUI Builder provides visual guidelines suggesting
optimal spacing and alignment of compo [...]
-
-[quote]</pre>
-</div>
-</div>
-</div>
-<div class="sect2">
-<h3 id="_free_design">Free Design</h3>
-<div class="paragraph">
-<p>In the IDE’s GUI Builder, you can build your forms by simply putting
components where you want them as though you were using absolute positioning.
The GUI Builder figures out which layout attributes are required and then
generates the code for you automatically. You need not concern yourself with
insets, anchors, fills, and so forth.</p>
-</div>
-</div>
-<div class="sect2">
-<h3 id="_automatic_component_positioning_snapping">Automatic Component
Positioning (Snapping)</h3>
<div class="paragraph">
-<p>As you add components to a form, the GUI Builder provides visual feedback
that assists in positioning components based on your operating system’s
look and feel. The GUI Builder provides helpful inline hints and other visual
feedback regarding where components should be placed on your form,
automatically snapping components into position along guidelines. It makes
these suggestions based on the positions of the components that have already
been placed in the form, while allowing [...]
+<p>|To add a JPanel:</p>
</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>In the Palette window, select the Panel component from the Swing Containers
category by clicking and releasing the mouse button.</p>
+</li>
+<li>
+<p>Move the cursor to the upper left corner of the form in the GUI Builder.
When the component is located near the container’s top and left edges,
horizontal and vertical alignment guidelines appear indicating the preferred
margins. Click in the form to place the JPanel in this location.</p>
+</li>
+</ol>
</div>
-<div class="sect2">
-<h3 id="_visual_feedback">Visual Feedback</h3>
<div class="paragraph">
-<p>The GUI Builder also provides visual feedback regarding component anchoring
and chaining relationships. These indicators enable you to quickly identify the
various positioning relationships and component pinning behavior that affect
the way your GUI will both appear and behave at runtime. This speeds the GUI
design process, enabling you to quickly create professional-looking visual
interfaces that work.</p>
-</div>
-<div class="listingblock">
-<div class="content">
-<pre><<top,top>>
-
-
-== First Things First
-
-Now that you have familiarized yourself with the GUI builder's interface, it's
time to begin developing the UI of our ContactEditor application. In this
section we'll take a look at using the IDE's Palette to add the various GUI
components that we need to our form.
-
-Thanks to the IDE's Free Design paradigm, you no longer have to struggle with
layout managers to control the size and position of the components within your
containers. All you need to do is drag and drop the components you need to your
GUI form as shown in the illustrations that follow.
-
-[quote]</pre>
+<p>The <code>JPanel</code> component appears in the
<code>ContactEditorUI</code> form with orange highlighting signifying that it
is selected. After releasing the mouse button, small indicators appear to show
the component’s anchoring relationships and a corresponding JPanel node
is displayed in the Navigator window, as shown in the following
illustration.</p>
</div>
-</div>
-<div class="admonitionblock note">
-<table>
+<table class="tableblock frame-all grid-all spread">
+<colgroup>
+<col style="width: 100%;">
+</colgroup>
+<tbody>
<tr>
-<td class="icon">
-<i class="fa icon-note" title="Note"></i>
-</td>
-<td class="content">
-Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-add.swf";>Adding individual
and multiple components (.swf)</a> screencast for an interactive demo on the
section below.
-</td>
+<td class="tableblock halign-left valign-top"><p
class="tableblock">[.feature] — image::images/02_add_panels_1-small.png[role="left",
link="images/02_add_panels_1.png"] — 
+Next, we need to resize the JPanel to make room for the components we’ll
place within it a little later, but let’s take a minute to point out
another of the GUI Builder’s visualization features first. In order to do
this we need to deselect the JPanel we just added. Because we haven’t
added a title border yet, the panel disappears. Notice, however, that when you
pass the cursor over the JPanel, its edges change to light gray so that its
position can be clearly see [...]
</tr>
+</tbody>
</table>
-</div>
-</div>
-<div class="sect2">
-<h3 id="_adding_components_the_basics">Adding Components: The Basics</h3>
<div class="paragraph">
-<p>Though the IDE’s GUI Builder simplifies the process of creating Java
GUIs, it is often helpful to sketch out the way you want your interface to look
before beginning to lay it out. Many interface designers consider this a "best
practice" technique, however, for the purposes of this tutorial you can simply
peek at how our completed form should look by jumping ahead to the <a
href="#previewing_form">Previewing your GUI </a>section.</p>
+<p>|To resize the JPanel:</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Select the JPanel you just added. The small square resize handles reappear
around the component’s perimeter.</p>
+</li>
+<li>
+<p>Click and hold the resize handle on the right edge of the JPanel and drag
until the dotted alignment guideline appears near the form’s edge.</p>
+</li>
+<li>
+<p>Release the resize handle to resize the component.</p>
+</li>
+</ol>
</div>
<div class="paragraph">
-<p>Since we’ve already added a JFrame as our form’s top-level
container, the next step is to add a couple of JPanels which will enable us to
cluster the components of our UI using titled borders. Refer to the following
illustrations and notice the IDE’s "drag and drop" behavior when
accomplishing this.</p>
+<p>The <code>JPanel</code> component is extended to span between the
container’s left and right margins in accordance with the recommended
offset, as shown in the following illustration.</p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -279,50 +255,48 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-add.swf";>Add
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To add a
JPanel:</p>
-<p class="tableblock">1. In the Palette window, select the Panel component
from the Swing Containers category by clicking and releasing the mouse button.
-2. Move the cursor to the upper left corner of the form in the GUI Builder.
When the component is located near the container’s top and left edges,
horizontal and vertical alignment guidelines appear indicating the preferred
margins. Click in the form to place the JPanel in this location.</p>
-<p class="tableblock">The <code>JPanel</code> component appears in the
<code>ContactEditorUI</code> form with orange highlighting signifying that it
is selected. After releasing the mouse button, small indicators appear to show
the component’s anchoring relationships and a corresponding JPanel node
is displayed in the Navigator window, as shown in the following
illustration.</p></td>
+<td class="tableblock halign-left valign-top"><p
class="tableblock">[.feature] — image::images/02_add_panels_2-small.png[role="left",
link="images/02_add_panels_2.png"] — 
+Now that we’ve added a panel to contain our UI’s Name information,
we need to repeat the process to add another directly below the first for the
E-mail information. Referring to the following illustrations, repeat the
previous two tasks, paying attention to the GUI Builder’s suggested
positioning. Notice that the suggested vertical spacing between the two JPanels
is much narrower than that at the edges. Once you have added the second JPanel,
resize it such that it fills [...]
</tr>
</tbody>
</table>
-<div class="openblock feature">
+<div class="paragraph">
+<p>|[.feature]</p>
+</div>
+<div class="openblock">
<div class="content">
<div class="imageblock left">
<div class="content">
-<a class="image" href="images/02_add_panels_1.png"><img
src="images/02_add_panels_1-small.png" alt="02 add panels 1 small"></a>
+<a class="image" href="images/02_add_panels_3.png"><img
src="images/02_add_panels_3-small.png" alt="02 add panels 3 small"></a>
</div>
</div>
</div>
</div>
-<div class="paragraph">
-<p>Next, we need to resize the JPanel to make room for the components
we’ll place within it a little later, but let’s take a minute to
point out another of the GUI Builder’s visualization features first. In
order to do this we need to deselect the JPanel we just added. Because we
haven’t added a title border yet, the panel disappears. Notice, however,
that when you pass the cursor over the JPanel, its edges change to light gray
so that its position can be clearly [...]
+<div class="literalblock">
+<div class="content">
+<pre>|</pre>
+</div>
</div>
-<table class="tableblock frame-all grid-all spread">
-<colgroup>
-<col style="width: 100%;">
-</colgroup>
-<tbody>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To resize
the JPanel:</p>
-<p class="tableblock">1. Select the JPanel you just added. The small square
resize handles reappear around the component’s perimeter.
-2. Click and hold the resize handle on the right edge of the JPanel and drag
until the dotted alignment guideline appears near the form’s edge.
-3. Release the resize handle to resize the component.</p>
-<p class="tableblock">The <code>JPanel</code> component is extended to span
between the container’s left and right margins in accordance with the
recommended offset, as shown in the following illustration.</p></td>
-</tr>
-</tbody>
-</table>
<div class="openblock feature">
<div class="content">
<div class="imageblock left">
<div class="content">
-<a class="image" href="images/02_add_panels_2.png"><img
src="images/02_add_panels_2-small.png" alt="02 add panels 2 small"></a>
+<a class="image" href="images/02_add_panels_4.png"><img
src="images/02_add_panels_4-small.png" alt="02 add panels 4 small"></a>
</div>
</div>
</div>
</div>
<div class="paragraph">
-<p>Now that we’ve added a panel to contain our UI’s Name
information, we need to repeat the process to add another directly below the
first for the E-mail information. Referring to the following illustrations,
repeat the previous two tasks, paying attention to the GUI Builder’s
suggested positioning. Notice that the suggested vertical spacing between the
two JPanels is much narrower than that at the edges. Once you have added the
second JPanel, resize it such that it fi [...]
+<p>|[.feature]</p>
+</div>
+<div class="openblock">
+<div class="content">
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/02_add_panels_5.png"><img
src="images/02_add_panels_5-small.png" alt="02 add panels 5 small"></a>
+</div>
+</div>
+</div>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -330,18 +304,37 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-add.swf";>Add
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p
class="tableblock">[.feature] — image::images/02_add_panels_3-small.png[role="left",
link="images/02_add_panels_3.png"] — </p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p
class="tableblock">[.feature] — image::images/02_add_panels_4-small.png[role="left",
link="images/02_add_panels_4.png"] — </p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p
class="tableblock">[.feature] — image::images/02_add_panels_5-small.png[role="left",
link="images/02_add_panels_5.png"] — </p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Because we
want to visually distinguish the functions in the upper and lower sections of
our GUI, we need to add a border and title to each JPanel. First we’ll
accomplish this using the Properties window and then we’ll try it using
the pop-up menu.</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
-<p>Because we want to visually distinguish the functions in the upper and
lower sections of our GUI, we need to add a border and title to each JPanel.
First we’ll accomplish this using the Properties window and then
we’ll try it using the pop-up menu.</p>
+<p>|To add title borders to the JPanels:</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Select the top JPanel in the GUI Builder.</p>
+</li>
+<li>
+<p>In the Properties window, click the ellipsis button (…​) next
to the Border property.</p>
+</li>
+<li>
+<p>In the JPanel Border editor that appears, select the TitledBorder node in
the Available Borders pane.</p>
+</li>
+<li>
+<p>In the Properties pane below, enter <code>Name</code> for the Title
property.</p>
+</li>
+<li>
+<p>Click the ellipsis (…​) next to the Font property, select Bold
for the Font Style, and enter 12 for the Size. Click OK to exit the dialogs.</p>
+</li>
+<li>
+<p>Select the bottom JPanel and repeat steps 2 through 5, but this time
right-click the JPanel and access the Properties window using the pop-up menu.
Enter <code>E-mail</code> for the Title property.</p>
+</li>
+</ol>
+</div>
+<div class="paragraph">
+<p>Titled borders are added to both <code>JPanel</code> components.</p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -349,31 +342,27 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-add.swf";>Add
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To add
title borders to the JPanels:</p>
-<p class="tableblock">1. Select the top JPanel in the GUI Builder.
-2. In the Properties window, click the ellipsis button (…​) next
to the Border property.
-3. In the JPanel Border editor that appears, select the TitledBorder node in
the Available Borders pane.
-4. In the Properties pane below, enter <code>Name</code> for the Title
property.
-5. Click the ellipsis (…​) next to the Font property, select Bold
for the Font Style, and enter 12 for the Size. Click OK to exit the dialogs.
-6. Select the bottom JPanel and repeat steps 2 through 5, but this time
right-click the JPanel and access the Properties window using the pop-up menu.
Enter <code>E-mail</code> for the Title property.</p>
-<p class="tableblock">Titled borders are added to both <code>JPanel</code>
components.</p></td>
+<td class="tableblock halign-left valign-top"><p
class="tableblock">[.feature] — image::images/02_add_borders-small.png[role="left",
link="images/02_add_borders.png"] — </p>
+<p class="tableblock">=== Adding Individual Components to the Form</p>
+<p class="tableblock">Now we need to start adding the components that will
present the actual contact information in our contact list. In this task
we’ll add four JTextFields that will display the contact information and
the JLabels that will describe them. While accomplishing this, notice the
horizontal and vertical guidelines that the GUI Builder displays, suggesting
the preferred component spacing as defined by your operating system’s
look and feel. This ensures that your [...]
</tr>
</tbody>
</table>
-<div class="openblock feature">
-<div class="content">
-<div class="imageblock left">
-<div class="content">
-<a class="image" href="images/02_add_borders.png"><img
src="images/02_add_borders-small.png" alt="02 add borders small"></a>
-</div>
-</div>
-</div>
+<div class="paragraph">
+<p>|To add a JLabel to the form:</p>
</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>In the Palette window, select the Label component from the Swing Controls
category.</p>
+</li>
+<li>
+<p>Move the cursor over the <code>Name</code> JPanel we added earlier. When
the guidelines appear indicating that the JLabel is positioned in the top left
corner of the JPanel with a small margin at the top and left edges, click to
place the label.</p>
+</li>
+</ol>
</div>
-<div class="sect2">
-<h3 id="_adding_individual_components_to_the_form">Adding Individual
Components to the Form</h3>
<div class="paragraph">
-<p>Now we need to start adding the components that will present the actual
contact information in our contact list. In this task we’ll add four
JTextFields that will display the contact information and the JLabels that will
describe them. While accomplishing this, notice the horizontal and vertical
guidelines that the GUI Builder displays, suggesting the preferred component
spacing as defined by your operating system’s look and feel. This ensures
that your GUI is automaticall [...]
+<p>The JLabel is added to the form and a corresponding node representing the
component is added to the Inspector window.</p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -381,15 +370,25 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-add.swf";>Add
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To add a
JLabel to the form:</p>
-<p class="tableblock">1. In the Palette window, select the Label component
from the Swing Controls category.
-2. Move the cursor over the <code>Name</code> JPanel we added earlier. When
the guidelines appear indicating that the JLabel is positioned in the top left
corner of the JPanel with a small margin at the top and left edges, click to
place the label.</p>
-<p class="tableblock">The JLabel is added to the form and a corresponding node
representing the component is added to the Inspector window.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Before
going further, we need to edit the display text of the JLabel we just added.
Though you can edit component display text at any point, the easiest way is to
do this as you add them.</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
-<p>Before going further, we need to edit the display text of the JLabel we
just added. Though you can edit component display text at any point, the
easiest way is to do this as you add them.</p>
+<p>|To edit the display text of a JLabel:</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Double-click the JLabel to select its display text.</p>
+</li>
+<li>
+<p>Type <code>First Name:</code> and press Enter.</p>
+</li>
+</ol>
+</div>
+<div class="paragraph">
+<p>The JLabel’s new name is displayed and the component’s width
adjusts as a result of the edit.</p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -397,15 +396,25 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-add.swf";>Add
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To edit
the display text of a JLabel:</p>
-<p class="tableblock">1. Double-click the JLabel to select its display text.
-2. Type <code>First Name:</code> and press Enter.</p>
-<p class="tableblock">The JLabel’s new name is displayed and the
component’s width adjusts as a result of the edit.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Now
we’ll add a JTextField so we can get a glimpse of the GUI Builder’s
baseline alignment feature.</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
-<p>Now we’ll add a JTextField so we can get a glimpse of the GUI
Builder’s baseline alignment feature.</p>
+<p>|To add a JTextField to the form:</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>In the Palette window, select the Text Field component from the Swing
Controls category.</p>
+</li>
+<li>
+<p>Move the cursor immediately to the right of the <code>First Name:</code>
JLabel we just added. When the horizontal guideline appears indicating that the
JTextField’s baseline is aligned with that of the JLabel and the spacing
between the two components is suggested with a vertical guideline, click to
position the JTextField.</p>
+</li>
+</ol>
+</div>
+<div class="paragraph">
+<p>The JTextField snaps into position in the form aligned with the
JLabel’s baseline, as shown in the following illustration. Notice that
the JLabel shifted downward slightly in order to align with the taller text
field’s baseline. As usual, a node representing the component is added to
the Navigator window.</p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -413,25 +422,30 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-add.swf";>Add
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To add a
JTextField to the form:</p>
-<p class="tableblock">1. In the Palette window, select the Text Field
component from the Swing Controls category.
-2. Move the cursor immediately to the right of the <code>First Name:</code>
JLabel we just added. When the horizontal guideline appears indicating that the
JTextField’s baseline is aligned with that of the JLabel and the spacing
between the two components is suggested with a vertical guideline, click to
position the JTextField.</p>
-<p class="tableblock">The JTextField snaps into position in the form aligned
with the JLabel’s baseline, as shown in the following illustration.
Notice that the JLabel shifted downward slightly in order to align with the
taller text field’s baseline. As usual, a node representing the component
is added to the Navigator window.</p></td>
+<td class="tableblock halign-left valign-top"><p
class="tableblock">image::images/03_indy_add_1.png[]</p>
+<p class="tableblock">Before proceeding further, we need to add an additional
JLabel and JTextField immediately to the right of those we just added, as shown
in the following illustration. This time enter <code>Last Name:</code> as the
JLabel’s display text and leave the JTextFields' placeholder text as it
is for now.</p>
+<p class="tableblock">image::images/03_indy_add_2.png[]</p></td>
</tr>
</tbody>
</table>
-<div class="imageblock">
-<div class="content">
-<img src="images/03_indy_add_1.png" alt="03 indy add 1">
-</div>
-</div>
<div class="paragraph">
-<p>Before proceeding further, we need to add an additional JLabel and
JTextField immediately to the right of those we just added, as shown in the
following illustration. This time enter <code>Last Name:</code> as the
JLabel’s display text and leave the JTextFields' placeholder text as it
is for now.</p>
+<p>|To resize a JTextField:</p>
</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/03_indy_add_2.png" alt="03 indy add 2">
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Select the JTextField we just added to the right of the <code>Last
Name:</code> JLabel.</p>
+</li>
+<li>
+<p>Drag the JTextField’s right edge resize handle toward the right edge
of the enclosing JPanel.</p>
+</li>
+<li>
+<p>When the vertical alignment guidelines appear suggesting the margin between
the text field and right edge of the JPanel, release the mouse button to resize
the JTextField.</p>
+</li>
+</ol>
</div>
+<div class="paragraph">
+<p>The JTextField’s right edge snaps into alignment with the
JPanel’s recommended edge margin, as shown in the following
illustration.</p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -439,24 +453,30 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-add.swf";>Add
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To resize
a JTextField:</p>
-<p class="tableblock">1. Select the JTextField we just added to the right of
the <code>Last Name:</code> JLabel.
-2. Drag the JTextField’s right edge resize handle toward the right edge
of the enclosing JPanel.
-3. When the vertical alignment guidelines appear suggesting the margin between
the text field and right edge of the JPanel, release the mouse button to resize
the JTextField.</p>
-<p class="tableblock">The JTextField’s right edge snaps into alignment
with the JPanel’s recommended edge margin, as shown in the following
illustration.</p></td>
+<td class="tableblock halign-left valign-top"><p
class="tableblock">image::images/03_indy_add_3.png[]</p>
+<p class="tableblock">=== Adding Multiple Components to the Form</p>
+<p class="tableblock">Now we’ll add the <code>Title:</code> and
<code>Nickname:</code> JLabels that describe two JTextFields that we’re
going to add in a minute. We’ll drag and drop the components while
pressing the Shift key, to quickly add them to the form. While accomplishing
this, again notice that the GUI Builder displays horizontal and vertical
guidelines suggesting the preferred component spacing.</p></td>
</tr>
</tbody>
</table>
-<div class="imageblock">
-<div class="content">
-<img src="images/03_indy_add_3.png" alt="03 indy add 3">
-</div>
+<div class="paragraph">
+<p>|To add multiple JLabels to the form:</p>
</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>In the Palette window, select the Label component from the Swing Controls
category by clicking and releasing the mouse button.</p>
+</li>
+<li>
+<p>Move the cursor over the form directly below the <code>First Name:</code>
JLabel we added earlier. When the guidelines appear indicating that the new
JLabel’s left edge is aligned with that of the JLabel above and a small
margin exists between them, shift-click to place the first JLabel.</p>
+</li>
+<li>
+<p>While still pressing the Shift key, place another JLabel immediately to the
right of the first. Make certain to release the Shift key prior to positioning
the second JLabel. If you forget to release the Shift key prior to positioning
the last JLabel, simply press the Escape key.</p>
+</li>
+</ol>
</div>
-<div class="sect2">
-<h3 id="_adding_multiple_components_to_the_form">Adding Multiple Components to
the Form</h3>
<div class="paragraph">
-<p>Now we’ll add the <code>Title:</code> and <code>Nickname:</code>
JLabels that describe two JTextFields that we’re going to add in a
minute. We’ll drag and drop the components while pressing the Shift key,
to quickly add them to the form. While accomplishing this, again notice that
the GUI Builder displays horizontal and vertical guidelines suggesting the
preferred component spacing.</p>
+<p>The JLabels are added to the form creating a second row, as shown in the
following illustration. Nodes representing each component are added to the
Navigator window.</p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -464,21 +484,29 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-add.swf";>Add
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To add
multiple JLabels to the form:</p>
-<p class="tableblock">1. In the Palette window, select the Label component
from the Swing Controls category by clicking and releasing the mouse button.
-2. Move the cursor over the form directly below the <code>First Name:</code>
JLabel we added earlier. When the guidelines appear indicating that the new
JLabel’s left edge is aligned with that of the JLabel above and a small
margin exists between them, shift-click to place the first JLabel.
-3. While still pressing the Shift key, place another JLabel immediately to the
right of the first. Make certain to release the Shift key prior to positioning
the second JLabel. If you forget to release the Shift key prior to positioning
the last JLabel, simply press the Escape key.</p>
-<p class="tableblock">The JLabels are added to the form creating a second row,
as shown in the following illustration. Nodes representing each component are
added to the Navigator window.</p></td>
+<td class="tableblock halign-left valign-top"><p
class="tableblock">image::images/04_multi-add_1.png[]</p>
+<p class="tableblock">Before moving on, we need to edit the JLabels' name so
that we’ll be able to see the effect of the alignments we’ll set
later.</p></td>
</tr>
</tbody>
</table>
-<div class="imageblock">
-<div class="content">
-<img src="images/04_multi-add_1.png" alt="04 multi add 1">
+<div class="paragraph">
+<p>|To edit the display text of JLabels:</p>
</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Double-click the first JLabel to select its display text.</p>
+</li>
+<li>
+<p>Type <code>Title:</code> and press Enter.</p>
+</li>
+<li>
+<p>Repeat steps 1 and 2, entering <code>Nickname:</code> for the second
JLabel’s name property.</p>
+</li>
+</ol>
</div>
<div class="paragraph">
-<p>Before moving on, we need to edit the JLabels' name so that we’ll be
able to see the effect of the alignments we’ll set later.</p>
+<p>The JLabels' new names are displayed in the form and are shifted as a
result of their edited widths, as shown in the following illustration.</p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -486,36 +514,46 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-add.swf";>Add
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To edit
the display text of JLabels:</p>
-<p class="tableblock">1. Double-click the first JLabel to select its display
text.
-2. Type <code>Title:</code> and press Enter.
-3. Repeat steps 1 and 2, entering <code>Nickname:</code> for the second
JLabel’s name property.</p>
-<p class="tableblock">The JLabels' new names are displayed in the form and are
shifted as a result of their edited widths, as shown in the following
illustration.</p></td>
+<td class="tableblock halign-left valign-top"><p
class="tableblock">image::images/04_multi-add_2.png[]</p>
+<p class="tableblock">=== Inserting Components</p>
+<p class="tableblock">NOTE: Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-insert.swf";>Inserting
components (.swf)</a> screencast for an interactive demo on the section
below.</p>
+<p class="tableblock">Often it is necessary to add a component between
components that are already placed in a form. Whenever you add a component
between two existing components, the GUI Builder automatically shifts them to
make room for the new component. To demonstrate this, we’ll insert a
JTextField between the JLabels we added previously, as shown in the following
two illustrations.</p></td>
</tr>
</tbody>
</table>
-<div class="imageblock">
-<div class="content">
-<img src="images/04_multi-add_2.png" alt="04 multi add 2">
+<div class="paragraph">
+<p>|To insert a JTextField between two JLabels:</p>
</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>In the Palette window, select the Text Field component from the Swing
Controls category.</p>
+</li>
+<li>
+<p>Move the cursor over the <code>Title:</code> and <code>Nickname:</code>
JLabels on the second row such that the JTextField overlaps both and is aligned
to their baselines. If you encounter difficulty positioning the new text field,
you can snap it to the left guideline of the <code>Nickname</code> JLabel as
shown in the first image below.</p>
+</li>
+<li>
+<p>Click to place the JTextField between the <code>Title:</code> and
<code>Nickname:</code> JLabels.</p>
+</li>
+</ol>
</div>
+<div class="paragraph">
+<p>The JTextField snaps into position between the two JLabels. The rightmost
JLabel shifts toward the right of the JTextField to accommodate the suggested
horizontal offset.</p>
</div>
-<div class="sect2">
-<h3 id="_inserting_components">Inserting Components</h3>
-<div class="admonitionblock note">
-<table>
-<tr>
-<td class="icon">
-<i class="fa icon-note" title="Note"></i>
-</td>
-<td class="content">
-Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-insert.swf";>Inserting
components (.swf)</a> screencast for an interactive demo on the section below.
-</td>
-</tr>
+<table class="tableblock frame-all grid-all spread">
</table>
-</div>
<div class="paragraph">
-<p>Often it is necessary to add a component between components that are
already placed in a form. Whenever you add a component between two existing
components, the GUI Builder automatically shifts them to make room for the new
component. To demonstrate this, we’ll insert a JTextField between the
JLabels we added previously, as shown in the following two illustrations.</p>
+<p>|image::images/05_insert_1.png[]</p>
+</div>
+<div class="literalblock">
+<div class="content">
+<pre>|</pre>
+</div>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/05_insert_2.png" alt="05 insert 2">
+</div>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -523,29 +561,50 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-insert.swf";>
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To insert
a JTextField between two JLabels:</p>
-<p class="tableblock">1. In the Palette window, select the Text Field
component from the Swing Controls category.
-2. Move the cursor over the <code>Title:</code> and <code>Nickname:</code>
JLabels on the second row such that the JTextField overlaps both and is aligned
to their baselines. If you encounter difficulty positioning the new text field,
you can snap it to the left guideline of the <code>Nickname</code> JLabel as
shown in the first image below.
-3. Click to place the JTextField between the <code>Title:</code> and
<code>Nickname:</code> JLabels.</p>
-<p class="tableblock">The JTextField snaps into position between the two
JLabels. The rightmost JLabel shifts toward the right of the JTextField to
accommodate the suggested horizontal offset.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">We still
need to add one additional JTextField to the form that will display each
contact’s nickname on the right side of the form.</p></td>
</tr>
</tbody>
</table>
+<div class="paragraph">
+<p>|To add a JTextField:</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>In the Palette window, select the Text Field component from the Swing
category.</p>
+</li>
+<li>
+<p>Move the cursor to the right of the <code>Nickname</code> label and click
to place the text field.</p>
+</li>
+</ol>
+</div>
+<div class="paragraph">
+<p>The JTextField snaps into position next to the JLabel on its left.</p>
+</div>
<table class="tableblock frame-all grid-all spread">
-<colgroup>
-<col style="width: 100%;">
-</colgroup>
-<tbody>
-<tr>
-<td class="tableblock halign-left valign-top"><p
class="tableblock">image::images/05_insert_1.png[]</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p
class="tableblock">image::images/05_insert_2.png[]</p></td>
-</tr>
-</tbody>
</table>
<div class="paragraph">
-<p>We still need to add one additional JTextField to the form that will
display each contact’s nickname on the right side of the form.</p>
+<p>|To resize a JTextField:</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Drag the resize handles of the <code>Nickname:</code> label’s
JTextField you added in the previous task toward the right of the enclosing
JPanel.</p>
+</li>
+<li>
+<p>When the vertical alignment guidelines appear suggesting the margin between
the text field and JPanel edges, release the mouse button to resize the
JTextField.</p>
+</li>
+</ol>
+</div>
+<div class="paragraph">
+<p>The JTextField’s right edge snaps into alignment with the
JPanel’s recommended edge margin and the GUI Builder infers the
appropriate resizing behavior.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Press Ctrl-S to save the file.</p>
+</li>
+</ol>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -553,56 +612,80 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-insert.swf";>
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To add a
JTextField:</p>
-<p class="tableblock">1. In the Palette window, select the Text Field
component from the Swing category.
-2. Move the cursor to the right of the <code>Nickname</code> label and click
to place the text field.</p>
-<p class="tableblock">The JTextField snaps into position next to the JLabel on
its left.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">----</p>
+<p class="tableblock"><a href="#top">top</a></p>
+<p class="tableblock">== Moving Forward</p>
+<p class="tableblock">Alignment is one of the most fundamental aspects of
creating professional-looking GUIs. In the previous section we got a glimpse of
the IDE’s alignment features while adding the JLabel and JTextField
components to our ContactEditorUI form. Next, we’ll take a more in depth
look at the GUI Builder’s alignment features as we work with the various
other components we need for our application.</p>
+<p class="tableblock">[quote]
+----</p>
+<p class="tableblock">=== Component Alignment</p>
+<p class="tableblock">NOTE: Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-align.swf";>Aligning and
anchoring components (.swf)</a> screencast for an interactive demo on the
sections below.</p>
+<p class="tableblock">Every time you add a component to a form, the GUI
Builder effectively aligns them, as evidenced by the alignment guidelines that
appear. It is sometimes necessary, however, to specify different relationships
between groups of components as well. Earlier we added four JLabels that we
need for our ContactEditor GUI, but we didn’t align them. Now we’ll
align the two columns of JLabels so that their right edges line up.</p></td>
</tr>
</tbody>
</table>
+<div class="paragraph">
+<p>|To align components:</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Hold down the <code>Ctrl</code> key and click to select the <code>First
Name:</code> and <code>Title:</code> JLabels on the left side of the
form.</p>
+</li>
+<li>
+<p>Click the Align Right in Column button (image::images/align_r.png[]) in the
toolbar. Alternately, you can right-click either one and choose Align >
Right in Column from the pop-up menu.</p>
+</li>
+<li>
+<p>Repeat this for the <code>Last Name:</code> and <code>Nickname:</code>
JLabels as well.</p>
+</li>
+</ol>
+</div>
+<div class="paragraph">
+<p>The JLabels' positions shift such that the right edges of their display
text are aligned. The anchoring relationships are updated, indicating that the
components have been grouped.</p>
+</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
<col style="width: 100%;">
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To resize
a JTextField:</p>
-<p class="tableblock">1. Drag the resize handles of the
<code>Nickname:</code> label’s JTextField you added in the previous task
toward the right of the enclosing JPanel.
-2. When the vertical alignment guidelines appear suggesting the margin between
the text field and JPanel edges, release the mouse button to resize the
JTextField.</p>
-<p class="tableblock">The JTextField’s right edge snaps into alignment
with the JPanel’s recommended edge margin and the GUI Builder infers the
appropriate resizing behavior.</p>
-<p class="tableblock">3. Press Ctrl-S to save the file.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Before
we’re finished with the JTextFields we added earlier, we need to make
sure that the two JTextFields we inserted between the JLabels are set to resize
correctly. Unlike the two JTextFields that we stretched to the right edge of
our form, inserted components' resizeability behavior isn’t automatically
set.</p></td>
</tr>
</tbody>
</table>
-<div class="listingblock">
-<div class="content">
-<pre><<top,top>>
-
-
-== Moving Forward
-
-Alignment is one of the most fundamental aspects of creating
professional-looking GUIs. In the previous section we got a glimpse of the
IDE's alignment features while adding the JLabel and JTextField components to
our ContactEditorUI form. Next, we'll take a more in depth look at the GUI
Builder's alignment features as we work with the various other components we
need for our application.
-
-[quote]</pre>
+<div class="paragraph">
+<p>|To set component resizeability behavior:</p>
</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Control-click the two inserted JTextField components to select them in the
GUI Builder.</p>
+</li>
+<li>
+<p>With both JTextFields selected, right-click either one of them and choose
Auto Resizing > Horizontal from the pop-up menu.</p>
+</li>
+</ol>
</div>
+<div class="paragraph">
+<p>The JTextFields are set to resize horizontally at runtime. The alignment
guidelines and anchoring indicators are updated, providing visual feedback of
the component relationships.</p>
</div>
-<div class="sect2">
-<h3 id="_component_alignment">Component Alignment</h3>
-<div class="admonitionblock note">
-<table>
-<tr>
-<td class="icon">
-<i class="fa icon-note" title="Note"></i>
-</td>
-<td class="content">
-Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-align.swf";>Aligning and
anchoring components (.swf)</a> screencast for an interactive demo on the
sections below.
-</td>
-</tr>
+<table class="tableblock frame-all grid-all spread">
</table>
+<div class="paragraph">
+<p>|To set components to be the same size:</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Control-click all four of the JTextFields in the form to select them.</p>
+</li>
+<li>
+<p>With the JTextFields selected, right-click any one of them and choose Set
Same Size > Same Width from the pop-up menu.</p>
+</li>
+</ol>
</div>
<div class="paragraph">
-<p>Every time you add a component to a form, the GUI Builder effectively
aligns them, as evidenced by the alignment guidelines that appear. It is
sometimes necessary, however, to specify different relationships between groups
of components as well. Earlier we added four JLabels that we need for our
ContactEditor GUI, but we didn’t align them. Now we’ll align the
two columns of JLabels so that their right edges line up.</p>
+<p>The JTextFields are all set to the same width and indicators are added to
the top edge of each, providing visual feedback of the component
relationships.</p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -610,16 +693,25 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-align.swf";>A
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To align
components:</p>
-<p class="tableblock">1. Hold down the <code>Ctrl</code> key and click to
select the <code>First Name:</code> and <code>Title:</code> JLabels on the
left side of the form.
-2. Click the Align Right in Column button (image::images/align_r.png[]) in the
toolbar. Alternately, you can right-click either one and choose Align >
Right in Column from the pop-up menu.
-3. Repeat this for the <code>Last Name:</code> and <code>Nickname:</code>
JLabels as well.</p>
-<p class="tableblock">The JLabels' positions shift such that the right edges
of their display text are aligned. The anchoring relationships are updated,
indicating that the components have been grouped.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Now we
need to add another JLabel describing the JComboBox that will enable users to
select the format of the information our ContactEditor application will
display.</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
-<p>Before we’re finished with the JTextFields we added earlier, we need
to make sure that the two JTextFields we inserted between the JLabels are set
to resize correctly. Unlike the two JTextFields that we stretched to the right
edge of our form, inserted components' resizeability behavior isn’t
automatically set.</p>
+<p>|To align a JLabel to a component group:</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>In the Palette window, select the Label component from the Swing
category.</p>
+</li>
+<li>
+<p>Move the cursor below the <code>First Name</code> and <code>Title</code>
JLabels on the left side of the JPanel. When the guideline appears indicating
that the new JLabel’s right edge is aligned with the right edges of the
component group above (the two JLabels), click to position the component.</p>
+</li>
+</ol>
+</div>
+<div class="paragraph">
+<p>The JLabel snaps into a right-aligned position with the column of JLabels
above, as shown in the following illustration. The GUI Builder updates the
alignment status lines indicating the component’s spacing and anchoring
relationships.</p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -627,28 +719,29 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-align.swf";>A
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To set
component resizeability behavior:</p>
-<p class="tableblock">1. Control-click the two inserted JTextField components
to select them in the GUI Builder.
-2. With both JTextFields selected, right-click either one of them and choose
Auto Resizing > Horizontal from the pop-up menu.</p>
-<p class="tableblock">The JTextFields are set to resize horizontally at
runtime. The alignment guidelines and anchoring indicators are updated,
providing visual feedback of the component relationships.</p></td>
-</tr>
-</tbody>
-</table>
-<table class="tableblock frame-all grid-all spread">
-<colgroup>
-<col style="width: 100%;">
-</colgroup>
-<tbody>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To set
components to be the same size:</p>
-<p class="tableblock">1. Control-click all four of the JTextFields in the form
to select them.
-2. With the JTextFields selected, right-click any one of them and choose Set
Same Size > Same Width from the pop-up menu.</p>
-<p class="tableblock">The JTextFields are all set to the same width and
indicators are added to the top edge of each, providing visual feedback of the
component relationships.</p></td>
+<td class="tableblock halign-left valign-top"><p
class="tableblock">[.feature] — image::images/06_align_1-small.png[role="left",
link="images/06_align_1.png"] — 
+As in the previous examples, double-click the JLabel to select its display
text and then enter <code>Display Format:</code> for the display name. Notice
that when the JLabel snaps into position, the other components shift to
accommodate the longer display text.</p>
+<p class="tableblock">=== Baseline Alignment</p>
+<p class="tableblock">Whenever you add or move components that include text
(JLabels, JTextFields, and so forth), the IDE suggests alignments which are
based on the baselines of the text in the components. When we inserted the
JTextField earlier, for example, its baseline was automatically aligned to the
adjacent JLabels.</p>
+<p class="tableblock">Now we’ll add the combo box that will enable users
to select the format of the information that our ContactEditor application will
display. As we add the JComboBox, we’ll align its baseline to that of the
JLabel’s text. Notice once again the baseline alignment guidelines that
appear to assist us with the positioning.</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
-<p>Now we need to add another JLabel describing the JComboBox that will enable
users to select the format of the information our ContactEditor application
will display.</p>
+<p>|To align the baselines of components:</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>In the Palette window, select the Combo Box component from the Swing
Controls category.</p>
+</li>
+<li>
+<p>Move the cursor immediately to the right of the JLabel we just added. When
the horizontal guideline appears indicating that the JComboBox’s baseline
is aligned with the baseline of the text in the JLabel and the spacing between
the two components is suggested with a vertical guideline, click to position
the combo box.</p>
+</li>
+</ol>
+</div>
+<div class="paragraph">
+<p>The component snaps into a position aligned with the baseline of the text
in the JLabel to its left, as shown in the following illustration. The GUI
Builder displays status lines indicating the component’s spacing and
anchoring relationships.</p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -656,33 +749,41 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-align.swf";>A
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To align a
JLabel to a component group:</p>
-<p class="tableblock">1. In the Palette window, select the Label component
from the Swing category.
-2. Move the cursor below the <code>First Name</code> and <code>Title</code>
JLabels on the left side of the JPanel. When the guideline appears indicating
that the new JLabel’s right edge is aligned with the right edges of the
component group above (the two JLabels), click to position the component.</p>
-<p class="tableblock">The JLabel snaps into a right-aligned position with the
column of JLabels above, as shown in the following illustration. The GUI
Builder updates the alignment status lines indicating the component’s
spacing and anchoring relationships.</p></td>
+<td class="tableblock halign-left valign-top"><p
class="tableblock">[.feature] — image::images/06_align_2-small.png[role="left",
link="images/06_align_2.png"] — </p></td>
</tr>
</tbody>
</table>
+<div class="paragraph">
+<p>|To resize the JComboBox:</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Select the ComboBox in the GUI Builder.</p>
+</li>
+<li>
+<p>Drag the resize handle on the JComboBox’s right edge toward the right
until the alignment guidelines appear suggesting the preferred offset between
the JComboBox and JPanel edges.</p>
+</li>
+</ol>
+</div>
+<div class="paragraph">
+<p>As shown in the following illustration, the JComboBox’s right edge
snaps into alignment with the JPanel’s recommended edge margin and the
component’s width is automatically set to resize with the form.</p>
+</div>
<div class="openblock feature">
<div class="content">
<div class="imageblock left">
<div class="content">
-<a class="image" href="images/06_align_1.png"><img
src="images/06_align_1-small.png" alt="06 align 1 small"></a>
+<a class="image" href="images/06_align_3.png"><img
src="images/06_align_3-small.png" alt="06 align 3 small"></a>
</div>
</div>
</div>
</div>
-<div class="paragraph">
-<p>As in the previous examples, double-click the JLabel to select its display
text and then enter <code>Display Format:</code> for the display name. Notice
that when the JLabel snaps into position, the other components shift to
accommodate the longer display text.</p>
-</div>
-</div>
-<div class="sect2">
-<h3 id="_baseline_alignment">Baseline Alignment</h3>
-<div class="paragraph">
-<p>Whenever you add or move components that include text (JLabels,
JTextFields, and so forth), the IDE suggests alignments which are based on the
baselines of the text in the components. When we inserted the JTextField
earlier, for example, its baseline was automatically aligned to the adjacent
JLabels.</p>
-</div>
-<div class="paragraph">
-<p>Now we’ll add the combo box that will enable users to select the
format of the information that our ContactEditor application will display. As
we add the JComboBox, we’ll align its baseline to that of the
JLabel’s text. Notice once again the baseline alignment guidelines that
appear to assist us with the positioning.</p>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Press Ctrl-S to save the file.</p>
+</li>
+</ol>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -690,59 +791,65 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-align.swf";>A
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To align
the baselines of components:</p>
-<p class="tableblock">1. In the Palette window, select the Combo Box component
from the Swing Controls category.
-2. Move the cursor immediately to the right of the JLabel we just added. When
the horizontal guideline appears indicating that the JComboBox’s baseline
is aligned with the baseline of the text in the JLabel and the spacing between
the two components is suggested with a vertical guideline, click to position
the combo box.</p>
-<p class="tableblock">The component snaps into a position aligned with the
baseline of the text in the JLabel to its left, as shown in the following
illustration. The GUI Builder displays status lines indicating the
component’s spacing and anchoring relationships.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Editing
component models is beyond the scope of this tutorial, so for the time being
we’ll leave the JComboBox’s placeholder item list as it is.</p>
+<p class="tableblock">----</p>
+<p class="tableblock"><a href="#top">top</a></p>
+<p class="tableblock">== Reviewing What We’ve Learned</p>
+<p class="tableblock">We’ve got off to a good start building our
ContactEditor GUI, but let’s take a minute to recap what we’ve
learned while we add a few more of the components our interface requires.</p>
+<p class="tableblock">Until now we’ve concentrated on adding components
to our ContactEditor GUI using the IDE’s alignment guidelines to help us
with positioning. It is important to understand, however, that another integral
part of component placement is anchoring. Though we haven’t discussed it
yet, you’ve already taken advantage of this feature without realizing it.
As mentioned previously, whenever you add a component to a form, the IDE
suggests the target loo [...]
+<p class="tableblock">[quote]
+----</p>
+<p class="tableblock">=== Adding, Aligning, and Anchoring</p>
+<p class="tableblock">The GUI Builder enables you to lay out your forms
quickly and easily by streamlining typical workflow gestures. Whenever you add
a component to a form, the GUI Builder automatically snaps them into the
preferred positions and sets the necessary chaining relationships so you can
concentrate on designing your forms rather than struggling with complicated
implementation details.</p></td>
</tr>
</tbody>
</table>
-<div class="openblock feature">
-<div class="content">
-<div class="imageblock left">
-<div class="content">
-<a class="image" href="images/06_align_2.png"><img
src="images/06_align_2-small.png" alt="06 align 2 small"></a>
-</div>
+<div class="paragraph">
+<p>|To add, align, and edit the display text of a JLabel:</p>
</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>In the Palette window, select the Label component from the Swing Controls
category.</p>
+</li>
+<li>
+<p>Move the cursor over the form immediately below the bottom JPanel’s
E-mail title. When the guidelines appear indicating that it’s positioned
in the top left corner of the JPanel with a small margin at the top and left
edges, click to place the JLabel.</p>
+</li>
+<li>
+<p>Double-click the JLabel to select its display text. Then type <code>E-mail
Address: </code> and press Enter.</p>
+</li>
+</ol>
</div>
+<div class="paragraph">
+<p>The JLabel snaps into the preferred position in the form, anchored to the
top and left edges of the enclosing JPanel. Just as before, a corresponding
node representing the component is added to the Navigator window.</p>
</div>
<table class="tableblock frame-all grid-all spread">
-<colgroup>
-<col style="width: 100%;">
-</colgroup>
-<tbody>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To resize
the JComboBox:</p>
-<p class="tableblock">1. Select the ComboBox in the GUI Builder.
-2. Drag the resize handle on the JComboBox’s right edge toward the right
until the alignment guidelines appear suggesting the preferred offset between
the JComboBox and JPanel edges.</p>
-<p class="tableblock">As shown in the following illustration, the
JComboBox’s right edge snaps into alignment with the JPanel’s
recommended edge margin and the component’s width is automatically set to
resize with the form.</p>
-<p
class="tableblock">[.feature] — image::images/06_align_3-small.png[role="left",
link="images/06_align_3.png"] — 
-3. Press Ctrl-S to save the file.</p></td>
-</tr>
-</tbody>
</table>
<div class="paragraph">
-<p>Editing component models is beyond the scope of this tutorial, so for the
time being we’ll leave the JComboBox’s placeholder item list as it
is.</p>
+<p>|To add a JTextField:</p>
</div>
-<div class="listingblock">
-<div class="content">
-<pre><<top,top>>
-
-
-== Reviewing What We've Learned
-
-We've got off to a good start building our ContactEditor GUI, but let's take a
minute to recap what we've learned while we add a few more of the components
our interface requires.
-
-Until now we've concentrated on adding components to our ContactEditor GUI
using the IDE's alignment guidelines to help us with positioning. It is
important to understand, however, that another integral part of component
placement is anchoring. Though we haven't discussed it yet, you've already
taken advantage of this feature without realizing it. As mentioned previously,
whenever you add a component to a form, the IDE suggests the target look and
feel's preferred positioning with guidel [...]
-
-[quote]</pre>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>In the Palette window, select the Text Field component from the Swing
Controls category.</p>
+</li>
+<li>
+<p>Move the cursor immediately to the right of the <code>E-mail
Address</code> label we just added. When the guidelines appear indicating that
the JTextField’s baseline is aligned with the baseline of the text in the
JLabel and the margin between the two components is suggested with a vertical
guideline, click to position the text field.</p>
+</li>
+</ol>
</div>
+<div class="paragraph">
+<p>The JTextField snaps into position on the right of the <code>E-mail
Address:</code> JLabel and is chained to the JLabel. Its corresponding node is
also added to the Inspector window.</p>
</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Drag the resize handle of the JTextField toward the right of the enclosing
JPanel until the alignment guidelines appear suggesting the offset between the
JTextField and JPanel edges.</p>
+</li>
+</ol>
</div>
-<div class="sect2">
-<h3 id="_adding_aligning_and_anchoring">Adding, Aligning, and Anchoring</h3>
<div class="paragraph">
-<p>The GUI Builder enables you to lay out your forms quickly and easily by
streamlining typical workflow gestures. Whenever you add a component to a form,
the GUI Builder automatically snaps them into the preferred positions and sets
the necessary chaining relationships so you can concentrate on designing your
forms rather than struggling with complicated implementation details.</p>
+<p>The JTextField’s right edge snaps to the alignment guideline
indicating the preferred margins.</p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -750,31 +857,55 @@ Until now we've concentrated on adding components to our
ContactEditor GUI using
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To add,
align, and edit the display text of a JLabel:</p>
-<p class="tableblock">1. In the Palette window, select the Label component
from the Swing Controls category.
-2. Move the cursor over the form immediately below the bottom JPanel’s
E-mail title. When the guidelines appear indicating that it’s positioned
in the top left corner of the JPanel with a small margin at the top and left
edges, click to place the JLabel.
-3. Double-click the JLabel to select its display text. Then type <code>E-mail
Address: </code> and press Enter.</p>
-<p class="tableblock">The JLabel snaps into the preferred position in the
form, anchored to the top and left edges of the enclosing JPanel. Just as
before, a corresponding node representing the component is added to the
Navigator window.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Now we
need to add the JList that will display our ContactEditor’s entire
contact list.</p></td>
</tr>
</tbody>
</table>
+<div class="paragraph">
+<p>|To add and resize a JList:</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>In the Palette window, select the List component from the Swing Controls
category.</p>
+</li>
+<li>
+<p>Move the cursor immediately below the <code>E-mail Address</code> JLabel
we added earlier. When the guidelines appear indicating that the JList’s
top and left edges are aligned with the preferred margins along the
JPanel’s left edge and the JLabel above, click to position the JList.</p>
+</li>
+<li>
+<p>Drag the JList’s right resize handle toward the right of the
enclosing JPanel until the alignment guidelines appear indicating that it is
the same width as the JTextField above.</p>
+</li>
+</ol>
+</div>
+<div class="paragraph">
+<p>The JList snaps into the position designated by the alignment guidelines
and its corresponding node is displayed in the Inspector window. Notice also
that the form expands to accommodate the newly added JList.</p>
+</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
<col style="width: 100%;">
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To add a
JTextField:</p>
-<p class="tableblock">1. In the Palette window, select the Text Field
component from the Swing Controls category.
-2. Move the cursor immediately to the right of the <code>E-mail
Address</code> label we just added. When the guidelines appear indicating that
the JTextField’s baseline is aligned with the baseline of the text in the
JLabel and the margin between the two components is suggested with a vertical
guideline, click to position the text field.</p>
-<p class="tableblock">The JTextField snaps into position on the right of the
<code>E-mail Address:</code> JLabel and is chained to the JLabel. Its
corresponding node is also added to the Inspector window.</p>
-<p class="tableblock">3. Drag the resize handle of the JTextField toward the
right of the enclosing JPanel until the alignment guidelines appear suggesting
the offset between the JTextField and JPanel edges.</p>
-<p class="tableblock">The JTextField’s right edge snaps to the alignment
guideline indicating the preferred margins.</p></td>
+<td class="tableblock halign-left valign-top"><p
class="tableblock">[.feature] — image::images/06_align_4-small.png[role="left",
link="images/06_align_4.png"] — 
+Since JLists are used to display long lists of data, they typically require
the addition of a JScrollPane. Whenever you add a component which requires a
JScrollPane, the GUI Builder automatically adds it for you. Because
JScrollPanes are non-visual components, you have to use the Inspector window in
order to view or edit any JScrollPanes that the GUI Builder created.</p>
+<p class="tableblock">=== Component Sizing</p>
+<p class="tableblock">NOTE: Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-resize.swf";>Resizing and
indenting components (.swf)</a> screencast for an interactive demo on the
sections below.</p>
+<p class="tableblock">It is often beneficial to set several related
components, such as buttons in modal dialogues, to be the same size for visual
consistency. To demonstrate this we’ll add four JButtons to our
ContactEditor form that will allow us to add, edit, and remove individual
entries from our contact list, as shown in the following illustrations.
Afterwards, we’ll set the four buttons to be the same size so they can be
easily recognized as offering related functionali [...]
</tr>
</tbody>
</table>
<div class="paragraph">
-<p>Now we need to add the JList that will display our ContactEditor’s
entire contact list.</p>
+<p>|To add, align, and edit the display text of multiple buttons:</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>In the Palette window, select the Button component from the Swing Controls
category.</p>
+</li>
+<li>
+<p>Move the JButton over the right edge of the <code>E-mail Address</code>
JTextField in the lower JPanel. When the guidelines appear indicating that the
JButton’s baseline and right edge are aligned with that of the
JTextField, shift-click to place the first button along the JFrame’s
right edge. The JTextField’s width shrinks to accommodate the JButton
when you release the mouse button.</p>
+</li>
+</ol>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -782,78 +913,60 @@ Until now we've concentrated on adding components to our
ContactEditor GUI using
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To add and
resize a JList:</p>
-<p class="tableblock">1. In the Palette window, select the List component from
the Swing Controls category.
-2. Move the cursor immediately below the <code>E-mail Address</code> JLabel
we added earlier. When the guidelines appear indicating that the JList’s
top and left edges are aligned with the preferred margins along the
JPanel’s left edge and the JLabel above, click to position the JList.
-3. Drag the JList’s right resize handle toward the right of the
enclosing JPanel until the alignment guidelines appear indicating that it is
the same width as the JTextField above.</p>
-<p class="tableblock">The JList snaps into the position designated by the
alignment guidelines and its corresponding node is displayed in the Inspector
window. Notice also that the form expands to accommodate the newly added
JList.</p></td>
+<td class="tableblock halign-left valign-top"><p
class="tableblock">[.feature] — image::images/buttons_1-small.png[role="left",
link="images/buttons_1.png"] — </p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p
class="tableblock">[.feature] — image::images/buttons_2-small.png[role="left",
link="images/buttons_2.png"] — </p></td>
</tr>
</tbody>
</table>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Move the cursor over the top right corner of the JList in the lower JPanel.
When the guidelines appear indicating that the JButton’s top and right
edges are aligned with that of the JList, shift-click to place the second
button along the JFrame’s right edge.</p>
+</li>
+</ol>
+</div>
<div class="openblock feature">
<div class="content">
<div class="imageblock left">
<div class="content">
-<a class="image" href="images/06_align_4.png"><img
src="images/06_align_4-small.png" alt="06 align 4 small"></a>
-</div>
+<a class="image" href="images/buttons_3.png"><img
src="images/buttons_3-small.png" alt="buttons 3 small"></a>
</div>
</div>
</div>
-<div class="paragraph">
-<p>Since JLists are used to display long lists of data, they typically require
the addition of a JScrollPane. Whenever you add a component which requires a
JScrollPane, the GUI Builder automatically adds it for you. Because
JScrollPanes are non-visual components, you have to use the Inspector window in
order to view or edit any JScrollPanes that the GUI Builder created.</p>
-</div>
</div>
-<div class="sect2">
-<h3 id="_component_sizing">Component Sizing</h3>
-<div class="admonitionblock note">
-<table>
-<tr>
-<td class="icon">
-<i class="fa icon-note" title="Note"></i>
-</td>
-<td class="content">
-Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-resize.swf";>Resizing and
indenting components (.swf)</a> screencast for an interactive demo on the
sections below.
-</td>
-</tr>
-</table>
-</div>
-<div class="paragraph">
-<p>It is often beneficial to set several related components, such as buttons
in modal dialogues, to be the same size for visual consistency. To demonstrate
this we’ll add four JButtons to our ContactEditor form that will allow us
to add, edit, and remove individual entries from our contact list, as shown in
the following illustrations. Afterwards, we’ll set the four buttons to be
the same size so they can be easily recognized as offering related
functionality.</p>
-</div>
-<table class="tableblock frame-all grid-all spread">
-<colgroup>
-<col style="width: 100%;">
-</colgroup>
-<tbody>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To add,
align, and edit the display text of multiple buttons:</p>
-<p class="tableblock">1. In the Palette window, select the Button component
from the Swing Controls category.
-2. Move the JButton over the right edge of the <code>E-mail Address</code>
JTextField in the lower JPanel. When the guidelines appear indicating that the
JButton’s baseline and right edge are aligned with that of the
JTextField, shift-click to place the first button along the JFrame’s
right edge. The JTextField’s width shrinks to accommodate the JButton
when you release the mouse button.</p></td>
-</tr>
-</tbody>
-</table>
-<div class="paragraph">
-<p>|[.feature]</p>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Add two additional JButtons below the two we already added to create a
column. Make certain to position the JButtons such that the suggested spacing
is respected and consistent. If you forget to release the Shift key prior to
positioning the last JButton, simply press the Escape key.</p>
+</li>
+</ol>
</div>
-<div class="openblock">
+<div class="openblock feature">
<div class="content">
<div class="imageblock left">
<div class="content">
-<a class="image" href="images/buttons_1.png"><img
src="images/buttons_1-small.png" alt="buttons 1 small"></a>
+<a class="image" href="images/buttons_4.png"><img
src="images/buttons_4-small.png" alt="buttons 4 small"></a>
</div>
</div>
</div>
</div>
-<div class="literalblock">
-<div class="content">
-<pre>|</pre>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Set the display text for each JButton. (You can edit a button’s text
by right-clicking the button and choosing Edit Text. Or you can click the
button, pause, and then click again.) Enter <code>Add</code> for the top
button, <code>Edit</code> for the second, <code>Remove</code> for the third,
and <code>As Default</code> for the fourth.</p>
+</li>
+</ol>
</div>
+<div class="paragraph">
+<p>The JButton components snap into the positions designated by the alignment
guidelines. The width of the buttons changes to accommodate the new names.</p>
</div>
<div class="openblock feature">
<div class="content">
<div class="imageblock left">
<div class="content">
-<a class="image" href="images/buttons_2.png"><img
src="images/buttons_2-small.png" alt="buttons 2 small"></a>
+<a class="image" href="images/buttons_5.png"><img
src="images/buttons_5-small.png" alt="buttons 5 small"></a>
</div>
</div>
</div>
@@ -864,41 +977,34 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-resize.swf";>
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">3. Move
the cursor over the top right corner of the JList in the lower JPanel. When the
guidelines appear indicating that the JButton’s top and right edges are
aligned with that of the JList, shift-click to place the second button along
the JFrame’s right edge.</p>
-<p
class="tableblock">[.feature] — image::images/buttons_3-small.png[role="left",
link="images/buttons_3.png"] — 
-4. Add two additional JButtons below the two we already added to create a
column. Make certain to position the JButtons such that the suggested spacing
is respected and consistent. If you forget to release the Shift key prior to
positioning the last JButton, simply press the Escape key.</p>
-<p
class="tableblock">[.feature] — image::images/buttons_4-small.png[role="left",
link="images/buttons_4.png"] — 
-5. Set the display text for each JButton. (You can edit a button’s text
by right-clicking the button and choosing Edit Text. Or you can click the
button, pause, and then click again.) Enter <code>Add</code> for the top
button, <code>Edit</code> for the second, <code>Remove</code> for the third,
and <code>As Default</code> for the fourth.</p>
-<p class="tableblock">The JButton components snap into the positions
designated by the alignment guidelines. The width of the buttons changes to
accommodate the new names.</p>
-<p
class="tableblock">[.feature] — image::images/buttons_5-small.png[role="left",
link="images/buttons_5.png"] — </p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Now that
the buttons are positioned where we want them, we’ll set the four buttons
to be the same size for visual consistency as well as to clarify that they are
related functionally.</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
-<p>Now that the buttons are positioned where we want them, we’ll set the
four buttons to be the same size for visual consistency as well as to clarify
that they are related functionally.</p>
+<p>|To set components to the same size:</p>
</div>
-<table class="tableblock frame-all grid-all spread">
-<colgroup>
-<col style="width: 100%;">
-</colgroup>
-<tbody>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To set
components to the same size:</p>
-<p class="tableblock">1. Select all four JButtons by pressing the Control key
while making your selection.
-2. Right-click one of them and choose Same Size > Same Width from the
pop-up menu.</p>
-<p class="tableblock">The JButtons are set to the same size as the button with
the longest name.</p>
-<p
class="tableblock">[.feature] — image::images/buttons_6-small.png[role="left",
link="images/buttons_6.png"] — </p></td>
-</tr>
-</tbody>
-</table>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Select all four JButtons by pressing the Control key while making your
selection.</p>
+</li>
+<li>
+<p>Right-click one of them and choose Same Size > Same Width from the
pop-up menu.</p>
+</li>
+</ol>
</div>
-<div class="sect2">
-<h3 id="_indentation">Indentation</h3>
<div class="paragraph">
-<p>Often it is necessary to cluster multiple components under another
component such that it is clear they belong to a group of related functions.
One typical case, for example, is placing several related checkboxes below a
common label. The GUI Builder enables you to accomplish indenting easily by
providing special guidelines suggesting the preferred offset for your operating
system’s look and feel.</p>
+<p>The JButtons are set to the same size as the button with the longest
name.</p>
+</div>
+<div class="openblock feature">
+<div class="content">
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/buttons_6.png"><img
src="images/buttons_6-small.png" alt="buttons 6 small"></a>
+</div>
+</div>
</div>
-<div class="paragraph">
-<p>In this section we’ll add a few JRadioButtons below a JLabel that
will allow users to customize the way the application displays data. Refer to
the following illustrations while accomplishing this or click the View Demo
link following the procedure to view an interactive demonstration.</p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -906,20 +1012,58 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-resize.swf";>
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To indent
JRadioButtons below a JLabel:</p>
-<p class="tableblock">1. Add a JLabel named <code>Mail Format</code> to the
form below the JList. Make certain the label is left aligned with the JList
above.
-2. In the Palette window, select the Radio Button component from the Swing
category.
-3. Move the cursor below the JLabel that we just added. When the guidelines
appear indicating that the JRadioButton’s left edge is aligned with that
of the JLabel, move the JRadioButton slightly to the right until secondary
indentation guidelines appear. Shift-click to place the first radio button.</p>
-<p
class="tableblock">[.feature] — image::images/07_indent_1-small.png[role="left",
link="images/07_indent_1.png"] — 
-4. Move the cursor to the right of the first JRadioButton. Shift-click to
place the second and third JRadioButtons, being careful to respect the
suggested component spacing. Make certain to release the Shift key prior to
positioning the last JRadioButton.
-5. Set the display text for each JRadioButton. (You can edit a button’s
text by right-clicking the button and choosing Edit Text. Or you can click the
button, pause, and then click again.) Enter <code>HTML</code> for the left
radio button, <code>Plain Text ` for the second, and `Custom</code> for the
third.</p>
-<p class="tableblock">Three JRadioButtons are added to the form and indented
below the <code>Mail Format</code> JLabel.</p>
-<p
class="tableblock">[.feature] — image::images/07_indent_3-small.png[role="left",
link="images/07_indent_3.png"] — </p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">===
Indentation</p>
+<p class="tableblock">Often it is necessary to cluster multiple components
under another component such that it is clear they belong to a group of related
functions. One typical case, for example, is placing several related checkboxes
below a common label. The GUI Builder enables you to accomplish indenting
easily by providing special guidelines suggesting the preferred offset for your
operating system’s look and feel.</p>
+<p class="tableblock">In this section we’ll add a few JRadioButtons
below a JLabel that will allow users to customize the way the application
displays data. Refer to the following illustrations while accomplishing this or
click the View Demo link following the procedure to view an interactive
demonstration.</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
-<p>Now we need to add the three JRadioButtons to a ButtonGroup to enable the
expected toggle behavior in which only one radio button can be selected at a
time. This will, in turn, ensure that our ContactEditor application’s
contact information will be displayed in the mail format of our choosing.</p>
+<p>|To indent JRadioButtons below a JLabel:</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Add a JLabel named <code>Mail Format</code> to the form below the JList.
Make certain the label is left aligned with the JList above.</p>
+</li>
+<li>
+<p>In the Palette window, select the Radio Button component from the Swing
category.</p>
+</li>
+<li>
+<p>Move the cursor below the JLabel that we just added. When the guidelines
appear indicating that the JRadioButton’s left edge is aligned with that
of the JLabel, move the JRadioButton slightly to the right until secondary
indentation guidelines appear. Shift-click to place the first radio button.</p>
+</li>
+</ol>
+</div>
+<div class="openblock feature">
+<div class="content">
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/07_indent_1.png"><img
src="images/07_indent_1-small.png" alt="07 indent 1 small"></a>
+</div>
+</div>
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Move the cursor to the right of the first JRadioButton. Shift-click to
place the second and third JRadioButtons, being careful to respect the
suggested component spacing. Make certain to release the Shift key prior to
positioning the last JRadioButton.</p>
+</li>
+<li>
+<p>Set the display text for each JRadioButton. (You can edit a button’s
text by right-clicking the button and choosing Edit Text. Or you can click the
button, pause, and then click again.) Enter <code>HTML</code> for the left
radio button, <code>Plain Text ` for the second, and `Custom</code> for the
third.</p>
+</li>
+</ol>
+</div>
+<div class="paragraph">
+<p>Three JRadioButtons are added to the form and indented below the
<code>Mail Format</code> JLabel.</p>
+</div>
+<div class="openblock feature">
+<div class="content">
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/07_indent_3.png"><img
src="images/07_indent_3-small.png" alt="07 indent 3 small"></a>
+</div>
+</div>
+</div>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -927,34 +1071,47 @@ Refer to the <a
href="http://bits.netbeans.org/media/quickstart-gui-resize.swf";>
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To add
JRadioButtons to a ButtonGroup:</p>
-<p class="tableblock">1. In the Palette window, select the Button Group
component from the Swing Controls category.
-2. Click anywhere in the GUI Builder design area to add the ButtonGroup
component to the form. Notice that the ButtonGroup does not appear in the form
itself, however, it is visible in the Navigator’s Other Components area.
-3. Select all three of the JRadioButtons in the form.
-4. In the Properties window, choose buttonGroup1 from the buttonGroup property
combo box.</p>
-<p class="tableblock">Three JRadioButtons are added to the button group.</p>
-<p
class="tableblock">[.feature] — image::images/07_group-small.png[role="left",
link="images/07_group.png"] — 
-5. Press Ctrl-S to save the file.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Now we
need to add the three JRadioButtons to a ButtonGroup to enable the expected
toggle behavior in which only one radio button can be selected at a time. This
will, in turn, ensure that our ContactEditor application’s contact
information will be displayed in the mail format of our choosing.</p></td>
</tr>
</tbody>
</table>
-<div class="listingblock">
+<div class="paragraph">
+<p>|To add JRadioButtons to a ButtonGroup:</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>In the Palette window, select the Button Group component from the Swing
Controls category.</p>
+</li>
+<li>
+<p>Click anywhere in the GUI Builder design area to add the ButtonGroup
component to the form. Notice that the ButtonGroup does not appear in the form
itself, however, it is visible in the Navigator’s Other Components
area.</p>
+</li>
+<li>
+<p>Select all three of the JRadioButtons in the form.</p>
+</li>
+<li>
+<p>In the Properties window, choose buttonGroup1 from the buttonGroup property
combo box.</p>
+</li>
+</ol>
+</div>
+<div class="paragraph">
+<p>Three JRadioButtons are added to the button group.</p>
+</div>
+<div class="openblock feature">
<div class="content">
-<pre><<top,top>>
-
-
-== Making the Final Adjustments
-
-We've managed to rough out our ContactEditor application's GUI, but there are
still a few things remaining to do. In this section, we'll take a look at a
couple of other typical layout tasks that the GUI Builder streamlines.
-
-[quote]</pre>
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/07_group.png"><img
src="images/07_group-small.png" alt="07 group small"></a>
</div>
</div>
</div>
-<div class="sect2">
-<h3 id="_finishing_up">Finishing Up</h3>
-<div class="paragraph">
-<p>Now we need to add the buttons that will enable users to confirm the
information they enter for an individual contact and add it to the contact list
or cancel, leaving the database unchanged. In this step, we’ll add the
two required buttons and then edit them so that they appear the same size in
our form even though their display text are different lengths.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Press Ctrl-S to save the file.</p>
+</li>
+</ol>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
@@ -962,99 +1119,113 @@ We've managed to rough out our ContactEditor
application's GUI, but there are st
</colgroup>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">To add and
edit the display text of buttons:</p>
-<p class="tableblock">1. If the lower JPanel is extended to the bottom edge of
the JFrame form, drag the bottom edge of the JFrame down. This gives you space
between the edge of the JFrame and the edge of the JPanel for your OK and
Cancel buttons.
-2. In the Palette window, select the Button component from the Swing Controls
category.
-3. Move the cursor over the form below the E-mail JPanel. When the guidelines
appear indicating that the JButton’s right edge is aligned with the lower
right corner of the JFrame, click to place the button.</p>
-<p
class="tableblock">[.feature] — image::images/08_cancel-small.png[role="left",
link="images/08_cancel.png"] — 
-4. Add another JButton to the left of the first, making certain to place it
using the suggested spacing along the JFrame’s bottom edge.
-5. Set the display text for each JButton. Enter <code>OK</code> for the left
button and <code>Cancel</code> for right one. Notice that the width of the
buttons changes to accommodate the new names.
-6. Set the two JButtons to be the same size by selecting both, right-clicking
either, and choosing Same Size > Same Width from the pop-up menu.</p>
-<p
class="tableblock">[.feature] — image::images/08_same_size-small.png[role="left",
link="images/08_same_size.png"] — 
-The <code>JButton</code> components appear in the form and their
corresponding nodes are displayed in the Navigator window. The
<code>JButton</code> components' code is also added to the form’s source
file which is visible in the Editor’s Source view. Each of the JButtons
are set to the same size as the button with the longest name.</p>
-<p class="tableblock">7. Press Ctrl-S to save the file.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">----</p>
+<p class="tableblock"><a href="#top">top</a></p>
+<p class="tableblock">== Making the Final Adjustments</p>
+<p class="tableblock">We’ve managed to rough out our ContactEditor
application’s GUI, but there are still a few things remaining to do. In
this section, we’ll take a look at a couple of other typical layout tasks
that the GUI Builder streamlines.</p>
+<p class="tableblock">[quote]
+----</p>
+<p class="tableblock">=== Finishing Up</p>
+<p class="tableblock">Now we need to add the buttons that will enable users to
confirm the information they enter for an individual contact and add it to the
contact list or cancel, leaving the database unchanged. In this step,
we’ll add the two required buttons and then edit them so that they appear
the same size in our form even though their display text are different
lengths.</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
-<p>The last thing we need to do is delete the placeholder text in the various
components. Note that while removing placeholder text after roughing out a form
can be a helpful technique in avoiding problems with component alignments and
anchoring relationships, most developers typically remove this text in the
process of laying out their forms. As you go through the form, select and
delete the placeholder text for each of the JTextFields. We’ll leave the
placeholder items in both th [...]
-</div>
-<div class="listingblock">
-<div class="content">
-<pre><<top,top>>
-
-
-== Previewing Your GUI
-
-Now that you have successfully built the ContactEditor GUI, you can try your
interface to see the results. You can preview your form as you work by clicking
the Preview Form button (image::images/test_form.png[]) in the GUI Builder's
toolbar. The form opens in its own window, allowing you to test it prior to
building and running.
-
-[.feature]
---
-image::images/08_preview_gui-small.png[role="left",
link="images/08_preview_gui.png"]
---
-
-<<top,top>>
-
-
-== Deploying GUI Applications
-
-In order for the interfaces you create with the GUI Builder to work outside of
the IDE, the application must be compiled against classes for the GroupLayout
layout manager and also have those classes available at runtime. These classes
are included in Java SE 6, but not in Java SE 5. If you develop the application
to run on Java SE 5, your application needs to use the Swing Layout Extensions
library.
-
-If you are running the IDE on JDK 5, the IDE automatically generates your
application code to use the Swing Layout Extensions library. When you deploy
the application, you need to include the Swing Layout Extensions library with
the application. When you build the application (Build > Build Main
Project), the IDE automatically provides a copy of the library's JAR file in
the application's ``dist/lib`` folder. The IDE also adds each of the JAR
files that are in the ``dist`` folder [...]
-
-If you are running the IDE on JDK 6, the IDE generates your application code
to use the GroupLayout classes that are in Java SE 6. This means that you can
deploy the application to run on systems with Java SE 6 installed and you do
not need to package your application with the Swing Layout Extensions library.
-
-NOTE: If you create your application using JDK 6 but you need the application
to also run on Java SE 5, you can have the IDE generate its code to use the
Swing Layout Extensions library instead of the classes in Java SE 6. Open the
ContactEditorUI class in the GUI Editor. In the Navigator, right-click the Form
ContactEditorUI node and choose Properties in the popup menu. In the Properties
dialog box, change the value of the Layout Generation Style property to Swing
Layout Extensions Library.
-
-
-=== Distributing and Running Standalone GUI Applications
-
-To prepare your GUI application for distribution outside of the IDE:
-
-* Zip the project's ``dist`` folder into a ZIP archive. (The ``dist``
folder might also contain a ``lib`` folder, which you would also need to
include.)
-
-To run your application, right-click the project name and select Run in the
context menu. In the Run Project dialog select the main class name (
``my.contacteditor.ContactEditorUI`` if speaking about the project you have
just created) and click OK. Your application is up and running.
-
-To run a standalone GUI application from the command line:
-
-1. Navigate to the project's ``dist`` folder.
-2. Type the following:
-[quote]</pre>
+<p>|To add and edit the display text of buttons:</p>
</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>If the lower JPanel is extended to the bottom edge of the JFrame form, drag
the bottom edge of the JFrame down. This gives you space between the edge of
the JFrame and the edge of the JPanel for your OK and Cancel buttons.</p>
+</li>
+<li>
+<p>In the Palette window, select the Button component from the Swing Controls
category.</p>
+</li>
+<li>
+<p>Move the cursor over the form below the E-mail JPanel. When the guidelines
appear indicating that the JButton’s right edge is aligned with the lower
right corner of the JFrame, click to place the button.</p>
+</li>
+</ol>
</div>
-<div class="literalblock">
+<div class="openblock feature">
<div class="content">
-<pre>``java -jar <jar_name>.jar``</pre>
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/08_cancel.png"><img
src="images/08_cancel-small.png" alt="08 cancel small"></a>
</div>
</div>
-<div class="listingblock">
-<div class="content">
-<pre></pre>
</div>
</div>
-<div class="admonitionblock note">
-<table>
-<tr>
-<td class="icon">
-<i class="fa icon-note" title="Note"></i>
-</td>
-<td class="content">
-If you encounter the following error:
-</td>
-</tr>
-</table>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Add another JButton to the left of the first, making certain to place it
using the suggested spacing along the JFrame’s bottom edge.</p>
+</li>
+<li>
+<p>Set the display text for each JButton. Enter <code>OK</code> for the left
button and <code>Cancel</code> for right one. Notice that the width of the
buttons changes to accommodate the new names.</p>
+</li>
+<li>
+<p>Set the two JButtons to be the same size by selecting both, right-clicking
either, and choosing Same Size > Same Width from the pop-up menu.</p>
+</li>
+</ol>
</div>
-<div class="listingblock">
+<div class="openblock feature">
<div class="content">
-<pre> ``Exception in thread "main" java.lang.NoClassDefFoundError:
org/jdesktop/layout/GroupLayout$Group``</pre>
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/08_same_size.png"><img
src="images/08_same_size-small.png" alt="08 same size small"></a>
+</div>
</div>
</div>
-<div class="paragraph">
-<p>Ensure that the <code>manifest.mf</code> file references the currently
installed version of the Swing Layout Extensions Library.</p>
</div>
<div class="paragraph">
-<p><a href="#top">top</a></p>
+<p>The <code>JButton</code> components appear in the form and their
corresponding nodes are displayed in the Navigator window. The
<code>JButton</code> components' code is also added to the form’s source
file which is visible in the Editor’s Source view. Each of the JButtons
are set to the same size as the button with the longest name.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Press Ctrl-S to save the file.</p>
+</li>
+</ol>
</div>
+<table class="tableblock frame-all grid-all spread">
+<colgroup>
+<col style="width: 100%;">
+</colgroup>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The last
thing we need to do is delete the placeholder text in the various components.
Note that while removing placeholder text after roughing out a form can be a
helpful technique in avoiding problems with component alignments and anchoring
relationships, most developers typically remove this text in the process of
laying out their forms. As you go through the form, select and delete the
placeholder text for each of th [...]
+<p class="tableblock">----</p>
+<p class="tableblock"><a href="#top">top</a></p>
+<p class="tableblock">== Previewing Your GUI</p>
+<p class="tableblock">Now that you have successfully built the ContactEditor
GUI, you can try your interface to see the results. You can preview your form
as you work by clicking the Preview Form button (image::images/test_form.png[])
in the GUI Builder’s toolbar. The form opens in its own window, allowing
you to test it prior to building and running.</p>
+<p
class="tableblock">[.feature] — image::images/08_preview_gui-small.png[role="left",
link="images/08_preview_gui.png"] — 
+<a href="#top">top</a></p>
+<p class="tableblock">== Deploying GUI Applications</p>
+<p class="tableblock">In order for the interfaces you create with the GUI
Builder to work outside of the IDE, the application must be compiled against
classes for the GroupLayout layout manager and also have those classes
available at runtime. These classes are included in Java SE 6, but not in Java
SE 5. If you develop the application to run on Java SE 5, your application
needs to use the Swing Layout Extensions library.</p>
+<p class="tableblock">If you are running the IDE on JDK 5, the IDE
automatically generates your application code to use the Swing Layout
Extensions library. When you deploy the application, you need to include the
Swing Layout Extensions library with the application. When you build the
application (Build > Build Main Project), the IDE automatically provides a
copy of the library’s JAR file in the application’s
<code>dist/lib</code> folder. The IDE also adds each of the J [...]
+<p class="tableblock">If you are running the IDE on JDK 6, the IDE generates
your application code to use the GroupLayout classes that are in Java SE 6.
This means that you can deploy the application to run on systems with Java SE 6
installed and you do not need to package your application with the Swing Layout
Extensions library.</p>
+<p class="tableblock">NOTE: If you create your application using JDK 6 but you
need the application to also run on Java SE 5, you can have the IDE generate
its code to use the Swing Layout Extensions library instead of the classes in
Java SE 6. Open the ContactEditorUI class in the GUI Editor. In the Navigator,
right-click the Form ContactEditorUI node and choose Properties in the popup
menu. In the Properties dialog box, change the value of the Layout Generation
Style property to Swing [...]
+<p class="tableblock">=== Distributing and Running Standalone GUI
Applications</p>
+<p class="tableblock">To prepare your GUI application for distribution outside
of the IDE:</p>
+<p class="tableblock">* Zip the project’s <code>dist</code> folder
into a ZIP archive. (The <code>dist</code> folder might also contain a
<code>lib</code> folder, which you would also need to include.)</p>
+<p class="tableblock">To run your application, right-click the project name
and select Run in the context menu. In the Run Project dialog select the main
class name ( <code>my.contacteditor.ContactEditorUI</code> if speaking about
the project you have just created) and click OK. Your application is up and
running.</p>
+<p class="tableblock">To run a standalone GUI application from the command
line:</p>
+<p class="tableblock">1. Navigate to the project’s <code>dist</code>
folder.
+2. Type the following:
+[quote]
+----
+ <code>java -jar <jar_name>.jar</code>
+----</p>
+<p class="tableblock">----</p>
+<p class="tableblock">NOTE: If you encounter the following error:</p>
+<p class="tableblock">----
+ <code>Exception in thread "main" java.lang.NoClassDefFoundError:
org/jdesktop/layout/GroupLayout$Group</code>
+----</p>
+<p class="tableblock">Ensure that the <code>manifest.mf</code> file
references the currently installed version of the Swing Layout Extensions
Library.</p>
+<p class="tableblock"><a href="#top">top</a></p></td>
+</tr>
+</tbody>
+</table>
</div>
</div>
</div>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@netbeans.apache.org
For additional commands, e-mail: commits-h...@netbeans.apache.org
For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists
