Inspiracja , wiedza , realizacja
Jsystems

W przebudowie

Login



Java

Oracle

Linux

Android

PostgreSQL

Microsoft SQL Server

Wieloetapowe uzupełnianie obiektu podczas przepływu

Data dodania: Jun 27, 2016
Data aktualizacji: Jun 27, 2016

Czas dodać drugi przepływ, tym razem umożliwiający założenie konta w naszym sklepie internetowym. Trzeba będzie podać imię i nazwisko, dane kontaktowe, adres, dane do faktur etc. Mało przejrzyste i wygodne to będzie jeśli zrobimy to na jednej stronie. Lepiej rozbić to na kilka etapów. Osobna podstrona do imienia i nazwiska, osobna do danych kontaktowych, do adresu i osobna do danych do faktur. Przepływ będzie jeden, ale podczas jego trwania będziemy uzupełniali jeden obiekt.

Zaczynamy od edycji naszego pliku ****-servlet.xml, aby zarejestrować nowy przepływ. Nowe wpisy zaznaczylem na czerwono. Dodałem adres strony początkowej przepływu – konto.do, oraz nazwę i położenie pliku konfiguracyjnego kolejnego przepływu – konto-przeplyw.xml.




Przyjrzyjmy się naszemu plikowi konfiguracji przepływu.


Przepływ jest stosunkowo prosty, ponieważ ogranicza się do czterech następujących po sobie stanów widoku i na końcu jednego stanu akcji zapisującego nowe konto do bazy.



Podczas tego przepływu będziemy uzupełniać obiekt klasy Konto ( co widać w deklaracji w linii 10). Za chwilę do niego wrócimy, teraz przyjrzyjmy się kolejnym przejściom tego przepływu. Na każdym z widoków będą trzy przyciski – dalej, wstecz, anuluj. Pierwszy powoduje przejście do następnego kroku, drugi do poprzedniego a trzeci anuluje cały przepływ i powraca do strony startowej. Wszystkie stany widoku mają zadeklarowany parametr model – będziemy uzupełniać obiekt, więc stany te muszą mieć do niego dostęp. Zauważ że w każdym kolejnym stanie mamy deklarację taką :

<transition on="anuluj" to="start"/>


Deklarowanie przejścia anulującego w każdym kroku jest co najmniej męczące. Co gdybyśmy np. chcieli zmienić stan do którego przechodzi przepływ po kliknięciu „anuluj”? W dalszych krokach zadeklarujemy przejście globalne i nie będziemy musieli deklarować tego przejścia w każdym stanie.

Przepływ składa się z trzech formularzy i jednego widoku podsumowującego. W pierwszym formularzu uzupełniamy dane kontaktowe i informacje o koncie, w drugim adres dostawy, w trzecim dane do faktury. W widoku podsumowującym widzimy wszystkie dane które uzupełnialiśmy i możemy ewentualnie wrócić i coś poprawić.

Przez wszystkie etapy uzupełniamy obiekt klasy konto, więc przyjrzyjmy się tejże klasie.



Oczywiście w klasie tej są również gettery i settery do tych pól. Widzimy tutaj obiekty klas Adres i DaneDoFaktury, więc zobaczmy również ich zawartość. Klasa Adres:



Klasa DaneDoFaktury:



Zauważ że przy polach będących obiektami mamy użycie domyslnego konstruktora. Przy typach prostych tego nie robię. Musi tak być, ponieważ Spring tworzy nowy obiekt klasy którą zadeklarowaliśmy jako zmienną przepływu, ale już nie robi tego dla „podobiektów”. Jeśli sami nie zaincjalizujemy ich, dostaniemy błąd podczas próby dostępu do ich pól. Przy okazji zobaczmy też deklarację metody zapisz którą wywołuję w stanie „zapisz” naszego przepływu. Jak widać jest to zaślepka – nie zajmujemy się tutaj integracją Springa z bazami danych.



W pliku konfiguracji przepływu do tego DAO odwołuję się tak:



a to oznacza że musimy mieć jeszcze zadeklarowany bean do tej klasy w pliku *****-servlet.xml:



Zobaczmy teraz warstwę widoku, czyli nasze formularze i stronę podsumowującą. Formularz numer 1 (czyli stan step1) służy do uzupełniania danych o koncie i informacji kontaktowych. Tradycyjne pola do wprowadzania danych służące uzupełnianiu bezpośrednich pól obiektu klasy Konto i guziki o których wspominałem wcześniej:




Kolejny krok i drugi formularz to uzupełnianie danych do dostawy zakupów:



Przyjrzyj się dobrze parametrom „path”... W taki właśnie sposób odwołujemy się do podobiektów i ich pól. Krok trzeci to uzupełnianie danych do faktury. Widzimy tutaj odwołania do jeszcze bardziej zagnieżdżonych podobiektów.



No i na koniec nasza strona podsumowująca:



Tutaj standardowy sposób wyświetlania danych z obiektu na zasadzie „${obiekt.pole}”. Wyświetlamy dane uzupełniane we wszystkich etapach. Możemy tak zrobić ponieważ cały czas pracujemy na jednym obiekcie klasy Konto zainicjalizowanym na początku przepływu. Odwołujemy się do pól, podobiektów, pól podobiektów dokładnie tak jak przy np. servletach – w końcu robimy to z użyciem tagów JSTL. A teraz przyjrzyj się liniom 48-52. Guziki jak wczesniej, ale przecież wiemy że to jest strona wyświetlająca podsumowanie, nie ma tu formularza. Co więc robią tutaj tagi „<form:form>” ? Otóż bez nich nie działałyby nasze przyciski, ponieważ zatwierdzają one formularze! Inaczej musielibyśmy je zamienić na linki. Zobaczmy teraz jak to wszystko razem działa ;)


Krok 1:



Krok 2:


Krok 3:



Taka mała ciekawostka przy okazji. Przyjrzyj się paskowi adresu, a właściwie to wartości w parametrze execution w poszczególnych krokach przepływu.


Czas na stronę podsumowującą: