XML extensible Markup Language. część 3

Podobne dokumenty
XML extensible Markup Language. część 6

XML extensible Markup Language. część 4

XML extensible Markup Language. część 8

XML extensible Markup Language 3

Wprowadzenie do arkuszy stylistycznych XSL i transformacji XSLT

Przetwarzanie dokumentów XML i zaawansowane techniki WWW Przetwarzanie dokumentów XML za pomocą procesora XSLT (Zajęcia r.

XML materiały dydaktyczne - Kurs Podstawowy XSL - wprowadzenie. XSL warstwa przekształcania (XSLT) oraz prezentacji informacji (XSL FO).

Przetwarzanie dokumentów XML i zaawansowane techniki WWW Wykład 04

Extensible Markup Language III

LABORATORIUM 5 WSTĘP DO SIECI TELEINFORMATYCZNYCH WPROWADZENIE DO XML I XSLT

Podstawy (X)HTML i CSS

XSLT. Patryk Czarnik. Instytut Informatyki UW. XML i nowoczesne technologie zarzadzania treścia 2007/08

Przetwarzanie dokumentów XML za pomocą XSLT ( r.)

XSLT. Patryk Czarnik. XML i nowoczesne technologie zarzadzania treścia 2007/08

Ćwiczenia laboratoryjne nr 8 Podstawy języka XML.

XML Path Language (XPath)

XSLT. Patryk Czarnik. XML i nowoczesne technologie zarządzania treścią 2008/09. Instytut Informatyki UW

Służy do wybierania/wyszukiwania fragmentów dokumentu XML. Przypomina trochę ścieżki w systemie operacyjnym. Niech będzie dany dokument XML:

XPath XML Path Language. XPath. XSLT część 1. XPath data model. Wyrażenia XPath. Osie (axes) Location paths

Język XSLT. UEK w Krakowie Janusz Stal & Grażyna Paliwoda-Pękosz. UEK w Krakowie Janusz Stal & Grażyna Paliwoda-Pękosz

XSLT. Patryk Czarnik. XML i nowoczesne technologie zarzadzania treścia 2008/09. Instytut Informatyki UW. Patryk Czarnik 08 XSLT XML 2008/09 1 / 1

Plan prezentacji. Krótko o XML Arkusze stylów XSLT XSL XSL Path Przegląd konstrukcji języka i przykłady Narzędzia Podsumowanie Literatura

Prezentacja i transformacja

Aplikacje internetowe. Interfejs użytkownika

<body> <div style="max-width: 900px; margin: 0 auto;">

Prezentacja i transformacja

CSS. Kaskadowe Arkusze Stylów

XSLT. Patryk Czarnik. XML i nowoczesne technologie zarządzania treścią 2011/12

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony różnych stylów.

WYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1

XSLT. Patryk Czarnik. XML i nowoczesne technologie zarzadzania treścia 2011/12. Instytut Informatyki UW. Patryk Czarnik 08 XSLT XML 2011/12 1 / 54

Elementarz HTML i CSS

Kurs WWW Język XML, część II

Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

METODY REPREZENTACJI INFORMACJI

Kaskadowe arkusze stylów (CSS)

Języki formatowania dokumentów strukturalnych. XSL przekształcenia XML-a. XSL a XSLT. XSL części składowe. Zasada działania przekształcenia XSLT

Słowem wstępu. Część rodziny języków XSL. Standard: W3C XSLT razem XPath 1.0 XSLT Trwają prace nad XSLT 3.0

Jednostki miar stosowane w CSS

za pomocą: definiujemy:

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

Tworzenie Stron Internetowych. odcinek 6

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Prezentacja dokumentów XML

Inżynieria biomedyczna

METAJĘZYKI. Politechnika Koszalińska Wydział Elektroniki i Informatyki Katedra Inżynierii Komputerowej

Języki i Techniki Programowania II. Wykład 13. TRaX, Applety, Java Security

Tworzenie Stron Internetowych. odcinek 6

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.

Aplikacje internetowe laboratorium XML, DTD, XSL

UCHWAŁA NR L/932/13 RADY MIASTA MYSŁOWICE. z dnia 19 grudnia 2013 r.

XHTML Budowa strony WWW

Prezentacja dokumentów XML

Układ informacji i powiązań między danymi w deklaracji w formacie XML

Prezentacja dokumentów XML

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów

Rodzaje przetwarzania XSLT (1)

I. Dlaczego standardy kodowania mailingów są istotne?

Aplikacje internetowe

XPath XML Path Language. XPath. XSLT część 1. XPath data model. Wyrażenia XPath. Location paths. Osie (axes)

XSL, tj. XSLT i XSL-FO czyli jak przekształcać i ładnie wyświetlać XML-e. Kuba Pochrybniak

Witryny i aplikacje internetowe

Laboratorium 1: Szablon strony w HTML5

Systemy internetowe Wykład 2 CSS

UCHWAŁA NR 135/XXVII/13 RADY MIASTA ZAMBRÓW. z dnia 26 marca 2013 r.

XML i nowoczesne metody zarządzania treścią

Dziedziczenie. Dziedziczenie i kaskadowość. Dodał Administrator środa, 10 marzec :00. Tematy: Dziedziczenie Kaskadowość

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

Ćwiczenie 9 - CSS i wstawianie CSS

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}

Prezentacja dokumentów XML

XPath XML Path Language. XSL Extensible Stylesheet Language. Wyrażenia XPath. XPath data model. Location paths. Osie (axes)

Wprowadzenie do XSLT

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH

Zastosowanie kaskadowych arkuszy stylów (CSS - Cascading Style Sheets) w technologii JavaServer Faces

Układ informacji i powiązań między nimi w deklaracji na podatek leśny (DL-1) w formacie danych XML

HTML (HyperText Markup Language) hipertekstowy język znaczników

Sierpień 2015 rozwiązanie plik: index.htlm

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

Tomasz Grześ. Systemy zarządzania treścią, cz. II

STRONY INTERNETOWE mgr inż. Adrian Zapała

Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski

p { color: yellow; font-weight:bold; }

XML i nowoczesne technologie zarządzania treścią

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

Rysunek otaczany przez tekst

CSS - layout strony internetowej

2 Podstawy tworzenia stron internetowych

Wordpress: Joomla! Drupal.

Dokument hipertekstowy

UCHWAŁA NR XLIII/569/14 RADY MIEJSKIEJ W CZERWIONCE-LESZCZYNACH. z dnia 25 kwietnia 2014 r.

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).

O stronach www, html itp..

Programy dedykowane do edycji stron internetowych dzielą się na dwa rodzaje:

Przedmiot: Grafika komputerowa i projektowanie stron WWW

Deklarowanie tytułu związanej z tabelą

UCHWAŁA NR VII/49/2015 RADY MIASTA PRUSZCZ GDAŃSKI. z dnia 12 maja 2015 r.

Transkrypt:

XML extensible Markup Language część 3

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

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.

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.

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ść.

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; }

Przykład (cd) Efekt:

Przykład

Przykład

Przykład

Przykład

Przykład

Przykład

Przykład

Przykład

Przykład

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 "#".

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>

Przykład (cd) Efekt:

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

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>

Przykład (cd) Efekt:

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>

Przykład (cd) Efekt:

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.

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;}

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

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>

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>

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

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-8859-2"?> <?xml-stylesheet type="text/css" href="style.css"?>

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>

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

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>

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

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.

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

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

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

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

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

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

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; }

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:

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; }

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; }

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:

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; }

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; }

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:

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; }

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:

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:

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:

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>

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:

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:

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>

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:

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:

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..."; }

before i after W przeglądarce:

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>

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; }

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>

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; }

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

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

Struktura XSLT Arkusz XSLT ma następującą strukturę <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> 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"?>

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>

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>

Dołączenie XSLT Przykład <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> </xsl:stylesheet> W przeglądarce:

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

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

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

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

<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="http://www.w3.org/1999/xsl/transform"> <xsl:template match="osoba[2]"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

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

<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="http://www.w3.org/1999/xsl/transform"> <xsl:template match="osoba[last()-2]"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

<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="http://www.w3.org/1999/xsl/transform"> <xsl:template match="osoba[position() < 3]"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

<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="http://www.w3.org/1999/xsl/transform"> <xsl:template match="osoba[wiek = 25 ]"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

<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="http://www.w3.org/1999/xsl/transform"> <xsl:template match="osoba[wiek > 26 ]"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

<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="http://www.w3.org/1999/xsl/transform"> <xsl:template match="osoba[wiek>25 and wiek<35] abc </xsl:template> </xsl:stylesheet> W przeglądarce:

<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="http://www.w3.org/1999/xsl/transform"> <xsl:template match="osoba[wiek=25 or wiek=35] abc </xsl:template> </xsl:stylesheet> W przeglądarce:

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

<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="http://www.w3.org/1999/xsl/transform"> <xsl:template match="osoba[@wiek = '33']"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

<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="http://www.w3.org/1999/xsl/transform"> <xsl:template match="osoba[@wiek < '30']"> abc </xsl:template> </xsl:stylesheet> W przeglądarce:

<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="http://www.w3.org/1999/xsl/transform"> <xsl:template match="osoba[@wiek>25 and @wiek<35] abc </xsl:template> </xsl:stylesheet> W przeglądarce:

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

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

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

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

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

<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:

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

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

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

<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 select="spis_osob/osoba/@wiek"/></td> </tr> </table> </body> </html>

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

<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 select="//osoba/@wiek"/></td> </tr> </table> </body> </html>

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

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

<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 select="@wiek"/></td> </tr> </xsl:for-each> </table> </body></html>

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

<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 select="@wiek"/></td> </tr> </xsl:for-each> </table> </body></html>

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

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>

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

<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 select="@wiek"/></td> </tr> </xsl:for-each> </table></body></html>

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

<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[@wiek < 35]"> <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>

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

<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 select="@wiek"/></td> </tr> </xsl:for-each> </table></body></html>

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

<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' and @wiek < 35]"> <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>

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

<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:

<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:

<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:

<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:

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

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

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

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

<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 select="@wiek"/> </span> </p> </xsl:template>

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

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

<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:

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

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

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

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