Getting Started with XSL Templates

Getting Started with XSL Templates

Will TrillichEPortfolio Wonk, [email protected]

Attribution Share Alike

What’s This Workshop About?

• Turning an image-and-a-matrix-with-some-forms into a “portfolio” web page

…by getting OSP to reveal its XML structure so we can build HTML using XSL

Who This Is For

• Skills needed to build XSL style sheets:• Demented Computer-Science type,

Web-Developer (not Designer) brain• Willing to sling <xml>trees</xml> around• Understand algorithms

• For-each <xsl:for-each>loops</xsl:for-each>• If-then-else <xsl:choose>conditionals</xsl:choose>• And then be willing to dig into a totally different,

declarative programming language: XSL

July 2009 310th Sakai Conference - Boston, MA, U.S.A.

Prerequisites

• Today you’ll need a sandbox worksite• You can create one on your own campus

Sakai instance (Needs Resources, Matrix, Portfolio, Portfolio Templates)

• Or I can hook you up on our Serensoft sandbox for today’s session

• Have (or create) a matrix, usually• A simple form or two• Own a good XML editor (OxygenXML?)

Where Do We Begin?With all that out of the way

July 2009 10th Sakai Conference - Boston, MA, U.S.A. 5

First, Choose Your Target

• You’ll go through quite a process…

Cultural/Political Steps

• Get your stakeholders together and discuss everything• Deliberate about the portfolio objectives• Deliberate about what content it should

include—and exclude• Deliberate about its structure• Deliberate about layout• Deliberate about the branding and design

After The Committee Meetings

• You’ll arrive at a sketch something like this

Your Designer Creates HTML

• Web designer takes the sketch and makes HTML magic accordingly (or purloin some from www.oswd.org et al)

• Then you take that HTML and break it up into repeating sections• Forms X and Y fill this part out over here• Matrix cells go here, columns and rows go

there• Portrait image shows up over yonder

The Web Developer Makes It Happen

• So how do we make this template work? • How do we take a matrix with some forms

and conjure up a web page from that?

The Steps To Build A TemplateThese are


MECHANICAL STEPS

1) Have something to work with (Matrix, Forms)2) Create a “pass-through” template3) Create a portfolio based on the template,

using your content, and save the XML4) Build your XSL to do magic with that XML

(return to step 1 as needed, for the content you forgot)

5) When it’s ready, replace the pass-through XSL in the template with your magical XSL

6) Bask in the accolades

MECHANICAL ITERATION

1) Update something to work with (Matrix, Forms)2) Create a “pass-through” template3) Refresh your portfolio, and save the updated

XML4) Tweak your XSL to do magic with that XML

(return to step 1 as needed, for the content you forgot)

5) When it’s ready, replace the pass-through XSL in the template with your updated XSL

6) Bask in the accolades

Back On Campus…

• The following slides are what you’ll need to do back on campus

Have Some Forms Available

• Build forms to collect data from your users• Nice, repeatable structured artifacts

• Forms were previouslycalled “structuredartifact definitions”or SADs

Start with a Matrix

• Build your matrix• Couple of rows• Columns as needed

Attach Forms to your cells

• Matrix “edit” > pick-a-cell• Specify Forms for Reflection, Feedback,

Evaluation or whatever

Or just nab a pre-set matrix

• …but for today’s workshop, just import OSP-Matrix.zip

• From www.serensoft.net/sakai09• Create some data for OSP to deliver

• Open matrix as user, dive into cells and: • Fill out some forms• Attach some files

Now what?

• We’ve got a matrix because that’s a convenient way to structure our portfolio

• We’ve got forms attached to the matrix so we can collect data at predictable spots

• We’ve got some sample data from filled-out forms

• Now we build a template.

So create a template already

• Let’s say our stakeholders want a portfolio based on:• Matrix for structure• Head-shot/portrait independent of the matrix

• That means our template will require two ingredients from the student• “matrix” element will be a matrix• “portrait” element will be an uploaded image

The first thing a template needs…

• (After its name)• Is an XSL stylesheet

• Which we need to build from scratch, and thus we don’t have one

• So we pull in the granddaddy of all XSL stylesheets: passthrough.xsl (also available at serensoft.net/sakai09 )

PassThrough.xsl• Finds the root object and copies it to the output

<?xml version="1.0" ?> <xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <xsl:copy-of select="." /></xsl:template>

</xsl:stylesheet>

• Upload that to your resources (mime type text/xml)

Now Create Your Template

• Portfolio Template Tool > New1. Give it a name/description2. Basic Template Outline (stylesheet) is

passthrough.xsl3. Two items needed: Matrix, Image

• More info on step 3, next 2 slides4. No supporting files, for today• Easy!

Details on Template Building, Step 3

• Add Type “Matrix”• Name (XML Element name) ‘matrix’• Title (for human-readability) ‘Pick a Matrix’• Description may also be useful

• Don’t forget to click “Add to List”!

Becomes the XML Element

Name

Template Building, Detail Step 3 Still

• Add Type “uploaded file”• Name (XML Element name) ‘portrait’

• Mime type ‘image’

• Don’t forget to click “Add to List”!

Becomes the XML Element Name

Save Your New Template

• Now you can create a portfolio based on your pass-through template!

Now Create A Portfolio

• You’ve filled out some forms in the matrix, so you’ve got something to work with

• Create a portfolio on your new template• Portfolio tool > Add/Create (2.5 vs 2.6)

• Include your matrix• Include/upload an image, too

• Now save it… and then view your portfolio

Yikes!

• It’s garbage in my browser! Eww!

• It’s exactly what we want! It’s not formatted for HTML viewing, it’s just naked XML

• Save it to your desktop as a viewPresentation.xml file

Perfect!

• In your local copy of the XML, add line 2:1. <?xml version="1.0" encoding="UTF-8"?>2. <?xml-stylesheet type="text/xsl" href="your-template-here.xsl"?>3. <xml-here>4. ...5. </xml-here>

• Make the href refer to the magical XSL style sheet you’re working on

How XSL Works(The fun part!)

A Quick Overview Of


www.Serensoft.Net/sakai09

• Check out the Person.xml file there

• View source, and… where does all the formatting come from? The branding? The header and the footer? Not to mention the presentation of the data itself!

Person.xml view-source

• It’s just the data, so where does the formatting come from?

• It’s the <?xml-stylesheet> directive!

Without the XSL stylesheet

• In Firefox the default XML rendering would look like this

• But we can specify an XSL stylesheet to render it, instead

• Now we know the secret to “No style information”!

Open the linked stylesheet

• Click to view the stylesheet itself

• Then view-source to “see” it for real• Save these files (.xml, .xsl) to your local

filesystem and tinker with them to get the idea

Same idea with the XML from OSP

• Have the XML refer to your XSL stylesheet• Open the XML in your browser• Then:

• Tweak your XSL• Refresh your browser• Repeat as needed

• Upload your XSL and point the template to it – and you’re off to the races!

OSP Template SavvyHave Fun Tinkering With Your Newfound


Documents

Getting Started with XSL Templates