Use templates

Templates enable you to further control the appearance of your HATS application by customizing it to look like your corporate site or by modifying an existing template. A template is a JSP file with an area reserved for the host screen that is rendered by a HATS transformation. The template can contain company logos and information and links to other Web pages. A template also defines the background color, image, or both, for the area where the transformed host screen appears.

HATS supplies templates that you can use in your projects. You can see the names of these templates by expanding the Templates node of the HATS Project View tab of the HATS Studio. The supplied templates contain HTML and JSP code to include some or all of the following:

You can make copies of HATS resources in the HATS Project View by simply opening any folder and right-clicking on the resource and selecting Copy. Choose the folder where you wish to Paste the resource and HATS will prompt you for a name. This can be useful as backup when you begin creating your own templates.

When you created your project in HATS Studio, you selected a template to use as the default template for your project. This template is shown in the HATS project view with a different icon and the word "default" next to it. You can change the default template by opening the project settings editor. Double click on the Project Settings of your HATS project in the HATS Project View. Go to the Template tab and make your selection for the drop-down list.

When you create screen customizations, and the action is to apply a transformation, you can select the template to use when the transformation is applied. To make your host application consistent across all screens, you can use the same template for your transformation that you selected for your project default template. You do this by allowing the template to default to the template selected for the project, selecting "(default template)" from the drop-down list. The "(default template)" selection is the default when applying a transformation as the action of a screen customization.

 

Create your own templates

You can create your own custom templates to meet functional needs and corporate style guidelines. You can design custom templates for your projects using the wizards and editors in HATS Studio. HATS automatically adds the necessary code to include a stylesheet, the HATS default application keypad, and an area for the host screen rendered with a transformation to any templates that you create. When you create your own template, ensure that the following required tags are included:

<LINK rel="stylesheet" href="xxx">

One or more tags that refers to a stylesheet that defines each of the following:

  • Appearance of the buttons, links, and keypads

  • Colors for the template background and widgets

  • The font and size for text

<HATS:Transform>

This tag defines the location of the transformation that the template surrounds.

You can see all of the templates, those supplied by HATS and any that you have created, by expanding the Templates node of the HATS Project View tab of the HATS Studio. To edit a template, you use the HTML editor built into WebSphere Studio. You can invoke the HTML editor by double-clicking on the name of the template. See the WebSphere Studio documentation for more information on using the HTML editor features.

There are two ways you can create your own template. Select HATS > New > Template on the HATS Studio toolbar to launch the Create a Template wizard. Select the name, description and destination of your template then click Next and select one of the following choices:

 

Create a blank template

To create a blank template, select the Create a blank template bullet and then click Finish. This will launch the HTML editor where you can make changes and modifications to your new template.

 

Prefill the template with information from an existing HATS template

The Prefill the template with information from an existing HATS template selection allows you to select an existing HATS template from the drop-down list. What you are actually doing is making a copy of an existing HATS template using the name you specified when you started the Create a Template wizard. A preview of the template you select will appear in the window below. Once you have chosen which template to use, click Finish. This will launch the HTML editor where you can make changes and modifications to the existing HATS template.

If you want to use your new template as the default template for your project, make sure you select the name of your template as the default for your project in the project editor.

The following restrictions apply to creating custom templates:

Keep in mind that any changes you make to objects in a project only affect that project. If you want to use the template you create for other projects, you need to copy that template to any new projects you create along with any style sheets or images that were modified.

The following sections describe each tab of the HTML editor.

 

Design

The Design tab displays the current view of the template as you make changes to it. While on this tab, additional edit options are available from the WebSphere Studio toolbar. For example, you can use the Insert drop-down menu from the toolbar to insert things such as images, photographs, text, and text-formatting controls. You can add music that plays when the template is displayed, create layout frames, and add HTML tags. You can also insert global variables, macro keys, host and application keypads, or individual keys from the keypads.

You can select these items using the pull-down menus on the HATS Studio menu bar by selecting HATS Tools > Insert HATS Component.

If you want to add images to your project, import them into the Web Content/Common/Images directory of your project. 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 destination Into Folder. When your image source files are imported, right-click on the Images folder, and select Show thumbnails on the Thumbnails tab in the lower right window to see the images in the folder. Use the drag-and-drop method to copy images into the Design tab view of your template.

When you click the Insert Host Component, Insert Macro or Insert Global Variable items in the HATS Tools menu, a wizard appears where you to define those items, as you do in transformations. See Insert Host Component wizard, Insert Macro Key wizard and Insert Global Variable wizard for more information about these wizards.

 

Use stylesheets

You can control elements of output such as font color, size, and background color in order to maintain the consistency of the area of the screen rendered by HATS with the style of the template. Cascading stylesheet (CSS) is a simple style language that you can use to attach style to HTML elements.

HATS provides stylesheets to modify color schemes and font size. At least one of these stylesheets is applied to the template. While viewing the template on the Design tab, you can apply these stylesheets to your template. Right-click on the Stylesheets folder and select Show Thumbnails from the popup menu. The stylesheet files are shown in the Thumbnails view below the Design tab. To apply one of the stylesheets to your template, double-click the stylesheet.

To change the output style of HATS templates, you can edit a stylesheet that was shipped with HATS. The stylesheets that HATS provides are located in the Web Content/Common/Stylesheets node of the HATS Project View tab of the HATS Studio. Double-click on any stylesheet to launch an editor to edit the file. Read the comments in the file to determine the functions of the styles included in the stylesheets.

For more information on cascading style sheets, go to http://www.w3.org/Style/CSS/.

 

New Templates and Stylesheets

New templates have been added to HATS V5 and previous templates have been modified. These updated templates reference new CSS stylesheet files. Stylesheets have been renamed and updated to include style declarations for each of the default styles that the new widgets generate.

The following stylesheet files are shipped with HATS and are included in each new project you create:

Table 1.
Name Description
blacktheme.css Black background; foreground color matches host screen color
graytheme.css Gray background; foreground colors are different shades of gray
monochrometheme.css White background; foreground colors are different shades of gray
slickWhiteBackground.css White background; used with Slick templates
tantheme.css Tan background; foreground colors are different shades of gray and blue
whitetheme.css White background; foreground color matches host screen color
largeFont.css Font size of all generated output set to 16 point
normalFont.css Font size of all generated output set to 10 point
smallFont.css Font size of all generated output set to 8 point
xsmallFont.css Font size of all generated output set to 7 point
scaleableFont.css Font size of all generated output scaled according to the browser
PrintJobWindow.css Print job window styles
calendar.css Calendar popup styles

 

Source

The Source tab displays the HTML and JSP tags in the JSP file for all the parts of the template. As you make changes on other tabs in the HTML editor, the tags and attributes displayed in the source file change to match.

You can also make changes to the tags and attributes in the source file, and 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 well as rendering <HATS:Component > (and all <HATS:xxxx>) tags. . This is similar to the Design tab, you cannot make changes this content. This preview does not include the transformation.

 

Application keypad

The application keypad contains keys (such as Refresh, Default, and View Print Jobs) that represent application-level functions. These keys control functions within the HATS project. HATS templates, by default, include the default application keypad. The application keypad keys include:

Reset

Clears all the fields on the browser page of any entries made by the end user.

Default

Turns off any customization of the host screen by a transform and presents the entire host screen as the default view.

Reverse Screen

Toggles the screen image from a left-to-right image to a right-to-left image or vice-versa, if the application is running on a host with an Arabic or Hebrew code page. If an Arabic or Hebrew code page is not selected in the project connection settings, this button does not appear on the application keypad.

Refresh

Refreshes the current browser screen and performs the current action again.

Disconnect

Disconnects from the host session. If this key is clicked, a link appears to let the user reconnect to the host.

View Print Jobs

Shows a list of print jobs that the end user has created. If print support is not enabled for the project, this button does not appear on the application keypad.

Turn Keyboard On/Off

Toggles support for using the physical keys on the host keyboard. If keyboard support is not enabled for the project, this button does not appear on the application keypad. For more information, see Enabling keyboard support in projects.

By default, HATS displays the application keypad. In order for HATS not to display the keypad, you need to go to the HATS Project View and double click the Project Settings of your HATS project, select the Rendering tab and click on Application Keypad. You will then have the option of clearing the check box to disable the keypad.

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.

 

Home