XML extensible Markup Language. część 3

Transkrypt

1 XML extensible Markup Language część 3

2 CSS Kaskadowe arkusze stylów CSS Kaskadowe arkusze stylów CSS to skrót od Cascading Style Sheets Style pozwalają definiować sposób wyświetlania elementów dokumentu HTML Style były dodane do HTML 4.0 Zewnętrzne arkusze stylów pozwalają zaoszczędzić dużo pracy Zewnętrzne arkusze stylów przechowywane są w plikach z rozszerzeniem CSS

3 CSS Kaskadowe arkusze stylów Według konsorcjum W3C język HTML miał nie zawierać informacji jak formatować elementy. Język ten miał raczej za zadanie opisywać zawartość dokumentu np. <h1>to jest nagłówek</h1> <p>to jest paragraf</p> Problemy pojawiły się kiedy do wersji HTML 3.2 zostały dodane znaczniki takie jak np. <font> z atrybutami określającymi kolor: <font color="red">jakis tekst</font> Stworzenie skomplikowanej strony WWW (np. z wieloma kolorami czcionki) stało się bardzo pracochłonne.

4 CSS Kaskadowe arkusze stylów Arkusze stylów CSS (od wersji HTML 4.0) rozwiązały ten problem. Definiują one bowiem sposób wyświetlania na stronie elementów języka HTML. A zatem zawartość strony może być oddzielona od sposobu prezentacji informacji na stronie. Zawartość strony jest umieszczona w pliku HTML, natomiast sposób jej prezentacji w przeglądarce określony jest w pliku CSS. W chwili obecnej wszystkie przeglądarki wspierają technologię CSS.

5 Składania CSS W składni CSS wyróżniamy selektor i jedną lub więcej deklaracji: Selektor Deklaracja Deklaracja Właściwość Wartość Właściwość Wartość Selektor jest zwykle elementem HTML, który chcemy opisać. Każda deklaracja składa się z właściwości i wartości. Właściwość jest atrybutem stylu, który chcemy zmienić. Każda właściwość posiada wartość.

6 Przykład p{color:red;text-align:center;} Deklaracje możemy umieścić w różnych linijkach: p { color:red; text-align:center; } Możemy dodać komentarze: p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }

7 Przykład (cd) Efekt:

8 Przykład

9 Przykład

10 Przykład

11 Przykład

12 Przykład

13 Przykład

14 Przykład

15 Przykład

16 Przykład

17 Selektory id i class Oprócz formatowania wybranych elementów HTML arkusze CSS pozwalają określać własne selektory id i class. Selektor id Selektor ten pozwala określić styl jednego (!!!), wybranego elementu. Selektor ten wykorzystuje atrybut id elementu HTML i jest zdefiniowany z "#".

18 Przykład Kod strony WWW: <html> <head> <style type="text/css"> #para1 { text-align:center; color:red; font-family:arial; } </style> </head> <body> <p id="para1">okreslony styl</p> <p>brak stylu</p> </body> </html>

20 Selektory id i class (cd) Selektor class Selektor ten pozwala określić styl grupy elementów (a nie jednego jak w przypadku selektora id). Selektor ten wykorzystuje atrybut class elementu HTML i jest zdefiniowany z "."

21 Przykład Kod strony WWW: <html> <head> <style type="text/css">.center { text-align:center; } </style> </head> <body> <h1 class="center">naglowek</h1> <p class="center">paragraf</p> </body> </html>

23 Przykład Kod strony WWW: <html> <head> <style type="text/css"> p.center { text-align:center; } </style> </head> <body> <h1 class="center">brak stylu</h1> <p class="center">styl</p> </body> </html>

25 Sposoby dodania styli do strony WWW Zewnętrzny arkusz stylów CSS Rozwiązanie idealne wtedy gdy styl jest wykorzystywany na wielu stronach WWW. Umożliwia modyfikację wielu stron internetowych przez modyfikację jednego pliku. Każda strona musi posiadać link do pliku CSS. Odbywa się to przez zastosowanie znacznika <link> znajdującego się w nagłówku strony.

26 Przykład Kod strony WWW: <head> <link rel="stylesheet" type="text/css" href="style.css"/> </head> Zawartość pliku CSS: hr{color:sienna;} p{margin-left:20px;} body{background-image:url("images/back40.gif");} UWAGA: nie zostawiamy miejsca między wartością i jednostką: p{margin-left:20 px;}

27 Sposoby dodania styli do strony WWW Wewnętrzny arkusz stylów CSS Rozwiązanie stosowane wtedy gdy każda strona ma swój własny styl. Rozwiązanie kłopotliwe jeżeli chcemy modyfikować wiele stron. Styl umieszczamy w nagłówku strony, w elemencie <style>.

28 Przykład Kod strony WWW: <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>

29 Sposoby dodania styli do strony WWW Metoda inline Metoda niezgodna z zasadą rozdzielenia zawartości strony WWW i sposobu jej prezentacji. Rozwiązanie stosowane sporadycznie. Określenie stylu umieszczamy w atrybucie style dowolnego elementu HTML. Przykład <p style="color:sienna;margin-left:20px">paragraf</p>

30 XML i CSS Do dokumentów XML można dołączyć arkusz stylów CSS, który pozwoli wyświetlić zawartość pliku w sposób czytelny dla użytkownika, a nie w postaci dość zawiłego drzewa danych ze znacznikami. Dokument XML można formatować zarówno za pomocą kaskadowych arkuszy stylów CSS, o czym mówimy niżej, jak i nowocześniejszego języka XSLT (extensible Stylesheet Language Transformations), o czym powiemy później. Style CSS stosowane w dokumentach XML są tymi samymi stylami, jakie znamy z języka HTML

31 Dołączanie stylów Arkusze stylów można dołączać do dokumentu XML w samym dokumencie lub utworzyć oddzielny plik ze stylami i podpiąć go w odpowiedni sposób do XML. Zalecany jest właśnie ten drugi sposób, a odpowiedni kod wygląda następująco: <?xml version="1.0" encoding="iso "?> <?xml-stylesheet type="text/css" href="style.css"?>

32 Dołączanie stylów <?xml version="1.0" encoding="utf-8"?> <spis_osob> <osoba> <imie>marek</imie> <nazwisko>nowak</nazwisko> <wiek>23</wiek> </osoba> <osoba> <imie>tomasz</imie> <nazwisko>pawlak</nazwisko> <wiek>33</wiek> </osoba> <osoba> <imie>piotr</imie> <nazwisko>kaczkowski</nazwisko> <wiek>27</wiek> </osoba> </spis_osob>

33 Dołączanie stylów W przeglądarce:

34 Dołączanie stylów Ze stylami: Plik pusty! <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="style.css"?> <spis_osob> <osoba> <imie>marek</imie> <nazwisko>nowak</nazwisko> <wiek>23</wiek> </osoba> <osoba> <imie>tomasz</imie> <nazwisko>pawlak</nazwisko> <wiek>33</wiek> </osoba> <osoba> <imie>piotr</imie> <nazwisko>kaczkowski</nazwisko> <wiek>27</wiek> </osoba> </spis_osob>

35 Dołączanie stylów W przeglądarce:

36 display Polecenie umożliwiające uporządkowanie informacji. Możliwe wartości: block - element wyświetlany jako osobny blok (podobnie jak w HTML elementy: h1, p) inline - element wyświetlany obok poprzedniego bloku. none element nie jest wyświetlany w ogóle.

37 display Przykład osoba{ display:inline; } W przeglądarce:

38 display Przykład osoba{ display:block; } W przeglądarce:

39 display Przykład osoba{ display:none; } W przeglądarce:

40 display Przykład osoba{ display:block; } imie{ display:block; } W przeglądarce:

41 Elementy CSS Przykład W przeglądarce: osoba{ display:block; } imie{ display:block; color:blue; font-weight:bold; }

42 Elementy CSS Przykład osoba{ display:block; } imie{ color:blue; font-weight:bold; } nazwisko{ font-style:italic; } W przeglądarce:

43 Elementy CSS Przykład W przeglądarce: osoba{ display:block; margin-top:20px; margin-left:50px; } imie{ color:blue; font-weight:bold; } nazwisko{ font-style:italic; }

44 El. CSS Przykład osoba{ display:block; margin-top:20px; margin-left:50px; border-style:solid; border-width:2px; } imie{ color:blue; font-weight:bold; } nazwisko{ font-style:italic; } W przeglądarce:

45 El. CSS Przykład W przeglądarce: osoba{ display:block; margin-top:20px; margin-left:50px; border:solid 2px; width:500px; height:35px; } imie{ color:blue; font-weight:bold; } nazwisko{ font-style:italic; }

46 El. CSS Przykład W przeglądarce: osoba{ display:block; margin-top:20px; margin-left:50px; border:solid 2px; width:500px; height:35px; padding-left:20px; padding-top:10px; } imie{ color:blue; font-weight:bold; } nazwisko{ font-style:italic; }

47 osoba{ El. CSS display:block; margin-top:20px; margin-left:50px; border:solid 2px; Przykład width:500px; height:35px; padding-left:20px; padding-top:10px; background:green; } imie{ color:blue; font-weight:bold; } nazwisko{ font-style:italic; } W przeglądarce:

48 El. CSS Przykład W przeglądarce: osoba{ display:block; margin-top:20px; margin-left:50px; border:solid 2px; width:500px; height:35px; padding-left:20px; padding-top:10px; background-image:url('trawa.png'); } imie{ color:blue; font-weight:bold; } nazwisko{ font-style:italic; }

49 El. CSS Przykład W przeglądarce: spis_osob{ background-image:url('trawa.png'); } osoba{ display:block; margin-top:20px; margin-left:50px; border:solid 2px; width:500px; height:35px; padding-left:20px; padding-top:10px; } imie{ color:blue; font-weight:bold; } nazwisko{ font-style:italic; }

50 El. CSS Przykład osoba{ display:block; border-style:solid 2px; width:300px; } imie{ color:blue; font-weight:bold; } nazwisko { font-style:italic; } W przeglądarce:

51 El. CSS Przykład W przeglądarce: osoba{ display:block; border-style:solid 2px; width:300px; position:relative; left:100px; } imie{ color:blue; font-weight:bold; } nazwisko { font-style:italic; }

52 osoba{ El. CSS display:block; border-style:solid 2px; width:300px; Przykład position:relative; left:100px; top:20px; } imie{ color:blue; font-weight:bold; } nazwisko { font-style:italic; } W przeglądarce:

53 El. CSS Przykład osoba{ display:block; border-style:solid 2px; width:300px; position:absolute; } imie{ color:blue; font-weight:bold; } nazwisko { font-style:italic; } W przeglądarce:

54 El. CSS Przykład osoba{ display:block; border-style:solid 2px; width:300px; position:absolute; top:30px; } imie{ color:blue; font-weight:bold; } nazwisko { font-style:italic; } W przeglądarce:

55 Atrybuty ID Plik XML: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="style.css"?> <spis_osob> <osoba id="os1"> <imie>marek</imie> <nazwisko>nowak</nazwisko> <wiek>23</wiek> </osoba> <osoba> <imie>tomasz</imie> <nazwisko>pawlak</nazwisko> <wiek>33</wiek> </osoba> <osoba> <imie>piotr</imie> <nazwisko>kaczkowski</nazwisko> <wiek>27</wiek> </osoba> </spis_osob>

56 Atrybuty ID Przykład osoba{ display:block; } [id="os1"]{ color:green; font-weight:bold; } imie{ color:blue; font-weight:bold; } nazwisko{ font-style:italic; } W przeglądarce:

57 Atrybuty ID Przykład osoba{ display:block; } osoba[id="os1"]{ color:green; font-weight:bold; } imie{ color:blue; font-weight:bold; } nazwisko{ font-style:italic; } W przeglądarce:

58 Klasy Plik XML: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="style.css"?> <spis_osob> <osoba class="os1"> <imie>marek</imie> <nazwisko>nowak</nazwisko> <wiek>23</wiek> </osoba> <osoba> <imie>tomasz</imie> <nazwisko>pawlak</nazwisko> <wiek>33</wiek> </osoba> <osoba class="os1"> <imie>piotr</imie> <nazwisko>kaczkowski</nazwisko> <wiek>27</wiek> </osoba> </spis_osob>

59 Klasy Przykład osoba{ display:block; } [class="os1"]{ color:green; font-weight:bold; } imie{ color:blue; font-weight:bold; } nazwisko{ font-style:italic; } W przeglądarce:

60 Klasy Przykład osoba{ display:block; } osoba[class="os1"]{ color:green; font-weight:bold; } imie{ color:blue; font-weight:bold; } nazwisko{ font-style:italic; } W przeglądarce:

61 before i after osoba{ display:block; } spis_osob:before { font-weight:bold; content:"spis osob*"; } spis_osob:after { font-weight:bold; content:"*spis pochodzi z..."; }

62 before i after W przeglądarce:

63 before i after Plik XML: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="style.css"?> <spis_osob> <osoba wiek="23"> <imie>marek</imie> <nazwisko>nowak</nazwisko> </osoba> <osoba wiek="31"> <imie>tomasz</imie> <nazwisko>pawlak</nazwisko> </osoba> <osoba wiek="28"> <imie>piotr</imie> <nazwisko>kaczkowski</nazwisko> </osoba> </spis_osob>

64 before i after Przykład W przeglądarce: osoba{ display:block; } imie{ color:blue; font-weight:bold; } nazwisko{ font-style:italic; } osoba:after { content:attr(wiek); color:green; font-style:bold; }

65 before i after Plik XML: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="style.css"?> <spis_osob> <osoba wiek="23" id="1"> <imie>marek</imie> <nazwisko>nowak</nazwisko> </osoba> <osoba wiek="31" id="5"> <imie>tomasz</imie> <nazwisko>pawlak</nazwisko> </osoba> <osoba wiek="28" id="8"> <imie>piotr</imie> <nazwisko>kaczkowski</nazwisko> </osoba> </spis_osob>

66 before i after osoba{ display:block; } imie{ color:blue; font-weight:bold; } nazwisko{ font-style:italic; } osoba:after { content:"wiek:"attr(wiek)" id:"attr(id); color:green; font-style:bold; }

67 before i after to co poprzednio + spis_osob:before { content:"spis osob: \A\A"; white-space:pre; }

68 XSL transformations (XSLT) XSLT (ang. extensible Stylesheet Language Transformations) jest opartym na XML językiem transformacji dokumentów XML XSLT umożliwia przetłumaczenie dokumentów z jednego formatu XML na inny format XML, ale również na HTML, PDF i inne. Arkusze XSLT określają w jaki sposób przekształcić poszczególne elementy wejściowe pliku XML. dokument XML arkusz XSLT procesor XSLT plik wyjściowy (XML, HTML, PDF etc.)

69 Struktura XSLT Arkusz XSLT ma następującą strukturę <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" INSTRUKCJE OKREŚLAJĄCE PRZEKSZTAŁCENIA ELEMENTÓW </xsl:stylesheet> Zapisujemy go w pliku z rozszerzeniem xsl np. arkusz.xsl W dokumencie XML, który ma być przekształcamy umieszczamy <?xml-stylesheet type="application/xml" href="arkusz.xsl"?>

70 Dołączenie XSLT Rozważmy następujący dokument XML <?xml version="1.0" encoding="utf-8"?> <spis_osob> <osoba> <imie>marek</imie> <nazwisko>nowak</nazwisko> <wiek>23</wiek> </osoba> <osoba> <imie>tomasz</imie> <nazwisko>pawlak</nazwisko> <wiek>33</wiek> </osoba> <osoba> <imie>piotr</imie> <nazwisko>kaczkowski</nazwisko> <wiek>27</wiek> </osoba> </spis_osob>

71 Dołączenie XSLT Dokument XML + XSLT <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="application/xml" href="arkusz.xsl"?> <spis_osob> <osoba> <imie>marek</imie> <nazwisko>nowak</nazwisko> <wiek>23</wiek> </osoba> <osoba> <imie>tomasz</imie> <nazwisko>pawlak</nazwisko> <wiek>33</wiek> </osoba> <osoba> <imie>piotr</imie> <nazwisko>kaczkowski</nazwisko> <wiek>27</wiek> </osoba> </spis_osob>

72 Dołączenie XSLT Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" </xsl:stylesheet> W przeglądarce:

73 <xsl:template> Arkusz styli XSL składa się z jednej lub więcej reguł nazywanych szablonami (template). Szablon zawiera raguły, które są stosowane kiedy odpowiedni element (węzeł) zostanie napotkany. Jeżeli chcemy dokonać transformacji wybranego elementu z dokumentu XML musimy się do niego odwołać w arkuszu XSL: <xsl:template match="element"> SPOSÓB PRZEKSZTAŁCENIA ELEMENTU </xsl:template> Do elementów dokumentu XML odwołujemy się wykorzystując XPath.

74 <xsl:template> / - oznacza cały dokument (korzeń) Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> osoba </xsl:template> </xsl:stylesheet> W przeglądarce:

75 <xsl:template> Odwołanie do elementów o określonej nazwie. Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="osoba"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

76 <xsl:template> Odwołanie do elementów o określonej nazwie. Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="//osoba"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

77 <xsl:template> Odwołanie do elementu o określonej nazwie i numerze. Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="osoba[2]"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

78 <xsl:template> Odwołanie do ostatniego elementu o określonej nazwie. Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="osoba[last()]"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

79 <xsl:template> Odwołanie do trzeciego od końca elementu o określonej nazwie. Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="osoba[last()-2]"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

80 <xsl:template> Odwołanie do elmentów o określonej nazwie i na określonej pozycji. Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="osoba[position() < 3]"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

81 <xsl:template> Odwołanie do elementu, którego dziecko ma określoną wartość. Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="osoba[wiek = 25 ]"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

82 <xsl:template> Odwołanie do elementu, którego dziecko ma określoną wartość. Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="osoba[wiek > 26 ]"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

83 <xsl:template> Odwołanie do elementu, którego dziecko ma określoną wartość. Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="osoba[wiek>25 and wiek<35] abc </xsl:template> </xsl:stylesheet> W przeglądarce:

84 <xsl:template> Odwołanie do elementu, którego dziecko ma określoną wartość. Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="osoba[wiek=25 or wiek=35] abc </xsl:template> </xsl:stylesheet> W przeglądarce:

85 <xsl:template> Dokument XML z atrybutami + XSLT <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="application/xml" href="arkusz.xsl"?> <spis_osob> <osoba wiek="23"> <imie>marek</imie> <nazwisko>nowak</nazwisko> </osoba> <osoba wiek="33"> <imie>tomasz</imie> <nazwisko>pawlak</nazwisko> </osoba> <osoba wiek="27"> <imie>piotr</imie> <nazwisko>kaczkowski</nazwisko> </osoba> </spis_osob>

86 <xsl:template> Odwołanie do elementu z atrybutem o określonej wartości. Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="osoba[@wiek = '33']"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

87 <xsl:template> Odwołanie do elementu z atrybutem o określonej wartości. Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="osoba[@wiek < '30']"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

88 <xsl:template> Odwołanie do elementu z atrybutem o określonej wartości. Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="osoba[@wiek>25 abc </xsl:template> </xsl:stylesheet> W przeglądarce:

89 <xsl:template> Dokument XML z atrybutami + XSLT <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="application/xml" href="arkusz.xsl"?> <spis_osob> <osoba wiek="23"> <imie>marek</imie> <nazwisko>nowak</nazwisko> </osoba> <osoba wiek="33"> <imie>tomasz</imie> <nazwisko>pawlak</nazwisko> </osoba> <osoba> <imie>piotr</imie> <nazwisko>kaczkowski</nazwisko> </osoba> </spis_osob>

90 <xsl:template> Odwołanie do elementów z pewnym atrybutem. Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="osoba[@wiek]"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

91 <xsl:template> Dokument XML + XSLT <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="application/xml" href="arkusz.xsl"?> <spis_osob> <osoba> <imie>marek</imie> <nazwisko>nowak</nazwisko> </osoba> <osoba> <imie>tomasz</imie> <nazwisko>pawlak</nazwisko> </osoba> <poz> <osoba> <imie>piotr</imie> <nazwisko>kaczkowski</nazwisko> </osoba> </poz> </spis_osob>

92 <xsl:template> Odwołanie do wybranego elementu. Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="osoba"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

93 <xsl:template> Odwołanie do dzieci pewnego elementu. Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="spis_osob/osoba"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

94 <xsl:template> Odwołanie do dzieci pewnego elementu. Przykład <xsl:template match="spis_osob/osoba"> abc </xsl:template> <xsl:template match="poz/osoba"> ABC </xsl:template> W przeglądarce:

95 <xsl:template> Dokument XML z atrybutami + XSLT <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="application/xml" href="arkusz.xsl"?> <spis_osob> <osoba wiek="29"> <imie>marek</imie> <nazwisko>nowak</nazwisko> </osoba> <osoba wiek="25"> <imie>tomasz</imie> <nazwisko>pawlak</nazwisko> </osoba> <osoba wiek="35"> <imie>piotr</imie> <nazwisko>kaczkowski</nazwisko> </osoba> </spis_osob>

96 <xsl:template> Przetwarzanie dokumentu. Przykład <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html> <body> <h3>spis</h3> </body> </html> </xsl:template> </xsl:stylesheet> W przeglądarce:

97 <xsl:template> Przykład W przeglądarce: <xsl:template match="/"> <html> <body> <h3>spis</h3> <table border="1"> <tr> <th>first name</th> <th>last name</th> <th>age</th> </tr> <tr> <td>.</td><td>.</td> <td>.</td> </tr> </table> </body> </html> </xsl:template>

98 <xsl:value-of select=" "> Pobranie zawartości elementu. Przykład <xsl:template match="/"> <html> <body> <h3>spis</h3> <table border="1"> <tr> <th>first name</th> <th>last name</th> <th>age</th> </tr> <tr> <td><xsl:value-of select="spis_osob/osoba/imie"/></td> <td><xsl:value-of select="spis_osob/osoba/nazwisko"/></td> <td><xsl:value-of </tr> </table> </body> </html>

99 <xsl:value-of select=" "> W przeglądarce: Niestety wyświetlona jest tylko zawartość jednego elementu osoba. Rozwiązanie?

100 <xsl:value-of select=" "> Ten sam efekt uzyskamy dla: Przykład <xsl:template match="/"> <html> <body> <h3>spis</h3> <table border="1"> <tr> <th>first name</th> <th>last name</th> <th>age</th> </tr> <tr> <td><xsl:value-of select="//osoba/imie"/></td> <td><xsl:value-of select="//osoba/nazwisko"/></td> <td><xsl:value-of </tr> </table> </body> </html>

101 <xsl:for-each select=" "> Pętla po wszystkich elementach o danej nazwie. Przykład <xsl:template match="/"> <html><body> <h3>spis</h3> <table border="1"> <tr> <th>first name</th> <th>last name</th> <th>age</th> </tr> <xsl:for-each select="spis_osob/osoba"> <tr> <td><xsl:value-of select="imie"/></td> <td><xsl:value-of select="nazwisko"/></td> <td><xsl:value-of select="@wiek"/></td> </tr> </xsl:for-each> </table> </body></html>

102 <xsl:for-each select=" "> W przeglądarce:

103 <xsl:for-each select=" "> Ważny jest sposób adresowania elementów. Przykład <xsl:template match="/"> <html><body> <h3>spis</h3> <table border="1"> <tr> <th>first name</th> <th>last name</th> <th>age</th> </tr> <xsl:for-each select="osoba"> <tr> <td><xsl:value-of select="imie"/></td> <td><xsl:value-of select="nazwisko"/></td> <td><xsl:value-of </tr> </xsl:for-each> </table> </body></html>

105 <xsl:for-each select=" "> Ważny jest sposób adresowania elementów. Przykład <xsl:template match="/"> <html><body> <h3>spis</h3> <table border="1"> <tr> <th>first name</th> <th>last name</th> <th>age</th> </tr> <xsl:for-each select="//osoba"> <tr> <td><xsl:value-of select="imie"/></td> <td><xsl:value-of select="nazwisko"/></td> <td><xsl:value-of </tr> </xsl:for-each> </table> </body></html>

107 Dołączenie XSLT Ten sam efekt uzyskamy dla: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="application/xml" href="arkusz.xsl"?> <spis_osob> <osoba wiek="29"> <imie>marek</imie> <nazwisko>nowak</nazwisko> </osoba> <osoba wiek="25"> <imie>tomasz</imie> <nazwisko>pawlak</nazwisko> </osoba> <poz> <osoba wiek="35"> <imie>piotr</imie> <nazwisko>kaczkowski</nazwisko> </osoba> </poz> </spis_osob>

109 <xsl:for-each select=" "> Do pętli możemy dodać warunek. Przykład <xsl:template match="/"> <html><body> <h3>spis</h3> <table border ="1"> <tr> <th>first name</th> <th>last name</th> <th>age</th> </tr> <xsl:for-each select="//osoba[imie='marek']"> <tr> <td><xsl:value-of select="imie"/></td> <td><xsl:value-of select="nazwisko"/></td> <td><xsl:value-of </tr> </xsl:for-each> </table></body></html>

111 <xsl:for-each select=" "> Do pętli możemy dodać warunek. Przykład <xsl:template match="/"> <html><body> <h3>spis</h3> <table border="1"> <tr> <th>first name</th> <th>last name</th> <th>age</th> </tr> <xsl:for-each < 35]"> <tr> <td><xsl:value-of select="imie"/></td> <td><xsl:value-of select="nazwisko"/></td> <td><xsl:value-of </tr> </xsl:for-each> </table></body></html>

113 <xsl:for-each select=" "> Do pętli możemy dodać warunek. Przykład <xsl:template match="/"> <html><body> <h3>spis</h3> <table border="1"> <tr> <th>first name</th> <th>last name</th> <th>age</th> </tr> <xsl:for-each select="//osoba[imie!='marek']"> <tr> <td><xsl:value-of select="imie"/></td> <td><xsl:value-of select="nazwisko"/></td> <td><xsl:value-of </tr> </xsl:for-each> </table></body></html>

115 <xsl:for-each select=" "> Do pętli możemy dodać warunek. Przykład <xsl:template match="/"> <html><body> <h3>spis</h3> <table border="1"> <tr> <th>first name</th> <th>last name</th> <th>age</th> </tr> <xsl:for-each select="//osoba[imie!='marek' < 35]"> <tr> <td><xsl:value-of select="imie"/></td> <td><xsl:value-of select="nazwisko"/></td> <td><xsl:value-of </tr> </xsl:for-each> </table></body></html>

117 <xsl:sort select=" "> Dane pobierane z dokumentu XML możemy sortować. Przykład <xsl:for-each select="//osoba"> <xsl:sort select="@wiek"/> <tr> <td><xsl:value-of select="imie"/></td> <td><xsl:value-of select="nazwisko"/></td> <td><xsl:value-of select="@wiek"/></td> </tr> </xsl:for-each> W przeglądarce:

118 <xsl:sort select=" "> Dane pobierane z dokumentu XML możemy sortować. Przykład <xsl:for-each select="//osoba"> <xsl:sort select="@wiek" order="ascending"/> <tr> <td><xsl:value-of select="imie"/></td> <td><xsl:value-of select="nazwisko"/></td> <td><xsl:value-of select="@wiek"/></td> </tr> </xsl:for-each> W przeglądarce:

119 <xsl:sort select=" "> Dane pobierane z dokumentu XML możemy sortować. Przykład <xsl:for-each select="//osoba"> <xsl:sort select="@wiek" order="descending"/> <tr> <td><xsl:value-of select="imie"/></td> <td><xsl:value-of select="nazwisko"/></td> <td><xsl:value-of select="wiek"/></td> </tr> </xsl:for-each> W przeglądarce:

120 <xsl:sort select=" "> Dane pobierane z dokumentu XML możemy sortować. Przykład <xsl:for-each select="//osoba"> <xsl:sort select="imie" order="descending"/> <tr> <td><xsl:value-of select="imie"/></td> <td><xsl:value-of select="nazwisko"/></td> <td><xsl:value-of select="@wiek"/></td> </tr> </xsl:for-each> W przeglądarce:

121 <xsl:if select=" "> Ponownie dodanie warunku (ale inaczej). Przykład <xsl:for-each select="//osoba"> <xsl:if > 25"> <tr> <td><xsl:value-of select="imie"/></td> <td><xsl:value-of select="nazwisko"/></td> <td><xsl:value-of </tr> </xsl:if> </xsl:for-each> W przeglądarce:

122 <xsl:choose select=" "> Dodanie warunków jeszcze inaczej. Przykład <xsl:for-each select="//osoba"> <xsl:choose> <xsl:when > 30"> <tr style="background-color:green"> <td><xsl:value-of select="imie"/></td> <td><xsl:value-of select="nazwisko"/></td> <td><xsl:value-of </tr> </xsl:when> <xsl:otherwise> <tr> <td><xsl:value-of select="imie"/></td> <td><xsl:value-of select="nazwisko"/></td> <td><xsl:value-of </tr> </xsl:otherwise> </xsl:choose> </xsl:for-each>

123 <xsl:choose select=" "> W przeglądarce:

124 <xsl:attribute> Do elementu HTML możemy dodać atrybut będący zawartością jakiegoś elementu bądź wartością atrybutu z dokumentu XML. Przykład <galeria> <obrazek>most.jpg</obrazek> <obrazek>widok.jpg</obrazek> </galeria> <body> <h3>obrazki</h3> <xsl:for-each select="galeria/obrazek"> <img> <xsl:attribute name="src"> <xsl:value-of select="."/> </xsl:attribute> </img> </xsl:for-each> </body>

125 <xsl: apply-templates select=" "/> Przetwarzanie (dzieci) elementu. Przykład <xsl:template match="/"> <html> <body> <h3>spis</h3> <xsl:apply-templates/> </body> </html> </xsl:template> <xsl:template match="osoba"> <p> <xsl:apply-templates select="imie"/> <xsl:apply-templates select="nazwisko"/> Wiek: <span style="color:red"> <xsl:value-of </span> </p> </xsl:template>

126 <xsl: apply-templates select=" "/> Przetwarzanie (dzieci) elementu. Przykład (cd) <xsl:template match="imie"> Imie: <span style="color:blue"><xsl:value-of select="."/> </span><br/> </xsl:template> <xsl:template match="nazwisko"> Nazwisko: <span style="color:green"><xsl:value-of select="."/> </span><br/> </xsl:template>

127 <xsl: apply-templates select=" "> W przeglądarce:

128 <xsl: apply-templates select=" "/> Przetwarzanie (dzieci) elementu. Przykład (cd) Definiujemy szablon tylko dla elementu imie: <xsl:template match="imie"> Imie: <span style="color:blue"><xsl:value-of select="."/> </span><br/> </xsl:template> W przeglądarce:

129 <xsl: apply-templates select=" "/> A teraz inna wersja znanego nam już arkusza XSLT. Przykład <xsl:template match="/"> <html> <body> <h3>spis</h3> <table border="1"> <tr> <th>first name</th> <th>last name</th> <th>age</th> </tr> <xsl:apply-templates/> </table> </body> </html> </xsl:template>

130 <xsl: apply-templates select=" "/> Przykład (cd) Szablon dla elementu osoba: <xsl:template match="osoba"> <tr> <xsl:apply-templates select="imie"/> <xsl:apply-templates select="nazwisko"/> <xsl:apply-templates select="wiek"/> </tr> </xsl:template>

131 <xsl: apply-templates select=" "/> Przykład (cd) Szablon dla pozostałych elementów: <xsl:template match="imie"> <td><xsl:value-of select="."/></td> </xsl:template> <xsl:template match="nazwisko"> <td><xsl:value-of select="."/></td> </xsl:template> <xsl:template match="wiek"> <td><xsl:value-of select="."/></td> </xsl:template>

132 <xsl: apply-templates select=" "> W przeglądarce: