<?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="Creating your user interface" /> <meta name="abstract" content="You can create your user interface using the GUI Builder tool." /> <meta name="description" content="You can create your user interface using the GUI Builder tool." /> <meta name="DC.Relation" scheme="URI" content="pdmlpg1.htm" /> <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="pdmltool" /> <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>Creating your user interface</title> </head> <body id="pdmltool"><a name="pdmltool"><!-- --></a> <!-- Java sync-link --><script language="Javascript" src="../rzahg/synch.js" type="text/javascript"></script> <h1 class="topictitle1">Creating your user interface</h1> <div><p>You can create your user interface using the GUI Builder tool.</p> <div class="section" id="pdmltool__runninggui"><a name="pdmltool__runninggui"><!-- --></a><p>To start the GUI Builder, use the following command:</p> <img src="./delta.gif" alt="Start of change" /><pre> java com.ibm.as400.ui.tools.GUIBuilder [-plaf <em>look and feel</em>]</pre><img src="./deltaend.gif" alt="End of change" /> <p>If you did not set your CLASSPATH environment variable to contain the Graphical Toolbox JAR files, then you will need to specify them on the command line using the <tt>classpath</tt> option. See <a href="pdmlbeg.htm#pdmlbeg">Setting Up the Graphical Toolbox</a>.</p> <div class="p" id="pdmltool__lookandfeel"><a name="pdmltool__lookandfeel"><!-- --></a><dl><dt class="dlterm"><strong>Options</strong> <samp class="codeph">-plaf <em>look and feel</em></samp> </dt> <dd>The platform look and feel that you want. This option lets you override the default look and feel that is set based on the platform you are developing on, so you can preview your panels to see how they will look on different operating system platforms. The following look and feel values are accepted: <ul><li>Windows<sup>®</sup></li> <li>Metal</li> <li>Motif</li> </ul> Currently, additional look and feel attributes that Swing 1.1 may support are not supported by the GUI Builder</dd> </dl> </div> </div> <div class="section"><h4 class="sectiontitle">Types of user interface resources</h4><p>When you start the GUI Builder for the first time, you need to create a new PDML file. From the menu bar on the GUI Builder widow, select <strong>File</strong> --> <strong>New File</strong>. After you create your new PDML file, you can define any of the following types of UI resources that you want it to contain.</p> <dl><dt class="dlterm"><strong>Panel</strong></dt> <dd>The fundamental resource type. It describes a rectangular area within which UI elements are arranged. The UI elements may consist of simple controls, such as radio buttons or text fields, images, animations, custom controls, or more sophisticated subpanels (see the following definitions for Split Pane, Deck Pane and Tabbed Pane). A panel may define the layout for a stand-alone window or dialog, or it may define one of the subpanels that is contained in another UI resource.</dd> <dt class="dlterm"><strong>Menu</strong></dt> <dd>A popup window containing one or more selectable actions, each represented by a text string ("Cut", "Copy" and "Paste" are examples). You can define mnemonics and accelerator keys for each action, insert separators and cascading submenus, or define special checked or radio button menu items. A menu resource may be used as a stand-alone context menu, as a drop-down menu in a menu bar, or it may itself define the menu bar associated with a panel resource.</dd> <dt class="dlterm"><strong>Toolbar</strong></dt> <dd>A window consisting of a series of push buttons, each representing a possible user action. Each button may contain text, an icon or both. You can define the toolbar as floatable, which lets the user drag the toolbar out of a panel and into a stand-alone window.</dd> <dt class="dlterm"><strong>Property Sheet</strong></dt> <dd>A stand-alone window or dialog consisting of a tabbed panels and OK, Cancel, and Help buttons. Panel resources define the layout of each tabbed window.</dd> <dt class="dlterm"><strong>Wizard</strong></dt> <dd>A stand-alone window or dialog consisting of a series of panels that are displayed to the user in a predefined sequence, with Back, Next, Cancel, Finish, and Help buttons. The wizard window may also display a list of tasks to the left of the panels which track the user's progress through the wizard.</dd> <dt class="dlterm"><strong>Split Pane</strong></dt> <dd>A subpane consisting of two panels separated by a splitter bar. The panels may be arranged horizontally or vertically.</dd> <dt class="dlterm"><strong>Tabbed Pane</strong></dt> <dd>A subpane that forms a tabbed control. This tabbed control can be placed inside of another panel, split pane, or deck pane.</dd> <dt class="dlterm"><strong>Deck Pane</strong></dt> <dd>A subpane consisting of a collection of panels. Of these, only one panel can be displayed at a time. For example, at runtime the deck pane might change the panel which is displayed depending on a given user action.</dd> <dt class="dlterm"><strong>String Table</strong></dt> <dd>A collection of string resources and their associated resource identifiers.</dd> </dl> </div> <div class="section" id="pdmltool__genf"><a name="pdmltool__genf"><!-- --></a><h4 class="sectiontitle">Generated files</h4><p>The translatable strings for a panel are not stored in the PDML file itself, but in a separate Java™ resource bundle. The tools let you specify how the resource bundle is defined, either as a Java PROPERTIES file or as a ListResourceBundle subclass. A ListResourceBundle subclass is a compiled version of the translatable resources, which enhances the performance of your Java application. However, it will slow down the GUI Builder's saving process, because the ListResourceBundle will be compiled in each save operation. Therefore it's best to start with a PROPERTIES file (the default setting) until you're satisfied with the design of your user interface.</p> <p>You can use the tools to generate HTML skeletons for each panel in the PDML file. At runtime, the correct help topic is displayed when the user clicks on the panel's Help button or presses F1 while the focus is on one of the panel's controls. You must insert your help content at the appropriate points in the HTML, within the scope of the <!-- <tt>HELPDOC:SEGMENTBEGIN</tt> --> and <!-- <tt>HELPDOC:SEGMENTEND</tt> --> tags. For more specific help information see <a href="helpinfo.htm#helpinfo">Editing Help Documents generated by GUI builder.</a></p> <p>You can generate source code skeletons for the JavaBeans™ that will supply the data for a panel. Use the Properties window of the GUI Builder to fill in the DATACLASS and ATTRIBUTE properties for the controls which will contain data. The DATACLASS property identifies the class name of the bean, and the ATTRIBUTE property specifies the name of the gettor/settor methods that the bean class implements. Once you've added this information to the PDML file, you can use the GUI Builder to generate Java source code skeletons and compile them. At runtime, the appropriate gettor/settor methods will be called to fill in the data for the panel.</p> <div class="note"><span class="notetitle">Note:</span> The number and type of gettor/settor methods is dependent on the type of UI control with which the methods are associated. The method protocols for each control are documented in the class description for the <a href="javadoc/com/ibm/as400/ui/framework/java/DataBean.html"> DataBean class</a>.</div> <p>Finally, you can serialize the contents of your PDML file. Serialization produces a compact binary representation of all of the UI resources in the file. This greatly improves the performance of your user interface, because the PDML file must not be interpreted in order to display your panels.</p> <p>To summarize: If you have created a PDML file named <strong>MyPanels.pdml</strong>, the following files will also be produced based on the options you have selected on the tools:</p> <ul><li><strong>MyPanels.properties</strong> if you have defined the resource bundle as a PROPERTIES file</li> <li><strong>MyPanels.java</strong> and <strong>MyPanels.class</strong> if you have defined the resource bundle as a ListResourceBundle subclass</li> <li><strong><panel name>.html</strong> for each panel in the PDML file, if you have elected to generate online help skeletons</li> <li><strong><dataclass name>.java</strong> and <strong><dataclass name>.class</strong> for each unique bean class that you have specified on your DATACLASS properties, if you have elected to generate source code skeletons for your JavaBeans</li> <li><strong><resource name>.pdml.ser</strong> for each UI resource defined in the PDML file, if you've elected to serialize its contents.</li> </ul> <div class="note"><span class="notetitle">Note:</span> The conditional behavior functions (SELECTED/DESELECTED) will not work if the panel name is the same as the one in which the conditional behavior function is being attached. For instance, if PANEL1 in FILE1 has a conditional behavior reference attached to a field that references a field in PANEL1 in FILE2, the conditional behavior event will not work. To fix this, rename PANEL1 in FILE2 and then update the conditional behavior event in FILE1 to reflect this change.</div> </div> <div class="section" id="pdmltool__rc2xmlcall"><a name="pdmltool__rc2xmlcall"><!-- --></a><h4 class="sectiontitle">Running the Resource Script Converter</h4><p>To start the Resource Script Converter, invoke the Java interpreter as follows:</p> <pre> java com.ibm.as400.ui.tools.PDMLViewer</pre> <p>If you did not set your CLASSPATH environment variable to contain the Graphical Toolbox JAR files, then you will need to specify them on the command line using the <tt>classpath</tt> option. See <a href="pdmlbeg.htm#pdmlbeg">Setting Up the Graphical Toolbox</a>.</p> <p>You can also run the Resource Script Converter in batch mode using the following command:</p> <pre> java com.ibm.as400.ui.tools.RC2XML <em>file</em> [<em>options</em>]</pre> <p> Where <em><span>file</span></em> is the name of the resource script (RC file) to be processed. <strong>Options</strong></p> <dl><dt class="dlterm"><tt>-x <span>name</span></tt></dt> <dd>The name of the generated PDML file. Defaults to the name of the RC file to be processed. </dd> <dt class="dlterm"><tt>-p <span>name</span></tt></dt> <dd>The name of the generated PROPERTIES file. Defaults to the name of the PDML file. </dd> <dt class="dlterm"><tt>-r <span>name</span></tt></dt> <dd>The name of the generated ListResourceBundle subclass. Defaults to the name of the PDML file. </dd> <dt class="dlterm"><tt>-package <span>name</span></tt></dt> <dd>The name of the package to which the generated resources will be assigned. If not specified, no package statements will be generated. </dd> <dt class="dlterm"><tt>-l <span>locale</span></tt></dt> <dd>The locale in which to produce the generated resources. If a locale is specified, the appropriate 2-character ISO language and country or region codes are suffixed to the name of the generated resource bundle. </dd> <dt class="dlterm"><tt>-h</tt></dt> <dd>Generate HTML skeletons for online help. </dd> <dt class="dlterm"><tt>-d</tt></dt> <dd>Generate source code skeletons for JavaBeans. </dd> <dt class="dlterm"><tt>-s</tt></dt> <dd>Serialize all resources.</dd> </dl> </div> <div class="section"><h4 class="sectiontitle">Mapping Windows Resources to PDML</h4><p>All dialogs, menus, and string tables found in the RC file will be converted to the corresponding Graphical Toolbox resources in the generated PDML file. You can also define DATACLASS and ATTRIBUTE properties for Windows controls that will be propagated to the new PDML file by following a simple naming convention when you create the identifiers for your Windows resources. These properties will be used to generate source code skeletons for your JavaBeans when you run the conversion.</p> <p>The naming convention for Windows resource identifiers is:</p> <pre> IDCB_<class name>_<attribute></pre> <p> where <tt><class name></tt> is the fully-qualified name of the bean class that you want to designate as the DATACLASS property of the control, and <tt><attribute></tt> is the name of the bean property that you want to designate as the ATTRIBUTE property of the control. </p> <p>For example, a Windows text field with the resource ID <tt>IDCB_com_MyCompany_MyPackage_MyBean_SampleAttribute</tt> produces a DATACLASS property of <strong>com.MyCompany.MyPackage.MyBean</strong> and an ATTRIBUTE property of <strong>SampleAttribute</strong>. If you elect to generate JavaBeans when you run the conversion, the Java source file <strong>MyBean.java</strong> is produced, containing the package statement <strong>package com.MyCompany.MyPackage</strong>, and gettor and settor methods for the <strong>SampleAttribute</strong> property.</p> </div> </div> <div> <div class="familylinks"> <div class="parentlink"><strong>Parent topic:</strong> <a href="pdmlpg1.htm" title="The Graphical Toolbox, a set of UI tools, makes it easy to create custom user interface panels in Java.">Graphical Toolbox and PDML</a></div> </div> </div> </body> </html>