Adding Headers and Footers while Rendering

The deficiency of template4 is its low performance. We first assemble all pages and then we insert the header's and footer's HTML. We re-layout the pages while inserting the headers and footers, and this is relatively an expensive operation. We present a more efficient way to populate the headers and footers in template5.html. The difficulty in preparing the header while laying out the page content, is that we need to know the total number of pages for the "Page x of y" message. The trick is to layout the header and footer during the page content assembling, and then update the total number of pages field at the end. In this way, we don't re-layout the page. We just update a field in an existing page, which is less expensive. You can actually observe this algorithm during its execution. In template4.html you saw the headers and footers appearing at the end, after all pages have already been laid out. In template5.html, you can see that the header and footer are laid out together with the page content, except for the total number of pages that is being added at the end.

Download template5.html to your drive from Column92.zip or copy and paste it from Page 8. Once it is on your hard drive, enter its full path name in the Template Source field. Click the Print Preview button to see the effect of the template.

The skeleton of template5 is similar to template4's. The function addFirstPage() assembles the first page. The event handler onPageComplete() fires off whenever a page completes. If there is an overflow, we call addNewPage(). Otherwise, we call addPageTotalToPages() to update the total number of pages on all pages. Notice that we call addHeaderAndFooterToPage() when we assemble the whole page, either in addFirstPage() or in addNewPage().

Next: How to Update Headers and Footers