W tej części zbudujemy prostą stronę WWW bez żadnych języków programowania po stronie serwera czy po stronie klienta takich jak ASP, PHP czy JS. Nasza strona będzie wyglądać bardzo podstawowo czyli strona główna (index) i kilka pod stron.
Podstawowe dokumenty XML/XSL:
Chcemy mieć stronę w której dzięki xml’owi będziemy mogli łatwo zmieniać pewne dane np. Tytuł strony, nagłówki, treść, czy opisy do zdjęć w galerii.
Trochę o dokumencie xml:
Dokument xml aby spełniał swoją rolę powinien składać się z deklaracji dokumentu,
<?xml version="1.0" encoding="UTF-8"?>
który deklaruje dokument jako xml, określa jego wersje oraz jego system kodowania.
Następnym elementem jest węzeł (tag) podstawowy,
<main></main>, <root></root>, <dokument></dokument>, itp.
który jest podstawowym elementem w którym później będziemy umieszczać dalsze informacje w postaci kolejnych węzłów.
A więc tworzymy plik o nazwie main.xml – nasz główny dokument
<?xml version="1.0" encoding="UTF-8"?> <main> </main>
Trochę o dokumencie xsl:
Dokument xsl by spełniał swoją rolę powinien składać się z deklaracji dokumentu,
<?xml version="1.0" encoding="utf-8"?>
Tutaj mamy tak samo jak przypadku dokumentu xml, również deklarujemy dokument jako xml.
Następnie deklarujemy element główny dokumentu xsl,
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> </xsl:stylesheet>
w którym będą występować nasze instrukcje dla procesora xslt. Określa wersje oraz wzorzec dla silnika XSLT.
A więc tworzymy plik o nazwie szablon.xsl – nasz główny dokument
<?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> </xsl:stylesheet>
Umieszczamy potrzebne nam dane XML
Przypomnijmy: Chcemy dzięki xml’owi, zrobić stronę w której poprzez edycje pojedynczego pliku, jakim jest nasz plik main.xml wygląd strony się zmienił.
Do naszego pliku dodajemy w głównym węźle (<main> Nasze węzły </main>), potrzebne nam dane.
<main> <naglowek> <tytul>Prosta Strona</tytul> </naglowek> <menu> <link styl="link" url="main.xml">Strona Glówna</link> <link styl="link" url="galeria.xml">Galeria</link> <link styl="link" url="autor.xml">O Autorze</link> </menu> <tresc> <naglowek>Witam na mojej stronie</naglowek> <tresc> Niemniejsza strona ma na celu przedstawić proste zastosowanie technologii, jakimi są xml i xsl w budowie aplikacji WWW. </tresc> </tresc> <stopka>Wszystkie prawa zastrzeżone</stopka> </main>
W powyższym kodzie użyłem kilku elementów z których będzie się składać nasza strona, mam tutaj na myśli węzły <nagłówek>, <menu>, <tresc>, <stopka>.
Szablon dla transformacji XSL
Dzięki paru instrukcją xsl, zamienimy nasze dane w stronę HTML. W tym celu powracamy do naszego pliku szablon.xsl, w którym będziemy umieszczać instrukcje dla procesora xslt.
Pomiędzy element <xsl:stylesheet></xsl:stylesheet> uprzednio stworzonymi, dodajemy takie elementy:
<xsl:template match="/"> </xsl:template>
Element <xsl:template> z atrybutem match=”/”, wybiera nam podstawowy element jakim w naszym pliku main.xml jest węzeł <main>.
Następnie dodajemy do wewnątrz stworzonego elementu podstawowe elementy HTML’a, które budują nam stronę WWW.
<html> <head> </head> <body> </body> </html>
Nasz plik szablon.xsl powinien wyglądać tak:
<?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> <head> </head> <body> </body> </html> </xsl:template> </xsl:stylesheet>
Pierwsza transformacja XSLT
Połączymy nasz plik xml z plikiem szablonu tak, by nasze dane były transformowane do dokumentu html i wyświetlane w formie, którą opisaliśmy w pliku z szablonem.
W tym celu dodajemy poniższą linie do naszego dokumentu xml jakim jest main.xml
<?xml-stylesheet type="text/xsl" href="szablon.xsl" mce_href="szablon.xsl"?>
Powyższa linię należy umieścić pod deklaracją
<?xml version="1.0" encoding="utf-8"?>
Jak widać element określa jego typ oraz link do naszego szablonu.
W tym momencie gdy uruchomimy nasz plik xml za pomocą jakiejkolwiek przeglądarki zamiast xml’a ujrzymy pusty dokument html.
Nasz plik main.xml powinien wyglądać tak:
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="cdcatalog.xsl" mce_href="cdcatalog.xsl"?> <main> <naglowek> <tytul>Prosta Strona</tytul> </naglowek> <menu> <link styl="link" url="main.xml">Strona Glówna</link> <link styl="link" url="galeria.xml">Galeria</link> <link styl="link" url="autor.xml">O Autorze</link> </menu> <tresc> <naglowek>Witam na mojej stronie</naglowek> <tresc> Niemniejsza strona ma na celu przedstawić proste zastosowanie technologii, jakimi są xml i xsl w budowie aplikacji WWW. </tresc> </tresc> <stopka>Wszystkie prawa zastrzeżone</stopka> </main>
Dostęp do danych
Nadszedł czas by pobrać nasze dane i je zaprezentować. W tym celu będziemy edytować plik z szablonem xsl.
Pobieranie pojedynczego elementu
Chcemy pobrać zawartość elementu ” main/naglowek/tytul” i zaprezentować ja w tytule strony. W tym celu posłużymy się instrukcja <xsl:value-of /> z atrybutem select.
W elemencie <head> dodajemy element <title>, a w nim dodajemy <xsl:value-of select="main/naglowek/tytul"/>. W tym momencie w wyniku transformacji poza pustą stroną ujrzymy tytuł strony taki jaki umieściliśmy w naszych danych xml.
Stosowanie pętli dla elementów
Następnym naszym krokiem jest element <menu>, a właściwie jego zawartość czyli elementy <link>.
Posłużymy się w tym przypadku pętlą <xsl:for-each>, która również posiada atrybut select, którego wartość ma wskazywać na jakich elementach ma działać. W naszym przypadku są to elementy <link>, a więc wartość ”main/menu/link”. Zawartość elementu wykona się tyle razy ile elementów <link> w elemencie <menu>.
Dodajemy więc w elemencie <body>, poniższy fragment:
<xsl:for-each select="main/menu/link"> </xsl:for-each>
Nasza pętla się wykonuje ale nic nie prezentuje, aby to zmienić posłużymy się znaną nam już instrukcją <xsl:value-of />, którą będziemy pobierać elementy <link> wewnątrz wykonywanej pętli. W tym przypadku select będzie miał wartość ”.”, która wskazuje na zawartość aktualnego elementu <link> po którym porusza się pętla. Umieszczamy poniższy kod wewnątrz instrukcji <xsl:for-each> w następujący sposób:
<xsl:value-of select="."/>
Wynikiem teraz będzie zawartość elementów <link>. Wykorzystajmy teraz nasze atrybuty tak by linki działały i mogły odnosić. Rozbudujmy więc zawartość naszej pętli w następujący sposób:
<a href="{@url}" mce_href="{@url}" class="{@styl}"> <xsl:value-of select="."/> </a>
Dodaliśmy element <a> html’a, który odpowiada za tworzenie odnośników. A do jego atrybutów dodaliśmy atrybuty elementu link na którym aktualnie znajduje się pętla. Użyliśmy tutaj znaku małpki która wskazuje na atrybut wybranego elementu, by go pobrać oraz umieściliśmy wybór atrybutu w klamrach, tak by procesor xslt zorientował się co ma pobrać.
Pozostałe dane
W przypadku naszych pozostałych danych robimy identycznie jak wyżej zależnie od potrzeb.
Poniżej przedstawię dokończoną myśl, a więc cały szablon.xsl, z paroma upiększeniami w kodzie html:
<?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> <head> <title> <xsl:value-of select="main/naglowek/tytul"/> </title> </head> <body> <h3>Menu Głowne</h3> <xsl:for-each select="main/menu/link" > <a href="{@url}" mce_href="{@url}" class="{@styl}"> <xsl:value-of select="."/> </a><br /> </xsl:for-each> <hr /> <h3><xsl:value-of select="main/tresc/naglowek"/></h3> <div> <xsl:value-of select="main/tresc/tresc"/> </div> </body> </html> </xsl:template> </xsl:stylesheet>
Co dalej?
Widzimy, że w bardzo prosty sposób możemy edytować nasze dane zawarte w xml’u, mając do niego tylko jeden szablon w przypadku prostej strony.
Poprzez stworzenie podobnych plików xml użytych w naszym menu, takich jak galeria.xml, autor.xml, możemy stworzyć w pełni funkcjonalną stronę WWW.
Nic nie szkodzi również na przeszkodzie aby dodać do naszego szablonu plik ze stylami css, stąd też użyty przeze mnie w xml’u atrybut styl który jest stosowany w szablonie dla atrybutu class elementu <a>.
Koniec
Jak widać zastosowań jest wiele, w następnych częściach o ile to będzie możliwe postaram się pokazać bardziej zaawansowane przykłady.
Witam, Chciałbym sie zapytac jak zrobiono te strony? http://www.pentor.pl/main.xml http://www.targi.pracuj.pl/main.xml http://www.targi.pracuj.pl/main.xsl Czy to jest xml po stronie serwera? widze na tych stronach szablony xslt które są importowane do jednego podstawowego, ale nie wiem jak wyglada kod plików xml? w zródle pojawia sie kod html. czy to jest zrobione za pomocą xalana, jak to sie robi co do tego jest potrzebne? jakie tu doatkowe technologie sa zastosowane? np. java, javascript? Przyznam, ze chciałbym cos podobnego robic, ale nie moge znaleźć w necie o tym żadnych artykułów. Przeważnie o xml i xslt sa podawane jakies banalne przykłady. Czemu robi sie takie strony skoro głownym standardem jest XHTML, PHP, JSP itd. zawsze mi sie wydawało ze XML to tylko statyczne dane które nic nie robia. Prosiłbym o jakies wskazówki i rady, Pozdrawiam Marek.
ten własnie artykuł zmusił mnie do postawienia pytania czy w xml i xslt mozna robic skomlokowane strony www, zamiast xhtml html i innych bo przezcież strona pentora jest zrobiona w xml, xslt
www.pentor.pl/main.xml
www.targi.pracuj.pl/main.xml
własnie ten artykul zainspirowal mnie aby zadac to pytanie, bo widocznie mozna w xml i xslt tworzyc skomplikowane strony interneowe
czy to hjest zrobione za pomoca xalana, jak to sie robi? bo w necie nie moge na ten temat znaleźć zadnych informacji
A jak to jest generowane to bardzo możliwe że transformacja odbywa się na serwerze.
Transformacje robi się dość prosto dosłownie 3 linijk praktycznie w każdym web języku i i mamy podstawową formę tego co chcemy napisze coś za niedługo pod kontem PHP.