�ݺ�ߣ

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

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ść

• 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

Przykład pliku messages.properties utworzony zgodnie
z konwencją

Przykładowa implementacja enumeratora zgodnie
z powyższą konwencją

• 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

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ę
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.

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

Przykładowa implementacja komponentu kompozytowego

– Adnotacje standardu JSR-303 oraz jego
rozszerzenia
– Adnotacje biblioteki Hibernate Validator
– Niestandardowe komponenty walidujące
JSF
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..

– 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

• 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

– Przykładowa implementacja

– Podłączenie walidatora do komponentu
XHTML

• 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ą!
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

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.

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

�ݺ�ߣ

Standard tworzenia aplikacji JSF

Recommended

More Related Content

Similar to Standard tworzenia aplikacji JSF (20)

More from PROSKAR (7)

Standard tworzenia aplikacji JSF