| <!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 an Advanced Java Form Using the GridBag Customizer - NetBeans IDE Tutorial</title> | |
| <!-- BEGIN METADATA --> | |
| <meta name="author" content="Alyona.Stashkova@oracle.com"> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" > | |
| <meta name="description" content="This tutorial guides you through the process of modifying an application form layout using the NetBeans IDE GridBag Designer Advanced Features."> | |
| <meta name="KEYWORDS" content="NetBeans, GridBag, Layout Manager, Tutorial, Guide, User, Documentation, Advanced"> | |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> | |
| <!-- END METADATA --> | |
| </head> | |
| <body> | |
| <a name="top"></a> | |
| <h1>Designing an Advanced Java Form Using the GridBag Customizer</h1> | |
| <div class="articledate" style="margin-left: 0px;">Written by Jan Stola, Tomas Pavek and Alyona Stashkova</div> | |
| <p>This tutorial is the second in a two-part series that demonstrates how to design an advanced Java form using the advanced features of the NetBeans IDE GridBag Customizer.<br> | |
| The series is intended as a guide to show how you can layout your GUI components without manually writing your layout code and then perform additional changes in an existing form to implement a specific target layout that is required by the project. </p> | |
| <p>Each document in this series covers specific set of features.</p> | |
| <ul> | |
| <li>Part 1: <a href="../java/gbcustomizer-basic.html">Designing a Basic Java Form Using the GridBag Customizer</a></li> | |
| <li>Part 2: Designing an Advanced Java Form Using the GridBag Customizer</li> | |
| </ul> | |
| <p>The <a href="../java/gbcustomizer-basic.html">first tutorial in the series</a> demonstrated how to modify a simple Java form using the basic features of the NetBeans IDE GridBag Customizer. | |
| In this tutorial you will learn how to use the GridBag Customizer advanced features to change the existing form layout. </p> | |
| <p><b>Contents</b></p> | |
| <img src="../../../images_www/articles/74/netbeans-stamp-80-74.png" class="stamp" alt="Content on this page applies to NetBeans IDE 7.1 and later" title="Content on this page applies to the NetBeans IDE 7.1 and later" > | |
| <ul class="toc"> | |
| <li><a href="#zip">Opening Example Project</a></li> | |
| <li><a href="#invokegb">Invoking GridBag Customizer</a></li> | |
| <li><a href="#01">Advanced Features</a> | |
| <ul> | |
| <li><a href="#01a">Inserting New Row</a></li> | |
| <li><a href="#01b">Adding New Components</a></li> | |
| <li><a href="#01c">Reorganizing Layout</a></li> | |
| <li><a href="#01d">Introducing Subcontainers</a></li> | |
| <li><a href="#01e">Navigating Between Containers</a></li> | |
| </ul></li> | |
| <li><a href="#summary">Summary</a></li> | |
| <li><a href="#seealso">See Also</a></li> | |
| </ul> | |
| <p><b>To follow 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">NetBeans IDE</a></td> | |
| <td class="tbltd1">7.1 or later </td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit (JDK)</a></td> | |
| <td class="tbltd1">Version 6, 7, or 8 </td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip">gbcustomizer-advanced-tutorial.zip</a></td> | |
| <td class="tbltd1">An archive with the demo project containing the initial and target tutorial layouts.</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <p class="notes"><b>Notes:</b></p> | |
| <div class="indent"> | |
| <ul> | |
| <li>You can download the project that is used as the starting point for this series as a <tt>.zip</tt> archive. </li> | |
| <li>This tutorial focuses on designing the layout of the container only. Adding functionality to the GUI is out of its scope.</li> | |
| </ul> | |
| </div> | |
| <!-- ++++++++++++ Using .zip ++++++++++++ --> | |
| <a name="zip"></a> | |
| <h2>Opening Example Project</h2> | |
| <p>Before starting to lay out the components with the help of the GridBag Customizer, download the <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip">gbcustomizer-advanced-tutorial.zip</a>, extract the <tt>GridBagCustomizerAdvancedTutorial</tt> project on your hard drive and open it in the NetBeans IDE.</p> | |
| <ol><li>Download and unzip the <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip">gbcustomizer-advanced-tutorial.zip</a> project to any location on your computer.</li> | |
| <li>In the NetBeans IDE Projects tab, click Open Project on the File menu, navigate to the <tt>GridBagCustomizerAdvancedTutorial</tt> project that you extracted in the previous step, and click Open Project. The project folder might be in a containing folder that is also called <tt>GridBagCustomizerAdvancedTutorial</tt>. | |
| <p class="notes"><b>Note:</b> The <tt>GridBagCustomizerAdvancedTutorial</tt> project uses the <tt>JUnit</tt> and <tt>JUnit 4</tt> class libraries, which are located in the Update Center. You need to click Resolve Problems in the Open project dialog box, then click Resolve in the Resolve Reference Problems dialog box and install the JUnit plugin following the instructions in the NetBeans IDE Installer. When the installation is completed, click Finish to close the NetBeans IDE Installer dialog box, then click Close to close the Resolve Reference Problems dialog box. </p> | |
| </li> | |
| <li> Expand <tt>Source Packages > tutorial</tt> and double-click <tt>ContactsAdvancedInitial.java</tt>. <br>The sample form opens in the GUI Builder Design view. </li> | |
| </ol> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/sampleform.png" rel="lytebox" | |
| title="GridBag Customizer"> | |
| <img src="../../../images_www/articles/80/java/gbcustomizer-advanced/sampleform-small.png" | |
| alt="GridBag Customizer" border=1></a></p> | |
| <!-- ++++++++++++ Invoking GBCustomizer ++++++++++++ --> | |
| <a name="invokegb"></a> | |
| <h2>Invoking GridBag Customizer</h2> | |
| <p>To display the GridBag Customizer, complete the following steps: </p> | |
| <ol> | |
| <li>In the Design view, select the JFrame form.</li> | |
| <li>Right-click the form and choose <tt>Customize Layout</tt>.<br> | |
| The Customize Layout dialog box opens as shown below.</li> | |
| </ol> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/customizerdialog.png" rel="lytebox" | |
| title="GridBag Customizer"> | |
| <img src="../../../images_www/articles/80/java/gbcustomizer-advanced/customizerdialog-small.png" | |
| alt="GridBag Customizer" border=1></a></p> | |
| <p class="notes"><b>Note:</b> In this tutorial the GridBagLayout is already set. In case you work with another form, in step 2 above, right-click the form and choose <tt>Set Layout</tt> > <tt>Grid Bag Layout</tt> (this enables the <tt>Customize Layout</tt> menu item) and complete the procedure.</p> | |
| <a name="01"></a> | |
| <h2>Advanced Features</h2> | |
| <p>In this section you will use the advanced features of the GridBag Customizer to reorganize the <tt>ContactsAdvancedInitial</tt> form components in accordance with the target layout shown below. </p> | |
| <p class="align-center"><img src="../../../images_www/articles/80/java/gbcustomizer-advanced/targetlayout.png" | |
| alt="Target Layout" border=1></p> | |
| <p class="notes"><b>Note:</b> To view the target layout in your NetBeans IDE, in the Projects tab, expand <tt>Source Packages > tutorial</tt> and double-click <tt>ContactsAdvancedFinal.java</tt>. <br> | |
| The <tt>ContactsAdvancedFinal</tt> form with the target layout opens in the GUI Builder Design view.</p> | |
| <!-- ++++++++++++ Inserting New Row ++++++++++++ --> | |
| <a name="01a"></a> | |
| <h3>Inserting New Row</h3> | |
| <p>The <tt>Phone</tt> section of the existing form features three phone entries. To enhance it and add an additional label and text field (e.g., Skype username between <tt>Cell Phone:</tt> and <tt>Home Phone:</tt>), make a new row there as follows:</p> | |
| <ol> | |
| <li>In the Customize Layout dialog box, right-click the header of the row that contains <tt>Home Phone:</tt> information. </li> | |
| <li>Choose <tt>Insert Row Before</tt>. | |
| <p class="align-center"><img src="../../../images_www/articles/80/java/gbcustomizer-advanced/insertrow.png" | |
| alt="Context Menu - Insert Row" border=1></p> | |
| <p>A new row is added as in the following figure.</p> | |
| <p class="align-center"><img src="../../../images_www/articles/80/java/gbcustomizer-advanced/rowinserted.png" | |
| alt="Context Menu - Row Inserted" border=1></p></li> | |
| </ol> | |
| <!-- ++++++++++++ Adding New Components ++++++++++++ --> | |
| <a name="01b"></a> | |
| <h3>Adding New Components</h3> | |
| <p>To add a new label and text field to the newly added row, complete the following steps: </p> | |
| <ol> | |
| <li>Right-click the first cell of the newly added row.</li> | |
| <li>From the context menu, choose <tt>Add Components > Swing Controls > Label</tt> like shown below. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/addcomponent.png" rel="lytebox" | |
| title="Context Menu - Add Label"> | |
| <img src="../../../images_www/articles/80/java/gbcustomizer-advanced/addcomponent-small.png" | |
| alt="Context Menu - Add Label" border=1></a></p> | |
| <p>Highlighted <tt>JLabel1</tt> displays in the first cell.</p></li> | |
| <li>Right-click the second cell of the newly added row.</li> | |
| <li>From the context menu, choose <tt>Add Components > Swing Controls > Text Field</tt>.<br>Highlighted <tt>JTextField1</tt> displays in the second cell. | |
| <p class="align-center"><img src="../../../images_www/articles/80/java/gbcustomizer-advanced/highlightedtextfield.png" | |
| alt="Context Menu - Highlighted jTextField1" border=1></p></li> | |
| </ol> | |
| <p>After the components are added, their gridbag constraints must be specified to align them with other components. </p> | |
| <p> | |
| With the <tt>JTextField1</tt> component selected in the Grid Area, do the following in the Property Sheet:</p> | |
| <ol> | |
| <li>In the Grid Width combobox, enter <tt>3</tt> and press Enter. </li> | |
| <li>In the Fill combobox, select <tt>horizontal</tt>.</li> | |
| <li>In the Anchor combobox scroll-down and select <tt>Baseline</tt>. </li> | |
| <li>In the Weight X text field, enter <tt>1.0</tt> and press Enter. </li> | |
| </ol> | |
| <p class="align-center"><img src="../../../images_www/articles/80/java/gbcustomizer-advanced/textfieldconstraints.png" | |
| alt="jTextField1 - Constraints Specified" border=1></p> | |
| <p>In the Grid Area, select the <tt>JLabel1</tt> component and specify its <tt>Anchor</tt> constraint by scrolling down and selecting <tt>Baseline Leading</tt> in the Property Sheet.</p> | |
| <p>Select both the <tt>JLabel1</tt> and <tt>JTextField1</tt> components in the Grid Area, click the browse button (<img src="../../../images_www/articles/80/java/gbcustomizer-advanced/browsebutton.png" alt="Browse Button">) to the right of the <tt>Insets</tt> text field. The <tt>Insets</tt> dialog box displays. Enter <tt>5</tt> in the <tt>Top:</tt> text field, and click OK. </p> | |
| <p>The form should look like shown below.</p> | |
| <p class="align-center"><img src="../../../images_www/articles/80/java/gbcustomizer-advanced/constraintsset.png" | |
| alt="Constraints Specified" border=1></p> | |
| <p class="notes"><b>Note:</b> The GridBag Customizer helps you to add, remove, and change the position of components in the layout. To change properties of the components in the layout like background or text, use the GUI Builder Design window.</p> | |
| <p>To set the display text for the <tt>JLabel1</tt>, do as follows:</p> | |
| <ol> | |
| <li> Click Close to close the Customize Layout dialog box.</li> | |
| <li>In the Design view, select the <tt>JLabel1</tt> component and press F2 (alternatively, select Edit Text from the context menu).</li> | |
| <li>Delete the selected text and enter <tt>Skype:</tt>. </li> | |
| <li>Press Enter.</li> | |
| </ol> | |
| <p>To remove the <tt>JTextField1</tt> component's text, complete the following steps:</p> | |
| <ol> | |
| <li>In the Design view, select the <tt>JTextField1</tt> component and press F2 (alternatively, select Edit Text from the context menu).</li> | |
| <li>Delete the selected text and press Enter. </li> | |
| </ol> | |
| <!-- ++++++++++++ Reorganizing Layout ++++++++++++ --> | |
| <a name="01c"></a> | |
| <h3>Reorganizing Layout</h3> | |
| <p>The GridBag Customizer can save you time and effort by quickly repositioning the form components as desired.</p> | |
| <p>To change the layout of the <tt>Phone</tt> section and position of four existing text fields from one column to two columns with two text fields, complete the following steps:</p> | |
| <ol> | |
| <li>Right-click the form and choose <tt>Customize Layout</tt> from the context menu.</li> | |
| <li>In the Customize Layout dialog box, control-click the four <tt>JTextField</tt> components to select them.</li> | |
| <li>Drag the right edge of the text fields to the left and drop it so that the text fields occupy just the second grid column, in other words, so that they no longer occupy the third and fourth grid columns. | |
| <p class="align-center"><img src="../../../images_www/articles/80/java/gbcustomizer-advanced/textfieldsonecolumn.png" | |
| alt="Text Fields Occupy One Column" border=1></p> | |
| <p>The GridBag Customizer can resize several components together thus making room for the second column of text fields.</p></li> | |
| <li>Click outside the form to deselect the resized text fields.</li> | |
| <li>Control-click to select all the <tt>Skype:</tt> and <tt>Home Phone:</tt> <tt>JLabel</tt> and <tt>JTextField</tt> components in the <tt>Phone</tt> section. </li> | |
| <li>Position the cursor over the selection and drag them to the right of the top two text fields. | |
| <p class="align-center"><img src="../../../images_www/articles/80/java/gbcustomizer-advanced/movesecondcolumn.png" | |
| alt="Text Fields Are Being Moved to Second Column" border=1></p> | |
| <p class="notes"><b>Note:</b> Before dragging make sure the cursor is not changed into a two-way arrow, otherwise you will resize the selection instead. </p> | |
| <p>After you move the components, the form should look like shown below. </p> | |
| <p class="align-center"><img src="../../../images_www/articles/80/java/gbcustomizer-advanced/extrarows.png" | |
| alt="Extra Rows" border=1></p> | |
| <p> | |
| To discard the redundant rows 10 and 11 (row indices 9 and 10 respectively), right-click the row headers and choose <tt>Delete Row</tt> from the context menu. </p> | |
| <p>The <tt>Phone</tt> section became more compact.</p> | |
| <p class="align-center"><img src="../../../images_www/articles/80/java/gbcustomizer-advanced/textfieldsmoved.png" | |
| alt="Text Fields Moved to Second Column" border=1></p> </li> | |
| </ol> | |
| <p>To fix spacing of the second column here, do as follows:</p> | |
| <ol><li>Control-click the <tt>Skype:</tt> and <tt>Home Phone:</tt> labels to select them in the Grid Area.</li> | |
| <li>Click the browse button (<img src="../../../images_www/articles/80/java/gbcustomizer-advanced/browsebutton.png" alt="Browse Button">) to the right of the <tt>Insets</tt> text field.<br> The <tt>Insets</tt> dialog box displays. </li> | |
| <li>Enter <tt>5</tt> in the <tt>Left:</tt> text field, and click OK.</li> | |
| </ol> | |
| <!-- ++++++++++++ Introducing Subcontainers ++++++++++++ --> | |
| <a name="01d"></a> | |
| <h3>Introducing Subcontainers</h3> | |
| <p>The grid based layout sometimes introduces unnecessary dependencies that need to be resolved by means of subcontainers.</p> | |
| <p>If you click the Test Layout button in the toolbar (<img src="../../../images_www/articles/80/java/gbcustomizer-advanced/testlayoutbutton.png" | |
| alt="Test Layout Button"> ) and test horizontal resizeability of the current layout, you will notice that unwanted space is created around the Browse, OK, and Cancel buttons.</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/unwantedspace.png" rel="lytebox" | |
| title="Unwanted Space"> | |
| <img src="../../../images_www/articles/80/java/gbcustomizer-advanced/unwantedspace-small.png" | |
| alt="Unwanted Space" border=1></a></p> | |
| <p>This happens because the fourth column comprises both text fields and buttons (the components that should grow and the components that should not grow respectively). You need to modify the layout so that the additional space around the <tt>Browse</tt> buttons is consumed by the <tt>Street</tt> and <tt>City:</tt> text fields. | |
| The current layout ensures that the right edge of the <tt>Street:</tt> and <tt>City:</tt> text fields is on the same vertical position as the left edge of the <tt>Home Phone:</tt> text field. To make these positions independent, complete the following steps:</p> | |
| <ol><li>Control-click the <tt>Street:</tt> text field and the <tt>Browse</tt> button to the right of it to select them.</li> | |
| <li>Right-click the selection and choose <tt>Enclose in Container</tt> from the context menu. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/enclose.png" rel="lytebox" | |
| title="Enclose in Container"> | |
| <img src="../../../images_www/articles/80/java/gbcustomizer-advanced/enclose-small.png" | |
| alt="Enclose in Container" border=1></a></p> | |
| <p>After the components are enclosed into a subcontainer, the boundary between the <tt>Home Phone:</tt> label and text field no longer affects the boundary between the <tt>Street</tt> text field and button. </p> | |
| <p class="notes"><b>Note:</b> The <tt>Enclose in Container</tt> action creates a new subcontainer in the cells occupied by the selected components. It moves the selected components into a newly introduced container but it preserves their relative positions and other layout constraints.</p></li> | |
| </ol> | |
| <p>Repeat the two steps listed above for the <tt>City:</tt> text field and the <tt>Browse</tt> button to the right of it, to enclose them into a subcontainer like shown below.</p> | |
| <p class="align-center"><img src="../../../images_www/articles/80/java/gbcustomizer-advanced/enclosecity.png" | |
| alt="Enclose in Container" border=1></p> | |
| <p>Now you want to fix the unwanted space around the <tt>OK</tt> and <tt>Cancel</tt> buttons as follows:</p> | |
| <ol> | |
| <li>Click Close to deselect the enclosed into a subcontainer components, right-click the form, and choose <tt>Customize Layout</tt> from the context menu.</li> | |
| <li>Control-click the <tt>OK</tt> and <tt>Cancel</tt> buttons at the bottom of the form to select them.</li> | |
| <li>Right-click the selection and choose <tt>Enclose in Container</tt> from the context menu.<br>A new subcontainer is created for the buttons. | |
| <p class="align-center"><img src="../../../images_www/articles/80/java/gbcustomizer-advanced/subcontainerbuttons.png" | |
| alt="Buttons in Subcontainer" border=1></p> | |
| <p class="notes"><b>Note:</b> None of the components in the subcontainer is resizable. Therefore, they are placed next to each other in the center of the container, which is the default anchoring.</p></li> | |
| </ol> | |
| <p>To change the anchoring of the whole subcontainer, complete the following steps:</p> | |
| <ol> | |
| <li>Ensure that the subcontainer with the <tt>OK</tt> and <tt>Cancel</tt> buttons is selected and click the arrow button (<img src="../../../images_www/articles/80/java/gbcustomizer-advanced/arrowbutton.png" | |
| alt="Test Layout Button">) to the right of the <tt>Anchor</tt> combobox.</li> | |
| <li>Scroll down and choose <tt>Line End</tt> from the list. | |
| <p class="align-center"><img src="../../../images_www/articles/80/java/gbcustomizer-advanced/subcontainerlineend.png" | |
| alt="Buttons Anchored to Line End" border=1></p></li> | |
| </ol> | |
| <p>The layout looks fine but the subcontainer with the <tt>OK</tt> and <tt>Cancel</tt> buttons occupies only the last two cells in the last row.<br> | |
| In case the <tt>OK</tt> and <tt>Cancel</tt> buttons become wider (for example, during the translation into a different language), they will push the right edges of the <tt>Work Phone:</tt> and <tt>Cell Phone:</tt> text fields. <br> | |
| To avoid this potential issue and let the subcontainer occupy all cells in the bottom row, select the subcontainer and drag its left border to the beginning of the row. </p> | |
| <p class="align-center"><img src="../../../images_www/articles/80/java/gbcustomizer-advanced/subcontainerresized.png" | |
| alt="Resized Subcontainer" border=1></p> | |
| <p>The subcontainer occupies all cells in the bottom row.</p> | |
| <!-- ++++++++++++ Navigating Between Containers ++++++++++++ --> | |
| <a name="01e"></a> | |
| <h3>Navigating Between Containers</h3> | |
| <p>To add a component to a subcontainer (for example, a <tt>Help</tt> button to the existing <tt>OK</tt> and <tt>Cancel</tt> buttons), you need to switch from the main container to the subcontainer before editing the latter's layout. </p> | |
| <p>Complete the steps listed below to add a button to an existing subcontainer: </p> | |
| <ol><li>Click the subcontainer with the <tt>OK</tt> and <tt>Cancel</tt> buttons to select it.</li> | |
| <li>Right-click the container to display the context menu and choose <tt>Design This Container</tt> from it. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/designsubcontainer.png" rel="lytebox" | |
| title="Designing Subcontainer"> | |
| <img src="../../../images_www/articles/80/java/gbcustomizer-advanced/designsubcontainer-small.png" | |
| alt="Designing Subcontainer" border=1></a></p> | |
| </li> | |
| <li>Right-click the second column header and choose <tt>Insert Column After</tt> from the context menu.<br> | |
| An empty cell for the new button displays. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/emptycell.png" rel="lytebox" | |
| title="Empty Cell"> | |
| <img src="../../../images_www/articles/80/java/gbcustomizer-advanced/emptycell-small.png" | |
| alt="Empty Cell" border=1></a></p></li> | |
| <li>Right-click inside the newly created cell and choose <tt>Add Component</tt> > <tt>Swing Controls</tt> > <tt>Button</tt> from the context menu.<br> A new <tt>jButton1</tt> button is added. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/newbutton.png" rel="lytebox" | |
| title="New Button Added"> | |
| <img src="../../../images_www/articles/80/java/gbcustomizer-advanced/newbutton-small.png" | |
| alt="New Button Added" border=1></a></p></li> | |
| <li>Click the Baseline-Related Anchor button (<img src="../../../images_www/articles/80/java/gbcustomizer-advanced/baselineanchor.png" | |
| alt="Baseline Related Anchor">) in the Property Customizer to align the new button with the two existing ones in the row.</li> | |
| <li>Click the browse button (<img src="../../../images_www/articles/80/java/gbcustomizer-advanced/browsebutton.png" alt="Browse Button">) to the right of the Insets text field. The Insets dialog box displays. Enter 5 in the Top: text field, and click OK.</li> | |
| <li>To check how the main container layout looks now, right-click the designed subcontainer and choose <tt>Design Parent Container</tt> from the context menu. | |
| <p class="align-center"><img src="../../../images_www/articles/80/java/gbcustomizer-advanced/designparentcontainer.png" | |
| alt="Design Parent Container" border=1></p> | |
| <p class="notes"><b>Note:</b> The context menu does not display if you right-click the buttons.</p> | |
| </li> | |
| </ol> | |
| <p>The layout design is completed.<br> | |
| A final change that is not related to layout of the container is left.<br> | |
| To rename the button, complete the following steps:</p> | |
| <ol> | |
| <li>Click Close to close the Customize Layout dialog box.</li> | |
| <li>In the Design view, click the <tt>jButton1</tt> component and press F2 (alternatively, select Edit Text from the context menu).</li> | |
| <li>Delete the selected text and enter <tt>Help</tt>. </li> | |
| <li>Press Enter. | |
| <p class="align-center"><img src="../../../images_www/articles/80/java/gbcustomizer-advanced/finallayout.png" | |
| alt="Final Layout" border=1></p></li> | |
| </ol> | |
| <a name="summary"></a> | |
| <h2>Summary</h2> | |
| <p>In this tutorial, you modified an existing form by adding new components, inserting rows, etc. When designing the layout you learned how to use the advanced features of the GridBag Customizer to reorganize the layout of the form.</p> | |
| <p>Go to <a href="../java/gbcustomizer-basic.html">Designing a Basic Java Form Using the GridBag Customizer</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%20an%20Advanced%20Java%20Form%20Using%20the%20GridBag%20Customizer">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 an Advanced Java Form Using the GridBag Customizer 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/NetBeansUserFAQ#GUI_Editor_.28Matisse.29" 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></a></li> | |
| </ul> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| </body> | |
| </html> |