220 lines
12 KiB
HTML
220 lines
12 KiB
HTML
|
<?xml version="1.0" encoding="UTF-8"?>
|
||
|
|
<!DOCTYPE html
|
||
|
|
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
|
|
<html lang="en-us" xml:lang="en-us">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
|
<meta name="security" content="public" />
|
||
|
|
<meta name="Robots" content="index,follow" />
|
||
|
|
<meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.icra.org/ratingsv02.html" l gen true r (cz 1 lz 1 nz 1 oz 1 vz 1) "http://www.rsac.org/ratingsv01.html" l gen true r (n 0 s 0 v 0 l 0) "http://www.classify.org/safesurf/" l gen true r (SS~~000 1))' />
|
||
|
|
<meta name="DC.Type" content="reference" />
|
||
|
|
<meta name="DC.Title" content="Example: Using GUI Builder" />
|
||
|
|
<meta name="abstract" content="" />
|
||
|
|
<meta name="description" content="" />
|
||
|
|
<meta name="copyright" content="(C) Copyright IBM Corporation 2006" />
|
||
|
|
<meta name="DC.Rights.Owner" content="(C) Copyright IBM Corporation 2006" />
|
||
|
|
<meta name="DC.Format" content="XHTML" />
|
||
|
|
<meta name="DC.Identifier" content="sampleex" />
|
||
|
|
<meta name="DC.Language" content="en-us" />
|
||
|
|
<!-- All rights reserved. Licensed Materials Property of IBM -->
|
||
|
|
<!-- US Government Users Restricted Rights -->
|
||
|
|
<!-- Use, duplication or disclosure restricted by -->
|
||
|
|
<!-- GSA ADP Schedule Contract with IBM Corp. -->
|
||
|
|
<link rel="stylesheet" type="text/css" href="./ibmdita.css" />
|
||
|
|
<link rel="stylesheet" type="text/css" href="./ic.css" />
|
||
|
|
<title>Example: Using GUI Builder</title>
|
||
|
|
</head>
|
||
|
|
<body id="sampleex"><a name="sampleex"><!-- --></a>
|
||
|
|
<!-- Java sync-link --><script language="Javascript" src="../rzahg/synch.js" type="text/javascript"></script>
|
||
|
|
<h1 class="topictitle1">Example: Using GUI Builder</h1>
|
||
|
|
<div><p></p>
|
||
|
|
<div class="section"><p>When the examples contained in this section are put together with
|
||
|
|
the correct data beans working behind the scenes, you get a total GUI application. </p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>Figure 1 shows the first panel that displays when you run this
|
||
|
|
example.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 1: The GUI Builder example main window</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh061.gif" alt="The GUI Builder example main window" /> </p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>Notice that this screen allows you to use the <a href="pdmlasui.htm#pdmlasui__example3">dynamic
|
||
|
|
panel manager</a>. Figures 2 and 3 show how you can resize the window to
|
||
|
|
be larger or smaller.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 2: Resizing the GUI Builder example main window (larger)</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh047.gif" alt="Resizing the GUI Builder example main window (larger)" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 3: Resizing the GUI Builder example main window (smaller)</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh048.gif" alt="Resizing the GUI Builder example main window (smaller)" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>When you use the dynamic panel manager, while the size of the
|
||
|
|
panel and the panel controls changes, the size of the text does not.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>The panel allows you to perform the following actions:</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><ul><li> <a href="#sampleex__launchingthepropertysheet">Launch a property sheet</a></li>
|
||
|
|
<li> <a href="#sampleex__launchingthewizard">Launch a wizard</a></li>
|
||
|
|
<li> <a href="#sampleex__displayingthesamples">Display the samples listed
|
||
|
|
in the left pane</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong><span class="synph" id="sampleex__launchingthepropertysheet"><a name="sampleex__launchingthepropertysheet"><!-- --></a><span class="kwd"></span></span>Launching
|
||
|
|
the property sheet</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>You can launch the property sheet by clicking the Property Sheet
|
||
|
|
toolbar button or by using the <strong>Launch</strong> menu. Being able to choose between
|
||
|
|
the toolbar and the menu illustrates linking menu items. Figure 4 shows <strong>Property
|
||
|
|
Sheet</strong> being selected from <strong>Launch</strong> menu on the GUI Builder example
|
||
|
|
main window.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong><span class="synph" id="sampleex__fig4"><a name="sampleex__fig4"><!-- --></a><span class="kwd"></span></span>Figure 4: Selecting Property
|
||
|
|
Sheet from the Launch menu</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh063.gif" alt="Selecting Property Sheet from the Launch menu" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>Selecting <strong>Property Sheet</strong> displays the panel in Figure 5.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 5: Property Sheet Sample dialog</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh064.gif" alt="Property Sheet Sample dialog: Tab 1 tab" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>When the Property Sheet Sample first appears, Tab 1 displays by
|
||
|
|
default. Figures 6 and 7 show how the panel display changes when you select
|
||
|
|
the other tabs.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 6: Selecting the Panel Sample tab</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh065.gif" alt="Property Sheet Sample dialog: Panel Sample tab" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 7: Selecting the Table Cell Editor tab</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh066.gif" alt="Property Sheet Sample dialog: Table Cell Editor tab" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong><span class="synph" id="sampleex__launchingthewizard"><a name="sampleex__launchingthewizard"><!-- --></a><span class="kwd"></span></span>Launching
|
||
|
|
the wizard</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>You can launch the wizard by clicking the Wizard toolbar button
|
||
|
|
or by using the <strong>Launch</strong> menu. Being able to choose between the toolbar
|
||
|
|
and the menu illustrates linking menu items. Figure 8 shows <strong>Wizard</strong>
|
||
|
|
being selected from <strong>Launch</strong> menu on the GUI Builder example main window.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong><span class="synph" id="sampleex__fig8"><a name="sampleex__fig8"><!-- --></a><span class="kwd"></span></span>Figure 8: Selecting Wizard
|
||
|
|
from the Launch menu</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh062.gif" alt="Selecting Wizard from the Launch menu" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>Figure 9 shows how the first wizard dialog gives you many options.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 9: Selecting Rock in the first wizard dialog</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh067.gif" width="600" alt="Selecting Rock in the first wizard dialog" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>In the first wizard dialog, select <strong>Rock</strong> and click <strong>Next</strong>
|
||
|
|
to display the second wizard dialog as shown in Figure 10.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 10: The second wizard dialog (after selecting Rock)</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh068.gif" width="600" alt="The second wizard dialog (after selecting Rock)" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>On the second wizard dialog, click <strong>Next</strong> to display the
|
||
|
|
final wizard dialog as shown in Figure 11.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 11: The final wizard dialog</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh069.gif" width="600" alt="The final wizard dialog" /> </p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>However, this example has been programmed to have a loop. Select <strong>Country</strong>
|
||
|
|
in the first wizard dialog (Figure 12), then click <strong>Next</strong> to display
|
||
|
|
the second wizard dialog (Figure 13). Clicking Next in the second wizard
|
||
|
|
dialog loops back to display the first dialog again (Figure 14) instead of
|
||
|
|
the final wizard dialog.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 12: Selecting Country in the first wizard dialog</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh078.gif" width="600" alt="Selecting country in the first wizard dialog" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 13: The second wizard dialog (after selecting Country)</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh079.gif" width="600" alt="The second wizard dialog (after selecting Country)" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 14: Looping back to the first wizard dialog</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh078.gif" width="600" alt="Clicking Next loops back to the first wizard dialog" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>In other words, the programmer has determined that nobody can
|
||
|
|
select country as their favorite form of music.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong><span class="synph" id="sampleex__displayingthesamples"><a name="sampleex__displayingthesamples"><!-- --></a><span class="kwd"></span></span>Displaying
|
||
|
|
the samples</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>From the GUI Builder example main window, you can also select
|
||
|
|
other functions from the left pane below the toolbar. Figure 15 shows how
|
||
|
|
selecting <strong>Panel</strong> in the left pane displays the Panel sample in the
|
||
|
|
right pane.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 15: Selecting Panel in the left pane</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh070.gif" width="600" alt="Selecting Panel in the left pane" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>The Panel sample has been programmed with an option to disable
|
||
|
|
the image. Select <strong>Disable Image</strong> to display the same screen with the
|
||
|
|
image shaded, as shown in Figure 16.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 16: Selecting Disable Image in the right pane</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh071.gif" width="600" alt="Selecting Disable Image in the right pane" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>The Panel sample also illustrates the drop-down list box option,
|
||
|
|
as shown in Figure 17.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 17: Selecting an item from the Favorite Food list in
|
||
|
|
the right pane</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh072.gif" width="600" alt="Selecting an item from the Favorite Food list in the right pane" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>Figure 18 shows how selecting <strong>Tabbed Pane</strong> in the left pane
|
||
|
|
of the GUI Builder example main window displays the Tabbed Pane sample in
|
||
|
|
the right pane.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 18: Selecting Tabbed Pane in the left pane</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh073.gif" width="600" alt="Selecting Tabbed Pane in the left pane" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>Figure 19 shows the results of selecting the <strong>Panel Sample</strong>
|
||
|
|
tab in the right pane.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 19: Selecting the Panel Sample tab in the right pane</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh074.gif" width="600" alt="Selecting the Panel Sample tab in the right pane" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>Select <strong>Tab 1</strong> again (in the right pane), then click <strong>Disable
|
||
|
|
Age Field on Tab 2</strong> to deselect it. </p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 20: Selecting Disable Age Field on Tab 2 in the right
|
||
|
|
pane</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh075.gif" width="600" alt="Selecting Disable Age Field on Tab 2 in the right pane" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>Selecting the <strong>Disable Age Field on Tab 2</strong> option deactivates
|
||
|
|
and grays out the <strong>Age</strong> field in the <strong>Panel Sample</strong> tab, as shown
|
||
|
|
in Figure 21. </p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 21: Result of disabling age in the Panel Sample tab</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh076.gif" width="600" alt="Result of disabling age in the Panel Sample tab" /></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p>Selecting <strong>Table Pane</strong> in the left pane of the GUI Builder
|
||
|
|
example main window illustrates the use of a table panel with a custom renderer
|
||
|
|
and a custom cell editor, as shown in Figure 22.</p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><strong>Figure 22: Selecting Table Panel in the left pane</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="section"><p><img src="rzahh077.gif" width="600" alt="Selecting Table Panel in the left pane" /></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|