Intro to xsl templates

1,364 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,364
On SlideShare
0
From Embeds
0
Number of Embeds
66
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Intro to xsl templates

  1. 1. Getting Started with OSP Portfolio Templates <ul><li>[email_address] </li></ul><ul><li>XSL Wonk </li></ul><ul><li>Wednesday, June 16, 2010 </li></ul>
  2. 2. Intended Audience <ul><li>Web Developers who don’t know where to start (puzzled programmer types) </li></ul><ul><ul><li>If you’re taking notes for the developers back at the office, this will still be helpful </li></ul></ul><ul><li>Pointy ears are optional but recommended </li></ul>11th Sakai Conference - June 15-17, 2010
  3. 3. What We’re Covering Today <ul><li>What does an XSL Template do? </li></ul><ul><li>Why do we need XSL Templates? </li></ul><ul><li>What do you need to know to create such an XSL Template? </li></ul><ul><li>Then we’ll dabble with creating some XSL today! </li></ul><ul><ul><li>Hands-on, woo hoo! </li></ul></ul>11th Sakai Conference - June 15-17, 2010
  4. 4. What Does a Template Do? <ul><li>Transforms XML into something useful like HTML </li></ul>11th Sakai Conference - June 15-17, 2010
  5. 5. What Does a Template Do? <ul><li>Transforms XML into something useful like HTML </li></ul>11th Sakai Conference - June 15-17, 2010 Original XML
  6. 6. What Does a Template Do? <ul><li>Transforms XML into something useful like HTML </li></ul>11th Sakai Conference - June 15-17, 2010 Original XML Resulting Web Page
  7. 7. Why do we Need XSL Templates? <ul><li>Your objective may be to take a matrix and generate an e-portfolio web page </li></ul><ul><li>Or maybe you just use one complicated form </li></ul><ul><li>Or maybe you have different matrices with different forms and want one template to handle them all </li></ul><ul><li>Use cases like these require distinct templates </li></ul>11th Sakai Conference - June 15-17, 2010
  8. 8. Why do we Need XSL Templates? <ul><li>Your forms can all be different </li></ul><ul><li>Your matrices might all be different </li></ul><ul><li>Only way to handle them the way you want to -- to transform them “properly” to reach your goal -- is to create an XSL template </li></ul><ul><ul><li>XSL is really a programming language </li></ul></ul><ul><ul><li>It’s designed to convert XML to something else, usually HTML </li></ul></ul>11th Sakai Conference - June 15-17, 2010
  9. 9. What do you Need to Know to Create an XSL Template? <ul><li>XSL of course :) </li></ul><ul><ul><li>(We’ll get a hands-on intro shortly) </li></ul></ul><ul><li>HTML </li></ul><ul><ul><li>That’s our target output format </li></ul></ul><ul><ul><li>Have an HTML layout/design in mind already! (www.oswd.org is a good resource) </li></ul></ul><ul><li>Some programming skills </li></ul><ul><ul><li>if-then-else, looping, variables (pointy ears optional) </li></ul></ul><ul><li>And how hierarchical data is represented via XML </li></ul>11th Sakai Conference - June 15-17, 2010
  10. 10. Crank Up Your Laptop <ul><li>Now for Some Hands-On </li></ul>11th Sakai Conference - June 15-17, 2010
  11. 11. Look at the Web Page here <ul><li>Browse to http://www.serensoft.net/sakai10 </li></ul><ul><li>View Source, see how the HTML corresponds to the resulting page </li></ul><ul><li>No surprises there, right? The browser knows how to render <h1> and <p> and <li> tags as we’ve come to expect. </li></ul>11th Sakai Conference - June 15-17, 2010
  12. 12. 11th Sakai Conference - June 15-17, 2010
  13. 13. Now Look at “Person.xml” Linked There <ul><li>Now open “Person.xml” there </li></ul>11th Sakai Conference - June 15-17, 2010
  14. 14. When you View Source... <ul><li>There’s no <img> for that logo </li></ul><ul><li>No headings or intro text </li></ul><ul><li>No footer text...? </li></ul><ul><li>There did all those come from? </li></ul><ul><li>And why did <person> render anything useful? </li></ul>11th Sakai Conference - June 15-17, 2010
  15. 15. Trick #1: The XSL Stylesheet Directive <ul><li>It uses “person-template.xsl” to transform the XML input into HTML... on the fly! </li></ul>11th Sakai Conference - June 15-17, 2010
  16. 16. Inside OSP You Don’t Use the <?xml-stylesheet?> Trick <ul><li>When you’re developing your own XSL, including this directive makes it easy to “refresh” to see the changes in your XSL immediately </li></ul><ul><li>Inside OSP you specify a template and then the XSL transformation happens inside Sakai before the web browser sees it </li></ul><ul><li>So add that directive to the XML you downloaded (via passthrough.xsl) and have it point to the XSL template you’re developing </li></ul>11th Sakai Conference - June 15-17, 2010
  17. 17. Baby Steps <ul><li>Getting Started with Your Own XSL Template </li></ul>11th Sakai Conference - June 15-17, 2010
  18. 18. Converting XML to HTML <ul><li>Once we know the structure of our XML we can put together an XSL “program” to transform it. </li></ul>11th Sakai Conference - June 15-17, 2010
  19. 19. Hierarchy, Containers and Paths <ul><li>XPaths pinpoint items in the hierarchy </li></ul><ul><ul><li>EG: /attachments//metaData/ownerEid grabs “will” </li></ul></ul>11th Sakai Conference - June 15-17, 2010
  20. 20. Trick #2: PassThrough.xsl <ul><li>“ Once we know the structure of our XML” </li></ul><ul><li>Yeah, but how do we learn that? </li></ul><ul><li>Via “ passthrough.xsl ” </li></ul><ul><li>It’s a bare-bones XSL template that copies all its input straight through </li></ul><ul><li>You always start with “ passthrough.xsl ”! </li></ul>11th Sakai Conference - June 15-17, 2010
  21. 21. passthrough.xsl <ul><li><?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> </li></ul><ul><li>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 </li></ul><ul><li>Here’s what that code says: “ When you find the root of the XML input structure... copy it all straight to the output ” </li></ul>11th Sakai Conference - June 15-17, 2010
  22. 22. Step-by-Step <ul><li>Visit the portfolio-worksite of your choice </li></ul><ul><li>Open the Portfolio Template tool </li></ul><ul><li>Click “Add” </li></ul><ul><li>Give the template a name, click Continue </li></ul><ul><li>Select “passthrough.xsl” from Resources as your “Basic Template Outline”, click Continue </li></ul>11th Sakai Conference - June 15-17, 2010
  23. 23. Step-by-Step Continued <ul><li>Add ingredients as you’d expect them in your final portfolio... </li></ul><ul><ul><li>Often includes a matrix </li></ul></ul><ul><ul><li>Maybe a certain form (contact info? bio? CV?) </li></ul></ul><ul><ul><li>Sometimes an uploaded file (image/self-portrait?) </li></ul></ul><ul><ul><li>etc </li></ul></ul><ul><li>Click Continue </li></ul><ul><li>Add at least one item for “Supporting Files” and click Finish </li></ul>11th Sakai Conference - June 15-17, 2010
  24. 24. Template-Wizard Review <ul><li>Step 1 is “Name your Template” </li></ul><ul><li>Step 2 is “Choose your XSL stylesheet” </li></ul><ul><ul><li>(The XSL ‘program’ that will transform the XML) </li></ul></ul><ul><li>Step 3 is “Specify what ingredients your users must supply to the template” </li></ul><ul><ul><li>Whatever your final portfolio would require </li></ul></ul><ul><li>Step 4 is “Specify some extra resources that your users will have no choice over” (such as CSS or a school logo) </li></ul>11th Sakai Conference - June 15-17, 2010
  25. 25. Here’s the Scoop <ul><li>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! </li></ul><ul><ul><li>You will eventually replace “passthrough.xsl” with your own “real” XSL code </li></ul></ul><ul><li>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 </li></ul>11th Sakai Conference - June 15-17, 2010
  26. 26. See The Results <ul><li>Create a portfolio based on your new template </li></ul><ul><li>Click to view it... </li></ul><ul><ul><li>YUCK! It’s not HTML, it’s raw XML so don’t panic! :) </li></ul></ul><ul><li>“ Download as source”, and start coding your real XSL to transform that into sparkles and sunshine </li></ul>11th Sakai Conference - June 15-17, 2010
  27. 27. Now What? <ul><li>So You Have Some XML... </li></ul>11th Sakai Conference - June 15-17, 2010
  28. 28. An XML Editor is Important <ul><li>It can indent your XML making it easier for you to understand </li></ul><ul><li>Syntax highlighting is also helpful </li></ul><ul><li>Add your <?xml-stylesheet?> directive to point to your own XSL and start tweaking! </li></ul>11th Sakai Conference - June 15-17, 2010
  29. 29. will.trillich @ serensoft.com <ul><li>http://www.surveymonkey.com/s/sakai10 </li></ul><ul><li>http://www.serensoft.net/sakai10/ </li></ul>11th Sakai Conference - June 15-17, 2010
  30. 30. 11th Sakai Conference - June 15-17, 2010

×