Webinar: Mobile Email Design & Intro to Mobile Optimized Templates
Intro to xsl templates
-
Upload
will-trillich -
Category
Technology
-
view
1.037 -
download
1
description
Transcript of Intro to xsl templates
![Page 2: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/2.jpg)
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
![Page 3: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/3.jpg)
311th 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!
![Page 4: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/4.jpg)
411th Sakai Conference - June 15-17, 2010
What Does a Template Do?
• Transforms XML into something useful like HTML
![Page 5: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/5.jpg)
511th Sakai Conference - June 15-17, 2010
What Does a Template Do?
• Transforms XML into something useful like HTML
Original XMLOriginal XML
![Page 6: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/6.jpg)
611th Sakai Conference - June 15-17, 2010
What Does a Template Do?
• Transforms XML into something useful like HTML
Original XMLOriginal XML
ResultingWeb PageResultingWeb Page
![Page 7: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/7.jpg)
711th Sakai Conference - June 15-17, 2010
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
![Page 8: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/8.jpg)
811th 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
![Page 9: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/9.jpg)
911th 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
![Page 10: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/10.jpg)
1011th Sakai Conference - June 15-17, 2010
Crank Up Your Laptop
Now for Some Hands-On
10
![Page 11: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/11.jpg)
1111th 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.
![Page 12: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/12.jpg)
1211th Sakai Conference - June 15-17, 2010
![Page 13: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/13.jpg)
1311th Sakai Conference - June 15-17, 2010
Now Look at “Person.xml” Linked There
• Now open “Person.xml” there
![Page 14: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/14.jpg)
1411th 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> renderanything useful?
![Page 15: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/15.jpg)
1511th 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!
![Page 16: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/16.jpg)
1611th 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
![Page 17: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/17.jpg)
1711th Sakai Conference - June 15-17, 2010
Baby Steps
Getting Started with Your Own XSL Template
17
![Page 18: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/18.jpg)
1811th 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.
![Page 19: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/19.jpg)
1911th Sakai Conference - June 15-17, 2010
Hierarchy, Containers and Paths
• XPaths pinpoint items in the hierarchy• EG: /attachments//metaData/ownerEid grabs “will”
![Page 20: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/20.jpg)
2011th 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”!
![Page 21: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/21.jpg)
2111th Sakai Conference - June 15-17, 2010
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”
![Page 22: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/22.jpg)
2211th Sakai Conference - June 15-17, 2010
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
![Page 23: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/23.jpg)
2311th Sakai Conference - June 15-17, 2010
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
![Page 24: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/24.jpg)
2411th 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)
![Page 25: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/25.jpg)
2511th 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
![Page 26: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/26.jpg)
2611th 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
![Page 27: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/27.jpg)
2711th Sakai Conference - June 15-17, 2010
Now What?
So You Have Some XML...
27
![Page 28: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/28.jpg)
2811th 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!
![Page 29: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/29.jpg)
2911th Sakai Conference - June 15-17, 2010
will.trillich @ serensoft.com
http://www.surveymonkey.com/s/sakai10
http://www.serensoft.net/sakai10/
29
![Page 30: Intro to xsl templates](https://reader035.fdocuments.net/reader035/viewer/2022062308/55890306d8b42a941b8b464a/html5/thumbnails/30.jpg)
3011th Sakai Conference - June 15-17, 2010 30