Intro to xsl templates
Upcoming SlideShare
Loading in...5
×
 

Intro to xsl templates

on

  • 1,340 views

A quick look at some of the foundational tidbits you'll need when getting started at

A quick look at some of the foundational tidbits you'll need when getting started at

Statistics

Views

Total Views
1,340
Slideshare-icon Views on SlideShare
1,276
Embed Views
64

Actions

Likes
0
Downloads
14
Comments
0

2 Embeds 64

http://www.serensoft.net 63
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Intro to xsl templates Intro to xsl templates Presentation Transcript

    • Getting Started with OSP Portfolio Templates
      • [email_address]
      • XSL Wonk
      • Wednesday, June 16, 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
      11th Sakai Conference - June 15-17, 2010
    • 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!
      11th Sakai Conference - June 15-17, 2010
    • What Does a Template Do?
      • Transforms XML into something useful like HTML
      11th Sakai Conference - June 15-17, 2010
    • What Does a Template Do?
      • Transforms XML into something useful like HTML
      11th Sakai Conference - June 15-17, 2010 Original XML
    • What Does a Template Do?
      • Transforms XML into something useful like HTML
      11th Sakai Conference - June 15-17, 2010 Original XML Resulting Web 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
      11th Sakai Conference - June 15-17, 2010
    • 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
      11th Sakai Conference - June 15-17, 2010
    • 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
      11th Sakai Conference - June 15-17, 2010
    • Crank Up Your Laptop
      • Now for Some Hands-On
      11th Sakai Conference - June 15-17, 2010
    • 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.
      11th Sakai Conference - June 15-17, 2010
    • 11th Sakai Conference - June 15-17, 2010
    • Now Look at “Person.xml” Linked There
      • Now open “Person.xml” there
      11th Sakai Conference - June 15-17, 2010
    • 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> render anything useful?
      11th Sakai Conference - June 15-17, 2010
    • Trick #1: The XSL Stylesheet Directive
      • It uses “person-template.xsl” to transform the XML input into HTML... on the fly!
      11th Sakai Conference - June 15-17, 2010
    • 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
      11th Sakai Conference - June 15-17, 2010
    • Baby Steps
      • Getting Started with Your Own XSL Template
      11th Sakai Conference - June 15-17, 2010
    • Converting XML to HTML
      • Once we know the structure of our XML we can put together an XSL “program” to transform it.
      11th Sakai Conference - June 15-17, 2010
    • Hierarchy, Containers and Paths
      • XPaths pinpoint items in the hierarchy
        • EG: /attachments//metaData/ownerEid grabs “will”
      11th Sakai Conference - June 15-17, 2010
    • 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 ”!
      11th Sakai Conference - June 15-17, 2010
    • passthrough.xsl
      • <?xml version=&quot;1.0&quot; ?> <xsl:stylesheet> <xsl:output method=&quot;xml&quot;/> <xsl:template match=&quot;/&quot;> <xsl:copy-of select=&quot;*&quot; /> </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 ”
      11th Sakai Conference - June 15-17, 2010
    • Step-by-Step
      • Visit the portfolio-worksite of your choice
      • Open the Portfolio Template tool
      • Click “Add”
      • Give the template a name, click Continue
      • Select “passthrough.xsl” from Resources as your “Basic Template Outline”, click Continue
      11th Sakai Conference - June 15-17, 2010
    • Step-by-Step Continued
      • 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
      • Click Continue
      • Add at least one item for “Supporting Files” and click Finish
      11th Sakai Conference - June 15-17, 2010
    • 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)
      11th Sakai Conference - June 15-17, 2010
    • 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
      11th Sakai Conference - June 15-17, 2010
    • 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
      11th Sakai Conference - June 15-17, 2010
    • Now What?
      • So You Have Some XML...
      11th Sakai Conference - June 15-17, 2010
    • 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!
      11th Sakai Conference - June 15-17, 2010
    • will.trillich @ serensoft.com
      • http://www.surveymonkey.com/s/sakai10
      • http://www.serensoft.net/sakai10/
      11th Sakai Conference - June 15-17, 2010
    • 11th Sakai Conference - June 15-17, 2010