Your SlideShare is downloading. ×
0
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Intro to xsl templates
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Intro to xsl templates

1,014

Published on

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

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,014
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. What Does a Template Do? <ul><li>Transforms XML into something useful like HTML </li></ul>11th Sakai Conference - June 15-17, 2010
  • 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. 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. 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. 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. 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. Crank Up Your Laptop <ul><li>Now for Some Hands-On </li></ul>11th Sakai Conference - June 15-17, 2010
  • 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. 11th Sakai Conference - June 15-17, 2010
  • 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. 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. 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. 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. Baby Steps <ul><li>Getting Started with Your Own XSL Template </li></ul>11th Sakai Conference - June 15-17, 2010
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Now What? <ul><li>So You Have Some XML... </li></ul>11th Sakai Conference - June 15-17, 2010
  • 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. 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. 11th Sakai Conference - June 15-17, 2010

×