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