Templates enable you to further control the appearance of your HATS project. 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 or 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:
When you created your project in HATS Studio, you selected a template to use as the default template for your project.
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 is the action of a screen customization.
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:
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 to create your own 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.
The following sections describe each tab of the HTML editor.
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 menu bar, or the Insert HATS Component drop-down menu on the HATS Studio toolbar.
If you want to add images to your project, 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 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 template.
When you click the Insert Macro Key or Insert Global Variable items on the Insert HATS Tags menu, a wizard appears for you to define those items, as you can in transformations. See Insert Macro Key wizard and Insert Global Variable wizard for more information about these wizards.
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. For example, Cascading Style Sheets (CSS) is a simple style language that enables attaching 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 pop-up 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 Common/Stylesheets node of the HATS Project View tab of the HATS Studio. Double-click on any stylesheet to edit the file. Read the comments in the file to determine the functions of the styles included in the stylesheets.
The Source tab displays the HTML and JSP tags in the template.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 tags of 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.
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. This preview does not include the transformation.
[ Top of Page | Previous Page | Next Page ]