|
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: |
<p><font size="5"><u>@header@</u></font></p>
| 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. |
<hr>
| 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.
|
