www.proskar.pl

Primefaces – walidacja po

stronie klienta

Warsztaty PROSKAR

Plan

1. Wstęp

2. Zastosowanie

3. Walidacja po stronie klienta

– Jakie pola walidować

– Jak walidować

4. Regex

5. Tworzenie projektu i konfiguracja

6. Implementacja

www.proskar.pl 2/23

Wstęp

• Czym jest Primefaces?

– Biblioteka upraszczająca tworzenie interfejsu

użytkownika

– JSF

– Demonstracja możliwości

www.primefaces.org/showcase/

www.proskar.pl 3/23

Zastosowanie

• Aplikacje JSF wymagające użycia

skomplikowanych komponentów jQuery

– Autouzupełnianie

– Komponenty obsługujące multimedia

www.proskar.pl 4/23

Przykład komponentu wyświetlającego

galerie zdjęć

Walidacja po stronie klienta

www.proskar.pl 5/23

• Zablokowanie możliwości wpisania

niepoprawnych danych

• Informowanie użytkownika o popełnionym

błędzie

• Uniemożliwienie wywołania metod logiki

aplikacji z błędnymi danymi

Walidacja po stronie klienta

www.proskar.pl 6/23

Jakie pola walidować?

• Formularz

– Pola tekstowe

– Listy rozwijane

– Pola autouzupełniające

– Checkbox

– Itd..

www.proskar.pl 7/23

Jak walidować?

• Wymagana wartość

• Długość ciągu

– Maksymalna długość

– Minimalna długość

• Walidacja według wzoru (regex)

www.proskar.pl 8/23

Regex • Wyrażenie regularne opisujące łańcuchy

symboli

• Pozwalają opisywać wzorce tekstu

• Używane do sprawdzania poprawności

wpisanego tekstu

• Przykład

– [a-z0-9_.-]+@[a-z0-9_.-]+\.\w{2,4} - wzorzec adresu email

– [0-9]{2}-[0-9]{3} - wzorzec kodu pocztowego

www.proskar.pl 9/23

Co będzie potrzebne?

• Netbeans IDE

– Pluginy

• JSF

• Maven

• Dostęp do sieci internet

www.proskar.pl 10/23

Tworzenie projektu i

konfiguracja • File > New Project > Maven > Web Application

• Prawy przycisk myszy > Properties >

Frameworks > Add > JavaServer Faces > OK.

www.proskar.pl 11/23

• Definicja zależności biblioteki Primefaces

• Definicja repozytorium

www.proskar.pl 12/23

• Prawy przycisk myszy > Build with

dependencies

• Prawy przycisk myszy > Run

Budowa i uruchomienie

aplikacji

www.proskar.pl 13/23

Implementacja

• Klasa CDI z polami

– Dwa ciągi znaków

– Liczba całkowita

– Liczba zmiennoprzecinkowa

– Data

www.proskar.pl 14/23

• Metody get / set

• Adnotacje CDI

www.proskar.pl 15/23

• Implementacja widoku

– Ciąg znaków

– Liczba

– Wartość

zmiennoprzecinkowa

– Regex a-z

– Data

www.proskar.pl 16/23

• Walidacja

– p:inputText – pole tekstowe

• Value – wartość pola

• Required – wymagalność

– p:message – wiadomość dotycząca pola

• For – id pola którego dotyczy

• Pole Ciąg znaków

– Wymagana wartość

www.proskar.pl 17/23

• Pole Liczba całkowita

– Minimalna wartość - 5

– Maksymalna wartość - 8

www.proskar.pl 18/23

• Pole Liczba zmiennoprzecinkowa

– Minimalna wartość – 5.5

– Maksymalna wartość – 8.5

– Obsługa błędu konwersji

• converterMessage

www.proskar.pl 19/23

• Pole Regex

– Znaki alfabetyczne (a-z)

• vaildationRegex

• validatorMessage

www.proskar.pl 20/23

• Pole Data – Format daty MM/dd/yyyy

• ConvertDataTime

www.proskar.pl 21/23

• Przyciski zatwierdzające

– Przeładowująca stronę

– Ajax

www.proskar.pl 22/23

Podsumowanie

• Zalety takiego rozwiązania

– Łatwy sposób na walidacje

• Wady

– Ciężka zmiana stylów wyświetlanej wiadomości

– Do bardziej złożonej walidacji lepiej używać jQuery

www.proskar.pl 23/23