Les 8 : XSLT modulariteit

1. Les 8 : XSLTmodulariteit 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. vandaag • Waar zijn we eigenlijk mee bezig • studiedossier • Korte herhaling van het voorafgaande • XSLT templates versie 1.0 • Modulariteit • XSLT templates versie 2.0 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. 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

4. XML codering van het studiedossier: een bouwwerk van standaarden Betekenis: Structuur: Tekst: Digitaal: IAM StudieDossier 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

5. IAM studiedossier De standaard voor de inhoud bestaat uit: • Directorystructuurwaarin de inhouddocumenten geplaatst worden • Documentschema’svoor verschillende type inhouddocumenten • Persoongegevens • CV • Projectinformatie • Etc….. Een kwestie van invullen volgens de xml schema’s. 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 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. Presentatie van studiedossier met XSLT • XSLT templates voor hoe de inhoud moet worden weergegeven • In webpagina. ( XHTML ) • In MS Word document ( OOXML ) • In OpenOfice document ( ODF ) • In PDF ( FO ) XSLT ‘transformeert’ studiedossier XML naar ander XML formaat ( XHTML, OOXML, ODF, FO ) 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. 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 • Document() functie , tbv navigatie en indexpagina • Complexere Xpath Les 9 • 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

12. Studiedossier: te doen XSLT templates versie 1.0 • 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

13. 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

14. 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

15. 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

16. 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

17. Huiswerk ( templates versie 1 ) • 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

18. 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

19. 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

20. voorbeeld • Een voorbeeld ter illustratie van de werking van regelgestuurde methode • Download voorbeeld • En bestudeer de logica Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

21. Match patronen Speciaal geval: <xsl:template match=‘/‘ > Dit is altijd het eerste template dat wordt 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

22. Conflict resolutie Het is mogelijk dat meerder templates van toepassing zouden kunnen zijn. De XSLT engine kiest op basis van ‘prioriteit’ Laagste prioriteit: wild character * match = ‘*’ match = ‘ht:*’ Normale prioriteit: elementnaam of attribuutnaam match = ‘sd:project’ match = ‘@rating’ Hoogste prioriteit: element of attribuut met predicaat match = ‘sd:project-info [ sd:metadata/sd:type = ‘groepsopdracht’]’ Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

23. Ingebouwde default templates <xsl:template match="*"> <xsl:apply-templates/> </xsl:template> Zorgt ervoor dat het gehele brondocument automatisch afgelopen wordt <xsl:template match="text()"> <xsl:value-of select="."/> </xsl:template> Zorgt ervoor dat tekst binnen elementen wordt weergegeven Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

24. 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

25. Modulariteit in XSLT Modulariteit = herbruikbare onderdelen • Gemeenschappelijk templates • Navigatiestructuur op iedere pagina xslt stylesheets versie 2.0 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

26. Gemeenschappelijke templates <xsl:include href="general.xsl"/> • Zet gemeenschappelijk templates in één bestand ( general.xsl ) • ‘include’ dit bestand in iedere xslt Zie voorbeelden Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

27. Navigatie op iedere pagina Probleem: • De navigatie in de XSLT opnemen in tegen het principe van scheiding van vorm en inhoud. • De informatie die nodig is, staat niet in de xml bron maar in index.xml. Oplossing: • De index.xml ‘inladen’ in een ‘variabele’ • Vervolgens templates maken voor deze informatie. <xsl:variable name="index" select="document('../site-index.xml')" /> <xsl:apply-templates select="$index/sd:study-archive-index/sd:profile" /> Zie voorbeelden Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

28. En verder • Er valt nog veel meer te leren met XSLT Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

29. Volgende week • Iedereen laat zijn werk zien • Problemen zijn er om op te lossen Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl