Writing a Dynamic Print Template(2)

The event onLayoutComplete fires when the LayoutRect element is done rendering. We use the event property contentOverflow to tell whether the source is exhausted or the page is overflowed by a longer source.

The function onPageComplete() is called whenever the last page is overflowed by a longer source. This function is similar to the addFirstPage() function we showed on the previous page. We assemble a variable, newHTML, with one LayoutRect element within a DeviceRect element:

function onPageComplete() {
  if (event.contentOverflow) {
    document.all("layoutrect" +
      lastPage).onlayoutcomplete = null;
    newHTML  = "<IE:DEVICERECT
               ID='devicerect" + (lastPage + 1) +
               "' MEDIA='print' CLASS='masterstyle'>";
    newHTML += "<IE:LAYOUTRECT
               ID='layoutrect" + (lastPage + 1) +
               "' ONLAYOUTCOMPLETE='onPageComplete()'
               NEXTRECT='layoutrect" +
               (lastPage + 2) + "'
               CLASS='contentstyle'/>";
    newHTML += "</IE:DEVICERECT>";

    devicecontainer.insertAdjacentHTML("beforeEnd",
    newHTML);
    lastPage++;
  }
}

The trick here is how to assemble those attributes that are unique per page. These are ID (for both DeviceRect and LayoutRect) and NEXTRECT. They all consist of a fixed string concatenated to the page number. The current page number is lastPage + 1. The next page number is lastPage + 2. The DeviceRect element's ID is assembled by concatenating 'devicerect' and (lastPage + 1). The LayoutRect element's ID is assembled by 'layoutrect' and (lastPage + 1). The attribute NEXTRECT needs to reference the next page's LayoutRect element, so its value is 'layoutrect' + (lastPage + 2).

The variable lastPage is initialized to 1 before calling the first page, and is incremented after creating a new page.

Go ahead and try this dynamically-generated page. You can find a complete code listing on one of the next pages.

Next: Code listing of static print template