Conceptual Model of a Template based portfolio

The Portfolio Templates tool allows a designer to create a branded look and feel that is designed to display user content. The Templates tool is often used to create an HTML portfolio view for viewing in a standard browser. The template itself will not contain information specific to any one user's portfolio but can include other content, such as boilerplate content, logos and navigation elements as well as functional elements such as CSS stylesheets and javascript files. The templates can be exported as zip files and reused in other worksites once created. The template author can enumerate the types of content that the template is designed to display. Portfolio users using this template will be prompted to select appropriate content to complete their portfolio.

The Portfolios tool allows a portfolio user (often a student) to select a portfolio template and add content to their portfolio. When the portfolio owner views their portfolio, the Portfolios tool gathers their selected content from their resources and the XSL stylesheet for the portfolio template through the Resource tool's "Security Advisor" service and processes the transformation using the Xalan XSLT processor to generate a view that is sent to the client's browser. If the template is properly constructed, links can be generated that request alternative views/portfolio pages that are dynamically generated through the XSLT processor. In this manner a complex web site may be created from the portfolio owner's content. This ability to navigate through complex data structures (such as multiple matrices and wizards) is an important feature to understand to get the most out of Sakai's portfolio software.

Disclaimer: this is likely not accurate from an architecture perspective. The purpose of this model is to help a portfolio template designer understand the portfolio template and portfolio tools and their connection to the resources tool from a conceptual level. Comments on how to improve this diagram would be very welcome.

Hello World 3 page web site template.

Here is a sample "Hello World" presentation that actually demonstrates how to create multiple-page portfolio presentations. This xsl file actually doesn't transform anything (in other words, it does not utilize any portfolio owner supplied content) but serves as a bare bones model for learning about the portfolio tools. In this example, we focus on the lower half of our conceptual model in a very simple way (we use no supporting files for logos, css files, etc) to make a self contained web site (note the <html>, <head>, and <body> tags). It is important to note that in addition to being treated as self contained web sites, portfolios in Sakai may also be displayed within the portfolio navigation. A full discussion of the differences between these options is beyond the scope of this document: suffice to say if this template is not intended as a standalone page, the <html>, <head>, and <body> tags should be omitted.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

    <!-- Declaration of parameters -->
    <!-- if you want to use a Sakai value or a passed in parameter from the -->
    <!-- query string, you should state it here -->

    <!-- The id parameter from the query string -->
    <xsl:param name="id"/>

    <!-- a number we can switch on to display different content for each page -->
    <xsl:param name="pageNumber"/>

    <!-- Declare output method -->
    <xsl:output method="html"/>

    <!-- Main Template outputs our HTML page -->
    <xsl:template match="/">

        <html>
            <head><title>Multipage XSL transform - Hello World</title></head>
            <body>
                <h1>The Three Page Hello World Site</h1>

                <!-- uncomment this if you want to see these vaiables printed ugly style on top of the page
                <xsl:text>id:</xsl:text>
                <xsl:value-of select="$id"/>
                <br/>
                <xsl:text>pageNumber:</xsl:text>
                <xsl:value-of select="$pageNumber"/>
                <br/>
                -->

                <!-- a little menu to navigate -->
                <div id="menu" style="width: 100%; padding: 1em; margin: 1em 0; border-bottom: solid 1px black">
                    <xsl:call-template name="menuLink">
                        <xsl:with-param name="pageNumber">1</xsl:with-param>
                    </xsl:call-template> |
                    <xsl:call-template name="menuLink">
                        <xsl:with-param name="pageNumber">2</xsl:with-param>
                    </xsl:call-template> |
                    <xsl:call-template name="menuLink">
                        <xsl:with-param name="pageNumber">3</xsl:with-param>
                    </xsl:call-template>
                </div>

                <!-- a switch to select content for this page based on the value of pageNumber -->
                <div>
                    <xsl:choose>
                        <xsl:when test="$pageNumber=2">
                            <!-- call page 2 template -->
                            Page 2 Content
                        </xsl:when>
                        <xsl:when test="$pageNumber=3">
                            <!-- call page 3 template -->
                            Page 3 Content
                        </xsl:when>
                        <xsl:otherwise>
                            <!-- call main (page 1) template -->
                            Page 1 Content
                        </xsl:otherwise>
                    </xsl:choose>
                </div>
            </body>
        </html>

    </xsl:template>

    <!-- a named template to display links correctly -->
    <xsl:template name="menuLink">
        <xsl:param name="pageNumber"/>
        <span style="padding: 0 2em;">
            <a>
                <xsl:attribute name="href">
                    <xsl:text disable-output-escaping="yes">viewPresentation.osp?id=</xsl:text>
                        <xsl:value-of select="$id"/>
                    <xsl:text disable-output-escaping="yes">&amp;pageNumber=</xsl:text>
                        <xsl:value-of select="$pageNumber"/>
                </xsl:attribute>
                <xsl:text>Page </xsl:text>
                <xsl:value-of select="$pageNumber"/>
            </a>
        </span>
    </xsl:template>

</xsl:stylesheet>

Next: The Missing Tool, the passthrough template, and Adding Content