Program wykładów 2 Aplikacje internetowe dr inż. Marek Wojciechowski Kontakt: marek@cs.put.poznan.pl http://www.cs.put.poznan.pl/mwojciechowski/ Architektury aplikacji intra- i internetowych WWW, HTTP, HTTPS, WAP, cookies Technologie prezentacji danych w sieci Internet HTML, CSS, XML, XSL, VRML, WML, JavaScript Technologie skryptowe do tworzenia aplikacji internetowych Interfejs CGI, Perl, SSI, ASP, PHP Tworzenie aplikacji internetowych w języku Java Platforma Java EE (Enterprise Edition) Serwlety Java JavaServer Pages (JSP), biblioteki znaczników, biblioteka JSTL JDBC - dostęp aplikacji Java do baz danych Enterprise JavaBeans (EJB) Odwzorowanie obiektowo-relacyjne (O/RM), Hibernate Przegląd innych technologii do tworzenia aplikacji internetowych CORBA, Web Services, Microsoft.NET Zagrożenia bezpieczeństwa aplikacji internetowych Podstawy usługi WWW 4 Architektury aplikacji intrai internetowych użytkownik przeglądarka żądanie HTTP HTML w HTTP serwer WWW HTML HTML program zewnętrzny system plików Użytkownik korzysta z programu przeglądarki (klienta HTTP) aby przyłączyć się do serwera WWW (serwera HTTP), podając URL opisujący żądany dokument HTML. Serwer WWW pobiera dokument i przesyła do użytkownika. Serwer WWW może też uruchomić zewnętrzny program, który wygeneruje dokument HTML dla użytkownika.
Protokół HTTP 5 Komunikacja poprzez HTTP 6 HTTP: Hypertext Transfer Protocol Protokół poziomu aplikacji dla rozproszonych systemów hipermedialnych Podstawa dla World Wide Web i aplikacji internetowych Komunikacja HTTP zazwyczaj na TCP/IP (domyślny port 80) Protokół bezstanowy Śledzenie sesji użytkownika i pamiętanie stanu przerzucone na aplikację Aktualna wersja: HTTP/1.1 Specyfikacja protokołu obejmuje m.in.: Metody Nagłówki Kody statusu Protokół HTTP specyfikuje komunikację w trybie żądanie/odpowiedź (request/response) Zawartość żądania klienta: Metoda żądania (np. GET, POST) Identyfikator żądanego zasobu (URI) Wersja protokołu HTTP Wiadomość MIME zawierająca: Modyfikatory żądania Informacje o kliencie Opcjonalnie: zawartość (body content) Zawartość odpowiedzi serwera: Linia statusu (wersja protokołu + kod sukcesu/błędu) Wiadomość MIME zawierająca: Informacje o serwerze Metadane na temat przesyłanej zawartości Opcjonalnie: zawartość (entity body-content) Protokół HTTP Schemat komunikacji 7 Łańcuch żądań HTTP (1/2) 8 Przeglądarka Nawiązanie połączenia TCP/IP Połączenie otwarte Serwer WWW W większości przypadków komunikacja HTTP jest inicjowana przez przeglądarkę i obejmuje żądanie odnoszące się do zasobu na jakimś serwerze źródłowym Żądanie: GET /index.html HTTP/1.0 HTTP/1.0 200 OK Date: Wed, 13 Feb 2002 10:18:59 GMT Server: Apache/1.0.0 Nagłówek HTTP: Content-type: text/html Content-length: 1579 Last-modified: Mon, 12 Feb 2002 22:23:34 GMT User agent HTTP request HTTP response HTTP server Zawartość dokumentu HTML Zamknięcie połączenia TCP/IP
Łańcuch żądań HTTP (2/2) 9 Metody HTTP 10 W łańcuchu żądań/odpowiedzi mogą pojawić się węzły pośrednie Proxy: agent przekazujący dalej otrzymane żądanie, dokonujący modyfikacji wiadomości związanej z żądaniem User agent HTTP request HTTP response proxy HTTP request HTTP response Gateway: agent odbierający żądania, stanowiący warstwę ponad serwerem źródłowym, mogący tłumaczyć żądania na protokół rozumiany przez dany serwer User agent HTTP request HTTP response gateway request response Tunnel: nie modyfikuje przekazywanych wiadomości, używany np. w celu przejścia przez firewall HTTP server HTTP server OPTIONS zapytanie o opcje komunikacji związane z danym zasobem GET pobranie informacji (zasobu), potencjalnie możliwe cache owanie żądania HEAD jak GET, ale bez pobrania ciała wiadomości POST żądanie aby wskazany zasób przejął przekazane dane, domyślnie nie może być cache owane, traktowane jako przesyłanie danych na serwer (podlega stosownym regułom bezpieczeństwa) PUT żądanie umieszczenia danych pod wskazanym URI DELETE żądanie usunięcia zasobu wskazanego przez URI TRACE umożliwia śledzenie łańcucha żądań przez klienta CONNECT zarezerwowane na potrzeby tunelowania przez proxy User agent HTTP request HTTP response tunnel HTTP server Kody statusu HTTP (1/2) 3-cyfrowe liczby reprezentujące efekt próby zrozumienia i realizacji żądania przez serwer Podzielone na 5 kategorii wyznaczanych przez pierwszą cyfrę kodu: 1xx: Informational żądanie otrzymane, przetwarzanie w toku 2xx: Success akcja zrozumiana i pomyślnie wykonana 3xx: Redirection dalsze działanie wymagane do realizacji żądania 4xx: Client Error błąd w żądaniu klienta 5xx: Server Error błąd po stronie serwera, a serwer nie znalazł błędu w żądaniu klienta 11 Kody statusu HTTP (2/2) 100 - Continue 101 - Switching Protocols 200 - OK 201 - Created 202 - Accepted 203 - Non-Authoritative Information 204 - No Content 205 - Reset Content 206 - Partial Content 300 - Multiple Choices 301 - Moved Permanently 302 - Found 303 - See Other 304 - Not Modified 305 - Use Proxy 307 - Temporary Redirect 500 - Internal Server Error 501 - Not Implemented 502 - Bad Gateway 503 - Service Unavailable 504 - Gateway Time-out 505 - HTTP Version not supported 400 - Bad Request 401 - Unauthorized 402 - Payment Required 403 - Forbidden 404 - Not Found 405 - Method Not Allowed 406 - Not Acceptable 407 - Proxy Authentication Required 408 - Request Time-out 409 - Conflict 410 - Gone 411 - Length Required 412 - Precondition Failed 413 - Request Entity Too Large 414 - Request-URI Too Large 415 - Unsupported Media Type 416 - Requested range not satisfiable 417 - Expectation Failed 12
Nagłówki HTTP 13 Przesyłanie różnych typów danych poprzez HTTP 14 Ogólne, np. Date, Via Nagłówki żądania, np. Accept, Accept-Charset, Accept-Encoding, Accept-Language, Referer, User-Agent Nagłówki odpowiedzi, np. Location, WWW-Authenticate Nagłówki zawartości, np. Content-Type, Content-Length, Content-Language, Expires, Last-Modified Protokół HTTP może być wykorzystany do przesyłania dokumentów HTML, jak i danych innych typów, np. obrazów GIF, dokumentów XML, plików wideo AVI, itp. W nagłówku HTTP znajduje się pole Content-type, informujące przeglądarkę o formacie przesyłanego obiektu (opis zgodnie ze specyfikacją MIME) Content-type text/html application/postscript application/zip audio/x-wav Format Dokument HTML Plik PostScript Skompresowany plik ZIP Plik dźwiękowy WAV image/gif image/jpeg Obraz graficzny GIF Obraz graficzny JPEG text/plain Plik tekstowy video/x-msvideo Plik wideo AVI Identyfikatory zasobów URI 15 Adresy URL 16 Uniform Resource Identifier (URI) odpowiedni sformatowany łańcuch znaków identyfikujący zasób: Uniform: jednolity format dla różnych typów zasobów, ten sam format identyfikatorów używany w różnych kontekstach Resource: zasobem może być wszystko co posiada tożsamość np. dokument, usługa Identifier: referencja do czegoś posiadającego tożsamość URI identyfikuje zasób poprzez jego nazwę, lokalizację lub nazwę i lokalizację Uniform Resource Locator (URL) Uniform Resource Name (URN) Najpopularniejsze URI mają postać URL Uniform Resource Locator (URL) jest wskaźnikiem do zasobu w sieci Internet, odwołującym się do jego lokalizacji, np.: http://www.foo.org/info/welcome.txt URL można rozbić na następujące części: <protocol>://<user>:<password>@<host>:<port>/<path> <protocol> - wykorzystywany protokół (np. HTTP, HTTPS, itd.) <user> - opcjonalna nazwa użytkownika (np. dla FTP) <password> - opcjonalne hasło dla użytkownika <host> - nazwa domenowa lub adres IP serwera <port> - numer portu IP (jeśli nie zostanie podany, przyjęta będzie watość domyślna dla protokołu) <path> - katalog/nazwa pliku
Katalogi logiczne a katalogi fizyczne 17 Katalogi logiczne a katalogi fizyczne Przykład 18 Ścieżki dostępu umieszczane w adresach URL nazywane są katalogami logicznymi (wirtualnymi); ich nazewnictwo nie musi być powiązane z nazewnictwem stosowanym w systemie plików serwera WWW W celu znalezienia żądanego pliku, serwer WWW odwzorowuje otrzymany katalog logiczny w faktyczną ścieżkę dostępu w systemie plików (katalog fizyczny) Odwzorowanie katalogów odbywa się w oparciu o pliki konfiguracyjne serwera WWW przeglądarka http://www.ex.com/products/cameras/canond30.html /home/htdocs/cameras/canond30.html serwer WWW.../conf/httpd.conf:... Alias /products/ "/home/htdocs/"... Zmienne Cookies (Ciasteczka) 19 Własności zmiennych Cookies 20 Serwer WWW może w nagłówku HTTP odpowiedzi umieścić dane znakowe (zmienne cookies), które przeglądarka zapisze w swojej pamięci (i ewentualnie na dysku) Zapis na dysku w pliku tekstowym, nazwa pliku nie jest wysyłana! Przy ponownych odwołaniach przeglądarki do tego samego serwera WWW, w nagłówkach HTTP żądań będą każdorazowo odsyłane zapisane wcześniej zmienne cookies Przeglądarka zapis zmiennej na dysku... Set-Cookie: LASTNAME=Kowalski;path=/hr; Serwer WWW expires=wednesday, 15-Feb-02 23:12:40 GMT Cookie: LASTNAME=Kowalski GET /hr/showpr HTTP/1.0 Nazwa i wartość (Name & Value) nazwa i wartość zmiennej cookie; są to jedyne obowiązkowe elementy Serwer może ustawić null jako wartość cookie, aby skasować dotychczasową wartość (np. par=) Data ważności (Expires) zmienne cookies mogą być automatycznie usuwane przez przeglądarkę po upływie określonego czasu Domyślnie do końca sesji z przeglądarką Domena (Domain) przeglądarka umieszcza w nagłówku żądania HTTP tylko te zmienne cookies, których adres domenowy pokrywa się z końcówką adresu domenowego w URL żądania Domyślnie domena dokumentu, który utworzył cookie Aby ustawić daną domenę dla cookie, serwer musi należeć do tej domeny Ścieżka (Path) przeglądarka umieszcza w nagłówku żądania HTTP tylko te zmienne cookies, których ścieżka stanowi prefiks ścieżki URL danego żądania Domyślnie URL dokumentu, który utworzył cookie Czy wymaga bezpiecznej transmisji? (Secure)
Zastosowania Cookies 21 Uwagi o stosowaniu Cookies 22 Cookies są podstawową metodą zachowywania stanu aplikacji internetowej Protokół HTTP jest bezstanowy Traktuje każde kolejne żądanie do serwera jako oddzielne, nowe żądanie Cookies to rozwiązanie nie wchodzące w skład specyfikacji HTTP, ale powszechnie wykorzystywane Cookies zachowują stan po stronie klienta Zastosowania cookies w zależności od czasu życia: Cookie o czasie życia sesji do implementacji sesji po stronie serwera Cookie o czasie życia dłuższym niż sesja do śledzenia kolejnych odwiedzin użytkownika w serwisie Przykładowe informacje zapisywane w cookies: Identyfikator sesji Koszyk zakupów, itp. Dla usunięcia cookie przez aplikację zalecane jest wykonanie obu poniższych operacji: Ustawienie wartości cookie na null Ustawienie daty ważności na datę z przeszłości Data ta będzie brana pod uwagę dopiero przy zamykaniu przeglądarki! Problemy z cookies: Użytkownik może usunąć cookie Użytkownik może skonfigurować przeglądarkę tak, aby nie akceptowała cookies Postępowanie w przypadku braku akceptacji cookies: Zaszywanie identyfikatora sesji w adresie URL (jeśli cookie służy do śledzenia sesji) Wymaganie od użytkownika akceptacji cookies, jeśli chce korzystać z serwisu Limity dla cookies (specyfikacja podaje minimalne wartości, które musi wspierać klient; serwer nie powinien liczyć na więcej ): Całkowita liczba cookies: 300 Rozmiar cookie: 4 kilobajty Liczba cookies z jednego serwera/domeny: 20 Architektura WAP 23 Telefon komórkowy zgodny z WAP protokół WAP WAP Gateway HTTP Internet Bezpieczeństwo transmisji WAP Gateway pobiera dokumenty WML, kompresuje je i wysyła do telefonu komórkowego dokument WML WAP (Wireless Application Protocol) to standard dostępu telefonów komórkowych do Internetu; WAP pozwala urządzeniom mobilnym na korzystanie z rozmaitych źródeł informacyjnych (głównie WWW) Do tworzenia dokumentów przesyłanych przez WAP opracowano język WML (1.x, 2.0), obecnie zastępowany przez XHTML
Szyfrowanie symetryczne 25 Szyfrowanie asymetryczne 26 Ten sam klucz musi być w posiadaniu nadawcy i odbiorcy wiadomości Rodzaje algorytmów szyfrujących: blokowe - otrzymuje blok danych źródłowych, szyfruje go i zwraca jako wynik działania strumieniowe - szyfruje pojedyncze bity danych źródłowych Przykłady algorytmów: DES, IDEA, RC2, RC4 Stosowane dwa typy kluczy: klucz publiczny jest publicznie znany i wykorzystywany przez nadawców wiadomości adresowanych do właściciela klucza klucz prywatny jest znany tylko właścicielowi i służy do odczytywania zaszyfrowanych wiadomości Oba klucze mogą być zamienione miejscami, co stanowi podstawę algorytmów podpisu cyfrowego Przykłady algorytmów: RSA, PKCS, DSS Private key Private key Recipient s public key Recipient s private key Plain text Encryption algorithm Cipher text Decryption algorithm Plain text Plain text Encryption algorithm Cipher text Decryption algorithm Plain text Algorytmy kryptograficznych sum kontrolnych (Message Digest) 27 Podpisy cyfrowe 28 Algorytmy kryptograficznych sum kontrolnych stanową, wraz z szyfrowaniem asymetrycznym, podstawę dla implementacji podpisów cyfrowych Algorytm kryptograficznych sum kontrolnych implementuje funkcję haszową, która dla danych wejściowych zwraca ciąg znakowy o stałej długości; użyta funkcja jest nieodwracalna Algorytmy MD2, MD4 i MD5 generują wartości 128- bitowe; MD2 jest najwolniejszy, MD4 - najszybszy SHA (Secure Hash Algorithm) generuje wartości 160- bitowe; przyjęty przez rząd USA; mniej bezpieczny niż MD4 Plain text Message digest algorithm Message digest Digital signature Encryption algorithm Sender s private key Sender s public key Digital signature Decryption algorithm Message digest Plain text Message digest algorithm Message digest Sender Recipient Identical?
Praktyczne zastosowania algorytmów kryptograficznych Zwykle zarówno szyfrowanie symetryczne, jak i asymetryczne są wykorzystywane współbieżnie Szyfrowanie asymetryczne jest dużo wolniejsze, aniżeli symetryczne, w związku z czym w praktyce generuje się klucze symetryczne i wymienia się je przez bezpieczny kanał bazujący na szyfrowaniu asymetrycznym Standardy bezpiecznej komunikacji klient-serwer: SSL (Secure Sockets Layer): wykorzystuje RSA, RC2, RC4, IDEA, DES, Triple-DES, MD5 PCT (Private Communications Technology): wykorzystuje RSA, DES, Triple-DES, RC2, RC4, DSA TLS (Transport Layer Security): bazuje na SSLv3 Protokół HTTPS (HyperText Transfer Protocol Secure) to HTTP szyfrowany przez SSL 29 Techniki prezentacji danych w sieci Internet Formaty dokumentów WWW 31 Język HTML 32 Dokument, jaki otrzymuje przeglądarka od serwera WWW może być zapisany w różnych formatach (językach) Język HTML służy do definiowania treści i układu graficznego dokumentów udostępnianych przez serwery WWW Język CSS służy do definiowania układu graficznego dla dokumentów HTML (również XML) Język XML służy do definiowania treści dokumentów udostępnianych przez serwery WWW w sposób umożliwiający ich przetwarzanie automatyczne Język XSL służy do definiowania układu graficznego dla dokumentów XML Język VRML służy do definiowania trójwymiarowych scen graficznych Język WML służy do definiowania treści i układu graficznego dokumentów udostępnianych przez protokół WAP Język XHTML to HTML sformułowany w postaci XML Język HTML służy do definiowania treści i układu graficznego dokumentów udostępnianych przez serwery WWW Dokument HTML to dokument tekstowy, w którym umieszczone są rozkazy dla przeglądarki, dotyczące sposobu wyświetlenia danego fragmentu tekstu; rozkazy te nazywane są znacznikami (tags) Większość znaczników HTML występuje w parach; każda para posiada element otwierający i zamykający; znacznik otwierający jest otoczony < i >, a zamykający - </ i > ; niektóre znaczniki są pojedyncze Znaczniki mogą posiadać dodatkowe atrybuty sterujące, umieszczane wewnątrz < i > w formacie atrybut= wartość Komentarze umieszcza się w <!-- i -->
Struktura dokumentu HTML 33 Najważniejsze znaczniki HTML (1) 34 <HTML> <HEAD> <TITLE> <!-- tytuł dokumentu --> </TITLE> <!-- pozostałe informacje nagłówkowe ---> </HEAD> <BODY> <!-- treść dokumentu --> </BODY> </HTML> <Hy> Tekst nagłówka </Hy> <P> Tekst paragrafu </P> <BR> <HR> <B> <I> <A HREF= URL > Tekst łącznika </A> <IMG SRC= URL > Tekst nagłówka; sześć poziomów, (y=1..6); 1 - największy; nagłówki wyświetlane są pogrubioną i powiększoną czcionką Paragraf blok tekstu zakończony przejściem do nowego wiersza; znaki ENTER są w HTML nieznaczące Wymusza przejście do nowego wiersza bez wprowadzania odstępu pionowego (<P> dodaje odstęp) Znacznik tworzy poziomą linię o szerokości okna przeglądarki; wykorzystywany do rozdzielania sekcji dokumentu Tekst wytłuszczony Tekst pochylony Umieszczenie łącznika do innego dokumentu; URL do adres wskazywanego dokumentu, Tekst łącznika jest wyświetlany na ekranie Umieszczenie obrazu graficznego (XBM, GIF lub JPEG), znajdującego się pod podanym adresem URL Najważniejsze znaczniki HTML (2) 35 Najczęściej stosowane atrybuty znaczników (1) 36 <TABLE></TABLE> <TR></TR> <TD>zawartość</TD> Definicja tabelki HTML; liczba kolumn i wierszy będzie wynikać z liczebności definicji wewnątrz <TABLE></TABLE> Definicja jednego wiersza tabelki HTML; zagnieżdżone w <TABLE></TABLE> Definicja jednej komórki w wierszu tabelki HTML; w komórce wyświetlona zostanie zawartość Ponadto powszechnie wykorzystywane są znaczniki wykorzystywane do tworzenia formularzy wywołujących skrypty CGI, serwlety, JSP i inne aplikacje dynamicznie generujące strony WWW: FORM, INPUT, SELECT, OPTION, TEXTAREA width np.<hr WIDTH= 10% > align np.<p ALIGN= CENTER > valign np.<td VALIGN= TOP > style np.<p STYLE= {color: red > colspan np.<td COLSPAN= 3 > rowspan np.<tr ROWSPAN= 2 > border np.<table BORDER= 1 > bgcolor np.<table BGCOLOR= red > Szerokość elementu w pikslach lub procentach szerokości elementu otaczającego (okna przeglądarki, komórki tabeli) Wyrównanie poziome elementów wewnątrz znacznika; LEFT, RIGHT lub CENTER Wyrównanie pionowe elementów wewnątrz znacznika; TOP, BOTTOM lub CENTER Definicja stylu graficznego w formacie CSS Stosowane w tabelach; komórka tabeli ma powstać ze złączenia kilku kolumn Stosowane w tabelach; komórka tabeli ma powstać ze złączenia kilku wierszy Określa grubość obramowania elementu; BORDER=0 oznacza brak obramowania Kolor tła elementu
Najczęściej stosowane atrybuty znaczników (2) class np.<p CLASS= NICE_PAR > cellspacing np.<table CELLSPACING= 4 > cellpadding np.<table CELLPADDING= 10 > cellpadding abcdefghij abcdefghij cellspacing abcdefghij abcdefghij abcdefghij abcdefghij Stosowane przy współpracy z CSS; określa nazwę klasy wizualnej, do której należy znacznik Stosowane w tabelach; wyrażony w pikslach prześwit pomiędzy komórkami tabeli; wartość 0 oznacza brak prześwitu Stosowane w tabelach; wyrażony w pikslach margines, o jaki komórka jest większa od swojej zawartości Uwaga: Wiele atrybutów (np. bgcolor czy align) oraz znaczników (np. FONT) dotyczących formatowania ma od HTML 4 status deprecated. Formatowanie powinno być specyfikowane w arkuszach stylów (CSS). 37 Tabelki HTML Tabelki HTML umożliwiają organizację danych w postaci wierszy i kolumn komórek Pojedyncza komórka może zajmować wiele wierszy i/lub komórek Tabelki mogą zawierać tekst, obrazy, formularze, inne tabelki, itd. <table border=1> <tr> <th>rok</th> <th>kwota</th> <tr> <td>2001</td> <td>189,982.000</td> <tr> <td>2002</td> <td>250,321.000</td> </table> Tabelki HTML są również wykorzystywane do wymuszenia konkretnego układu elementów na stronie Nie jest to zalecane wg specyfikacji HTML 4 (do tego celu służy CSS!) 38 Zarządzanie układem w oparciu o tabelki HTML (1/3) 39 Zarządzanie układem w oparciu o tabelki HTML (2/3) 40 Tabela o jednym wierszu i jednej komórce; niebieski kolor tła Komórka z VALIGN=TOP -obraz GIF Komórka -tekst Tabela; CELLSPACING=0 Wiersz z komórką o COLSPAN=2; bez koloru tła -tekst Wiersz o zielonym kolorze tła <table class=table_border width=80%> <tr> <td> <table cellspacing=0 cellpadding=10 width=100%> <tr> <td colspan=2 align=center>'pulp Fiction </td> <tr class=row_odd> <td valign=top align=center> <img width=100 src='cw2img?id=46' border=1> </td> <td valign=top> <i>kategoria:</i>... </td> </table> </td> </table>
Zarządzanie układem w oparciu o tabelki HTML (3/3) 41 Formularze HTML 42 Tabela; niebieski kolor tła Komórka; VALIGN=TOP Tabela; wiersze w różnych kolorach tła Komórka Formularze HTML stanowią interfejs umożliwiający przekazanie parametrów wywołania programom dynamicznie generującym strony HTML: skryptom CGI, serwletom, aplikacjom JSP, ASP, itp. Formularz zawiera różne typy pól umożliwiających wprowadzanie lub wybór wartości parametrów (pola tekstowe, przyciski wyboru, listy rozwijane itd.) Wartości wprowadzone przez użytkownika do pól formularza stają się parametrami wywołania programu uruchamianego na serwerze aplikacji Nazwy wysyłanych parametrów wywołania programu są takie same jak nazwy pól formularza Tabela o jednym wierszu; brak koloru tła Przykład formularza do wprowadzania wartości parametrów <HTML> <HEAD> <TITLE>Wyszukiwanie pracowników</title> </HEAD> <BODY> <FORM ACTION="/servlet/MyServlet1" METHOD=GET> Nazwisko szukanego pracownika: <INPUT TYPE="text" NAME="name" SIZE=8> <INPUT TYPE="submit" VALUE="Szukaj"> </FORM> </BODY> </HTML> 43 Znaczniki HTML służące do tworzenia formularzy (1) <FORM ACTION=url METHOD=m></FORM> Początek/koniec definicji formularza; po zatwierdzeniu formularza przez użytkownika zostanie wywołana aplikacja url, a parametry wywołania będą przekazane metodą m (GET lub POST); znaczniki te muszą otaczać wszystkie pozostałe znaczniki formularza <INPUT TYPE='text' NAME=n VALUE=v SIZE=s> Pole tekstowe o nazwie n, wartości domyślnej v i rozmiarze s znaków <INPUT TYPE='password' NAME=n VALUE=v SIZE=s> Jak wyżej, lecz zawartość wprowadzana do pola nie jest ujawniana na ekranie <INPUT TYPE='radio' NAME=n VALUE=v CHECKED> Przycisk radiowy należący do grupy przycisków radiowych o nazwie n; włączonemu przyciskowi odpowiada wartość v; jeżeli pojawia się CHECKED, to przycisk ten będzie domyślnie włączony 44
Znaczniki HTML służące do tworzenia formularzy (2) 45 Znaczniki HTML służące do tworzenia formularzy (3) 46 <INPUT TYPE='checkbox' NAME=n VALUE=v CHECKED> Przycisk wyboru o nazwie n; włączonemu przyciskowi odpowiada wartość v; jeżeli pojawia się CHECKED, to przycisk ten będzie domyślnie włączony <INPUT TYPE='hidden' NAME=n VALUE=v> Pole tekstowe ukryte o nazwie n i wartości v; nie wyświetlane na ekranie, jego wartość musi być umieszczona wewnątrz znacznika <INPUT TYPE='submit' NAME=n VALUE=v> Przycisk zatwierdzający formularz; jego naciśnięcie powoduje wysłanie przez przeglądarkę żądania uruchomienia aplikacji o adresie URL podanym w znaczniku FORM; aplikacji tej zostaną przesłane parametry wywołania oparte o wartości wszystkich elementów formularza (pól tekstowych, przycisków wyboru, itd.); v opisuje etykietę przycisku <INPUT TYPE='image' SRC=url> Obraz graficzny pełniący funkcję przycisku zatwierdzającego formularz; url określa lokalizację pliku obrazu <INPUT TYPE='reset' VALUE=v> Przycisk przywracający wszystkim elementom formularza wartości początkowe; v opisuje etykietę przycisku <SELECT NAME=n SIZE=s MULTIPLE></SELECT> Początek/koniec definicji listy/listy rozwijanej; element otrzyma nazwę n, będzie jednocześnie wyświetlać s pozycji; jeżeli pojawia się MULTIPLE, to użytkownik ma możliwość wyboru wielu pozycji jednocześnie; wewnątrz tego znacznika znajdują się znaczniki <OPTION> Znaczniki HTML służące do tworzenia formularzy (4) 47 Przykład złożonego formularza 48 <OPTION VALUE=v SELECTED></OPTION> Początek/koniec definicji pojedynczej pozycji listy; wartość v będzie wysłana przez formularz, jeżeli pozycja ta zostanie wybrana; jeżeli pojawia się SELECTED, to pozycja ta jest zaznaczona domyślnie; wewnątrz znacznika znajduje się wyświetlany tekst <TEXTAREA NAME=n ROWS=r COLS=c><TEXTAREA> Obszar tekstowy (wielowierszowe pole tekstowe) o nazwie n, c kolumnach i r wierszach; wewnątrz znacznika znajduje się tekst domyślny <form action= /mv/srch ><table class=table_border width=100%> <tr><td><table cellspacing=0 cellpadding=4 width=100%> <tr><td colspan=2 align=center>wyszukaj film</td> <tr><td>tytuł</td> <td><input type='text' name=tytul></td> <tr><td>reżyseria</td> <td><input type='text' name=director></td> <tr><td>obsada</td> <td><input type='text' name=cast></td> <tr><td>gatunek</td> <td><select name=category> <option>dowolny</option> <option>action</option> <option>comedy</option> <option>sci-fi</option> </select></td> <tr><td>zwiastun</td> <td><input type='checkbox' name=istrailer></td> <tr><td colspan=2 align=right><br> <input type='submit' value='szukaj'></td> </table></td></table></form>
Przykład złożonego formularza 49 CSS Arkusze reguł stylistycznych CSS Arkusz reguł stylistycznych stylu (ang. style sheet) jest kolekcją reguł formatujących, które mogą odnosić się do wielu dokumentów HTML; spełnia on funkcję wzorca, pozwalając na zapewnienie takiego samego wyglądu wszystkich wystąpień danego elementu Powszechnie zaakceptowanym i ustandaryzowanym mechanizmem specyfikacji stylów dla HTML jest CSS (standardy CSS1 i nowszy CSS2 - będący rozszerzeniem CSS1) CSS umożliwia znacznie dokładniejszą kontrolę sposobu wyświetlania elementów, aniżeli sam HTML Nie wszystkie mechanizmy CSS1/CSS2 są zaimplementowane w dostępnych obecnie przeglądarkach Finalizowane prace nad CSS2.1 okrojoną wersją CSS2, pozbawioną opcji niezaimplementowanych w aktualnych przeglądarkach Np. dźwiękowej interpretacji dokumentów (jest w powstającym CSS3) 51 CSS w HTML - Przykład <HTML> <HEAD> <TITLE>CSS homepage</title> <STYLE type="text/css"> H1 { color: blue BODY { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em </STYLE> </HEAD> <BODY> <H1>Cascading Style Sheets</H1> <H2>Preface</H2> <P> A CSS rule consists of two main parts: selector ('H1') and declaration ('color: blue'). The declaration has two parts: property ('color') and value ('blue'). </P> </BODY> </HTML> 52
Dołączanie reguł do dokumentu HTML 53 Reguły stylistyczne CSS 54 Reguły stylistyczne w oddzielnym pliku, wskazanym znacznikiem <LINK REL= stylesheet > Reguły stylistyczne zagnieżdżone w dokumencie za pomocą znacznika <STYLE> w sekcji HEAD Atrybut STYLE elementów w sekcji BODY, np. <P STYLE='{color: blue'> Reguła CSS zawiera dwie części: selektor (np. 'H1') i deklarację (np. 'color: blue'); deklaracja ma dwie części: właściwość (np. 'color') i wartość (np. 'blue') Selektor składa się z jednego lub więcej prostych selektorów połączonych łącznikami; łącznikami są: odstępy, "> i "+ Gdy wszystkie warunki selektora są spełnione dla danego elementu, mówimy, że element spełnia selektor Formaty selektorów reguł CSS 55 Przykład wykorzystania reguł CSS (1) 56 * E E F E > F E + F A:link A:visited E:active E:hover E[atr="val"] E.val spełniony przez każdy element spełniony przez każdy element <E> (np. BODY) spełniony przez każdy element F zagnieżdżony wewnątrz elementu E (np. P I) spełniony przez każdy element F zagnieżdżony bezpośrednio wewnątrz elementu E (np. P I) spełniony przez każdy element F, który następuje bezpośrednio za elementem E spełniony przez każdy link <A>, który nie został jeszcze odwiedzony spełniony przez każdy link <A>, który został już odwiedzony spełniony przez każdy element E, który jest właśnie naciskany myszką spełniony przez każdy element E, nad którym właśnie przesuwa się wskaźnik myszki spełniony przez te elementy E, które posiadają atrybut atr o wartości val spełniony przez te elementy E, które posiadają atrybut CLASS o wartości val body {background-color: orange * {font-family: Sans-serif *.row_even {background-color: lightblue *.row_odd {background-color: lightgreen *.row_caption {background-color: darkblue; color: white; font-weight: bold *.table_border {background-color: darkblue *.button_even {background-color: lightblue; border-color: lightblue *.button_odd {background-color: lightgreen; border-color: lightgreen *.result_title {color: darkblue; font-weight: bold *.result_story {font-size: smaller *.page_header {font-family: "Tahoma",Sans-serif; font-weight:800; letter-spacing: 8; color: white a.active_link {color: green; font-weight: bold; text-decoration: none a:hover {color: red
Przykład wykorzystania reguł CSS (2) 57 Deskryptory CSS: marginesy 58 <table class=table_border width=100%> <tr><td><table cellspacing=0 cellpadding=4 width=100%> <tr class=row_caption> <td colspan=2 align=center>wyszukaj film</td> <tr class=row_odd> <td>tytuł</td><td><input type='text' name=p_title></td> <tr class=row_even> <td>reżyseria</td><td><input type='text' name=p_dir></td> <tr class=row_odd> <td>obsada</td><td><input type='text' name=p_cast></td> <tr class=row_even> <td>gatunek</td><td><select name=p_category> <option>action</option> <option SELECTED >COMEDY</option> <option>family</option> <option>sci-fi</option> </select></td> <tr class=row_odd> <td colspan=2 align=right><br> <input type='submit' value='szukaj' class=button_even></td> </table> </td> </table> Właściwości marginesów (obszaru pomiędzy obramowaniem elementu a elementem zewnętrznym): margin-top, margin-right, margin-bottom, marginleft, margin; np.: BODY { margin: 2em /* all margins set to 2em */ BODY { margin: 1em 2em /* top & bottom = 1em, right & left = 2em */ BODY { margin: 1em 2em 3em /* top=1em, right=2em, bottom=3em, left=2em */ ostatnia z powyższych reguł jest równoważna poniższej: BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; Uwaga: 1em = rozmiar używanej czcionki Deskryptory CSS: wypełnienie 59 Deskryptory CSS: obramowanie 60 Własności wypełnienia (obszaru pomiędzy treścią elementu a ewentualnym obramowaniem) - właściwości: paddingtop, padding-right, padding-bottom, padding-left i padding; np.: Szerokość krawędzi: border-top-width, border-rightwidth, border-bottom-width, border-left-width i border-width; wartości: thin, medium, thick, lub podane jawnie; np. H1 {border-width: thin Kolor krawędzi: border-top-color, border-right-color, border-bottom-color, border-left-color i bordercolor; np. H1 {border-color: red Styl krawędzi: border-top-style, border-right-style, border-bottom-style, border-left-style, and borderstyle; wartości: none, dotted, dashed, solid, double, groove, ridge, inset, outset; np. H1 {border-style: solid dotted H1 { background: white; padding: 1em 2em; Powyższy przykład specyfikuje margines wewnętrzny w pionie na '1em' (padding-top and padding-bottom) oraz margines wewnętrzny w poziomie na '2em' (padding-right and padding-left)
Deskryptory CSS: specyfikacja czcionki 61 Deskryptory CSS: właściwości tekstu 62 Właściwość font-family; wartości: serif, sans-serif, cursive, fantasy, monospace, i inne Właściwość font-style; wartości : normal, italic, oblique Właściwość font-variant; wartości : normal, small-caps Właściwość font-weight; wartości : normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 Właściwość font-stretch; wartości :ultra-condensed, extracondensed, condensed, semi-condensed, normal, semiexpanded, expanded, extra-expanded, ultra-expanded Właściwość font-size; wartości : xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, bezwzględny rozmiar czcionki, względny rozmiar czcionki (wyrażony procentowo) Wcięcie: text-indent; np. P {text-indent: 3em Wyrównanie: text-align; wartości: left, right, center, justify; np. P {text-align: center Dekoracja: text-decoration; wartości: none, underline, overline, line-through, blink; np. P {text-decoration: linethrough Cień: text-shadow; np. H1 {text-shadow: 0.2em 0.2em Odstępy: letter-spacing i word-spacing; np. H1 {letterspacing: 0.1em; word-spacing: 1em Wielkość liter: text-transform; wartości: capitalize, uppercase, lowercase, none Deskryptory CSS: kolory i tło 63 CSS: dziedziczenie 64 Kolor pierwszego planu: color; np.: EM { color: red /* predefined color name */ EM { color: rgb(255,0,0) /* RGB range 0-255 */ Tło: background-color, background-image, background-repeat, background-attachment, background-position, background; np.: H1 { background-color: #F00 BODY { background-image: url("marble.gif") BODY { background: white url("pendant.gif"); backgroundrepeat: repeat-y; background-position: center; BODY { background: red url("pendant.gif"); background-repeat: repeat-y; background-attachment: fixed; Niektóre wartości są dziedziczone przez elementy dzieci w drzewie dokumentu Definicja każdej właściwości w specyfikacji CSS zawiera informacje o tym czy jej wartość jest dziedziczona czy nie Przykład dziedziczenia: <H1>Wstęp <EM>wzbroniony</EM>!!!</H1> Jeśli elementowi H1 przypisano kolor czerwony, a elementowi EM nie przypisano koloru, to zostanie on również zaprezentowany na czerwono w efekcie dziedziczenia wartości koloru Istnieje możliwość zażądania odziedziczenia wartości właściwości domyślnie nie podlegającej dziedziczeniu przez podanie wartości inherit
CSS: kaskada 65 CSS: ważne reguły 66 W CSS więcej niż jeden arkusz stylów może wpływać na prezentację: Modularność: dołączanie arkuszy z innych plików: @import url(http://www.style.org/pastoral); Arkusze autora, czytelnika (user) i domyślny arkusz przeglądarki Czytelnik specyfikuje swój arkusz w sposób zależny od przeglądarki np. Firefox/Mozilla: usercontent.css w katalogu profilu Internet Explorer: Opcje Internetowe -> Dostępność Ogólne idee kaskady stylów: Reg. autora > Reg. czytelnika > Reg. przeglądarki Reguły z arkusza > Reguły z importowanych arkuszy W przypadkach spornych decyduje specyficzność reguły i następnie kolejność wystąpienia Autorzy i czytelnicy mogą jawnie podnosić wagę swoich reguł wskazując je jako ważne (important) H1 { color: black! important; background: white! important P { font-size: 12pt! important; font-style: italic Reguły ważne przesłaniają reguły normalne z tego samego źródła (autor, czytelnik) Od CSS2 ważna reguła czytelnika przesłania ważną regułę autora Uwaga: W CSS1 ważna reguła autora przesłaniała ważną regułę czytelnika! CSS: specyficzność reguł 67 CSS: algorytm kaskady 68 Współczynnik wyznaczany dla selektora reguły Współczynnik specifity uwzględnia: (a) liczbę atrybutów ID w selektorze (b) liczbę atrybutów class w selektorze (c) liczbę nazw znaczników w selektorze Współczynnik ma postać liczby (a)(b)(c) w systemie o odpowiednio dużej podstawie LI {... /* a=0 b=0 c=1 -> specificity = 1 */ UL LI {... /* a=0 b=0 c=2 -> specificity = 2 */ UL OL LI {... /* a=0 b=0 c=3 -> specificity = 3 */ LI.red {... /* a=0 b=1 c=1 -> specificity = 11 */ UL OL LI.red {... /* a=0 b=1 c=3 -> specificity = 13 */ #x34y {... /* a=1 b=0 c=0 -> specificity = 100 */ 1) Znajdź wszystkie deklaracje odnoszące się do elementu (gdy takich nie ma uwzględnij odziedziczone) 2) Sortuj wg oznaczenia ważności (important) i pochodzenia 3) Sortuj wg specyficzności (malejąco) 4) Sortuj wg kolejności wystąpienia Późniejsze reguły "wygrywają" Reguły zaimportowane poprzedzają zdefiniowane w arkuszu! Uwaga: deklaracje w atrybucie STYLE elementu mają taką samą wagę jak deklaracje z ID na końcu arkusza stylów
Format XML 70 XML Formalnie, XML stanowi podzbiór języka Standard Generalized Markup Language (SGML) (ISO 8879:1986) XML jest formatem służącym do opisywania strukturalnych lub semi-strukturalnych danych, np. przeznaczonych do upowszechniania w sieci Internet Dokumenty XML posługują się znacznikami, zapisywanymi podobnie jak w HTML; jednak wszystkie znaczniki XML są definiowane przez programistę Dokumenty XML są łatwe w przetwarzaniu maszynowym; istnieje wiele bibliotek tzw. parserów XML, z których mogą korzystać programiści (Java, JavaScript, C++, itd.) Przykładowy prosty dokument XML 71 Wybrane zastosowania XML 72 <company> <department> <dname>marketing</dname> <employees> <employee>jones</employee> <employee>smith</employee> </employees> </department> <department> <dname>production</dname> <employees> <employee>mitchell</employee> <employee>barker</employee> </employees> </department> </company> Format przechowywania danych Aplikacja Format sieciowej wymiany danych XML Aplikacja XML Aplikacja Źródłowy format danych do prezentacji na różnych platformach HTML Aplikacja XML WML TXT
Struktura dokumentu XML 73 Zewnętrzny DTD - Przykład 74 Ciało dokumentu może być poprzedzone następującymi, opcjonalnymi konstrukcjami: Instrukcja przetwarzania określająca: wersję XML, opcjonalnie kodowanie znaków, opcjonalnie informacje o tym czy dok. zawiera zewnętrzne deklaracje znaczników, np. <?xml version= "1.0" encoding="iso-8859-1" standalone="yes"?> Document Type Declaration (DTD), opisująca użyte znaczniki oraz ich gramatykę; DTD może znajdować się wewnątrz dokumentu lub w oddzielnym pliku (lokalnym lub zdalnym), np. <!DOCTYPE company SYSTEM "http://foo.org/dtds/company.dtd"> Instrukcja przetwarzania wskazująca arkusz stylów, zgodnie z którym ma być sformatowany dokument, np. <?xml-stylesheet type="text/xsl" href="company.xsl"?> company.xml <?xml version="1.0" encoding="iso-8859-2"?> <!DOCTYPE company SYSTEM "company.dtd"> <company> <department symbol="m"> <dname>marketing</dname> <employees> <employee>jones</employee> <employee>smith</employee> </employees> </department> <department symbol="s">... </department>... </company> może wystąpić jeden lub wiele razy (+), zero lub wiele (*), zero lub jeden (?) company.dtd <!ELEMENT company (department)+> <!ELEMENT department (dname, employees)> <!ELEMENT dname (#PCDATA)> <!ELEMENT employees (employee)+> <!ELEMENT employee (#PCDATA)> <!ATTLIST department symbol CDATA #REQUIRED> Wewnętrzny DTD - Przykład 75 Elementy składni DTD (1/2) 76 company.xml <?xml version="1.0" encoding="iso-8859-2"?> <!DOCTYPE company [ <!ELEMENT company (department)+> <!ELEMENT department (dname, employees)> <!ELEMENT dname (#PCDATA)> <!ELEMENT employees (employee)+> <!ELEMENT employee (#PCDATA)> <!ATTLIST department symbol CDATA #REQUIRED> ]> <company> <department symbol="m"> <dname>marketing</dname> <employees> <employee>jones</employee> <employee>smith</employee> </employees> </department> <department symbol="s">... </department>... </company> Definicje elementów Definiują nazwy elementów Określają zawieranie i następstwo:? element opcjonalny + * powtórzenia (obowiązkowe, opcjonalne) alternatywa Określają zawartość elementu: #PCDATA tekstowa (Parsed Character Data) EMPTY pusta (tylko znacznik i atrybuty) ANY dowolna
Elementy składni DTD (2/2) 77 Dokumenty poprawne i dobrze sformułowane 78 Definicje atrybutów Definiują nazwy atrybutów Określają typ atrybutu: CDATA tekstowy (Character Data) ID identyfikator (unikalny w ramach dokumentu) IDREF referencja Określają obowiązkowość atrybutów: #REQUIRED obowiązkowy #IMPLIED opcjonalny bez wartości domyślnej #FIXED ustalony (niezmienny) Podają wartości domyślne atrybutów opcjonalnych listy dopuszczalnych wartości (typy wyliczeniowe) Definicje encji (zewnętrznych/wewnętrznych, ogólnych/parametrycznych), definicje notacji Jeśli z instancją dokumentu związany jest DTD i dokument jest zgodny z regułami zdefiniowanymi w DTD mówimy, że dokument jest poprawny (valid) Jeśli dostępna jest tylko instancja dokumentu, procesor XML może jedynie sprawdzić, czy dokument jest dobrze sformułowany (wellformed) Znaczniki zamknięte <P>...</P> Dla elementów pustych dopuszczalny specjalny zapis: <BR/> Elementy prawidłowo zagnieżdżone np. <B> one <I> two </B> three </I> jest niepoprawne Nazwy znaczników wrażliwe na wielkość liter np. <B><i> one </I></B> jest niepoprawne Wartości atrybutów w apostrofach/cudzysłowach np. <IMG SRC= icon.gif WIDTH= 10 HEIGHT= 20 > Dokument zawiera jeden główny element (niezawarty w innym elemencie) Przestrzenie nazw (XML Namespaces) 79 Przestrzenie nazw - Przykład 80 Motywacje: Powstaje wiele słowników dziedzinowych Autorzy dokumentów powinni móc korzystać z wielu słowników i dodawać własne Powstaje ryzyko konfliktów nazw znaczników Rozwiązanie problemu: przestrzenie nazw (XML Namespaces) Nazwy elementów lub atrybutów poprzedzane prefiksem przestrzeni nazw Jedna przestrzeń nazw może być domyślna bez prefiksu Definiowanie przestrzeni nazw: Przez podanie specjalnego atrybutu xmlns:prefiks_przestrzeni Wartością atrybutu jest URI przestrzeni nazw (nazwa przestrzeni) Przestrzeń zdefiniowana w elemencie nadrzędnym może być wykorzystywana w podrzędnych <html xmlns="http://www.w3.org/html/1998/html4" xmlns:emp="http://mysite.com/employees"> <head><title>employees</title></head> <body> <emp:list> <emp:header>employees</emp:header> <table> <tr><td>name</td><td>salary</td></tr> <tr><td><emp:lastname>scott</emp:lastname></td> <td><emp:salary>2300</emp:salary></td></tr> <tr><td><emp:lastname>brown</emp:lastname></td> <td><emp:salary>4100</emp:salary></td></tr> </table> </emp:list> </body> </html> Domyślna przestrzeń, bez prefiksu
Schematy XML (XML Schema) W wielu zastosowaniach możliwości DTD nie są wystarczające do definiowania struktury dokumentów XML DTD odpowiedni dla dokumentów tekstowych DTD nie pozwala na specyfikowanie typów danych i ich weryfikację Brak wsparcia dla przestrzeni nazw Brak konstrukcji specyfikującej wystąpienie zbioru elementów w dowolnej kolejności (tylko sekwencja i alternatywa) Składnia nie-xml Rozwiązanie: XML Schema Standard do opisu struktury dokumentów XML w postaci dokumentu XML Bogactwo typów danych prostych i złożonych, możliwość definicji własnych typów Wsparcie dla przestrzeni nazw Eliminacja wad DTD, ale bardziej skomplikowana składnia 81 Schematy XML - Przykład <?xml version='1.0' encoding='windows-1250'?> <employees xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:nonamespaceschemalocation="empschema.xsd"> <employee> <last_name>scott</last_name> <salary>2300</salary> </employee> <employee> <?xml version="1.0" encoding="windows-1250"?> <last_name>brown</last_name> <xsd:schema xmlns:xsd="http://www.w3.org/2001/xmlschema"> <salary>4100</salary> <xsd:element name="employees"> </employee> </employees> empschema.xsd employees.xml <xsd:complextype> <xsd:sequence> <xsd:element name="employee" maxoccurs="unbounded"> <xsd:complextype> <xsd:sequence> <xsd:element name="last_name" type="xsd:string"/> <xsd:element name="salary" type="xsd:int"/> </xsd:sequence> </xsd:complextype> </xsd:element> </xsd:sequence> </xsd:complextype> </xsd:element> </xsd:schema> 82 Formatowanie dokumentów XML 84 XSL: Transformacja i formatowanie dokumentów XML Język XML opisuje strukturę i semantykę, nie opisuje formatowania Nie ma w XML znaczników opisujących formatowanie Ze znacznikami XML nie jest związany domyślny sposób prezentacji Sposób prezentacji dokumentu XML (formatowanie) dodaje się poprzez dołączenie arkuszu stylów CSS Cascading Style Sheets (Level 1 i Level 2) Opracowany z myślą o HTML XSL Extensible Stylesheet Language Opracowany dla dokumentów XML Bardziej złożony, oferujący więcej możliwości niż CSS
Formatowanie XML za pomocą CSS 85 XSL Extensible Stylesheet Language 86 produkty.xml produkty.css <?xml version="1.0" encoding="windows-1250"?> <?xml-stylesheet type="text/css" href="produkty.css"?> <cennik> <produkt kod="67653829370"> <nazwa>antena dachowa</nazwa> <symbol>1709765</symbol> <cena>85</cena> </produkt> <produkt kod="56486294304"> <nazwa>radioodtwarzacz CAR 2001</nazwa> <symbol>3209765</symbol> <cena>525</cena> </produkt> <produkt kod="78488297102"> <nazwa>zestaw głośnomówiący LOUD 2</nazwa> <symbol>4409724</symbol> <cena>330</cena> </produkt> </cennik> produkt {display: block nazwa {display: inline; font-weight: bold symbol {display: none cena {display: inline; font-style: italic CSS umożliwia formatowanie elementów, ale nie pozwala na modyfikację struktury drzewa dokumentu Język do definiowania arkuszy stylów Obejmuje 2 części: XSL Transformations (XSLT) język przekształceń Wykorzystuje XPath XSL Formatting Objects (XSL-FO) język opisu formatu W porównaniu z CSS: XSL oferuje bardziej rozbudowane mechanizmy formatowania Umożliwia transformację struktury drzewa dokumentu (!) Arkusze XSL są dokumentami XML (!) XSLT może być wykorzystywany w połączeniu z XSL-FO do formatowania dokumentów XML, ale może również być wykorzystywany niezależnie jako uniwersalny język transformacji dokumentów XML XSLT Język przekształceń 87 Transformacja XSLT 88 Zawiera elementy służące do definiowania reguł opisujących sposób przekształcania jednego dokumentu XML na inny dokument Wykorzystuje język wyrażeń XPath do wyboru przetwarzanych elementów Przekształcony dokument może mieć znaczniki (i DTD) dokumentu oryginalnego lub używać innego zestawu znaczników Przykłady typów konwersji dokumentów XML: Konwersja do dokumentu XML zawierającego obiekty formatujące XSL Konwersja do dokumentu HTML (np. korzystającego z arkusza stylów CSS) Dokument XML Arkusz stylistyczny XSL XSLT Dokument XML (lub HTML, WML, itp.) Automatyczna konwersja dokumentu XML do formatu HTML, WML, itp. lub innego dokumentu XML
Przykład transformacji XSLT produkty.xml <?xml version="1.0" encoding="windows-1250"?> <?xml-stylesheet type="text/xsl" href="produkty.xsl"?> <cennik> <produkt kod="67653829370"> <nazwa>antena dachowa</nazwa> <symbol>1709765</symbol> <cena>85</cena> </produkt> <produkt kod="56486294304"> <nazwa>radioodtwarzacz CAR 2001</nazwa> <symbol>3209765</symbol> <cena>525</cena> </produkt> <produkt kod="78488297102"> <nazwa>zestaw głośnomówiący LOUD 2 </nazwa> <symbol>4409724</symbol> <cena>330</cena> </produkt> </cennik> produkty.xsl <?xml version="1.0" encoding="windows-1250"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/xsl/transform" version="1.0"> <xsl:template match="cennik"> <HTML><BODY><H1>Cennik akcesoriów</h1> <xsl:for-each select="produkt"> <B><xsl:value-of select="nazwa"/></b> - <I><xsl:value-of select="cena"/></i> PLN <BR/> </xsl:for-each> </BODY></HTML> </xsl:template> </xsl:stylesheet> Wyrażenia XPath wybierające przetwarzane elementy 89 Metody transformacji XSLT Programista przygotowuje arkusz stylistyczny XSL, opisujący sposób transformacji oryginalnego dokumentu XML Transformacja może być opisana w sposób rekurencyjny, proceduralny lub mieszany Za transformację dokumentu XML odpowiada procesor XSLT Procesory XSLT mogą być dostępne w postaci: Samodzielnych produktów Modułów wchodzących w skład większych produktów Przeglądarek internetowych (np. Microsoft Internet Explorer) Serwerów WWW Modułów bibliotecznych np. bibliotek Java 90 Efekt transformacji do HTML wykonanej po stronie przeglądarki Co widzi procesor XSLT? 91 Domyślne reguły transformacji 92 Procesor XSLT widzi drzewo dokumentu XML XSLT zakłada, że drzewo składa się z 7 rodzajów węzłów: Korzeń Elementy Tekst Atrybuty Przestrzenie nazw Instrukcje przetwarzania Komentarze DTD i deklaracja typu dokumentu nie są włączane do drzewa (ale mogą powodować dodanie do niektórych elementów atrybutów domyślnych i stałych) XSL zawiera definicje kilku domyślnych reguł niejawnie dołączonych do wszystkich arkuszy stylów Domyślna reguła elementów Zapewnia, że wszystkie węzły będą przetworzone gdy nie ma jawnych reguł Domyślna reguła węzłów tekstowych i atrybutów Kopiuje tekst i atrybuty na wyjście Domyślna reguła instrukcji przetwarzania i komentarzy Pomija instrukcje przetwarzania i komentarze Domyślne reguły mają niższy priorytet niż wyspecyfikowane jawnie (tzn. obowiązują jeśli nie zostaną przesłonięte) Dzięki powyższym regułom "pusty" arkusz stylów spowoduje przekopiowanie danych tekstowych na wyjście <?xml version="1.0" encoding="windows-1250"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/xsl/transform" version="1.0"> </xsl:stylesheet>
Transformacja rekurencyjna (1/2) Przykład: Reguły transformacji 93 Transformacja rekurencyjna (2/2) Przykład: Arkusz stylistyczny XSL 94 1) Każde wystąpienie znacznika <cennik>*</cennik> zamień na: <HTML><BODY><H1>Cennik akcesoriów</h1>*</body></html> <?xml version="1.0" encoding="windows-1250"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/xsl/transform" version="1.0"> <xsl:template match="cennik"> a następnie spróbuj dopasować reguły do zawartości znacznika 2) Każde wystąpienie znacznika <produkt>*</produkt> zamień na: *<BR/> a następnie spróbuj dopasować reguły do zawartości znacznika 3) Każde wystąpienie znacznika <nazwa>*</nazwa> zamień na: <B>*</B> - <HTML><BODY><H1>Cennik akcesoriów</h1><xsl:apply-templates/></body></html> </xsl:template> <xsl:template match="produkt"> <xsl:apply-templates/><br/> </xsl:template> <xsl:template match="nazwa"> <B><xsl:value-of select="text()"/></b> - </xsl:template> <xsl:template match="symbol"> 4) Każde wystąpienie znacznika <cena>*</cena> zamień na: <I>*</I> PLN 5) Pomiń znacznik <symbol>*</symbol> </xsl:template> <xsl:template match="cena"> <I><xsl:value-of select="text()"/></i> PLN </xsl:template> </xsl:stylesheet> Wybiera węzeł tekstowy Transformacja proceduralna (1/2) Przykład: Pseudokod transformacji 95 Transformacja proceduralna (2/2) Przykład: Arkusz stylistyczny XSL 96 wyświetl "<HTML><BODY><H1>Cennik akcesoriów</h1>"; dla każdego znacznika <produkt> { <?xml version="1.0" encoding="windows-1250"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/xsl/transform" version="1.0"> wyświetl "<B>"; <xsl:template match="cennik"> wyświetl zawartość znacznika <nazwa>; wyświetl "</B> -"; wyświetl "<I>"; wyświetl zawartość znacznika <cena>; wyświetl "</I> PLN<BR/>"; <HTML><BODY><H1>Cennik akcesoriów</h1> <xsl:for-each select="produkt"> <B><xsl:value-of select="nazwa"/></b> - <I><xsl:value-of select="cena"/></i> PLN <BR/> </xsl:for-each> </BODY></HTML> wyświetl "</BODY></HTML>"; </xsl:template> </xsl:stylesheet>
Dostęp do atrybutów, dodawanie atrybutów <?xml version="1.0" encoding="windows-1250"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/xsl/transform" version="1.0"> <xsl:template match="/"> <HTML> <HEAD><TITLE>Cennik</TITLE></HEAD> <BODY> <H1>Cennik akcesoriów</h1> <TABLE> <xsl:attribute name="border">4</xsl:attribute> <TR> <TH>Kod</TH><TH>Symbol</TH> <TH>Nazwa</TH><TH>Cena</TH> </TR> <xsl:for-each select="cennik/produkt"> <TR> <TH><xsl:value-of select="@kod"/></th> <TD><xsl:value-of select="symbol"/></td> <TD><xsl:value-of select="nazwa"/></td> <TD><xsl:value-of select="cena"/></td> </TR> </xsl:for-each> </TABLE> </BODY> </HTML> </xsl:template> </xsl:stylesheet> Dodanie atrybutu BORDER z wartością 4 do elementu<table> (<TABLE BORDER="4"> też OK.) Dostęp do atrybutu KOD elementu cennik/produkt 97 Transformacja warunkowa w XSLT <xsl:for-each select="cennik/produkt"> <xsl:if test="symbol='1709765'"> <TR> <TD><xsl:value-of select="symbol"/></td> <TD><xsl:value-of select="nazwa"/></td> <TD><xsl:value-of select="cena"/></td> </TR> </xsl:if> </xsl:for-each> <xsl:for-each select="cennik/produkt"> <TR> <xsl:attribute name="bgcolor"> <xsl:choose> <xsl:when test="symbol='1709765'">green</xsl:when> <xsl:when test="symbol='4409724'">yellow</xsl:when> <xsl:otherwise>red</xsl:otherwise> </xsl:choose> </xsl:attribute> <TD><xsl:value-of select="symbol"/></td> <TD><xsl:value-of select="nazwa"/></td> <TD><xsl:value-of select="cena"/></td> </TR> </xsl:for-each> 98 Sortowanie w XSLT 99 Automatyczne numerowanie w XSLT 100 <xsl:for-each select="cennik/produkt"> <xsl:sort select="cena" data-type="number" order="descending"/> <TR> <TD><xsl:value-of select="symbol"/></td> <TD><xsl:value-of select="nazwa"/></td> <TD><xsl:value-of select="cena"/></td> </TR> </xsl:for-each> <xsl:for-each select="cennik/produkt"> <TR> <TD><xsl:number/></TD> <TD><xsl:value-of select="symbol"/></td> <TD><xsl:value-of select="nazwa"/></td> <TD><xsl:value-of select="cena"/></td> </TR> </xsl:for-each> <xsl:for-each select="cennik/produkt"> <xsl:sort select="nazwa" lang="pl" data-type="text" order="ascending"/> <xsl:sort select="symbol" data-type="number" order="ascending"/> <TR> <TD><xsl:value-of select="symbol"/></td> <TD><xsl:value-of select="nazwa"/></td> <TD><xsl:value-of select="cena"/></td> </TR> </xsl:for-each> Domyślnie xsl:number zlicza sąsiadujące węzły węzła źródłowego Możliwości zmiany domyślnego zachowania: <xsl:number value="4"/>: wartość wyrażenia <xsl:number level="any"/>: numeracja elementów danego typu w dokumencie <xsl:number... format="i"/>: I-rzymskie, i-rzymskie małe, a/a - litery...