Les 7 : XSLT “gaten vullen” vs “regels toepassen”

1. Les 7 : XSLT“gaten vullen” vs “regels toepassen” Studiedossier Schema Studiedossier Stylesheet Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

2. StudieDossier • Inhoud coderen in XML ( StudiedossierStandaard ) • Vormgeving coderen in XSLT stylesheets Rationale • Scheiding van inhoud en presentatie • Presentatie gemakkelijk aan te passen • Meerdere presentatievormen/selecties mogelijk • Portfolio, flash, PDF • Inhoud gemakkelijk te onderhouden • Scripts voor indexeren van data in het archief Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

3. Wat is XML: een bouwwerk van standaarden Betekenis: Structuur: Tekst: Digitaal: HTML RSS VUML QTI XML Unicode Bits & Bytes Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

4. XSLT style sheets • Het presenteren van XML data in een XHTML pagina Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

5. StudieDossier + XSLT templates XSLT templates versie 1 Les 6 • Uitleg XML schema voor studiedossier • Start eenvoudige XSLT voor enkelvoudige pagina Les 7 • ‘Regels toepassen’ vs ‘gaten vullen’ ----------------------------------------------------------- Kerstvakantie ----------------------------------------------------------- XSLT templates versie 2 Les 8 • Hergebruik van templates’in meerdere pagina’s • Complexere Xpath Les 9 • Document() functie , tbv navigatie en indexpagina • Afmaken, problemen oplossen Les 10 • inleveren Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

6. Studiedossier: Filestructuur • Studiedossier • _stylesheets • _schemas • Profiel • Persoongegevens • Cv • Competenties • Kennis_en_vaardigheden • leerdoelen • Projecten • voorIAM • Project1 • project2 • IAM-prop • IAM-V1 • IAM-V2 • IAM-afstuderen index.xml settings.xml Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

7. Studiedossier: documentschema’s • Schema verwijzing in XML • Validatie door editor • Gebruik van XHTML / namespaces • Documentatie • groepen • xs:anyType • enumeraties • optioneel/verplicht/aantal • Updates ?? Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

8. XML schema • Eenmaal een goede structuur voor je document gevonden, kan je die vastleggen in een XML schema. • Verschillende mogelijkheden: DTD, XSD, e.a. • Waarom je dat zou doen? • Input validatie: XMLparsers kunnen automatisch controleren of een bepaald document goed is gesctructureerd. • Editorbesturing: de editor krijgt alleen toegestane optie te zien. • Documentatie: zodat iedereen kan zien wat de bedoeling is. • Valide XML: xml document dat voldoet aan een bepaald schema. Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

9. Studiedossier: te doen • Begin met één profielpagina te vullen • Daarna een projectpagina Versie1: Ga met eenvoudige stylesheets aan de gang Dwz: voor iedere type contentbestand, één XSLT stylesheet Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

10. XSLT style sheets • Het presenteren van XML data in een XHTML pagina Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

11. XSLT / XPath XSLT is één van de manieren om XML data te verwerken. • xml transformatie XML transformeren naar ander XML Bijv: sd.xml -> sd.xhtml sd.xml -> sd.docx ( office document ) Andere manieren om XML te verwerken: • tree-based processing ( E4X , DOM ) XML data verwerken binnen objectgeoriënteerde script/programmeertaal Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

12. Basis XSLT: gaten vullen <xsl:stylesheet … … … … > top element van een xsl stylesheet (overnemen uit voorbeeld) <xsl:output … … … … /> enkele specificaties met betrekking tot het output formaat (overnemen uit voorbeeld) <xsl:template match=“/” > het hoofdtemplate <xsl:value-of select=“een_xpath_expressie” /> het selecteren van een waarde uit de xml-bron <xsl:for-each select=“een_xpath_expressie” > het loopen door een lijst uit de xml-bron Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

13. Basic XPath Het selecteren van een element: /sd:student-info/sd:statement /sd:student-info/sd:person-name/sd:full-name Relatieve paden (bijvoorbeeld in een for-each loop): ten opzichte van /sd:student-info/sd:contact/sd:adress sd:street sd:code sd:city Lees ook intranet:XPathVoorBeginners.pdf Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

14. XSLT voor beginners • www.w3schools.com Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

15. Huiswerk • Maak eenvoudige vormgeving voor je studiedossier in XHTM/CSS. • Vul één of meer profiel bestanden met echte gegevens. • Maak eenvoudige XSLT template voor profielbestanden naar de gekozen vormgeving. TIP: begin met ‘persoonsinformatiepagina’ Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

16. LetOp Om het één en ander ook in complexere XSLT oplossing te laten werken, moet je het volgende doen: • Zet in settings.xml de volledige rootdirectory van je studiedossier.(als je later het dossier verplaatst, verander je dus ook de rootdirectory • Alle links in ieder bestand moet relatief zijn ten opzichte van deze rootdirectory • Gebruiker van firefox (ivm met firefox bug) bij lokaal gebruik: start met index.xml Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

17. XSLT: regels toepassen • Een andere manier om naar XSLT te kijken • ‘gaten vullen’ en ‘regels toepassen’ worden in combinatie toegepast. Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

18. Gaten vullen vs regels toepassen Gaten vullen: • Template = een brok outputcode ( XHTML ) met ‘gaten’ die gevuld worden uit de XML bron. <xsl: value-of select=‘xpath’/> Regels toepassen: • Match-patronen ( selectors ) bepalen welk template wordt toegepast op delen van de XML bron.<xsl:apply-templates/><xsl:template match=‘xpath’> ... </xsl:template> Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

19. voorbeeld • Een voorbeeld ter illustratie van de werking van regel gestuurde methode Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

20. Voordelen regel gestuurd • Zeer flexibel • Gemakkelijk ( als je eenmaal door hebt hoe het werkt) “Declaratief programmeren” Lees de reader ! Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl