XML<br />CSS & XSLT<br />
CSS & XSLT<br />XML bestanden vormgeven met CSS<br />Je kan de data binnen XML bestanden doormiddel van CSSvormgeven. Dit ...
CSS & XSLT<br />Stylesheet<br />Resultaat<br />@charset "utf-8";<br />/* CSS Document */<br />catalogus {<br />	font:"Cour...
CSS & XSLT<br />XSLT !<br /><ul><li> XSLT staat voor eXtensibleStylesheetLanguageTransormations.
W3C spec – http://www.w3.org/TR/xslt
Anders dan CSS – CSS gebruikt regels die gekoppeld worden aan elementen.</li></ul> XSLT gebruikt templates die een bron tr...
 XSLT kan XML bestanden omzetten naar meedere bestandformaten zoals HTML, PDF,</li></ul>Asciitext, RTF of naar een andere ...
CSS & XSLT<br />XSLT stylesheet!<br /><ul><li> Het gebruikt de http://www.w3.org/1999/XSL/Transformnamespace.En is gekoppe...
 XSLT stylesheets maken gebruiken van <xsl:stylesheet> root tag.
Stylesheets bevatten een of meer <xsl:template> tags die ieder een </li></ul>templatedefinieren.<br /><ul><li>Templates he...
De match attribute bepaald de Xpath expressie die gebruikt wordt</li></ul>  om de juiste template te bedienen.<br /><ul><l...
Upcoming SlideShare
Loading in …5
×

Les 2 Xml Css & Xslt

918 views

Published on

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
918
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Les 2 Xml Css & Xslt

  1. 1. XML<br />CSS & XSLT<br />
  2. 2. CSS & XSLT<br />XML bestanden vormgeven met CSS<br />Je kan de data binnen XML bestanden doormiddel van CSSvormgeven. Dit kan door een extern CSS bestand te koppelen!<br /><?xmlversion="1.0" encoding="utf-8"?><br /><?xml-stylesheethref="cat.css" type="text/css"?><br /><catalogus><br /> <product>dvd<br /> <artiest>Pearl Jam</artiest><br /> <titel>Live in Paris</titel><br /> <prijs> 29,95 </prijs><br /> </product><br /> <product>cd<br /> <artiest>Kings of Leon</artiest><br /> <titel>The best of.</titel><br /> <prijs>14,95</prijs><br /> </product><br /> <product>dvd<br /> <artiest>Jan Smit</artiest><br /> <titel>Live in Volendam</titel><br /> <prijs> 29,95 </prijs><br /></catalogus><br />Koppeling met stylesheet<br />css<br />catalogus {<br /> font:"Courier New", Courier<br />font-size:28px;<br />position: fixed;<br />left: 25%;}<br />product, artiest, titel, prijs { <br />display: table-row;<br />color:#666;<br />display:list-item;<br />list-style:none;<br />border-spacing: 0.5em;}<br />artiest { color:#006;}<br />titel { color:#990;}<br />prijs { color:#600;}<br />
  3. 3. CSS & XSLT<br />Stylesheet<br />Resultaat<br />@charset "utf-8";<br />/* CSS Document */<br />catalogus {<br /> font:"Courier New", Courier, monospace;<br />font-size:28px;<br />position: fixed;<br />left: 25%;}<br />product, artiest, titel, prijs { <br />display: table-row;<br />color:#666;<br />display:list-item;<br />list-style:none;<br />border-spacing: 0.5em;}<br />artiest { color:#006;}<br />titel { color:#990;}<br />prijs { color:#600;}<br />
  4. 4. CSS & XSLT<br />XSLT !<br /><ul><li> XSLT staat voor eXtensibleStylesheetLanguageTransormations.
  5. 5. W3C spec – http://www.w3.org/TR/xslt
  6. 6. Anders dan CSS – CSS gebruikt regels die gekoppeld worden aan elementen.</li></ul> XSLT gebruikt templates die een bron tree omzet naar een resultaat tree.<br /><ul><li>XSLT maakt gebruik van de XML syntax/ CSS maakt gebruikt van zijn syntax.
  7. 7. XSLT kan XML bestanden omzetten naar meedere bestandformaten zoals HTML, PDF,</li></ul>Asciitext, RTF of naar een andere XML bestand.<br /><ul><li>Er is veel mogelijk met XSLT je kan data sorteren, output herschikken, auto-</li></ul> nummering items invoegen etc……<br />
  8. 8. CSS & XSLT<br />XSLT stylesheet!<br /><ul><li> Het gebruikt de http://www.w3.org/1999/XSL/Transformnamespace.En is gekoppeld aan de xsl prefix.
  9. 9. XSLT stylesheets maken gebruiken van <xsl:stylesheet> root tag.
  10. 10. Stylesheets bevatten een of meer <xsl:template> tags die ieder een </li></ul>templatedefinieren.<br /><ul><li>Templates hebben een name of een match attribute.
  11. 11. De match attribute bepaald de Xpath expressie die gebruikt wordt</li></ul> om de juiste template te bedienen.<br /><ul><li>Templates bevatten andere XSLT tags die bepalen hoe de data </li></ul> getransformeerd wordt.<br />
  12. 12. CSS & XSLT<br />Hoe werkt XSLT!<br />
  13. 13. CSS & XSLT<br />XML bestanden vormgeven met XSLT<br /><?xmlversion="1.0" encoding="utf-8"?><br /><?xml-stylesheet type="text/xsl" href="style.xsl"?><br /><catalogus><br /> <product>dvd<br /> <artiest>Pearl Jam</artiest><br /> <titel>Live in Paris</titel><br /> <prijs> 29,95 </prijs><br /> </product><br /> <product>cd<br /> <artiest>Kings of Leon</artiest><br /> <titel>The best of.</titel><br /> <prijs>14,95</prijs><br /> </product><br /> <product>dvd<br /> <artiest>Jan Smit</artiest><br /> <titel>Live in Volendam</titel><br /> <prijs> 29,95 </prijs><br /> </product><br /></catalogus><br />Koppeling met stylesheet<br />
  14. 14. CSS & XSLT<br />XML bestanden vormgeven met XSLT<br /><head><br /><metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/><br /><title>Catalogus</title><br /><style><br />body {position: absolute;<br />left: 10%;}<br />ul {background-color:#CCC;<br />list-style-position:outside;}<br />#lijst1 {<br />width: 225px;<br />height: 235px;<br />float:left;<br />padding-top: 30px;<br /> /*padding-left: 10px;*/<br />background-color:#03F;<br /> background:url(lp.png);<br />background-repeat: no-repeat;<br /> font: Georgia, "Times New Roman", Times, serif;<br /> color: #00F;;<br />font-size:24px;}<br />
  15. 15. CSS & XSLT<br /></style><br /></head><br /><body><br /><h1 style="font-size:24px; color:#999;>">Maestro Multimedia !</h1><br /><xsl:for-each select="catalogus/product"><br /><divid="lijst1"><br /><center><xsl:value-of select="artiest" /></center><br /><br /><center><xsl:value-of select="titel" /></center><br /><br /><center>Prijs:&nbsp;&euro;<xsl:value-of select="prijs" /></center><br /></div><br /></xsl:for-each><br /></body><br /></html><br /></xsl:template><br /></xsl:stylesheet><br />
  16. 16. CSS & XSLT<br /><?xmlversion="1.0" encoding="utf-8"?><br /><?xml-stylesheet type="text/xsl" href="style.xsl"?><br /><catalogus><br /> <product>dvd<br /> <artiest>Pearl Jam</artiest><br /> <titel>Live in Paris</titel><br /> <prijs> 29,95 </prijs><br /> </product><br /> <product>cd<br /> <artiest>Kings of Leon</artiest><br /> <titel>The best of.</titel><br /> <prijs>14,95</prijs><br /> </product><br /> <product>dvd<br /> <artiest>Jan Smit</artiest><br /> <titel>Live in Volendam</titel><br /> <prijs> 29,95 </prijs><br /> </product><br /></catalogus><br />
  17. 17. Opdracht<br />Opdracht 1.<br />Maakvoor het xml tree bestandeen CSS stylesheet en koppeldezeaan het xml bestand<br />Opdracht 2.<br />Maakvoor het xml tree bestandeen XSLT stylesheet en koppeldezeaan het xml bestand.<br />Upload de bestandennaar je eigenwebomgeving en stuur de link via Mail naarm.v.ginkel@rocleiden.nl<br />

×