By default, the HTML generator uses the "default.htm" template for HTML page layout. You can find this template in the "<installation>\Templates\Html" folder.
In this step, you will explore the default template, and customize your reports by associating them with a different template than the default template.
To explore the default HTML template:
|1.||Open the "Default.htm" template file located in the "<installation>\Templates\Html" folder. Use your favorite editor.|
|2.||Locate the @header@ placeholder.|
|This is where the USoft generator inserts the page title specified for the HTML set when defining an External Set.|
|3.||Locate the @data@ placeholder.|
|The @data@ placeholder is mandatory and indicates at what point data is going to be inserted by the generator.|
|4.||In the default template, the @data@ placeholder is enclosed in the <FONT></FONT> tag pair. Take a look at one of your generated HTML files to verify that data has indeed been inserted between this pair of tags.|
|5.||In the default template file, locate the @template@ string.|
|The @template@ string is used by the generator to identify the table definition the generator should use if the Table layout style is specified.|
|If you want to specify your own table style, replace the table definition containing the @template@ string by a customized version.|
To define a page title:
|1.||Retrieve the STEP11_ESET external set, open its HTML Set window, and type "Booking Overview" in the Page Title field.|
|2.||Regenerate the HTML report by running the STEP11_JOB job, then open the regenerated report in your browser.|
|3.||Open the generated HTML file with your editor.|
|4.||Note the substitution of the @header@ placeholder by the actual page title value.|
To specify some examples of customized layout:
Instead of the default layout, you want the page title to appear in red, centralized on the page and in a larger but not underlined font:
|1.||Make a copy of the "default.htm" file in the "<installation>\Templates\Html" folder within the same folder and rename the copied file to: "Step13_Default.htm".|
|2.||Associate the external set with this new template: In the Definer, retrieve the STEP11_ESET definition and click on the HTML Set button at the HTML Set field. Type "Step13_Default.htm" in the Template File field. Save this setting.|
|3.||Open the "Step13_Default.htm" file using your editor.|
|4.||Carefully locate the HTML command determining the presentation of the page title. This is the first line in the file that has a <p> tag. It reads as follows:|
|5.||In this line, add a center alignment setting to the <p> tag, add a red font color setting, increase the font size, and remove the <u> and </u> tags that make the page title underlined, so that the resulting line reads:|
<p align="center"><font color=red size="7">@header@</font></p>
|6.||Save the customized template (in plain text format).|
|7.||Regenerate the HTML report by running the STEP11_JOB job, and then open the regenerated report in the browser.|
To change to a template with more drastic visual impact:
|1.||Locate the "testdrive.gif" image file and copy it to the <installation>\Templates\Html\Images folder.|
|2.||Open the "Step13_Default.htm" template file with your editor.|
|3.||Locate the line in which a file called "fog.jpg" is specified as the body background of the HTML page. Change the filename from "fog.jpg" to "testdrive.gif".|
|4.||In the same line, replace the "#FFFFFF" value specifying the overall background color of the HTML page to "#000080" (dark blue).|
|The table in which the data are shown looks better with a kaki background color and different border and cellpadding settings.|
|5.||Locate the beginning of the table specifications, which reads:|
<table border="3" cellpadding="3"
<table bgcolor="bdb76b" border="8" cellpadding="2"
|7.||Finally, the horizontal ruler line between the page title and the table does not look good against the new background. Remove it by removing the HTML tag.|
|8.||Save the "Step13_Default.htm" file.|
|10.|| In the browser, issue the Reload command to see the new template which should look as follows:|
You have now completed the long track.