Programowanie wielowarstwowe i komponentowe

Komunikaty

Proste komunikaty • Założenia – Przechowywanie niezmiennych stringów w prostym pliku tekstowym – Załadowanie pliku. Odwołanie się do tekstu przez nazwę, która jest w pliku

• Cel – Ten sam tekst na różnych stronach – Zmiana w jednym miejscu

• Uwagi – Właściwości beana powinny być stosowane dla zmiennych w trakcie działania programu – Wpisy w pliku są prostsze niż zmienne w kodzie programu

Wyświetlanie stałych komunikatów 1. Utworzenie pliku .properties – –

Zawiera strukturę klucz=wartość Jego miejsce to WEB-INF/classes •

W przypadku eclipse plik jest w katalogu src

2. Deklaracja resource-bundle w pliku faces-config.xml – –

base-name zawiera nazwę pliku var to nazwa mapy używanej w plikach •

Przykład messages msg

3. Teksty wyświetlane są korzystając z języka wyrażeń EL –

#{msg.nazwaKlucza}

Wyświetlanie stałych komunikatów (wersja z podkatalogiem) 1. Utworzenie pliku .properties – –

Zawiera strukturę klucz=wartość Jego miejsce to WEB-INF/classes/resources •

W eclipse w katalogu src tworzy się package resources

2. Deklaracja resource-bundle w pliku faces-config – –

base-name zawiera nazwę pliku var to nazwa mapy używanej w plikach •

Przykład resource.messages msg

3. Teksty wyświetlane są korzystając z języka wyrażeń EL –

#{msg.nazwaKlucza}

Konfiguracja w faces-config • Tag należy umieścić w tagu

message msg

Przykład pliku src/message.properties registrationTitle=Rejestracja registrationText=Proszę podać swoje imię, nazwisko i adres email. firstNamePrompt=Podaj swoje imię lastNamePrompt=Podaj swoje nazwisko emailAddressPrompt=Podaj swój adres email buttonLabel=Zarejestruj successTitle=Sukces successText=Zarejestrowałeś się pomyślnie. •

Plik jest w katalogu: –

•

…/WEB-INF/classes/message.properties

Wpis do faces-config.xml messages msgs

•

Wpisy na stronach z użyciem języka wyrażeń –

#{msgs.firstNamePrompt}

Przykład – plik faces-config.xml messages msgs

Przykład – rejestracja.xhtml #{msgs.registrationTitle} #{msgs.registrationTitle} #{msgs.registrationText}

Przykład – rejestracja.xhtml #{msgs.firstNamePrompt}:
#{msgs.lastNamePrompt}:
#{msgs.emailAddressPrompt}:


Przykład – Person.java public abstract class Person { private String firstName, lastName, emailAddress; public String getFirstName() { return(firstName); } public void setFirstName(String firstName) { this.firstName = firstName; }

… // get/setLastName, get/setEmailAddress public abstract String doRegistration(); }

Przykład – Person1.java @ManagedBean public class Person1 extends Person { public String doRegistration() { return(„sukces"); } }

Przykład – sukces.xhtml #{msgs.successTitle} … #{msgs.successTitle} #{msgs.successText} #{person1.firstName} #{person1.lastName} #{person1.emailAddress}

Komunikaty parametryzowane • Założenia – Teksty przechowywane są w pliku, każdy z tekstów posiada swoją nazwę. Część tekstu może być modyfikowana

• Cel – Teksty są tworzone bardziej elastyczne – Części tekstu są przekazywane do tekstu komunikatu

• Uwagi – Teksty nie są statyczne, ale ich część jest wciąż stała

Wyświetlenie komunikatów parametryzowanych 1. Tworzenie pliku .properties – –

Użycie zapisu {0}, {1}, {2} itd. Teksty zapisane w formie: klucz=wartość {0} wartość {1}

2. Deklaracja pliku w resource-bundle –

Podobnie jak wcześniej

3. Wyświetlanie komunikatów przy użyciu h:outputFormat –

Tekst wyświetlany jest przy pomocy tagu , dane przekazywane są poprzez tag f:param



Przykład message2.properties registrationTitle=Rejestracja firstName=imię lastName=nazwisko emailAddress=adres email registrationText=Proszę podać swoje {0}, {1} i {2}. prompt=Podaj {0} buttonLabel=Zarejestruj successTitle=Sukces successText=Zarejestrowałeś się pomyślnie.

Przykład – plik faces-config.xml messages msgs messages2 msgs2

Przykład – rejestracja2.xhtml #{msgs2.registrationTitle} …

Przykład – Person2.java @ManagedBean public class Person2 extends Person { public String doRegistration() { return("sukces2"); } }

Przykład – sukces2.xhtml #{msgs2.successTitle} … #{msgs2.successTitle} #{msgs2.successText} #{msgs2.firstName}: #{person2.firstName} #{msgs2.lastName}: #{person2.lastName} #{msgs2.emailAddress}: #{person2.emailAddress}

Wielojęzyczność • Założenia – Przechowywanie wielu wersji pliku properties w zależności od języka

• Cel – Strony wyświetlane są w wielu językach

• Uwaga – Sposób na ustawienie języka w zależności od języka przeglądarki

Wielojęzyczność 1. Tworzenie wielu podobnych plików .properties –

Pliki: –

message.properties, message_en.properties, message_de.properties

2. Użycie f:view z atrybutem locale – – –

–

Przykład – rejestracja.xhtml #{msgs.registrationTitle} #{msgs.registrationTitle} :

Przykład – rejestracja.xhtml cd.


Przykład – FormSettings.java @ManagedBean @SessionScoped public class FormSettings implements Serializable { private boolean isNormalSize = true; public String getBodyStyleClass() { if (isNormalSize) { return ("normalSize"); } else { return ("largeSize"); } } public void setNormalSize(ActionEvent event) { isNormalSize = true; } public void setLargeSize(ActionEvent event) { isNormalSize = false; }

}

Przykład – Person.java @ManagedBean public class Person { private String firstName, lastName, emailAddress; // gettery i settery public String doRegistration() { if ("".equals(firstName) && "".equals(lastName) && "".equals(emailAddress)) { return("zle-dane"); } else { return("rejestracja-ok"); } }

}

Przykład – faces-config.xml messages msgs

Przykład – messages.properties registrationTitle=Rejestracja firstName=imię lastName=nazwisko emailAddress=adres email registrationText=Proszę podać swoje {0}, {1} i {2}. prompt=Podaj {0} buttonLabel=Zarejestruj successTitle=Sukces successText=Zarejestrowałeś się pomyślnie. switchLanguage=English normalFont=Normalna czcionka largeFont=Duża czcionka errorTitle=Błąd! missingData=Złe dane. Spróbuj ponownie.

Przykład - styles.css .normalSize { font-size: 110% } .largeSize { font-size: 200% }

Przykład – zle-dane.xhtml #{msgs.errorTitle} #{msgs.errorTitle}

Przykład – rejestracja-ok.xhtml
Przykład – rejestracja3.xhtml … …

Przykład – FormSettings.java public void swapLocale2(ValueChangeEvent event) { Boolean flag = (Boolean)event.getNewValue(); if (flag) { switchLocale(); } } public boolean getChecked() { return false; } public void setChecked(boolean checked) { }

Prezentacja danych z kolekcji • h:dataTable •

h:dataTable Strona startowa Zawartość strony głównej…

Przykład – template.xhtml Strona szablonu

Nagłówek Menu Content Data ostatniej aktualizacji: 20.10.2014

Przykład – index.xhtml Strona główna Example.com Menu główne Strona a Strona B Niesamowita strona C Strona D O nas

Wprowadzenie Lorem ipsum …

Przykład – stronaA.xhtml Strona A Strona A Lorem ipsum dolor …



Walidacja • Walidacja wymaga wykonania dwóch czynności: – Sprawdzenie, czy wszystkie wartości pól są w odpowiednim formacie – Ponowne wyświetlenie strony, gdy wartości są złe lub niepoprawne

• Ręczna walidacja – – – – –

Odczytanie wartości pól edycyjnych Sprawdzenie wartości w setterach i akcji kontrolera Zwrócenie null-a dla odświeżenia strony Tworzenie komunikatów o błędach i dodawanie ich do FacesMessage Wyświetlenie błędów przy pomocy h:messages

• Ukryta walidacja – Stosowanie zmiennych typu int, double, dodanie required – Przeładowanie strony w przypadku błędu konwersji danych – h:message wyświetla komunikaty

• Jawna walidacja – Użycie f:validateLength, f:validateDoubleRange, f:validateLongRange, f:validateRegex – Odświeżenie strony w przypadku błędu, h:message wyświetla komunikat

Ręczna walidacja • Settery przyjmują tylko wartości typu String – Konwersja na inny typ przeprowadzana jest wewnątrz kodu • Blok try/catch używany jest do przechwycenia błędnych danych

• Akcja kontrolera sprawdza wszystkie zmienne – Gdy któraś z danych jest błędna: • dodawany jest nowy komunikat o błędzie funkcją FacesContext.addMessage • Zwracana jest wartość null

• Błąd wyświetlany jest na stronie poprzez h:messages

Wyświetlanie informacji o błędzie walidacji • h:messages – wyświetla zbiór komunikatów – Umieszczany wewnątrz h:form • … • Można dodać style • Błędy wyświetlane są jako lista lub tabela

• h:message – wyświetlenie indywidualnego błędu – Użycie: •

Ukryta automatyczna walidacja • Właściwości w beanie posiadają typy proste – int/Integer, long/Long, double/Double, boolean/Boolean

• JSF konwertuje wartości automatycznie – Konwersja przy pomocy funkcji Integer.parseInt, Double.parseDouble itd. – Gdy występuje błąd konwersji, strona jest wyświetlana ponownie • Komunikat o błędzie jest dodawany automatycznie • Można samemu tworzyć komunikaty o błędzie przy pomocy atrybutu conventerMessage

• Atrybut required wymusza wypełnienie pola edycyjnego – Wymuszenie może być w każdym z elementów JSF – Własny komunikat o błędzie można dodać korzystając z atrybutu requiredMessage

• h:message wyświetla błąd. – Gdy nie ma błędu, komunikat nie jest wyświetlany

Przykład - OfertaBean.java @ManagedBean public class OfertaBean { private String klientID; private String slowoKluczowe; private Double kwota; private Integer ilosc; public String doOferta() { //wykonaj logike aplikacji return("pokaz-oferte"); } public Double getKwota() { return kwota; } public void setKwota(Double kwota) { this.kwota = kwota; }

Przykład – wprowadz-oferte.xhtml Klient ID:
Słowo kluczowe:


Przykład – wprowadz-oferte.xhtml cd Kwota zł:
Ilość:


Jawna walidacja – walidatory i konwentery • f:validateLength – minimum – maximum

• f:validateLongRange – minimum – maximum

• f:validateDoubleRange – minimum – maximum

• f:validateRegex – pattern

• f:conventerNumber – – – – – – – –

curencyCode, currencySymbol grupingUsed integerOnly Locale max(min)FractionDigits max(min)IntegerDigits pattern (DecimalFormat) type: number, currency, procentage

• f:conventerDateTime – – – – –

type: date, time, both dateStyle, timeStyle pattern (SimpleDateFormat) locale timeZone

Konwersja i walidacja • Znaczniki f:convertX i f:validateX sprawdzają format i odświeżają stronę, gdy wartości nie są poprawne – f:convertX może zmienić format wyświetlanej zmiennej – Działa z h:outputText

• Przykład • Wyświetla 0.75 przy wartości 0.749

• Wyświetla 75%

Przykład – wprowadz-oferte2.xhtml Klient ID:


.

Przykład – wprowadz-oferte2.xhtml cd Słowo kluczowe:


Przykład – wprowadz-oferte2.xhtml cd Kwota zł:


Przykład – wprowadz-oferte2.xhtml cd

liczbą"

Ilość: