|
Return to list of articles
This chapter from the
Spectrum Writer Reference Manual provides
some tips that you may find helpful when making creating HTML-format "Web" reports
from your mainframe files.
How to Format Mainframe Data as HTMLIn earlier chapters we've seen how to create custom reports with Spectrum Writer. In this chapter you will learn how Spectrum Writer can format your reports especially for viewing on Web browsers (such as Internet Explorer, Firefox and Opera). You can put such reports on your company's Intranet or Internet site for easy company-wide (or public) viewing. Or, send the report to your colleagues as an e-mail attachment that they can automatically view from their e-mail reader. Spectrum Writer is a powerful tool in the move toward paperless "enterprise reporting." As you will see, you can simply add one statement to any existing Spectrum Writer report to create a Web-viewable version of that report. But that's just the starting point in making attractive Web reports with Spectrum Writer. Advanced users — those familiar with the HTML language — can insert their own HTML commands into a Spectrum Writer report. These commands can take advantage of such Web features as:
Note: Before reading the rest of this chapter, you should already be familiar with creating regular Spectrum Writer reports. Chapter 2, "How to Request a Report" explains this. How to Create a Web ReportWeb pages can be formatted using a language called HTML. In order to properly view your Spectrum Writer report on the Web, certain HTML commands (also called "tags") must be added to the report. Without these HTML tags, the Web browser would "wrap" all of your report lines together into one big, jumbled "paragraph." The HTML option tells Spectrum Writer to automatically add basic HTML information to your report: OPTION: HTML Figure 35. A basic Web report (viewed on Microsoft’s Internet Explorer) These Control Statements: OPTION: HTML('ABC COMPANY SALES REPORT')
Result in this Web Report: The above statement tells Spectrum Writer to add HTML tags to your report so that it will display properly on a Web browser. After that, all you do is route Spectrum Writer's output to a file which you can then upload to your Web site or other destination. < p class=note>Tip: Name your uploaded file using an extension of ".htm" or ".html". That tells Web browsers that your file is an HTML file. The HTML option also lets you specify a title for your Web page, if you like: OPTION: HTML('ABC COMPANY SALES REPORT') The HTML title is different from the regular report titles. This special HTML title appears at the top of the Web browser's window as the name of your Web page. Figure 35 shows a Web page created using the above statement. Writing Your Own HTML TagsFor users who know the HTML language, Spectrum Writer lets you specify your own HTML tags directly within your Web report. By specifying your own HTML tags, you can create very impressive Web reports like the examples shown in the remainder of this chapter. Note: The rest of this chapter is intended for readers who are familiar with the HTML language. "HTML tags" are formatting instructions that tell Web browsers how to format a portion of a Web page's text. HTML tags always begin with a "less than" sign and end with a "greater than" sign, like this <...>. Many HTML tags are used in pairs. Their formatting information applies to all of the text between the opening HTML tag (for example, <B>) and the closing HTML tag (for example, </B>). Closing HTML tags consist of a slash and the first word (or abbreviation) of the opening tag. For example: ABC COMPANY <B>SALES REPORT</B> When the above text is displayed by a Web browser, it will look like this: ABC COMPANY SALES REPORT The words "SALES REPORT" are in bold letters. That is because those words are within the HTML "bold" tags. Notice that the HTML tags themselves are not displayed by Web browsers. Other HTML tags are used by themselves. For example, <BR>specifies that a line "break" is wanted. It does not require a closing tag. A list of common HTML tags that you might want to use begins on page 321. Spectrum Writer's HTML option causes your report to be surrounded with just enough HTML information to make it viewable on the Web. To further customize your report for the Web, Spectrum Writer lets you insert your own HTML tags (as character literals) directly within your report. Here are some of the places you might want to put your own HTML tags:
Experimenting with HTML TagsBefore we continue, a word of caution is in order. Formatting reports with HTML tags is more of an art than a science. For one thing, there are a number of different versions of HTML and it is constantly evolving as new versions of Web browsers are released. In addition, different browsers sometimes process the same HTML tag in slightly different ways. Furthermore, different preference settings in viewers' browsers can cause the same Web report to look different to different viewers. Finally, remember that the actual report that you see on the Web is the result of a two-step process. First Spectrum Writer formats a text-only report that contains your HTML tags mixed in with your report data. Then the Web browser strips the HTML tags out of the formatted report (sometimes throwing off Spectrum Writer's own carefully calculated alignment) and then reformats the report data that remains. All of this is to say that sometimes you will get quite unexpected results the first time you try out an HTML tag! But with enough experimentation, you can usually achieve the desired result. Tip:While refining a new Web report over and over again, it is easy for HTML syntax errors to creep into the results. There are resources on the Web that perform free syntax-checking of HTML files. This can be very helpful if you are not getting the results you expect from your HTML file. At the time of this writing, one such "HTML validator" service is available at www.w3.org. The following sections show how to successfully use HTML tags in several specific areas of your reports. You can customize a report title by including HTML tags within the title text in your TITLE statement. For example: TITLE: '<H1>ABC COMPANY</H1>' TITLE: '<H2>RECENT SALES</H2>' Spectrum Writer will simply write out your HTML tags along with the rest of your title text. The Web browser will then recognize the HTML tags and format the text within the tags accordingly. The <H1> and </H1> HTML tags in the first TITLE statement above tell the Web browser to format the title text within those tags as a "level 1 header." Thus, the person viewing your report on the Web will see "ABC COMPANY" in big, bold text at the top of each report page. They will not see the HTML tags themselves because the Web browser strips them away. Similarly, the second title will be formatted as a "level 2 header" (somewhat smaller than a level 1 header). Here is another example. In this case, we make the first title red and the second title blue: TITLE: '<H1><FONT COLOR=RED>ABC COMPANY</FONT></H1>' TITLE: '<H2><FONT COLOR=BLUE>RECENT SALES</FONT></H2>' The Figure 36 shows a report that uses the above TITLE statements.
Notice that the You can use HTML tags in the TITLE statement to change a title's font, size and color and to
specify bold, underlined and italicized text. There are also HTML tags to make titles blink
or scroll marquee-like. The appropriate HTML tags are listed in the table that begins on
page 321.
Following are some additional suggestions for certain situations that may come up when
customizing your Web report's titles.
Since a PC screen does not usually display as many report lines as a sheet of paper, it may
take several PC screens to show a single "page" of a Spectrum Writer report. This means
that the report titles and column headings may seem to appear randomly as viewers "page"
through the report online.
Figure 36. A Web report with customized titles
These Control Statements:
Result in this Web Report:
Use the TITLEONCE option to just print the report titles and column headings once at the
beginning of your report. This solves the problem of random titles and saves valuable
screen space for actual data. For example:
OPTION: TITLEONCE
You may also be able to sync the Web browser window with the report pages by specifying
"short" report pages. That would let viewers use their PC's Page Up and Page Down keys
to page through your report, one screen per report page. Use Spectrum Writer's PAGELEN
option to specify a page length of about 20 lines (experiment to get the exact number for
your PC). Also add a blank FOOTNOTE statement to your report. (That forces trailing blank
lines at the end of each page to ensure that all pages are exactly the same length.) For
example:
OPTION: PAGELEN(20)
Then adjust the size of your Web browser window as necessary to exactly match the length
of your report pages. You can also adjust the font size in your Browser's "preferences" to
fit more or fewer lines of the report on each screen.
Note: Be aware that even when this method puts the report pages in sync with your
PC's Web browser window, it may still scroll differently on other PCs.
Specify the NOUNDERSCORES option to eliminate the underscore line that appears after the
column headings. This often looks better on PC screens and also saves valuable screen
space for actual data. For example:
OPTION: NOUNDERSCORES
Remember, you can always use explicit spacing factors to force items into the place you
desire. Also, specifying a single slash (/) at the end of the TITLE statement will prevent
Spectrum Writer from trying to center- or right-justify your title. For example:
The numbers in the above statement are spacing factors that tell Spectrum Writer how
many spaces to put between each item in the title. The trailing slash (/) tells Spectrum
Writer to leave the title left-justified.
You can put HTML tags (as literals) in the COLUMNS statement to customize individual
columns of the report. For example, to make the AMOUNT and TAX columns bold, we could
use this statement:
The above statement causes the literal text "<B>" to appear in each report line before the
AMOUNT column. And the literal text "</B>" will appear as the last item on each line. Of
course the Web browser will recognize these special HTML tags and process them as
formatting instructions, rather than including them as part of the report shown to the
viewer. The viewer won't see these literal texts in the online report, but the AMOUNT and
TAX values will now appear in bold letters on the Web page.
The Web report produced by the above COLUMNS statement would have two blank spaces
(instead of just one) between the CUSTOMER column and the AMOUNT column. That is
because Spectrum Writer defaults to putting one blank space between all report columns.
Thus, there would be one blank space after the CUSTOMER column and one blank space
after the "<B>" column. The Web browser removes that HTML literal, but not the blank space
after it. To solve this problem (which uses up valuable screen space), specify an override
spacing factor of 0 as needed in COLUMNS statements that contain HTML literals:
Figure 37 uses the above statement to make the AMOUNT and TAX columns bold. Notice in
that report that the column headings and total values for the AMOUNT and TAX fields are also
bold. When the HTML (or HTMLAID) option is specified, Spectrum Writer automatically
copies your COLUMNS statement HTML tags into the column heading lines and into the total
lines for you. Thus, the formatting information that you specify for a data column is also
applied to the column headings and total value (if any) for that column.
You can use HTML tags in the COLUMNS statement to change a column's font, size and color
and to specify bold, underlined and italicized text. There are also HTML tags to make
columns blink or scroll. The appropriate HTML tags are shown in the table that begins on
page 321.
The HTML option causes Spectrum Writer to embed your entire report within <PRE>("preformatted") tags. This tells the Web browser to preserve the report's line breaks and
alignment. To accomplish this, the Web browser chooses a non-proportional font for your
report. (A non-proportional font is one where all letters have exactly the same width.) If
you override this by specifying the name of a proportional font (in a <FONT> tag in your
COLUMNS statement), your report columns will probably not line up correctly. Therefore,
it is usually best not to change the font of the body of the report. Or, if you do, be sure to
change it to another non-proportional font. (On the other hand, it is generally safe to specify
any kind of font for the report titles, since they are not in columnar format.)
Figure 37. A Web report with two bold columns
These Control Statements:
Result in this Web Report:
You can also put your own HTML tags in the lines printed at control breaks (including the
Grand Total "control break"). For example, to make the whole total line at a control break
appear in bold, underlined, italicized text, you could specify:
The report in Figure 38 uses the above BREAK statement.
Notice that we did not use the TOTAL parm to customize the total line text (as you would
for a normal report). Instead, we specified NOTOTALS (to suppress the default total line) and
then added a FOOTING parm to create our own total line. There are two reasons for this.
First, while the TOTAL parm would allow us to specify our opening HTML tags, it offers no
way to specify the closing tags, since these must come after the totalled numeric columns.
Second, putting HTML tags in the TOTAL parm throws off the alignment of the totalled
columns. The Web browser strips the HTML tags from the first part of the total line, which
causes the totalled numeric columns to be shifted left.
By using a FOOTING parm (as in the statement above), you can specify both opening and
closing HTML tags. You can also use an explicit spacing factor (the "36") to force the
totalled columns into their proper location. Experimentation is the best way to determine
the correct spacing factor for a particular report.
Tip: When experimenting, use the MAXINCLUDE option to limit the number of
records included in your report. This can greatly speed up your trial runs, especially
if you're working with large input files.
HTML tags can also be used in the BREAK statement's HEADING parm. See Figure 40
(page 309) for an example of this.
You can use HTML tags in the BREAK statement to change a total line's font, size and color
and to specify bold, underlined and italicized text. There are also HTML tags to make text
blink or scroll. The appropriate HTML tags are shown in the table that begins on page 321.
Following are some additional suggestions for certain situations that may come up when
customizing your Web report's control breaks.
You may want to use the <HR> tag to put a "horizontal rule" (line) in your report. For
example, to add lines to a report to separate the regions, you could specify:
The report in Figure 41 (page 310) has such a line at the control breaks.
Including HTML tags in the COLUMNS statement sometimes causes the default total line to
be split into two lines. This is because all HTML literals from the COLUMNS statement are
also copied into the total lines. (This insures that if a report column is bold, for example,
the totals for that column will also be bold.) The problem occurs when there is not enough
room to put the entire total line text before the first HTML tag. Spectrum Writer then puts
the total line text on a separate line so that the HTML tags can appear in the correct location
on the total line. If you want to force the totals onto a single line, specify the NOTOTALS
option on your BREAK statement. Then use a FOOTING parm to specify exactly how your
total line should look. The report in Figure 38 demonstrates this.
Figure 38. A Web report with customized total lines
These Control Statements:
Result in this Web Report:
Use the <IMG> ("image") tag to display a graphic image in your Web report. The graphic
might be a logo, a drawing, a photograph, a chart, a graph, etc. When you include an <IMG>tag in your report output, the Web browser will insert the image into the Web page right at
that point.
The format of the <IMG> tag is:
The "url" identifies the source file that contains your graphic image. The graphic image file
will usually be in GIF or JPEG format and will be named with an extension of ".gif" or
".jpg". The optional WIDTH parm specifies how wide (in pixels) the image should be. The
optional ALIGN parm tells the Web browser how to vertically align any text that follows the
image. The <IMG> tag also has other optional parms not shown above.
Put an <IMG> tag in your TITLE statement to include a graphic among your titles. For
example, to include a corporate logo along with a title at the top of each report page, we
could use these statements:
Of course, for this to work your Web site must have a file named LOGO.GIF that contains
your company's logo.
Figure 39 (page 307) uses TITLE statements similar to the ones shown above. (So do the
reports on page 312 and page 317.)
You can also put an <IMG> tag in the same TITLE statement as your title text. For example:
Notice the ALIGN=MIDDLE parm in the above <IMG> tag. It tells the Web browser to align the
subsequent text with the middle (height wise) of the graphic.
A more powerful (but more complicated) way of combining text and graphics in the title
is to use an HTML table. That technique is discussed under "Using HTML Tables in your
Web Report" (page 312).
You can also put <IMG> tags in your COLUMNS statement to include a graphic in each detail
line of the report. In other words, your report can have one or more columns of graphics,
instead of text. In this case, of course, you do not want to show the same graphic in every
detail line. You want a graphic that is related to the data in the rest of that particular report
line. Use a COMPUTE statement to dynamically build an appropriate <IMG> tag for each
report line.
For example, assume that we want to produce a personnel directory for the Web. We want
the directory to include each employee's photograph. Further assume that our Web site has
photographs of the employee's stored in JPG files. The photograph files are named
EMPnnn.JPG, where nnn is the employee's employee number. We would use the following
COMPUTE statement to build the correct <IMG> tag for the report detail lines:
The COMPUTE statement above builds a unique <IMG> tag for each employee, based on their
employee number. For example, the PICTURE-TAG field for employee number 044 will
contain this text: <IMG SRC="EMP044.JPG" WIDTH=60>.
We can then use this PICTURE-TAG field in our COLUMNS statement:
The first column of the resulting Web report is a column of employee pictures. Figure 39
uses the above statements.
Notice how we handled the column headings in Figure 39. We specified NOCOLHDGS to
suppress the default column headings. Then we used extra TITLE statements to build our
own column headings. (We also used an empty TITLE statement to put a blank line between
the report titles and the column headings.)
Why didn't we just use Spectrum Writer's default column headings? Because adding a
"picture" column to a report tends to throw off the alignment of all of the following column
headings (and of the total values, as well). Remember that when Spectrum Writer formats
its report, the "picture" column just contains text (the <IMG> tag) like any other column.
Later, the Web browser strips away these <IMG>tags in the detail lines and replaces them
with actual images. Those images (photographs, in this example) take up a different
amount of space than the <IMG>tag took up. Since no similar substitution takes place in the
column heading lines (or in the total lines) their spacing no longer matches the detail line
spacing.
When including graphics in the body of your report, you will probably want to use this
technique to control exactly how your column headings look. Similarly, use the BREAK
statement FOOTING parm to precisely control how your total lines look (as we also did in
Figure 38 on page 304).
Putting Graphics in the Body of Your Report
Figure 39. A Web report containing graphics in the title and body
These Control Statements:
Result in this Lotus 1-2-3 Spreadsheet:
You can also use <IMG>tags in the BREAK statement, to place graphics at your report's
control breaks. The report in Figure 41 (page 310) shows an example of this.
Hot links (or "hypertext links") are areas of your Web report that viewers can click on to
obtain some action. For example, clicking on a hot link might cause the browser to jump
to a different part of the report (the Grand Totals, for example). Or it might jump to a
different Web page altogether (for example, to a Web page describing a particular product
in a sales report).
Hot links can also invoke an audio player or even a video clip player. Viewers could click
on a product name in your report, for example, and automatically be shown a video
demonstrating that product in use.
To create a hot link in your report, surround your "hot text" (that is, the text that the viewer
should click on) with the and ("anchor") tags. The url in the tag will
determine what action is taken when the viewer clicks on the text.
If the url is the name of a Web page (for example, an HTML file), the browser will jump to
that Web page when the viewer clicks on the hot link:
If the url is the name of a label within an HTML file (even within the Web report itself) the
browser will jump to that specific location within that Web page:
If the url is the name of an audio file (such as a .WAV, .AU or .MID file), the browser will play
that sound file when the viewer clicks the hot link:
If the url is the name of a video clip (such as an .AVI file) the browser will play that video
clip when the viewer clicks the hot link.
As mentioned, hot links can be used to let viewers easily move around within the report
itself. The report in Figure 41 (page 310) shows an example of using hot links in this way.
Viewers can click on one of the hot texts at the beginning of the report to go directly to the
region they are interested in, or to the Grand Totals. And at the bottom of the report, there
is a another hot link to take them back to the top of the report.
Figure 40 shows the control statements used to create the report in Figure 41. As you can
see in Figure 40, we used PRESCRIPT options to put five hot link texts ahead of the report.
(The PRESCRIPT option puts lines of text before the beginning of the report itself.) The urls
in these links are HTML "labels" within our own report named EAST, NORTH, SOUTH, WEST
and GRAND. We used a POSTSCRIPT option to write one other hot link text at the end of the
report. It references a label called TOP.
| |||||||||||||||||||||||
|
Copyright 2024.
Pacific Systems Group. All rights reserved. |
Home |
Products |
Prices |
Documentation |
30-Day Trials |
Customer Reviews |
Company
|
