Getting Started with XSL Templates

1. Getting Started with XSL Templates Will TrillichEPortfolio Wonk, Serensoftwill.trillich@serensoft.com Attribution Share Alike

2. What’s This Workshop About? • Turning an image-and-a-matrix-with-some-forms into a “portfolio” web page…by getting OSP to reveal its XML structure so we can build HTML using XSL

3. Who This Is For • Skills needed to build XSL style sheets: • Demented Computer-Science type, Web-Developer (not Designer) brain • Willing to sling <xml>trees</xml> around • Understand algorithms • For-each <xsl:for-each>loops</xsl:for-each> • If-then-else <xsl:choose>conditionals</xsl:choose> • And then be willing to dig into a totally different, declarative programming language: XSL 10th Sakai Conference - Boston, MA, U.S.A.

4. Prerequisites • Today you’ll need a sandbox worksite • You can create one on your own campus Sakai instance (Needs Resources, Matrix, Portfolio, Portfolio Templates) • Or I can hook you up on our Serensoft sandbox for today’s session • Have (or create) a matrix, usually • A simple form or two • Own a good XML editor (OxygenXML?)

5. Where Do We Begin? With all that out of the way July 2009 10th Sakai Conference - Boston, MA, U.S.A. 5

6. First, Choose Your Target • You’ll go through quite a process…

7. Cultural/Political Steps • Get your stakeholders together and discuss everything • Deliberate about the portfolio objectives • Deliberate about what content it should include—and exclude • Deliberate about its structure • Deliberate about layout • Deliberate about the branding and design

8. After The Committee Meetings • You’ll arrive at a sketch something like this

9. Your Designer Creates HTML • Web designer takes the sketch and makes HTML magic accordingly (or purloin some from www.oswd.org et al) • Then you take that HTML and break it up into repeating sections • Forms X and Y fill this part out over here • Matrix cells go here, columns and rows go there • Portrait image shows up over yonder

10. The Web Developer Makes It Happen • So how do we make this template work? • How do we take a matrix with some forms and conjure up a web page from that?

11. The Steps To Build A Template These are July 2009 10th Sakai Conference - Boston, MA, U.S.A. 11

12. MECHANICAL STEPS • Have something to work with(Matrix, Forms) • Create a “pass-through” template • Create a portfolio based on the template, using your content, and save the XML • Build your XSL to do magic with that XML(return to step 1 as needed, for the content you forgot) • When it’s ready, replace the pass-through XSL in the template with your magical XSL • Bask in the accolades

13. MECHANICAL ITERATION • Update something to work with(Matrix, Forms) • Create a “pass-through” template • Refresh your portfolio, and save the updated XML • Tweak your XSL to do magic with that XML(return to step 1 as needed, for the content you forgot) • When it’s ready, replace the pass-through XSL in the template with your updated XSL • Bask in the accolades

14. Back On Campus… • The following slides are what you’ll need to do back on campus

15. Have Some Forms Available • Build forms to collect data from your users • Nice, repeatable structured artifacts • Forms were previouslycalled “structuredartifact definitions”or SADs

16. Start with a Matrix • Build your matrix • Couple of rows • Columns as needed

17. Attach Forms to your cells • Matrix “edit” > pick-a-cell • Specify Forms for Reflection, Feedback, Evaluation or whatever

18. Or just nab a pre-set matrix • …but for today’s workshop, just import OSP-Matrix.zip • From www.serensoft.net/sakai09 • Create some data for OSP to deliver • Open matrix as user, dive into cells and: • Fill out some forms • Attach some files

19. Now what? • We’ve got a matrix because that’s a convenient way to structure our portfolio • We’ve got forms attached to the matrix so we can collect data at predictable spots • We’ve got some sample data from filled-out forms • Now we build a template.

20. So create a template already • Let’s say our stakeholders want a portfolio based on: • Matrix for structure • Head-shot/portrait independent of the matrix • That means our template will require two ingredients from the student • “matrix” element will be a matrix • “portrait” element will be an uploaded image

21. The first thing a template needs… • (After its name) • Is an XSL stylesheet • Which we need to build from scratch, and thus we don’t have one • So we pull in the granddaddy of all XSL stylesheets: passthrough.xsl (also available at serensoft.net/sakai09 )

22. PassThrough.xsl • Finds the root object and copies it to the output <?xml version="1.0" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <xsl:copy-of select="." /> </xsl:template> </xsl:stylesheet> • Upload that to your resources (mime type text/xml)

23. Now Create Your Template • Portfolio Template Tool > New • Give it a name/description • Basic Template Outline (stylesheet) is passthrough.xsl • Two items needed: Matrix, Image • More info on step 3, next 2 slides • No supporting files, for today • Easy!

24. Details on Template Building, Step 3 • Add Type “Matrix” • Name (XML Element name) ‘matrix’ • Title (for human-readability) ‘Pick a Matrix’ • Description may also be useful • Don’t forget to click “Add to List”! Becomes the XML Element Name

25. Template Building, Detail Step 3 Still • Add Type “uploaded file” • Name (XML Element name) ‘portrait’ • Mime type ‘image’ • Don’t forget to click “Add to List”! Becomes the XML Element Name

26. Save Your New Template • Now you can create a portfolio based on your pass-through template!

27. Now Create A Portfolio • You’ve filled out some forms in the matrix, so you’ve got something to work with • Create a portfolio on your new template • Portfolio tool > Add/Create (2.5 vs 2.6) • Include your matrix • Include/upload an image, too • Now save it… and then view your portfolio

28. Yikes! • It’s garbage in my browser! Eww! • It’s exactly what we want! It’s not formatted for HTML viewing, it’s just naked XML • Save it to your desktop as a viewPresentation.xml file

29. Perfect! • In your local copy of the XML, add line 2: • <?xml version="1.0" encoding="UTF-8"?> • <?xml-stylesheet type="text/xsl" href="your-template-here.xsl"?> • <xml-here> • ... • </xml-here> • Make the href refer to the magical XSL style sheet you’re working on

30. How XSL Works(The fun part!) A Quick Overview Of July 2009 10th Sakai Conference - Boston, MA, U.S.A. 30

31. www.Serensoft.Net/sakai09 • Check out the Person.xml file there • View source, and… where does all the formatting come from? The branding? The header and the footer? Not to mention the presentation of the data itself!

32. Person.xml view-source • It’s just the data, so where does the formatting come from? • It’s the <?xml-stylesheet> directive!

33. Without the XSL stylesheet • In Firefox the default XML rendering would look like this • But we can specify an XSL stylesheet to render it, instead • Now we know the secret to “No style information”!

34. Open the linked stylesheet • Click to view the stylesheet itself • Then view-source to “see” it for real • Save these files (.xml, .xsl) to your local filesystem and tinker with them to get the idea

35. Same idea with the XML from OSP • Have the XML refer to your XSL stylesheet • Open the XML in your browser • Then: • Tweak your XSL • Refresh your browser • Repeat as needed • Upload your XSL and point the template to it – and you’re off to the races!

36. Have Fun Tinkering With Your Newfound OSP Template Savvy 10th Sakai Conference - Boston, MA, U.S.A.