| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
| <!-- | |
| Copyright (c) 2009, 2014, Oracle and/or its affiliates. All rights reserved. | |
| --> | |
| <html> | |
| <head> | |
| <title>Designing a Swing GUI in NetBeans IDE - Tutorial</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > | |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css" media="screen"> | |
| <meta content="?and? 0.5.5" name="GENERATOR"> | |
| <meta name="KEYWORDS" content="NETBEANS, TUTORIAL, GUIDE, USER, DOCUMENTATION"> | |
| <meta name="description" content="This tutorial guides you through the process of creating the graphical user interface (GUI) for an application using the NetBeans IDE GUI Builder." > | |
| </head> | |
| <body> | |
| <!-- Begin Content Area --> | |
| <a name="top"></a> | |
| <h1>Designing a Swing GUI in NetBeans IDE</h1> | |
| <img src="../../../images_www/articles/73/netbeans-stamp-80-74-73.png" class="stamp" alt="Content on this page applies to NetBeans IDE 6.9 and more recent" title="Content on this page applies to the NetBeans IDE 6.9 and more recent"> | |
| <p>This tutorial guides you through the process of creating the graphical user | |
| interface (GUI) for an application called ContactEditor using the NetBeans IDE | |
| GUI Builder. In the process you will layout a GUI front-end that enables | |
| you to view and edit contact information of individuals included in an employee | |
| database. </p> | |
| <p>In this tutorial you will learn how to: use the GUI Builder Interface, create a GUI Container, add, resize, and align components, adjust component anchoring, set component auto-resizing behavior, edit component properties.</p> | |
| <p> This tutorial takes about 30 minutes to complete. </p> | |
| <h3>Contents</h3> | |
| <ul class="toc"> | |
| <li><a href="#getting_started">Getting Started</a> | |
| <ul> | |
| <li><a href="#project">Creating a Project</a></li> | |
| <li><a href="#container">Creating a JFrame Container</a></li> | |
| </ul></li> | |
| <li><a href="#getting_familiar">Getting Familiar with the GUI Builder</a></li> | |
| <li><a href="#key_concepts">Key Concepts</a> | |
| <ul> | |
| <li><a href="#design">Free Design</a></li> | |
| <li><a href="#snapping">Automatic Component Positioning (Snapping)</a></li> | |
| <li><a href="#feedback">Visual Feedback</a></li> | |
| </ul></li> | |
| <li><a href="#first_things">First Things First</a> | |
| <ul> | |
| <li><a href="#adding_components">Adding Components: The Basics</a></li> | |
| <li><a href="#individual">Adding Individual Components to the Form</a></li> | |
| <li><a href="#multiple">Adding Multiple Components to the Form</a></li> | |
| <li><a href="#inserting">Inserting Components</a></li> | |
| </ul></li> | |
| <li><a href="#moving_forward">Moving Forward</a> | |
| <ul> | |
| <li><a href="#aligning_components">Component Alignment</a></li> | |
| <li><a href="#baseline_alignment">Baseline Alignment</a></li> | |
| </ul></li> | |
| <li><a href="#reviewing">Reviewing What We've Learned</a> | |
| <ul> | |
| <li><a href="#adding_aligning_anchoring">Adding, Aligning, and Anchoring</a></li> | |
| <li><a href="#component_sizing">Component Sizing</a></li> | |
| <li><a href="#indentation">Indentation</a></li> | |
| </ul></li> | |
| <li><a href="#adjusting_form">Making the Final Adjustments</a></li> | |
| <li><a href="#previewing_form">Previewing Your GUI</a></li> | |
| <li><a href="#deploying">Deploying GUI Applications</a></li> | |
| <li><a href="#seealso">See Also</a></li> | |
| </ul> | |
| <p><b>To complete this tutorial, you need the following software and resources.</b></p> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <th class="tblheader" scope="col">Software or Resource</th> | |
| <th class="tblheader" scope="col">Version Required</th> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="http://netbeans.org/downloads/index.html" target="_blank">NetBeans IDE</a></td> | |
| <td class="tbltd1">version 6.9 and more recent </td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html" target="_blank">Java Development Kit (JDK)</a></td> | |
| <td class="tbltd1">version 6, 7 or 8</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <a name="getting_started"></a> | |
| <h2>Getting Started</h2> | |
| <p>The IDE's GUI Builder makes it possible to build professional-looking GUIs | |
| without an intimate understanding of layout managers. You can lay out your forms | |
| by simply placing components where you want them. </p> | |
| <p>For descriptions of the GUI Builder's visual feedback, you can use the <a href="quickstart-gui-legend.html" target="_blank">GUI | |
| Builder Visual Feedback Legend</a>.</p> | |
| <blockquote> | |
| <a name="project"></a> | |
| <h3 class="tutorial">Creating a Project </h3> | |
| <p>Because all Java development in the IDE takes place within projects, we first | |
| need to create a new <tt>ContactEditor</tt> project within which to store sources and | |
| other project files. An IDE project is a group of Java source files plus its | |
| associated meta data, including project-specific properties files, an Ant | |
| build script that controls the build and run settings, and a <tt>project.xml</tt> file | |
| that maps Ant targets to IDE commands. While Java applications often consist | |
| of several IDE projects, for the purposes of this tutorial, we will build | |
| a simple application which is stored entirely in a single project. </p> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To create a new <tt>ContactEditor</tt> application project: </p> | |
| <ol> | |
| <li>Choose File > New Project. Alternately, you can click the New | |
| Project icon in the IDE toolbar. </li> | |
| <li>In the Categories pane, select the Java node and in the Projects | |
| pane, choose Java Application. Click Next.</li> | |
| <li> Enter <tt>ContactEditor</tt> in the Project Name field and specify the project | |
| location.</li> | |
| <li>Leave the Use Dedicated Folder for Storing Libraries checkbox unselected. </li> | |
| <li>Ensure that the Set as Main Project checkbox is selected and clear the | |
| Create Main Class field. </li> | |
| <li>Click Finish. | |
| <p> | |
| The IDE creates the <tt>ContactEditor</tt> folder on your system | |
| in the designated location. This folder contains all of the project's | |
| associated files, including its Ant script, folders for storing | |
| sources and tests, and a folder for project-specific metadata. To | |
| view the project structure, use the IDE's Files window. </p> | |
| </li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <a name="container"></a> | |
| <h3 class="tutorial">Creating a JFrame Container</h3> | |
| <p>After creating the new application, you may have noticed that the Source | |
| Packages folder in the Projects window contains an empty <tt><default package></tt> | |
| node. To proceed with building our interface, we need to create a Java container | |
| within which we will place the other required GUI components. In this step | |
| we'll create a container using the <tt>JFrame</tt> component and place the | |
| container in a new package.</p> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To add a <tt>JFrame</tt> container: </p> | |
| <ol> | |
| <li>In the Projects window, right-click the <tt>ContactEditor</tt> node and choose | |
| New > JFrame Form. <br> | |
| Alternatively, you can find a JFrame form by choosing New > Other > Swing GUI Forms > JFrame Form. </li> | |
| <li>Enter <tt>ContactEditorUI</tt> as the Class Name. </li> | |
| <li>Enter <tt>my.contacteditor</tt> as the package.</li> | |
| <li>Click Finish. | |
| <p> The IDE creates the <tt>ContactEditorUI</tt> form and the <tt>ContactEditorUI</tt> | |
| class within the <tt>ContactEditorUI.java</tt> application and opens | |
| the <tt>ContactEditorUI</tt> form in the GUI Builder. Notice that | |
| the <tt>my.contacteditor</tt> package replaces the default package. | |
| </p> | |
| </li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| </blockquote> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <a name="getting_familiar"></a> | |
| <h2>Getting Familiar with the GUI Builder</h2> | |
| <p>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="notes"><b>Note:</b> To explore the GUI Builder interface with an interactive demo, view the <a name="explore" href="http://bits.netbeans.org/media/quickstart-gui-explore.swf">Exploring GUI Builder (.swf)</a> screencast.</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/01_gb_ui.png" rel="lytebox" | |
| title="The IDE's GUI Builder Interface"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/01_gb_ui-small.png" | |
| alt="The IDE's GUI Builder Interface" border=1></a></p> | |
| <p>When we added the JFrame container, the IDE opened the newly-created <tt>ContactEditorUI</tt> | |
| 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>The GUI Builder's various windows include: </p> | |
| <ul> | |
| <li><b>Design Area. </b>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 | |
| component auto-resizing behavior, and previewing forms. </li> | |
| <li><b>Navigator. </b>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. </li> | |
| <li><b>Palette. </b>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. </li> | |
| <li><b>Properties Window. </b>Displays the properties of the component currently | |
| selected in the GUI Builder, Navigator window, Projects window, or Files window. </li> | |
| </ul> | |
| <p>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 Design | |
| button returns the IDE's Editor to the GUI Builder where you can make the necessary | |
| adjustments to the form. When you save your changes, the IDE updates the file's | |
| sources.</p> | |
| <p><b>Note:</b> 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="align-center"><a href="#top">top</a></p> | |
| <a name="key_concepts"></a> | |
| <h2>Key Concepts</h2> | |
| <p>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 components. In the background, the GUI Builder translates your design decisions | |
| into a functional UI that is implemented using the new GroupLayout layout manager | |
| and other Swing constructs. Because it uses a dynamic layout model, GUI's built | |
| with the GUI Builder behave as you would expect at runtime, adjusting to accommodate | |
| any changes you make without altering the defined relationships between components. | |
| Whenever you resize the form, switch locales, or specify a different look and | |
| feel, your GUI automatically adjusts to respect the target look and feel's insets | |
| and offsets.</p> | |
| <blockquote> | |
| <a name="design"></a> | |
| <h3 class="tutorial">Free Design</h3> | |
| <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> | |
| <a name="snapping"></a> | |
| <h3 class="tutorial">Automatic Component Positioning (Snapping)</h3> | |
| <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 the padding to remain flexible such that different target look | |
| and feels render properly at runtime.</p> | |
| <a name="feedback"></a> | |
| <h3 class="tutorial">Visual Feedback </h3> | |
| <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> | |
| </blockquote> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <a name="first_things"></a> | |
| <h2>First Things First</h2> | |
| <p>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>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> | |
| <blockquote> | |
| <p class="notes"><b>Note:</b> Refer to the <a name="add" 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> | |
| <a name="adding_components"></a> | |
| <h3 class="tutorial">Adding Components: The Basics </h3> | |
| <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>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> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To add a JPanel: </p> | |
| <ol> | |
| <li>In the Palette window, select the Panel component from | |
| the Swing Containers category by clicking and releasing the mouse button.</li> | |
| <li>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>The <tt>JPanel</tt> component appears in the <tt>ContactEditorUI</tt> | |
| 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></li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_1.png" rel="lytebox" | |
| title="JPanel selected"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_1-small.png" | |
| alt="JPanel selected" border=1></a></p> | |
| <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 seen. You need only to click anywhere within the component | |
| to reselect it and cause the resize handles and anchoring indicators to reappear.</p> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To resize the JPanel:</p> | |
| <ol> | |
| <li>Select the JPanel you just added. The small square resize handles | |
| reappear around the component's perimeter.</li> | |
| <li>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.</li> | |
| <li>Release the resize handle to resize the component. | |
| <p> The <tt>JPanel</tt> 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></li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_2.png" rel="lytebox" | |
| title="JPanel resized"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_2-small.png" | |
| alt="JPanel resized" border=1></a></p> | |
| <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 fills the form's remaining vertical space.</p> | |
| <table class="align-center"> | |
| <tr> | |
| <td> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_3.png" rel="lytebox" | |
| title="Another JPanel added"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_3-small.png" | |
| alt="Another JPanel added" border=1></a></p></td> | |
| <td><p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_4.png" rel="lytebox" | |
| title="Another JPanel selected"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_4-small.png" | |
| alt="Another JPanel selected" border=1></a></p></td></tr> | |
| <tr><td><p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_5.png" rel="lytebox" | |
| title="Another JPanel resized"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_5-small.png" | |
| alt="Another JPanel resized" border=1></a></p></td> | |
| </tr> | |
| </table> | |
| <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> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To add title borders to the JPanels: </p> | |
| <ol> | |
| <li>Select the top JPanel in the GUI Builder. </li> | |
| <li>In the Properties window, click the ellipsis button (...) next to | |
| the Border property. </li> | |
| <li>In the JPanel Border editor that appears, select the TitledBorder | |
| node in the Available Borders pane. </li> | |
| <li>In the Properties pane below, enter <tt>Name</tt> for the Title | |
| property. </li> | |
| <li>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.</li> | |
| <li>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 <tt>E-mail</tt> for the Title property. | |
| <p>Titled borders are added to both <tt>JPanel</tt> components. </p></li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/02_add_borders.png" rel="lytebox" | |
| title="Titled borders added"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/02_add_borders-small.png" | |
| alt="Titled borders added" border=1></a></p> | |
| <a name="individual"></a> | |
| <h3 class="tutorial">Adding Individual Components to the Form</h3> | |
| <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 automatically | |
| rendered respecting the target operating system's look and feel at runtime.</p> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To add a JLabel to the form: </p> | |
| <ol> | |
| <li>In the Palette window, select the Label component from the Swing | |
| Controls category. </li> | |
| <li>Move the cursor over the <tt>Name</tt> 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>The JLabel is added to the form and a corresponding node representing | |
| the component is added to the Inspector window.</p></li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <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> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To edit the display text of a JLabel: </p> | |
| <ol> | |
| <li>Double-click the JLabel to select its display text.</li> | |
| <li>Type <tt>First Name:</tt> and press Enter. | |
| <p>The JLabel's new name is displayed and the component's width adjusts | |
| as a result of the edit. </p></li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <p>Now we'll add a JTextField so we can get a glimpse of the GUI Builder's baseline | |
| alignment feature. </p> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To add a JTextField to the form: </p> | |
| <ol> | |
| <li>In the Palette window, select the Text Field component from the | |
| Swing Controls category. </li> | |
| <li>Move the cursor immediately to the right of the <tt>First Name:</tt> | |
| 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>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> | |
| </li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <p class="align-center"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/03_indy_add_1.png" | |
| alt="JTextField added" border=1></p> | |
| <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 <tt>Last Name:</tt> as the JLabel's display | |
| text and leave the JTextFields' placeholder text as it is for now.</p> | |
| <p class="align-center"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/03_indy_add_2.png" | |
| alt="Another JTextField added" border=1></p> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To resize a JTextField:</p> | |
| <ol> | |
| <li>Select the JTextField we just added to the right of the <tt>Last | |
| Name:</tt> JLabel. </li> | |
| <li>Drag the JTextField's right edge resize handle toward the right | |
| edge of the enclosing JPanel. </li> | |
| <li>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>The JTextField's right edge snaps into alignment with the JPanel's | |
| recommended edge margin, as shown in the following illustration. </p></li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <p class="align-center"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/03_indy_add_3.png" | |
| alt="JTextField resized" border=1></p> | |
| <a name="multiple"></a> | |
| <h3 class="tutorial">Adding Multiple Components to the Form</h3> | |
| <p>Now we'll add the <tt>Title:</tt> and <tt>Nickname:</tt> 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> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To add multiple JLabels to the form: </p> | |
| <ol> | |
| <li>In the Palette window, select the Label component from the Swing | |
| Controls category by clicking and releasing the mouse button. </li> | |
| <li>Move the cursor over the form directly below the <tt>First Name:</tt> | |
| 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. </li> | |
| <li>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>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> | |
| </li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <p class="align-center"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/04_multi-add_1.png" | |
| alt="JLabels in a second row" border=1></p> | |
| <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> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To edit the display text of JLabels:</p> | |
| <ol> | |
| <li>Double-click the first JLabel to select its display text.</li> | |
| <li>Type <tt>Title:</tt> and press Enter.</li> | |
| <li>Repeat steps 1 and 2, entering <tt>Nickname:</tt> for the second | |
| JLabel's name property. | |
| <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></li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <p class="align-center"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/04_multi-add_2.png" | |
| alt="New names for JLabels in a second row" border=1></p> | |
| <a name="inserting"></a> | |
| <h3 class="tutorial">Inserting Components</h3> | |
| <p class="notes"><b>Note:</b> Refer to the <a name="insert" 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>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> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To insert a JTextField between two JLabels: </p> | |
| <ol> | |
| <li>In the Palette window, select the Text Field component from the | |
| Swing Controls category. </li> | |
| <li>Move the cursor over the <tt>Title:</tt> and <tt>Nickname:</tt> | |
| 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 <tt>Nickname</tt> | |
| JLabel as shown in the first image below.</li> | |
| <li>Click to place the JTextField between the <tt>Title:</tt> and <tt>Nickname:</tt> | |
| JLabels. | |
| <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></li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <table class="align-center"> | |
| <tr> | |
| <td> <p class="align-center"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/05_insert_1.png" | |
| alt="JTextField overlaps Nickname: JLabel" border=1></p></td> | |
| <td><p class="align-center"><img src="../../../images_www/articles/80/java/quickstart-gui/05_insert_2.png" | |
| alt="JTextField between Tiltle: and Nickname: JLabels" border=1></p> | |
| </td> | |
| </tr> | |
| </table> | |
| <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> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To add a JTextField: </p> | |
| <ol> | |
| <li>In the Palette window, select the Text Field component from the | |
| Swing category. </li> | |
| <li>Move the cursor to the right of the <tt>Nickname</tt> label and | |
| click to place the text field. | |
| <p>The JTextField snaps into position next to the JLabel on its left. | |
| <!--Notice | |
| that it is the same margin that used elsewhere in the form.--> | |
| </p></li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <table width="91%"> | |
| <tr> | |
| <td><p>To resize a JTextField: </p> | |
| <ol> | |
| <li>Drag the resize handles of the <tt>Nickname:</tt> label's JTextField | |
| you added in the previous task toward the right of the enclosing JPanel. </li> | |
| <li>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>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> | |
| </li> | |
| <li>Press Ctrl-S to save the file.</li> | |
| </ol></td> | |
| </tr> | |
| </table> | |
| </blockquote> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <a name="moving_forward"></a> | |
| <h2>Moving Forward</h2> | |
| <p>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> | |
| <blockquote> | |
| <a name="aligning_components"></a> | |
| <h3 class="tutorial">Component Alignment</h3> | |
| <p class="notes"><b>Note:</b> Refer to the <a name="align" 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>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> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To align components: </p> | |
| <ol> | |
| <li>Hold down the <tt>Ctrl</tt> key and click to select the <tt>First Name:</tt> and <tt>Title:</tt> JLabels on the | |
| left side of the form.</li> | |
| <li>Click the Align Right in Column button (<img src="../../../images_www/articles/80/java/quickstart-gui/align_r.png">) | |
| in the toolbar. Alternately, you can right-click either one and choose | |
| Align > Right in Column from the pop-up menu.</li> | |
| <li>Repeat this for the <tt>Last Name:</tt> and <tt>Nickname:</tt> JLabels | |
| as well. | |
| <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></li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <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> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To set component resizeability behavior:</p> | |
| <ol> | |
| <li>Control-click the two inserted JTextField components to select them | |
| in the GUI Builder.</li> | |
| <li>With both JTextFields selected, right-click either one of them and | |
| choose Auto Resizing > Horizontal from the pop-up menu. | |
| <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></li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To set components to be the same size:</p> | |
| <ol> | |
| <li>Control-click all four of the JTextFields in the form to select | |
| them.</li> | |
| <li>With the JTextFields selected, right-click any one of them and choose | |
| Set Same Size > Same Width from the pop-up menu. | |
| <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></li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <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> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To align a JLabel to a component group: </p> | |
| <ol> | |
| <li>In the Palette window, select the Label component from the Swing | |
| category. </li> | |
| <li>Move the cursor below the <tt>First Name</tt> and <tt>Title</tt> | |
| 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>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></li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/06_align_1.png" rel="lytebox" | |
| title="JLabel aligned"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/06_align_1-small.png" | |
| alt="JLabel aligned" border=1></a></p> | |
| <p>As in the previous examples, double-click the JLabel to select its display | |
| text and then enter <tt>Display Format:</tt> for the display name. Notice | |
| that when the JLabel snaps into position, the other components shift to accommodate | |
| the longer display text. </p> | |
| <a name="baseline_alignment"></a> | |
| <h3 class="tutorial">Baseline Alignment</h3> | |
| <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> | |
| <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> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To align the baselines of components: </p> | |
| <ol> | |
| <li>In the Palette window, select the Combo Box component from the Swing | |
| Controls category. </li> | |
| <li>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> 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></li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/06_align_2.png" rel="lytebox" | |
| title="Combo Box aligned"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/06_align_2-small.png" | |
| alt="Combo Box aligned" border=1></a></p> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To resize the JComboBox: </p> | |
| <ol> | |
| <li>Select the ComboBox in the GUI Builder. </li> | |
| <li>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>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="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/06_align_3.png" rel="lytebox" | |
| title="Combo Box resized"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/06_align_3-small.png" | |
| alt="Combo Box resized" border=1></a></p></li> | |
| <li>Press Ctrl-S to save the file.</li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <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> | |
| </blockquote> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <a name="reviewing"></a> | |
| <h2>Reviewing What We've Learned</h2> | |
| <p>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>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 guidelines. Once placed, new components are also anchored to | |
| the nearest container edge or component to ensure that component relationships | |
| are maintained at runtime. In this section, we'll concentrate on accomplishing | |
| the tasks in a more streamlined fashion while pointing out the work the GUI | |
| builder is doing behind the scenes. </p> | |
| <blockquote> | |
| <a name="adding_aligning_anchoring"></a> | |
| <h3 class="tutorial">Adding, Aligning, and Anchoring</h3> | |
| <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> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To add, align, and edit the display text of a JLabel: </p> | |
| <ol> | |
| <li>In the Palette window, select the Label component from the Swing | |
| Controls category. </li> | |
| <li>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. </li> | |
| <li>Double-click the JLabel to select its display text. Then type <tt>E-mail | |
| Address: </tt> and press Enter. | |
| <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> | |
| </li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To add a JTextField: </p> | |
| <ol> | |
| <li>In the Palette window, select the Text Field component from the | |
| Swing Controls category. </li> | |
| <li>Move the cursor immediately to the right of the <tt>E-mail Address</tt> | |
| 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>The JTextField snaps into position on the right of the <tt>E-mail | |
| Address:</tt> JLabel and is chained to the JLabel. Its corresponding | |
| node is also added to the Inspector window. </p></li> | |
| <li>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>The JTextField's right edge snaps to the alignment guideline indicating | |
| the preferred margins. </p> </li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <p>Now we need to add the JList that will display our ContactEditor's entire | |
| contact list.</p> | |
| <!--todo : add more info here--> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To add and resize a JList: </p> | |
| <ol> | |
| <li>In the Palette window, select the List component from the Swing | |
| Controls category.</li> | |
| <li>Move the cursor immediately below the <tt>E-mail Address</tt> 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.</li> | |
| <li>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> 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></li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/06_align_4.png" rel="lytebox" | |
| title="JList added and resized"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/06_align_4-small.png" | |
| alt="JList added and resized" border=1></a></p> | |
| <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> | |
| <a name="component_sizing"></a> <h3 class="tutorial">Component Sizing</h3> | |
| <p class="notes"><b>Note:</b> Refer to the <a name="resize" 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>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> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To add, align, and edit the display text of multiple buttons: </p> | |
| <ol> | |
| <li>In the Palette window, select the Button component from the Swing Controls category.</li> | |
| <li>Move the JButton over the right edge of the <tt>E-mail Address</tt> | |
| 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. | |
| <table class="align-center"> | |
| <tr> | |
| <td><p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/buttons_1.png" rel="lytebox" | |
| title="JButton aligned"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/buttons_1-small.png" | |
| alt="JButton aligned" border=1></a></p></td> | |
| <td><p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/buttons_2.png" rel="lytebox" | |
| title="JButton added"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/buttons_2-small.png" | |
| alt="JButton added" border=1></a></p> | |
| </td> | |
| </tr> | |
| </table> </li> | |
| <li>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 class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/buttons_3.png" rel="lytebox" | |
| title="Second JButton added"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/buttons_3-small.png" | |
| alt="Second JButton added" border=1></a></p></li> | |
| <li>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 class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/buttons_4.png" rel="lytebox" | |
| title="Two additional JButtons added"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/buttons_4-small.png" | |
| alt="Two additional JButtons added" border=1></a></p></li> | |
| <li>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>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="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/buttons_5.png" rel="lytebox" | |
| title="JButtons renamed"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/buttons_5-small.png" | |
| alt="JButtons renamed" border=1></a></p> </li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <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> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To set components to the same size: </p> | |
| <ol> | |
| <li>Select all four JButtons by pressing the Control key while making | |
| your selection.</li> | |
| <li>Right-click one of them and choose Same Size > Same Width from | |
| the pop-up menu. | |
| <p>The JButtons are set to the same size as the button with the longest | |
| name. </p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/buttons_6.png" rel="lytebox" | |
| title="JButtons set to the same size"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/buttons_6-small.png" | |
| alt="JButtons set to the same size" border=1></a></p> | |
| </li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <a name="indentation"></a> | |
| <h3 class="tutorial">Indentation</h3> | |
| <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>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> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To indent JRadioButtons below a JLabel: </p> | |
| <ol> | |
| <li> Add a JLabel named <tt>Mail Format</tt> to the form below the JList. | |
| Make certain the label is left aligned with the JList above.</li> | |
| <li>In the Palette window, select the Radio Button component from the | |
| Swing category. </li> | |
| <li>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 class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/07_indent_1.png" rel="lytebox" | |
| title="Secondary Indentation Guidelines for JRadioButton"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/07_indent_1-small.png" | |
| alt="Secondary Indentation Guidelines for JRadioButton" border=1></a></p></li> | |
| <li>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. </li> | |
| <li>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 </code> for the second, and <code>Custom</code> for | |
| the third. | |
| <p>Three JRadioButtons are added to the form and indented below the | |
| <tt>Mail Format</tt> JLabel. </p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/07_indent_3.png" rel="lytebox" | |
| title="Three JRadioButtons added and renamed"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/07_indent_3-small.png" | |
| alt="Three JRadioButtons added and renamed" border=1></a></p></li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <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> | |
| <table> | |
| <tr> | |
| <td> | |
| <p>To add JRadioButtons to a ButtonGroup:</p> | |
| <ol> | |
| <li>In the Palette window, select the Button Group component from the | |
| Swing Controls category. </li> | |
| <li>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. </li> | |
| <li>Select all three of the JRadioButtons in the form.</li> | |
| <li>In the Properties window, choose buttonGroup1 from the buttonGroup | |
| property combo box. | |
| <p>Three JRadioButtons are added to the button group.</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/07_group.png" rel="lytebox" | |
| title="Three JRadioButtons being added to button group"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/07_group-small.png" | |
| alt="Three JRadioButtons being added to button group" border=1></a></p></li> | |
| <li>Press Ctrl-S to save the file.</li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| </blockquote> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <a name="adjusting_form"></a> | |
| <h2>Making the Final Adjustments </h2> | |
| <p>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> | |
| <blockquote> | |
| <h3 class="tutorial">Finishing Up</h3> | |
| <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> | |
| <table width="91%"> | |
| <tr> | |
| <td> | |
| <p>To add and edit the display text of buttons: </p> | |
| <ol> | |
| <li>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.</li> | |
| <li>In the Palette window, select the Button component from | |
| the Swing Controls category.</li> | |
| <li>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 class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/08_cancel.png" rel="lytebox" | |
| title="Button added below JPanel"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/08_cancel-small.png" | |
| alt="Button added below JPanel" border=1></a></p></li> | |
| <li>Add another JButton to the left of the first, making certain to | |
| place it using the suggested spacing along the JFrame's bottom edge.</li> | |
| <li>Set the display text for each JButton. Enter <tt>OK</tt> | |
| for the left button and <tt>Cancel</tt> for right one. Notice that | |
| the width of the buttons changes to accommodate the new names.</li> | |
| <li>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 class="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/08_same_size.png" rel="lytebox" | |
| title="Buttons set to the same size"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/08_same_size-small.png" | |
| alt="Buttons set to the same size" border=1></a></p> | |
| <p>The <tt>JButton</tt> components appear in the form and their corresponding | |
| nodes are displayed in the Navigator window. The <tt>JButton</tt> | |
| 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> | |
| </li> | |
| <li>Press Ctrl-S to save the file.</li> | |
| </ol> | |
| </td> | |
| </tr> | |
| </table> | |
| <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 the JComboBox and JList for a later tutorial.</p> | |
| </blockquote> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <a name="previewing_form"></a> | |
| <h2>Previewing Your GUI </h2> | |
| <p>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 (<img src="../../../images_www/articles/80/java/quickstart-gui/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="align-center"> | |
| <a href="../../../images_www/articles/80/java/quickstart-gui/08_preview_gui.png" rel="lytebox" | |
| title="Form Preview"> | |
| <img src="../../../images_www/articles/80/java/quickstart-gui/08_preview_gui-small.png" | |
| alt="Form Preview" border=1></a></p> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <a name="deploying"></a> | |
| <h2>Deploying GUI Applications</h2> | |
| <p>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>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 <tt>dist/lib</tt> | |
| folder. The IDE also adds each of the JAR files that are in the <tt>dist</tt> folder | |
| to the <tt>Class-Path</tt> element in the application JAR file's <tt>manifest.mf</tt> | |
| file. </p> | |
| <p>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> | |
| <div style="border: 1px solid rgb(14, 27, 85); padding: 10px 30px; background-color: rgb(231, 231, 231); margin-left: 60px; margin-right: 40px;"> | |
| <b>Note:</b> 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. </div> | |
| <blockquote> | |
| <h3 class="tutorial">Distributing and Running Standalone GUI Applications</h3> | |
| <p>To prepare your GUI application for distribution outside of the IDE:</p> | |
| <ul> | |
| <li>Zip the project's <tt>dist</tt> folder into | |
| a ZIP archive. (The <tt>dist</tt> folder might also contain a <tt>lib</tt> folder, | |
| which you would also need to include.)</li> | |
| </ul> | |
| <p>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 (<tt>my.contacteditor.ContactEditorUI</tt> if speaking about the project you have just created) and click OK. Your application is up and running.</p> | |
| <p>To run a standalone GUI application from the command line:</p> | |
| <ol> | |
| <li>Navigate to the project's <tt>dist</tt> folder.</li> | |
| <li>Type the following: | |
| <blockquote> <tt>java -jar <jar_name>.jar</tt> </blockquote> | |
| </li> | |
| </ol> | |
| </blockquote> | |
| <p><b>Note:</b> If you encounter | |
| the following error:</p> | |
| <blockquote><tt>Exception in thread "main" java.lang.NoClassDefFoundError: org/jdesktop/layout/GroupLayout$Group</tt></blockquote> | |
| <p>Ensure that the <tt>manifest.mf</tt> file references the currently installed version | |
| of the Swing Layout Extensions Library. </p> | |
| <!--<p>For more information about the layout extension library, visit the <a href="http://swing-layout.dev.java.net/" target="_blank">Swing | |
| Layout Extensions project</a>. </p>--> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <div class="feedback-box" ><a href="/about/contact_form.html?to=3&subject=Feedback:%20Designing%20a%20Swing%20GUI%20in%20NetBeans%20IDE">Send Feedback on This Tutorial</a></div> | |
| <br style="clear:both;" > | |
| <a name="seealso"></a><h2>See Also</h2> | |
| <p>You have now completed the Designing a Swing GUI tutorial. For information | |
| on adding functionality to the GUIs that you create, see:</p> | |
| <ul> | |
| <li><a href="gui-functionality.html">Introduction to GUI Building</a> </li> | |
| <li><a href="gui-image-display.html">Handling Images in a GUI Application</a></li> | |
| <li><a href="http://wiki.netbeans.org/wiki/view/NetBeansUserFAQ#section-NetBeansUserFAQ-GUIEditorMatisse" target="_blank"> | |
| GUI Builder FAQ</a> </li> | |
| <li><a href="../../trails/matisse.html">Java GUI Applications Learning Trail</a> </li> | |
| <li><a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920">Implementing Java GUIs</a> in <i>Developing Applications with NetBeans IDE</i></li> | |
| </ul> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| </body> | |
| </html> |