Projektowanie aplikacji internetowych

Prezentacja na temat: "Projektowanie aplikacji internetowych"— Zapis prezentacji:

1 Projektowanie aplikacji internetowych
Wykład 4-5 WebML Model hipertekstu Przykład

2 WebML (1) WebML (Web Modeling Language, 1999 r.) – notacja (komponenty, modele), metodyka tworzenia aplikacji internetowych zarządzających dużymi ilościami danych. WebML to graficzna notacja do określania treści, zależności i nawigacji pomiędzy stronami aplikacji internetowej. Składa się z: modelu danych, modelu hipertekstu, modelu prezentacji. Postrzeganie modeli jako wysokopoziomowa graficzna reprezentacja aplikacji internetowej w architekturze MVC.

3 Cykl życia aplikacji internetowej wg metodyki WebML

4 WebML - model hipertekstu

5 WebML - model hipertekstu (1)
Model hipertekstu - podział aplikacji internetowej na widoki witryny, obszary, strony, rozmieszczenie treści i funkcjonalności w ich ramach, zdefiniowanie przepływu sterowania pomiędzy elementami aplikacji. Produkty specyfikacji wymagań, Model danych Wejście Model na podstawie którego można wygenerować aplikację Wyjście

6 WebML - model hipertekstu (2)
Strona = m. danych + m. kompozycji + m. nawigacji + m. prezentacji komponenty, strony, linki encje, relacje widoki stron style m. nawigacji + m. kompozycji model danych m. stron aplikacji m. prezentacji

7 WebML - model hipertekstu (3)
Do budowy modelu kompozycji wykorzystuje się komponenty, zawierające: parametry wejściowe; parametry wyjściowe; nazwy encji, z którą jest połączony komponent; warunki ograniczających zbiór instancji encji. Podstawowe grupy komponentów: komponenty prezentacji danych (umieszczane na stronach aplikacji); komponenty operacji (rozmieszczane poza stronami aplikacji); komponenty hybrydowe (umieszczane na lub poza stronami aplikacji); komponenty serwisów (umieszczane w widoku serwisu).

8 WebML - model hipertekstu (4)
Model nawigacji definiuje połączenia pomiędzy powiązanymi ze sobą komponentami i stronami (linki). Typy linków: link (ang. Normal Link) – nawigacja i aktywacji komponentu, może przenosić wartości; link OK (ang. OK Link) – inicjowanie akcji, gdy operacja zakończy się powodzeniem; link KO (ang. KO Link) – inicjowanie akcji, gdy operacja zakończy się niepowodzeniem; link automatyczny (ang. Automatic Link) – automatyczne inicjowanie domyślnej akcji; link transportowy (ang. Transport Link) – przekazywanie wartości pomiędzy komponentami (niewidoczny dla użytkownika aplikacji).

9 WebML - model hipertekstu (5)
Typy struktur definiujące elementy modelu hipertekstu: Widok witryny (ang. Site View) – grupuje elementy modelu hipertekstu (obszary, strony). Widok serwisów (ang. Service View) – grupuje komponenty operacji, hybrydowe i serwisów (nie może zawierać obszarów i stron). Obszar (ang. Area) – grupuje elementy o pewnej powiązanej tematycznie funkcjonalności (część widoku witryny). Strona (ang. Page) – grupujące elementy modelu hipertekstu (pojedyncza strona) - może być składową obszaru lub widoku witryny, nie może zawierać obszarów, widoków witryny, widoków serwisów. Transakcja (ang. Transaction) – grupujące komponenty symbolizujące operacje (sekwencja operacji), które muszą być całościowo wykonane lub wcale.

10 WebML - model hipertekstu (6)
Organizacja modelu hipertekstu Widok witryny

11 STRONY (PAGES) Strony (1)
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 Strona główna Indeks produktów Katalog dostawców

12 Strony (2) Symbolika określająca widoczność stron:
H (ang. Home Page) – strona domowa, pierwsza strona prezentowana po wejściu do widoku witryny. D (ang. DefaultPage) – strona domyślna obszaru, pierwsza strona prezentowana po przejściu do obszaru. L (ang. LandmarkPage) – „strefa zrzutu”, strona osiągalna ze wszystkich pozostałych stron (z widoku witryny lub obszaru).

13 OBSZARY, STREFY (AREAS)
Obszar jest zbiorem stron jednorodnych pod względem logicznym i realizujących pewną funkcjonalność Przykłady obszarów: Sekcje tematyczne portali: Wiadomości, Sport, Giełda, Muzyka, itp. Elementy systemu zarządzającego danymi: Zarządzanie Produktami, Zarządzanie Personelem, itp. Wiadomości Sport Giełda Muzyka Obszary mogą być zagnieżdżane Każdy obszar powinien mieć stronę domyślną (DEFAULT PAGE) lub domyślny podobszar (DEFAULT SUB-AREA). Przestrzenie pozwalają nadać widokowi strony charakter hierarchiczny

14 1. Identyfikacja obszarów:
Obszary (2) 1. Identyfikacja obszarów: ponowna analiza wymagań funkcjonalnych i mapy aplikacji Określenie widoczności obszarów: Obszar domyślny - użytkownik przechodzi do zawierającego go widoku stron Obszar „strefa zrzutu” (landmark) - przechodzenie z dowolnego miejsca widoku stron, w którym się zawiera Obszar wewnętrzny - przechodzenie tylko przy pomocy linków Przykładowy obszar Artists

15 Obszary (3) Przykładowe obszary Oznaczenia:
L - Landmark (strefa zrzutu), miejsce dostępne bezpośrednio z każdego innego miejsca serwisu D - Default, strona standardowo otwierana przy odwołaniu do danego obszaru Pasek nawigacyjny z odnośnikami do różnych obszarów witryny

16 WIDOKI STRON (Site Views)
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 Prywatne (chronione): dostęp jest chroniony hasłem

17 Przykładowe widoki stron: klient i administrator (jeden model danych)
Widok stron: klient Widok stron: administrator

18 Zadanie: zdefiniować sposób interakcji klienta z aplikacją Struktura:
Widoki stron (3) 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 Stores Page H,L L

19 H L L L L Widoki stron (4) Modelowanie stron
Jakie strony są najbardziej potrzebne i najważniejsze? Home, Products, Combinations, Stores Product area Combination area Home Stores H Products Combinations L L L L Jakie pozostałe strony są potrzebne? Product details, ByPrice, BigImages, Combination detail ... BigImages Product details Combination detail ByPrice

20 Widoki stron (5) Strona domowa (Home)

21 Widoki stron (6) Strona produktów

22 Widoki stron (7) Strona zestawu produktów

23 Widoki stron (8)

24 Elementy modelu kompozycji – podstawowe komponenty danych (1)
Komponenty WebML są niepodzielnymi cząstkami zawartości przedstawiającymi na stronie informacje, której struktura jest opisana w modelu danych. WebML definiuje kilka typów komponentów prezentujących informacje. Do podstawowych typów komponentów zaliczamy: komponent danych – Data Unit, komponent danych iterowany – Multi Data Unit, komponent indeksu – Index Unit (różne warianty), komponent wprowadzania danych – Entry Unit, komponent przewijania – Scroller Unit, komponent wyboru pozycji – Multi Choice Index Unit, komponent definiowania poziomów pozycji (indeksu hierarchicznego) – Hierarchical Index Unit Komponent jest powiązany z encją, która dostarcza dane prezentowane przez komponent. jednostkaX pojemnik

25 Elementy modelu kompozycji – podstawowe komponenty danych (2)
DATA UNIT INDEX UNIT MULTI DATA UNIT Treść (dane): instancje encji Selektor: warunek wyboru instancji encji entity [Selector] entity [Selector] entity [Selector] ENTRY UNIT SCROLLER UNIT MULTICHOICE HIERARCHICAL entity [Selector] entity [Selector] entity [Selector]

26 Elementy modelu kompozycji – podstawowe komponenty danych (3)
DATA UNIT INDEX UNIT MULTI DATA UNIT Author first name:XXX last name:YYY photo: Index of Authors S. Ceri P. Fraternali O.Versand All Authors ENTRY UNIT SCROLLER UNIT 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

27 Elementy modelu kompozycji – podstawowe komponenty danych (4)
Reprezentacja graficzna komponentów danych w WebRatio

28 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

29 Hiperłącza (linki) kontekstowe
Hiperłącza kontekstowe (Contextual link) Autor Jednostka źródłowa docelowa 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)

30 Połączenia komponentów
Przykładowe połączenie komponentów Author first name:James last name:Joyce photo: [OID=p1] Book [author2book(p2)] [OID=p3] Title:Ulysses Price:23$ Cover: Którego autora książki? Która książka? Books of YYY Ulysses The Dubliners Portrait... p1 p2 p3

31 Parametry hiperłączy Książka [Autor2Książka(parametry)] Autor parametry 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

32 Parametry domyślne hiperłączy
Książka [Autor2Książka] Autor Gdziekolwiek to możliwe, parametry linków są wnioskowane na podstawie diagramu i nie wymagają jawnej specyfikacji Diagramy stają się bardziej czytelne i proste

33 Domyślne selektory Książka [Autor2Książka] Autor Książka Gdziekolwiek to możliwe, selektory i ich parametry są wnioskowane na podstawie modelu i nie wymagają jawnej specyfikacji.

34 Hiperłącza automatyczne
Author Jednostka źródłowa docelowa A Hiperłącze automatyczne, 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

35 Hiperłącza transportowe
Autor Książka [Autor2Książka] Jednostka źródłowa Jednostka docelowa Hiperłącze transportowe 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 reprezentująca link

36 Komponent DATA UNIT (1) Entity [selector(params)] params OID 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

37 Komponent DATA UNIT (2) Informacje o jednym specyficznym produkcie Produkt

38 Brak selektora i linków przychodzących: niepoprawny komponent!
Komponent DATA UNIT (3) PRZYKŁADY: Brak selektora i linków przychodzących: niepoprawny komponent! Parametr wejściowy: OID powiązanego relacją obiektu źródłowego: zostanie pokazany powiązany relacją obiekt Parametr wejściowy: wartość do wykorzystania przez selektor, do porównania z atrybutem: zostanie pokazany obiekt spełniający warunek wyboru EntityB A.oid B.oid EntityB [Relationship(A2B)] param1 B.oid EntityB [B.attr = param1]

39 Komponent INDEX UNIT (1)
params selectedOID 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

40 Komponent INDEX UNIT (2)
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ą Parametr wejściowy: wartość do porównania z atrybutem: zostaną wyświetlone obiekty spełniające warunek EntityB selOID (B) sourceOID (A) selOID (B) EntityB [Relationship(A2B)] Param1 selOID (B) EntityB [B.attr = Param1]

41 Komponent INDEX UNIT (3)
selOID Produkt Użytkownikowi zostaje wyświetlona lista wszystkich produktów Użytkownik może wyświetlić dalsze informacje po kliknięciu na element listy

42 Komponent MULTI DATA UNIT
params {OIDs} Entity [selector(params)] Multi data 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

43 Multi Data Unit vs Index Unit
Multi Data Unit Index Unit Multi Data Unit czy Index Unit? Listy (Indexes) mogą być użyte jako mechanizm dostępu do szczegółowych informacji o obiekcie Multi data 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 Multi data units mają na wyjściu identyfikatory (OID) wszystkich wyświetlonych obiektów

44 Komponent 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

45 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ć.

46 Komponent MULTICHOICE INDEX UNIT (1)
Entity [Selector(params)] [Preselector(params)] params {selOIDs} Multichoice index 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ę)

47 Komponent MULTICHOICE INDEX UNIT (2)
EntityB [PRE:Relationship(A2B)] sourceOID (A) {selOIDs} (B) [Relationship(A2B)] sourceOID (A) {selOIDs} (B) Atzeni Ceri Fraternali Versand 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ą Selektor: zostaną wyświetlone wyłącznie elementy powiązane relacją, brak oznaczenia elementów domyślnych

48 Komponent HIERARCHICAL INDEX UNIT (1)
{ Entity (Relationship) [Selector]} params {selOIDs} Hierarchical Index Units: publikuje listę elementów zorganizowaną hierarchicznie na podstawie relacji łączących publikowane instancje encji oraz 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

49 Komponent HIERARCHICAL INDEX UNIT (2)
Wychodzące linki 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 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

50 Komponent SCROLLER UNIT (1)
params {selOIDs} 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 Parametry wejściowe: wartości do porównania z atrybutami, OID uczestników relacji Parametr wyjściowy: 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)

51 Komponent SCROLLER UNIT (2)
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 automatycznie synchronizowany

52 Komponent SCROLLER UNIT (3)
Scroller + index t,y Album [Title contains t] [Year > y] Album Podział wyników wyszukiwania na strony

53 WebML - model hipertekstu
Przykład cd.

54 WebRatio – aplikacja bazodanowa
W celu stworzenia aplikacji internetowej korzystającej z bazy danych należy: stworzyć model danych, tworzyć bazę na podstawie modelu danych, stworzyć stronę zapewniającą dostęp do danych. Przykład: Stworzenie strony umożliwiającej wyświetlanie i dodawanie pracowników do bazy danych

55 WebRatio – tworzenie strony (1)
Tworzenie widoku strony (Site View) – nadawanie nazwy. Po zatwierdzeniu przechodzimy do modelu hipertekstowego. 2 3 1

56 WebRatio – tworzenie strony (2)
Dodajemy stronę do zarządzania pracownikami firmy „Zarządzanie pracownikami firmy”. Wybieramy komponent Page i klikamy na obszarze roboczym. 1 2 Aby wypisać wszystkich pracowników z bazy należy dodać do strony jednostkę Index Unit. 1 2

57 WebRatio – tworzenie strony (3)
Aby jednostka Index Unit wyświetliła dane z tabeli Pracownicy należy ustawić kilka parametrów w oknie Properties: Entity, to wybór Encji z której będą wyświetlane dane. Wybieramy tabelę Pracownicy. Display Attributes, to wybranie atrybutów, które chcemy wyświetlić. Wybieramy imie i nazwisko. Sort Attributes, to sortowanie wyników wg wybranych kryteriów. Wybieramy, np ascending dla nazwiska.

58 WebRatio – tworzenie strony (4)
Dodawanie danych (pracowników do bazy). Obiekt, który służy do wprowadzania danych to Entry Unit: Klikamy na Entry Unit i ustawiamy go na stronie, wpisujemy nazwę. 1 2 3

59 WebRatio – tworzenie strony (5)
Dodajmy dwa pola nazywając: imie i nazwisko. Pola dodajemy poprzez kliknięcie na komponencie i wybranie opcji Add Field. W oknie Properties ustawiamy dla zaznaczonych pól imie i nazwisko typy danych String. 4 1 2 3 5 Formularz do dodawania pracowników został stworzony

60 WebRatio – tworzenie strony (6)
Jednostka, która doda dane do bazy to Create Unit. Aby dodać jednostkę Create Unit należy: kliknąć na tym polu (ikonce) i ustawiamy ją poza obszarem naszej strony w oknie Properties, w polu Entity wybieramy tabelę do której będą dodawane dane czyli Pracownicy. 3 5 1 2 4

61 WebRatio – tworzenie strony (7)
Teraz należy połączyć obiekt Entry Unit z Create Unit, dzięki czemu dane z formularza zostaną przekazane do bazy: Należy wybrać Link, kliknąć na Entry Unit, a następnie na Create Unit. 1 2 3

62 WebRatio – tworzenie strony (8)
Po stworzeniu połączenia należy wybrać parametry, które zostaną przekazane: zaznaczamy link, w oknie Properties wybieramy zakładkę Coupling, odznaczamy pole Enable Default Coupling w kolumnie Source wybieramy z listy pola, dopasowując do pół w kolumnie Target. 1 2

63 WebRatio – tworzenie strony (9)
Do jednostek związanych z zarządzaniem bazą danych możemy podpiąć dwa linki określające status wykonanej operacji: wybierając OK Link, określimy gdzie mamy przejść po poprawnym wykonaniu operacji, KO Link przekieruje nas w momencie wystąpienia błędu podczas operacji.

64 WebRatio – generowanie projektu i uruchomienie aplikacji
Należy teraz wygenerować projekt Generate Full Web Project. Uruchomić aplikację w przeglądarce:

65 WebRatio – aplikacja bazodanowa
Przykład (kontynuacja): Stworzenie strony umożliwiającej edycję i usuwanie pracowników z bazy danych

66 WebRatio – usuwanie danych (1)
Usuwanie danych z tabeli Pracownicy. Należy dodać jednostkę do usuwania danych - Delete Unit i w oknie Properties wskazać encję „Pracownicy”. 3 1 2 4 5

67 WebRatio – usuwanie danych (2)
Przekazanie oid pracownika, który będzie usuwany: Należy połączyć linkiem jednostkę Index Unit (Pracownicy firmy) z Delete Unit. Nadać jakąś nazwę linkowi, np. „Usuń”. Przekazywanie zostało wybrane automatycznie, co widać w oknie Properties (Coupling).

68 WebRatio – generowanie projektu i uruchomienie aplikacji
Należy teraz wygenerować projekt Generate Full Web Project. Uruchomić aplikację w przeglądarce:

69 WebRatio - edycja danych (1)
Edycja wprowadzonych danych Do edycji danych wykorzystamy jednostkę Entry Unit nazwaną „Dodawanie pracowników” Zmienimy jej nazwę na „Dodawanie/edycja pracowników”. Po jej zaznaczeniu, w oknie Outline klikamy na polach (imię i nazwisko) i zaznaczamy opcję Preloaded. 1 3 2

70 WebRatio - edycja danych (2)
Aby wypełnić pola dodajemy jednostkę Selector Unit (przekazujemy oid Pracownicy). Możliwość edycji danych z tabeli Pracownicy wymaga określenia encji. W oknie Properties jednostki Selector Unit, w polu Entity, wybieramy encję „Pracownicy”. 1 2 3 4 5

71 WebRatio - edycja danych (2)
Po dodaniu selektora należy dodać warunek (wyświetlania) - klikamy na jednostce Selector Unit i wybieramy Add - Key Condition. 1 2 3

72 WebRatio - edycja danych (3)
Index Unit (Pracownicy firmy) łączymy linkiem z Selector Unit. Następnie łączymy Selector Unit z Entry Unit (Dodawania/edycja pracowników). Ustawiamy opcję Coupling, w zakładce Coupling dopasowujemy odpowiednie pola. 1 2 3 5 4

73 WebRatio - edycja danych (4)
Następnie należy ustalić jakie parametry chcemy przekazać dalej. Określić czy dodajemy dane, czy edytujemy. Przekażemy dalej wartość oid, za pomocą której sprawdzimy jaką operację wykonujemy. Będzie też wykorzytana przy edycji. Jednostka, która pozwoli nam sprawdzić jaką operację wykonujemy jest Is Not Null Unit (sprawdzenie czy przekazany do niej parametr jest Nullem; przy pomocy linków OK oraz KO następuje wybranie odpowiedniej akcji). 1 2 3

74 WebRatio - edycja danych (5)
Łączymy linkiem Entry Unit (Dodawania/edycja pracowników) z Is Not Null Unit W zakładce Coupling ustawiamy parametr, który będzie sprawdzany, wybieramy oid. Konieczne jest przekazanie danych z Entry Unit poza jednostkę Is Not Null Unit, w zakładce Passing, zaznaczamy wszystkie elementy. 1 3 2

75 WebRatio - edycja danych (6)
Dodanie jednostki do modyfikacji danych - „Modify Unit” W oknie Properties jednostki Modify Unit, wskazać encję „Pracownicy” w polu Entity. 1 3 2 4 5

76 WebRatio - edycja danych (7)
Za pomocą linku OK Link łączymy Is Not Null Unit z Modify Unit (jest wykonywany, gdy przekazaliśmy wartość niepustą) Za pomocą linku KO Link łączymy Is Not Null z Create Unit (jest wykonywany, gdy przekazaliśmy wartość pustą). Dla linku OK Link ustawiamy parametry Coupling oraz dodatkowo przekazujemy oid pracownika, którego chcemy edytować. 2 1 3

77 WebRatio - edycja danych (7)
Dla linku KO Link ustawiamy parametry Coupling 1 2

78 WebRatio - generowanie projektu i uruchomienie aplikacji
Należy teraz wygenerować projekt Generate Full Web Project. Uruchomić aplikację w przeglądarce: