Intro to xsl templates

Getting Started with OSP Portfolio Templates

[email protected] Wonk

Wednesday, June 16, 2010

211th Sakai Conference - June 15-17, 2010

Intended Audience

• Web Developers who don’t know where to start (puzzled programmer types)• If you’re taking notes for the developers

back at the office, this will still be helpful

• Pointy ears are optional but recommended


What We’re Covering Today

• What does an XSL Template do?• Why do we need XSL Templates?• What do you need to know to create

such an XSL Template?

• Then we’ll dabble with creating some XSL today!• Hands-on, woo hoo!


What Does a Template Do?

• Transforms XML into something useful like HTML




Original XMLOriginal XML




Original XMLOriginal XML

ResultingWeb PageResultingWeb Page


Why do we Need XSL Templates?

• Your objective may be to take a matrix and generate an e-portfolio web page

• Or maybe you just use one complicated form

• Or maybe you have different matrices with different forms and want one template to handle them all

• Use cases like these require distinct templates


Why do we Need XSL Templates?

• Your forms can all be different• Your matrices might all be different• Only way to handle them the way you

want to -- to transform them “properly” to reach your goal -- is to create an XSL template• XSL is really a programming language• It’s designed to convert XML to something

else, usually HTML


What do you Need to Know to Create an XSL Template?

• XSL of course :)• (We’ll get a hands-on intro shortly)

• HTML• That’s our target output format• Have an HTML layout/design in mind already!

(www.oswd.org is a good resource)

• Some programming skills• if-then-else, looping, variables (pointy ears

optional)

• And how hierarchical data is represented via XML


Crank Up Your Laptop

Now for Some Hands-On

10


Look at the Web Page here

• Browse to http://www.serensoft.net/sakai10

• View Source, see how the HTML corresponds to the resulting page

• No surprises there, right? The browser knows how to render <h1> and <p> and <li> tags as we’ve come to expect.

http://www.serensoft.net/sakai10



Now Look at “Person.xml” Linked There

• Now open “Person.xml” there


When you View Source...

• There’s no <img> for that logo• No headings or intro text• No footer text...?• There did all

those come from?• And why did

<person> renderanything useful?


Trick #1: The XSL Stylesheet Directive

• It uses “person-template.xsl” to transform the XML input into HTML... on the fly!


Inside OSP You Don’t Use the <?xml-stylesheet?> Trick

• When you’re developing your own XSL, including this directive makes it easy to “refresh” to see the changes in your XSL immediately

• Inside OSP you specify a template and then the XSL transformation happens inside Sakai before the web browser sees it

• So add that directive to the XML you downloaded (via passthrough.xsl) and have it point to the XSL template you’re developing


Baby Steps

Getting Started with Your Own XSL Template

17


Converting XML to HTML

• Once we know the structure of our XML we can put together an XSL “program” to transform it.


Hierarchy, Containers and Paths

• XPaths pinpoint items in the hierarchy• EG: /attachments//metaData/ownerEid grabs “will”


Trick #2: PassThrough.xsl

• “Once we know the structure of our XML”• Yeah, but how do we learn that?

• Via “passthrough.xsl”• It’s a bare-bones XSL template that

copies all its input straight through• You always start with “passthrough.xsl”!


passthrough.xsl• <?xml version="1.0" ?>

<xsl:stylesheet><xsl:output method="xml"/><xsl:template match="/">

<xsl:copy-of select="*" /></xsl:template>

</xsl:stylesheet>

• There are a few extra arguments omitted from the <xsl:stylesheet> and <xsl:output> tags above, but the important part is the red text section

• Here’s what that code says: “When you find the root of the XML input structure... copy it all straight to the output”


Step-by-Step

1.Visit the portfolio-worksite of your choice2.Open the Portfolio Template tool3.Click “Add”4.Give the template a name, click

Continue5.Select “passthrough.xsl” from Resources

as your “Basic Template Outline”, click Continue


Step-by-Step Continued

6.Add ingredients as you’d expect them in your final portfolio...•Often includes a matrix

•Maybe a certain form (contact info? bio? CV?)

•Sometimes an uploaded file (image/self-portrait?)

•etc

7.Click Continue8.Add at least one item for “Supporting

Files” and click Finish


Template-Wizard Review

• Step 1 is “Name your Template”• Step 2 is “Choose your XSL stylesheet”• (The XSL ‘program’ that will transform the

XML)

• Step 3 is “Specify what ingredients your users must supply to the template”• Whatever your final portfolio would require

• Step 4 is “Specify some extra resources that your users will have no choice over” (such as CSS or a school logo)


Here’s the Scoop

• Building a portfolio upon the passthrough.xsl stylesheet will give you a copy of the XML structure that OSP is going to hand to your template!• You will eventually replace “passthrough.xsl”

with your own “real” XSL code

• Once more: when you create a portfolio based on this template you won’t get HTML, you’ll get the original XML passed straight through


See The Results

• Create a portfolio based on your new template

• Click to view it...• YUCK! It’s not HTML, it’s raw XML so don’t

panic! :)

• “Download as source”, and start coding your real XSL to transform that into sparkles and sunshine


Now What?

So You Have Some XML...

27


An XML Editor is Important

• It can indent your XML making it easier for you to understand

• Syntax highlighting is also helpful

• Add your <?xml-stylesheet?> directive to point to your own XSL and start tweaking!


will.trillich @ serensoft.com

http://www.surveymonkey.com/s/sakai10

http://www.serensoft.net/sakai10/

29

mailto:[email protected]



3011th Sakai Conference - June 15-17, 2010 30

Technology

Intro to xsl templates