About the MultiPage WebControls Client Behavior
The MultiPage behavior, one of the Windows Internet Explorer WebControls Client Behaviors, creates a collection of PageView objects. You can author the pages declaratively through markup or dynamically through script. This element behavior also generates the rich client experience in uplevel browsers (in this case, Microsoft Internet Explorer 5.5 or later) as part of the WebControls Server Controls.
This document includes the following sections.
- Introduction
- Prerequisites
- MultiPage Elements
- Writing a Simple MultiPage
- Using MultiPage with the TabStrip Behavior
- Generating Pages Dynamically
- Related Topics
Introduction
The MultiPage behavior holds a collection of pages. Among its many uses are displaying multiple, related documents, dividing a report into manageable sections, or creating a virtual scrapbook of pictures.
You can use links or buttons to switch between pages. You can also use a WebControls Client Behavior: TreeView, TabStrip or Toolbar.
MultiPage, like the other WebControls Client Behaviors, is an element behavior. However, it is not a viewlink. The behavior is lightweight. Its contents are not treated as literal content.
Prerequisites
You must download and install the WebControls Client Behaviors at Internet Explorer WebControls Download.
To make the best use of this article, you should be familiar with the basics of Dynamic HTML (DHTML) and element behaviors. Code samples are written in Microsoft JScript.
MultiPage Elements
You can use this behavior on a Web page by inserting the MULTIPAGE custom element into your HTML markup. Properties and methods are accessible through the ID of the custom element.
The MULTIPAGE element contains one type of child element—the PAGEVIEW element. Each PAGEVIEW represents one page and can be repeated as many times as there are pages. You cannot nest PAGEVIEW elements.
Each PAGEVIEW represents one page in a collection of pages. Pages are accessed by index number starting at 0. The value of the selectedIndex attribute on MULTIPAGE indicates which PAGEVIEW displays. The default PAGEVIEW is the first one, whose index is 0. You can find out how many pages are in the collection by getting the value of the numPages property.
The content of a PAGEVIEW can be text and HTML markup.
Writing a Simple MultiPage
This section shows you how to use markup to insert a MultiPage component with three PAGEVIEW elements into an HTML page. The example code uses buttons to switch between pages.
As with any element behavior, start by declaring a namespace and then importing the behavior into the namespace.
<HTML XMLNS:mp>
<HEAD>
<?IMPORT NAMESPACE="mp" IMPLEMENTATION="multipage.htc"/>
</HEAD>
Add the custom element into the page markup where you want the pages to appear.
<mp:MULTIPAGE ID="oMP"></mp:MULTIPAGE>
Use the PAGEVIEW tag to add pages to the component.
<mp:MULTIPAGE ID="oMP">
<mp:PAGEVIEW ID="page0">
This is the first page in the multipage.
</mp:PAGEVIEW>
<mp:PAGEVIEW ID="page1">
This is the second page in the multipage.
</mp:PAGEVIEW>
<mp:PAGEVIEW ID="page2">
This <B>page</B> contains <I>HTML markup</I>.
</mp:PAGEVIEW>
</mp:MULTIPAGE>
Add one button for each page to navigate between pages. The example uses the onclick event to call a function. The function takes the page index as a parameter. Notice that the index in the page collection starts at 0.
<BUTTON onclick="viewPage(0)">Page 1</BUTTON>
<BUTTON onclick="viewPage(1)">Page 2</BUTTON>
<BUTTON onclick="viewPage(2)">Page 3</BUTTON>
Finally, add a script block that passes the page index to the selectedIndex property of the MultiPage object. The value of selectedIndex determines which page is currently visible. The function in the example switches between pages by setting a new value for this property passed from the clicked button.
<SCRIPT>
function viewPage(pageNum)
{
oMP.selectedIndex = pageNum;
}
</SCRIPT>
Click this button to see the full example.
Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/multipage/mpSimpleExample.htm
Using MultiPage with the TabStrip Behavior
The TabStrip behavior complements the MultiPage behavior well. Tabs provide a unifying UI for switching between one PageView and another.
To use these behaviors together, first assign the ID of the MULTIPAGE to the TARGETID attribute on the TABSTRIP. This associates the two behaviors together. Next, insert one TAB element into the TABSTRIP for each PAGEVIEW element in the MULTIPAGE.
There is a 1:1 correspondence between TAB and PAGEVIEW elements. The first TAB displays the first PAGEVIEW, the second TAB the second PAGEVIEW, and so on. Extra TAB elements render but do nothing. A PAGEVIEW without a corresponding TAB cannot be accessed by the TabStrip behavior.
See About the TabStrip WebControls Client Behavior to find out more about the TabStrip behavior.
<HTML XMLNS:mp XMLNS:ts>
<HEAD>
<?IMPORT NAMESPACE="mp" IMPLEMENTATION="multipage.htc"/>
<?IMPORT NAMESPACE="ts" IMPLEMENTATION="tabstrip.htc"/>
</HEAD>
<BODY>
<ts:TABSTRIP ID="oTS" TARGETID="oMP">
<ts:TAB TEXT="Page 1"/>
<ts:TAB TEXT="Page 2"/>
<ts:TAB TEXT="Page 3"/>
</ts:TABSTRIP>
<mp:MULTIPAGE ID="oMP">
<mp:PAGEVIEW ID="page0">
This is the first page in the multipage.
</mp:PAGEVIEW>
<mp:PAGEVIEW ID="page1">
This is the second page in the multipage.
</mp:PAGEVIEW>
<mp:PAGEVIEW ID="page2">
This <B>page</B> contains <I>HTML markup</I>.
</mp:PAGEVIEW>
</mp:MULTIPAGE>
</BODY>
</HTML>
Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/multipage/mpTabExample.htm
Now try changing the UI by moving the TABSTRIP around in relation to the MULTIPAGE. To display the TABSTRIP beneath the MULTIPAGE, switch the order of the two custom elements in the markup.
To display the tabs to the side of the multipage, set the ORIENTATION attribute on the TABSTRIP to vertical and wrap the components in a table to position them.
<TABLE CELLPADDING="0" CELLSPACING="0">
<TR VALIGN="top" HEIGHT="150px">
<TD>
<ts:TABSTRIP ID="oTS" TARGETID="oMP" STYLE="height:100%;"
TABDEFAULTSTYLE="width:60;border:solid 1px black;padding:5px;"
TABHOVERSTYLE="color:blue;"
TABSELECTEDSTYLE="border:solid 1px black;border-right:none"
SEPDEFAULTSTYLE="border-right:solid 1px #000000;" ORIENTATION="vertical">
<ts:TAB TEXT="Page 1"/>
<ts:TABSEPARATOR/>
<ts:TAB TEXT="Page 2"/>
<ts:TABSEPARATOR/>
<ts:TAB TEXT="Page 3"/>
<ts:TABSEPARATOR DefaultStyle="height:100%"/>
</ts:TABSTRIP>
</TD>
<TD WIDTH="100%">
<mp:MULTIPAGE ID="oMP" STYLE="border:solid 1px
#000000;border-left:none;padding:10px;height:100%;width:100%;">
<mp:PAGEVIEW ID="page0">
This is the first page in the multipage.
</mp:PAGEVIEW>
<mp:PAGEVIEW ID="page1">
This is the second page in the multipage.
</mp:PAGEVIEW>
<mp:PAGEVIEW ID="page2">
This <B>page</B> contains <I>HTML markup</I>.
</mp:PAGEVIEW>
</mp:MULTIPAGE>
</TD>
</TR>
</TABLE>
Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/multipage/mpTabVertExample.htm
Generating Pages Dynamically
You can create a multipage entirely through script. The code snippets in this section come from a single example that generates both a multipage and a tabstrip dynamically. The discussion in this section focuses on the MultiPage behavior. See Generating Tabs Dynamically for a discussion of the TabStrip behavior that uses the same example code.
The following code snippet creates a new namespace and imports the MultiPage behavior into it. It then dynamically creates the MULTIPAGE element and appends it to a tag in the markup whose ID is oReport.
function importBehaviors()
{
mpNS = document.namespaces.add("mp","multipage.htc");
mpNS.doImport("multipage.htc");
var oMP = document.createElement("mp:MULTIPAGE");
oMP.id = "dynaPage";
oReport.appendChild(oMP);
}
The next snippet code dynamically creates a new PAGEVIEW element at the end of the page collection. The object represented by dynaPage is the MULTIPAGE custom element. The value of name is the page name being passed to the function. The value of content is the page content for this instance of the PAGEVIEW element.
The variable pageIndex receives the integer value of the total number of pages in the collection from the numPages property of the MultiPage object. The createPageAt method creates a new PAGEVIEW element within the page collection at the specified index. In this case, it always adds the new page to the end of the collection.
The MultiPage behavior requires that you use the createPageAt method to create new PAGEVIEW elements. This contrasts with how the MULTIPAGE custom element itself was created in this example.
Lastly, the function passes the value of content to the innerHTML of PAGEVIEW.
function addPage(name, content)
{
var pageIndex = dynaPage.numPages;
var oNewPage = dynaPage.createPageAt(pageIndex);
oNewPage.setAttribute("id", name);
oNewPage.setAttribute("innerHTML", content);
}
Click this button to see the full example. This code sample dynamically creates TABSTRIP and MULTIPAGE custom elements, reads data from an XML source file, and populates the tab labels and pages.
Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/multipage/DynaPage.htm