Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

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

Podobne prezentacje


Prezentacja na temat: "3. Hipertekst Kurs WebML Copyright © Politecnico di Milano March 2003 Translation: Kamil Żyła, Politechnika Lubelska."— Zapis prezentacji:

1 3. Hipertekst Kurs WebML Copyright © Politecnico di Milano March 2003 Translation: Kamil Żyła, Politechnika Lubelska

2 Model hipertekstowy: istota 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 Cele MODEL Translation: Kamil Żyła, Politechnika Lubelska

3 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 Model hipertekstowy: pytania MODEL Translation: Kamil Żyła, Politechnika Lubelska

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

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

6 Komponenty danych 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 MODEL Translation: Kamil Żyła, Politechnika Lubelska

7 Wejścia i wyjścia komponentu 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 unitX entity [selector (par 1,.., parN)] WE WY MODEL Translation: Kamil Żyła, Politechnika Lubelska

8 Nawigacja: linki kontekstowe 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) Author MODEL source unittarget unit Translation: Kamil Żyła, Politechnika Lubelska

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

10 Parametry linków 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 Author MODEL param Translation: Kamil Żyła, Politechnika Lubelska

11 Domyślne parametry linku Author Book [Author2Book] 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 MODEL Translation: Kamil Żyła, Politechnika Lubelska

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

13 Linki automatyczne 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) Author MODEL source unittarget unit A Translation: Kamil Żyła, Politechnika Lubelska

14 Linki transportowe Author Book [Author2Book] 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 MODEL source unittarget unit Translation: Kamil Żyła, Politechnika Lubelska

15 DataUnit Data unit WYŁĄCZNIE JEDNEJ INSTANCJI 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 Entity [selector(params)] params OID MODEL Translation: Kamil Żyła, Politechnika Lubelska

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

17 Przykłady Brak selektora i linków przychodzących: niepoprawny komponent! Parametr wejściowy: OID powiązanego obiektu: zostanie pokazany powiązany relacją obiekt EntityB [Relationship(A2B)] A.oid B.oid EntityB MODEL EntityB [B.attr = param1] param1 B.oid Parametr wejściowy: wartość do wykorzystania przez selektor: zostanie pokazany obiekt spełniający warunek wyboru p1 Translation: Kamil Żyła, Politechnika Lubelska

18 IndexUnit Index unit: (ZBIÓR OBIEKTÓW) 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 Entity [Selector(params)] params MODEL selectedOID Translation: Kamil Żyła, Politechnika Lubelska

19 Przykłady 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ą EntityB [Relationship(A2B)] sourceOID (A) selOID (B) EntityB selOID (B) MODEL EntityB [B.attr = Param1] Param1 selOID (B) Parametr wejściowy: wartość do porównania z atrybutem: zostaną wyświetlone obiekty spełniające warunek Translation: Kamil Żyła, Politechnika Lubelska

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

21 MultiDataUnit MODEL Multidata unit (ZBIÓR OBIEKTÓW) 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 Entity [Selector(params)] params{OIDs} Translation: Kamil Żyła, Politechnika Lubelska

22 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 MODEL Translation: Kamil Żyła, Politechnika Lubelska

23 Entry Unit (Formularz) 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 oraz przycisku submit MODEL params Translation: Kamil Żyła, Politechnika Lubelska

24 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 MODEL Translation: Kamil Żyła, Politechnika Lubelska

25 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 MODEL EntryUnit S1S2 S3 PersonField AddrField Artist FirstName PF.S1 LastName PF.S2 NickName PF.S3 Resulting field Bruce Springsteen the boss PersonField Translation: Kamil Żyła, Politechnika Lubelska

26 Multichoice Unit Multichoice unit (ZBIÓR OBIEKTÓW) 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ę) Entity [Selector(params)] [Preselector(params)] params MODEL {selOIDs} Translation: Kamil Żyła, Politechnika Lubelska

27 Przykłady Brak linków wejściowych: zostaną wyświetlone wszystkie elementy, brak oznaczenia elementów domyślnych Preselektor: zostaną wyświetlone wszystkie elementy, jako domyślne zostaną oznaczone obiekty powiązane relacją EntityB [PRE:Relationship(A2B)] sourceOID (A) {selOIDs} (B) EntityB {selOIDs} (B) MODEL EntityB [Relationship(A2B)] sourceOID (A) {selOIDs} (B) Selektor: zostaną wyświetlone wyłącznie elementy powiązane relacją, brak oznaczenia elementów domyślnych Atzeni Ceri Fraternali Versand Ceri Fraternali Atzeni Ceri Fraternali Versand Translation: Kamil Żyła, Politechnika Lubelska

28 Hierarchical Unit 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 { Entity (Relationship) [Selector]} params MODEL {selOIDs} Translation: Kamil Żyła, Politechnika Lubelska

29 Hierarchical Unit: wychodzące linki 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 EntityA [selector1] EntityB (A2B) [selector2] EntityC (B2C) [selector3] MODEL ParamA ParamB ParB,ParC 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 link a link b link c Category SubCategory (Cat2SubCat) Product (SubCat2Prod) EntityA EntityB EntityC Translation: Kamil Żyła, Politechnika Lubelska

30 ScrollerUnit 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) MODEL Entity [Selector(params)] params {selOIDs} Translation: Kamil Żyła, Politechnika Lubelska

31 Scroller + data unit 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 Artist MODEL Translation: Kamil Żyła, Politechnika Lubelska

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

33 Strony 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 Login Book IndexCatalog MODEL Translation: Kamil Żyła, Politechnika Lubelska

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

35 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 H Book Index MODEL Translation: Kamil Żyła, Politechnika Lubelska

36 Strefy zrzutu 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 Authors Books L Book Details Store Page Authors Books Book Details Store Page MODEL Translation: Kamil Żyła, Politechnika Lubelska

37 Obszary 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 MODEL Area Translation: Kamil Żyła, Politechnika Lubelska

38 Widoki stron 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 MODEL Translation: Kamil Żyła, Politechnika Lubelska

39 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

40 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 Store Page Combination area RUNNING CASE Home Page L L H,LL Translation: Kamil Żyła, Politechnika Lubelska

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

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

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

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

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


Pobierz ppt "3. Hipertekst Kurs WebML Copyright © Politecnico di Milano March 2003 Translation: Kamil Żyła, Politechnika Lubelska."

Podobne prezentacje


Reklamy Google