Bottom of Page | Previous Page | Next Page | Contents

Appendix A. Component and widget descriptions and settings

HATS 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 HATS Studio. This appendix describes HATS host components and widgets and the settings you can modify.

Component and widget settings

The components and widgets supplied by HATS 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.

Host component settings

The settings for a host component specify how that component is to be recognized on the host screen. Some components' settings are very simple. For example, the only setting for a command line is the string of characters that identify a command line on the host screen. The default value is ===>. If the command lines on your host screens are preceded by ==>, they would not be recognized using the default setting. In this case, you would need to modify the setting so that the command lines would be recognized.

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.

HATS provides the following host components:

Command line

Consists of a string and an input field with the format:

==> [input field]

The ==> is called the token.

Token
You can specify the token HATS uses to identify the command line. Type the value of the token that identifies the command line in the entry field.

Default

The contents of the selected region of the host screen. There are no customizable settings for the default component.

Field

A section of the host screen defined within a user-defined region of the host screen. There are no customizable settings for the field component.

Field table

A table in which each cell is a field that is defined on the host screen. Each field becomes a cell of the field table. HATS determines the table size based on the number of cells in a user-defined rectangular area of a 3270 or 5250 host screen. There are no customizable settings for the field table component.

Function key

A horizontal list of function key names (F or PF) and host screen string descriptions with a delimiter between them (usually in the last row of the host screen). For example, the host screen could contain the following function keys:

F3: Exit F4: Back F5: Fwd

Function keys can have many different appearances on a host screen. To give you flexibility in recognizing function keys, HATS breaks down the appearance of a function key string into four parts. For example, a function key might look like this: PF12=Exit. In this example, the leading token (also known as the start delimiter) is PF, the delimiter (which separates the key number from the description) is =, and the description is Exit. There is no string before the leading token.

String before the leading token
This value is optional. If there is a string that always precedes the start delimiter, such as "option", enter it here.
Start delimiter
This is the string that marks the beginning of a function key string on the host screen. 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.
Delimiter
This is the string that divides the function key number from its description. You can specify more than one value, separated by the "|" (vertical bar) character.
String after the description
This string defines the end of the function key string on the host screen. It might be a blank character or the beginning of another function key string. You can specify more than one value, separated by the "|" (vertical bar) character.

Input field

A field in which text can be entered, with or without the field label. There are no customizable settings for the input field component.

Menu

Similar to the Function key host component; A menu is a list of choices, in which each choice is typically preceded by a letter or a number, with a delimiter character separating the letter or number from the text describing that choice. A menu choice might look like this: option 12.Exit. In this case, the word "option" is a string that precedes all the choices in the menu, and it is called the string before the leading token. The number 12 is the leading token, the period is the delimiter, and "Exit" is the description. Alternatively, you could have a menu whose choices look like this: M: OPEN MAIL, where the leading token is a letter, the delimiter is the colon, and "OPEN MAIL" is the description. There is no string before the leading token in this example.

Delimiter
This is the string that divides the menu choice's leading token from its description. You can specify more than one value, separated by the "|" (vertical bar) character.
String before the leading token
This value is optional. If there is a string that always precedes the start delimiter, such as "option", enter it here.
Minimum required options
If you do not want to recognize a menu with fewer than a certain number of options, enter that number here.

Selection list

A selection list is a lot like a menu, in that it presents a list of options, each of which is preceded by a leading token and a delimiter, such as in the following examples:

1. Prepare form
2. Work with forms you submitted
3. Work with forms requiring action
or
a. Prepare form
b. Work with forms you submitted
c. Work with forms requiring action

You can set the values of the following:

Leading token type
The leading token can be either a letter or a numeric digit.
Delimiter
This is the string that divides the selection's leading token from its description. In the examples, the delimiter is the period (.) following the numbers and letters. You can specify more than one value, separated by the "|" (vertical bar) character.
String before the leading token
This value is optional. If there is a string that always precedes the leading token, such as "option", enter it here.
Minimum required options
If you do not want to recognize a selection list with fewer than a certain number of options, enter that number here.
Must be field separated
Check this box if each selection must be in a separate field.

Subfile

An iSeries or AS/400 screen with a pattern containing all of the following:

There are no customizable settings for the subfile component.

Text

Text that is located within a user-defined region of the host screen. There are no customizable settings for the text component.

Visual table

A table based on the representation of text within a user-defined region of the host screen. By default, space breaks between text are interpreted as cell boundaries.

You can set the values of the following:

Column delimiter
For any character to be recognized as a column delimiter of a visual table, the character must be in the same column of each row in the selected region of the host screen. For example, a region is selected that includes rows 10 through 20. Assuming that a space is the column delimiter, and column 12 is assumed to identify a column, a space must be in column 12 of each row beginning at row 10 and continuing through and including row 20.

In the following example, a space is the column delimiter, and a space exists in column 7 of the host screen for the entire selected region of two rows and 10 columns:

rows     columns
       12345678910
 1     aaa cc ee
 2     bb ddd fff

For this selected region, HATS displays a 2x2 visual table with the following contents from the host screen:

aaa cc ee
bb ddd fff

Select from the drop-down list the string used to separate columns in the table.

Include empty rows
Check this box if you want empty rows in the visual table to appear in the HTML output. Clear this box if you want empty rows to be omitted.
Rows to exclude
Type the numbers of the rows in the table you want to exclude from the HTML presentation. If there is more than one row to exclude, separate the row numbers with a comma (,).
Columns to exclude
Type the numbers of the columns in the table you want to exclude from the HTML presentation. If there is more than one column to exclude, separate the row numbers with a comma (,).

Widget settings

When you customize a host component, you are specifying 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 following widgets:

Button

Displays the host component as an HTML button. You can configure buttons to appear as a vertical or horizontal list by adjusting the number of columns in the display. For example, a HATS project could display buttons in one of the following configurations:

[Prepare form] [Work with forms you submitted] [Work with forms requiring your action]

[Prepare form]
[Work with forms you submitted]
[Work with forms requiring your action]

The button widget presents a graphical representation of a link on the Web page, with a caption that describes its function. A button is created from a host component such as a function key or an item in a menu or a selection list. You can customize these settings for buttons:

Number of columns per row
Type the number of columns of buttons you want to display in each row.
Caption type
The values of the leading token and the description are derived from the host component. Choose whether you want the caption to display the leading token, the description, or both. For example, if the button represents a menu item that read 4.Mail, you can have the caption display 4, or Mail, or 4.Mail.
Caption substitution
If you want to replace strings from the host component with new strings in the button caption, type the substitution values in the form of a=b. If you substitute more than one string, separate the substitutions with a semicolon (;).

Button table

Displays a table of buttons created from host components such as menu items, where the first column contains buttons and the second column contains descriptive text. For example:

[1] Prepare form
[2] Work with forms you submitted
[3] Work with forms requiring your action

You can customize these settings for button tables:

Number of columns per row
Type the number of buttons you want to display in each row.
Caption substitution
If you want to replace strings from the host component with new strings in the button caption, type the substitution values in the form of a=b. If you substitute more than one string, separate the substitutions with a semicolon (;).

Default

The default widget is used to represent an area of the host screen that might contain many different host components (the default component). The settings for the default widget contain information both about recognizing host components within the selected area of the screen and about how to present them.

The default widget includes numerous settings used to recognize and render PF keys from the host screen. You can specify two different ways of recognizing and rendering PF keys. These different ways are specified as the first and second passes. HATS does not make two complete passes of the screen area; rather, HATS examines each character in the specified area, looking for PF key strings. If HATS encounters a character that matches the criteria defined by the first pass, HATS continues checking the characters that follow to determine whether the string fits the criteria to identify a PF key sequence of characters. If the first pass does not identify a PF key sequence, HATS returns to the first character that matched the first pass criteria. Each character is compared to the second pass criteria, to determine whether the string fits the criteria to identify a PF key sequence. If a string is recognized as a PF key sequence according to the first pass criteria, it is not checked against the second pass criteria.

Preserve and map field colors
Click the checkbox if you want to show the same colors for host fields in the HTML output.
Use HTML Teletype (monospace) tag
Click the checkbox if you want the HTML text output to be in a monospace font, which is close to the text spacing on the host screen.
Perform 5250 subfile rendering
Click the checkbox if you want 5250 subfile information rendered as subfiles in the HTML output.
Perform selection list rendering
Click the checkbox if you want selection list information automatically rendered in the HTML output. This is useful for applications (such as on iSeries) that use selections lists on many screens.
Selection list widget
Select one of the following widgets to use for rendering the selection list:
Leading token type
The leading token can be a letter or a numeric digit.
Delimiter
This is the string that divides the selection's leading token from its description. In the examples, the delimiter is the period (.) following the numbers and letters. You can specify more than one value, separated by the "|" (vertical bar) character.
String before the leading token
This value is optional. If there is a string that always precedes the leading token, such as "option", enter it here.
Minimum required options
If you do not want to recognize a selection list with fewer than a certain number of options, enter that number here.
First row to search for selection list
Type the number of the first row on the host screen where a selection list might appear.
Last row to search for selection list
Type the number of the last row on the host screen where a selection list might appear.
Number of columns per row
Type the number of buttons, links, or options you want to display in each row. Unless the captions are short, one per row will look best.
Caption type
The values of the leading token and the description are derived from the host component. Choose whether you want each item of the widget selected to display the leading token, the description, or both. For example, if the item represents a menu item that read 4.Mail, you can have the list item display 4, or Mail, or 4.Mail.
Submit button caption
Determines the text displayed on the submit button. You can select one of the values from the drop-down list (Submit, Go, or #=), or type the text you want the button to display in the entry field.
Caption substitution
If you want to replace strings from the host component with new strings on the button or link or in the drop-down or option list items, type the substitution values in the form of a=b. If you substitute more than one string, separate the substitutions with a semicolon (;).
Show submit button
Click the checkbox if you want to show a submit button in the HTML output. The user must click the button after choosing an option from the drop-down list or option list.
Must be field separated
Check this box if each selection must be in a separate field.
Use character by character rendering for precise alignment
Select the one of the following values from the drop-down list:
Never
Character by character rendering is never used.
Only on pages with popups
Character by character rendering is only used on screens that have pop-up windows. The pop-up windows often look better with this alignment.
Always
Character by character rendering is always used.
Convert menus to buttons
Click the checkbox if you want to convert all menus on the host screen to buttons in the HTML output.
First row to search for menus
Type the number of the first row on the host screen where menus might appear.
Last row to search for menus
Type the number of the last row on the host screen where menus might appear.
Substitute buttons or links for PF keys (first pass)
Click the checkbox if you want to substitute buttons or links for PF keys identified by the criteria specified for the first pass.
First pass HTML control for PF key
You can replace PF keys with links or with buttons. On a link or a button, you can display the number of the key (such as PF12) or its description (such as "Exit"). Choose one of these options from the drop-down list.
First row to search for PF keys
Type the number of the first row on the host screen to search for PF keys using the first-pass criteria.
Last row to search for PF keys
Type the number of the last row on the host screen to search for PF keys using the first-pass criteria.
PF key substitution start delimiter
Type the characters that define the beginning delimiter for a PF key for the first pass through the host screen. For PF12=Exit, PF# is the start delimiter.
PF key substitution middle delimiter
Type the characters that define the delimiter between a PF key and its description for the first pass through the host screen. For PF12=Exit, = is the middle delimiter.
PF key substitution end delimiter
Type the characters that define the ending delimiter for a PF key for the first pass through the host screen. The end delimiter could be something as simple as the space. However, if there are function key descriptions that contain a space, such as PF8=Shift Right, a space is not good to use as the end delimiter. In the example PF8=Shift Right, the end delimiter would have to be defined as the start of another function key, PF#, or more than a single space.
Substitute buttons or links for PF keys (second pass)
Click the checkbox if you want to substitute buttons or links for PF keys identified by the criteria specified for the second pass.
Second pass HTML control for PF key
You can replace PF keys with links or with buttons. On a link or a button, you can display the number of the key (such as PF12) or its description (such as "Exit"). Choose one of these options from the drop-down list.
First row to search for PF keys
Type the number of the first row on the host screen to search for PF keys using the second-pass criteria.
Last row to search for PF keys
Type the number of the first row on the host screen to search for PF keys using the second-pass criteria.
PF key substitution start delimiter
Type the characters that define the beginning delimiter for a PF key for the second pass through the host screen. For PF12=Exit, PF# is the start delimiter.
PF key substitution middle delimiter
Type the characters that define the delimiter between a PF key and its description for the second pass through the host screen. For PF12=Exit, = is the middle delimiter.
PF key substitution end delimiter
Type the characters that define the ending delimiter for a PF key for the second pass through the host screen. The end delimiter could be something as simple as the space. However, if there are function key descriptions that contain a space, such as PF8=Shift Right, a space is not good to use as the end delimiter. In the example PF8=Shift Right, the end delimiter would have to be defined as the start of another function key, PF#, or more than a single space.
Highlight tables
Click the checkbox if you want to highlight the rows of the table, using two alternating colors, in the HTML output.
Even tables row color
Shows the background color to use for the even rows in the table. Click the button to display a color palette if you want to change the color.
Odd tables row color
Shows the background color to use for the odd rows in the table. Click the button to display a color palette if you want to change the color.
Table title color
Shows the color to use for the title of the table. Edit the entry if you want to change the color. The Table title color only applies if either the First line of table is the title or the Line above table is the title box is checked.
Minimum row count in table
If you do not want to recognize a table with fewer than a certain number of rows, enter that number here.
Minimum column count in table
If you do not want to recognize a table with fewer than a certain number of columns, enter that number here.
First row to search for tables
Type the number of the first row on the host screen where a table might appear on the host screen.
Last row to search for tables
Type the number of the last row on the host screen where a table might appear on the host screen.
First line of table is the title
Click the checkbox if you want the first line of the table to be used as the title of the table.
Line above table is the title
Click the checkbox if you want the line above the table to be used as the title of the table.

Drop-down list

A drop-down list widget is a way of representing a large number of choices from a host menu or selection list without taking up a lot of room on the Web page. In the following example, HATS displays a drop-down list that shows three items.

Work with forms
Work with forms you submitted
Work with forms requiring your action

You can customize these settings for drop-down lists:

Show submit button
Click the checkbox if you want to show a submit button in the HTML output. The user must click the button after choosing an option from the list.
Submit button caption
Determines the text displayed on the submit button. You can select one of the values from the drop-down list (Submit, Go, or #=), or type the text you want the button to display in the entry field.
Caption type
The values of the leading token and the description are derived from the host component. Choose whether you want each item in the drop-down list to display the leading token, the description, or both. For example, if the item represents a menu item that read 4.Mail, you can have the list item display 4, or Mail, or 4.Mail.
Caption substitution
If you want to replace strings from the host component with new strings in the drop-down list items, type the substitution values in the form of a=b. If you substitute more than one string, separate the substitutions with a semicolon (;).

Field

Displays the host component in a field of the HATS project. There are no customizable settings for the field widget.

Graph

Displays a graph in which the cells of a table (visual or field table) are divided into data sets.

You can set the values of the following:

Number of data sets
Determines the number of data sets to be included in the graph. The value defaults to the number of data sets found in the extracted data, but you can change the number to include only a subset of the data sets. This setting is only displayed in the settings for the Insert Host Component wizard, because it depends on the extracted data.
Data set source
Select one of the following values from the drop-down list:
Row
Each row of the table constitutes one set of data to be graphed.
Column
Each column of the table constitutes one set of data to be graphed.
Width
Type the width, in pixels, for the graph.
Height
Type the height, in pixels, for the graph.
Background color
Shows the color to use for the background in the graph. Click the button to display a color palette if you want to change the background color.
Background image
Type the path and name of the image to display in the background of the graph. Click the Browse button to locate an image on your system.
X-axis title
Type the text you want to use as the label for the X-axis in the graph.
Y-axis title
Type the text you want to use as the label for the Y-axis in the graph.
Axis color
Shows the color to use for the axis in the graph. Click the button to display a color palette if you want to change the axis color.
Label color
Shows the color to use for the label of the graph. Click the button to display a color palette if you want to change the label color.

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

Extract data point labels
Click the checkbox if you want to extract row or column labels to show as labels on the X-axis.
Row or Column
Type in the entry field the number of the row or column to use as labels on the X-axis. 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.
Extract data set labels (for legend)
Click the checkbox if you want to extract row or column labels to show as labels in the graph legend.
'Row' or 'Column'
Type in the entry field the number of the row or column of text to use as labels in the graph legend.

The label for this entry field is dependent upon the value specified for the Data set source setting. The entry field label is the opposite of the value 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. Type in the entry field 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.

Label

Displays text for a labeled field on the host screen as a label for an input field in the HATS project. There are no customizable settings for the label widget.

Link

The link widget presents a link on the Web page, with a caption that describes its function. A link is created from a host component such as a function key or an item in a menu or a selection list. You can configure links to appear as a vertical or horizontal list by adjusting the number of columns in the display. For example, a HATS project could display the links in one of the following configurations:

Prepare form Work with forms you submitted Work with forms requiring your action

Prepare form
Work with forms you submitted
Work with forms requiring your action

You can customize these settings for links:

Number of columns per row
Type the number of columns of links you want to display in each row. Unless the link captions are short, one link per row will look best.
Caption type
The values of the leading token and the description are derived from the host component. Choose whether you want the link caption to display the leading token, the description, or both. For example, if the link represents a menu item that read 4.Mail, you can have the link caption display 4, or Mail, or 4.Mail.
Caption substitution
If you want to replace strings from the host component with new strings in the link caption, type the substitution values in the form of a=b. If you substitute more than one string, separate the substitutions with a semicolon (;).

Option list

The option list widget is a way of presenting a list of mutually exclusive choices as radio buttons. For example:

O Prepare form
O Work with forms you submitted
O Work with forms requiring your action

You can customize these settings:

Number of columns per row
Type the number of options you want to display in each row.
Show submit button
Click the checkbox if you want to show a submit button in the HTML output. The user must click the button after choosing an option from the list.
Submit button caption
Determines the text displayed on the submit button. You can select one of the values from the drop-down list (Submit, Go, or #=), or type the text you want the button to display in the entry field.
Caption type
The values of the leading token and the description are derived from the host component. Choose whether you want each item in the drop-down list to display the leading token, the description, or both. For example, if the item represents a menu item that read 4.Mail, you can have the list item display 4, or Mail, or 4.Mail.
Caption substitution
If you want to replace strings from the host component with new strings in the drop-down list items, type the substitution values in the form of a=b. If you substitute more than one string, separate the substitutions with a semicolon (;).

Table

Displays the selected information on the host screen as an HTML table.

You can set the values of the following:

Header row
Type the number of the row in the table on the host screen whose contents should be used as column headers on the Web page.
Header column
Type the number of the column in the table on the host screen whose contents should be used as row headers on the Web page.
Read only
Check this box if you want to prevent users from entering text into the table fields in the HTML output. Clear this box to enable users to enter text in the table cells.
Row fill
If a row does not have as many cells as other rows, it can be filled in by expanding the last cell to the end of the table (span) or by adding empty cells (empty). Choose one of these options from the drop-down list.

Text input

Displays the selected information on the host screen as an input field, with or without the description. There are no customizable settings for the label widget.

Component and widget mapping

The widgets supplied in HATS Studio for use in displaying host components on a Web page are mapped to those components. The following table lists the existing HATS host components and their corresponding widgets.

Table 4. HATS host components and their corresponding widgets
Host component Widget
Command line Text input
Default Default
Field Field
Field table
Table
Horizontal bar graph
Vertical bar graph
Line graph
Function key
Button
Button table
Link
Option list
Input field Text input
Menu
Button
Button table
Dropdown list
Link
Option list
Selection list
Button
Button table
Dropdown list
Link
Option list
Subfile Subfile
Text Label
Visual table
Table
Horizontal bar graph
Vertical bar graph
Line graph

HATS:Component tag type and widget attributes

The type and widget attributes of the HATS:Component tag are as follows:

Attribute
Description
type
The host component type. Valid values (and their corresponding host component) are:
Type
Host component
CommandLine
Command line
Default
Entire host screen
Field
Field
FieldTable
Field Table
FunctionKey
Function key
InputField
Input field
Menu
Menu
SelectionList
Selection list
Subfile
Subfile
Text
Text
VisualTable
Visual table
widget
The widget style. Valid values (and their corresponding widgets) are:
Widget
Widget
Button
Button
ButtonTable
Button table
Default
Entire host screen
DropdownList
Drop-down list
Field
Field
HorizontalBarGraph
Horizontal bar graph
Label
Label
LineGraph
Line graph
Link
Link
OptionList
Option list
Subfile
Subfile
Table
Table
TextInput
Text input
VerticalBarGraph
Vertical bar graph
[ Top of Page | Previous Page | Next Page ]