Using templates

Templates enable you to further control the appearance of your ZIETrans application by customizing a template to match the style of your corporate Web site or applications, or other guidelines. A template is a JSP file in ZIETrans Web projects. Templates have an area reserved for the host screen that is rendered by a ZIETrans transformation. They can contain company logos and information and, in the case of ZIETrans Web templates, links to other Web pages. A template also defines the background color, image, or both, for the area where the transformed host screen appears.

Launching the ZIETrans Template wizard enables you to create a blank template or a template based on one of those shipped with ZIETrans. For ZIETrans Web projects you can also base a template on a Web page (URL or file). You may want to import an existing Web page as a template based on your company's Web site.

ZIETrans supplies templates that you can use in your projects. You can see the names of these templates by expanding the Web Content  Web-only , folder then selecting the Templates folder in the ZIETrans Projects view. The supplied templates include some or all of the following definitions:

Notes:
  1. Newly supplied templates are marked with an asterisk on the Template tab of the Project Settings editor.
  2. When you create a ZIETrans project and select Optimize options for mobile devices, only templates that are optimized for mobile devices are provided for use in the project.

Template examples

This section describes some of the templates shipped with ZIETrans.

Figure 52 shows a host screen using the finance.jsp template that is shipped for use by ZIETrans Web applications. This template provides an example that uses drop-down menus with links to other Web sites along with the application keypad at the bottom.

Figure 52. ZIETrans-supplied Web application finance template
ZIETrans-supplied Web application finance template

Figure 53 shows a host screen using the industry.jsp template that is shipped for use by ZIETrans Web applications. This template provides an example that uses menu bar links to other Web sites along with the application keypad at the bottom.

Figure 53. ZIETrans-supplied Web application industry template
ZIETrans-supplied Web application industry template

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

Note:
You can not copy from the ZIETrans Projects view into the Navigator view.

When you create your project in ZIETrans Toolkit, you select a template to use as the default template for your project. This template is shown in the ZIETrans Projects view with a different icon and the word default next to it. You can change the default template by going to the ZIETrans Projects view and right-clicking on a template located in Web Content/Templates  Web-only , and select Set as Default Template. Another way is by double-clicking on the Project Settings of your ZIETrans project in the ZIETrans Projects view. Go to the Template tab and make your selection for the list.

When you create screen customizations, and the action is to apply a transformation or show URL, 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. To do this, select the template that you want to use as the default template for this project.

Create a Template wizard

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 ZIETrans Toolkit. ZIETrans automatically adds the necessary code to include color and fonts, the ZIETrans default application keypad, and an area for the host screen rendered with a transformation to any templates that you create.

Use the Create a Template wizard to create a new template. You can access the wizard a number of ways, such as:

In the wizard, specify the project and give your template a name. See Using ZIETrans preferences for more information. You can use the Browse button to find and select a different package. Optionally, set a description for your template, then click Next and select one of the following options:

Create a blank template

Select this option to create a blank template.

Prefill the template from an existing project template

Select this option to prefill the new template from an existing template. Select the name of an existing template. What you are actually doing is making a copy of an existing template using the name you specified when you started the Create a Template wizard. A preview of the template you select appears in the window below.

Prefill the template from an existing Web page (URL or file)  Web-only 

Select this option to prefill the new template from an existing Web page (such as your company's existing Web site) or a specific file. Type in a URL or file in the text box or click the Browse button to search for one. Clicking Preview will display the template you have selected.

The Web page, as well as the linked files (for example, images, style sheets), will be downloaded from the Web. Links to the files will be changed to match the corresponding path in your ZIETrans project.

Note:
Custom JavaScript, applets, and so on that are sometimes embedded in an imported Web page may cause difficulties. If your Web site has complex tags, they may need to be modified in order for your template to work with ZIETrans. The Create a Template wizard downloads the page, all images and style sheets but does not make any attempt to try to filter out possibly unsupported JavaScript calls. Web pages using frames are not supported

To make your new template the default template for the project, select the Set as the default template for this project check box.

Click Finish. This will launch the appropriate editor where you can make changes and modifications to your new template.

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.

For ZIETrans Web projects, if you create your own template outside of the ZIETrans Toolkit environment, ensure that the following statements are included:

<LINK rel="stylesheet" href="xxx">
One or more tags that refers to a style sheet that defines each of the following settings:
<ZIETrans:Transform>
This tag defines the location of the transformation that the template surrounds.

Editing templates

Templates in ZIETrans Web projects are JSP files and by default are edited using the Rich Page Editor.

Editing templates for Web projects

You can see all of the templates, those supplied by ZIETrans and any that you have created, by expanding the Templates folder under Web Content in the ZIETrans Projects view. To edit a template using the Rich Page Editor that is built into Rational® SDP, double-click on the name of the template. To see other available editors, right-click on the name of the template and select Open With. See Rational SDP documentation for the Rich Page Editor by selecting Help > Help Contents from the menu bar, and search for Rich Page Editor.

The following restrictions apply to editing templates:

The following sections describe each tab of the Rich Page Editor.

Design

The Design tab of the Rich Page Editor displays the current view of the template as you make changes to it. While on this tab, additional edit options are available from the ZIETrans Tools context menu. For example, you can drag ZIETrans components from the Palette and add HTML tags.

You can also insert global variables, macro keys, host and application keypads, or individual keys. You can insert these items using the ZIETrans Tools menu on the ZIETrans Toolkit menu bar.

If you want to add images to your project, you should import them into the Web Content/Common/Images directory of your project. To import images, click File > Import > General > 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. You can use the drag-and-drop method to copy images into the Design tab view of your template.

Note:
For considerations when using GB18030 national language characters, see Using code page 1388 (GB18030).

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

Using style sheets

A cascading style sheet is a file that defines a hierarchical set of style rules for controlling the rendering of HTML. It allows you to 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 ZIETrans with the style of the template.

Modifying style sheets

ZIETrans provides style sheets to modify color schemes and font size. At least one of these style sheets is applied to the template. While viewing the template on the Design tab, you can apply these style sheets to your template.

By going to the Web Content/Common/Stylesheets folder in the ZIETrans Projects view, you can then double-click the style sheet you want to edit. By default, this opens the style sheet in the CSS Designer editor window along with a preview window that displays samples of the styles in the style sheet.

When you click a particular style in the CSS Designer editor window, a sample of the style is displayed in the preview window.

Determining which styles to edit

It is common to want to change the color of a field on a host screen. The challenge is to know which style is being applied to that particular host field. In order to determine this, you can view the source of the Web page when the host field is displayed, and by examining the source, you can determine which style is being applied.

Suppose you want to change the text that it is being used for the User and Password text on the Sign On screen of a ZIETrans project. To view the source of the Web page, run the ZIETrans project in an actual Web browser until you can see the field in question. Do not use the Web browser built into Rational SDP. You can run the ZIETrans project on the test server in Rational SDP, but you must access the project using an actual browser, for example, Internet Explorer.

When the field in question is visible, if, for example, you are using Internet Explorer, click View on the browser's menu bar and then click Source from the drop-down menu.

Search in the text file for the text that is in the field or near to the field that you want to modify, in this case, User. Just before the text in the source, you will find a CLASS= statement. That statement provides the CLASS or style that is being applied to the text. You can then go into the template or style sheet and edit the style to get the effect you want.

Note:
Instead of viewing the source, if available with your browser, you can use new developer tools, for example Internet Explorer Developer Tools, to inspect particular page elements.

The style change will be applied throughout the ZIETrans application where this style is used. If you create a default application, where the default template is applied to every host screen, this style will be used on every screen. If you want to have a style applied to just one host screen, then you must create a template that gets applied to that specific host screen.

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

ZIETrans style sheets

The following style sheets are shipped with ZIETrans and are included in each new project you create.

Table 3. ZIETrans style sheets
Name Description
blacktheme Black background; foreground color matches host screen color
calendar Calendar popup styles
commontheme Defines elements common to all the style sheets. It is imported by the main style sheet (blacktheme, graytheme, monochrometheme, tantheme, whitetheme)
finance Style sheet for the Finance.jsp template
graytheme Gray background; foreground colors are different shades of gray
industry Style sheet for the Industry.jsp template
inlineCalendar Style sheet for the inlineCalendar option of the Calendar widget
largeFont Font size of all generated output relative to your browser setting and class function
medical Style sheet for the Medical.jsp template
monochrometheme White background; foreground colors are different shades of gray, links are blue
nonFixedFont White background; font size varies
normalFont Font size of all generated output relative to your browser setting and class function
PrintJobWindow Print job window styles
research Style sheet for the Research.jsp template
reverseVideoBlack Reverses the foreground and background colors of the blacktheme style sheet
reverseVideoGray Reverses the foreground and background colors of the graytheme style sheet
reverseVideoMono Reverses the foreground and background colors of the monochrometheme style sheet
reverseVideoTan Reverses the foreground and background colors of the tantheme style sheet
reverseVideoWhite Reverses the foreground and background colors of the whitetheme style sheet
scaleableFont Font size of all generated output scaled according to the browser
smallFont Font size of all generated output relative to your browser setting and class function
tantheme Tan background; foreground colors are different shades of gray and blue
transport Style sheet for the Transport.jsp template
whitetheme White background; foreground color matches host screen color
xlargeFont Font size of all generated output relative to your browser setting and class function
xsmallFont Font size of all generated output relative to your browser setting and class function
Design tab considerations and limitations

Following is a list of considerations and limitations when using the Design tab.

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 Rich Page 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 other tabs of the Rich Page Editor.

Making customized templates, style sheets, and images available

ZIETrans enables you to share customized templates, style sheets and images.

After copying these files, the next time you create a new project you can select the new templates, style sheets, or images.

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 ZIETrans application. The application keypad keys include:

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.
Reset
Clears all the fields on the browser page of any entries made by the user.
Disconnect
Disconnects from the host session. If this key is clicked, a link appears to let the user reconnect to the host.
Screen Reverse (if applicable)
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.
Default
Turns off any customization of the host screen by a transformation and presents the entire host screen as basic HTML. The Default key can be modified by selecting a different template or style sheet for the transformation.
Refresh
Refreshes the current browser screen and performs the current action again.
View Print Jobs (if applicable)
Shows a list of print jobs that the user has created. If print support is not enabled for the project, this button does not appear on the application keypad.

By default, ZIETrans displays the application keypad. To hide the keypad, go to the ZIETrans Projects view, double click the Project Settings of your ZIETrans project, select the Rendering tab, and click on Application Keypad. You then have the option of clearing the check box to hide the keypad.

Note:
Custom keypads and individual keys are defined using individual tags or composites, as a result they are displayed in the template's editor even if the keypad is disabled in your project settings.

Refer to Modifying a ZIETrans project for more information about the settings for keyboard support and keypads.