Edit a transformation

A transformation is a JSP file that defines how to customize specific host screens of your HATS project. Applying a transformation is one of the possible actions of a screen customization. Some common uses of transformations are:

You use the Create a Transformation wizard to define a transformation. When you create your transformation, there are two types you can choose. The transformation can either be Prepopulated with host components or Blank. Prepopulated means that HATS creates a Transformation where each host field is represented by a Host Component, laid out in an HTML table to preserve the layout of your host screen.

Use the HTML editor built into WebSphere Studio to view and modify the information you define for the transformation. See the WebSphere Studio documentation for more information on using the HTML editor features.

You can see the transformations you have created by expanding the Web Content/Transformations folder of the HATS Project View tab of the HATS Studio. To edit a transformation and invoke the HTML editor, double-click on the name of the transformation.

The following restrictions apply to creating transformations:

The following sections describe each tab of the HTML editor that you use to edit a transformation.

 

Design

The Design tab displays the current WYSIWYG view of the transformation as you make changes to it. While on this tab, you can insert objects like some of the following:

You can select the items listed above using the HATS Tools menu on HATS Studio toolbar.

If you edit a transformation and attempt to insert a HATS component between two consecutive text characters, sometimes the tag is not inserted directly at the cursor location.

If you want to add images to your project, such as those in the WebSphere Studio Gallery, it is recommended that you import them into the Web Content/Common/Images directory of your project. You can also import images from the WebSphere Studio Gallery tab.

To import images, click File > Import > File System to open the Import wizard. Select the location of the image source files you want to import in the From directory field. Select the project_name/Web Content/Common/Images directory as the Into folder. When your image source files are imported, right-click the on the Images folder, and select Show Thumbnails on the Thumbnail tab in the lower right window to see the images. Use the drag-and-drop method to copy images into the Design tab view of your transformation.

The HATS Tools menu contains the following:

The last three menu items (Insert Integration Object Input, Insert Integration Object Output, and Insert Forward to HATS Servlet are described in Using Integration Objects.

The remaining list is described below:

 

Insert Host Component wizard

With the Insert Host Component wizard, you select the screen from which you want to extract a host component. You also select a region on the screen from which to extract a host component by drawing a rectangle around the text. Place your cursor at any point on the screen, click and hold the left mouse button, and move the cursor to another location on the screen to draw the rectangle. The fields at the bottom of the wizard show the starting and ending row and column numbers of the rectangle. You can also enter the row and column numbers by typing the numbers in the fields. If you want to see where the input fields are defined on the screen, select the Highlight input fields check box. If you want to see what fields are protected, select the Highlight protected fields check box. You can modify the colors of the input and protected fields.

When you have selected the starting and ending row and column numbers of the screen, click Next to display the rendering options for the host components found in the selected region.

HATS provides host components and widgets. You can choose one of the host components and widgets provided or you can create your own custom host components and widgets.

Click one of the components in the Components list. The Component Preview window displays the component if it is found in the screen region. You select the widget to use to render the host component from the widgets in the corresponding Widgets list. When you select a widget, the Widget Preview window displays how the widget is displayed in the final Web page. A larger widget preview is available if you click the Widget preview in large window icon (the magnifying glass).

If you use the function key components and want them to appear on different lines in your transformation, you will need to use the<BR> tag or map them to a table to force the move. In HATS V4, the function keys were mapped to a table automatically. In HATS V5, the table is not used anymore.

The Widget Preview window and the Widget preview in large window icon (the magnifying glass) show a preview of the widget being applied with the style of the enclosing transformation and template using the included stylesheets and <style> tags.

You can also view the default project settings for the components and widgets by clicking the icons to the right of the Components and Widgets lists. The default project settings for components and widgets are configured using the Rendering tab of the project editor. See Rendering for more information.

Clicking Full page preview will show all the components on the page along with the associated template. This preview shows the page as it will appear to the end user. that can be customized with the Insert Host Component wizard, see

The widgets that are available depend on the selected host components. Table 10 lists the existing HATS host components and their corresponding widgets.

If HATS does not find the component in the screen region, the Component Preview window displays the message The selected region does not contain the component_name component, where component_name is the component selected in the Components list. If this message is displayed, you might have selected a region that does not contain the complete component, or you might need to modify the settings of the component to match the way your host application displays the component. For example, you might have a Command Line component in the region, but your command line uses the token >>> instead of ==>. You could change the token attribute of the Command Line component to look for a command line with the correct token.

Refer to Appendix A. Component and widget descriptions and settings for a list of the host components and widgets.

Click Finish when you have made your component and widget selections.

 

Edit Host Component wizard

With the Edit Host Component wizard, you may select a different screen to look for components from the Select a screen drop-down list. You may also select a different region on the screen from which to extract a host component by drawing a rectangle around the text.

Edit Host Component has the same features as Insert Host Component. It simply allows you to edit a tag that you have already inserted such as an already placed <HATS:Component> tag. For more information, see Insert Host Component wizard.

 

Insert Default Rendering wizard

With the Insert Default Rendering wizard, you select the screen you want to use from the Select a screen drop-down list.

The fields at the bottom of the wizard show the starting and ending row and column numbers of the rectangle. You can also enter the row and column numbers by typing the numbers in the fields. If you want to see where the input fields are defined on the screen, select the Highlight input fields check box. If you want to see what fields are protected, select the Highlight protected fields check box. To modify the colors of the input and protected fields, see Use HATS preferences. When you have selected the starting and ending row and column numbers of the screen, click Finish and the section will be inserted in your screen on the Design tab.

 

Edit Default Rendering wizard

To edit the default rendering, click the section you want to edit on the Design tab, then select Edit Default Rendering from the HATS Tools menu. This will launch the Edit Default Rendering wizard where you can select the screen you want to edit from the Select a screen drop-down list.

The fields at the bottom of the wizard show the starting and ending row and column numbers of the rectangle. You can also enter the row and column numbers by typing the numbers in the fields. If you want to see where the input fields are defined on the screen, select the Highlight input fields check box. If you want to see what fields are protected, select the Highlight protected fields check box. To modify the colors of the input and protected fields, see Use HATS preferences. When you have selected the starting and ending row and column numbers of the screen, click Finish and the section will be inserted in your screen on the Design tab.

 

Insert Tabbed Folder wizard

Use this wizard to insert a folder with tabs into your Web page. Tabbed folders are helpful in organizing your widgets and information to display on the Web page. With the Insert Tabbed Folder wizard, you specify how many tabs you want for your folder. Combining the tabbed folder and the stored screen function enables you to have a folder with a different host screen on each tab. For each tab in the folder, you also specify the following:

Under Tab advanced options, if you clear the Use default values check box, you can specify the following:

Under Folder advanced options, if you clear Use default values check box, you can specify the following:

The Preview window shows how the tabbed folder will appear, based on the selections you make. This preview does not show the components that have been inserted into the tabbed folder. It only displays changes to the folder such as size and color.

You can click Full page preview to show all the components on the page along with the associated template. This preview shows the page as it will appear to the end user.

Click OK when you have defined all of the tabbed folder options for each tab in the folder.

Once you have created a tabbed folder, you can not come back to the Insert Tabbed Folder wizard to make changes. You need to edit the source because the output is in HTML (and HATS component tags).

 

Insert Macro Key wizard

With the Insert Macro Key wizard, the end user could execute the macro on a Web page by clicking on a button or a link, or by selecting the macro from a drop-down list. For example, your Web page could present a logon screen that also has a button for a logon macro. When the end user clicks the button, the macro plays to supply a user ID and a password, and navigates to the next screen that the end user needs to see.

To add a macro to your Web page, click the check box next to the name of one or more macros you want to add. You must also define how to display and initiate the macro from the Web page. Choose from one of the following:

HATS uses the description of the macro as the text inserted into the Web page for any of the rendering options but you can still change the name by editing the text in the Source view.

 

Insert Global Variable wizard

The Insert Global Variable wizard allows one of the following:

You select a defined global variable whose value you want to display from the drop-down Name list.

You then select how you want the global variable displayed at runtime. If you select Display global variable value as static text, you can then click the Advanced button you and select Variable is indexed check box then the radio buttons can specify whether all indices or only a single index is inserted. If you click the Show all indices radio button you will need to select the Separator from the drop-down list. If you click the Show a single index radio button, also specify the number of the index to insert. Checking the Shared check box will take the global variable from the shared list.

 

Insert Default Host Keypad

Select Insert Default Host Keypad to add a default host keypad into a transformation. An inserted host keypad is only visible in the Preview and Design views if your project settings are configured to display the default host keypad in your HATS application. To configure your project to show the default host keypad and define which keys to include, go to the HATS Project View, double click the Project Settings of your HATS project, select the Rendering tab and click Host Keypad.

 

Insert Custom Host Keypad

Select Insert Custom Host Keypad to add a custom host keypad into a transformation. Custom host keypads use the same keys specified in the default host keypad settings, located in the Project Settings of your HATS project. With a custom host keypad, you can edit the attributes of individual keypad buttons or links in the Design view by highlighting the button or link, right-clicking, and selecting Attributes.

 

Insert Individual Host Keypad

You can add a custom host key to your transformation by selecting Insert Individual Host Key. From the Insert Host Key panel, select which host key to insert and whether you want it displayed as a button or link, then click OK. After inserting, you can edit the button or link by highlighting, right-clicking, and selecting Attributes. You can add individual host keys to existing host keypads.

 

Insert Default Application Keypad

Select Insert Default Application Keypad to add a default application keypad into a template. To configure default application keypad and define which keys to display, go to the HATS Project View, double click the Project Settings of your HATS project, select the Rendering tab and click Application Keypad.

 

Insert Custom Application Keypad

Select Insert Custom Application Keypad to add a custom application keypad into a template. Custom application keypads use the same keys specified in the default application keypad settings, located in the Project Settings of your HATS project. With a custom application keypad, you can edit the attributes of individual keypad buttons or links in the Design view by highlighting the button or link, right-clicking, and selecting Attributes.

 

Insert Individual Application Keypad

You can add a custom application key to your transformation by selecting Insert Individual Application Keypad. From the Insert Application Key panel, select which application key to insert and whether you want it displayed as a button or link, then click OK. After inserting, you can edit the button or link by highlighting, right-clicking, and selecting Attributes. You can add individual application keys to existing application keypads.

 

Insert All Host Components

Select Insert All Host Components when you want to add all possible host components from a particular screen capture or customization to a transformation. Choose the appropriate project screen from the Select Screen drop-down menu and click OK.

 

Insert Stored Screen

Select Insert Stored Screen when you want to add a stored screen to your transformation. Select the stored screen name and then select All fields (non-protected and protected) or Shared. For example, stored screens can be combined in a transformation to create a screen consisting of all the screens' fields.

For information on combining multiple screens, see Combining multiple host screens.

 

Source

The Source tab displays the HTML and JSP tags in the transformation_name.jsp file necessary for extracting host components from the host screen, the widgets you selected to present those host components, and any other items you added to the transformation. As you make changes on other tabs in the HTML editor, the tags and attributes displayed in the tags of the source file change to match.

You can also make changes directly to the tags and attributes in the source file, or you can insert items using the HATS Tools drop-down menu on the HATS Studio toolbar. The items you can insert on the Source tab are the same items listed on the Design tab. Place your cursor in the source file at the point you want to insert one of the menu items and then select an option from the HATS Tools drop-down menu.

When a host component and its rendering widget have been inserted, you can use the Edit Host Component option in the HATS Tools drop-down menu to modify the host component and widget. Before you click Edit Host Component, make sure your cursor is inside the <HATS:Component> tag.

When you make changes to the file displayed on the Source tab, they are reflected on the appropriate tabs of the HTML editor.

 

Preview

The Preview tab provides a browser preview of the transformation showing the static HTML content as well as rendering <HATS:Component > (and all <HATS:xxxx>) tags. This is similar to the Design tab, but you cannot make changes to this content.

As previously mentioned, you can click Full page preview in the Insert Host Component wizard or the Insert Tabbed Folder wizard to show all the components on the page along with the associated template. This preview shows the page as it will appear to the end user.

Another way to preview your transformation is to use captured screens. For every transformation you create in your project, you associate a screen capture with it. You can see the captured screens by expanding the Screen Captures node of the HATS Project View tab of the HATS Studio. Double-clicking on the name of the screen capture displays a view of the screen capture with two tabs, Host Screen and Preview. The Host Screen tab displays the captured screen as it appears on the host. The Preview tab displays how the transformation is rendered on the Web page, along with the template associated with the transformation.

The transformation and template used to generate the preview are based on screen customizations defined in your project. Preview scans the list of enabled screen customizations. When a screen customization is encountered that matches the captured screen, the first action that applies a transformation (along with the associated template) is used to render the preview. If no matching screen customization is found, the default template and transformation are used for the preview.

 

Host keypad

The host keypad, with keys (such as F1, F2, and Clear) that represent host keys which are used to control functions on the host screen.

By default, HATS does not display the host keypad. In order for HATS to display the keypad, you need to go to the HATS Project View and double click the Project Settings of you HATS project, select the Render Settings tab and click on Host Keypad. You will then have the option of enabling the check box to display the keypad as well as selecting which keys to display.

Notes:

  1. Custom keypads and individual keys are defined using HTML tags, so they are displayed in the HTML editor.

  2. PF keys on host screens that are transformed using the default transformation are displayed as buttons or links. These keys are displayed separately from the default host keypad.

Refer to Modify a HATS project for more information about the settings for keyboard support and keypads.

 

Adding additional keypad buttons to a transformation

To place a button for a new host key on your screen when a transformation occurs, insert an input tag as shown below anywhere inside the HATS:Form area of your transformation, for example, default.jsp. Note that other source data inside the HATS:Form tag delimiters have been left out of this example. This example shows adding the host Home button so it is displayed just above the HATS Host Keypad, with the value parameter specifying the text to be shown on the button itself. Note that both the name parameter and the onclick parameter contain the mnemonic keyword for the host key being sent to the host session ([home] in this example), and both should be changed accordingly for the key you are adding to your transformation.

<HATS:Form>

    <input type='button' name='[home]' class='HostButton' accesskey="hatsportletid" 
   value='Home ' onclick="ms('[home]','hatsportletid')" />

 <HATS:HostKeypad/>   
</HATS:Form>

A button like this can also be added by first selecting Insert Individual Host key from the HATS Tools drop down list in the HATS Studio, and then modifying the appropriate fields for the mnemonic keyword you want to send with that key in the source view of the transformation.

 

Home