Typ strony wyświetlanej w przeglądarce
Korzystanie z języków XML i XSLT na stronach internetowych utworzonych w programie Dreamweaver.
Interfejs użytkownika w programie Dreamweaver i nowszych wersjach został uproszczony. Dlatego począwszy od wersji Dreamweaver niektóre opcje opisane w tym artykule mogą nie być dostępne. Więcej informacji zawiera ten artykuł.
Korzystanie z języków XML i XSL na stronach internetowych
Extensible Markup Language (XML) to język, który pozwala strukturyzować informacje. Podobnie jak HTML, XML pozwala strukturyzować informacje za pomocą znaczników, ale znaczniki XML nie są wstępnie zdefiniowane jak znaczniki HTML.Zamiast tego XML pozwala tworzyć znaczniki, które najlepiej definiują strukturę danych (schemat). Znaczniki są zagnieżdżone w innych, aby utworzyć schemat znaczników nadrzędnych i podrzędnych. Podobnie jak większość znaczników HTML, wszystkie znaczniki w schemacie XML mają znacznik otwierający i zamykający.
Podany przykład pokazuje podstawową strukturę pliku XML:
<?xml version="1.0">
<mybooks>
<book bookid="1">
<pubdate>2004-03-01</pubdate>
<title>Wyświetlanie danych XML w programie Adobe Dreamweaver</title>
<author>Charles Brown</author>
</book>
<book bookid="2">
<pubdate>2004-04-08</pubdate>
<title>Zrozumienie XML</title>
<author>John Thompson</author>
</book>
</mybooks>
W tym przykładzie każdy nadrzędny znacznik <book> zawiera trzy znaczniki podrzędne: <pubdate>, <title> i <author>. Ale każdy znacznik <book> jest również znacznikiem podrzędnym znacznika <mybooks>, który znajduje się jeden poziom wyżej w schemacie. Można nazywać i strukturyzować znaczniki XML w dowolny sposób, pod warunkiem odpowiedniego zagnieżdżania znaczników w innych i przypisania każdemu znacznikowi otwierającemu odpowiadającego mu znacznika zamykającego.
Dokumenty XML nie zawierają żadnego formatowania — są po prostu kontenerami ze strukturalnymi informacjami. Po utworzeniu schematu XML można użyć języka Extensible Stylesheet Language (XSL) do wyświetlania informacji. Tak jak kaskadowe arkusze stylów (CSS) pozwalają formatować HTML, tak XSL pozwala formatować dane XML.Można definiować style, elementy strony, układ itd. w pliku XSL i dołączyć go do pliku XML, tak aby gdy użytkownik wyświetla dane XML w przeglądarce, dane są formatowane zgodnie z tym, co zdefiniowano w pliku XSL. Zawartość (dane XML) i prezentacja (zdefiniowana przez plik XSL) są całkowicie oddzielone, co zapewnia większą kontrolę nad tym, jak informacje są wyświetlane na stronie internetowej.W istocie XSL to technologia prezentacji dla XML, w której główny rezultat to strona HTML.
Rozszerzalny język przekształceń arkuszy stylów (XSLT) to podzbiór języka XSL, który faktycznie umożliwia wyświetlenie danych XML na stronie internetowej i „przekształcenie" ich wraz ze stylami XSL w czytelne informacje ze stylami w formie HTML.Adobe Dreamweaver można używać do utworzona stron XSLT, które pozwalają wykonywać przekształcenia XSL przy użyciu serwera aplikacji lub przeglądarki. W przekształceniu XSL po stronie serwera serwer wykonuje przekształcanie danych XML za pomocą XSL i wyświetla je na stronie.W przekształceniu po stronie klienta przeglądarka (taka jak Internet Explorer) wykonuje tę pracę.
Ostateczne podejście (przekształcenia po stronie serwera kontra przekształcenia po stronie klienta) zależy od tego, co próbujesz osiągnąć jako efekt końcowy, dostępnych technologii, poziom dostępu do plików źródłowych XML i innych czynników. Obie opcje posiadają zalety i ograniczenia. Na przykład przekształcenia po stronie serwera działają we wszystkich przeglądarkach, podczas gdy przekształcenia po stronie klienta są ograniczone do nowoczesnych przeglądarek (Internet Explorer 6, Netscape 8, Mozilla 1.8 i Firefox 1.0.2).Przekształcenia po stronie serwera umożliwiają dynamiczne wyświetlanie danych XML z własnego serwera lub z dowolnego miejsca w internecie, podczas gdy przekształcenia po stronie klienta muszą używać danych XML hostowanych lokalnie na własnym serwerze internetowym. Wreszcie, przekształcenia po stronie serwera wymagają wdrażania stron na skonfigurowanym serwerze aplikacji, podczas gdy przekształcenia po stronie klienta wymagają jedynie dostępu do serwera internetowego.
Samouczek omawiający język XML można znaleźć na stronie internetowej www.adobe.com/go/vid0165_pl.
Przekształcenia XSL po stronie serwera
Dreamweaver zapewnia metody tworzenia stron XSLT, które pozwalają wykonywać przekształcenia XSL po stronie serwera. Gdy serwer aplikacji wykonuje przekształcenie XSL, plik zawierający dane XML może znajdować się na własnym serwerze lub gdziekolwiek indziej w internecie. Ponadto przekształcone dane może wyświetlić każda przeglądarka. Wdrażanie stron do przekształceń po stronie serwera jest jednak nieco złożone i wymaga dostępu do serwera aplikacji.
Podczas pracy z przekształceniami XSL po stronie serwera można używać programu Dreamweaver do tworzenia stron XSLT, które generują kompletne dokumenty HTML (całe strony XSLT) lub fragmenty XSLT generujące część dokumentu HTML. Cała strona XSLT jest podobna do zwykłej strony HTML. Zawiera znacznik <body> i znacznik <head> oraz pozwala wyświetlać kombinację danych HTML i XML na stronie. Fragment XSLT to fragment kodu używany przez oddzielny dokument, który wyświetla sformatowane dane XML. W przeciwieństwie do całej strony XSLT jest to niezależny plik, który nie zawiera znacznika <body> ani <head>. Jeśli chcesz wyświetlić dane XML na osobnej stronie, możesz utworzyć całą stronę XSLT i powiązać z nią dane XML. Jeśli natomiast chcesz wyświetlić dane XML w określonej sekcji istniejącej strony dynamicznej — na przykład na dynamicznej stronie głównej sklepu ze sprzętem sportowym, z wynikami sportowymi z kanału RSS wyświetlanymi po jednej stronie — można utworzyć fragment XSLT i wstawić odwołanie do niego na stronie dynamicznej. Tworzenie fragmentów XSLT i używanie ich w połączeniu z innymi stronami dynamicznymi do wyświetlania danych XML jest częstszym scenariuszem.
Pierwszym krokiem przy tworzeniu tego typu stron jest utworzenie fragmentu XSLT. Jest to oddzielny plik zawierający układ, formatowanie i tak dalej danych XML, które ostatecznie chcesz wyświetlić na stronie dynamicznej. Po utworzeniu fragmentu XSLT wstawiasz odwołanie do niego na stronie dynamicznej (na przykład na stronie PHP lub ColdFusion). Wstawione odwołanie do fragmentu działa podobnie jak Server Side Include (SSI) — sformatowane dane XML (fragment) znajdują się w osobnym pliku, a w widoku Design na stronie dynamicznej pojawia się symbol zastępczy fragmentu.Gdy przeglądarka żąda strony dynamicznej zawierającej odwołanie do fragmentu, serwer przetwarza dołączoną instrukcję i tworzy nowy dokument, w którym sformatowana zawartość fragmentu pojawia się zamiast symbolu zastępczego.
A. Przeglądarka żąda strony dynamicznej B. Serwer internetowy znajduje stronę i przekazuje ją do serwera aplikacji C. Serwer aplikacji skanuje stronę w poszukiwaniu instrukcji i pobiera fragment danych XSLT D. Serwer aplikacji wykonuje przekształcenie (czyta fragment danych XSLT, a następnie pobiera i formatuje dane xml) E. Serwer aplikacji wstawia przekształcony fragment danych na stronie i przekazuje go z powrotem na serwer WWW F. Serwer WWW odsyła ukończoną stronę do przeglądarki
Używasz zachowania serwera XSL Transformation, aby wstawić odwołanie do fragmentu XSLT na stronie dynamicznej.Po wstawieniu odwołania Dreamweaver generuje folder includes/MM_XSLTransform/ w folderze głównym witryny, który zawiera plik biblioteki środowiska wykonawczego.Serwer aplikacji używa funkcji zdefiniowanych w tym pliku podczas przekształcania określonych danych XML.Plik jest odpowiedzialny za pobranie danych XML i fragmentów XSLT, wykonanie przekształcenia XSL i wyświetlenie wyników na stronie internetowej.
Plik zawierający fragment XSLT, plik XML zawierający dane oraz wygenerowany plik biblioteki środowiska wykonawczego muszą znajdować się na serwerze, aby strona wyświetlała się poprawnie.(Jeśli wybierzesz zdalny plik XML jako źródło danych — na przykład z kanału RSS — ten plik musi oczywiście znajdować się gdzie indziej w internecie.)
Można także używać programu Dreamweaver do tworzenia całych stron XSLT do użytku z przekształceniami po stronie serwera.Cała strona XSLT działa dokładnie tak samo jak fragment XSLT, tylko gdy wstawiasz odwołanie do całej strony XSLT za pomocą zachowania serwera XSL Transformation, wstawiasz pełną zawartość strony HTML.W związku z tym strona dynamiczna (strona .cfm, .php lub .asp, która pełni rolę strony kontenera) musi zostać oczyszczona ze wszystkich elementów HTML przed wstawieniem odwołania.
Program Dreamweaver obsługuje przekształcenia XSL w przypadku stron ColdFusion, ASP i PHP.
Serwer musi być poprawnie skonfigurowany do wykonywania przekształceń po stronie serwera.Dodatkowe informacje można uzyskać od administratora serwera.
Przekształcenia XSL po stronie klienta
Przekształcenia XSL po stronie klienta są wykonywane bez użycia serwera aplikacji. W takim przypadku programu Dreamweaver można użyć do utworzenia pełnej strony XSLT, ale przekształcenia po stronie klienta wymagają opracowania pliku XML, który zawiera dane przeznaczone do wyświetlania. Warto też pamiętać, że przekształcenia po stronie klienta są wykonywane tylko w przeglądarkach bardziej nowoczesnych (Internet Explorer 6, Netscape 8, Mozilla 1.8 i Firefox 1.0.2).
Na początek utwórz całą stronę XSLT i dołącz źródło danych XML. (Program Dreamweaver przypomina o dołączeniu źródła danych przy tworzeniu nowej strony). Strona XSLT może być tworzona od początku lub konwertowana z istniejącej strony HTML na XSLT. Przy konwersji istniejącej strony HTML na XSLT musisz dołączyć źródło danych XML, korzystając z panelu Związki (Okno > Związki).
Po utworzeniu strony XSLT musisz dołączyć ją do pliku XML zawierającego dane XML poprzez wstawienie odniesienia do strony XSLT w samym pliku XML (podobnie jak w przypadku wstawiania odniesienia do zewnętrznego arkusza stylów CSS w części <head> strony HTML). Osoby odwiedzający serwis muszą wyświetlać w przeglądarce plik XML, zamiast strony XSLT. Przy przeglądaniu strony, przeglądarka wykonuje przekształcenia XSL i wyświetla dane XML, sformatowane przez dołączoną stronę XSLT.
Związek pomiędzy dołączonymi stronami XSLT i XML jest podobny,ale nie identyczny z zewnętrznym modelem strony CSS/HTML. W przypadku strony HTML posiadającej zawartość (np. tekst) używa się zewnętrznego arkusza stylów do formatowania zawartości. Strona HTML określa zawartość, a zewnętrzny kod CSS, który nie jest widoczny dla użytkownika, określa prezentację. W przypadku XSLT i XML sytuacja jest odwrotna. Plik XML (który dla użytkownika nie jest widoczny w swojej podstawowej formie), określa zawartość, a strona XSLT określa prezentację. Strona XSLT zawiera tabele, układ, grafiki i inne elementy, które zawiera zwykle standardowy plik HTML. Podczas wyświetlania pliku XML w przeglądarce, strona XSLT formatuje zawartość.
A. Przeglądarka żąda pliku XML B. Serwer odpowiada, wysyłając plik XML do przeglądarki C. Przeglądarka czyta dyrektywę XML i wywołuje plik XSLT D. Serwer wysyła plik XSLT do przeglądarki E. Przeglądarka przekształca dane XML i wyświetla je w swoim oknie
Gdy używasz programu Dreamweaver do łączenia strony XSLT ze stroną XML, Dreamweaver wstawia odpowiedni kod u góry strony XML.Jeśli jesteś właścicielem strony XML, z którą się łączysz (to znaczy, jeśli plik XML znajduje się wyłącznie na Twoim serwerze internetowym), wszystko, co musisz zrobić, to użyć programu Dreamweaver do wstawienia odpowiedniego kodu, który łączy obie strony.Gdy jesteś właścicielem pliku XML, przekształcenia XSL wykonywane przez klienta są w pełni dynamiczne.To znaczy, za każdym razem, gdy aktualizujesz dane w pliku XML, każde dane wyjściowe HTML używające połączonej strony XSLT zostaną automatycznie zaktualizowane nowymi informacjami.
Pliki XML i XSL używane do przekształceń po stronie klienta muszą znajdować się w tym samym katalogu.Jeśli tego nie zrobią, przeglądarka odczyta plik XML i znajdzie stronę XSLT do przekształcenia, ale nie znajdzie zasobów (arkuszy stylów, obrazów itd.) zdefiniowanych przez względne łącza na stronie XSLT.
Jeśli nie jesteś właścicielem strony XML, z którą się łączysz (na przykład, jeśli chcesz użyć danych XML z kanału RSS gdzieś w internecie), obieg pracy jest nieco bardziej skomplikowany.Aby wykonać przekształcenia po stronie klienta przy użyciu danych XML z zewnętrznego źródła, należy najpierw pobrać plik źródłowy XML do tego samego katalogu, w którym znajduje się strona XSLT.Gdy strona XML znajduje się w Twojej lokalnej witrynie, możesz użyć programu Dreamweaver, aby dodać odpowiedni kod łączący ją ze stroną XSLT i opublikować obie strony (pobrany plik XML i połączoną stronę XSLT) na swoim serwerze internetowym.Gdy użytkownik wyświetla stronę XML w przeglądarce, strona XSLT formatuje zawartość, tak jak w poprzednim przykładzie.
Wadą wykonywania przekształceń XSL po stronie klienta\nna danych XML pochodzących ze źródła zewnętrznego jest to, że dane XML\nsą tylko częściowo „dynamiczne". Plik XML, który pobierasz i\nzmieniasz, jest jedynie „migawką" pliku, który istnieje gdzie indziej w\ninternecie.Jeśli oryginalny plik XML w internecie się zmieni, musisz\npobierz plik ponownie, połączyć go ze stroną XSLT i ponownie wysłać\nplik XML na serwer internetowy.Przeglądarka renderuje tylko te dane, które\notrzymuje z pliku XML na serwerze internetowym, a nie dane zawarte\nw oryginalnym pliku źródłowym XML.
Dane XML i powtarzalne elementy
Obiekt XSLT Repeating Region umożliwia wyświetlanie elementów powtarzających się z pliku XML na stronie.Każdy region zawierający symbol zastępczy danych XML\nmoże zostać przekształcony w region powtarzający.Jednak najczęściej\nspotykane regiony to tabela, wiersz tabeli lub seria wierszy tabeli.
Poniższy przykład pokazuje, jak obiekt XSLT Repeating Region jest stosowany do wiersza tabeli, który wyświetla informacje o menu restauracji.Początkowy wiersz wyświetla trzy różne elementy ze schematu XML:\nelement, opis i cenę.Gdy obiekt XSLT Repeating Region jest stosowany do wiersza tabeli, a strona jest przetwarzana przez serwer aplikacji lub przeglądarkę, tabela jest powtarzana z unikalnymi danymi wstawionymi w każdy nowy wiersz tabeli.
Gdy stosujesz obiekt XSLT Region powtarzający do elementu w\noknie dokumentu, cienki, z zakładką, szary kontur pojawia się wokół\nregionu powtarzającego.Gdy przeglądasz pracę w przeglądarce (Plik > Podgląd w przeglądarce), szary kontur znika i zaznaczenie rozszerza się, aby wyświetlić określone elementy powtarzające się w pliku XML, jak w poprzedniej ilustracji.
Gdy dodajesz obiekt XSLT Region powtarzający do strony,\ndługość symbolu zastępczego danych XML w oknie dokumentu jest obcinana.\nDzieje się tak, ponieważ Dreamweaver aktualizuje wyrażenie XPath\n(język ścieżki XML) dla symbolu zastępczego danych XML tak, aby\nbyło względne w stosunku do ścieżki elementu powtarzającego.
Na przykład poniższy kod dotyczy tabeli zawierającej dwa dynamiczne symbole zastępcze, bez zastosowanego do tabeli obiektu XSLT Repeating Region:
<table width=\"500\" border=\"1\">
<tr>
<td><xsl:value-of select="rss/channel/item/title"/></td>
</tr>
<tr>
<td><xsl:value-of select="rss/channel/item/description"/></td>
</tr>
</table>
Poniższy kod dotyczy tej samej tabeli z zastosowanym obiektem XSLT Repeating Region:
<xsl:for-each select="rss/channel/item">
<table width="500" border="1">
<tr>
<td><xsl:value-of select="title"/></td>
</tr>
<tr>
<td><xsl:value-of select="description"/></td>
</tr>
</table>
</xsl:for-each>
W poprzednim przykładzie program Dreamweaver\nzaktualizował XPath dla elementów, które znajdują się w regionie powtarzającym\n(tytuł i opis), aby były względne w stosunku do XPath w otaczających znacznikach <xsl:for-each>,\na nie w stosunku do całego dokumentu.
Program Dreamweaver generuje wyrażenia XPath względne kontekstowo\nrównież w innych przypadkach.Na przykład jeśli przeciągniesz zastępczy element danych XML do tabeli, która już ma zastosowany obiekt XSLT Repeating Region, program Dreamweaver automatycznie wyświetla ścieżkę XPath względem istniejącej ścieżki XPath w otaczających znacznikach <xsl:for-each>.
Podgląd danych XML
Gdy używasz funkcji Podgląd w przeglądarce (Plik > Podgląd w przeglądarce) do podglądu danych XML, które zostały wstawione w fragmencie XSLT lub całej stronie XSLT, silnik wykonujący przekształcenie XSL różni się w zależności od sytuacji.W przypadku stron dynamicznych zawierających fragmenty XSLT serwer aplikacji zawsze wykonuje transformację. W innych sytuacjach transformację może wykonywać program Dreamweaver lub przeglądarka.
Poniższa tabela podsumowuje sytuacje podczas używania funkcji Podgląd w przeglądarce oraz silniki wykonujące odpowiednie transformacje:
|
|
Przekształcenie danych wykonane przez |
|---|---|
|
Dynamiczna strona zawierająca fragment XSLT |
Serwer aplikacji |
|
Fragment XSLT lub cała strona XSLT |
Dreamweaver |
|
Plik XML z łączem do całej strony XSLT |
Przeglądarka |
Poniższe tematy zawierają wytyczne pomagające określić odpowiednie metody podglądu w zależności od potrzeb.
Podgląd stron przeznaczonych dla przekształceń po stronie serwera
W przypadku transformacji po stronie serwera zawartość, którą ostatecznie widzi odwiedzający witrynę, jest przekształcana przez serwer aplikacji. Podczas tworzenia stron XSLT i dynamicznych do użytku z transformacjami po stronie serwera zaleca się zawsze przeglądanie strony dynamicznej zawierającej fragment XSLT zamiast samego fragmentu XSLT. W pierwszym scenariuszu wykorzystujesz serwer aplikacji, co zapewnia, że podgląd jest zgodny z tym, co zobaczą odwiedzający witrynę, kiedy wejdą na stronę. W drugim scenariuszu program Dreamweaver wykonuje transformację i może zapewnić nieco niespójne wyniki. Można użyć programu Dreamweaver do podglądu fragmentu XSLT podczas jego tworzenia, ale najdokładniejsze wyniki renderowania danych można zobaczyć, jeśli użyje się serwera aplikacji do podglądu strony dynamicznej po wstawieniu fragmentu XSLT.
Podgląd stron przeznaczonych dla przekształceń po stronie klienta
W przypadku transformacji po stronie klienta zawartość, którą ostatecznie widzi odwiedzający witrynę, jest przekształcana przez przeglądarkę. Osiągasz to, dodając łącze z pliku XML do strony XSLT. Jeśli otworzysz plik XML w programie Dreamweaver i wyświetlisz jego podgląd w przeglądarce, zmuszasz przeglądarkę do załadowania pliku XML i wykonania transformacji. Zapewnia to takie samo doświadczenie, jakie ma odwiedzający witrynę.
Korzystanie z tego podejścia utrudnia jednak debugowanie strony, ponieważ przeglądarka przekształca XML i generuje HTML wewnętrznie. Jeśli wybierzesz opcję Pokaż źródło przeglądarki, aby debugować wygenerowany HTML, zobaczysz tylko oryginalny XML otrzymany przez przeglądarkę, a nie pełny HTML (znaczniki, style itp.) odpowiedzialny za renderowanie strony.Aby zobaczyć pełny HTML podczas przeglądania kodu źródłowego, musisz wyświetlić podgląd strony XSLT w przeglądarce.
Podgląd całych stron XSLT i fragmentów XSLT
Podczas tworzenia całych stron XSLT i fragmentów XSLT warto przeglądać pracę, aby upewnić się, że dane są wyświetlane poprawnie. Jeśli użyjesz funkcji Podgląd w przeglądarce do wyświetlenia całej strony XSLT lub fragmentu XSLT, program Dreamweaver wykonuje transformację używając wbudowanego silnika transformacji. Ta metoda zapewnia szybkie wyniki i ułatwia stopniowe tworzenie i debugowanie strony. Umożliwia również przeglądanie pełnego HTML (znaczników, stylów itp.) poprzez wybór opcji Pokaż źródło w przeglądarce.
Ta metoda podglądu jest często używana podczas rozpoczynania tworzenia stron XSLT, niezależnie od tego, czy używasz klienta czy serwera do przekształcania danych.
Tworzenie estetycznych serwisów internetowych w programie Dreamweaver
Projektowanie, pisanie kodu i zarządzanie dynamicznymi serwisami internetowymi za pomocą jednego, kompleksowego narzędzia.