Primefaces - walidacja po stronie klienta

1. www.proskar.pl
Primefaces – walidacja po
stronie klienta
Warsztaty PROSKAR

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

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

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

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

6. www.proskar.pl 6/23
Jakie pola walidować?
• Formularz
– Pola tekstowe
– Listy rozwijane
– Pola autouzupełniające
– Checkbox
– Itd..

7. www.proskar.pl 7/23
Jak walidować?
• Wymagana wartość
• Długość ciągu
– Maksymalna długość
– Minimalna długość
• Walidacja według wzoru (regex)

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

9. www.proskar.pl 9/23
Co będzie potrzebne?
• Netbeans IDE
– Pluginy
• JSF
• Maven
• Dostęp do sieci internet

10. www.proskar.pl 10/23
Tworzenie projektu i
konfiguracja
• File > New Project > Maven > Web Application
• Prawy przycisk myszy > Properties >
Frameworks > Add > JavaServer Faces > OK.

11. www.proskar.pl 11/23
• Definicja zależności biblioteki Primefaces
• Definicja repozytorium

12. www.proskar.pl 12/23
• Prawy przycisk myszy > Build with
dependencies
• Prawy przycisk myszy > Run
Budowa i uruchomienie
aplikacji

13. www.proskar.pl 13/23
Implementacja
• Klasa CDI z polami
– Dwa ciągi znaków
– Liczba całkowita
– Liczba zmiennoprzecinkowa
– Data

14. www.proskar.pl 14/23
• Metody get / set
• Adnotacje CDI

15. www.proskar.pl 15/23
• Implementacja widoku
– Ciąg znaków
– Liczba
– Wartość
zmiennoprzecinkowa
– Regex a-z
– Data

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

17. • Pole Ciąg znaków
– Wymagana wartość
www.proskar.pl 17/23

18. • Pole Liczba całkowita
– Minimalna wartość - 5
– Maksymalna wartość - 8
www.proskar.pl 18/23

19. • Pole Liczba zmiennoprzecinkowa
– Minimalna wartość – 5.5
– Maksymalna wartość – 8.5
– Obsługa błędu konwersji
• converterMessage
www.proskar.pl 19/23

20. • Pole Regex
– Znaki alfabetyczne (a-z)
• vaildationRegex
• validatorMessage
www.proskar.pl 20/23

21. • Pole Data
– Format daty MM/dd/yyyy
• ConvertDataTime
www.proskar.pl 21/23

22. • Przyciski zatwierdzające
– Przeładowująca stronę
– Ajax
www.proskar.pl 22/23

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