src/content/platform/tutorials/69/nbm-contacteditortopcomponent-old.html - netbeans-website-cleanup - Git at Google

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
     <HEAD>
         <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
         <TITLE>Database Tutorial for NetBeans Platform Applications</TITLE>
         <META NAME="author" CONTENT="Charles.J.Hunt@Sun.COM,Ruth.Kusterer@sun.com">
         <link rel="stylesheet" type="text/css" href="https://netbeans.org/netbeans.css">
         <meta name="AUDIENCE" content="NBUSER">
         <meta name="DESCRIPTION" content="This tutorial describes how to use the
         NetBeans GUI Builder Matisse to lay out a user interface (UI) form,
         and integrate it into NetBeans Platform as a window component.
         You will learn how to build your own rich-client application
         by creating a NetBeans plug-in module and loading it into the NetBeans Platform.">
         <meta name="TYPE" content="ARTICLE">
            <!--      Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. -->
         <!--     Use is subject to license terms.-->
     </HEAD>
     <body>
     <h1>Database Tutorial for NetBeans Platform Applications</h1>
     <p><small><a href="mailto:nbdocs_feedback@usersguide.netbeans.org?subject=Feedback:%20NetBeans%20IDE%205.0%20Integration%20of%20Matisse%20into%20NetBeans%20Platform">Feedback</a></small></p>


     <p>This tutorial describes how to use the GUI Builder (also known as Matisse)
     to design a user interface for a rich-client application based on the NetBeans Platform.
     After you have created the user interface, you are shown how to hook it up to a database.</p>


     <p>The following topics are covered below:</p>

     <ul>
         <li><a href="#1">Setting up the Rich-Client Application Project</a></li>
         <li><a href="#2">Creating a Window Component</a></li>
         <li><a href="#3">Designing the Window Component</a></li>
         <li><a href="#4">Running the Project</a></li>
         <li><a href="#8">Distributing the Contact Form Application</a>
             <ul>
                 <li><a href="#6">Distributing the Form as NetBeans Module (NBM)</a></li>
                 <li><a href="#5">Distributing the Form as Rich-Client Application</a></li>
             </ul>
         </li>
         <li><a href="#7">Related Documents and Next Steps</a></li>
     </ul>


     <a name="1"></a>
     <h2>Setting up the Rich-Client Application Project</h2>

     <p>As a first step, you set up a new skeleton rich-client application.</p>

     <ol>
         <p><li>Choose File &gt; New Project (Ctrl-Shift-N). Under Categories, select NetBeans Plug-in Modules. Under projects,
         select Module Suite Project. Click Next.</li>

         <p>The New Module Suite Project wizard appears.</P></li>

         <p><li>In the Name and Location panel, type <tt>ContactEditor</tt> in Project Name.
         Change the
         Project Location to any directory on your computer.  Click Finish.

         <P>You have now set up a skeleton for your rich-client application. Now you need a module project
         to hold the application's functionality.</P></li>

         <p><li>Expand the <tt>ContactEditor</tt> application project, right-click the Modules node,
         and click Add New...

         <p>The New Module Project wizard appears.</P></li>

         <p><li>In the Name and Location panel, type <tt>ContactEditorUI</tt> in Project Name.
         Change the
         Project Location to any directory on your computer.  Select Set as Main Project. Click Next.

         <p><li>In the Basic Module Configuration panel, type <tt>org.netbeans.modules.contacteditorui</tt> in
         Code Name Base. Click Finish.

     </ol>

     <p> You have now created a skeleton <tt>ContactEditor</tt>
     application project that contains a skeleton module that will contain
     your functionality. The project contains all of your sources and
     project metadata, such as the application's Ant build script. The application
     opens in the IDE. You can view its logical structure in the Projects window (Ctrl-1) and its
     file structure in the Files window (Ctrl-2).


     <a name="2"></a>
     <h2>Creating a Window Component</h2>

     <P>In the <a href="https://netbeans.org/download/dev/javadoc/">NetBeans APIs</a>, a window component is called a
     <a href="https://netbeans.org/download/dev/javadoc/org-openide-windows/org/openide/windows/TopComponent.html">TopComponent</a>.
     A TopComponent can be placed in a variety of different
     locations in the IDE or in your own application built on the NetBeans Platform. You can use a
     wizard to create a window component. When you use the wizard, you choose the window component's location
     when you create the window component.
     <ol>
         <p><li>In the Projects window, right-click the <tt>ContactEditorUI</tt> project node
         and select New &gt; Window Component.
         <p>The New Window Component wizard appears.</li>
         <p><li>In the Basic Settings panel, select <tt>editor</tt> in the Window Position drop-down list.
         Select Open on Application Start to make the new window automatically
         open when the application starts. Click Next.</li>
         <p><li>In the Name, Icon and Location panel, enter <tt>ContactEditor</tt> in Class Name Prefix, to specify the prefix for the
         files that the wizard will generate. You could specify an icon to use with you window component. Leave this field empty for now.
         Accept the default for the package name. Click Finish.</li>
     </ol>

         <P>The wizard creates several files in the
             <tt>ContactEditorUI</tt> project. You see these files when you expand the
             <tt>ContactEditorUI</tt> project node in the IDE's Projects window. The two
             most significant files are <tt>ContactEditorAction.java</tt> and
             <tt>ContactEditorTopComponent.java</tt>. The first defines the menu item that
             will be displayed in the Window menu and the second defines the window component itself.
         </P>

         <a name="3"></a>
         <h2>Designing the Window Component</h2>

         <P>Next, you will design the newly created Window Component.
         The file opens in the GUI Builder when you complete the wizard. It displays an empty GUI form.
         You will now add components to this form.
     </p>

     <P>You will create the same contact editor that you create if you follow the
     <a href="https://netbeans.org/kb/50/quickstart-gui.html">GUI Building in NetBeans IDE 5.0 Tutorial</a>.
     There are a couple subtle differences, though.
     The first is that, unlike in the <a href="https://netbeans.org/kb/50/quickstart-gui.html">GUI Building in NetBeans IDE 5.0 Tutorial</a>,
     the <tt>ContactEditorTopComponent</tt> class is
     a JPanel, instead of a JFrame.  Later, you will add additional JPanels to this
     TopComponent and add other Swing components to those additional
     JPanels.</P>

     <ol>
         <p><li>If you do not see the Palette or the Properties Window,
         first choose Window &gt; Palette and Window &gt; Properties from the main menu.
         <p><li>Drag a JPanel item from the Palette onto the form designer.
         <p><li>Use the Matisse look and feel guidelines to place the JPanel
         at the proper spacing to make it fill the upper half of the box.
         <p><li>In the Properties Window, click the &quot;...&quot; button
         next to the <tt>border</tt> property. A Property Editor opens.
         Set the JPanel's border to <tt>TitledBorder</tt>.
         In the <tt>Title</tt> field, enter the word <tt>Name</tt>.</li>
         <p><li>Click OK to save your changes to the JPanel.
     </ol>
     Here's what you should have:</P>

     <P><img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponent6a3c7b72.png"
         alt="Screenshot: The empty JPanel box with a titled border labeled Name."  BORDER=0><BR>
     </P>

     <P>Next, you add Swing components to the <tt>Name</tt> panel.
     Since it is an embedded JPanel,
     click on the <tt>Name</tt> panel to select it, then right-click inside the
     <tt>Name</tt> panel and select Design This Container as shown below:</P>

     <P><img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponent315cd1fa.png"
         alt="Screenshot: The JPanel's context menu with the Design This Container item selected."   BORDER=0><BR>
     </P>
     <P>Now the form designer's focus will be limited to the <tt>Name</tt> panel.</P>

     <P>Add the Swing components to the <tt>Name</tt> panel
     to complete the contact editor portion needed for the <tt>Name</tt> panel,
     as depicted below.
     Look at the <A HREF="https://netbeans.org/kb/50/quickstart-gui.html">GUI Building in NetBeans IDE 5.0 Tutorial</a> again
     if you need assistance in creating the <tt>Name</tt> panel.
     When you have finished, your <tt>Name</tt> panel should look like the following:</P>

     <P><img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponent7b6e9613.png"
         alt="Screenshot: The Japanel with the first 5 labels and 5 text input fields."  BORDER=0><BR>
     </P>
     <P>You can preview the <tt>Name</tt> panel, by clicking the preview button
     <img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponent_preview-button.jpg" alt="preview button">.
     Notice the preview shows the entire <tt>TopComponent</tt> panel.
     Close the preview window by clicking the Close button.</P>

     <P>In the form designer,
     right-click on the <tt>Name</tt> panel and select Design Top Container
     to go back to the TopComponent panel:</P>

     <P><img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponent72cd0b52.png"
         alt="Screenshot: The JPanel context menu with the Design Top Container item selected." BORDER=0><BR>
     </P>
     <P>The complete TopComponent panel is visible again.
         Next, you add the lower <tt>E-mail</tt> panel to the form.
     </P>

     <ol>
         <p><li>Drag another JPanel from the GUI palette onto the
         form designer just below the <tt>Name</tt> panel.
         Again, use the Matisse look and feel guidelines
         to place the JPanel at the proper spacing below the <tt>Name</tt> panel.</li>
         <p><li>Follow the same steps as above for the <tt>Name</tt> panel to
         set the JPanel's border to a Titled Border,
         this time with a title of <tt>E-mail</tt>.
         <p><li>Stretch the panel to occupy the
         width of the TopComponent panel. Stop when the look and feel
         guidelines advise you of the correct spacing at the left and right
         edge of the TopComponent panel.</li>
         <p><li>As you did with the <tt>Name</tt> panel, select
         the <tt>E-mail</tt> panel, right-click on it and select Design this
         Container from the context menu.</li>
         <p><li>Add the Swing components to the <tt>E-mail</tt>
         panel. Again, feel free to look at the
         <A HREF="https://netbeans.org/kb/50/quickstart-gui.html">GUI Building in NetBeans IDE 5.0 Tutorial</a> for
         more detailed instructions.</li>
         <p><li>Once you have finished adding the Swing components
         for the <tt>E-mail</tt> panel,
         you should have an <tt>E-mail</tt> panel that looks like this:
         <p><img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponentm66b3b86e.png"
         alt="Screenshot: The empty JPanel box with a titled border labeled E-Mail."  BORDER=0></p></li>
         <p><li>Right click on the <tt>Email</tt> panel and
         select Design Top Container to return to the TopComponent.  The
         TopComponent should look like the following in the form designer:
         <p><img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponentm1317ff51.png"
         alt="Screenshot: The complete Contact Editor form with all Name and E-Mail fields"   BORDER=0></p></li>
         <p><li>There's just a couple more Swing
         components to add: the OK and Cancel buttons. Refer
         back to the <A HREF="https://netbeans.org/kb/50/quickstart-gui.html">GUI Building in NetBeans IDE 5.0 Tutorial</a>
         if you need a little help remember how to do it.</li>
     </ol>

     <P>The TopComponent should now look like the following:</P>

     <P><img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponentm6d28ccde.png"
         alt="Screenshot: The complete Contact Editor form with all Name and E-Mail fields,
         complete with OK and Cancel button below" BORDER=0><BR>
     </P>
     <P>That's it. It's time to see how this form looks in action.</P>

     <a name="4"></a>
     <h2>Running the Project</h2>

     <P>Right-click on the <tt>ContactEditorPlugin</tt>
     project name in the Projects window and select Run Project.
     This will launch a new NetBeans Platform with the contact editor you just
     created placed in the main editor window.
     Notice under the NetBeans Platform's Window menu,
     there's an option to open the Contact Editor window, too.</P>

     <P>Here's what the end result looks like (click to enlarge):</P>

     <P>
         <a href="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponent151badbf.png">
         <img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponent_small.png"
         alt="Screenshot: The contact editor form is integrated into the IDE in the Editor location." BORDER=0></a><BR>
     </P>

     <P>
         This tutorial demonstrated how quickly you integrate a Matisse created UI
         into the NetBeans Platform as a window component.
         In a real world application, you now implement the back services of
         the contact editor.
         In the file <tt>ContactEditorTopComponent.java</tt>, switch to Source View.
         Click between two classes and hit the control-space key combination:
         The IDE assists you in creating getters and setters for your contact form.
         In <tt>ContactEditorTopComponent.java</tt>, you implement the response to events
         generated by the GUI.
     </P>

     <a name="8"></a>
     <h2>Distributing the Contact Form Application</h2>

     <P>To distribute your new application, you can publish the Contact Editor app
     either as a NetBeans plug-in module or as a NetBeans rich-client application.

     <div class="indent">
         <a name="6"></a>
         <h3  class="tutorial">Distributing the Form as a NetBeans Module</h3>

         <P>You can generate a standalone plug-in module,
         also know as an NBM, which can be loaded directly into the NetBeans IDE.</P>

         <ol>
             <p><li>In the IDE's Projects window, right-click on the
             <tt>ContactEditorPlugin</tt> project and select Create NBM.
             The IDE's Output window will tell you the
             location where the NBM file was created.
             <p><li>Select Tools &gt; Update Center from the main menu.
             In the Update Center Wizard, select the option
             to Install Manually Downloaded Modules. Click Next.
             <p><li>Click Add and browse to the directory where the
             contact editor NBM file was generated, and select the NBM file.
             Click OK and Next.
             <p><li>On the wizard's overview page, click Next and accept the (empty) license.
             <p><li>When the Update Center wizards says done, again click Next to continue.
             <p><li>Select include and answer Yes to install your module.
             <p><li>Click Finish to close the Update Center wizard.
         </ol>

         <P>
             Look at the Window menu: It now has a Open ContactEditor Window menu item.
             Your contact form is now installed in this copy of the NetBeans IDE.
         </P>

         <p>
         Note that it does not play any role where the NBM was created:
         it will load into a NetBeans Platform running on Windows,
         Linux, MacOS, Solaris or anywhere else you like to run the NetBeans Platform.
         In addition, you'll see the unser interface that you created with Matisse
         will automatically adjust to your target operating system's look and
         feel! One of the advantages of Matisse is that one distribution fits all.
         <p>

         <p>To uninstall a plug-in module, choose Tools &gt; Module Manager from
         the IDE's main menu and deselect the box next to the module you want removed.</p>
     </div>

     <a name="5"></a>
     <div class="indent">
         <h3 class="tutorial">Distributing the Form as Part of a Rich-Client Application</h3>

         <p>You can wrap your plug-in project in a Module Suite Project
         and let NetBeans IDE create a stand-alone executable.
         The executable will be built on the NetBeans Platform,
         but it will have its own splashscreen and menubar.</p>

         <ol>
             <p><li>Choose File &gt; New Project from the IDE's menu to open the New Project wizard.
             To create a new plug-in module suite,
             select NetBeans Plug-In Module &gt; Module Suite Project.
             Click Next to continue.</li>
             <p><li>In the Project Name field, enter <tt>ContactEditor</tt>.</li>
             <p><li>Select a project location where you want to save your project.</li>
             <p><li>Make sure Set as Main Project is selected.</li>
             <p><li>Click Finish. The Module Suite project appears in the IDE's Project window.</li>
             <p><li>Open the <tt>ContactEditor</tt> project tree. You see a <tt>Module</tt> node.
             Right-click the <tt>Module</tt> node and choose Add....
             In the File browser, select your <tt>ContactEditorPlugin</tt> project and
             click Open Project Folder to add it to the module suite.
         </ol>

         <P>You have now wrapped your plug-in into a module suite.
         Next you will brand your application and let NetBeans IDE create the executable.
         The executable will be ZIP compressed and will be ready for distribution.

         <ol>
             <p><li>Right-click the <tt>ContactEditor</tt> node, choose Properties, and then click Application
             in the Project Properties dialog box.</li>
             <p><li>Select Create Standalone Application and click Exclude.
             When you do this, IDE-related modules are removed from the
             application. If, for example, you wanted your application to include
             the libraries that provide the IDE with its editor
             functionalities, you would click Skip instead.
             <p><li>Type <tt>contacteditor</tt> in the Branding Name field.
             This sets the name of the executable launcher that the IDE creates for
             ZIP distributions.</li>
             <p><li>Type <tt>Contact Editor</tt> in the Application Title field.
             This sets the name that is displayed in the new application's title bar.
             <p><li>Click Splash Screen. Browse to an image file. Click OK to attach it to your project.</li>
             <p><li>Run the application again and notice the splash screen. Once the application has started up, notice
             that the title bar displays the title that you specified. Also, there are a lot less
             menu items, toolbar buttons, and other features.
             <p><li>Right-click the <tt>ContactEditor</tt> node, choose Build Zip-Distribution.
             Look into the Output window and note the path where the zip file has been created.
             The relevant line looks similar to this example:
             <pre class="examplecode">Building zip: /home/joesmith/Applications/ContactEditor/dist/contacteditor.zip</pre></li>
         </ol>

         <p>By following these steps, you have created a NetBeans Rich-client
             Application featuring the contact form user interface.
             It is branded to display your custom splashscreen and is ready for distribution as a ZIP file.
             To use the application, unzip the archive and run the file <tt>bin/contacteditor</tt>.
         </p>
     </div>

     <a name="7"></a>
     <H2>Related Documents</h2>

     <ul>
         <li>The <a href="#">ContactEditorPlugin project zip file</a> (Download and
         extract it, and load the ContactEditorPlugin project into your NetBeans IDE.)</li>
         <li><a href="https://netbeans.org/download/dev/javadoc/org-openide-windows/org/openide/windows/TopComponent.html">TopComponent JavaDoc</a>.</li>
         <li><a href="https://platform.netbeans.org/tutorials/nbm-paintapp.html">Introduction to Rich-Client Application Development</a></li>
         <li><a href="http://Platform.netbeans.org/tutorials/nbm-windowsapi.html">Anagram Game Module Tutorial</a>
         <li><a href="https://netbeans.org/kb/50/quickstart-gui.html">GUI Building in NetBeans IDE 5.0 Tutorial</a></li>
     </ul>

     <H2>Next Steps</h2>
     <ul>
         <li><A HREF="https://netbeans.org/kb/trails/platform.html">More NetBeans 5.0 Platform Tutorials</A></li>
         <li><a href="http://wiki.netbeans.org/wiki/view/NetBeansDeveloperFAQ">NetBeans Developer FAQ</a>
     </ul>

     </BODY>
 </HTML>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
	<HTML>
	<HEAD>
	<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
	<TITLE>Database Tutorial for NetBeans Platform Applications</TITLE>
	<META NAME="author" CONTENT="Charles.J.Hunt@Sun.COM,Ruth.Kusterer@sun.com">
	<link rel="stylesheet" type="text/css" href="https://netbeans.org/netbeans.css">
	<meta name="AUDIENCE" content="NBUSER">
	<meta name="DESCRIPTION" content="This tutorial describes how to use the
	NetBeans GUI Builder Matisse to lay out a user interface (UI) form,
	and integrate it into NetBeans Platform as a window component.
	You will learn how to build your own rich-client application
	by creating a NetBeans plug-in module and loading it into the NetBeans Platform.">
	<meta name="TYPE" content="ARTICLE">
	<!-- Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. -->
	<!-- Use is subject to license terms.-->
	</HEAD>
	<body>
	<h1>Database Tutorial for NetBeans Platform Applications</h1>
	<p><small><a href="mailto:nbdocs_feedback@usersguide.netbeans.org?subject=Feedback:%20NetBeans%20IDE%205.0%20Integration%20of%20Matisse%20into%20NetBeans%20Platform">Feedback</a></small></p>



	<p>This tutorial describes how to use the GUI Builder (also known as Matisse)
	to design a user interface for a rich-client application based on the NetBeans Platform.
	After you have created the user interface, you are shown how to hook it up to a database.</p>


	<p>The following topics are covered below:</p>

	<ul>
	<li><a href="#1">Setting up the Rich-Client Application Project</a></li>
	<li><a href="#2">Creating a Window Component</a></li>
	<li><a href="#3">Designing the Window Component</a></li>
	<li><a href="#4">Running the Project</a></li>
	<li><a href="#8">Distributing the Contact Form Application</a>
	<ul>
	<li><a href="#6">Distributing the Form as NetBeans Module (NBM)</a></li>
	<li><a href="#5">Distributing the Form as Rich-Client Application</a></li>
	</ul>
	</li>
	<li><a href="#7">Related Documents and Next Steps</a></li>
	</ul>



	<a name="1"></a>
	<h2>Setting up the Rich-Client Application Project</h2>

	<p>As a first step, you set up a new skeleton rich-client application.</p>

	<ol>
	<p><li>Choose File > New Project (Ctrl-Shift-N). Under Categories, select NetBeans Plug-in Modules. Under projects,
	select Module Suite Project. Click Next.</li>

	<p>The New Module Suite Project wizard appears.</P></li>

	<p><li>In the Name and Location panel, type <tt>ContactEditor</tt> in Project Name.
	Change the
	Project Location to any directory on your computer. Click Finish.

	<P>You have now set up a skeleton for your rich-client application. Now you need a module project
	to hold the application's functionality.</P></li>

	<p><li>Expand the <tt>ContactEditor</tt> application project, right-click the Modules node,
	and click Add New...

	<p>The New Module Project wizard appears.</P></li>

	<p><li>In the Name and Location panel, type <tt>ContactEditorUI</tt> in Project Name.
	Change the
	Project Location to any directory on your computer. Select Set as Main Project. Click Next.

	<p><li>In the Basic Module Configuration panel, type <tt>org.netbeans.modules.contacteditorui</tt> in
	Code Name Base. Click Finish.

	</ol>

	<p> You have now created a skeleton <tt>ContactEditor</tt>
	application project that contains a skeleton module that will contain
	your functionality. The project contains all of your sources and
	project metadata, such as the application's Ant build script. The application
	opens in the IDE. You can view its logical structure in the Projects window (Ctrl-1) and its
	file structure in the Files window (Ctrl-2).


	<a name="2"></a>
	<h2>Creating a Window Component</h2>

	<P>In the <a href="https://netbeans.org/download/dev/javadoc/">NetBeans APIs</a>, a window component is called a
	<a href="https://netbeans.org/download/dev/javadoc/org-openide-windows/org/openide/windows/TopComponent.html">TopComponent</a>.
	A TopComponent can be placed in a variety of different
	locations in the IDE or in your own application built on the NetBeans Platform. You can use a
	wizard to create a window component. When you use the wizard, you choose the window component's location
	when you create the window component.
	<ol>
	<p><li>In the Projects window, right-click the <tt>ContactEditorUI</tt> project node
	and select New > Window Component.
	<p>The New Window Component wizard appears.</li>
	<p><li>In the Basic Settings panel, select <tt>editor</tt> in the Window Position drop-down list.
	Select Open on Application Start to make the new window automatically
	open when the application starts. Click Next.</li>
	<p><li>In the Name, Icon and Location panel, enter <tt>ContactEditor</tt> in Class Name Prefix, to specify the prefix for the
	files that the wizard will generate. You could specify an icon to use with you window component. Leave this field empty for now.
	Accept the default for the package name. Click Finish.</li>
	</ol>

	<P>The wizard creates several files in the
	<tt>ContactEditorUI</tt> project. You see these files when you expand the
	<tt>ContactEditorUI</tt> project node in the IDE's Projects window. The two
	most significant files are <tt>ContactEditorAction.java</tt> and
	<tt>ContactEditorTopComponent.java</tt>. The first defines the menu item that
	will be displayed in the Window menu and the second defines the window component itself.
	</P>

	<a name="3"></a>
	<h2>Designing the Window Component</h2>

	<P>Next, you will design the newly created Window Component.
	The file opens in the GUI Builder when you complete the wizard. It displays an empty GUI form.
	You will now add components to this form.
	</p>

	<P>You will create the same contact editor that you create if you follow the
	<a href="https://netbeans.org/kb/50/quickstart-gui.html">GUI Building in NetBeans IDE 5.0 Tutorial</a>.
	There are a couple subtle differences, though.
	The first is that, unlike in the <a href="https://netbeans.org/kb/50/quickstart-gui.html">GUI Building in NetBeans IDE 5.0 Tutorial</a>,
	the <tt>ContactEditorTopComponent</tt> class is
	a JPanel, instead of a JFrame. Later, you will add additional JPanels to this
	TopComponent and add other Swing components to those additional
	JPanels.</P>

	<ol>
	<p><li>If you do not see the Palette or the Properties Window,
	first choose Window > Palette and Window > Properties from the main menu.
	<p><li>Drag a JPanel item from the Palette onto the form designer.
	<p><li>Use the Matisse look and feel guidelines to place the JPanel
	at the proper spacing to make it fill the upper half of the box.
	<p><li>In the Properties Window, click the "..." button
	next to the <tt>border</tt> property. A Property Editor opens.
	Set the JPanel's border to <tt>TitledBorder</tt>.
	In the <tt>Title</tt> field, enter the word <tt>Name</tt>.</li>
	<p><li>Click OK to save your changes to the JPanel.
	</ol>
	Here's what you should have:</P>

	<P><img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponent6a3c7b72.png"
	alt="Screenshot: The empty JPanel box with a titled border labeled Name." BORDER=0><BR>
	</P>

	<P>Next, you add Swing components to the <tt>Name</tt> panel.
	Since it is an embedded JPanel,
	click on the <tt>Name</tt> panel to select it, then right-click inside the
	<tt>Name</tt> panel and select Design This Container as shown below:</P>

	<P><img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponent315cd1fa.png"
	alt="Screenshot: The JPanel's context menu with the Design This Container item selected." BORDER=0><BR>
	</P>
	<P>Now the form designer's focus will be limited to the <tt>Name</tt> panel.</P>

	<P>Add the Swing components to the <tt>Name</tt> panel
	to complete the contact editor portion needed for the <tt>Name</tt> panel,
	as depicted below.
	Look at the <A HREF="https://netbeans.org/kb/50/quickstart-gui.html">GUI Building in NetBeans IDE 5.0 Tutorial</a> again
	if you need assistance in creating the <tt>Name</tt> panel.
	When you have finished, your <tt>Name</tt> panel should look like the following:</P>

	<P><img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponent7b6e9613.png"
	alt="Screenshot: The Japanel with the first 5 labels and 5 text input fields." BORDER=0><BR>
	</P>
	<P>You can preview the <tt>Name</tt> panel, by clicking the preview button
	<img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponent_preview-button.jpg" alt="preview button">.
	Notice the preview shows the entire <tt>TopComponent</tt> panel.
	Close the preview window by clicking the Close button.</P>

	<P>In the form designer,
	right-click on the <tt>Name</tt> panel and select Design Top Container
	to go back to the TopComponent panel:</P>

	<P><img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponent72cd0b52.png"
	alt="Screenshot: The JPanel context menu with the Design Top Container item selected." BORDER=0><BR>
	</P>
	<P>The complete TopComponent panel is visible again.
	Next, you add the lower <tt>E-mail</tt> panel to the form.
	</P>

	<ol>
	<p><li>Drag another JPanel from the GUI palette onto the
	form designer just below the <tt>Name</tt> panel.
	Again, use the Matisse look and feel guidelines
	to place the JPanel at the proper spacing below the <tt>Name</tt> panel.</li>
	<p><li>Follow the same steps as above for the <tt>Name</tt> panel to
	set the JPanel's border to a Titled Border,
	this time with a title of <tt>E-mail</tt>.
	<p><li>Stretch the panel to occupy the
	width of the TopComponent panel. Stop when the look and feel
	guidelines advise you of the correct spacing at the left and right
	edge of the TopComponent panel.</li>
	<p><li>As you did with the <tt>Name</tt> panel, select
	the <tt>E-mail</tt> panel, right-click on it and select Design this
	Container from the context menu.</li>
	<p><li>Add the Swing components to the <tt>E-mail</tt>
	panel. Again, feel free to look at the
	<A HREF="https://netbeans.org/kb/50/quickstart-gui.html">GUI Building in NetBeans IDE 5.0 Tutorial</a> for
	more detailed instructions.</li>
	<p><li>Once you have finished adding the Swing components
	for the <tt>E-mail</tt> panel,
	you should have an <tt>E-mail</tt> panel that looks like this:
	<p><img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponentm66b3b86e.png"
	alt="Screenshot: The empty JPanel box with a titled border labeled E-Mail." BORDER=0></p></li>
	<p><li>Right click on the <tt>Email</tt> panel and
	select Design Top Container to return to the TopComponent. The
	TopComponent should look like the following in the form designer:
	<p><img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponentm1317ff51.png"
	alt="Screenshot: The complete Contact Editor form with all Name and E-Mail fields" BORDER=0></p></li>
	<p><li>There's just a couple more Swing
	components to add: the OK and Cancel buttons. Refer
	back to the <A HREF="https://netbeans.org/kb/50/quickstart-gui.html">GUI Building in NetBeans IDE 5.0 Tutorial</a>
	if you need a little help remember how to do it.</li>
	</ol>

	<P>The TopComponent should now look like the following:</P>

	<P><img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponentm6d28ccde.png"
	alt="Screenshot: The complete Contact Editor form with all Name and E-Mail fields,
	complete with OK and Cancel button below" BORDER=0><BR>
	</P>
	<P>That's it. It's time to see how this form looks in action.</P>

	<a name="4"></a>
	<h2>Running the Project</h2>

	<P>Right-click on the <tt>ContactEditorPlugin</tt>
	project name in the Projects window and select Run Project.
	This will launch a new NetBeans Platform with the contact editor you just
	created placed in the main editor window.
	Notice under the NetBeans Platform's Window menu,
	there's an option to open the Contact Editor window, too.</P>

	<P>Here's what the end result looks like (click to enlarge):</P>

	<P>
	<a href="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponent151badbf.png">
	<img src="../images/tutorials/topcomponent-tutorial/ContactEditorTopComponent_small.png"
	alt="Screenshot: The contact editor form is integrated into the IDE in the Editor location." BORDER=0></a><BR>
	</P>

	<P>
	This tutorial demonstrated how quickly you integrate a Matisse created UI
	into the NetBeans Platform as a window component.
	In a real world application, you now implement the back services of
	the contact editor.
	In the file <tt>ContactEditorTopComponent.java</tt>, switch to Source View.
	Click between two classes and hit the control-space key combination:
	The IDE assists you in creating getters and setters for your contact form.
	In <tt>ContactEditorTopComponent.java</tt>, you implement the response to events
	generated by the GUI.
	</P>

	<a name="8"></a>
	<h2>Distributing the Contact Form Application</h2>

	<P>To distribute your new application, you can publish the Contact Editor app
	either as a NetBeans plug-in module or as a NetBeans rich-client application.

	<div class="indent">
	<a name="6"></a>
	<h3 class="tutorial">Distributing the Form as a NetBeans Module</h3>

	<P>You can generate a standalone plug-in module,
	also know as an NBM, which can be loaded directly into the NetBeans IDE.</P>

	<ol>
	<p><li>In the IDE's Projects window, right-click on the
	<tt>ContactEditorPlugin</tt> project and select Create NBM.
	The IDE's Output window will tell you the
	location where the NBM file was created.
	<p><li>Select Tools > Update Center from the main menu.
	In the Update Center Wizard, select the option
	to Install Manually Downloaded Modules. Click Next.
	<p><li>Click Add and browse to the directory where the
	contact editor NBM file was generated, and select the NBM file.
	Click OK and Next.
	<p><li>On the wizard's overview page, click Next and accept the (empty) license.
	<p><li>When the Update Center wizards says done, again click Next to continue.
	<p><li>Select include and answer Yes to install your module.
	<p><li>Click Finish to close the Update Center wizard.
	</ol>

	<P>
	Look at the Window menu: It now has a Open ContactEditor Window menu item.
	Your contact form is now installed in this copy of the NetBeans IDE.
	</P>

	<p>
	Note that it does not play any role where the NBM was created:
	it will load into a NetBeans Platform running on Windows,
	Linux, MacOS, Solaris or anywhere else you like to run the NetBeans Platform.
	In addition, you'll see the unser interface that you created with Matisse
	will automatically adjust to your target operating system's look and
	feel! One of the advantages of Matisse is that one distribution fits all.
	<p>

	<p>To uninstall a plug-in module, choose Tools > Module Manager from
	the IDE's main menu and deselect the box next to the module you want removed.</p>
	</div>

	<a name="5"></a>
	<div class="indent">
	<h3 class="tutorial">Distributing the Form as Part of a Rich-Client Application</h3>

	<p>You can wrap your plug-in project in a Module Suite Project
	and let NetBeans IDE create a stand-alone executable.
	The executable will be built on the NetBeans Platform,
	but it will have its own splashscreen and menubar.</p>

	<ol>
	<p><li>Choose File > New Project from the IDE's menu to open the New Project wizard.
	To create a new plug-in module suite,
	select NetBeans Plug-In Module > Module Suite Project.
	Click Next to continue.</li>
	<p><li>In the Project Name field, enter <tt>ContactEditor</tt>.</li>
	<p><li>Select a project location where you want to save your project.</li>
	<p><li>Make sure Set as Main Project is selected.</li>
	<p><li>Click Finish. The Module Suite project appears in the IDE's Project window.</li>
	<p><li>Open the <tt>ContactEditor</tt> project tree. You see a <tt>Module</tt> node.
	Right-click the <tt>Module</tt> node and choose Add....
	In the File browser, select your <tt>ContactEditorPlugin</tt> project and
	click Open Project Folder to add it to the module suite.
	</ol>

	<P>You have now wrapped your plug-in into a module suite.
	Next you will brand your application and let NetBeans IDE create the executable.
	The executable will be ZIP compressed and will be ready for distribution.

	<ol>
	<p><li>Right-click the <tt>ContactEditor</tt> node, choose Properties, and then click Application
	in the Project Properties dialog box.</li>
	<p><li>Select Create Standalone Application and click Exclude.
	When you do this, IDE-related modules are removed from the
	application. If, for example, you wanted your application to include
	the libraries that provide the IDE with its editor
	functionalities, you would click Skip instead.
	<p><li>Type <tt>contacteditor</tt> in the Branding Name field.
	This sets the name of the executable launcher that the IDE creates for
	ZIP distributions.</li>
	<p><li>Type <tt>Contact Editor</tt> in the Application Title field.
	This sets the name that is displayed in the new application's title bar.
	<p><li>Click Splash Screen. Browse to an image file. Click OK to attach it to your project.</li>
	<p><li>Run the application again and notice the splash screen. Once the application has started up, notice
	that the title bar displays the title that you specified. Also, there are a lot less
	menu items, toolbar buttons, and other features.
	<p><li>Right-click the <tt>ContactEditor</tt> node, choose Build Zip-Distribution.
	Look into the Output window and note the path where the zip file has been created.
	The relevant line looks similar to this example:
	<pre class="examplecode">Building zip: /home/joesmith/Applications/ContactEditor/dist/contacteditor.zip</pre></li>
	</ol>

	<p>By following these steps, you have created a NetBeans Rich-client
	Application featuring the contact form user interface.
	It is branded to display your custom splashscreen and is ready for distribution as a ZIP file.
	To use the application, unzip the archive and run the file <tt>bin/contacteditor</tt>.
	</p>
	</div>

	<a name="7"></a>
	<H2>Related Documents</h2>

	<ul>
	<li>The <a href="#">ContactEditorPlugin project zip file</a> (Download and
	extract it, and load the ContactEditorPlugin project into your NetBeans IDE.)</li>
	<li><a href="https://netbeans.org/download/dev/javadoc/org-openide-windows/org/openide/windows/TopComponent.html">TopComponent JavaDoc</a>.</li>
	<li><a href="https://platform.netbeans.org/tutorials/nbm-paintapp.html">Introduction to Rich-Client Application Development</a></li>
	<li><a href="http://Platform.netbeans.org/tutorials/nbm-windowsapi.html">Anagram Game Module Tutorial</a>
	<li><a href="https://netbeans.org/kb/50/quickstart-gui.html">GUI Building in NetBeans IDE 5.0 Tutorial</a></li>
	</ul>

	<H2>Next Steps</h2>
	<ul>
	<li><A HREF="https://netbeans.org/kb/trails/platform.html">More NetBeans 5.0 Platform Tutorials</A></li>
	<li><a href="http://wiki.netbeans.org/wiki/view/NetBeansDeveloperFAQ">NetBeans Developer FAQ</a>
	</ul>

	</BODY>
	</HTML>