Transformacje XSL umożliwiają nadanie stylu i rozmieszczenie w locie danych w formacie XML. Karl Hodge na bazie opensource’owego edytora HTML-Kit pokazuje, jak to zrobić.
W niniejszym poradniku pokażę, jak dynamicznie włączyć dane XML w strukturę stron WWW za pomocą arkusza stylów XSLT, przy wykorzystaniu prostego opensource\’owego edytora HTML – HTML-Kita.
XSLT to skrót od Extensible Stylesheet Language Transformations. To język XML umożliwiający dodawanie nieobrobionych danych do strony WWW i przekształcanie jej w czytelny HTML. Choć możemy to zrobić za pomocą PHP, ASP lub innych języków skryptowych działających na serwerze, XSLT charakteryzuje się jedną kluczową kwestią – transformacja ma miejsce po stronie klienta.
Nie ma potrzeby korzystania z serwera danobazowego, wszystko dokonuje się w XML-u w naszej przeglądarce. To potężna technika wspierająca dostarczanie treści. Warto ją dodać do zestawu narzędzi z których korzystamy, gdyż aby za jej pomocą zmieniać zawartość strony, wystarczy raz
utworzyć reguły i potem jedynie aktualizować dane w pliku XML. Możemy także zamieniać cały plik, o ile zachowamy pierwotną nazwę i zależności. Wiele nowoczesnych aplikacji bazodanowych umożliwia zapisanie danych w formacie XML, toteż możemy skorzystać z tej metody do zarządzania naszymi danymi w przyszłości.
Co budujemy?
HTML-Kit to rozszerzalne narzędzie do edycji skryptów dla HTML-a, XML-a, JavaScriptu, CSS-ów i innych języków. Ułatwia tworzenie stron wspieranych przez XSLT-a, które przekształcają dane XML za pomocą reguł HTML-a i CSS-a. Możemy skorzystać z tej techniki do dynamicznego dodawania do stron WWW danych przechowywanych w plikach XML, bez konieczności skomplikowanej przebudowy skryptów działających na serwerze.
Co to jest XSL?
XSL (Extensible Stylesheet Language) to XMLowa wersja CSS-ów. Zapewnia jednak większą kontrolę nad danymi i layoutem niż CSS. Ma wbudowane narzędzia do transformacji i wspierania stylów oraz HTML-a. To unikatowa cecha charakterystyczna XSL-a – możliwość przekształcania nieobrobionych danych XML w odczytywany przez przeglądarki HTML lub CSS. XSL to obecnie cała rodzina języków; w tym tutorialu poznajemy XSLT i XPath. Jest jeszcze XSL-FO, obszerny format do przekształcania danych w inne formaty, takie jak PDF i RTF.
{tlo_1}
1. Uruchamiamy HTML-Kit
Instalujemy HTML-Kit i uruchamiamy go. Zamykamy okienko dialogowe z propozycją aktualizacji i startujemy wraz z nową stroną wybraną poleceniem Create a new file. Następnie klikamy zakładkę {stala}Updates{/stala}. Na pasku narzędzi wyświetli się pole wyszukiwania.
{/tlo}
{tlo_0}
2. Znajdujemy TMXSLT
Wpisujemy akronim XSLT i klikamy ikonę Search for Updates. Przenosimy się do okna o nazwie {stala}HTML-Kit Setup Plus{/stala}. Tutaj przejdziemy przez proces dodawania wtyczek. Zamykamy okienko z pytaniem czy chcemy przejść do strony wyszukiwania i klikamy Search for Updates.
{/tlo}
{tlo_1}
3. Instalujemy wtyczkę
HTML-Kit łączy nas z repozytorium wtyczek online, podświetlając nazwy lub opisy zawierające termin XSLT. Wśród rezultatów znajduje się tmXSLT. To wtyczka dzięki której do dokumentu XML lub arkusza stylów XSL w prosty sposób można dodać XSL-a oraz znaczniki przekształceń. Klikamy Install.
{/tlo}
{tlo_0}
4. Restartujemy HTML-KI
Gdy już przejrzeliśmy szczegółowe informacje o wtyczce, klikamy duży przycisk Install tmXSLT. Po zakończeniu procesu instalacji zostaniemy poproszeni o restart HTML-Kita. Gdy go ponownie uruchomimy, na pasku narzędzi pojawi się nowa zakładka {stala}TMXSLT{/stala}. Od razu możemy z niej skorzystać.
{/tlo}
{tlo_1}
5. Tworzymy plik XML
Skorzystamy z arkusza stylu XSL do przekształcania niektórych danych XML, toteż będziemy potrzebować danych. Kopiujemy folder {stala}xml_example{/stala} na twardy dysk, następnie w edytorze HTML-Kit otwieramy plik {stala}example_data.txt{/stala}. Zawiera on zestaw danych z którymi będziemy pracować, wraz ze znacznikami zgodnymi z formatem XML.
{/tlo}
{tlo_0}
6. Analizujemy strukturę XML
XML jest nie tyle językiem, co protokołem służącym do tworzenia naszych znaczników. W tym przypadku utworzyłem zestaw znaczników, którymi oznaczyłem listę DVD z mojej kolekcji. To prosta lista, w której użyłem intuicyjnych nazw jako znaczników. Przyjrzyjmy się jej strukturze.
{/tlo}
{tlo_1}
7. Tworzymy język
Zacząłem od kontenera: {html}
{/tlo}
{tlo_0}
8. Korzystamy ze schematu
Utworzyłem prosty język XML, by opisać sposób katalogowania DVD. Nie musimy deklarować struktury (lub schematu) tego języka w naszym dokumencie, jednak dobrą praktyką jest korzystanie z istniejących typów dokumentów (DTD) lub schematów, o ile są dostępne.
{/tlo}
{tlo_1}
9. Konwertujemy do XML-a
Za pomocą {stala}tmXSLT{/stala} zmienimy tę listę w XML zgodny z przeglądarką. Umieszczamy wskaźnik myszy na szczycie listy i kliknijmy zakładkę TMXLT. Klikamy pierwszą w rzędzie ikonę (XSLT XML). Z rozwijalnego menu wybieramy {html}{/html}, dzięki czemu umieścimy deklarację XML na początku pliku z danymi.
{/tlo}
{tlo_0}
10. Dodajemy odnośniki do stylu
Umieszczamy wskaźnik myszy poniżej ostatniej pozycji i klikamy ikonę XSLT XML, wybierając {html}{/html}. Odnośnik do arkusza stylu zostanie umieszczony na początku naszego kodu. Między puste znaki cytatu wprowadzamy {stala}dvdlist.xsl;{/stala} to wskaże arkusz stylu XSL, który wkrótce przygotujemy.
{/tlo}
{tlo_1}
11. Podglądamy layout
Zachowujemy wszystko w przykładowym folderze jako {stala}mydvdlist.xml{/stala}. Po otwarciu zawartości pliku w przeglądarce ujrzymy kod źródłowy. Czas przygotować arkusz stylu. Otwieramy {stala}dvdexample1.html{/stala} i podglądamy jego zawartość – zobaczymy podstawowy layout HTML zasilany zewnętrznym arkuszem stylu CSS.
{/tlo}
{tlo_0}
12. Konwertujemy do XSL-a
Mamy zamiar prze konwertować ten dokument HTML do arkusza XSL, ale musimy usunąć z niego wszystkie deklaracje HTML. Będziemy pracować na dokumencie {stala}dvdexample2.html{/stala}, w którym już to zrobiłem. Dokumenty XSL to dokumenty XML, więc na początku pliku dodajemy deklarację wersji XML.
{/tlo}{tlo_1}
13. Deklarujemy wersję
Właśnie tutaj dodajemy deklaracje wersji arkusza stylu XSL, tak by przeglądarka wiedziała, że ma do czynienia z arkuszem stylu XSL. Zaznaczamy wszystko, co znajduje się po deklaracji XML i klikamy {stala}XSLT XSLT{/stala}. Wybieramy {html}
{/tlo}
{tlo_0}
14. dopasowujemy dane
Mamy jeszcze jedną deklarację do dodania, toteż wpisujemy {html}
{/tlo}
{tlo_1}
15. dodajemy treść
Teraz zajmiemy się przenoszeniem treści z pliku XML – odpowiednie fragmenty zaznaczyłem za pomocą znaczników {html}{/html}. Wskaźnik myszy umieszczamy pomiędzy znacznikami {html}{/html}. Na pasku otwieramy XSLT ABC i wybieramy {html}
{/tlo}
{tlo_0}
16. Dodajemy więcej treści
Umieszczamy wskaźnik myszy miedzy znacznikami otwarcia i zamknięcia {html}{/html}. Wprowadzamy znacznik {html}
{/tlo}
{tlo_1}
17. Wartości XML
Dane XSL, które właśnie wprowadziliśmy do arkusza stylów XSL, odnoszą się bezpośrednio do danych znajdujących się na liście XML, którą zajmowaliśmy się na początku tego tutoriala. Wracając do kodu źródłowego tego dokumentu, znajdziemy elementy oznaczone za pomocą {stala}dvd_title{/stala} i {stala}release_date{/stala}.
{/tlo}
{tlo_0}
18. Sprawdzamy wyniki
Zachowujemy plik XSL jako {stala}dvdlist.xsl{/stala} w tym samym folderze, w którym znajdują się przykładowe pliki. Próbujemy ponownie otworzyć plik {stala}mydvdlist.xml{/stala} w naszej przeglądarce. Jeśli wszystko poszło dobrze, tym razem wyświetlona lista będzie sformatowana przy zastosowaniu reguł zawartych w pliku XSL. To kompletna lista, nie tylko pierwszy element.
{/tlo}
{tlo_1}
19. Przekształcenie po stronie klienta
Arkusz stylu XSL pobiera dane z dokumentu XML i dokonuje transformacji, tworząc w locie, po stronie klienta, trzeci wirtualny dokument. Jest to szybka i prosta alternatywa wobec skryptów działających po stronie serwera.
{/tlo}
Techniki XPath
Nawet nie wiedząc o tym korzystaliśmy z techniki XPath. Jest ona wykorzystywana do lokalizacji specyficznych danych w dokumencie XML. Wyrażenie XPath, z którego skorzystaliśmy w kroku 14, odnosi się do katalogu głównego Document Object Model, obejmującego wszystkie dostępne dane. Użyliśmy wyrażenia {html}
