Portfolios

Owned by Former user (Deleted)
Last updated: Nov 12, 2008 by Former user (Deleted)Version comment
1 min read

Portfolios (osp.presentation)

This tool is former known as the 'Presentation Tool' and was renamed to 'Portfolios' to distinguish between the sakai presentation tool and the osp presentation tool. In this description the tool is referenced as 'portfolio presentation tool' or 'presentation tool' Don't let the confuse you, we are still talking about the osp.presentation tool.

Documentation for the OSP2.0 version of this tool can be found here: Presentation Template Tool. Some (most) of that documentation still applies.

Sample multiple page portfolio template stylesheet

Purpose

The portfolios tool is used to create online presentations. Materials that can be presented are:

  • files and forms from resources
  • wizards

Overview

Users select which type of portfolio presentation they want to create by choosing between a freeform and template based portfolio. In the next steps they select materials from their resources of wizards to include in the presentation. Site members and guests can be invited to view the presentation and an e-mail can be sent to support the invitation. Optionally (invited) visitors can leave comments that are attached to the presentation.

Freeform presentations

Template based presentations

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

The Missing Tool

The next part of this "tutorial" should be how to use the "Template Builder" tool to select content from your various sources and place them neatly on the page in the way you want. That tool isn't there (yet?). The process of getting fixed (supporting template files) or dynamic (portfolio owner authored) content from their various homes and into your template will require some intermediate steps and tools.

The steps are:

  • add some content to your template
  • create a passthrough template
  • create a portfolio that uses this intermediate template
  • view that portfolio and inspect (and save) its raw XML
  • make a better template that selects the info you want from the raw XML and displays it the way you want

The tools you may want:

  • you need an XML editor.

    Yes, I know...Notepad, emacs and vi will all edit XML. We are not just editing XML, though. Unless you love to generate XPATH queries by the boatload by hand, its good to have an XML editor that can do that easily.

    Also, creating our new template will be a lot faster if we can run transformations of the passthrough with our new stylesheet in development on the desktop. After uploading your stylesheet to Sakai one hundred times you may agree. Ideally, you'll want an editor that has the Xalan XSLT processing engine in it. I use Oxygen, it fills the space of the Missing Tool for me.

The Passthrough Template

There is nothing to it. Show me everything....
Save this code in an xsl file (passthrough.xsl?) and upload it to your resources.

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

Create a new portfolio template and use this for the stylesheet.

For grins, lets add a logo as a "supporting file" to our Hello World example.

The steps are easy:

  • be sure to select "No" under "Show within Portfolio Navigation?" on step 1 of the template wizard
  • select the passthrough template as the "Basic Template Outline" on step 2 (leave the "Outline Options" and "Outline Options File Element" blank).
  • leave the "List Content" section in step 3 alone for now...
  • add a a supporting file on step 4 of the wizard
    • for the "Name (used in xpath)", enter "myLogo" (this name will be an element name in the passthrough file).
    • choose an image from your resources to be your logo.
    • click the "Add to List" button
  • Click the "Finish" button to complete the Template wizard

Next, create a new portfolio that uses the passthrough template created above. For this example, you just select the template and click through the wizard.
View the portfolio and view its source code. It should resemble this:

<?xml version="1.0" encoding="UTF-8"?>
<ospiPresentation>
    <presentationFiles>
        <myLogo>
            <artifact>
                <metaData>
                    <id>08cf3b28-1d1f-43ff-8008-eea05018f511</id>
                    <displayName>SOElogo.gif</displayName>
                    <type>
                        <id>file</id>
                        <description>file</description>
                    </type>
                    <repositoryNode>
                        <created>Thu Nov 09 17:08:17 EST 2006</created>
                        <modified>Thu Nov 09 17:08:17 EST 2006</modified>
                        <size>6673</size>
                        <mimeType>
                            <primary>image</primary>
                            <sub>gif</sub>
                        </mimeType>
                    </repositoryNode>
                </metaData>
                <fileArtifact>
                    <uri>https://eportfolio.syr.edu:8443/access/ospPresentation/7b48753d-d64b-4548-00c1-7b801c0a31e4/ 
3BF42E8EF53AC3CC0FF80DEC1462075E/content/group/7b48753d-d64b-4548-00c1-7b801c0a31e4/Portfolio
                        Templates/SOElogo.gif</uri>
                </fileArtifact>
            </artifact>
        </myLogo>
    </presentationFiles>
</ospiPresentation>

Adding Some Content to your Portfolio Template

You'll note that the URI to your logo will be referenced in the passthrough XML. In the above code, the logo's url is "https://eportfolio.syr.edu:8443/access/ospPresentation/7b48753d-d64b-4548-00c1-7b801c0a31e4/\
3BF42E8EF53AC3CC0FF80DEC1462075E/content/group/7b48753d-d64b-4548-00c1-7b801c0a31e4/Portfolio Templates/SOElogo.gif".

and the XPATH to that URI is: /ospiPresentation/presentationFiles/myLogo/artifact/fileArtifact/uri

If you added a snippet like this:

<img>
    <xsl:attribute name="src">
        <xsl:value-of select="/ospiPresentation/presentationFiles/myLogo/artifact/fileArtifact/uri"/>                                   
     </xsl:attribute>
     <xsl:attribute name="alt">My Institutions Logo</xsl:attribute>
</img>

to your Hello World template, you'll find that the resulting portfolio will include your logo.

<?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>
                <div>
                    <img>
                        <xsl:attribute name="src">
                            <xsl:value-of select="/ospiPresentation/presentationFiles/myLogo/artifact/fileArtifact/uri"/>                                   
                        </xsl:attribute>
                        <xsl:attribute name="alt">My Institutions Logo</xsl:attribute>
                        <xsl:attribute name="style">float: right; padding: 1em</xsl:attribute>
                    </img>  
                    <h1>The Three Page Hello World Site</h1>
                </div>
                    
                <!-- 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: Creating a Template to Display Dynamic Portfolio Content

Notification email text

For the time being the notification e-mail text is hardcoded in:
osp/presentation/tool/src/java/org/theospi/portfolio/presentation/control/NotifyViewersController.java