230 lines
14 KiB
HTML
230 lines
14 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="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>
|