Copyright © Politecnico di Milano Kurs WebML 3. Hipertekst Copyright © Politecnico di Milano March 2003 Translation: Kamil Żyła, Politechnika Lubelska http://www.webratio.com

Model hipertekstowy: istota Cele Wysokopoziomowe modelowanie działania dynamicznych aplikacji internetowych (interakcja z użytkownikiem, logika biznesowa, operacje bazodanowe) Wykorzystanie prostej wizualnej notacji Umożliwienie automatycznego generowania dynamicznych szablonów stron oraz kodu odpowiedzialnego za operacje na danych oraz dostęp do danych Translation: Kamil Żyła, Politechnika Lubelska

Model hipertekstowy: pytania Q1: Do jakich obszarów strony może uzyskać dostęp użytkownik? Q2: Jakie porcje modelu hipertekstowego są prezentowane użytkownikowi aplikacji? Q3: Co jest odpowiedzialne za publikację treści w węzłach modelu hipertekstowego? Q4: Jak są połączone węzły modelu hipertekstowego? A1: widoki stron A2: strony A3: komponenty danych A4: linki Translation: Kamil Żyła, Politechnika Lubelska

Podstawowe komponenty danych MODEL Podstawowe komponenty danych DATAUNIT INDEXUNIT MULTIDATAUNIT Treść (dane): instancje encji Selektor: warunek wyboru instancji encji entity [Selector] entity [Selector] entity [Selector] ENTRYUNIT SCROLLERUNIT MULTICHOICE HIERARCHICAL entity [Selector] entity [Selector] entity [Selector] Translation: Kamil Żyła, Politechnika Lubelska

Renderowanie komponentów danych MODEL Renderowanie komponentów danych DATAUNIT INDEXUNIT MULTIDATAUNIT Author first name:XXX last name:YYY photo: Index of Authors S. Ceri P. Fraternali O.Versand All Authors ENTRYUNIT SCROLLERUNIT MULTICHOICE HIERARCHICAL Insert Your Data Fname Lname Browse Authors 5/12: go to    1/12 Choose Authors Ceri Fraternali Versand Books&Authors 1. Web Applicat. Ceri Fraternali 2. Systems Tannenbaum Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska Komponenty danych MODEL Komponent WebML jest atomowym elementem publikującym informacje Komponent jest pojemnikiem zawierającym obiekty Wszystkie instancje encji Instancje encji, które spełniają warunek wyboru nazywany selektorem unitX container Translation: Kamil Żyła, Politechnika Lubelska

Wejścia i wyjścia komponentu MODEL Wejścia i wyjścia komponentu unitX entity [selector (par 1, .., parN)] WE WY Komponent może potrzebować tzw. kontekstu, aby zostać przetworzonym Każdy komponent posiada parametry wejściowe i wyjściowe Parametry potrzebne do przetworzenia komponentu Predefiniowane dla komponentu parametry + Pozostałe parametry wymagane przez selektor komponentu Wyjściowe parametry komponentu mogą zostać wykorzystane do przetworzenia zależnych od niego komponentów Translation: Kamil Żyła, Politechnika Lubelska

Nawigacja: linki kontekstowe MODEL Nawigacja: linki kontekstowe Author Author source unit target unit Link kontekstowy jest skierowanym połączeniem pomiędzy dwoma komponentami (źródłowym – source unit i docelowym – target unit), renderowanym jako kotwica lub przycisk wysyłający formularz Zadania linków kontekstowych Umożliwienie użytkownikowi przemieszczania z jednego miejsca do drugiego Transportowanie informacji z jednego miejsca do drugiego Inicjowanie przetwarzania (efekt uboczny) Translation: Kamil Żyła, Politechnika Lubelska

Przykład połączenia komponentów MODEL Przykład połączenia komponentów Którego autora książki? Która książka? p2 p3 p1 Author [OID=p1] Book [author2book(p2)] Book [OID=p3] Author first name:James last name:Joyce photo: Books of YYY Ulysses The Dubliners Portrait... Book Title:Ulysses Price:23$ Cover: Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska Parametry linków MODEL Author param Book [Author2Book(param)] Kontekst jest transportowany przy użyciu parametrów linku Parametr linku jest określany przez Nazwę Źródło: jeden z parametrów wyjściowych komponentu źródłowego Cel: jeden z parametrów wejściowych komponentu docelowego Translation: Kamil Żyła, Politechnika Lubelska

Domyślne parametry linku MODEL Domyślne parametry linku Gdziekolwiek to możliwe, parametry linków są wnioskowane na podstawie diagramu i nie wymagają jawnej specyfikacji Diagramy stają się bardziej czytelne i proste Przykład Book [Author2Book] Author Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska MODEL Domyślne selektory Gdziekolwiek to możliwe, selektory i ich parametry są wnioskowane na podstawie modelu i nie wymagają jawnej specyfikacji Przykład Book [author2book] Author Book Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska MODEL Linki automatyczne Author Author source unit target unit A Link automatyczny, natychmiast po wyświetleniu komponentu źródłowego, przekazuje do komponentu docelowego, bez interwencji użytkownika, pewien domyślny kontekst Następnie użytkownik może zmienić przesłany kontekst poprzez wybór innego obiektu (wskazywany przez kotwicę reprezentującą link) Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska MODEL Linki transportowe source unit target unit Book [Author2Book] Author Link transportowy posiada określony kontekst, który jest przekazywany niezwłocznie po wyświetleniu komponentu źródłowego, bez interwencji użytkownika Użytkownik nie może zmienić przekazywanego kontekstu, w związku tym ten link nie jest renderowany jako kotwica Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska MODEL DataUnit params OID Entity [selector(params)] Data unit Publikuje informacje dotyczące WYŁĄCZNIE JEDNEJ INSTANCJI Komponent posiada opcjonalny selektor (wymagana jednoznaczna identyfikacja pojedynczej instancji) Wejście OID obiektu, który ma zostać opublikowany, LUB Parametry wymagane do przetworzenia selektora m.in. Wartości atrybutów OID obiektu powiązanego relacją z przetwarzanym obiektem Wyjście OID publikowanego obiektu oraz jego atrybuty Translation: Kamil Żyła, Politechnika Lubelska

ACME: data unit na stronie ze szczegółami produktu RUNNING CASE ACME: data unit na stronie ze szczegółami produktu Product Informacje o jednym specyficznym produkcie Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska MODEL Przykłady Brak selektora i linków przychodzących: niepoprawny komponent! p1 EntityB Parametr wejściowy: OID powiązanego obiektu: zostanie pokazany powiązany relacją obiekt A.oid B.oid EntityB [Relationship(A2B)] Parametr wejściowy: wartość do wykorzystania przez selektor: zostanie pokazany obiekt spełniający warunek wyboru Nawet jeśli projektant wykorzystuje wyłącznie notację graficzną, model WebML jest definiowany przez XML DTD, stąd każdy projekt jest przechowywany jako plik XML. param1 B.oid EntityB [B.attr = param1] Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska MODEL IndexUnit selectedOID params Entity [Selector(params)] Index unit: Publikuje listę instancji encji (ZBIÓR OBIEKTÓW) Komponent posiada opcjonalny selektor Parametry wejściowe potrzebne do przetworzenia selektora Wartości do porównania z atrybutami OID powiązanego relacją obiektu Parametr wyjściowy OID obiektu wybranego przez użytkownika Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska MODEL Przykłady EntityB selOID (B) Brak linków wejściowych: zostaną pokazane wszystkie obiekty Parametr wejściowy: OID obiektu źródłowego powiązanego relacją: zostaną wyświetlone wszystkie obiekty powiązane relacją sourceOID (A) selOID (B) EntityB [Relationship(A2B)] Parametr wejściowy: wartość do porównania z atrybutem: zostaną wyświetlone obiekty spełniające warunek Nawet jeśli projektant wykorzystuje wyłącznie notację graficzną, model WebML jest definiowany przez XML DTD, stąd każdy projekt jest przechowywany jako plik XML. Param1 selOID (B) EntityB [B.attr = Param1] Translation: Kamil Żyła, Politechnika Lubelska

ACME: index unit na stronie z produktami RUNNING CASE ACME: index unit na stronie z produktami selOID Product Użytkownikowi zostaje wyświetlona lista wszystkich produktów Użytkownik może wyświetlić dalsze informacje po kliknięciu na element listy Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska MODEL MultiDataUnit params {OIDs} Entity [Selector(params)] Multidata unit Prezentuje wiele instancji encji (ZBIÓR OBIEKTÓW) Komponent posiada opcjonalny selektor Parametry wejściowe potrzebne do przetworzenia selektora Wartości do porównania z atrybutami OID obiektów powiązanych relacją Parametr wyjściowy Zbiór OID opublikowanych obiektów Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska MODEL MultiData vs Index MultiData czy Index? Listy (Indexes) mogą być użyte jako mechanizm dostępu do szczegółowych informacji o obiekcie Multidata Units publikują w tym samym czasie informacje o wielu obiektach Różnica jest w parametrach wyjściowych Listy (Indexes) mają na wyjściu pojedynczy identyfikator (OID) wybranego obiektu Multidata units mają na wyjściu identyfikatory (OID) wszystkich wyświetlonych obiektów Translation: Kamil Żyła, Politechnika Lubelska

Entry Unit (Formularz) MODEL Entry Unit (Formularz) params Komponent reprezentuje formularz umożliwiający przesłanie informacji przez użytkownika Treść jest przekazywana do innych komponentów poprzez parametry wychodzących linków (zazwyczaj jeden link) Jest zazwyczaj reprezentowany w HTML przy użyciu znacznika <form> oraz przycisku submit Formularz pozwala projektantowi wybrać urządzenie do zbierania informacji od użytkownika. Wychodzący link formularza przenosi informacje wprowadzone przez użytkownika do kolejnego komponentu, w celu ich przetworzenia. Translation: Kamil Żyła, Politechnika Lubelska

Formularze i pola wyboru MODEL Formularze i pola wyboru Formularz zawiera dwa typy widgetów do wprowadzania danych Pola tekstowe do wprowadzania nowych wartości Pola wyboru do wybierania wartości z listy Pola mają właściwości Preloading (umożliwia wstawienie do pola istniejącej wartości) Modifiability (określa, czy użytkownik ma prawo edytować zawartość pola) Visibility (określa, czy pole ma być ukryte – hidden) Typ danych (string, integer, text, itp.) Reguły walidacyjne Są trzy typy pól formularza: In – używane kiedy użytkownik wprowadza dane do pustego pola. Out – używane gdy do pola wstawiono istniejącą wartość i użytkownik nie może jej zmodyfikować. Inout - używane gdy do pola wstawiono istniejącą wartość i użytkownik może ją zmodyfikować. Translation: Kamil Żyła, Politechnika Lubelska

Bruce Springsteen “the boss” MODEL Pola typu „Preloaded” W pole może być wstawiona wartość lub wartości Gniazda (slots) pozwalają na konkatenację wielu wartości w ramach tego samego pola Gniazda mogą zawierać wartości dynamiczne (pobierane z bazy danych) lub statyczne (zdefiniowane w modelu) Do pola wyboru należy wstawić zbiór instancji (może być wiele gniazd w ramach jednej instancji) Użytkownik wybiera instancję spośród wyświetlonych EntryUnit S1 S2 S3 PersonField AddrField Artist FirstName  PF.S1 LastName  PF.S2 NickName  PF.S3 Resulting field Bruce Springsteen “the boss” PersonField Na slajdzie przedstawiono przykład formularza z dwoma polami typu ‘IN’ – name, email. Kiedy użytkownik wciśnie przycisk OK, dane wejściowe zostaną wysłane do komponentu (zazwyczaj komponent operacyjny) wskazanego przez link wychodzący. Translation: Kamil Żyła, Politechnika Lubelska

[Preselector(params)] MODEL Multichoice Unit params {selOIDs} Entity [Selector(params)] [Preselector(params)] Multichoice unit Publikuje listę elementów (ZBIÓR OBIEKTÓW), z której użytkownik może wybrać jeden lub więcej elementów Komponent posiada opcjonalny selektor i preselektor Parametry wejściowe Parametry wymagane do przetworzenia selektorów (wartości do porównania z atrybutami i identyfikatory uczestników relacji) Parametry wyjściowe Identyfikatory obiektów wybranych przez użytkownika Preselektor: pozwala na zdefiniowanie podzbioru elementów domyślnych (wybranych zanim użytkownik wykona jakąkolwiek akcję) Translation: Kamil Żyła, Politechnika Lubelska

[PRE:Relationship(A2B)] MODEL Przykłady Atzeni Ceri Fraternali Versand {selOIDs} (B) Brak linków wejściowych: zostaną wyświetlone wszystkie elementy, brak oznaczenia elementów domyślnych EntityB Atzeni Ceri Fraternali Versand sourceOID (A) {selOIDs} (B) Preselektor: zostaną wyświetlone wszystkie elementy, jako domyślne zostaną oznaczone obiekty powiązane relacją EntityB [PRE:Relationship(A2B)] Ceri Fraternali Nawet jeśli projektant wykorzystuje wyłącznie notację graficzną, model WebML jest definiowany przez XML DTD, stąd każdy projekt jest przechowywany jako plik XML. Selektor: zostaną wyświetlone wyłącznie elementy powiązane relacją, brak oznaczenia elementów domyślnych sourceOID (A) {selOIDs} (B) EntityB [Relationship(A2B)] Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska Hierarchical Unit MODEL {selOIDs} params { Entity (Relationship) [Selector]} Hierarchical units Publikuje listę elementów zorganizowaną hierarchicznie na podstawie relacji łączących publikowane instancje encji Pozwala użytkownikowi wybrać jeden element z każdego poziomu hierarchii Komponent określa zbiór encji oraz łączących je relacji (z opcjonalnymi selektorami na każdym poziomie) Parametry wejściowe wymagane do przetworzenia selektorów Wartości do porównania z atrybutami Identyfikatory uczestników relacji Parametry wyjściowe: OID obiektu wybranego przez użytkownika Translation: Kamil Żyła, Politechnika Lubelska

Hierarchical Unit: wychodzące linki MODEL Hierarchical Unit: wychodzące linki EntityA ParamA link a Tables link a Kitchen link b Korla KJD54 link c Chairs link a Stools link b Roy LKR34 link c OddVar JSQ87 link c Office link b Jess RLT45 link c ParamB EntityB link b ParB,ParC EntityC link c EntityA [selector1] EntityB (A2B) [selector2] EntityC (B2C) [selector3] Category SubCategory (Cat2SubCat) Product (SubCat2Prod) Każdy link jest renderowany jako kotwica na odpowiednim poziomie hierarchii Poziom, na którym znajduje się link zależy od typu parametrów linku Nawet jeśli projektant wykorzystuje wyłącznie notację graficzną, model WebML jest definiowany przez XML DTD, stąd każdy projekt jest przechowywany jako plik XML. Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska MODEL ScrollerUnit {selOIDs} params Entity [Selector(params)] Scroller units: Umożliwia podzielenie listy elementów na mniejsze porcje Publikuje linki do pierwszego, poprzedniego, następnego i ostatniego elementu zbioru Może być używany w połączeniu z komponentami data, index i multidata Liczba elementów w porcji = block factor Wejście: wartości do porównania z atrybutami, OID uczestników relacji Wyjście: zbiór identyfikatorów (możliwy 1) elementów w bieżącej porcji Musi mu zawsze towarzyszyć inny komponent publikujący treść (pewien zbiór obiektów) Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska MODEL Scroller + data unit Artist Dla obydwu komponentów jest wskazana ta sama encja Możliwy jest bezpośredni dostęp do komponentu data unit z innej strony aplikacji, wtedy komponent scroller jest automagicznie synchronizowany Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska MODEL Scroller + index Podział wyników wyszukiwania na strony t,y Album [Title contains t] [Year > y] Album Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska Strony MODEL Strona, to kontener zawierający jedną lub więcej informacji prezentowanych użytkownikowi w tym samym czasie Dozwolone jest zagnieżdżanie stron: strona może mieć podstrony Użytkownik przemieszcza się po stronach aplikacji Book Index Login Catalog Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska MODEL Linki bezkontekstowe Link bezkontekstowy jest linkiem pomiędzy stronami Nie przenosi kontekstu (informacji) Użytkownik może przechodzić ze strony na stronę poprzez kotwice (np. >>Books) HomePage Book Index Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska MODEL Strona domowa Strona domowa jest główną stroną aplikacji Jest to pierwsza strona, jaką powinien zobaczyć użytkownik Każdy widok stron musi zawierać stronę domową (oznaczona jako Home) HomePage Book Index H Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska „Strefy zrzutu” MODEL Books Store Page Authors Books Book Details Store Page L Authors Book Details Strona oznaczona jako „Strefa zrzutu” (Landmark),to strona widoczna globalnie. Użytkownik może do niej przejść z dowolnego miejsca widoku stron Jest ekwiwalentem linku bezkontekstowego automatycznie zdefiniowanego i poprowadzonego do „Strefy zrzutu” z pozostałych stron w widoku stron Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska Obszary MODEL Area Obszar jest zbiorem stron jednorodnych pod względem logicznym i realizujących pewną funkcjonalność Przykłady obszarów Sekcje tematyczne portali: Sport, Muzyka, Technologia, … Elementy systemu zarządzającego danymi: Zarządzanie Produktami, Zarządzanie Personelem, … Obszary mogą być zagnieżdżane, w związku z tym można definiować w ich ramach podobszary Każdy obszar powinien mieć stronę domyślną (DEFAULT PAGE) lub domyślny podobszar (DEFAULT SUB-AREA). Strona lub podobszar oznaczony jako domyślny jest przedstawiany użytkownikowi jako pierwszy w momencie przejścia do obszaru, który go zawiera Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska Widoki stron MODEL Widoki stron są to zbiory stron i/lub obszarów tworzących spójny obraz aplikacji Na podstawie jednego modelu danych może zostać zdefiniowanych wiele widoków stron Różne widoki stron mogą być dostępne dla różnych typów użytkowników i różnych typów urządzeń dostępowych Widoki stron mogą być Publiczne: każdy może mieć do nich dostęp Chronione (Prywatne): dostęp jest chroniony hasłem Translation: Kamil Żyła, Politechnika Lubelska

Acme: modele widoków stron Na podstawie jednego modelu danych zdefiniowano dwa widoki stron Klient: publiczny, dla klientów Administrator: chroniony, dla administratorów i osób zarządzających treścią Translation: Kamil Żyła, Politechnika Lubelska

Acme: widok stron „Klient” RUNNING CASE Acme: widok stron „Klient” Zadanie: zdefiniować sposób interakcji klienta z aplikacją Struktura Dwa główne obszary: produkty i zestawy produktów „Strefy zrzutu”: strona domowa i strona ze sklepami Customer Product area Combination area L L Home Page Store Page H,L L Translation: Kamil Żyła, Politechnika Lubelska

ACME: modelowanie stron RUNNING CASE ACME: modelowanie stron Q: Jakie strony są najbardziej potrzebne i najważniejsze? Home, Products, Combinations, Stores Product area Combination area AcmeHome Stores H Products Combinations L L L L Q: Jakie pozostałe strony są potrzebne? Product detail, Combination detail, ByPrice, BigImages,... BigImages Product Page Combination Detail By price Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska RUNNING CASE ACME: strona domowa Translation: Kamil Żyła, Politechnika Lubelska

Translation: Kamil Żyła, Politechnika Lubelska RUNNING CASE ACME: strona produktu Translation: Kamil Żyła, Politechnika Lubelska

ACME: strona zestawu produktów RUNNING CASE ACME: strona zestawu produktów Translation: Kamil Żyła, Politechnika Lubelska

ACME: publiczny widok stron Translation: Kamil Żyła, Politechnika Lubelska