Primefaces - walidacja po stronie klienta
-
Upload
proskar -
Category
Technology
-
view
213 -
download
0
Transcript of Primefaces - walidacja po stronie klienta
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