Component and widget descriptions and settings

ZIETrans provides host components and widgets that are used to convert elements of a host screen to objects that can be displayed on a Web page. Some component and widget settings can be modified using the wizards and editors in the ZIETrans Toolkit. This chapter describes ZIETrans host components and widgets and the settings you can modify.

You can also create your own custom components and widgets by using the ZIETrans wizard. To launch the wizard, select ZIETrans > New > Component or ZIETrans > New > Widget from the ZIETrans menu. You can also launch the wizard by selecting File > New > ZIETrans Component or File > New > ZIETrans Widget.

For more information about using the wizard to create custom components and widgets, see the ZIETrans Web Application Programmer's Guide.

Component and widget settings

The components and widgets supplied by ZIETrans have default settings that you can modify, either for an entire project using the project editor, or for an individual transformation using the Insert Host Component wizard. Not all components and widgets have customizable settings.

Note:
The vertical bar (|) character, which is valid in many component and widget settings, implies OR. For example, the function key component has a setting called start delimiter. You can specify PF|F for the start delimiter value. This means ZIETrans will look for PFxxxx or Fxxxx on the host screen when looking for function keys.

Host component settings

The settings for a host component specify how that component is to be recognized on the host screen.

Some host components have more complicated settings. For example, several settings are used to recognize a function key or a selection list. These settings will be described under each host component.

ZIETrans provides the host components that are described in the following sections.

Command line

The Command line component is responsible for recognizing input fields which have a specific string of characters (the token) preceding the input field.

A recognized command line can be rendered by the following widgets:

The following figure shows how a Command line component might appear on your host screen:

Figure 7. Command line component example
Example of command line component
  1. Field caption (extracted)

The following settings can be configured for this component:

Token
The string of characters which must precede the input field.
Extract field caption
Select this check this box if you want available captions extracted for the selected input fields.
Trim spaces on caption
See Input field for more information.
Clip to selected region
See Input field for more information.

Dialog

The Dialog component is used to aid default rendering in recognizing modal (pop-up) frames on the host screen.

The concept of the Dialog component is to find the smallest area around the cursor that fits the description of the border in a rectangular form, assuming you are working with modal dialogs. A modal dialog retains the input focus while open. The user must close or otherwise satisfy the dialog before switching to another window.

To input data and complete a modal dialog, ZIETrans assumes that the cursor must be within the dialog's border. Starting from the cursor character's coordinates on the screen, ZIETrans searches to the left for a valid vertical border character as defined by the Vertical border characters setting. If a valid left vertical border character is located, ZIETrans returns to the same cursor coordinate and searches to the right for a valid vertical border character. If valid vertical border characters are found on the left and right of the cursor coordinates, ZIETrans measures the distance between them to ensure that a valid length exists.

ZIETrans also searches for the top and the bottom horizontal border characters, as defined by the Horizontal border characters setting, using the same process as the search for the vertical border characters.

Because a dialog window is a rectangle, ZIETrans uses the columns of the left and right borders and the rows of the top and bottom borders to determine whether the columns meet the vertical criteria and the rows meet the horizontal criteria of a modal dialog. If the outer rows and columns of the rectangle align, assuming the Minimum row count attribute has been satisfied, the Dialog component declares the window as a match and the recognized area is rendered.

To configure this component, go to the Project Settings of your ZIETrans project, select the Rendering tab and click Default Rendering.

Note:
The dialog component is only available in default rendering.

The dialog component is rendered using the Dialog widget.

The following figure shows how a Dialog component might appear on your host screen:

Figure 8. Dialog component example
Example of dialog component
  1. Horizontal border characters
  2. Vertical border characters
  3. Cursor must be positioned within dialog

The following settings can be configured for this component:

Horizontal border characters
Specifies the characters that make up the top and bottom borders of the dialog. By default, horizontal border characters are any protected reverse-video character, a period (.), a hyphen (-), or an underscore (_). Multiple characters are separated by a vertical bar (|) and are evaluated left to right.
Vertical border characters
Specifies the characters that make up the side borders of the dialog. By default, vertical border characters are any protected reverse-video character, a colon (:), or a vertical bar (|). Multiple characters are separated by a vertical bar (|) and are evaluated left to right.
Note:
Because the vertical bar (|) is used as the separator when specifying multiple characters, use &vl. to specify a vertical bar (|) as a vertical border character.

In addition to characters, field attributes for border characters can also be specified in the Horizontal border characters and Vertical border characters settings for this component. The following indicators are used when specifying the attributes of a field. Each field specification is enclosed within a set of curly braces ( {...} ). Each indicator is separated by a space. To indicate a negative (NOT), add an exclamation point (!) as a prefix to the indicator, with no space between them.

Example: {!p hi no} specifies an unprotected highlighted numeric only field.

Notes:
  1. When specifying field attributes for border characters, the specification is intended to be a modifier to the data directly preceding it, if any. For example:
    • {p rv} matches any protected, reverse video character.
    • :{p rv} matches only a single, protected, reverse video colon character.
    • {p rv}: matches any protected, reverse video character because the colon is not considered since it follows the field specification.
  2. The ordering of the indicators within the field attribute definition does not matter, because all indicators within a pair of curly braces must match for a border character to be recognized.
Minimum row count
The minimum number of rows the region must contain for it to be recognized as a dialog. The default is 3.
Minimum column count
The minimum number of columns the region must contain for it to be recognized as a dialog. The default is 3.
Cursor must be positioned within dialog
Specifies whether the cursor has to be within the region recognized as a dialog. If not selected, the region recognized as a dialog does not have to contain the cursor, and the user may get unexpected results if the dialogs are modal.
Allow interaction outside dialog
Specifies whether the area outside of the border should be disabled.
Note:
Text replacement for content within the borders of a dialog cannot be defined using the Dialog component settings. The Dialog component itself is only the border of the dialog window (the box around it). The content within the borders is rendered by other components of the default rendering. To perform text replacement for content within a dialog, you can specify text replacement for the default rendering item that renders the dialog content. For example, text replacement can be specified for the Field component. To get an accurate view of the combination of Dialog and other components, click Full page preview.

ENPTUI

Enhanced Non-Programmable Terminal User Interface (ENPTUI) enables an enhanced interface on non-programmable terminals (NPT) and programmable work stations (PWS) over the 5250 full screen menu-driven interface, taking advantage of 5250 display data stream extensions. ZIETrans supports a subset of the ENPTUI feature which includes graphical interface constructs. These constructs are represented by two ZIETrans components: Scrollbar and Selection Field.

You can add ENPTUI support during the creation of a new ZIETrans project from the ZIETrans toolbar by selecting ZIETrans > New > Project (or File > New > ZIETrans Project) to launch the Create a Project wizard. When you get to the Connection Settings panel and select either 5250 or 5250W for your connection type, select the Add graphical interface DDS keywords (ENPTUI) rendering support check box to enable the support.

Note:
This option is not available in projects that are optimized for mobile devices.

If the check box is selected, the default rendering set in the application.hap file will include standard ENPTUI rendering items and the component and widget registry (ComponentWidget.xml) will include the ENPTUI components and widgets for inclusion in either default rendering or custom transformations. Also, the default connection object created will have ENPTUI=true added to the advanced connection properties, which is required for ZIETrans to receive the ENPTUI data from the host.

If the check box remains cleared, the Create a Project wizard will edit the component and widget registry and the application.hap file and remove ENPTUI rendering items, components, and widgets from the files laid down by the wizard in the new project.

Note:
This is the only chance to have ZIETrans add ENPTUI components and widgets to the project. If you want to add ENPTUI to your project after creation, all edits to ComponentWidget.xml, application.hap, and main.hco must be done manually (by comparing to find the changes required). This is not recommended. Creating a new project is the recommended method to add ENPTUI support.

Following are the ENPTUI components and their settings. These components do not appear in the ZIETrans Components section in the Palette view of the Rich Page Editor. If the ENPTUI support has been enabled as described above, these components are accessible from the Rational® SDP menu bar by clicking ZIETrans Tools > Insert Host Component.

Scrollbar field (ENPTUI)

The Scrollbar field (ENPTUI) component is responsible for recognizing ENPTUI scrollbar fields from the 5250 data stream. This component will recognize any selected host screen region and this component can be rendered using the Scrollbar (ENPTUI) widget. There are no customizable settings for this component.

Selection field (ENPTUI)

A recognized ENPTUI selection field can be rendered by the following widgets:

The following settings can be configured for this component:

Selection Field Type Recognition
The selection field types that you want to match for any given instance of the component
Push Buttons
Select this box if you want to recognize push button ENPTUI selection fields
Single Choice Fields
Select this box if you want to recognize single choice ENPTUI selection field
Multiple Choice Fields
Select this box if you want to recognize multiple choice ENPTUI selection fields
Menu Bars
Select this box if you want to recognize menu bar ENPTUI selection fields
Selection Field Attribute Recognition
The selection field attribute you want to match for any given instance of the component
Recognize fields having auto-enter
Select from the drop down list whether you want to recognize ENPTUI selection fields with auto-enter enabled, disabled or both

The following figure shows how the ENPTUI components might appear on your host screen:

Figure 9. ENPTUI components example
Example of ENPTUI components
  1. Selection field component
  2. Scrollbar field component

Field

The Field component is responsible for recognizing protected text and input fields. This component will recognize any selected host screen region and this component can be rendered using the Field widget.

Note:
The Field component includes only the region you specify. If the selected region cuts through an actual host screen field, only the part inside the selection will be rendered.

The following figure shows how a field component might appear on your host screen:

Figure 10. Field component example
Example of field component

The following setting can be configured for this component:

Support character level attributes for protected fields

This setting allows you to accurately render the color and extended attributes of all characters in a protected field, instead of rendering the entire field with the color and attributes of the first character in the field.

If not selected, which is the default, the first character of the field will determine the attributes for every character in the field even if an attribute, such as color, changes in the middle of the field.

If selected, different color and extended attribute (for example reverse video) information is supported within a field by rendering Field component elements as segments of sequential, similar characters. For example, a field that is ten characters in length, where the first five characters are green and the last five characters are red, will be represented by two Field component elements.

Note:
This setting only applies to protected fields, not input fields.

Function key

The Function key component is responsible for recognizing function (PF) keys. This component is used to transform static text on the host screen representing a function key into a button or link which your user can click. Because function keys appear differently on different host systems, ZIETrans gives you flexibility in configuring the different parts. For example, a host screen might contain the following function keys:

F3: Exit F4: Back F5: Fwd

A function key can be rendered by the following widgets:

The following figure shows how a Function key component might appear on your host screen:

Figure 11. Function key component example
Example of function key component
  1. String before leading token (a space)
  2. Start delimiter (#, signifying a number)
  3. Delimiter (an equal sign (=))
  4. String after description (a space)

The following settings can be configured for this component:

String before the leading token
Optional. The string that must precede the start delimiter. You can specify more than one value, separated by the vertical bar (|) character. For a function key candidate to be recognized, it must be preceded by this value.
Start delimiter
Required. The string that marks the beginning of the potential function key. You can specify more than one value, separated by the vertical bar (|) character. Any of the values will be recognized as beginning a function key. This value can contains a "#" (pound sign) - which will be evaluated as "a number" during recognition.
Delimiter
Optional. The string that separates the start delimiter from the description. You can specify more than one value, separated by the vertical bar (|) character.
String after description
Optional. The string that immediately follows the description. The default is " " (two spaces) to allow for detection of multiple word descriptions for function keys.

When using Function key component settings, consider the following example. Suppose a host screen has the following function key descriptions on it:

F1=Help F2=Open F3=Exit

where there is only one space between each description. ZIETrans will recognize this as three individual function keys even though the default value for the String after description setting is " " (two spaces). This is because the Function key component searches for a Start delimiter, a Delimiter, and then the String after description. But, if it finds a new Start delimiter before finding the String after description, then the start of a new function key description is assumed.

Notes:
  1. The ZIETrans Function key component only recognizes and renders F# keys, PA keys, Enter, and Clear. To disable recognition of Enter and Clear, remove the last # from the start delimiter definition.
  2. The ZIETrans Function key component does not recognize other host function keys such as Help, PageUp (also called rollup), PageDown (roll down), System Request, Attention, and Print. These other functions are available on the host keypad. You can also add these host keys to a ZIETrans transformation using the ZIETrans Tools menu item.
  3. If you use the Drop-down (selection) widget to render the Function key component in default rendering, multiple drop-down widgets may be rendered in the preview and during runtime. To correct this during runtime, in the source for the application.hap file, locate the <renderingItem ...> tag for the FunctionKeyComponent with the SLDropdownWidget. Then change the value for the setting, keepOutputTogether, from false to true. The preview will continue to display multiple drop-down widgets.
  4. If you use the function key components in default rendering and want them to appear on different lines in your transformation, you must use the <BR> tag or map them to a table to force the move. This can be done by viewing and editing your transformation under the Source tab.

HTML DDS keyword  Web-only 

Using the HTML DDS keyword in IBM® i display files allows the sending of HTML fragments along with the 5250 data stream. This feature is not intended for display with standard emulation programs; it is only sent to 5250 Workstation Gateway devices, and host access products such as ZIETrans, that have been enhanced to show this HTML data in a browser

HTML DDS is available as a component when the host type is specified as 5250. The use of this component is not part of the default rendering and must be added to either the default rendering or custom transformations, if needed.

The HTML DDS Keyword component is responsible for recognizing this HTML data if it is present in the 5250 data stream

This component can be rendered using the Label widget.

The following settings can be configured for this component:

Ignore DDS data using filter
Click this button if you want to recognize the DDS data as it was sent in the 5250 data stream, or as it was sent except for those tags which are specified by these "ignore" filters.
Ignore these tags
Enter any tags (without the < and > characters) that you want to ignore. The data between the tag and its end tag is kept. For example, specify a <b>b</b> if you wanted to keep some data surrounded by the bold tags, but not the tag itself.
Ignore all DDS data in these tags
Enter any tags (without the < and > characters) for which you want to ignore the data between the tag and its end tag.
Accept DDS data using filter
Click this button if you want to recognize, from the HTML DDS data in the 5250 data stream, only the HTML tags which pass these "accept" filters. HTML DDS data which doesn't pass these filters is ignored.
Accept these tags
Enter any tags (without the < and > characters) that you want to keep. The data between the tag and its end tag is ignored
Accept all DDS data in these tags
Enter any tags (without the < and > characters) for which you want to keep the data between the tag and its end tag.

You can include a keyword, HTML, which will allow you to embed raw HTML data into the data stream for interpretation only by browser-like recipients. This support in ZIETrans will enable data that is sent from a host application in the HTML DDS keyword to be used in either default rendering or custom transformation.

To enable HTML DDS keyword support for a connection definition, take the following steps:

  1. Open the Connection Editor by clicking your main ZIETrans connection in the ZIETrans Projects view.
  2. Select the Advanced tab and click the Add button to configure an advanced connection setting.
  3. Select HTMLDDS for Name from the drop-down list and type in true in the Value field.
  4. Click OK.

Input field

The Input field component is for recognizing input fields (non-protected fields). This component, besides recognizing input fields, can also extract the field's accompanying caption. To find the field's caption, this component looks for protected text directly preceding the input field (on the same row) first. If the algorithm cannot find a caption, it will look directly above the field for protected text.

A recognized input field can be rendered by the following widgets:

The following figure shows how an input field component might appear on your host screen:

Figure 12. Input field component example
Example of input field component
  1. Field caption (extracted from component)

The following settings can be configured for this component:

Extract field caption
If selected, a caption for the recognized input field is extracted (see the description above for more information about this algorithm). This extracted caption can be used by the widget.
Restrict caption to selected region
If selected, the caption is limited to the text within the selected part of the screen.
Strip end of caption
If selected, the end of the caption is stripped after (and including) the first occurrence of any value specified in the Strip after setting. This setting is useful for cleaning up extracted captions.
Strip after
Required. The string (or set of strings) that is used to strip the extracted caption. For example, if the extracted caption is Command ==> and the value for this setting is =, everything after (and including) the first = is stripped off.
Replace with
Optional. The string to replace the stripped off portion (if applicable) of the caption with.
Trim spaces on caption
If selected, white space (for example spaces and tabs) is removed from both ends of the extracted (and stripped) caption.
Clip input field to selected region
If selected, only the part of the input field inside of the selected region is recognized and rendered. If cleared, if any part of an input field is inside the selected region, the entire input field is recognized and rendered. This setting is useful if you need to break a large host screen input field into multiple, smaller Web page input fields.

Input field with hints

The Input field with hints component is for recognizing input fields (non-protected fields) which have accompanying hints (text immediately following the input field on the same row). This component is functionally similar to the Input field component, except that hints must be found next to the candidate input. For example, suppose your host screen had the following input field:

Product code: [ ] (Valid codes: A, B, C, D)

In this example, the start of the hints is Valid codes:, the end of the hints is a close parenthesis [)], the separator is a comma (,), and the leading token type is None.

A recognized input field can be rendered by the following widgets:

The input field also uses valid value hints. By default, the input field does not recognize hints, therefore you will have to modify the component settings in order to pass these along to the rendering widget.

The following figure shows how an input field with hints component might appear on your host screen:

Figure 13. Input field with hints component example
Example of input field with hints component
  1. Delimiter: position of delimiter, but leading token type was set to None.
  2. Start of hints: open parenthesis (
  3. Separator: or
  4. End of hints: close parenthesis )

Leading token type is not marked. In this example, the leading token type is None. No letter or digit precedes the hints.

The following settings can be configured for this component:

Extract field caption
If selected, a caption for the recognized input field is extracted (see the description above for more information about this algorithm). This extracted caption can be used by the widget.
Restrict caption to selected region
If selected, the caption is limited to the text within the selected part of the screen.
Strip end of caption
If selected, the end of the caption is stripped after (and including) the first occurrence of any value specified in the Strip after setting. This setting is useful for cleaning up extracted captions.
Strip after
Required. The string (or set of strings) that is used to strip the extracted caption. For example, if the extracted caption is Command ==> and the value for this setting is =, everything after (and including) the first = is stripped off.
Replace with
Optional. The string with which to replace the stripped off portion (if applicable) of the caption.
Trim spaces on caption
If selected, white space (for example spaces and tabs) is removed from both ends of the extracted (and stripped) caption.
Clip input field to selected region
If selected, only the part of the input field inside of the selected region is recognized and rendered. If cleared, if any part of an input field is inside the selected region, the entire input field is recognized and rendered. This setting is useful if you need to break a large host screen input field into multiple, smaller Web page input fields.
Start of hints
Optional. The string of characters which identifies where the set of hints starts. Multiple values can be specified for this setting; separate with the vertical bar (|) character.
End of hints
Optional. The string of characters which identifies where the set of hint ends. Multiple values can be specified for this setting; separate with the vertical bar (|) character.
Separator
Required. The string of characters which separates each hint in the hint set. Multiple values can be specified for this setting; separate with the vertical bar (|) character.
Leading token type
Specifies what each hint is. For example, if the hint set was A=Apple,O=Orange,G=Grape, you would set this value to Letter (or Letter or Digit) because A, O, and G are all letters. You would set the delimiter to =.
Maximum length of leading token
Specifies the maximum length of the leading token. The default is 4.
Delimiter
Required. The string of characters which separates the leading token from the hint description. This setting only applies when the leading token type is not None.
Minimum required hints
The minimum number of hints that must be found for this input field to be recognized by this component. This setting is useful for avoiding errant recognition.

Item selection

The item selection component is responsible for recognizing screens with list of items, where the interaction is to select a character next to the item.

The item selection component can be rendered by the following widgets:

The following figure shows how an item selection component might appear on your host screen:

Figure 14. Item selection component example
Example of item selection component
  1. Input field
  2. Caption

The following settings can be configured for this component:

Extract field caption
Select this box if you want available captions extracted for the selected input fields.
Strip end of caption
Enabled only if Extract field caption is selected. Select this box to delete the ending text of a caption. Specify where to begin the deletion in Strip after, and any characters with which to replace the deleted caption text in Replace with.
Trim spaces on caption
Enabled only if Extract field caption is selected. Select this box to remove any extra spaces on either end of the captions.
Captions are after input fields
Enabled only if Extract field caption is selected. Select this box if the captions to be extracted are on the right of the input fields. Clear this box if captions are on the left of the input fields.
Input fields must have a caption
Select this box of you only want input fields with captions to be recognized on the host screen.
Clip input field to selected region
Select this box if you want to render only the selected part of an input field. Clear this box if you want to render the entire field if any part of the field is selected.

Light pen (attention)

The light pen (attention) component is responsible for recognizing a light pen (also known as selector pen) attention field on 3270 host screens.

Note:
This component does not appear in the ZIETrans Components section in the Palette view of the Rich Page Editor. If light pen support was enabled by selecting the Add light pen rendering support check box during the initial creation of a 3270 or 3270E project, this component is accessible from the Rational SDP menu bar by clicking ZIETrans Tools > Insert Host Component.

A recognized light pen attention field can be rendered by the following widgets:

Depending on the designator character (the first character of the field), clicking the rendering widget (button, link, or radio button) causes either an [enter] or a [cursel] attention identifer (AID) to be sent to the host. If the designator is an ampersand character (&), an [enter] AID is sent. If the designator is a blank character, a [cursel] AID is sent.

The following figure shows how a light pen (attention) component might appear on your host screen:

Figure 15. Light pen (attention) component example
Example of light pen (attention) component
  1. Designator character (the first character of the field)

The following settings can be configured for this component:

Consume remainder of field
Specifies whether the entire field or just the first character of the field is consumed and rendered by the widget. Select this check box to specify that the entire field is consumed and rendered. For example, the contents of the field are rendered as the caption of the rendering widget (button, link, or radio button). Clear this check box to specify that only the first character will be rendered by the widget. This is useful to preserve colors or extended attributes in the remainder of the field. When in Default Rendering, clearing this check box will cause the remainder of the field (everything except for the first character of the field) to be rendered by some other widget (in most cases by the Field widget). The default is selected.

Light pen (selection)

The light pen (selection) component is responsible for recognizing a light pen (also known as selector pen) selection field on 3270 host screens.

Note:
This component does not appear in the ZIETrans Components section in the Palette view of the Rich Page Editor. If light pen support was enabled by selecting the Add light pen rendering support check box during the initial creation of a 3270 or 3270E project, this component is accessible from the Rational SDP menu bar by clicking ZIETrans Tools > Insert Host Component.

A recognized light pen selection field can be rendered by the Check box widget.

If the designator character (the first character of the field) is a question mark (?), the rendered check box is not selected. If the designator character is a greater-than sign (>), the rendered check box is selected.

The following figure shows how a light pen (selection) component might appear on your host screen:

Figure 16. Light pen (selection) component example
Example of light pen (selection) component
  1. Designator character (the first character of the field)

The following settings can be configured for this component:

Consume remainder of field
Specifies whether the entire field or just the first character of the field is consumed and rendered by the widget. Select this check box to specify that the entire field is consumed and rendered. For example, the contents of the field are rendered as the caption of the rendering widget (check box). Clear this check box to specify that only the first character will be rendered by the widget. This is useful to preserve colors or extended attributes in the remainder of the field. When in Default Rendering, clearing this check box will cause the remainder of the field (everything except for the first character of the field) to be rendered by some other widget (in most cases by the Field widget). The default is selected.

Selection list

The Selection List component is responsible for recognizing selection lists. Selection lists are like menus, but they are presented as a list of options, each of which is preceded by a leading token and a delimiter, such as in the following example:

Option 1. Prepare form
Option 2. Work with forms you submitted
Option 3. Work with forms requiring action

In this example, Option is the string before the leading token, 1, 2, and 3 are the leading tokens, and the delimiter is a period followed by a space (. ).

Once a list item has been selected (either clicked or selected depending on the widget), its leading token is placed in the targeted host input field.

A recognized selection list can be rendered by the following widgets:

The following figure shows how a selection list component might appear on your host screen:

Figure 17. Selection list component example
Example of selection list component
  1. String before the leading token (a space)
  2. Leading token type (digit)
  3. Delimiter (a period (.))
  4. End delimiter (a space)
  5. List options (or items)

The following settings can be configured for this component:

String before the leading token
Optional. The string which precedes the leading token of each list item.
Leading token type
Specifies whether each list item starts with letters, digits, or both letters and digits.
Maximum length of leading token
Specifies the maximum length of the leading token. The default is 4.
Delimiter
Required. The string of characters between the leading token and the description. You can specify more than one value, separated by the vertical bar (|) character.
End delimiter
Optional. The string of characters which must follow each list item.
Minimum required options
The minimum number of list items that must be found in order for the selected region to be recognized as a selection list.
Group Items Individually
Select this box if you want to group items individually.
Selection target field
Specifies which input field receives the selection. Options: First on screen, Last on screen, Previous field, Next field, Cursor position, or User defined.
Row
Specifies the row of the input field which should receive the selection.
Note:
This setting only applies if User defined is selected as the selection target.
Column
Specifies the column of the input field which should receive the selection.
Note:
This setting only applies if User defined is selected as the selection target.
Auto submit on select
If selected, an AID key is automatically sent to the host even if the input field is blank. If cleared, an AID key is not automatically sent.
Action key
Optional. Specifies the host aid key that should be pressed after the target input field has been updated with the user's selection. The default value is [enter] meaning that the enter key will be pressed once the user makes a selection.
Sort list options
If selected, list items are sorted according to either their leading token or description (see below for more information about other settings).
Sort by
Specifies whether to sort the set of list options by their leading token or description.
Sort order
Specifies whether to sort the set of list options in ascending or descending order.
Note:
The locale-sensitive sorting methods, built into Java™, are used to perform this operation.
Placeholder options
Specifies whether to embed placeholder list items when gaps (such as empty space) exist between list items. Options: Actual, None, or Single.

Subfile

The Subfile component is responsible for recognizing 5250 subfiles.

A recognized subfile can be rendered by the following widgets:

The following figure shows how a subfile component might appear on your host screen:

Figure 18. Subfile component example
Example of subfile component
  1. Action region
  2. Header region
  3. Data region
  4. Marker region
  5. Action settings

  6. String before the leading token (a space)
  7. Leading token type (digit)
  8. Delimiter (an equal sign (=))
  9. Header setting

  10. Beginning text for header (Opt)
  11. Data setting

  12. Column delimiter (a space)
  13. Marker setting

  14. Marker text (More...)

To launch Subfile Settings, follow these steps:

  1. Go to the ZIETrans Projects view and click on your Project Settings.
  2. Select the Rendering tab.
  3. In the Rendering tab, expand the Components tree and select the Subfile component.
  4. Click on the Settings button to the right to display the Subfile Settings window.

Figure 19. Subfile settings example
Subfile settings dialog

The Subfile component settings consist of four tabs, Action, Header, Data, and Marker. Each tab is used to define the criteria for recognizing a particular element of the subfile. Icons on each tab indicate the following states:

When all four tabs display recognized indicators, click OK. You can see the recognized result in the widget preview.

Each recognition tab is described below.

Action

Select the screen you want to use from the drop-down list. You can also specify the region of the Selection area on the host screen by either using your mouse, or by entering the coordinates of the region in the following boxes:

Start row
The first row to look for the subfile action. The default is 3.
End row
The last row to look for the subfile action. The default is 12.
Start column
The first column to look for the subfile action. The default is 1.
End column
The last column to look for the subfile action. The default is 80.

You can highlight certain fields on your host screen by selecting the different options beside Highlight fields. To see where input fields are defined on the screen, select Input. To see what fields are protected, select Protected. To highlight hidden fields, select Hidden. To see matching patterns, select Matches. To modify the highlighting colors of the input, protected, hidden, or pattern matching fields, see Using ZIETrans preferences.

Action Recognition
Additional action recognition criteria can be configured by selecting the following individual settings.
String before leading token
String. This value specifies the string before the leading token. The default value is a space.
Leading token type
String. This value is the type of token this host application uses for the host command. In the example where 1=Edit, the 1 token is the host command, and its type is a digit. In the example where A=Edit, the A token is the host command, and its type is a letter. The allowable values are Digit, Letter, Show both. The default is Show both.
Maximum length of leading token
The maximum length of the leading token. The default is 4.
Delimiter
String. This value is the token used in the subfile action to delimit the host command from the description of the host command. In the example where 1=Edit, 1 is the host command, the = token is the delimiter, and Edit is the description of the host command. The allowable value is one or more strings concatenated by the vertical bar (|). The default is =. Example: =| = |-| - |:.
End delimiter
String. This is used to recognize the end of a subfile action item description. Separate multiple character with a vertical bar (|).
Must be specified color
This box is used in conjunction with previous settings to designate that the subfile action's host command must be of a specific type and the subfile action must be a specific color. For example, the subfile action must be a digit, and must be blue.
Color
See description for the previous setting.
High intensity
String. This value specifies whether the subfile action uses the high intensity field attribute. The allowable values are Yes, No, Don't care. The default is Don't care.
Actions not required
Select this box if you want the subfile to be recognized even if it does not have any actions. The subfile header, data, and marker are still recognized and rendered.
Consume non-empty rows immediately above the actions
Select this box if you want rows on the screen that contain text immediately above and adjacent to the actions, which meet the recognition criteria (color and/or intensity), consumed but not displayed by the subfile widget.

Specify the region of the Selection area on the host screen by either using your mouse, or by entering the coordinates of the region in the following boxes:

Start row
The first row to look for the subfile header. The default is 3.
End row
The last row to look for the subfile header. The default is 16.
Start column
The first column to look for the subfile header. The default is 1.
End column
The last column to look for the subfile header. The default is 80.

You can highlight certain fields on your host screen by selecting the different options beside Highlight fields. To see where input fields are defined on the screen, select Input. To see what fields are protected, select Protected. To highlight hidden fields, select Hidden. To see matching patterns, select Matches. To modify the highlighting colors of the input, protected, hidden, or pattern matching fields, see Using ZIETrans preferences.

Header Recognition
Additional header recognition criteria can be configured by selecting the following individual settings.
Recognize by text
Boolean. This value specifies whether the subfile header should be recognized based on strings. The allowable values are true or false. The default is true.
Begins with
String. Strings that can be used to identify subfile headers; use \n to define multi-row headers. The allowable values should be concatenated with the vertical bar (|). More specific headers should be listed first. For example, if Option, Opt , and Opt are all possible headers, they should be ordered to ensure that the most specific header is listed first, Option|Opt |Opt The default is true. Example: Description\nof Record|Option|Opt |?.
Must be specified color
Boolean. This value is used in conjunction with the Text setting to designate that the subfile headers must have a specific string and must be a specific color. For example, the subfile header must contain the word Opt. and it must be blue. The allowable values are true or false. The default is false.
Color
Specifies the color of the subfile header.
High intensity
Select this box to specify whether the Subfile Header can be recognized by text at the top of a table of data, which uses the high intensity field attribute.
Specified color
Select this box to specify if the subfile header can be recognized by text of a specific color at the top of a table of data.
Color
Specifies the color of the subfile header.

Data

Specify the region of the Selection area on the host screen by either using your mouse, or by entering the coordinates of the region in the following boxes:

Start row
The first row to look for the subfile data. The default is 4.
End row
The last row to look for the subfile data. The default is 22.
Start column
The first column to look for the subfile data. The default is 1.
End column
The last column to look for the subfile data. The default is 80.

You can highlight certain fields on your host screen by selecting the different options beside Highlight fields. To see where input fields are defined on the screen, select Input. To see what fields are protected, select Protected. To highlight hidden fields, select Hidden. To see matching patterns, select Matches. To modify the highlighting colors of the input, protected, hidden, or pattern matching fields, see Using ZIETrans preferences.

Data Recognition
Additional data recognition criteria can be configured by selecting the following individual settings.
Recognition Option:
This setting specifies how the subfile data region is recognized.
Field  Web-only 
Recognize subfile data row by row.
Table (field)  Web-only 
Recognize subfile data by field information.
Table (visual)
Recognize subfile data that appears as a table with visible vertical column delimiters.
Table
Recognize subfile data that appears as a table using user defined column breaks.
Column delimiter:
Enabled only if the Recognition Option: is set to Table (visual). The string of characters which must exist in the same columns of every row in the selected region for the host screen column to be marked as a table column. If consecutive columns are each marked as a delimiting column, only the last column is actually rendered as the delimiting column of the generated table. The default is a space character.
Column breaks:
Enabled only if the Recognition Option: is set to Table. A comma-separated list of column numbers where column breaks are wanted. For example, specifying 1,7,22 would indicate that new columns should begin in columns 1, 7 and 22. When the Restore Defaults button is clicked, the Column breaks field is filled with values based on the Table (visual) default recognition values.
Notes:
  1. Column breaks can also be added or removed by using the mouse to select a column in the host screen view, right-clicking, and selecting either Add or Remove. Column breaks are indicated by a dotted vertical line on the host screen view.
  2. Column breaks cannot split an input field.
  3. For information about using this setting with DBCS support see Subfile.
Override action input field start column
If selected, you can override the starting column of the action input field to prevent other input fields from being rendered incorrectly as drop-down lists.
Column Start
Start column of the action input field. The default value is 1.
Override action input field length
If selected, you can override the length of the action input field to prevent other input fields from being rendered incorrectly as drop-down lists.
Field Length
Field length of the action input field. The default value is 1.
Data not required
Select this box if you want the subfile to be recognized even if it does not have any data. If any subfile actions are detected, they are still rendered as drop-down lists.
Include empty rows
Select this box if you want rows that are empty in a table on the host screen to be included when the table is transformed. Clear the box if you want empty rows to be discarded.

Marker

Specify the region of the Selection area on the host screen by either using your mouse, or by entering the coordinates of the region in the following boxes:

Start row:
The first row to look for the subfile marker. The default is 4.
End row:
The last row to look for the subfile marker. The default is 22.
Start column
The first column to look for the subfile marker. The default is 1.
End column
The last column to look for the subfile marker. The default is 80.

You can highlight certain fields on your host screen by selecting the different options beside Highlight fields. To see where input fields are defined on the screen, select Input. To see what fields are protected, select Protected. To highlight hidden fields, select Hidden. To see matching patterns, select Matches. To modify the highlighting colors of the input, protected, hidden, or pattern matching fields, see Using ZIETrans preferences.

Marker Recognition
Additional marker recognition criteria can be configured by selecting the following individual settings.
Recognize by text
If selected, the end marker of the subfile can be recognized by the specified text string.
Text
String. This can be used to identify the subfile end marker. Multiple values are allowed. Example: More...|Bottom|End|+. The default value is More...|Bottom|+.
High intensity
If selected, the end marker of the subfile can be recognized by a high intensity field below the data table.
No visual text is required
If selected, the high intensity field can be an empty string.
Empty row
If selected, the end marker of the subfile can be recognized by an empty row within the specified region below the data table.

Table

The Table component is responsible for recognizing tables. It can be used instead of the Table (visual) component if you must indicate specific column numbers to use for column breaks in order to achieve the result you want.

Care should be taken when using the Table component in a default rendering set because the Table component will recognize almost every screen in the selected region, and no rendering items lower in the list will be recognized.

A recognized table can be rendered by the following widgets:

The following figure shows how a table component might appear on your host screen:

Figure 20. Table component example
Example of table component
  1. Title rows
  2. Column breaks

The following settings can be configured for this component:

Column breaks:
A comma-separated list of column numbers where column breaks are wanted. For example, specifying 1,7,22 would indicate that new columns should begin in columns 1, 7 and 22. When the Restore Defaults button is clicked, the Column breaks field is filled with values based on the Visual table default recognition values.
Notes:
  1. Column breaks can also be added or removed by using the mouse to select a column in the host screen view, right-clicking, and selecting either Add column or Remove column. Left-clicking on a column can also add or remove a column break. Column breaks are indicated by a dotted vertical line on the host screen view.
  2. Column breaks cannot split an input field.
  3. For information about using this setting with DBCS support see Table.
Include empty rows
If selected, empty rows (rows without any visible text or input fields) will be included in the rendered table or graph.
Table rows to exclude
The comma-separated or ranged set of rows to exclude from the recognized table. This setting is useful for hiding specific rows of data on a table or graph. The rows represented by this value are based on the recognized table, not on the actual host screen. Example values: 1,2,3...., 1,2-4, 3-5.
Table columns to exclude
The comma-separated or ranged set of logical columns to exclude from the recognized table. The columns represented by this value are based on the recognized table, not on the actual host screen. Example values: 1,2,3...., 1,2-4, 3-5.
Number of title rows
Specifies the number of rows, starting at the top of the region, that should be rendered as the header. If the value is greater than 1, for each column, the header lines will be rendered as a string in a single row.

Table (field)

The Table (field) component is responsible for recognizing logical columns of vertically aligned fields. For a region to be recognized as a table (field), the left and right boundaries of each field contained within the selected region (including partial fields) must be the same as the left and right boundaries of the field directly above (if the field in question is not on the first row) and directly below (unless the field in question is not on the last row).

A recognized table (field) can be rendered by the following widgets:

The following figure shows how a table (field) component might appear on your host screen:

Figure 21. Table (field) component example
Example of table (field) component
  1. Rows
  2. Columns

The following settings can be configured for this component:

Include empty rows
If selected, empty rows (rows without any visible text or input fields) will be included in the rendered table or graph.
Rows to exclude
The comma-separated or ranged set of rows to exclude from the recognized table. This setting is useful for hiding specific rows of data on a table or graph. The rows represented by this value are based on the recognized table, not on the actual host screen. Example values: 1,2,3..., 1,2-4, 3-5.
Columns to exclude
The comma-separated or ranged set of logical columns to exclude from the recognized table. The columns represented by this value are based on the recognized table, not on the actual host screen. Example values: 1,2,3..., 1,2-4, 3-5.
Minimum row count
The minimum number of rows the specified region must contain for the region to be recognized as a table.
Note:
The number of recognized rows is evaluated before the specified rows are excluded (see Rows to exclude).
Minimum column count
The minimum number of logical columns (not host screen columns) the specified region must contain for the region to be recognized as a table.
Note:
The number of recognized columns is evaluated before the specified columns are excluded (see Columns to exclude).
Extract column header text from row above table
Select this box if you want the text from the line above the table to be used as the column headers of the table. The column headers must be in protected fields.
Note:
Unless you have access to the host screen map which created the table, use the Table (visual) component to recognize a tabular region. If this is not possible, turn on the Input, Protected, and Hidden options on the first page of the Insert Host Component wizard to help determine where fields break within the selected host screen region.

Table (visual)

The Table (visual) component is responsible for recognizing tables. The Table (visual) component is different from the Table (field) component in that it does not require that the underlying host screen fields line up vertically. It looks for columns in the selected region which contain the column delimiter for each row in the selection. Rule of thumb: If a region has the appearance of a table, the Table (visual) component should be able to recognize it.

A recognized table can be rendered by the following widgets:

The following figure shows how a Table (visual) component might appear on your host screen:

Figure 22. Table (visual) component example
Example of table (visual) component
  1. Rows (minimum row count = 1)
  2. Columns (minimum column count = 1)
  3. Column delimiter (a space)

The following settings can be configured for this component:

Column delimiter
Required. The string of characters which must exist in every row of the selected region for the host screen column to be marked as a table column. If consecutive columns are each marked as a delimiting column, only the last column is actually rendered as the delimiting column of the generated table.
Include empty rows
If selected, empty rows (rows without any visible text or input fields) will be included in the rendered table or graph.
Rows to exclude
The comma-separated or ranged set of rows to exclude from the recognized table. This setting is useful for hiding specific rows of data on a table or graph. The rows represented by this value are based on the recognized table, not on the actual host screen. Example values: 1,2,3...., 1,2-4, 3-5.
Columns to exclude
The comma-separated or ranged set of logical columns to exclude from the recognized table. The columns represented by this value are based on the recognized table, not on the actual host screen. Example values: 1,2,3...., 1,2-4, 3-5.
Minimum row count
The minimum number of rows the specified region must contain for the region to be recognized as a table.
Note:
The number of recognized rows is evaluated before the specified rows are excluded (see Rows to exclude).
Minimum column count
The minimum number of logical columns (not host screen columns) the specified region must contain for the region to be recognized as a table.
Note:
The number of recognized columns is evaluated before the specified columns are excluded (see Columns to exclude).
Extract column header text from row above table
Select this box if you want the text from the line above the table to be used as the column headers of the table. The column headers must be in protected fields.

Text

The Text component is responsible for recognizing visible text, including text within an input field.

This component can be rendered using the Label widget.

The following figure shows how a text component might appear on your host screen:

Figure 23. Text component example
Example of text component
  1. Line break (preserved)

The following settings can be configured for this component:

Preserve line breaks
If selected, multiple selected rows will be rendered as multiple rows on the resulting Web page. If cleared, the text from each row will be concatenated together into a single string.

URL

The URL component is responsible for recognizing links. It searches only within protected, non-hidden fields. This component can be rendered using the Link widget.

The following figure shows how a URL component might appear on your host screen:

Figure 24. URL component example
Example of URL component
  1. Start indicator (http://)

The following settings can be configured for this component:

Start Indicators
Specify one or more character strings to recognize the beginning of an URL on the host screen

Widget settings

When you customize a host component, you specify how it will be recognized. When you customize a widget, you specify how the widget will appear on the Web page.

You can customize the settings of the widgets described in the following sections.

When you set or modify widget settings in any widget settings dialog, the widget preview area is automatically updated to show you the effect of the changes you make, before you click OK to commit those changes.

__________________________________________________________________________

Button

The Button widget is responsible for rendering HTML buttons. Clicking one of these buttons will generally cause a host-specific action to occur (for example, an aid key will be sent to the host or an input field will be updated).

This widget renders data supplied by the following components:

The following figure shows how a button widget appears on a transformation, using the data from the Function key component example as input:

Figure 25. Button widget example
Example of button widget
  1. Rows
  2. Columns (3 per row)
  3. Caption type (show description)

The following settings can be configured for this widget:

Caption type
Specifies how the caption for each button is determined. The value of the leading token and the description are derived from the component; you can select what appears on the button caption. For example, if the host screen had a menu item that read 4. Mail, you can have the caption display 4, or Mail, or 4. Mail.
Trim spaces on caption
If selected, white space (extra space) is trimmed from both ends of the caption.
Layout
Specifies how the buttons will be arranged on the HTML page. Options: Table, Separated.
Notes:
  1. This setting is not applicable in default rendering.
  2. The widget preview does not always match the full page preview. This happens because the widget preview simple renders the component's output. It does not try to preserve the alignment of the screen when it renders, as is done in the full page preview.
Number of columns per row
The number of buttons to display horizontally before wrapping to the next line. Tweaking this setting can cause your buttons to appear vertically (if this value is 1) or horizontally (if this value is equal to or greater than the number of buttons to be rendered).
Separator
Specifies what separator you want to use to separate the rendered buttons on the HTML page. You can select from the drop-down list or type in your own in the entry field.
Enable foreground colors  Web-only 
If selected, the button text is rendered using the color extracted from the host screen by the component (only applicable when the function key component is used).

Color information is extracted for the first host field containing any part of the function key. If the function key is split over two fields, such as F12= and Exit, the color information for the field containing F12= is extracted.

Button style class  Web-only 
Optional. The CSS style class associated with each generated button. The value of the class attribute of the HTML button tag will be set to this value. The default value is HATSBUTTON. See Using style sheets for more information.
Style  Web-only 
Optional. Any CSS properties that you want to override. For example, you can specify font-color: red; font-size: 18pt; in this field to change the font color and size for this widget. The properties you enter apply to each element of this widget. Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.

__________________________________________________________________________

Button table

The Button Table widget is responsible for rendering a table of vertically arranged HTML buttons.

This widget renders data supplied by the following components:

The following figure shows how a button table widget appears on a transformation, using the data from the Function key component example as input:

Figure 26. Button table widget example
Example of button table widget
  1. Rows
  2. Number of columns per row (2)
  3. Caption

The following settings can be configured for this widget:

Number of columns per row
The number of buttons to display horizontally before wrapping to the next line.
Notes:
  1. This setting is not applicable in default rendering.
  2. The widget preview does not always match the full page preview. This happens because the widget preview simple renders the component's output. It does not try to preserve the alignment of the screen when it renders, as is done in the full page preview.
Button style class  Web-only 
Optional. The CSS style class associated with each generated button. The value of the class attribute of the HTML button tag will be set to this value. The default value is HATSBUTTON. See Using style sheets for more information.
Caption style class  Web-only 
Optional. The CSS style class associated with each item description (to the right of the generated button). The default value is HATSCAPTION. See Using style sheets for more information.
Table style class  Web-only 
Optional. The CSS style class associated with the generated table. The value of the class attribute of the HTML table tag will be set to this value. The default is HATSTABLE. See Using style sheets for more information.
Style  Web-only 
Optional. Any CSS properties that you want to override. For example, you can specify font-color: red; font-size: 18pt; in this field to change the font color and size for this widget. The properties you enter apply to each element of this widget. Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.

__________________________________________________________________________

Calendar  Web-only 

The Calendar widget is responsible for rendering an input field with an associated launcher button, link, or image. This launcher opens a pop-up calendar date picker which your users can use to select a date; this date is then inserted into the associated input field.

Notes:
  1. If you are testing your project using the Web browser built in to the Rational SDP, using the WebSphere® Test Environment, you may see the calendar widget come up in a browser window bigger than expected and with additional unneeded controls. This will not happen when the application is run in an external browser, or when you run a deployed application.
  2. To display the pop-up calendar and image launcher when the ZIETrans application is accessed through a proxy server, you must configure the ZIETrans application to use the proxy server. For instructions see Configuring ZIETrans applications to use a proxy server.
  3. For DBCS considerations when using this widget see SBCS eliminate maximum length.

The following figure shows how the calendar widget and its date picker appear on a transformation when the Use inline calendar setting is selected:

Figure 27. Example of calendar widget with inline date picker
Example of calendar widget with inline date picker

The following figure shows how the calendar widget and its date picker appear on a transformation when the Use inline calendar setting is cleared:

Figure 28. Example of calendar widget with windowed date picker
Example of calendar widget with windowed date picker

  1. Number of columns per row (1)
  2. Caption (from component)
  3. Launcher type (image)
    Note:
    The examples have no captions for the launchers because the launchers are images. If the launchers are buttons or links, the launcher captions are shown on the buttons or in the links.

The following settings can be configured for this widget:

Pattern

Required. When the user selects a date from the calendar widget, the selected date must be formatted to map correctly to what is expected in the host application’s input field. This setting specifies the pattern ZIETrans uses to correctly format the selected date. For information about the meaning of symbols in the pattern, see http://java.sun.com/j2se/1.3/docs/api/java/text/SimpleDateFormat.html.

When you enter a pattern and save it, the ZIETrans Toolkit performs the following conversions to ensure correct symbols are used:

Note:
The ZIETrans Toolkit always displays the pattern in uppercase characters. To see the actual case of the pattern symbols, see the pattern setting for the com.ibm.hats.transform.widgets.CalendarWidget class in the source of the application.hap file.

You can spread the selected date over multiple consecutive host input fields by separating pattern elements with a tilde (~). For example, suppose you have the following input fields on your host screen:

Month: [ ] Day: [ ] Year: [ ]

If you specify a pattern of MM~DD~YYYY, a single launcher will be created. Once your user has selected a date, it will be spread over your three input fields: the 2-digit month will be placed in the first input field, the 2-digit day will be placed in the second input field, and the 4-digit year will be placed in the third input field.

Note:
Click the Build button to use an aid to specify a pattern that spans multiple host input fields.
Pattern locale
Specifies the locale of the pattern. This setting is useful if you have entered a pattern segment which should output a day name (example: Wednesday). Options: Use server locale, Use browser locale, or Use specified locale.
Locale
If you specify Use specified locale, select the locale for which to format the date specified by the user.
Restrict earliest selectable date
If selected, the value specified will be the earliest date a user can select from the pop-up calendar.
Notes:
  1. The date pattern is MM/DD/YYYY for all locales.
  2. A user is not prevented from manually entering an earlier date directly into the associated input field because of this setting.
Restrict latest selectable date
If selected, the value specified will be the latest date a user can select from the pop-up calendar.
Notes:
  1. The date pattern is MM/DD/YYYY for all locales.
  2. A user is not prevented from manually entering a later date directly into the associated input field because of this setting.
Default value
Optional. This field represents the initial date selected on the pop-up calendar when the host application does not pre-fill the associated input field with a valid date between the specified restricted dates. It is also used when the user enters an incorrect date (including a date out of range) before selecting the pop-up calendar control. The interaction between this field and the associated host input field is handled as follows:
Note:
The date pattern is MM/DD/YYYY for all locales.
Caption source
Specifies how the caption for the generated input field is determined. Options: From component (use the extracted caption from the component) or Custom (use the specified caption).
Custom caption
Optional. Specifies the caption for the input field.
Note:
Leave this setting blank to not generate a caption for the input field.
Number of columns per row
Specifies how many instances of this widget should appear in each row in the rendered Web page.
Notes:
  1. This setting is not applicable in default rendering.
  2. The widget preview does not always match the full page preview. This happens because the widget preview simply renders the component's output. It does not try to preserve the alignment of the screen when it renders, as is done in the full page preview.
Launcher type
Specifies the style of the launcher. The launcher is used to open the calendar date picker. Options Button, Link, or Image.
Caption
The caption of the launcher button or link.
Button style class
Optional. The CSS style class associated with the generated launcher button. The value of the class attribute of the HTML button tag will be set to this value. The default value is HATSBUTTON . See Using style sheets for more information.
Link style class
Optional. The CSS style class associated with the generated launcher link. The value of the class attribute of the HTML link tag will be set to this value. The default value is HATSLINK. See Using style sheets for more information.
Note:
Depending on the Web browser, there may be limitations to using the Tab key to tab to this launcher if either the Link or Image style is selected.
Use inline calendar
If selected, when the calendar date picker is launched, it is displayed in the current Web page. If cleared, the date picker is displayed in a new browser window. The default for newly created projects is selected.
Notes:
  1. Using the inline calendar date picker is helpful in cases where pop-up blockers prevent the display of the date picker in a new browser window.
  2. Use of the inline calendar date picker is not supported for ZIETrans applications for mobile devices.
Read only
If selected, rendered input fields are read only. A read only input field appears as a regular input field, but does not allow the user to modify its contents. This is useful in cases where you want to display the contents of a non-protected field to a user, but you do not want the user to modify the contents.
Strip underscores on input field
Select this box if you want to strip the underscores from text when it is rendered.
Trim spaces on input field
Selecting this trims leading and trailing spaces from the input field.
Enable foreground colors
If selected, host screen foreground colors are rendered.

Colors are mapped to CSS stylesheet classes representing that color. For example, if a host screen field is marked as RED, the Field widget will enclose the generated HTML for that field in a tag whose class name attribute is set to HRED. This allows for you to remap host screen colors on your generated Web page.

Note:
The blacktheme.css directly maps host screen field foreground colors (for example, red text on the host screen will appear as red text on the generated Web page). However, other stylesheet files like monochrome.css, map field colors differently in an attempt to create a consistent, modern style.
Enable extended attributes
If selected, extended field attributes (blink, reverse video, underline, and column separator) are rendered. Also, for 3270 Web applications, extended field colors are mapped (see the Enable foreground colors setting for more information). See Using style sheets for more information.
Blink style
The CSS style setting you want to use to render blinking text from the host screen.
Reverse video style
The CSS style setting you want to use to render reverse video text from the host screen.
Underline style
The CSS style setting you want to use to render underlined text from the host screen.
Column separator style
The CSS style setting you want to use to render column separators from the host screen.
Input field style class
Optional. The CSS style class associated with the generated input field. The value of the class attribute of the HTML input tag will be set to this value. The default value is HATSINPUT. See Using style sheets for more information.
Caption style class
Optional. The CSS style class associated with the generated input field's caption. The default value is HATSCAPTION. See Using style sheets for more information.
Table style class
Optional. The CSS style class associated with the generated table. If more than one set of input fields is rendered, an HTML table will be generated to enclose these input fields. The value of the class attribute of the HTML table tag will be set to this value. The default value is HATSTABLE. See Using style sheets for more information.
Style
Optional. Any CSS properties that you want to override. For example, you can specify font-color: red; font-size: 18pt; in this field to change the font color and size for this widget. The properties you enter apply to each element of this widget. Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.

__________________________________________________________________________

Check box

The Check box widget is responsible for rendering HTML check boxes.

This widget renders data supplied by the following components:

The following figure shows how a check box widget appears on a transformation, using the data from the input field of the Input field with hints component example as input:

Figure 29. Check box widget example
Example of check box widget
  1. Number of columns per row (1)
  2. Caption (from component)

The following settings can be configured for this widget:

Selected value
Required. The string that is inserted in the host screen input field when the check box is selected. This value is also used to set the initial state of the check box when the Web page is loaded.
Deselected value
Required. The string that is inserted in the host screen input field when the check box is deselected. This value is also used to set the initial state of the check box when the Web page is loaded.
Caption source
Specifies how the caption for the generated check box is determined. Options: From component (use the extracted caption from the component) or Custom (use the specified caption).
Custom caption
Optional. Specifies the caption for the check box.
Note:
Leave this setting blank to not generate a caption for the check box.
Trim spaces on caption
If selected, white space (extra space) is trimmed from both ends of the caption.
Number of columns per row
The number of check boxes to display horizontally before wrapping to the next line.
Notes:
  1. This setting is not applicable in default rendering.
  2. The widget preview does not always match the full page preview. This happens because the widget preview simply renders the component's output. It does not try to preserve the alignment of the screen when it renders, as is done in the full page preview.
Check box style class  Web-only 
Optional. The CSS style class associated with the generated check box. The value of the class attribute of the HTML input tag will be set to this value. The default value is HATSCHECKBOX. See Using style sheets for more information.
Caption style class  Web-only 
Optional. The CSS style class associated with the caption of the generated check box. The default value is HATSCAPTION. See Using style sheets for more information.
Table style class  Web-only 
Optional. The CSS style class associated with the generated table. If more than one check box is rendered, an HTML table will be generated to enclose these check boxes. The value of the class attribute of the HTML table tag will be set to this value. The default value is HATSTABLE. See Using style sheets for more information.
Style  Web-only 
Optional. Any CSS properties that you want to override. For example, you can specify font-color: red; font-size: 18pt; in this field to change the font color and size for this widget. The properties you enter apply to each element of this widget. Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.

__________________________________________________________________________

Dialog

The Dialog widget is responsible for rendering dialog boxes. It renders data supplied by the Dialog component.

The following figure shows how a Dialog widget appears on a transformation using the data from the Dialog component example as input:

Figure 30. Dialog widget example
Example of dialog widget
  1. Disabled area
  2. Specialized border
  3. Border characters removed

The following settings can be configured for this widget:

Hide disabled area outside dialog
Specifies whether to hide the area outside of the dialog.
Disabled area style class  Web-only 
Specifies the CSS style class to use for the disabled area.
Use specialized borders  Web-only 
Specifies whether to use specialized borders instead of the original text.
Remove border characters  Web-only 
Specifies whether to show the original border characters.
Border style class
Specifies the CSS style class to use for the border.
Border style  Web-only 
Left
Specifies the CSS style class to use for the left border.
Right
Specifies the CSS style class to use for the right border.
Top
Specifies the CSS style class to use for the top border.
Bottom
Specifies the CSS style class to use for the bottom border.
Corner style  Web-only 
Top left
Specifies the CSS style class to use for the top left border corner.
Top right
Specifies the CSS style class to use for the top right border corner.
Bottom left
Specifies the CSS style class to use for the bottom left border corner.
Bottom right
Specifies the CSS style class to use for the bottom right border corner.

__________________________________________________________________________

Drop-down (data entry)

The Drop-down (data entry) widget is responsible for rendering drop-down lists.

This widget renders data supplied by the following components:

The following figure shows how a data entry drop-down list widget appears on a transformation, using the data from the Input field with hints component example as input:

Figure 31. Data entry drop-down list widget example
Example of data entry drop-down list widget
  1. Caption (from component)
  2. Number of columns per row (1)
  3. Fill (from hints)

The following settings can be configured for this widget:

Fill from global variable
If selected, fill the drop-down list from the specified global variables.
Global variable containing list values
Specifies the name of the indexed global variable containing the set of values. An item for each index in the global variable will be created in the drop-down list.
Shared
ZIETrans local and shared global variables can have the same name. Select this box if you want to use the shared global variable to populate the list items. When this box is cleared, the local global variable is used.
Global variable containing list captions
Optional. Specifies the name of the indexed global variable containing the set of captions. The size of the global variable specified by this value should be greater than or equal to the size specified in the preceding setting. The indexes in this indexed global variable should also match up with the indexes in the values global variable (so that the actual value and caption shown to the user are in sync). If this value is not specified, the caption for each item in the drop-down list will be its value.
Fill from string
If selected, fill the drop-down list from the specified string.
List items
Optional. Specifies the string of items to include in the drop-down list. Items should be separated with a semicolon (;). To have the list item caption be different than the list item value, enter both separated by an equal sign (=). For example, a value of Apple=A;Grape=G renders a drop-down list with two items: Apple and Grape. Selecting the first item causes an A to be inserted in the associated host screen input field.

If you want both the item in the drop-down list and the value inserted in the host screen to be the same, you only need to enter the item. For example, Apple=A;G. In this example, a G appears in the drop-down list and in the host screen input field.

Fill from hints
If selected, fill the drop-down list from hints recognized by the component (only applicable when the Input Field with Hints component is used).
Caption source
Specifies how the caption for the generated drop-down list is determined. Options: From component (use the extracted caption from the component) or Custom (use the specified caption).
Custom caption
Optional. Specifies the caption for the drop-down list.
Note:
Leave this setting blank to not generate a caption for the drop-down list.
Number of displayable rows
The number of rows in the drop-down list that are visible to the user. If more than this number of items are in the list, scroll bars appear so the user can scroll through the entire list. The default is 1.
Number of columns per row
The number of drop-down lists to display horizontally before wrapping to the next line.
Notes:
  1. This setting is not applicable in default rendering.
  2. The widget preview does not always match the full page preview. This happens because the widget preview simply renders the component's output. It does not try to preserve the alignment of the screen when it renders, as is done in the full page preview.
Auto submit on select
If selected, once a selection is made in the drop-down list, it is submitted.
Show submit button
If selected, a submit button is rendered next to the drop-down list.
Submit button caption
Optional. Specifies the caption of the submit button.
Drop-down style class  Web-only 
Optional. The CSS style class associated with the generated drop-down list. The value of the class attribute of the HTML drop-down tag will be set to this value. The default value is HATSDROPDOWN. See Using style sheets for more information.
List option style class  Web-only 
Optional. The CSS style class associated with each option in the drop-down list. The default value is HATSOPTION. See Using style sheets for more information.
Caption style class  Web-only 
Optional. The CSS style class associated with the caption of the generated drop-down list. The default value is HATSCAPTION. See Using style sheets for more information.
Table style class  Web-only 
Optional. The CSS style class associated with the generated table. If more than one drop-down list is rendered, an HTML table will be generated to enclose these drop-down lists. The value of the class attribute of the HTML table tag will be set to this value. The default value is HATSTABLE. See Using style sheets for more information.
Style  Web-only 
Optional. Any CSS properties that you want to override. For example, you can specify font-color: red; font-size: 18pt; in this field to change the font color and size for this widget. The properties you enter apply to each element of this widget. Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.

__________________________________________________________________________

Drop-down (selection)

The Drop-down (selection) widget is responsible for rendering HTML drop-down lists.

This widget renders data supplied by the following components:

The following figure shows how a selection list drop-down list widget appears on a transformation, using the data from the Selection list component example as input:

Figure 32. Selection list drop-down list widget example
Example of selection list drop-down list widget
  1. Caption type (show both)
  2. Leading token (show both)
  3. Description (show both)
  4. Submit button (show submit button)
  5. Submit button caption (submit)

The following settings can be configured for this widget:

Caption type
Specifies how the leading token of the list item is displayed. The value of the leading token and the description are derived from the component; you can select what appears in the drop-down list. For example, if the host screen had a menu item that read 4. Mail, you can have the caption display 4, or Mail, or 4. Mail.
Auto submit on select
If selected, once a selection is made in the drop-down list, it is submitted. If the drop-down list contains function keys, the selected list item's key is sent to the host. If the drop-down list contains selection list items, the selected item's value is inserted into the target field and the specified action key is sent to the host.
Show submit button
If selected, a submit button is rendered next to the drop-down list. Does not apply when using this widget with the function key component.
Submit button caption
Optional. Specifies the caption of the submit button.
Button style class  Web-only 
Optional. The CSS style class associated with the generated submit button. The value of the class attribute of the HTML button tag will be set to this value. The default value is HATSBUTTON. See Using style sheets for more information.
Drop-down style class  Web-only 
Optional. The CSS style class associated with the generated drop-down list. The value of the class attribute of the HTML drop-down tag will be set to this value. The default value is HATSDROPDOWN. See Using style sheets for more information.
List option style class  Web-only 
Optional. The CSS style class associated with each option in the drop-down list. The default value is HATSOPTION. See Using style sheets for more information.
Caption style class  Web-only 
Optional. The CSS style class associated with the caption of the generated drop-down list. The default value is HATSCAPTION. See Using style sheets for more information.
Table style class  Web-only 
Optional. The CSS style class associated with the generated table. If more than one drop-down list is rendered, an HTML table will be generated to enclose these drop-down lists. The value of the class attribute of the HTML table tag will be set to this value. The default value is HATSTABLE. See Using style sheets for more information.
Style  Web-only 
Optional. Any CSS properties that you want to override. For example, you can specify font-color: red; font-size: 18pt; in this field to change the font color and size for this widget. The properties you enter apply to each element of this widget. Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.

__________________________________________________________________________

Field

The Field widget is responsible for rendering input fields and text recognized by the Field component.

Note:
For DBCS considerations when using this widget see SBCS eliminate maximum length.

The following figure shows how a field widget appears on a transformation, using the data from the Field component example as input:

Figure 33. Field widget example
Example of field widget
  1. Protected text

The primary goal of the table layout of the Field widget is to preserve the layout of the original host screen when it is rendered in a GUI. In default rendering, a table is used to preserve the layout of the screen. This table typically has 80 columns and 24 rows. Each of the different alignment settings in the Field widget (Normal, Character by character  Web-only , and Word by word) change how the table cells in this table are created.

With normal alignment, each host field is represented by a table cell within the table. The cell may consume one or more columns. See the "colspan" HTML attribute for more details. If a field starts at column 10 on the host screen, it will be positioned at column 10 in the table. Normal alignment guarantees that each field begins at the correct column location.

Global rules can impact the alignment of a page because typically a global rule consumes more page space than the field it has transformed. For example, imagine you have an input field that is five characters in length. Default rendering allocates five columns in the table for this field. If the field is rendered by a global rule that takes up more than five characters of space, the table cell it resides in is forced to expand, that is, the cell's width is increased. This impacts the entire table because the entire column is affected. Typically cells to the right of the field, in any row, are shifted to the right since the columns containing the transformed field are now wider. Therefore, a field starting at column 60 of row 5 will always be aligned with a field starting at column 60 of row 20.

Character by character alignment is supported only in ZIETrans Web projects. This alignment option causes each character of a field, except for input fields, to be rendered in its own table cell. Although using this option guarantees that every character on the screen is located at the correct starting location, it also causes the size of the generated page to be very large.

Word by word alignment causes each word on the screen to be rendered in its own table cell. This means that a single field made up of multiple words will be rendered in more than one table cell. This guarantees that every word on the screen is rendered at the correct location. This option is typically used when a host screen has a mix of input fields scattered throughout the screen. Input fields can cause a page to become misaligned since input fields consume more page space than regular text.

The following example shows how the different alignment options map fields and characters into table cells in default rendering. The table cells are invisible in actual default rendering.

Figure 34. Field widget alignment examples
Example of field widget alignment options

The following settings can be configured for this widget:

Read only
If selected, input fields are not rendered. If an input field contains text (and is not password protected), the text is displayed instead. This setting is useful if you want to show users a page of information, but you do not want them editing it.
Layout

Use this setting to specify the layout of the output rendered by this widget. Select Table to render the output in a table, with the goal of preserving the layout of the original host screen. This is the default for Web applications not optimized for mobile devices. Select Separated to render the output using inline span tags to differentiate between fields, with the goal of reducing the amount of HTML and blank space. This is the default for Web applications optimized for mobile devices.

Alignment
When using table layout, indicate how you want ZIETrans to map text characters into table cells in order to improve their alignment (Normal, Character by character  Web-only , or Word by word)
Table style class  Web-only 
Optional. The CSS style class associated with the generated table. The value of the class attribute of the HTML table tag will be set to this value. The default value is HATSFIELDTABLE. See Using style sheets for more information.
nowrap  Web-only 

When you specify Word by word for the Alignment setting, multiple fields are aligned word by word in the transformation. However, another widget could create output that causes cells in the default rendering table to compress, thereby causing the text to wrap. To ensure that the text does not wrap, a nowrap flag is automatically added to the HTML output when word by word alignment is used. Use this nowrap setting to turn off the automatic addition of the nowrap flag to the HTML output.

Setting nowrap to false, with any value of the alignment settings, prevents the addition of the nowrap flag to the HTML output of the field widget, enabling the text in the cell to wrap. You should only set nowrap to false when you are using word by word alignment and continue to have alignment problems.

In default rendering, if a table cell wraps, both vertical and horizontal alignment can be adversely affected, causing undesirable output.

If you set nowrap to true with any value of the alignment setting, wrapping of text to the next line within a table cell does not occur.

Note:
The nowrap setting does not appear in the GUI as a configurable setting. It must be set in the source of the application.hap file. For example, to set nowrap to false, on the ZIETrans Projects view double-click the Project Settings file in the project folder to launch the editor for the application.hap file. On the Source tab locate the class, name="com.ibm.hats.transform.widgets.FieldWidget", in the <classSettings> tag and add the following setting:
<setting name="nowrap" value="false"/>
Allow cursor positioning on protected fields
If selected, clicking one of these protected fields causes the host cursor to be set to that specific position. This setting is useful if your host application is cursor position-sensitive and needs for your user to position the cursor on a protected field.

For Web applications, how precisely the cursor position can be set is determined by the Alignment setting (Normal, Character by character  Web-only , or Word by word).

At runtime in the browser, ZIETrans is notified when one of these fields is clicked. ZIETrans updates the cursor position internally and then visually indicates the new cursor position to the user. By default, the visual indication is to set the background color of the text to yellow. For Web applications, this visual indication can be controlled by the developer using the CSS style, HCURSORINDICATOR. See Using style sheets for more information. With this setting enabled, the following capability is provided:

Note:
This setting alone will not work correctly when the same area of a screen is rendered multiple times using the Field widget. For example, in the case where the same region of the screen is rendered on multiple tabs in a tabbed folder, you must in addition render the protected fields as links (see Allow tabbing using links below) in order to provide your users with the ability to position the cursor on that region of the screen.
Allow tabbing using links  Web-only 
If selected, each protected field is rendered as an HTML link which allows tabbing between protected fields. The cursor position will display as an underlined character.
Note:
Selecting this option causes an HTML anchor <A> tag to be generated for each protected field on the page and as a result increases the size of the Web page.

To avoid unnecessarily increasing the size of the resulting Web page, this option is not selected by default.

Link style class  Web-only 
The CSS style class associated with each generated link. The value of the class attribute of the HTML link tag will be set to this value. The default value is HATSPROTLINK. See Using style sheets for more information.
Action key
Optional. Specifies the host AID key mnemonic that should be sent to the host when a protected field is selected. For example: [enter] , which causes the cursor to be set to the specified location and for enter to be sent, or [pf1] , which causes the cursor to be set to the specified location and for pf1 to be sent.
Trim spaces on links
If selected, white space (extra space) is trimmed from both ends of the protected field links. This setting is useful for reducing the amount of text that is rendered as links.
Enable cursor positioning option on input fields  Web-only 
Select this box to allow the user to switch from data input mode to cursor positioning mode for input fields. When in data input mode, the user can enter data into the input field. When in cursor positioning mode, the user can tab to or otherwise position the cursor on any character in the input field. This setting is useful for Web projects that are optimized for mobile devices that do not have other cursor positioning capabilities. For more information about other settings for this option that do not appear in the ZIETrans Toolkit GUI, see Considerations and limitations for mobile devices for more information.
Enable foreground colors
If selected, host screen foreground colors are rendered.

For Web applications, colors are mapped to CSS stylesheet classes representing that color. For example, if a host screen field is marked as RED, the Field widget will enclose the generated HTML for that field in a tag whose class name attribute is set to HRED. This allows for you to remap host screen colors on your generated Web page.

Note:
The blacktheme.css directly maps host screen field foreground colors (for example, red text on the host screen will appear as red text on the generated Web page). However, other stylesheet files like monochrome.css, map field colors differently in an attempt to create a consistent, modern style.
Field style class  Web-only 
Optional. The CSS style class associated with the generated field. The value of the class attribute of the HTML tag will be set to this value. The default value is HATSFIELD. See Using style sheets for more information.
Enable extended attributes
If selected, extended field attributes (blink  Web-only , reverse video, underline, and column separator) are rendered. Also, for 3270 Web applications, extended field colors are mapped (see the Enable foreground colors setting for more information).
Blink style  Web-only 
The CSS style setting you want to use to render blinking text from the host screen.
Reverse video style  Web-only 
The CSS style setting you want to use to render reverse video text from the host screen.
Underline style  Web-only 
The CSS style setting you want to use to render underlined text from the host screen.
Column separator style  Web-only 
The CSS style setting you want to use to render column separators from the host screen.
See Using style sheets for more information.
Render using monospace font
If selected, the field is rendered using a monospaced font. Otherwise, it is rendered using the default font for the locale environment.
Enable 3270 numeric lock
If selected, the user can enter only numbers 0 through 9, plus sign, minus sign, period, comma, and Hindi numerals into 3270 numeric fields. If cleared, any characters can be entered. The default is cleared.
Note:
For Web applications, you can customize the list of acceptable keys in the lxgwfunctions.js file in the allowNumLockOnly() and allowNumLockOnlyForIEMobile() functions, as appropriate, using character code values.
Strip underscores on input field
Select this box if you want to strip the underscores from text when it is rendered.
Trim spaces on input field
Selecting this trims leading and trailing spaces from the input field.
Style  Web-only 
Optional. Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.
Note:
Because of the large number of tags generated by this widget, you may considerably increase the download time of your page if you specify a value for this setting. Specify style overrides in the enclosing transformation or the included stylesheet file.

__________________________________________________________________________

Graph (horizontal bar, line, vertical bar)

The graph widgets are responsible for rendering JPEG graph images.

This widget renders data supplied by the following components:

Notes:
  1. To display the graph widget when the ZIETrans application is accessed through a proxy server, you must configure the ZIETrans application to use the proxy server. For instructions see Configuring ZIETrans applications to use a proxy server.
  2. This widget may not be suitable for rendering extreme ranges of data.

The following examples show how the horizontal bar graph, line graph, and vertical bar graphs appear on a transformation, using the data from the Table (visual) component example as input:

Figure 35. Horizontal bar graph widget example
Example of horizontal bar graph widget
Figure 36. Line graph widget example
Example of line graph widget
Figure 37. Vertical bar graph widget example
Example of vertical bar graph widget
  1. Data sets (6)
  2. X-axis title (Year; Quantity on horizontal bar graph)
  3. Y-axis title (Quantity; Year on horizontal bar graph)
  4. Data point label (extract)
  5. Data set label (extract)

The following settings can be configured for this widget:

Number of data sets
Specifies the number of data sets to be depicted in the graph. This setting is only displayed in the Insert Host Component wizard.
Data set source
Specifies how to obtain values for one or more data sets. Options: Row (each row of the table constitutes one set of data to be graphed) or Column (each column of the table constitutes one set of data to be graphed).
Width (pixels)
Width, in pixels, of the graph.
Height (pixels)
Height, in pixels, of the graph.
Background color
Specifies the color to use as the background of the graph. Click the color selector button to display a color palette.
Background image
Enter the name of the image to use for the background of the graph (relative to the Web project's Web Content\Common\Images folder). Click the Browse button to import an image from your system.
Default Font
Specify the font, type and font size.
X-axis title
Optional. String specifying the X-axis label of the graph.
Y-axis title
Optional. String specifying the Y-axis label of the graph.
Axis color
Specifies the color to draw the axes of the graph in. Click the color selector button to display a color palette.
Label color
Specifies the color to draw the labels of the graph in. Click the color selector button to display a color palette.
Text antialiasing
If selected, text antialiasing will be used to smooth the edges of the drawn text.
Alternate text
Optional. Specifies the text that appears if the rendered graph image cannot be loaded by the user's client browser.

As with the Number of data sets settings, the following settings are only displayed in the Insert Host Component wizard.

Extract data point labels
Select this box if you want labels for the graph's data points to be extracted from a row (or column) of the table.
Row (or Column)
Specify the number of the row (or column) from which data point labels should be extracted. The label for this entry field (Row or Column) is dependent upon the value specified for the Data set source setting.
Extract data set labels (for legend)
Select this box if you want labels for the graph's data sets to be extracted from a row (or column) of the table.
Row (or Column)
Specify the number of the row (or column) from which data set labels should be extracted. The label for this entry field (Row or Column) is dependent upon the value specified for the Data set source setting.
Data sets
Click this button to display the Data Source Settings dialog, which enables you to specify the following additional settings for the data sources:
Data set 'n', 'row' or 'column'
The number ('n') of these fields matches the value specified in the Data set source setting. Enter the number of any row or column of data you want to use for the data set. This enables you to reorder or duplicate sets of data in the graph. The last part of the label for this entry field is dependent upon the value specified for the Data set source setting. The entry field label matches the value specified for the Data set source setting.
color
There is a color button for each of the Data set 'n', 'row' or 'column' settings. The buttons show the color to use for the data set in the graph. Click the button to display a color palette if you want to change the data set color.
legend label
Supply the label to use for the legend. Only enabled if Extract data set labels (for legend) is not selected.

__________________________________________________________________________

Label

The Label widget is responsible for rendering text.

This widget renders data supplied by the following components.

The following figure shows how a label widget appears on a transformation, using the data from the Text component example as input:

Figure 38. Label widget example
Example of label widget
  1. Label

The following settings can be configured for this widget:

Trim spaces
If selected, white space (extra spaces) is removed from both ends of the selected text.
Style class  Web-only 
Optional. The CSS style class associated with the generated text. The default value is HATSCAPTION. See Using style sheets for more information.
Style  Web-only 
Optional.Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.

__________________________________________________________________________

Link

The Link widget is responsible for rendering HTML links.

This widget renders data supplied by the following components:

The following figure shows how a link widget appears on a transformation, using the data from the Selection list component example as input:

Figure 39. Link widget example
Example of link widget
  1. Rows
  2. Number of columns per row (1)
  3. Leading token (show both)
  4. Description (show both)

The following settings can be configured for this widget:

Caption type
Specifies how the caption for each link is determined. The value of the leading token and the description are derived from the component; you can select what appears as the text for the link. For example, if the host screen had a menu item that read 4. Mail, you can have the text display 4, or Mail, or 4. Mail.
Trim spaces on caption
If selected, white space (extra space) is trimmed from both ends of the caption.
Layout
Specifies how the links will be arranged on the HTML page. Options: Table, Separated.
Notes:
  1. This setting is not applicable in default rendering.
  2. The widget preview does not always match the full page preview. This happens because the widget preview simple renders the component's output. It does not try to preserve the alignment of the screen when it renders, as is done in the full page preview.
Number of columns per row
The number of links to display horizontally before wrapping to the next line.
Separator
Specifies what separator you want to use to separate the rendered links on the HTML page. You can select from the drop-down list or type in your own in the entry field.
Target  Web-only 
Select from the drop-down list the target where you want to display the contents of the linked URL; the same, new, parent, or top window.
Link style class  Web-only 
Optional. The CSS style class associated with each generated link. The value of the class attribute of the HTML link tag will be set to this value. The default value is HATSLINK. See Using style sheets for more information.
Style  Web-only 
Optional. Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.

__________________________________________________________________________

Link (item selection)

The link (item selection) widget is responsible for rendering the item selection component as links.

The following figure shows how a link (item selection) widget appears on a transformation, using the data from the Item selection component example as input:

Figure 40. Link (item selection) widget example
Example of link (item selection) widget
  1. Show input field (no)
  2. Number of columns per row (defaults to 1)
  3. Layout (table)

The following setting can be configured for this widget:

Layout
Specifies how the links will be arranged on the HTML page. Options: Table, Separated.
Number of columns per row
Specifies how many instances of this widget should appear on each row of the rendered HTML page.
Separator
Specifies what separator you want to use to separate the rendered links on the HTML page. You can select from the drop-down list or type in your own in the entry field.
Show input field
Specifies whether to display an input field for each link, and the location of the input field (to the left/right of the links). Options: No, Left of captions, Right of captions.
Selection value
Specifies characters to place to the left of the input field.
Key to automatically send
Specifies which AID key to send to the host, or none.
Link style class
Optional. The CSS style class associated with the generated launcher link. The value of the class attribute of the HTML link tag will be set to this value. The default value is HATSPROTLINK HBLANK. See Using style sheets for more information.
Style
Optional.Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.

__________________________________________________________________________

List

The List widget is responsible for rendering list boxes.

This widget renders data supplied by the following components:

The following figure shows how a list widget appears on a transformation.

Figure 41. List widget example
Example of list widget
  1. Caption (custom)
  2. Fill (from string)
  3. Number of displayable rows (defaults to 5)
  4. Number of columns per row (defaults to 1)

The following settings can be configured for this widget:

Fill from global variable
If selected, fill the list from the specified global variables.
Global variable containing list values
Specifies the name of the indexed global variable containing the set of values. An item for each index in the global variable will be created in the list.
Shared
ZIETrans local and shared global variables can have the same name. Select this box if you want to use the shared global variable to populate the list items. When this box is cleared, the local global variable is used.
Global variable containing list captions
Optional. Specifies the name of the indexed global variable containing the set of captions. The size of the global variable specified by this value should be greater than or equal to the size specified in the preceding setting. The indexes in this indexed global variable should also match up with the indexes in the values global variable (so that the actual value and caption shown to the user are in sync). If this value is not specified, the caption for each item in the list will be its value.
Fill from string
If selected, fill the list from the specified string.
List items
Optional. Specifies the string of items to include in the list. Items should be separated with a semicolon (;). To have the list item caption be different than the list item value, enter both separated by an equal sign (=). For example, a value of Apple=A;Grape=G renders a list with two items: Apple and Grape. Selecting the first item causes an A to be inserted in the associated host screen input field.

If you want both the item in the list and the value inserted in the host screen to be the same, you only need to enter the item. For example, Apple=A;G. In this example, a G appears in the list and in the host screen input field.

Fill from hints
If selected, fill the list from hints recognized by the component (only applicable when the Input Field with Hints component is used).
Caption source
Specifies how the caption for the generated list is determined. Options: From component (use the extracted caption from the component) or Custom (use the specified caption).
Custom caption
Optional. Specifies the caption for the list.
Note:
Leave this setting blank to not generate a caption for the list.
Number of displayable rows
The number of rows in the list box that are visible to the user. If more than this number of items are in the list, scroll bars appear so the user can scroll through the entire list. The default is 5.
Number of columns per row
The number of lists to display horizontally before wrapping to the next line. The default is 1.
Notes:
  1. This setting is not applicable in default rendering.
  2. The widget preview does not always match the full page preview. This happens because the widget preview simply renders the component's output. It does not try to preserve the alignment of the screen when it renders, as is done in the full page preview.
Auto submit on select
If selected, once a selection is made in the list, it is submitted.
Show submit button
If selected, a submit button is rendered next to the list.
Submit button caption
Optional. Specifies the caption of the submit button.
List style class  Web-only 
Optional. The CSS style class associated with the generated list. The value of the class attribute of the HTML list tag will be set to this value. The default value is HATSDROPDOWN. See Using style sheets for more information.
List option style class  Web-only 
Optional. The CSS style class associated with each option in the list. The default value is HATSOPTION. See Using style sheets for more information.
Caption style class  Web-only 
Optional. The CSS style class associated with the generated list's caption. The default value is HATSCAPTION. See Using style sheets for more information.
Table style class  Web-only 
Optional. The CSS style class associated with the generated table. If more than one list is rendered, an HTML table will be generated to enclose these lists. The value of the class attribute of the HTML table tag will be set to this value. The default value is HATSTABLE. See Using style sheets for more information.
Style  Web-only 
Optional. Any CSS properties that you want to override. For example, you can specify font-color: red; font-size: 18pt; in this field to change the font color and size for this widget. The properties you enter apply to each element of this widget. Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.

__________________________________________________________________________

The Popup widget is responsible for rendering an input field with an associated launcher button, link, or image. This launcher opens a popup which your user can use to select a valid value for the associated input field.

This widget renders data supplied by the following components:

Notes:
  1. To display the popup widget image launcher when the ZIETrans application is accessed through a proxy server, you must configure the ZIETrans application to use the proxy server. For instructions see Configuring ZIETrans applications to use a proxy server.
  2. For DBCS considerations when using this widget see SBCS eliminate maximum length.

The following figure shows how a popup widget appears on a transformation, using the data from the Input field with hints component example as input:

Figure 42. Popup widget example
Example of popup widget
  1. Caption (from component)
  2. Number of columns per row (1)
  3. Fill (from hints)
  4. Launcher type (button)
  5. Launcher caption (Values)

The following settings can be configured for this widget:

Fill from global variable
If selected, fill the popup list from the specified global variables.
Global variable containing list values
Specifies the name of the indexed global variable containing the set of values. A link for each index in the global variable will be created in the popup window.
Shared
ZIETrans local and shared global variables can have the same name. Select this box if you want to use the shared global variable to populate the list items. When this box is cleared, the local global variable is used.
Global variable containing list captions
Optional. Specifies the name of the indexed global variable containing the set of captions. The size of the global variable specified by this value should be greater than or equal to the size specified in the preceding setting. The indexes in this indexed global variable should also match up with the indexes in the values global variable (so that the actual value and caption shown to the user are in sync). If this value is not specified, the text for each link will be its value.
Fill from string
If selected, fill the popup list from the specified string.
List items
Optional. Specifies the string of items to include in the popup window. Items should be separated with a semicolon (;). To have the list item caption be different than the list item value, enter both separated by an equal sign (=). For example, a value of Apple=A;Grape=G renders a popup window with two items: Apple and Grape. Selecting the first item causes an A to be inserted in the associated host screen input field.

If you want both the item in the popup window and the value inserted in the host screen to be the same, you only need to enter the item. For example, Apple=A;G. In this example, a G appears in the popup window and in the host screen input field.

Fill from hints
If selected, populate the popup from hints recognized by the component (only applicable when the Input Field with Hints component is used).
Caption source
Specifies how the caption for the generated input field is determined. Options: From component (use the extracted caption from the component) or Custom (use the specified caption).
Custom caption
Optional. Specifies the caption for the input field. Note: Leave this setting blank to not generate a caption for the associated input field.
Number of columns per row
The number of input fields to display horizontally before wrapping to the next line.
Notes:
  1. This setting is not applicable in default rendering.
  2. The widget preview does not always match the full page preview. This happens because the widget preview simple renders the component's output. It does not try to preserve the alignment of the screen when it renders, as is done in the full page preview.
Enable cursor positioning option on input fields Web-only 
Select this box to allow the user to switch from data input mode to cursor positioning mode for input fields. When in data input mode, the user can enter data into the input field. When in cursor positioning mode, the user can tab to or otherwise position the cursor on any character in the input field. This setting is useful for Web projects that are optimized for mobile devices that do not have other cursor positioning capabilities. For more information about other settings for this option that do not appear in the ZIETrans Toolkit GUI, see Considerations and limitations for mobile devices.
Read only
If selected, rendered input fields are read only. A read only input field appears as a regular input field, but does not allow the user to modify its contents. This is useful in cases where you want to display the contents of a non-protected field to a user, but you do not want the user to modify the contents. In the case of the Popup widget, it enables you to control the input supplied into the field. Only values available in the popup can be supplied to the field.
Enable foreground colors
If selected, host screen foreground colors are rendered.

For Web applications, colors are mapped to CSS stylesheet classes representing that color. For example, if a host screen field is marked as RED, the Field widget will enclose the generated HTML for that field in a tag whose class name attribute is set to HRED. This allows for you to remap host screen colors on your generated Web page.

Note:
The blacktheme.css directly maps host screen field foreground colors (for example, red text on the host screen will appear as red text on the generated Web page). However, other stylesheet files like monochrome.css, map field colors differently in an attempt to create a consistent, modern style.
Enable extended attributes
If selected, extended field attributes (blink, reverse video, underline, and column separator) are rendered. Also, for 3270 Web applications, extended field colors are mapped (see the preceding setting for more information). See Using style sheets for more information.
Blink style  Web-only 
The CSS style setting you want to use to render blinking text from the host screen.
Reverse video style  Web-only 
The CSS style setting you want to use to render reverse video text from the host screen.
Underline style  Web-only 
The CSS style setting you want to use to render underlined text from the host screen.
Column separator style  Web-only 
The CSS style setting you want to use to render column separators from the host screen.
Launcher type
Specifies the style of the launcher. The launcher is used to open the popup. Options Button, Link, or Image.
Image filename
The name of the image file. This is only enabled if launcher type is an Image. Click Import to import an image into your project. A preview window displays the currently selected image.
Caption
The caption of the launcher button or link. This is only enabled if launcher type is either Link or Button.
Link style class  Web-only 
Optional. The CSS style class associated with the generated launcher link. The value of the class attribute of the HTML link tag will be set to this value. The default value is HATSLINK. See Using style sheets for more information.
Button style class  Web-only 
Optional. The CSS style class associated with the generated launcher button. The value of the class attribute of the HTML button tag will be set to this value. The default value is HATSBUTTON. See Using style sheets for more information.
Close link caption  Web-only 
The caption to appear for the Close action.
Input field style class  Web-only 
Optional. The CSS style class associated with the generated input field. The value of the class attribute of the HTML input tag will be set to this value. The default value is HATSINPUT. See Using style sheets for more information.
Caption style class  Web-only 
Optional. The CSS style class associated with the generated input field's caption. The default value is HATSCAPTION. See Using style sheets for more information.
Table style class  Web-only 
Optional. The CSS style class associated with the generated table. If more than one set of input fields is rendered, an HTML table will be generated to enclose these input fields. The value of the class attribute of the HTML table tag will be set to this value. The default value is HATSTABLE. See Using style sheets for more information.
Popup window style class  Web-only 
Optional. The CSS style class associated with the generated popup window. The default value is HATSPOPUP. See Using style sheets for more information.
Close link style class  Web-only 
Optional. The CSS style class associated with the link used to close the popup window. The default value is HATSLINK. See Using style sheets for more information.
Item link style class  Web-only 
Optional. The CSS style class associated with the links used to select an item from the popup. The default value is HATSPOPUPITEMLINK. See Using style sheets for more information.
Style  Web-only 
Optional.Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.
Note:
There are times when the popup widget may appear too translucent. If you want to make the widget more opaque, you must modify the cascading style sheet (CSS) that your template is using by doing the following steps:
  1. Open the CSS your template is using.
  2. Under the DIV.HATSPOPUP class, search for: filter: alpha (opacity=40, style=0)
  3. Changing the opacity value will adjust the transparency of the popup widget. Where 0 is transparent, and 100 is completely opaque.

__________________________________________________________________________

Radio button (data entry)

The Radio button (data entry) widget is responsible for rendering a set of radio buttons.

This widget renders data supplied by the following components:

The following figure shows how a data entry radio button widget appears on a transformation, using the data from the Input field with hints component example as input:

Figure 43. Data entry radio button widget example
Example of data entry radio button widget
  1. Caption (from component)
  2. Number of columns per row (1)
  3. Fill (from hints)

The following settings can be configured for this widget:

Fill from global variable
If selected, populate the set of radio buttons from the specified global variables.
Global variable containing list values
Specifies the name of the indexed global variable containing the set of values. A radio button for each index in the global variable will be created.
Shared
ZIETrans local and shared global variables can have the same name. Select this box if you want to use the shared global variable to populate the list items. When this box is cleared, the local global variable is used.
Global variable containing list captions
Optional. Specifies the name of the indexed global variable containing the set of captions. The size of the global variable specified by this value should be greater than or equal to the size specified in the preceding setting. The indexes in this indexed global variable should also match up with the indexes in the values global variable (so that the actual value and caption shown to the user are in sync). If this value is not specified, the caption for each radio button will be its value.
Fill from string
If selected, populate the set of radio buttons from the specified string.
List items
Optional. Specifies the string of items to include in the set of radio buttons. Items should be separated with a semicolon (;). To have the list item caption be different than the list item value, enter both separated by an equal sign (=). For example, a value of Apple=A;Grape=G renders radio buttons for two items: Apple and Grape. Selecting the first item causes an A to be inserted in the associated host screen input field.

If you want both the item in the radio button set and the value inserted in the host screen to be the same, you only need to enter the item. For example, Apple=A;G. In this example, a G appears next to the radio button and in the host screen input field.

Fill from hints
If selected, populate the set of radio buttons from hints recognized by the component (only applicable when the Input Field with Hints component is used).
Caption source
Specifies how the caption for the generated set of radio buttons is determined. Options: From component (use the extracted caption from the component) or Custom (use the specified caption).
Custom caption
Optional. Specifies the caption for the set.
Note:
Leave this setting blank to not generate a caption for the set.
Trim spaces on caption
If selected, white space (extra space) is trimmed from both ends of the caption.
Number of columns per row
The number of radio buttons to display horizontally before wrapping to the next line.
Label style class  Web-only 
Optional. The CSS style class associated with the generated caption for the set of radio buttons. The default value is HATSCAPTION. See Using style sheets for more information.
Radio button style class  Web-only 
Optional. The CSS style class associated with each radio button. The default value is HATSRADIOBUTTON. See Using style sheets for more information.
Radio button description style class  Web-only 
Optional. The CSS style class associated with each radio button description. The default value is HATSTEXT. See Using style sheets for more information.
Table style class  Web-only 
Optional. The CSS style class associated with the generated table. If more than one radio button is rendered, an HTML table will be generated to enclose them. The value of the class attribute of the HTML table tag will be set to this value. The default value is HATSTABLE. See Using style sheets for more information.
Style  Web-only 
Optional.Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.

__________________________________________________________________________

Radio button (item selection)

The Radio button (item selection) widget is responsible for rendering a set of radio buttons.

This widget renders data supplied by the following component:

The following figure shows how a radio button (item selection) widget appears on a transformation, using the data from the Item selection component example as input:

Figure 44. Radio button (item selection) widget example
Example of radio button (item selection) widget
  1. Caption (from component)
  2. Number of columns per row (defaults to 1)

The following settings can be configured for this widget:

Caption
Specifies how the caption for the generated input field is determined. Options: From component (use the extracted caption from the component) or Custom (use the specified caption).
Custom caption
Optional. Specifies the caption for the input field.
Note:
Leave this setting blank to not generate a caption for the check box.
Trim spaces on caption
If selected, white space (extra space) is trimmed from both ends of the caption.
Number of columns per row
The number of input fields to display horizontally before wrapping to the next line.
Selection value
The value to be entered in the input field of the host screen when the value is selected. Options: /, S, or 1.
Auto submit on select
If selected, once a radio button is selected, the item selection is submitted. If the radio button was generated from a function key, the selected item's key is sent to the host.
Show submit button
If selected, a submit button is rendered below the set of radio buttons. Does not apply when using this widget with the function key component.
Submit button caption
Optional. Specifies the caption of the submit button.
Button style class  Web-only 
Optional. The CSS style class associated with the generated submit button. The value of the class attribute of the HTML button tag will be set to this value. The default value is HATSBUTTON. See Using style sheets for more information.
Radio button style class  Web-only 
Optional. The CSS style class associated with each radio button. The default value is HATSRADIOBUTTON. See Using style sheets for more information.
Radio button description style class  Web-only 
Optional. The CSS style class associated with each radio button description. The default value is HATSTEXT. See Using style sheets for more information.
Label style class  Web-only 
Optional. The CSS style class associated with the generated caption for the set of radio buttons. The default value is HATSCAPTION. See Using style sheets for more information.
Table style class  Web-only 
Optional. The CSS style class associated with the generated table. If more than one radio button is rendered, an HTML table will be generated to enclose them. The value of the class attribute of the HTML table tag will be set to this value. The default value is HATSTABLE. See Using style sheets for more information.
Style  Web-only 
Optional.Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.

__________________________________________________________________________

Radio button (selection)

The Radio button (selection) widget is responsible for rendering a set of radio buttons.

This widget renders data supplied by the following components:

The following figure shows how a selection list radio button widget appears on a transformation, using the data from the Selection list component example as input:

Figure 45. Selection list radio button widget example
Example of selection list radio button widget
  1. Caption type (show both)
  2. Number of columns per row (1)
  3. Leading token (show both)
  4. Description (show both)
  5. Submit button (show submit button)
  6. Submit button caption (submit)

The following settings can be configured for this widget:

Caption type
Specifies how the caption for each button is determined. The value of the leading token and the description are derived from the component; you can select what appears on the button caption. For example, if the host screen had a menu item that read 4. Mail, you can have the caption display 4, or Mail, or 4. Mail.
Trim spaces on caption
If selected, white space (extra space) is trimmed from both ends of the caption.
Number of columns per row
The number of radio buttons to display horizontally before wrapping to the next line.
Auto submit on select
If selected, once a radio button is selected, the selection is submitted. If the radio button was generated from a function key, the selected item's key is sent to the host. If the radio button was generated from a selection list, the selected item's value is inserted into the target field and the specified action key is sent to the host.
Show submit button
If selected, a submit button is rendered below the set of radio buttons. Does not apply when using this widget with the function key component.
Submit button caption
Optional. Specifies the caption of the submit button.
Button style class  Web-only 
Optional. The CSS style class associated with the generated submit button. The value of the class attribute of the HTML button tag will be set to this value. The default value is HATSBUTTON. See Using style sheets for more information.
Radio button style class  Web-only 
Optional. The CSS style class associated with each radio button. The default value is HATSRADIOBUTTON. See Using style sheets for more information.
Radio button description style class  Web-only 
Optional. The CSS style class associated with each radio button description. The default value is HATSTEXT. See Using style sheets for more information.
Label style class  Web-only 
Optional. The CSS style class associated with the generated caption for the set of radio buttons. The default value is HATSCAPTION. See Using style sheets for more information.
Table style class  Web-only 
Optional. The CSS style class associated with the generated table. If more than one radio button is rendered, an HTML table will be generated to enclose them. The value of the class attribute of the HTML table tag will be set to this value. The default value is HATSTABLE. See Using style sheets for more information.
Style  Web-only 
Optional.Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.

__________________________________________________________________________

Scrollbar (ENPTUI)

The scrollbar (ENPTUI) widget renders data supplied from the Scrollbar field (ENPTUI) component.

The following figure shows how a Scrollbar (ENPTUI) widget appears on a transformation, using the data from the Scrollbar field (ENPTUI) component example as input:

Figure 46. Scrollbar (ENPTUI) widget example
Example of scrollbar (ENPTUI) widget
  1. Scrollbar

The following settings can be configured for this widget:

Scrollbar style class  Web-only 
Optional. The CSS style class associated with the scrollbar appearance. The default value is HATSESCROLL. See Using style sheets for more information.
Scrollbar button style class  Web-only 
Optional. The CSS style class associated with the scrollbar buttons. The default value is HATSESCROLLBUTTON. See Using style sheets for more information.
Button arrow color  Web-only 
The color of the button arrow. The default value is Black.
Style  Web-only 
Optional. Any CSS properties that you want to override. For example, you can specify font-color: red; font-size: 18pt; in this field to change the font color and size for this widget. The properties you enter apply to each element of this widget. Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.

__________________________________________________________________________

Subfile (check box)

The subfile (check box) widget is responsible for rendering a 5250 subfile.

This widget renders data supplied by the subfile component.

Note:
For DBCS considerations when using this widget see SBCS eliminate maximum length.

The following figure shows how a subfile (check box) widget appears on a transformation, using the data from the Subfile component example as input:

Figure 47. Subfile (check box) widget example
Example of subfile (check box) widget
  1. Caption type (show both)
  2. Actions type (link)
  3. Actions location (above subfile)
  4. Check box

The following settings can be configured for this widget:

Caption type:
Specifies how the caption for each check box is determined. The value of the leading token and the description are derived from the component; you can select what appears as the caption. For example, if the host screen had an action that read 5. Display, you can have the caption display 5, or Display, or 5. Display.
Actions type
Specifies whether to use a Button or a Link to trigger the actions.
Actions location
Specifies the location of the buttons or links that trigger the actions. Options are Above and below subfile, Above subfile, and Below subfile.
Rows per record
Number of rows
Specify the fixed number of rows per record in your subfiles.
Columns placement  Web-only 

This widget can be configured to display primary columns of data, and optionally to have a details section to view additional detail columns. This setting is useful when displaying table data on a mobile device. For more information about these settings and about other settings for this option that do not appear in the ZIETrans Toolkit GUI, see Considerations and limitations for mobile devices.

Primary columns
Use this field to specify which columns to display, and in what order. The field allows for numeric any-order listing of column numbers with expansion shorthand, and columns are allowed to be displayed more than once or not at all, for example, 1,3,2,5-7,2-3,9.

A hyphen (-) between two numbers indicates a range of columns. You can use the asterisk character (*) to indicate the last available column. An asterisk alone means columns 1 through n where n is the last available column. You can also use 5* as a shorthand for 5-*. These mean the same thing: 1-*, *.

For Web projects, this setting defaults to *, or all columns. For Web projects optimized for mobile devices, this setting defaults to 1-2, or columns 1 and 2.

Note:
The numbers represent columns provided to the widget by the component. They do not represent the columns originally recognized by the component, which may or may not be excluded, before providing them to the widget.
Detail columns
Use this optional field to specify which detail columns to display when requested, and in what order. The field allows for numeric any-order listing with expansion shorthand.

For Web projects, this setting defaults to empty, or no detail columns section. For Web projects optimized for mobile devices, this setting defaults to 3*, or column 3 through the last column.

Keep detail columns on the server
Select this option to keep the detail columns section on the server until requested by the user. This reduces the amount of HTML output at initial rendering. The default is cleared.
Enable foreground colors
If selected, host screen foreground colors are rendered.

For Web applications, colors are mapped to CSS stylesheet classes representing that color. For example, if a host screen field is marked as RED, the Field widget will enclose the generated HTML for that field in a tag whose class name attribute is set to HRED. This allows for you to remap host screen colors on your generated Web page.

Note:
The blacktheme.css directly maps host screen field foreground colors (for example, red text on the host screen will appear as red text on the generated Web page). However, other stylesheet files like monochrome.css, map field colors differently in an attempt to create a consistent, modern style.
Field style class  Web-only 
Optional. The CSS style class associated with the generated field. The value of the class attribute of the HTML tag will be set to this value. The default value is HATSFIELD. See Using style sheets for more information.
Enable extended attributes
If selected, extended field attributes (blink, reverse video, underline, and column separator) are rendered with the specified style. See Using style sheets for more information.
Blink style  Web-only 
The CSS style setting you want to use to render blinking text from the host screen.
Reverse video style  Web-only 
The CSS style setting you want to use to render reverse video text from the host screen.
Underline style  Web-only 
The CSS style setting you want to use to render underlined text from the host screen.
Column separator style  Web-only 
The CSS style setting you want to use to render column separators from the host screen.
Strip underscores on input field
Select this box if you want to strip the underscores from text when it is rendered.
Trim spaces on input field
Select this box to trim leading and trailing spaces from the input field.
Enable cursor positioning option on input fields  Web-only 
Select this box to allow the user to switch from data input mode to cursor positioning mode for input fields. When in data input mode, the user can enter data into the input field. When in cursor positioning mode, the user can tab to or otherwise position the cursor on any character in the input field. This setting is useful for Web projects that are optimized for mobile devices that do not have other cursor positioning capabilities. For more information about other settings for this option that do not appear in the ZIETrans Toolkit GUI, see Considerations and limitations for mobile devices for more information.
Provide spreadsheet file
If selected, a launcher is provided that will retrieve the table data in spreadsheet file format.
File name prefix
Specifies a prefix for the spreadsheet file name. The default is spreadsheet. The complete file name will be in the form of FileNamePrefix_TimeStamp, where the timestamp format is MMDDYY_HHMMSS, for example, spreadsheet_041506_113020.
File name extension
The extension name for the type of spreadsheet format. Options are .csv and .xls. The .csv file are pure text files, with data columns separated by commas. The .xls files are Microsoft Excel Biff3 files. The default is .csv.
Launcher type
The type of launcher to display to the user. Options are Link, Image, and Button. The default is Link (Web projects).
Launcher caption
The caption for the launcher to display to the user. The default is Download (Web projects).
Button style class  Web-only 
The CSS style class associated with the generated launcher button. The value of the class attribute of the HTML button tag will be set to this value. The default value is HATSBUTTON. See Using style sheets for more information.
Link style class  Web-only 
Optional. The CSS style class associated with the generated launcher link. The value of the class attribute of the HTML link tag will be set to this value. The default value is HATSLINK. See Using style sheets for more information.
Link style class  Web-only 
Optional. The CSS style class associated with the generated action link. The value of the class attribute of the HTML link tag will be set to this value. The default value is HATSLINK. See Using style sheets for more information.
Button style class  Web-only 
Optional. The CSS style class associated with the generated action button. The value of the class attribute of the HTML button tag will be set to this value. The default value is HATSBUTTON. See Using style sheets for more information.
Check box style class  Web-only 
Optional. The CSS style class associated with the generated check box. The value of the class attribute of the HTML check box tag will be set to this value. The default value is HATSCHECKBOX. See Using style sheets for more information.
Table style class  Web-only 
Optional. The CSS style class associated with the generated table. The value of the class attribute of the HTML table tag will be set to this value. The default value is HATSTABLE. See Using style sheets for more information.
Table cell style class  Web-only 
Optional. The CSS style class associated with each cell in the generated table. The value of the class attribute of the HTML table cell (td) tag will be set to this value. The default value is HATSTABLECELL. See Using style sheets for more information.
Header row style class  Web-only 
Optional. The CSS style class associated with each header row or column in the generated table. The value of the class attribute of the HTML table row or cell tag will be set to this value. The default value is HATSTABLEHEADER. See Using style sheets for more information.
Odd row style class  Web-only 
Optional. The CSS style class associated with each odd numbered row in the table. The value of the class attribute of the each HTML table row tag in an odd row number will be set to this value. The default value is HATSTABLEODDROW. See Using style sheets for more information.
Even row style class  Web-only 
Optional. The CSS style class associated with each even numbered row in the table. The value of the class attribute of the each HTML table row tag in an even row number will be set to this value. The default value is HATSTABLEEVENROW. See Using style sheets for more information.
Style  Web-only 
Optional.Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.
fieldTextAlignment  Web-only 
For Web projects, if you use a non-monospace font such as Sans Serif, the rendered data does not align properly with spacing problems between words. You can use the source setting, fieldTextAlignment, to correct the alignment of the data. To enable this setting on a project-wide basis, open the source view of the application.hap file, locate the class for the SubfileCheckboxWidget widget, and change the value of the setting to NO_SEGMENTING as shown in the following example:
<class name="com.ibm.hats.transform.widgets.SubfileCheckboxWidget">
.
   <setting name="fieldTextAlignment" value="NO_SEGMENTING"/>
.
</class>
To enable this setting on a component-level basis in a transformation, open the source view for the transformation, locate the ZIETrans:Component tag for the SubfileCheckboxWidget widget, and change the value of the setting to NO_SEGMENTING as shown in the following example:
...
widget="com.ibm.hats.transform.widgets.SubfileCheckboxWidget"
...
widgetSettings="...|fieldTextAlignment:NO_SEGMENTING|..."
...
The values for this setting are WORD_BY_WORD and NO_SEGMENTING. The default value is WORD_BY_WORD.
Note:
This setting has no effect when you use the Table (visual) recognition option for data recognition in the Subfile component.

__________________________________________________________________________

Subfile (drop-down)

The subfile (drop-down) widget is responsible for rendering a 5250 subfile.

This widget renders data supplied by the subfile component.

Note:
For DBCS considerations when using this widget see SBCS eliminate maximum length.

The following figure shows how a subfile (drop-down) widget appears on a transformation, using the data from the Subfile component example as input:

Figure 48. Subfile (drop-down) widget example
Example of subfile (drop-down) widget
  1. Caption type (show both)
  2. Leading token
  3. Description
  4. Submit button (show submit button)
  5. Submit button caption (Submit)

The following settings can be configured for this widget:

Caption type:
Specifies how the caption for each item in the drop-down is determined. The value of the leading token and the description are derived from the component; you can select what appears as the caption. For example, if the host screen had an action that read 5. Display, you can have the caption display 5, or Display, or 5. Display.
Show subfile actions
Select this box if you want to display the descriptive text of the subfile actions, such as 2=Add, with the rendered subfile in addition to the drop-down list. The check box is not enabled when you select Show description.
Auto submit on select
If selected, once a selection is made in the drop-down, it is submitted.
Show submit button
If selected, a submit button is rendered below the subfile.
Submit button caption
Optional. Specifies the caption of the submit button.
Button style class  Web-only 
Optional. The CSS style class associated with the generated submit button. The value of the class attribute of the HTML button tag will be set to this value. The default value is HATSBUTTON. See Using style sheets for more information.
Button row style class  Web-only 
Optional. The CSS style class associated with the generated table row which contains the submit button. The default value is HATSTABLEHEADER. See Using style sheets for more information.
Rows per record
Number of rows
Specify the fixed number of rows per record in your subfiles.
Columns placement  Web-only 

This widget can be configured to display primary columns of data, and optionally to have a details section to view additional detail columns. This setting is useful when displaying table data on a mobile device. For more information about these settings and about other settings for this option that do not appear in the ZIETrans Toolkit GUI, see Considerations and limitations for mobile devices.

Primary columns
Use this field to specify which columns to display, and in what order. The field allows for numeric any-order listing of column numbers with expansion shorthand, and columns are allowed to be displayed more than once or not at all, for example, 1,3,2,5-7,2-3,9.

A hyphen (-) between two numbers indicates a range of columns. You can use the asterisk character (*) to indicate the last available column. An asterisk alone means columns 1 through n where n is the last available column. You can also use 5* as a shorthand for 5-*. These mean the same thing: 1-*, *.

For Web projects, this setting defaults to *, or all columns. For Web projects optimized for mobile devices, this setting defaults to 1-2, or columns 1 and 2.

Note:
The numbers represent columns provided to the widget by the component. They do not represent the columns originally recognized by the component, which may or may not be excluded, before providing them to the widget.
Detail columns
Use this optional field to specify which detail columns to display when requested, and in what order. The field allows for numeric any-order listing with expansion shorthand.

For Web projects, this setting defaults to empty, or no detail columns section. For Web projects optimized for mobile devices, this setting defaults to 3*, or column 3 through the last column.

Keep detail columns on the server
Select this option to keep the detail columns section on the server until requested by the user. This reduces the amount of HTML output at initial rendering. The default is cleared.
Enable foreground colors
If selected, host screen foreground colors are rendered.

For Web applications, colors are mapped to CSS stylesheet classes representing that color. For example, if a host screen field is marked as RED, the Field widget will enclose the generated HTML for that field in a tag whose class name attribute is set to HRED. This allows for you to remap host screen colors on your generated Web page.

Note:
The blacktheme.css directly maps host screen field foreground colors (for example, red text on the host screen will appear as red text on the generated Web page). However, other stylesheet files like monochrome.css, map field colors differently in an attempt to create a consistent, modern style.
Field style class  Web-only 
Optional. The CSS style class associated with the generated field. The value of the class attribute of the HTML tag will be set to this value. The default value is HATSFIELD. See Using style sheets for more information.
Enable extended attributes
If selected, extended field attributes (blink, reverse video, underline, and column separator) are rendered with the specified style. See Using style sheets for more information.
Blink style  Web-only 
The CSS style setting you want to use to render blinking text from the host screen.
Reverse video style  Web-only 
The CSS style setting you want to use to render reverse video text from the host screen.
Underline style  Web-only 
The CSS style setting you want to use to render underlined text from the host screen.
Column separator style  Web-only 
The CSS style setting you want to use to render column separators from the host screen.
Strip underscores on input field
Select this box if you want to strip the underscores from text when it is rendered.
Trim spaces on input field
Select this box to trim leading and trailing spaces from the input field.
Enable cursor positioning option on input fields  Web-only 
Select this box to allow the user to switch from data input mode to cursor positioning mode for input fields. When in data input mode, the user can enter data into the input field. When in cursor positioning mode, the user can tab to or otherwise position the cursor on any character in the input field. This setting is useful for Web projects that are optimized for mobile devices that do not have other cursor positioning capabilities. For more information about other settings for this option that do not appear in the ZIETrans Toolkit GUI, see Considerations and limitations for mobile devices for more information.
Provide spreadsheet file
If selected, a launcher is provided that will retrieve the table data in spreadsheet file format.
File name prefix
Specifies a prefix for the spreadsheet file name. The default is spreadsheet. The complete file name will be in the form of FileNamePrefix_TimeStamp, where the timestamp format is MMDDYY_HHMMSS, for example, spreadsheet_041506_113020.
File name extension
The extension name for the type of spreadsheet format. Options are .csv and .xls. The .csv file are pure text files, with data columns separated by commas. The .xls files are Microsoft Excel Biff3 files. The default is .csv.
Launcher type
The type of launcher to display to the user. Options are Link, Image, and Button. The default is Link (Web projects).
Launcher caption
The caption for the launcher to display to the user. The default is Download (Web projects).
Button style class  Web-only 
The CSS style class associated with the generated launcher button. The value of the class attribute of the HTML button tag will be set to this value. The default value is HATSBUTTON. See Using style sheets for more information.
Link style class  Web-only 
Optional. The CSS style class associated with the generated launcher link. The value of the class attribute of the HTML link tag will be set to this value. The default value is HATSLINK. See Using style sheets for more information.
Drop-down style class  Web-only 
Optional. The CSS style class associated with the generated drop-down. The value of the class attribute of the HTML drop-down tag will be set to this value. The default value is HATSDROPDOWN. See Using style sheets for more information.
List option style class  Web-only 
Optional. The CSS style class associated with each option in the drop-down. The default value is HATSOPTION. See Using style sheets for more information.
Table style class  Web-only 
Optional. The CSS style class associated with the generated table. The value of the class attribute of the HTML table tag will be set to this value. The default value is HATSTABLE. See Using style sheets for more information.
Table cell style class  Web-only 
Optional. The CSS style class associated with each cell in the generated table. The value of the class attribute of the HTML table cell (td) tag will be set to this value. The default value is HATSTABLECELL. See Using style sheets for more information.
Header row style class  Web-only 
Optional. The CSS style class associated with each header row or column in the generated table. The value of the class attribute of the HTML table row or cell tag will be set to this value. The default value is HATSTABLEHEADER. See Using style sheets for more information.
Odd row style class  Web-only 
Optional. The CSS style class associated with each odd numbered row in the table. The value of the class attribute of the each HTML table row tag in an odd row number will be set to this value. The default value is HATSTABLEODDROW. See Using style sheets for more information.
Even row style class  Web-only 
Optional. The CSS style class associated with each even numbered row in the table. The value of the class attribute of the each HTML table row tag in an even row number will be set to this value. The default value is HATSTABLEEVENROW. See Using style sheets for more information.
Style  Web-only 
Optional. Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.
fieldTextAlignment  Web-only 
For Web projects, if you use a non-monospace font such as Sans Serif, the rendered data does not align properly with spacing problems between words. You can use the source setting, fieldTextAlignment, to correct the alignment of the data. To enable this setting on a project-wide basis, open the source view of the application.hap file, locate the class for the SubfileWidgetV6 widget, and change the value of the setting to NO_SEGMENTING as shown in the following example:
<class name="com.ibm.hats.transform.widgets.SubfileWidgetV6">
.
   <setting name="fieldTextAlignment" value="NO_SEGMENTING"/>
.
</class>
To enable this setting on a component-level basis in a transformation, open the source view for the transformation, locate the ZIETrans:Component tag for the SubfileWidgetV6 widget, and change the value of the setting to NO_SEGMENTING as shown in the following example:
...
widget="com.ibm.hats.transform.widgets.SubfileWidgetV6"
...
widgetSettings="...|fieldTextAlignment:NO_SEGMENTING|..."
...
The values for this setting are WORD_BY_WORD and NO_SEGMENTING. The default value is WORD_BY_WORD.
Note:
This setting has no effect when you use the Table (visual) recognition option for data recognition in the Subfile component.

__________________________________________________________________________

Subfile (popup)

The subfile (popup) widget is responsible for rendering a 5250 subfile.

This widget renders data supplied by the subfile component.

Note:
For DBCS considerations when using this widget see SBCS eliminate maximum length.

The following figure shows how a subfile widget appears on a transformation, using the data from the Subfile component example as input:

Figure 49. Subfile (popup) widget example
Example of subfile (popup) widget
  1. Caption type (show both)
  2. Launcher type (image)

The following settings can be configured for this widget:

Caption type:
Specifies how the caption for each item in the pop-up dialog is determined. The value of the leading token and the description are derived from the component; you can select what appears as the caption. For example, if the host screen had an action that read 5. Display, you can have the caption display 5, or Display, or 5. Display.
Show subfile actions
Select this box if you want to display the descriptive text of the subfile actions, such as 2=Add, with the rendered subfile in addition to the pop-up dialog. The check box is not enabled when you select Show description.
Auto submit on select
If selected, once a selection is made in the pop-up dialog, it is submitted.
Show submit button
If selected, a submit button is rendered below the subfile.
Submit button caption
Optional. Specifies the caption of the submit button.
Button style class  Web-only 
Optional. The CSS style class associated with the generated submit button. The value of the class attribute of the HTML button tag will be set to this value. The default value is HATSBUTTON. See Using style sheets for more information.
Button row style class  Web-only 
Optional. The CSS style class associated with the generated table row which contains the submit button. The default value is HATSTABLEHEADER. See Using style sheets for more information.
Launcher type
Specifies whether to use an Image, a Button, or a Link to open the pop-up dialog.
Image filename
Optional. File name of the image to use for the launcher.
Caption
Optional. Caption to use for the launcher button or link.
Link style class  Web-only 
Optional. The CSS style class associated with the generated action link. The value of the class attribute of the HTML link tag will be set to this value. The default value is HATSLINK. See Using style sheets for more information.
Button style class  Web-only 
Optional. The CSS style class associated with the generated action button. The value of the class attribute of the HTML button tag will be set to this value. The default value is HATSBUTTON. See Using style sheets for more information.
Close link caption  Web-only 
The caption to appear for the Close link action.
Rows per record
Number of rows
Specify the fixed number of rows per record in your subfiles.
Columns placement  Web-only 

This widget can be configured to display primary columns of data, and optionally to have a details section to view additional detail columns. This setting is useful when displaying table data on a mobile device. For more information about these settings and about other settings for this option that do not appear in the ZIETrans Toolkit GUI, see Considerations and limitations for mobile devices.

Primary columns
Use this field to specify which columns to display, and in what order. The field allows for numeric any-order listing of column numbers with expansion shorthand, and columns are allowed to be displayed more than once or not at all, for example, 1,3,2,5-7,2-3,9.

A hyphen (-) between two numbers indicates a range of columns. You can use the asterisk character (*) to indicate the last available column. An asterisk alone means columns 1 through n where n is the last available column. You can also use 5* as a shorthand for 5-*. These mean the same thing: 1-*, *.

For Web projects, this setting defaults to *, or all columns. For Web projects optimized for mobile devices, this setting defaults to 1-2, or columns 1 and 2.

Note:
The numbers represent columns provided to the widget by the component. They do not represent the columns originally recognized by the component, which may or may not be excluded, before providing them to the widget.
Detail columns
Use this optional field to specify which detail columns to display when requested, and in what order. The field allows for numeric any-order listing with expansion shorthand.

For Web projects, this setting defaults to empty, or no detail columns section. For Web projects optimized for mobile devices, this setting defaults to 3*, or column 3 through the last column.

Keep detail columns on the server
Select this option to keep the detail columns section on the server until requested by the user. This reduces the amount of HTML output at initial rendering. The default is cleared.
Enable foreground colors
If selected, host screen foreground colors are rendered.

For Web applications, colors are mapped to CSS stylesheet classes representing that color. For example, if a host screen field is marked as RED, the Field widget will enclose the generated HTML for that field in a tag whose class name attribute is set to HRED. This allows for you to remap host screen colors on your generated Web page.

Note:
The blacktheme.css directly maps host screen field foreground colors (for example, red text on the host screen will appear as red text on the generated Web page). However, other stylesheet files like monochrome.css, map field colors differently in an attempt to create a consistent, modern style.
Field style class  Web-only 
Optional. The CSS style class associated with the generated field. The value of the class attribute of the HTML tag will be set to this value. The default value is HATSFIELD. See Using style sheets for more information.
Enable extended attributes
If selected, extended field attributes (blink, reverse video, underline, and column separator) are rendered with the specified style. See Using style sheets for more information.
Blink style  Web-only 
The CSS style setting you want to use to render blinking text from the host screen.
Reverse video style  Web-only 
The CSS style setting you want to use to render reverse video text from the host screen.
Underline style  Web-only 
The CSS style setting you want to use to render underlined text from the host screen.
Column separator style  Web-only 
The CSS style setting you want to use to render column separators from the host screen.
Strip underscores on input field
Select this box if you want to strip the underscores from text when it is rendered.
Trim spaces on input field
Select this box to trim leading and trailing spaces from the input field.
Enable cursor positioning option on input fields  Web-only 
Select this box to allow the user to switch from data input mode to cursor positioning mode for input fields. When in data input mode, the user can enter data into the input field. When in cursor positioning mode, the user can tab to or otherwise position the cursor on any character in the input field. This setting is useful for Web projects that are optimized for mobile devices that do not have other cursor positioning capabilities. For more information about other settings for this option that do not appear in the ZIETrans Toolkit GUI, see Considerations and limitations for mobile devices for more information.
Provide spreadsheet file
If selected, a launcher is provided that will retrieve the table data in spreadsheet file format.
File name prefix
Specifies a prefix for the spreadsheet file name. The default is spreadsheet. The complete file name will be in the form of FileNamePrefix_TimeStamp, where the timestamp format is MMDDYY_HHMMSS, for example, spreadsheet_041506_113020.
File name extension
The extension name for the type of spreadsheet format. Options are .csv and .xls. The .csv file are pure text files, with data columns separated by commas. The .xls files are Microsoft Excel Biff3 files. The default is .csv.
Launcher type
The type of launcher to display to the user. Options are Link, Image, and Button. The default is Link (Web projects).
Launcher caption
The caption for the launcher to display to the user. The default is Download (Web projects).
Button style class  Web-only 
The CSS style class associated with the generated launcher button. The value of the class attribute of the HTML button tag will be set to this value. The default value is HATSBUTTON. See Using style sheets for more information.
Link style class  Web-only 
Optional. The CSS style class associated with the generated launcher link. The value of the class attribute of the HTML link tag will be set to this value. The default value is HATSLINK. See Using style sheets for more information.
Input field style class  Web-only 
Optional. The CSS style class associated with the generated input field. The value of the class attribute of the HTML input tag will be set to this value. The default value is HATSINPUT. See Using style sheets for more information.
Window style class  Web-only 
Optional. The CSS style class associated with the generated window. The default value is HATSPOPUP. See Using style sheets for more information.
Close link style class  Web-only 
Optional. The CSS style class associated with the link used to close the window. The default value is HATSLINK. See Using style sheets for more information.
Item link style class  Web-only 
Optional. The CSS style class associated with the links used to select an item from the widget. The default value is HATSPOPUPITEMLINK. See Using style sheets for more information.
Table style class  Web-only 
Optional. The CSS style class associated with the generated table. The value of the class attribute of the HTML table tag will be set to this value. The default value is HATSTABLE. See Using style sheets for more information.
Table cell style class  Web-only 
Optional. The CSS style class associated with each cell in the generated table. The value of the class attribute of the HTML table cell (td) tag will be set to this value. The default value is HATSTABLECELL. See Using style sheets for more information.
Header row style class  Web-only 
Optional. The CSS style class associated with each header row or column in the generated table. The value of the class attribute of the HTML table row or cell tag will be set to this value. The default value is HATSTABLEHEADER. See Using style sheets for more information.
Odd row style class  Web-only 
Optional. The CSS style class associated with each odd numbered row in the table. The value of the class attribute of the each HTML table row tag in an odd row number will be set to this value. The default value is HATSTABLEODDROW. See Using style sheets for more information.
Even row style class  Web-only 
Optional. The CSS style class associated with each even numbered row in the table. The value of the class attribute of the each HTML table row tag in an even row number will be set to this value. The default value is HATSTABLEEVENROW. See Using style sheets for more information.
Style  Web-only 
Optional.Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.
fieldTextAlignment  Web-only 
For Web projects, if you use a non-monospace font such as Sans Serif, the rendered data does not align properly with spacing problems between words. You can use the source setting, fieldTextAlignment, to correct the alignment of the data. To enable this setting on a project-wide basis, open the source view of the application.hap file, locate the class for the SubfilePopupWidget widget, and change the value of the setting to NO_SEGMENTING as shown in the following example:
<class name="com.ibm.hats.transform.widgets.SubfilePopupWidget">
.
   <setting name="fieldTextAlignment" value="NO_SEGMENTING"/>
.
</class>
To enable this setting on a component-level basis in a transformation, open the source view for the transformation, locate the ZIETrans:Component tag for the SubfilePopupWidget widget, and change the value of the setting to NO_SEGMENTING as shown in the following example:
...
widget="com.ibm.hats.transform.widgets.SubfilePopupWidget"
...
widgetSettings="...|fieldTextAlignment:NO_SEGMENTING|..."
...
The values for this setting are WORD_BY_WORD and NO_SEGMENTING. The default value is WORD_BY_WORD.
Note:
This setting has no effect when you use the Table (visual) recognition option for data recognition in the Subfile component.

__________________________________________________________________________

Table

The Table widget is responsible for rendering a GUI table.

This widget renders data supplied by the following components:

Note:
For DBCS considerations when using this widget see SBCS eliminate maximum length.

The following figure shows how a table widget appears on a transformation, using the data from the Table (field) component example as input:

Figure 50. Table widget example
Example of table widget
  1. Header row (1)
  2. Header column (not specified)

The following settings can be configured for this widget:

Header row  Web-only 
The comma-separated or ranged set of rows which should be rendered as a table header. This setting is useful for highlighting important rows in the generated table. The rows represented by this value are based on the recognized table, not on the actual host screen. Example values: 1,2,3...., 1,2-4, 3-5. See the description for Header row style class setting.
Trim spaces on headers
If selected, the text inside of cells of a header row is trimmed of whitespace (extra spaces) from both ends.
Header column  Web-only 
The comma-separated or ranged set of table columns which should be rendered as a header. This setting is useful for highlighting important columns (generally the first column) in the generated table. The columns represented by this value are based on the recognized table, not on the actual host screen. Example values: 1,2,3...., 1,2-4, 3-5. See the description for Header row style class setting.
Disable input
If selected, rendered input fields are read only. A read only input field appears as a regular input field, but does not allow the user to modify its contents. This is useful in cases where you want to display the contents of a non-protected field to a user, but you do not want the user to modify the contents.
Columns placement  Web-only 

This widget can be configured to display primary columns of data, and optionally to have a details section to view additional detail columns. This setting is useful when displaying table data on a mobile device. For more information about these settings and about other settings for this option that do not appear in the ZIETrans Toolkit GUI, see Considerations and limitations for mobile devices.

Primary columns
Use this field to specify which columns to display, and in what order. The field allows for numeric any-order listing of column numbers with expansion shorthand, and columns are allowed to be displayed more than once or not at all, for example, 1,3,2,5-7,2-3,9.

A hyphen (-) between two numbers indicates a range of columns. You can use the asterisk character (*) to indicate the last available column. An asterisk alone means columns 1 through n where n is the last available column. You can also use 5* as a shorthand for 5-*. These mean the same thing: 1-*, *.

For Web projects, this setting defaults to *, or all columns. For Web projects optimized for mobile devices, this setting defaults to 1-2, or columns 1 and 2.

Note:
The numbers represent columns provided to the widget by the component. They do not represent the columns originally recognized by the component, which may or may not be excluded, before providing them to the widget.
Detail columns
Use this optional field to specify which detail columns to display when requested, and in what order. The field allows for numeric any-order listing with expansion shorthand.

For Web projects, this setting defaults to empty, or no detail columns section. For Web projects optimized for mobile devices, this setting defaults to 3*, or column 3 through the last column.

Keep detail columns on the server
Select this option to keep the detail columns section on the server until requested by the user. This reduces the amount of HTML output at initial rendering. The default is cleared.
Strip underscores on input field
Select this box if you want to strip the underscores from text when it is rendered.
Trim spaces on input field
Select this box to trim leading and trailing spaces from the input field.
Enable cursor positioning option on input fields  Web-only 
Select this box to allow the user to switch from data input mode to cursor positioning mode for input fields. When in data input mode, the user can enter data into the input field. When in cursor positioning mode, the user can tab to or otherwise position the cursor on any character in the input field. This setting is useful for Web projects that are optimized for mobile devices that do not have other cursor positioning capabilities. For more information about other settings for this option that do not appear in the ZIETrans Toolkit GUI, see Considerations and limitations for mobile devices for more information.
Enable foreground colors
If selected, host screen foreground colors are rendered.

For Web applications, colors are mapped to CSS stylesheet classes representing that color. For example, if a host screen field is marked as RED, the Field widget will enclose the generated HTML for that field in a tag whose class name attribute is set to HRED. This allows for you to remap host screen colors on your generated Web page.

Note:
The blacktheme.css directly maps host screen field foreground colors (for example, red text on the host screen will appear as red text on the generated Web page). However, other stylesheet files like monochrome.css, map field colors differently in an attempt to create a consistent, modern style.
Enable extended attributes
If selected, extended field attributes (blink, reverse video, underline, and column separator) are rendered. Also, for 3270 Web applications, extended field colors are mapped (see the preceding setting for more information). See Using style sheets for more information.
Blink style  Web-only 
The CSS style setting you want to use to render blinking text from the host screen.
Reverse video style  Web-only 
The CSS style setting you want to use to render reverse video text from the host screen.
Underline style  Web-only 
The CSS style setting you want to use to render underlined text from the host screen.
Column separator style  Web-only 
The CSS style setting you want to use to render column separators from the host screen.
Provide spreadsheet file
If selected, a launcher is provided that will retrieve the table data in spreadsheet file format.
File name prefix
Specifies a prefix for the spreadsheet file name. The default is spreadsheet. The complete file name will be in the form of FileNamePrefix_TimeStamp, where the timestamp format is MMDDYY_HHMMSS, for example, spreadsheet_041506_113020.
File name extension
The extension name for the type of spreadsheet format. Options are .csv and .xls. The .csv file are pure text files, with data columns separated by commas. The .xls files are Microsoft Excel Biff3 files. The default is .csv.
Launcher type
The type of launcher to display to the user. Options are Link, Image, and Button. The default is Link (Web projects).
Launcher caption
The caption for the launcher to display to the user. The default is Download (Web projects).
Button style class  Web-only 
The CSS style class associated with the generated launcher button. The value of the class attribute of the HTML button tag will be set to this value. The default value is HATSBUTTON. See Using style sheets for more information.
Link style class  Web-only 
Optional. The CSS style class associated with the generated launcher link. The value of the class attribute of the HTML link tag will be set to this value. The default value is HATSLINK. See Using style sheets for more information.
Table style class  Web-only 
Optional. The CSS style class associated with the generated table. The value of the class attribute of the HTML table tag will be set to this value. The default value is HATSTABLE. See Using style sheets for more information.
Table cell style class  Web-only 
Optional. The CSS style class associated with each cell in the generated table. The value of the class attribute of the HTML table cell (td) tag will be set to this value. The default value is HATSTABLECELL. See Using style sheets for more information.
Header row style class  Web-only 
Optional. The CSS style class associated with each header row or column in the generated table. The value of the class attribute of the HTML table row or cell tag will be set to this value. The default value is HATSTABLEHEADER. See Using style sheets for more information.
Odd row style class  Web-only 
Optional. The CSS style class associated with each odd numbered row in the table. The value of the class attribute of each HTML table row tag in an odd row number will be set to this value. The default value is HATSTABLEODDROW. See Using style sheets for more information.
Even row style class  Web-only 
Optional. The CSS style class associated with each even numbered row in the table. The value of the class attribute of each HTML table row tag in an even row number will be set to this value. The default value is HATSTABLEEVENROW. See Using style sheets for more information.
Style  Web-only 
Optional.Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.

__________________________________________________________________________

Text input

The Text input widget is responsible for rendering HTML input fields.

This widget renders data supplied by the following components:

Note:
For DBCS considerations when using this widget see SBCS eliminate maximum length.

The following figure shows how a text input widget appears on a transformation, using the data from the Command line component example as input:

Figure 51. Text input widget example
Example of text input widget
  1. Caption (from component)

The following settings can be configured for this widget:

Override size
If selected, the specified size value will be set on each generated input field. This setting is useful for visually changing the size of a large host input field. If cleared, the size of the input field is determined by the recognizing component.
Size
The size of each input field.
Note:
This value is interpreted by the browser - no guarantee is made as to how an input field will be rendered on different browsers.
Override maximum length
If selected, the specified maximum length value will be set on each generate input field. This setting is useful for manually restricting the number of characters that can be entered into an input field. If cleared, the maximum number of allowable characters is determined by the recognizing component.
Maximum length
The maximum number of characters that can be entered into each input field.
Add input attributes
If selected, the specified attributes will be added on each input field. This setting is useful for adding any extra attributes which are useful for customization. If type attribute is specified, the default type=text will be overridden by specified attribute. Same way maxlength and size attributes also will be overridden by specified attributes.
Input attributes
Any valid attribute value pair or a set of attribute value pairs separated by space. Any double quotes entered will be converted to single quotes. If any attribute value contains spaces, specify it with in single quotes
Note:
The attribute value pair is interpreted by the browser - no guarantee is made as to how an input field will be rendered on different browsers. Example input attributes: type=date type=‘image' alt=‘Click me!' src=‘my-img.png' width='80' height='30'
Caption source
Specifies how the caption for the generated input field is determined. Options: From component (use the extracted caption from the component) or Custom (use the specified caption).
Custom caption
Optional. Specifies the caption for the input field.
Note:
Leave this setting blank to not generate a caption for the check box.
Number of columns per row
The number of input fields to display horizontally before wrapping to the next line.
Notes:
  1. This setting is not applicable in default rendering.
  2. The widget preview does not always match the full page preview. This happens because the widget preview simply renders the component's output. It does not try to preserve the alignment of the screen when it renders, as is done in the full page preview.
Read only
If selected, the rendered input field is read only. A read only input field appears as a regular input field, but does not allow the user to modify its contents. This is useful in cases where you want to display the contents of a non-protected field to a user, but you do not want the user to modify the contents.
Strip underscores on input field
Select this box if you want to strip the underscores from text when it is rendered.
Trim spaces on input field
Selecting this trims leading and trailing spaces from the input field.
Enable cursor positioning option on input fields  Web-only 
Select this box to allow the user to switch from data input mode to cursor positioning mode for input fields. When in data input mode, the user can enter data into the input field. When in cursor positioning mode, the user can tab to or otherwise position the cursor on any character in the input field. This setting is useful for Web projects that are optimized for mobile devices that do not have other cursor positioning capabilities. For more information about other settings for this option that do not appear in the ZIETrans Toolkit GUI, see Considerations and limitations for mobile devices for more information.
Enable foreground colors
If selected, host screen foreground colors are rendered.

For Web applications, colors are mapped to CSS stylesheet classes representing that color. For example, if a host screen field is marked as RED, the Field widget will enclose the generated HTML for that field in a tag whose class name attribute is set to HRED. This allows for you to remap host screen colors on your generated Web page.

Note:
The blacktheme.css directly maps host screen field foreground colors (for example, red text on the host screen will appear as red text on the generated Web page). However, other stylesheet files like monochrome.css, map field colors differently in an attempt to create a consistent, modern style.
Enable 3270 numeric lock
If selected, the user can enter only numbers 0 through 9, plus sign, minus sign, period, comma, and Hindi numerals into 3270 numeric fields. If cleared, any characters can be entered. The default is cleared.
Note:
For Web applications, you can customize the list of acceptable keys in the lxgwfunctions.js file in the allowNumLockOnly() and allowNumLockOnlyForIEMobile() functions, as appropriate, using character code values.
Enable extended attributes
If selected, extended field attributes (blink, reverse video, underline, and column separator) are rendered. Also, for 3270 Web applications, extended field colors are mapped (see the preceding setting for more information). See Using style sheets for more information.
Blink style  Web-only 
The CSS style setting you want to use to render blinking text from the host screen.
Reverse video style  Web-only 
The CSS style setting you want to use to render reverse video text from the host screen.
Underline style  Web-only 
The CSS style setting you want to use to render underlined text from the host screen.
Column separator style  Web-only 
The CSS style setting you want to use to render column separators from the host screen.
Input field style class  Web-only 
Optional. The CSS style class associated with the generated input field. The value of the class attribute of the HTML input tag will be set to this value. The default value is HATSINPUT. See Using style sheets for more information.
Caption style class  Web-only 
Optional. The CSS style class associated with the generated input field's caption. The default value is HATSCAPTION. See Using style sheets for more information.
Table style class  Web-only 
Optional. The CSS style class associated with the generated table. If more than one input field is rendered, an HTML table will be generated to enclose these fields. The value of the class attribute of the HTML table tag will be set to this value. The default value is HATSTABLE. See Using style sheets for more information.
Style  Web-only 
Optional.Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.

Component and widget mapping

The widgets supplied in ZIETrans Toolkit for use in displaying host components in a GUI are mapped to those components. The following table lists the existing ZIETrans host components and their corresponding widgets.

Table 2. ZIETrans host components and their corresponding widgets
Host component Widget
Command line
List
Popup
Radio button (data entry)
Text input
Field
Field
Function key
Button
Button table
Drop-down (selection)
Link
Radio button (selection)
HTML DDS keyword
Label
Input field
Calendar  Web-only 
Check box
List
Popup
Radio button (data entry)
Text input
Input field with hints
List
Popup
Radio button (data entry)
Item selection
Check box
Drop-down (data entry)
Link (item selection)
List
Popup
Radio button (item selection)
Text input
Light pen (attention)
Button
Link
Radio button (selection)
Light pen (selection)
Check box
Scrollbar field (ENPTUI)
Scrollbar (ENPTUI)
Selection field (ENPTUI)
Button
Check box
Link
Radio button (selection)
Selection list
Button
Button table
Drop-down (selection)
Link
Radio button (selection)
Subfile
Subfile (check box)
Subfile (drop-down)
Subfile (popup)
Table
Graph (horizontal bar)
Graph (line)
Graph (vertical bar)
Table
Table (field)
Graph (horizontal bar)
Graph (line)
Graph (vertical bar)
Table
Table (visual)
Graph (horizontal bar)
Graph (line)
Graph (vertical bar)
Table
Text
Label
URL
Link