The Passthrough Template and Portfolio View
- Former user (Deleted)
- Former user (Deleted)
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">&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