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.

You can also create your own components and widgets. For more information, see the HATS Programmer's Guide

 

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.

The "|" character which is valid in many component/widget settings implies "OR". For example, the function key component has a setting called "start delimiter". You could specify "PF|F" for the "start delimiter" value. This means HATS 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.

HATS provides the following host components:

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 settings can be configured for this component:

Token

The string of characters which must precede the input field.

Extract field caption

See the Input Field component section for more information.

Trim caption

See the Input Field component section for more information.

Clip to selected region

See the Input Field component section for more information.

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. There are no customizable settings for this component.

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

Field table

The Field Table component is responsible for recognizing logical columns of vertically aligned fields. For a region to be recognized as a field table, 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 can be rendered by the following widgets:

The following settings can be configured for this component:

Include empty row

If true, 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").

Unless you have access to the host screen map which created the table, use the Visual Table component to recognize a tabular region. If this is not possible, turn on the Highlight input fields and Highlight protected fields option on the first page of the Insert Host Component wizard to help determine where field break within the selected host screen region.

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 end user can click. Because function keys appear differently on different host systems, HATS gives you flexibility in configuring the different parts. For example, a host screen could contain the following function keys:

F3: Exit F4: Back F5: Fwd

A function key can be rendered by the following widgets:

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 the description

Optional. The string that must immediately follow the description.

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 settings can be configured for this component:

Extract field caption

If true, a caption for the recognized input field is extracted (see the description above for more information on this algorithm). This extracted caption can be used by the widget.

Strip caption

If true, 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 caption

If true, white space (spaces, tabs, etc) is removed from both ends of the extracted (and stripped) caption.

Clip to selected region

If true, only the part of the input field inside of the selected region is recognized and rendered. If false, 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 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 ")", the separator is ", ", 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 so you will have to modify the component settings in order to pass these along to the rendering widget. You may set the values of the following:

The following settings can be configured for this component:

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 "|" (pipe 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 "|" (pipe 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 "|" (pipe 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 "=".

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.

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", "3" are the leading tokens, and the delimiter is "." (period 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 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.

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.

Selection target

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.

Action key

Optional. Specifies the host aid key that should be pressed after the target input field has been updated with the end 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 true, list items are sorted according to either their leading token or description (see below for more information on 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.

Convert action number

If your host displays full-width characters for the list items' leading token, but it expects the item to be entered into the target input field as single-byte characters, then this parameter must be enabled. This will cause HATS to convert the DBCS item into a SBCS item before it is sent to the host. This setting does not apply for items which are displayed as single-byte characters on the host.

Subfile

The Subfile component is responsible for recognizing 5250 subfiles.

The recognized subfile can be rendered by the Subfile widget.

The following settings can be configured for this component:

Action recognition:

Recognize using default algorithm

If true, use the default recognition algorithm for matching the subfile. If false, use customized settings to recognize the subfile.

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 pipe token, "|". The default is "=". Example: "=| = |-| - |:".

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", "Letter or Digit". The default is "Letter or digit"

Must be specified color

This value is used in conjunction with previous setting 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. The allowable values are "true" or "false". The default is "false".

Color

See description for the previous setting.

Must check for high intensity

Boolean. This value is used in conjunction with Leading token type setting to designate that the subfile action's host command must be of a specific type and the subfile action must use the high intensity field attribute. For example, the subfile action must be a digit, and must use high intensity. The allowable values are "true" or "false". The default is "false".

Must be high intensity

This value specifies whether the subfile action uses the high intensity field attribute, and is only used if "Must check for high intensity" is true. The default is "true".

Header recognition

Recognize by text

Boolean. This value specifies whether the subfile header could be recognized based on strings. The allowable values are "true" or "false". The default is "false".

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 pipe character, "|" More specific headers should be listed first. For example, if "Option", "Opt.", and "Opt" are all possible headers, they should be ordered so 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

Boolean. This specifies whether or not the Subfile Header could be recognized by text at the top of a table of data, which uses the high intensity field attribute. The allowable values are "true" or "false". The default is "false".

Specified color

Boolean. This specifies if the subfile header could be recognized by text of a specific color at the top of a table of data. The allowable values are "true" or "false". The default is "false".

Color

Specifies the color of the subfile header.

Table recognition

Column delimiter

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.

Marker recognition

Recognize by text

If true, the end marker of the subfile should be recognized by the specified string.

Text

String. Strings that can be used to identify the subfile end marker. Multiple values are allowed. Example: "More...|Bottom|End|+".

Start row

First row to look in for the end marker.

Start column

First column to look in for the end marker.

End row

Last row to look in for the end marker.

End column

Last column to look in for the end marker.

High intensity

If true, the end marker of the subfile could be recognized by a high intensity field below the data table.

Start row

First row to look in for a high intensity field.

Start column

First column to look in for a high intensity field.

End row

Last row to look in for a high intensity field.

End column

Last column to look in for a high intensity field.

Empty row

If true, the end marker of the subfile could be recognized by an empty row.

Start row

First row to look for an empty row.

End row

Last row to look for an empty row.

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 settings can be configured for this component:

Preserve line break

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

Visual table

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

A recognized table can be rendered by the following widgets:

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

See the Field Table component section for more information.

Rows to exclude

See the Field Table component section for more information.

Columns to exclude

See the Field Table component section for more information.

Minimum row count

See the Field Table component section for more information.

Minimum column count

See the Field Table component section for more information.

 

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

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 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. 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).

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 choose 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".

Button style class

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 the section on style sheets for more information.

Style

Optional. See the section on 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 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.

Button style class

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 Use stylesheets for more information.

Caption style class

Optional. The CSS style class associated with each item description (to the right of the generate button). The default value is "HATSCAPTION". See Use stylesheets for more information.

Table style class

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 Use stylesheets for more information.

Style

Optional. See Use stylesheets for more information.

Calendar

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

This widget renders data supplied by the Input Field component.

The following settings can be configured for this widget:

Pattern

Required. Specifies the date pattern expected by the host. If multiple host screen input fields have been selected, you can spread the selected date amongst multiple consecutive 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 end 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.

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".

Restrict earliest selectable date

If true, the value specified will be the earliest date an end user can select from the calendar popup.

A user is not prevented from manually entering an earlier date directly into the associated input field based on this setting.

Restrict latest selectable date

If true, the value specified will be the latest date an end user can select from the calendar popup.

A user is not prevented from manually entering a later date directly into the associated input field based on this setting.

Default value

Optional. The default selection in the calendar popup if no date or an invalid date is entered. If no value is specified, today's date (based on the server's date) is automatically selected.

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.

Leave this setting blank to not generate a caption for the input field.

Launcher type

Specifies the style of the launcher. The launcher is used to open the calendar popup. 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 Use stylesheets 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 Use stylesheets for more information.

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 Use stylesheets 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 Use stylesheets 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 Use stylesheets for more information.

Style

Optional. See Use stylesheets for more information.

Check box

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

This widget renders data supplied by the Input Field 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

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.

Leave this setting blank to not generate a caption for the check box.

Number of columns per row

The number of check boxes to display horizontally before wrapping to the next line.

Check box style class

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 Use stylesheets for more information.

Table style class

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 Use stylesheets for more information.

Style

Optional. See Use stylesheets for more information.

Drop-down (data entry)

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

This widget renders data supplied by the following components:

The following settings can be configured for this widget:

Fill from global variable

If true, fill the drop-down 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.

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 indices in this indexed global variable should also match up with the indices in the values global variable (so that the actual value and caption shown to the end user are in sync). If this value is not specified, the caption for each item in the drop-down will be its value.

Fill from string

If true, fill the drop-down from the specified string.

List items

Optional. Specifies the string of items to include in the drop-down. Items should be separated with a ";" (semicolon). To have the list item caption be different than the list item value, enter a "=" (equal sign) then specify a caption. For example, a value of "A=Apple,G=Grape" would render a drop-down with two items "Apple" and "Grape". Selecting the first item, would cause an "A" to be inserted in the associated host screen input field.

Fill from hints

If true, fill the drop-down from hints recognized by the component (only applicable when the Input Field with Hints component is used).

Caption

Specifies how the caption for the generated drop-down 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.

Leave this setting blank to not generate a caption for the drop-down.

Number of columns per row

The number of drop-downs to display horizontally before wrapping to the next line.

Drop-down style class

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 Use stylesheets for more information.

Option style class

Optional. The CSS style class associated with each option in the drop-down. The default value is "HATSOPTION". See Use stylesheets for more information.

Caption style class

Optional. The CSS style class associated with the generated drop-down's caption. The default value is "HATSCAPTION". See Use stylesheets for more information.

Table style class

Optional. The CSS style class associated with the generated table. If more than one drop-down is rendered, an HTML table will be generated to enclose these drop-downs. The value of the "class" attribute of the HTML table tag will be set to this value. The default value is "HATSTABLE". See Use stylesheets for more information.

Style

See Use stylesheets for more information.

Drop-down (selection)

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

This widget renders data supplied by the following components:

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 choose 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".

Auto submit on select

If true, once a selection is made in the drop-down, the Web page form is submitted. If the drop-down contains function keys, the selected list item's key is sent to the host. If the drop 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 true, an HTML submit button is rendered next to the drop-down. 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

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 Use stylesheets for more information.

Drop-down style class

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 Use stylesheets for more information.

Option style class

Optional. The CSS style class associated with each option in the drop-down. The default value is "HATSOPTION". See Use stylesheets for more information.

Caption style class

Optional. The CSS style class associated with the generated drop-down's caption. The default value is "HATSCAPTION". See Use stylesheets for more information.

Table style class

Optional. The CSS style class associated with the generated table. If more than one drop-down is rendered, an HTML table will be generated to enclose these drop-downs. The value of the "class" attribute of the HTML table tag will be set to this value. The default value is "HATSTABLE". See Use stylesheets for more information.

Style

Optional. See Use stylesheets for more information.

Field

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

This widget renders data supplied by the Field component.

The following settings can be configured for this widget:

Character by character rendering

If true, each character in the recognized host screen region is rendered in its own HTML table cell. This causes the generated Web page to line up perfectly (according to how it was lined up on the host screen). Note: The rendering of input fields is handled differently: each input field spans multiple table cells. This causes a "disjoint" look between some static text on the Web page.

Read only

If true, input fields are not rendered. If an input field contained text (and was not password protected) that text is displayed instead. This setting is handy if you want to show a user a page of information, but you do not want them editing it.

Allowing positioning on protected text

If true, all protected text is rendered as HTML links. Clicking one of these links causes the host cursor position to be set to that specific position. This setting is handy if your host application is cursor position-sensitive and needs for your end user to position the cursor on protected text.

Action key

Optional. Specifies the host aid key mnemonic that should be sent to the host when a protected text link is selected. Typical value: "[enter]" - this causes the cursor to be set to the specified location and for enter to be sent.

Trim link

If true, white space (extra space) is trimmed from both ends of the protected text links. This setting is handy for reducing the amount of text that is rendered as links.

Enable foreground colors

If true, host screen foreground colors are mapped to CSS style sheet 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: blacktheme.css directly maps host screen field foreground colors (i.e. 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 true, extended field attributes (blink, reverse video, underline, and column separator) will be rendered with the specified style. Also, for 3270, extended field colors will be mapped (see the preceding setting for more information). See Use stylesheets for more information.

Table style class

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 Use stylesheets for more information.

Style

Optional. See the section on 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:

The following settings can be configured for this widget:

Number of data sets

Specifies the number of data sets to be included in the graph. A data set is a collection of data points representing a set of data (a data set is also known as a series). 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. Note: This setting is only displayed in the settings for the Insert Host Component wizard, because it depends on the extracted data.

Data set source

Specifies how to obtain values for the data set(s). 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

Width, in pixels, of the graph.

Height

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 project's Web Content\Common\Images folder). Click the Browse button to import an image from your system.

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 axises 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 true, 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 end 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

If true, extract row or column labels to show as labels on the X-axis.

Row (or Column)

Specify the number of the rows or columns 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.

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.

Label

The Label widget is responsible for rendering text.

This widget renders data supplied by the Text component.

The following settings can be configured for this widget:

Trim caption

If true, white space (extra spaces, etc.) is removed from both ends of the selected text.

Style class

Optional. The CSS style class associated with the generated text. The default value is "HATSCAPTION". See Use stylesheets for more information.

Style

Optional. See Use stylesheets for more information.

Link

The Link widget is responsible for rendering HTML links.

This widget renders data supplied by the following components:

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 choose 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".

Number of columns per row

The number of links to display horizontally before wrapping to the next line.

Link style class

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 Use stylesheets for more information.

Style

Optional. See Use stylesheets for more information.

Popup

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 end user can use to select a valid value for the associated input field.

This widget renders data supplied by the following components:

The following settings can be configured for this widget:

Fill from global variable

If true, 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.

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 indices in this indexed global variable should also match up with the indices in the values global variable (so that the actual value and caption shown to the end user are in sync). If this value is not specified, the text for each link will be its value.

Fill from string

If true, fill the popup list from the specified string.

List items

Optional. Specifies the string of items to include on the popup window. Items should be separated with a ";" (semicolon). To have the list item caption be different than the list item value, enter a "=" (equal sign) then specify a caption. For example, a value of "A=Apple,G=Grape" would render a popup with two items "Apple" and "Grape". Selecting the first item, would cause an "A" to be inserted in the associated host screen input field.

Fill from hints

If true, fill the popup window from hints recognized by the component (only applicable when the Input Field with Hints component is used).

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 associated input field.

Number of columns per row

The number of input fields to display horizontally before wrapping to the next line.

Launcher type

Specifies the style of the launcher. The launcher is used to open the popup. 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 Use stylesheets 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 Use stylesheets for more information.

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 Use stylesheets 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 Use stylesheets 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 Use stylesheets for more information.

Window style class

Optional. The CSS style class associated with the generated popup window. The default value is "HATSPOPUP". See Use stylesheets for more information.

Close link style class

Optional. The CSS style class associated with the link used to close the popup window. The default value is "HATSLINK". See Use stylesheets for more information.

Item link style class

Optional. The CSS style class associated with the links used to select an item from the popup. The default value is "HATSPOPUPITEMLINK". See Use stylesheets for more information.

Style

Optional. See Use stylesheets for more information.

Radio buttons (data entry)

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

This widget renders data supplied by the following components:

The following settings can be configured for this widget:

Fill from global variable

If true, 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.

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 indices in this indexed global variable should also match up with the indices in the values global variable (so that the actual value and caption shown to the end user are in sync). If this value is not specified, the caption for each radio button will be its value.

Fill from string

If true, populate the set of radio buttons from the specified string.

List items

Optional. Specifies the string of items to populate the set of radio buttons with. Items should be separated with a ";" (semicolon). To have the list item caption be different than the list item value, enter a "=" (equal sign) then specify a caption. For example, a value of "A=Apple,G=Grape" would render two radio buttons with captions "Apple" and "Grape". Selecting the first item, would cause an "A" to be inserted in the associated host screen input field.

Fill from hints

If true, populate the set of radio buttons from hints recognized by the component (only applicable when the Input Field with Hints component is used).

Caption

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 set.

Number of columns per row

The number of radio buttons to display horizontally before wrapping to the next line.

Radio button style class

Optional. The CSS style class associated with each radio button. The default value is "HATSRADIOBUTTON". See Use stylesheets for more information.

Radio button description style class

Optional. The CSS style class associated with each radio button description. The default value is "HATSTEXT". See Use stylesheets for more information.

Caption style class

Optional. The CSS style class associated with the generated caption for the set of radio buttons. The default value is "HATSCAPTION". See Use stylesheets for more information.

Table style class

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 these options. The value of the "class" attribute of the HTML table tag will be set to this value. The default value is "HATSTABLE". See Use stylesheets for more information.

Style

Optional. See Use stylesheets for more information.

Radio buttons (selection)

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

This widget renders data supplied by the following components:

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 choose 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".

Number of columns per row

The number of radio buttons to display horizontally before wrapping to the next line.

Auto submit on select

If true, once a radio button is selected, the Web page form 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 true, an HTML 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

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 Use stylesheets for more information.

Radio button style class

Optional. The CSS style class associated with each radio button. The default value is "HATSRADIOBUTTON". See Use stylesheets for more information.

Radio button description style class

Optional. The CSS style class associated with each radio button description. The default value is "HATSTEXT". See Use stylesheets for more information.

Caption style class

Optional. The CSS style class associated with the generated caption for the set of radio buttons. The default value is "HATSCAPTION". See Use stylesheets for more information.

Table style class

Optional. The CSS style class associated with the generated table. If more than one drop-down is rendered, an HTML table will be generated to enclose these drop-downs. The value of the "class" attribute of the HTML table tag will be set to this value. The default value is "HATSTABLE". See Use stylesheets for more information.

Style

Optional. See Use stylesheets for more information.

Subfile

The Subfile widget is responsible for rendering a 5250 subfile.

This widget renders data supplied by the Subfile component.

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 choose 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".

Auto submit on select

If true, once a selection is made in the drop-down, the Web page form is submitted.

Show submit button

If true, an HTML submit button is rendered below the subfile.

Submit button caption

Optional. Specifies the caption of the submit button.

Button style class

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 Use stylesheets for more information.

Button row style class

Optional. The CSS style class associated with the generated table row which contains the submit button. The default value is "HATSTABLEHEADER". See Use stylesheets for more information.

Drop-down style class

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 Use stylesheets for more information.

Option style class

Optional. The CSS style class associated with each option in the drop-down. The default value is "HATSOPTION". See Use stylesheets for more information.

Table style class

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 Use stylesheets for more information.

Cell style class

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 Use stylesheets for more information.

Header row style class

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 Use stylesheets for more information.

Odd row style class

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 Use stylesheets for more information.

Even row style class

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 Use stylesheets for more information.

Style

Optional. See Use stylesheets for more information.

Table

The Table widget is responsible for rendering an HTML table

This widget renders data supplied by the following components:

The following settings can be configured for this widget:

Header rows

Optional. The comma-separated or ranged set of rows which should be rendered as a table header. This setting is handy 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 setting on header row style below.

Trim headers

If true, the text inside of cells of a header row (see preceding setting) is trimmed of whitespace (extra spaces) from both ends.

Header columns

Optional. The comma-separated or ranged set of table columns which should be rendered as a header. This setting is handy 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 setting on header row style below.

Disable input

If true, input fields are not rendered. If an input field contained text (and was not password protected) that text is displayed instead. The setting is similar to the "Read only" setting of the Field widget.

Table style class

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 Use stylesheets for more information.

Cell style class

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 Use stylesheets for more information.

Header row style class

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 Use stylesheets for more information.

Odd row style class

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 Use stylesheets for more information.

Even row style class

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 Use stylesheets for more information.

Style

Optional. See Use stylesheets 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:

The following settings can be configured for this widget:

Override size

If true, the specified size value will be set on each generate input field. This setting is handy for visually changing the size of a large host input field.

Size

The size of each input field.

This value is interpreted by the browser - no guarantee is made as to how an input field will be rendered on different browsers. If false, the size of the input field is determined by the recognizing component.

Override maximum length

If true, the specified maximum length value will be set on each generate input field. This setting is handy for manually restricting the number of characters that can be entered into an input field. If false, 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.

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.

Number of columns per row

The number of input fields to display horizontally before wrapping to the next line.

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 Use stylesheets 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 Use stylesheets for more information.

Table style class

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 Use stylesheets for more information.

Style

Optional. See Use stylesheets for more information.

 

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 10. HATS V5 host components and their corresponding widgets
Host component Widget

Command line
Drop-down (data entry)
Popup
Radio butons (data entry)
Text input

Field
Field

Field table
Horizontal bar graph
Line graph
Table
Vertical bar graph

Function key
Button
Button table
Drop-down (selection)
Link
Radio buttons (selection)

Input field
Calendar
Check box
Drop-down (data entry)
Popup
Radio buttons (data entry)
Text input

Input field with hints
Drop-down (data entry)
Popup
Radio buttons (data entry)

Selection list
Button
Button table
Drop-down (selection)
Link
Radio buttons (selection)

Subfile
Subfile

Text
Label

Visual table
Horizontal bar graph
Line graph
Table
Vertical bar graph

 

Home