Standard tworzenia aplikacji JSF
-
Upload
proskar -
Category
Technology
-
view
278 -
download
1
Transcript of Standard tworzenia aplikacji JSF
www.proskar.pl
JSF – standard tworzenia
aplikacji
Warsztaty PROSKAR
Plan 1. Wstęp
2. Struktura aplikacji
3. Konwencja tworzenia kluczy komunikatów
4. Korzystanie z mechanizmu @FacesMessage
5. Tworzenie formularzy
6. Walidacja danych
7. Jak implementować komponenty @Named?
8. Ajax
9. Uwagi
10. Podsumowanie
www.proskar.pl 2/36
Wstęp
• Definicja
– Framework upraszczający tworzenie
interfejsu użytkownika aplikacji JEE
– Architektura MVC(Model – View - Controller)
– Część specyfikacji JEE
– Umożliwia tworzenie dużych aplikacji WWW
– Umożliwia zmiany w warstwie widoku
aplikacji bez wpływu na niższe warstwy
www.proskar.pl 3/36
– Zawiera biblioteki znaczników JSP
– Umożliwia wykonywanie metod
zaimplementowanych w Javie bezpośrednio
na stronie WWW, dzięki Managed Beanom
lub Beanom CDI.
www.proskar.pl 4/36
Struktura aplikacji
• Struktura katalogów
– WEB-INF – pliki konfiguracyjne
– include – dokumenty częściowe
.xhtml
– sections – definicje sekcji
(header, menu itd..)
www.proskar.pl 5/36
– templates – szablony aplikacji
– resources – zasoby używane przy
budowaniu widoków (css, js itd)
– views – widoki aplikacji
www.proskar.pl 6/36
• Podział na pakiety warstwy Java
– Pakiet główny aplikacji
• Nazwa obszaru
– cdi – bean’y zarządzane
– converter - konwertery
– validator - walidatory
– viewmodel – modele widoku
• Common – wspólne komponenty zarzadzane,
konwertery itd.
• Util – klasy narzędziowe
www.proskar.pl 7/36
Konfiguracja aplikacji
• Web.xml
www.proskar.pl 8/36
• W pliku web.xml konfiguruje się
– Servlet frontowy
– Stronę startową
– Strony błędu gdy zostanie wyrzucony konkretny wyjątek
– Długość sesji
– Etap projektu
www.proskar.pl 9/36
– Faces-config.xml
www.proskar.pl 10/36
• W pliku faces-config.xml konfiguruje się
– Reguły nawigacyjne
– Zasoby
– Managed beany
– Konwertery
– Walidatory
www.proskar.pl 11/36
Konwencja tworzenia kluczy
komunikatów
• Elementy wspólne definiujemy na samej górze pliku
• Nazwy pól definiujemy zgodnie z konwencja
– model.nazwaKlasy.nazwaPola = wartosc
• Etykiety w widokach definiujemy zgodnie z konwencja
– View.nazwaWidoku.nazwaEtykiety = wartość
www.proskar.pl 12/36
• Grupowanie komunikatów
– Według podziału aplikacji na obszary funkcjonalne
– Wyróżnione tytułem i oddzielone od siebie pojedynczą pusta linią
• Enumeracje wykorzystywane w widokach
– Zawierają pole etykieta zawierające klucz do wartości z pliku lokalizacyjnego
www.proskar.pl 13/36
www.proskar.pl 14/36
Przykład pliku messages.properties utworzony zgodnie
z konwencją
www.proskar.pl 15/36
Przykładowa implementacja enumeratora zgodnie
z powyższą konwencją
www.proskar.pl 16/36
• Odbywa się pomiędzy stronami aplikacji
• Reguły nawigacyjne zdefiniowane są w
pliku faces-config.xml.
• Dzięki temu nie trzeba operować na
pełnych ścieżkach do plików tylko na
podanej nazwie
Nawigacja
www.proskar.pl 17/36
Przykład reguł nawigacji w pliku faces-config.xml
Przykład kodu xhtml korzystający z reguł nawigacji
• Wyświetlanie komunikatów o wykonanych przez użytkownika działaniach
• Przykład
– Dodać w widoku na którym ma zostać wyświetlony komunikat
– Z poziomu metody komponentu JSF wywołać metodę
www.proskar.pl 18/36
Korzystanie z mechanizmu
@FacesMessage
• Rodzaje metod wysyłających komunikat do komponentu comp:message
– addFlashGlobalInfo
• Wykorzystywana w przypadku przeładowania z przekierowaniem (<redirect/> w regule nawigacji)
– addGlobalInfo
• Wykorzystywane w przypadku przeładowania bez przekierowania oraz żądań AJAX.
www.proskar.pl 19/36
www.proskar.pl 20/36
Przykładowe działanie mechanizmu @FacesMessage
• Z czego korzystać tworząc formularze?
– Primefaces
– jQuery
– Nie należy używać JavaScript ze względu ma jego zależności od przeglądarki
– Należy korzystać ze stylów zdefiniowanych w globalnych arkuszach
www.proskar.pl 21/36
Tworzenie formularzy
– Należy korzystać ze zdefiniowanych szablonów strony (nagłówek, menu, content, stopka)
– Treść formularza powinna znajdować się w ramach elementu content
– Dobrym wyjściem jest tworzenie komponentów kompozytowych (composite component)
• Opakowuje standardowe znaczniki JSF do budowy formularzy
• Polega na wydzieleniu fragmentu kodu i używaniu go w różnych miejscach
www.proskar.pl 22/36
www.proskar.pl 23/36
Przykładowa implementacja komponentu kompozytowego
– Adnotacje standardu JSR-303 oraz jego
rozszerzenia
– Adnotacje biblioteki Hibernate Validator
– Niestandardowe komponenty walidujące JSF
www.proskar.pl 24/36
Walidacja danych
• Walidacja z użyciem standardu JSR-303
oraz Hibernate Validator
– Adnotacje
• @NotNull – wartość nie może być null’em
• @Min – minimalna wartość dla danego pola
• @Size – definiuję długość danych znajdujących
się w danym polu np. List, String itd..
www.proskar.pl 25/36
– Zmiana komunikatu walidującego
• Komunikaty należy umieścić w pliku
ValidationMessages.properties
• W adnotacji definiującej wymagania dla danego
pola należy umieścić klucz komunikatu w
atrybucie message
www.proskar.pl 26/36
• Walidacja za pomocą komponentu
@FacesValidator
– Stosować gdy walidacja za pomocą
adnotacji nie jest możliwa
• Przykład: Należy sprawdzić czy istnieje w bazie
rekord o podanej wartości w jednej z kolumn
www.proskar.pl 27/36
– Przykładowa implementacja
www.proskar.pl 28/36
– Podłączenie walidatora do komponentu
XHTML
www.proskar.pl 29/36
• Sterowanie widokiem
– Wyświetlanie komunikatów
– Dostarczanie danych do wyświetlenia
– Nawigacja pomiędzy stronami
• Nie można w nich umieszczać kodu
odpowiedzialnego za logikę biznesową!
www.proskar.pl 30/36
Jak implementować
komponenty @Named?
Przykład prawidłowej implementacji komponentu @Named
• Nie należy używać tej technologii
nadmiernie
– Może produkować ciężkie do wykrycia błędy
• Użycie
– Stronicowanie
– Sortowanie list
– Wyświetlanie pól formularza
• Przykład: po zaznaczeniu checkboxa pojawiają
się dwa kolejne pola tekstowe
www.proskar.pl 32/Y
Ajax
• Należy pamiętać o mechanizmie zasłony
blokującej interfejs do czasu otrzymania
odpowiedzi
– Łatwe do wykonania za pomocą komponentu
ajaxStatus biblioteki primefaces oraz biblioteki
jQuery
– Przykład implementacji blokowania interfejsu
www.proskar.pl 34/36
Uwagi
• Primefaces udostępnia implementacje jQuery po użyciu odpowiednich komponentów w kodzie strony
– Gdy stosowany jest Primefaces nie należy dodawać jQuery ręcznie.
• Zasięg sesyjny komponentów @Named powinno się stosować tylko gdy to jest konieczne.
www.proskar.pl 35/36
Podsumowanie
• Przestrzeganie architektury aplikacji trójwarstwowej
• Duplikowanie kodu jest stratą czasu
– Szablony
• Programowanie zgodne z zasadami SOLID
– Umieszczanie styli css w globalnym dokumencie
– Skrypty .js w oddzielonych od widoku dokumentach
www.proskar.pl 36/36