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 HATS Transformation wizard to define a transformation. The name, description, and the screen you define for the transformation are saved in a transformation (.jsp) file. You can 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 Transformations node of the HATS Project View tab of the HATS Studio. To edit a transformation, you use the HTML editor built into WebSphere Studio. You can invoke the HTML editor by double-clicking on the name of the transformation.
The following restrictions apply to creating transformations:
The following sections describe each tab of the HTML editor.
The Design tab displays the current view of the transformation as you make changes to it. While on this tab, you can insert text, graphics, global variables, host components, tabbed folders, macro keys, host and application keypads, or individual keys from the keypads.
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.
You can select these items using the pull-down menus on the menu bar, or the Insert HATS Component drop-down menu on the HATS Studio toolbar.
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 Common/Images directory of your project. To import images, select File > Import > File System to open the Import wizard. Select the location of the image source files you want to import in the Directory field. Select the project_name/webApplication/common/images directory as the destination Folder. When your image source files are imported, right-click the on the Images folder, and select Show thumbnails to see the images in the folder on the Thumbnail tab in the lower right window. You can use the drag-and-drop method to copy images into the Design tab view of your transformation.
You can also import images from the WebSphere Studio Gallery tab.
When you click the Insert Host Component, Insert Tabbed Folder, Insert Macro Key, or Insert Global Variable items on the Insert HATS Tags menu, a wizard appears for you to define those items.
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, click the Highlight input fields checkbox. 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. For information on creating custom host components and widgets, see Creating custom host components and widgets.
Click one of the components in the Component 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 Widget List that are available to render the component. 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 (the magnifying glass). 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.
The default project settings for components and widgets are configured using the General tab of the project editor. Some components and widgets have settings that you can customize by clicking Component Settings or Widget Settings. You can also customize the component and widget settings for a particular transformation using the Insert Host Component wizard, by clicking Component Settings or Widget Settings. For information on the settings that can be customized with the Insert Host Component wizard, see Component and widget settings.
The widgets that are available depend on the selected host components. Table 4 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 Component List. If this message is displayed, you might not have selected a region that contains 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 may have a Command Line component in the region, but your command line uses the token >>> instead of ==>, so 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.
Use this wizard to insert a folder with tabs into your Web page. Tabbed folders are helpful in organizing your components and information when you have a large amount of information to display on the Web page. With the Insert Tabbed Folder wizard, you specify how many tabs you want for your folder. For each tab in the folder, you also specify the following:
Under the Tab advanced options, if you clear the Use default values checkbox, you can specify the following:
Under the Folder advanced options, if you clear the Use default values checkbox, you can specify the following:
The Preview window shows how the tabbed folder will appear, based on the selections you make.
Click OK when you have defined all of the tabbed folder options for each tab in the folder.
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.
With the Insert Macro Key wizard, you can display a macro on the Web page presented to the end user. The end user could execute the macro 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 to the end user, which 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, select one or more macros to add from the list of macros defined in the project by clicking the checkbox next to the name of the macro. You also define how to display and initiate the macro from the Web page. Choose from one of the following:
With the Insert Global Variable wizard, you select a defined global variable from the drop-down list for which you want to display the value. If the value of the global variable is indexed (contains a list of strings), click Advanced to display the Handle Indexed Variables dialog. If you click the Variable is indexed checkbox, you can select one of the radio buttons to specify whether all indices or only a single index is inserted. If you select the Show a single index radio button, you also specify the number of the index to be inserted.
The Source tab displays the HTML and JSP tags in the transformation.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 Insert HATS Component 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.
When a host component and its rendering widget have been inserted, you can use the Edit HATS Component toolbar option to modify the host component and widget. Before you click Edit HATS Component, make sure your cursor is inside of 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.
The Preview tab provides a browser preview of the transformation showing the static HTML content. This is similar to the Design tab, but without the ability to make changes to it. Items defined with the <HATS:Component> tag are not shown in the preview. There are other ways to preview your transformation, along with its associated template.
As mentioned on the Design tab, 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, HATS creates a captured screen (whether you requested it or not). 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.
[ Top of Page | Previous Page | Next Page ]