METAJĘZYKI 1 METAJĘZYKI 5 Politechnika Koszalińska Wydział Elektroniki i Informatyki Katedra Inżynierii Komputerowej dr inż. Robert Berezowski Ul. Śniadeckich 2 Pokój 223A

METAJĘZYKI 2 Dokument kantor.xml kantor notowanie wydarzenie datakursy dzien miesiac rok dolar funt euro hrywna korona

METAJĘZYKI 3 Zmienne - xsl:variable Deklaracja zmiennych   wartość Użycie:  Zmienna w XML –  raz zapisać, wielokrotnie odczytać.  nie ma możliwości modyfikacji  żywotność ograniczona do elementu wewnątrz którego została zadeklarowana Kantorek!

METAJĘZYKI 4 Zmienne - xsl:variable Przykład /...

METAJĘZYKI 5 Zmienne – przykłady tekstów

METAJĘZYKI 6 Kantorek! Zmienne – przykłady drzew Kantorek!......

METAJĘZYKI 7 Zmienna globalna i lokalna Kantorek!...,......,... Kantorek! Zmienna lokalna wewnątrz reguły „/” Zmienna globalna wewnątrz elementu

METAJĘZYKI 8 Jacek

METAJĘZYKI 9

METAJĘZYKI 10document() 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’) data funt euro data funt euro

METAJĘZYKI 11

METAJĘZYKI 12 Parametry – xsl:param Parametry pozwalają dynamicznie zmienić postać wyniku Rodzaje:  Globalne – pobierające dane z poza arkusza, deklarowane w elemencie  Lokalne – używane wewnątrz reguł do pobierania danych z reguły wywołującej. Deklaracja:   wartość Wywołanie reguły z parametrami:

METAJĘZYKI 13 --| |--

METAJĘZYKI 14 Przykład użycia parametrów lokalnych data funt euro

METAJĘZYKI 15 Przykład użycia parametrów globalnych euro Kantorek! <xsl:with-param name="plik" select="document('kantor2.xml')"/> data cena

METAJĘZYKI 16 Wywołanie parametrów globalnych funty dolary euro hrywna korona wyniki Plik kantor.html część body

METAJĘZYKI 17 Wywołanie parametrów globalnych function show(waluta) { var xslProc = xsltmp.createProcessor(); xslProc.input = xml; xslProc.addParameter("waluta", waluta, ""); xslProc.transform(); ekran.innerHTML = xslProc.output; } var xml, xsl, xsltmp; function init() {xml = new ActiveXObject('MSXML2.DOMDocument.4.0'); xml.async = false; xml.load('kantor.xml'); xsl=new ActiveXObject('MSXML2.FreeThreadedDOMDocument.4.0'); xsl.async = false; xsl.load('kantor-5.xsl'); xsltmp = new ActiveXObject("Msxml2.XSLTemplate.4.0"); xsltmp.stylesheet = xsl; } Wczytanie pliku xml Wczytanie pliku xsl Dodanie parametru do pliku xsl Umieszczenie rezultatu w obiekcie ‘ekran’ Plik kantor.html część head

METAJĘZYKI 18 Program telewizyjny - wybrane audycje --| |-- Parametry i hiperłącza

METAJĘZYKI 19 function tr(program){ xmlFile = "tv.xml”; xslFile = "1x.xsl"; … objXSLTProc.addParameter("data", program, ""); … parent.pl1.innerHTML = objXSLTProc.output;} … pokaz * …

METAJĘZYKI 20 function tr(program){ xmlFile = "tv.xml”; xslFile = "2x.xsl"; … objXSLTProc.addParameter("data", program, ""); … parent.pl1.innerHTML = objXSLTProc.output;} pokaz *

METAJĘZYKI 21 * function tr(pr1,pr2){ xmlFile = "tv.xml”; xslFile = "tv.xsl"; objXSLTProc.addParameter("obiekt1", pr1, ""); objXSLTProc.addParameter("obiekt2", pr2, ""); document.body.innerHTML = objXSLTProc.output;} … <INPUT TYPE="button" value="szukaj" onClick="tr(document.getElementById('pole1').value, document.getElementById('pole2').value)"/> szukane: brak

METAJĘZYKI 22 osoba function tr(pr3){xmlFile = "tv.xml”; xslFile = "tv.xsl"; objXSLTProc.addParameter("sort1", pr3, ""); document.body.innerHTML = objXSLTProc.output; parent.pokaz.innerHTML= " sort: "+pr3;} … szukane: brak …

METAJĘZYKI 23 WYSPY XML w HTML Pozwalają umieścić treści z dokumentu xml wewnątrz dokumentu html data euro dolar funt hrywna korona

METAJĘZYKI 24 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  - specyfikacja SVGwww.w3.org/TR/SVG  - strona domowa W3C SVGwww.w3.org/Graphics/SVG  - troche linków i artykułówwww.irt.org/articles/js176  - strona Adobe o SVG, kilka tutorialiwww.adobe.com/svg

METAJĘZYKI 25 Przykłady svg Linia od punktu (x1=10,y1=100) do punktu (x2=222,y2=234) w kolorze czerwonym Prostokąt od punktu (x=0,y=0) o wysokości 10 (height) i długości 100 (width) w wypełniony kolorem czerwonym 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 tekst z określonymi atrybutami: juz niedlugo majowka Animacja elementów – obrót o kąt od 0 do 360 stopni w czasie 4s nieskończoną ilość razy