5 dr inż. Robert Berezowski e-mail: robert.berezowski@ie.tu.koszalin.pl Ul. Śniadeckich 2 Pokój 223A Politechnika Koszalińska Wydział Elektroniki i Informatyki Katedra Inżynierii Komputerowej 1
Dokument kantor.xml kantor notowanie notowanie wydarzenie data kursy dzien miesiac rok korona hrywna dolar euro funt 2
Zmienne - xsl:variable Deklaracja zmiennych <xsl:variable name= xx select= wartość /> <xsl:variable name= xx >wartość</xsl:variable> Użycie: <xsl:value-of select= $xx /> Zmienna w XML raz zapisać, wielokrotnie odczytać. nie ma możliwości modyfikacji żywotność ograniczona do elementu wewnątrz którego została zadeklarowana <xsl:template match="/"> <HTML><BODY> <H1>Kantorek! </H1> <xsl:for-each select="kantor/notowanie[1]/kursy/*"> <xsl:variable name="nazwa"> <xsl:value-of select="name()"/> </xsl:variable> <xsl:value-of select="$nazwa"/><br/> </xsl:for-each> </BODY></HTML> 3
Zmienne - xsl:variable Przykład <xsl:variable name="data"> <xsl:value-of select="data/dzien"/>/ <xsl:value-of select="data/miesiac"/>/ <xsl:value-of select="data/rok"/> </xsl:variable>... <td><xsl:value-of select="$data"/></td> 4
Zmienne przykłady tekstów <xsl:value-of select= text()"/> <xsl:value-of select="substring(name(),1,3)"/> <xsl:value-of select="substring-after(text(),'.')"/> <xsl:value-of select="translate(text(),'.',',')"/> 5
Zmienne przykłady drzew <xsl:template match="/"> <HTML> <BODY bgcolor="lime"> <H1>Kantorek! </H1> <xsl:for-each select="kantor/notowanie"> <xsl:variable name="nazwa" select="."/>... <xsl:value-of select="$nazwa/kursy/funt"/>... <BR/> </xsl:for-each> </BODY></HTML> <xsl:template match="/"> <HTML> <BODY bgcolor="lime"> <H1>Kantorek! </H1> <xsl:for-each select="kantor/notowanie"> <xsl:variable name="nazwa" select="."/>... <xsl:value-of select="$nazwa/data[rok=2004]"/>... <BR/> </xsl:for-each> </BODY></HTML> 6
Zmienna globalna i lokalna <xsl:template match="/"> <HTML> <BODY bgcolor="lime"> <H1>Kantorek! </H1> <xsl:variable name="nazwa">... <xsl:for-each select="kantor/notowanie"> <xsl:value-of select="data/miesiac"/>, </xsl:for-each>... </xsl:variable> <xsl:value-of select="$nazwa"/> </BODY></HTML> Zmienna globalna wewnątrz elementu <xsl:stylesheet...> Zmienna lokalna wewnątrz reguły / <xsl:variable name="nazwa">... <xsl:for-each select="/kantor/notowanie"> <xsl:value-of select="data/miesiac"/>, </xsl:for-each>... </xsl:variable> <xsl:template match="/"> <HTML> <BODY bgcolor="lime"> <H1>Kantorek! </H1> <xsl:value-of select="$nazwa"/> </BODY></HTML> 7
<xsl:variable name="imie">jacek</xsl:variable> <xsl:template match="audycja"> <xsl:if test="@osoba=$imie"> <table border="1" width="100%"> <tr> <td width="60"><xsl:value-of select="@osoba"/></td> <td width="80"><xsl:value-of select="text()"/></td> <td width="50"><xsl:value-of select="@data"/></td> <td width="40"><xsl:value-of select="@godz"/></td> <td width="30"><xsl:value-of select="@czas"/></td> </tr> </table> </xsl:if> 8
<xsl:template match="/program"> <html><body> <table border="1"> <xsl:for-each select="//audycja[not(@osoba=preceding::*/@osoba)]"> <xsl:variable name="kto" select="@osoba"/> <tr> <td><xsl:value-of select="$kto"/></td> <td> <table border="1" width="100%"> <xsl:for-each select="//audycja[@osoba=$kto]"> <tr> <td><xsl:value-of select="../@nazwa"/></td> <td><xsl:value-of select="text()"/></td> <td><xsl:value-of select="@data"/></td> </tr> </xsl:for-each> </table> </td> </tr> </xsl:for-each> </table> </body></html> 9
document() Funkcja document() pozwala pobierać dane z innych źródeł XML, zamiast ze źródła podanego w wywołaniu procesora. Użycie: document(url), document( jakis_plik ) <xsl:variable name="kantor2" select="document('kantor2.xml')"/> <xsl:template match="/"> <table border="1"><tr><td>data</td><td>funt</td><td>euro</td></tr> <xsl:for-each select="kantor/notowanie"> <tr><td><xsl:value-of select="data"/></td> <td><xsl:value-of select="kursy/funt"/></td> <td><xsl:value-of select="kursy/euro"/></td></tr> </xsl:for-each> <tr><td>data</td><td>funt</td><td>euro</td></tr> <xsl:for-each select="$kantor2/kantor/notowanie"> <tr><td><xsl:value-of select="data"/></td> <td><xsl:value-of select="kursy/funt"/></td> <td><xsl:value-of select="kursy/euro"/></td></tr> </xsl:for-each></table> 10
11
Parametry xsl:param Parametry pozwalają dynamicznie zmienić postać wyniku Rodzaje: Globalne pobierające dane z poza arkusza, deklarowane w elemencie <xsl:stylesheet...> Lokalne używane wewnątrz reguł do pobierania danych z reguły wywołującej. Deklaracja: <xsl:param name= nazwa select= wartość /> <xsl:param name= nazwa >wartość</xsl:param> Wywołanie reguły z parametrami: <xsl:call-template name= max > <xsl:with-param name= liczba1 select= notowanie[1]/kursy/funt /> <xsl:with-param name= liczba2 select= notowanie[2]/kursy/funt /> </xsl:call-template> 12
<xsl:template match="/program"> <h1> <xsl:call-template name="naglowek"/> <xsl:call-template name="spis"> <xsl:with-param name="drzewo" select="."/> </xsl:call-template> <xsl:apply-templates/> </h1> <xsl:template match="kanal"> <a name="{@nazwa}"> <h2> <xsl:value-of select="@nazwa"/> </h2></a> <table border= 1 ><tr><td> <xsl:apply-templates/> </td></tr></table> <xsl:template name="spis"> <xsl:param name="drzewo"/> <xsl:for-each select="$drzewo/kanal"> -- <a href="#{@nazwa}"><xsl:value-of select="@nazwa"/></a> -- </xsl:for-each> 13
Przykład użycia parametrów lokalnych <xsl:template match="/"> <HTML><BODY bgcolor="lime"> <TABLE border="1"> <xsl:call-template name="tabela"> <xsl:with-param name="plik" select="."/> </xsl:call-template> <xsl:call-template name="tabela"> <xsl:with-param name="plik" select="document('kantor2.xml')"/> </xsl:call-template> </TABLE></BODY></HTML> <xsl:template name="tabela"> <xsl:param name="plik"/> <tr><td>data</td><td>funt</td><td>euro</td></tr> <xsl:for-each select="$plik/kantor/notowanie"> <tr><td><xsl:value-of select="data"/></td> <td><xsl:value-of select="kursy/funt"/></td> <td><xsl:value-of select="kursy/euro"/></td></tr> </xsl:for-each> 14
Przykład użycia parametrów globalnych <xsl:param name="waluta >euro</xsl:param> <xsl:template match="/"> <HTML><BODY bgcolor="lime"><h1>kantorek! </H1> <TABLE border="1"> <xsl:call-template name="tabela"> <xsl:with-param name="plik" select="."/> </xsl:call-template> <xsl:call-template name="tabela"> <xsl:with-param name="plik" select="document('kantor2.xml')"/> </xsl:call-template></table></body></html> <xsl:template name="tabela"> <xsl:param name="plik"/> <tr><td>data</td><td>cena</td></tr> <xsl:for-each select="$plik/kantor/notowanie"> <tr><td><xsl:value-of select="data"/></td> <td><xsl:value-of select="kursy/*[name()=$waluta]"/></td></tr> </xsl:for-each> 15
Wywołanie parametrów globalnych Plik kantor.html część body <BODY onload="init();" style="margin-top: '0'"> <button onclick="show('funt')">funty</button> <button onclick="show('dolar')">dolary</button> <button onclick="show('euro')">euro</button> <button onclick="show('hrywna')">hrywna</button> <button onclick="show('korona')">korona</button> <div id="ekran">wyniki</div> </BODY> 16
Wywołanie parametrów globalnych <SCRIPT language="jscript"> var xml, xsl, xsltmp; function init() {xml = new ActiveXObject('MSXML2.DOMDocument.4.0'); xml.async = false; xml.load('kantor.xml'); Plik kantor.html część head Wczytanie pliku xml xsl=new ActiveXObject('MSXML2.FreeThreadedDOMDocument.4.0'); xsl.async = false; Wczytanie pliku xsl xsl.load('kantor-5.xsl'); xsltmp = new ActiveXObject("Msxml2.XSLTemplate.4.0"); xsltmp.stylesheet = xsl; } function show(waluta) { var xslproc = xsltmp.createprocessor(); xslproc.input = xml; xslproc.addparameter("waluta", waluta, ""); xslproc.transform(); ekran.innerhtml = xslproc.output; } </SCRIPT> Dodanie parametru do pliku xsl Umieszczenie rezultatu w obiekcie ekran 17
<xsl:template match="/program"> <xsl:call-template name="naglowek"/> <xsl:call-template name="spis"> <xsl:with-param name="drzewo" select="."/> </xsl:call-template> <xsl:apply-templates/> <xsl:call-template name="stopka"/> <xsl:template match="kanal"> <a name="{@nazwa}"> <xsl:value-of select="@nazwa"/> </a> <xsl:template name="naglowek"> <br/>program telewizyjny - wybrane audycje<br/> <xsl:template name="spis"> <xsl:param name="drzewo"/> <xsl:for-each select="$drzewo/kanal"> -- <a href="#{@nazwa}"> <xsl:value-of select="@nazwa"/></a> -- </xsl:for-each> Parametry i hiperłącza 18
function tr(program){ xmlfile = "tv.xml ; xslfile = "1x.xsl"; objxsltproc.addparameter("data", program, ""); parent.pl1.innerhtml = objxsltproc.output;} <FORM> <INPUT TYPE="button" VALUE="TVP1" onclick="tr('tvp1');"> <INPUT TYPE="button" VALUE="TVP2" onclick="tr('tvp2');"> <INPUT TYPE="button" VALUE="TVN" onclick="tr('tvn');"> <INPUT TYPE="button" VALUE="POLSAT" onclick="tr('polsat');"> </FORM><hr> <div ID="pl1">pokaz</div> <xsl:param name="data">*</xsl:param> <xsl:template match="/program"> <xsl:apply-templates select="kanal[@nazwa=$data]"/> <xsl:template match="kanal"> <xsl:variable name="opis" select="document('tvopis.xml')"/> <xsl:apply-templates> <xsl:sort select="@osoba"/> </xsl:apply-templates> 19
function tr(program){ xmlfile = "tv.xml ; xslfile = "2x.xsl"; objxsltproc.addparameter("data", program, ""); parent.pl1.innerhtml = objxsltproc.output;} <FORM> <INPUT TYPE="button" VALUE="Justyna" onclick="tr('justyna');"> <INPUT TYPE="button" VALUE="Jacek" onclick="tr('jacek');"> <INPUT TYPE="button" VALUE="Grzesiek" onclick="tr('grzesiek');"> </FORM> <hr> <div ID="pl1">pokaz</div> <xsl:param name="data">*</xsl:param> <xsl:template match="/program"> <xsl:apply-templates select="kanal"/> <xsl:template match="kanal"> <xsl:apply-templates select="audycja[@osoba=$data]"> <xsl:sort select="@osoba"/> </xsl:apply-templates> <xsl:template match="audycja"> <table border="1" width="100% > 20
<xsl:param name="obiekt1">*</xsl:param> <xsl:param name="obiekt2">*</xsl:param> <xsl:template match="/program"> function tr(pr1,pr2){ xmlfile = "tv.xml ; xslfile = "tv.xsl"; objxsltproc.addparameter("obiekt1", pr1, ""); objxsltproc.addparameter("obiekt2", pr2, ""); document.body.innerhtml = objxsltproc.output;} <FORM> <INPUT TYPE="text" id="pole1" /> <INPUT TYPE="text" id="pole2" /> <INPUT TYPE="button" value="szukaj" onclick="tr(document.getelementbyid('pole1').value, document.getelementbyid('pole2').value)"/> </FORM><hr/> szukane: <div id= pokaz">brak</div> <xsl:apply-templates select="kanal"> <xsl:sort select="audycja/@czas"/> </xsl:apply-templates> <xsl:template match="kanal"> <xsl:apply-templates select="audycja[(@*=$obiekt1) or (@*=$obiekt2) or (.=$obiekt1) or (.=$obiekt2)]"> </xsl:apply-templates> 21
<xsl:stylesheet xmlns:msxsl="urn:schemas-microsoft-com:xslt"> <xsl:param name="sort1">osoba</xsl:param> <xsl:variable name="tylko.audycje"> <element> <xsl:for-each select="/program/kanal > <xsl:for-each select="audycja"> <xsl:copy-of select="."/> </xsl:for-each> </xsl:for-each> </element> </xsl:variable> <xsl:template match="/program"> function tr(pr3){xmlfile = "tv.xml ; xslfile = "tv.xsl"; objxsltproc.addparameter("sort1", pr3, ""); document.body.innerhtml = objxsltproc.output; parent.pokaz.innerhtml= " sort: "+pr3;} <FORM><INPUT TYPE="text" id="pole3" /> <INPUT TYPE="button" value="szukaj" onclick="tr(document.getelementbyid('pole3').value)"/> </FORM><hr/> szukane: <div id="pokaz">brak</div> <xsl:call-template name="wypisz"> <xsl:with-param name="wszystkie" select="$tylko.audycje"/> </xsl:call-template> <xsl:template name="wypisz > <xsl:param name="wszystkie"/> <xsl:for-each select="msxsl:node-set($wszystkie)/element/audycja"> <xsl:sort select="@*[name()=$sort1]"/> <table border="1" width="100% ><tr> <td width="60"><xsl:value-of select="@osoba"/></td> 22
WYSPY XML w HTML Pozwalają umieścić treści z dokumentu xml wewnątrz dokumentu html <HTML><BODY bgcolor= lime > <XML ID="wyspa" src="kantor3.xml"></xml> <table border="1" datasrc="#wyspa"> <thead><th colspan="3">data</th><th>euro</th> <th>dolar</th><th>funt</th><th>hrywna</th> <th>korona</th></thead> <tr><td><span datafld="dzien"/></td><td> <span datafld="miesiac"/></td><td> <span datafld="rok"/></td> <td><span datafld="dolar"/></td> <td><span datafld="euro"/></td> <td><span datafld="funt"/></td> <td><span datafld="hrywna"/></td> <td><span datafld="korona"/></td> </tr></table></body></html> 23
SVG Scalable Vector Graphics Język opisu grafiki dwuwymiarowej Grafika jest opisywana za pomocą równań matematycznych przez co zajmuje mniej pamięci niż pliki graficzne typu gif, jpg. Kilka linków www.w3.org/tr/svg - specyfikacja SVG www.w3.org/graphics/svg - strona domowa W3C SVG www.irt.org/articles/js176 - troche linków i artykułów www.adobe.com/svg - strona Adobe o SVG, kilka tutoriali 24
Przykłady svg Linia od punktu (x1=10,y1=100) do punktu (x2=222,y2=234) w kolorze czerwonym <line x1="10" y1="100" x2="222" y2="234" style="fill:red"/> Prostokąt od punktu (x=0,y=0) o wysokości 10 (height) i długości 100 (width) w wypełniony kolorem czerwonym <rect x="0" y="0" height="10" width="100" style="fill:red"/> Koło o środku w punkcie (cx=150,cy=150) i promieniu r=50 wypełniony kolorem zielonym, ze stopniem przeźroczystości 0.5 <circle cx="150" cy="150" r="50 style="fill:green; fill-opacity: 0.5"/> tekst z określonymi atrybutami: <text style = "fill: red; font-size: 24pt" x = "25" y = "250"> juz niedlugo majowka</text> Animacja elementów obrót o kąt od 0 do 360 stopni w czasie 4s nieskończoną ilość razy <animatetransform attributename="transform" type="rotate" dur="4s" from="0" to="360 repeatcount = "indefinite"/> 25