Tworzenie aplikacji J2EE w technologii JavaServer Faces (JSF)

Transkrypt

1 229 Tworzenie aplikacji J2EE w technologii JavaServer Faces (JSF)

2 Plan prezentacji 230 Wprowadzenie do JavaServer Faces (JSF) Podstawy JavaServer Faces Nawigacja, backing beans, język wyrażeń JSF Tworzenie aplikacji JSF w środowisku JDeveloper 10g Rozbudowa aplikacji JavaServer Faces Walidacja, konwersja, obsługa zdarzeń Wsparcie dla aplikacji wielojęzycznych Tworzenie aplikacji bazodanowych w JavaServer Faces Prezentowanie danych tabelarycznych Dostęp do wyników zapytań Podsumowanie

3 Wprowadzenie 231

4 Czym jest JavaServer Faces (JSF)? 232 Wg firmy Sun: server-side user interface component framework for Java technology-based web applications Główne elementy technologii JSF to: API do reprezentowania komponentów interfejsu użytkownika i zarządzania ich stanem, obsługi zdarzeń, walidacji po stronie serwera, definiowania nawigacji między stronami, wspierania aplikacji wielojęzycznych Dwie biblioteki znaczników dla JavaServer Pages (JSP) Do odwoływania się do komponentów interfejsu użytkownika ze stron JSP Do wiązania komponentów z obiektami po stronie serwera

5 Historia JavaServer Faces 233 Jedna z młodszych specyfikacji w ramach J2EE Opracowana w ramach Java Community Process jako JSR 127 (Java Specification Request) przez grupę ekspertów wywodzących się z projektów: Jakarta Struts (w tym Craig McClanahan twórca Struts) Oracle Application Server, Sun Java Studio, IBM WebSphere Studio, ATG,... Pierwsza wczesna wersja specyfikacji (JSF 1.0 EA) we wrześniu 2002 Ostateczna wersja 1.0 opublikowana w marcu 2004 Wraz z nią referencyjna implementacja firmy Sun Aktualna wersja JSF 1.1 Maintainance Release Trwają prace nad JSF 1.2

6 Specyfikacja, implementacje i biblioteki komponentów w JSF 234 Technologię JavaServer Faces definiuje specyfikacja firmy Sun jako część J2EE Do tworzenia i uruchamiania aplikacji korzystających opartych o technologię JSF konieczna jest implementacja JSF JavaServer Faces RI (referencyjna implementacja Sun) Apache MyFaces ( Dostępne biblioteki komponentów JSF: Dodatkowe komponenty MyFaces Oracle ADF Faces (podarowane Apache Software Foundation) Oracle wykorzystuje implementację firmy Sun (wersja 1.1 w JDeveloper ), oferując swoją bibliotekę komponentów ADF Faces

7 Nadzieje wiązane z JSF (1/2) 235 Zalety platformy J2EE w porównaniu z.net: Niezależność od konkretnego producenta Dostępność narzędzi i serwerów open source W zakresie wygody tworzenia oprogramowania przewaga leżała dotychczas po stronie Microsoft.NET Dopracowane środowisko RAD: Visual Studio Aplikacje internetowe tworzone w stylu bardzo zbliżonym do tradycyjnych aplikacji (WebForms)

8 Nadzieje wiązane z JSF (2/2) 236 Technologia JSF jest standardem, który w połączeniu ze wspierającymi go środowiskami IDE ma ułatwić i ustandaryzować tworzenie interfejsu użytkownika w aplikacjach J2EE Koncepcja JSF zbliżona do WebForms w.net JSF jako standard ma szanse na większe wsparcie przez dostawców narzędzi programistycznych niż inne proponowane szkielety aplikacji J2EE Popularne opinie o JSF: rapid user-interface development brought to Java Swing for server-side applications combination of Swing and Struts

9 JSF Interfejs użytkownika u po stronie serwera 237 Browser Web Container HTTP request page.jsp renders HTML HTTP response jsfui Interfejs użytkownika pracuje po stronie serwera i jest renderowany jako HTML wysyłany klientowi Strona JSP odwołuje się do komponentów interfejsu zaimplementowanych w JSF poprzez znaczniki Interfejs użytkownika zarządza komponentami i związanymi z nimi walidatorami, konwerterami itp.

10 JSF jako implementacja idei MVC 238 Głównym zadaniem JSF jest dostarczenie modelu komponentów do tworzenia interfejsu użytkownika (widoku) Komponenty konfigurowalne, rozszerzalne, stanowe i niezależne od technologii prezentacji Gotowe komponenty + możliwość tworzenia własnych JSP jako podstawowe środowisko renderowania komponentów JSF Każda implementacja JSF musi wspierać JSP JSF dostarcza implementację kontrolera w postaci konfigurowalnego serwletu FacesServlet JSF nie wspiera tworzenia modelu. Udostępnia jedynie mechanizmy wiążące obiekty modelu z pozostałymi komponentami aplikacji

11 Komponenty JSF 239 Podstawą specyfikacji JSF jest opis modelu komponentów interfejsu użytkownika Zestaw standardowych, gotowych komponentów API (Application Programming Interface) do rozszerzania standardowych komponentów i projektowania zupełnie nowych Przykłady standardowych komponentów: UIRoot korzeń drzewa komponentów interfejsu UIForm formularz do przesyłania danych do aplikacji Proste komponenty interjejsu np. UIInput, UICommand, UISelectBoolean,... Złożone komponenty interfejsu np. UIData - tabele Każdy komponent interfejsu użytkownika może być uzupełniony o mechanizmy: Konwersji i walidacji Obsługi zdarzeń i błędów

12 Relacje JSF z JSP i Struts 240 JSF nie wymaga JSP jako technologii widoku, ale JSP jest domyślną technologią do renderowania komponentów JSF Każda implementacja JSF musi posiadać wsparcie dla JSP Definiowane przez specyfikację biblioteki znaczników JSF dla JSP ułatwiają i standaryzują korzystanie z JSF w połączeniu z JSP Renderowanie komponentów JSF możliwe również np. w Velocity JSF zakłada wersję JSP 1.2, współpracuje z JSP 2.0, ale dopiero przyszłe wersje JSF będą wykorzystywać możliwości JSP 2.0 Funkcjonalność JSF pokrywa się ze Struts w zakresie obsługi nawigacji i walidacji JSF uproszczone w porównaniu ze Struts JSF i Struts mogą (i zakłada się, że często będą!) współpracować w ramach jednej aplikacji: JSF wykorzystane do komponentów interfejsu użytkownika Struts jako szkielet całej aplikacji do obsługi nawigacji

13 Porównanie JSF i Struts 241 Inny cel, choć funkcjonalność się nakłada: Struts - Java web application framework JSF - user-interface framework for Java web applications Zalety JSF w porównaniu ze Struts: Model komponentów interfejsu użytkownika Prostszy kontroler i prostsza konfiguracja aplikacji Lepszy, zwięzły język wyrażeń Większa szansa na wsparcie ze strony narzędzi IDE Wsparcie dla innych technologii prezentacji niż HTML (np. dla PDA) Wady JSF w porównaniu ze Struts Słabsze standardowe komponenty walidujące Brak aplikacji startowej (na wzór struts-blank) Brak walidacji po stronie klienta (jak oparta o JavaScript w Struts) Struts już ma dobrą pozycję na rynku, JSF dopiero się przebija

14 JSF w Oracle JDeveloper 10g 242 Pełne wsparcie dla JSF w wersji JDeveloper 10g : Domyślnie implementacja Sun JavaServer Faces RI Możliwość wykorzystania implementacji MyFaces Biblioteka komponentów Oracle ADF Faces Wizualny edytor nawigacji, wsparcie dla edycji i generacja plików konfiguracyjnych, palety komponentów ze znacznikami JSF dla JSP W przypadku wersji JDeveloper 10g i wcześniejszych konieczne ręczne dodanie wsparcia dla JSF Należy zarejestrować biblioteki JSF i znaczników JSF dla JSP oraz dodać biblioteki znaczników do palety komponentów Wymagana ręczna konfiguracja plików web.xml i faces-config.xml Brak wizualnych narzędzi do edycji reguł nawigacji aplikacji JSF

15 JSF w Eclipse 243 Aby uzyskać wsparcie dla wizualnego projektowania JSF na poziomie JDeveloper należy zainstalować wtyczkę (plug-in) np. Faces IDE

16 244 Podstawy JavaServer Faces - nawigacja - backing beans, managed beans - język wyrażeń JSF

17 Przykładowa aplikacja 245 Opis aplikacji: Aplikacja obejmuje 3 strony Pierwsza strona prezentuje formularz logowania Po weryfikacji nazwy użytkownika i hasła następuje przekierowanie do strony informującej o sukcesie lub niepowodzeniu logowania

18 Przepływ sterowania w aplikacji JSF 246 1) Zbiór komponentów stanowiących interfejs jest zaprezentowany użytkownikowi w postaci formularza 2) Formularz wywołuje sam siebie Atrybut ACTION zawiera adres formularza 3) Tworzony jest Java Bean zawierający dane z formularza (tzw. backing bean) 4) Wywoływana jest akcja związana z zatwierdzeniem formularza Metoda akcji zwraca warunek 5) Prezentowana jest strona związana z warunkiem

19 Podstawowe kroki tworzenia aplikacji JSF 247 1) Utworzenie stron z wykorzystaniem znaczników odwołujących się do komponentów JSF 2) Zdefiniowanie nawigacji między stronami w pliku konfiguracyjnym aplikacji 3) Implementacja komponentów Java Bean reprezentujących dane z formularzy (backing beans) 4) Zadeklarowanie backing beans w pliku konfiguracyjnym aplikacji UWAGA: Powyższe kroki mogą być realizowane współbieżnie lub w dowolnej kolejności

20 Pliki konfiguracyjne aplikacji JSF 248 web.xml (w katalogu WEB-INF/) Standardowy plik konfiguracyjny modułu webowego aplikacji J2EE Zawiera deklarację serwletu kontrolera aplikacji i mapowanie odpowiadającego mu wzorca adresu faces-config.xml (w katalogu WEB-INF/) Specyficzny plik konfiguracyjny aplikacji JSF Zawiera reguły nawigacji, deklaracje backing beans, itd.

21 Deklaracja i mapowanie dla serwletu kontrolera JSF <!DOCTYPE web-app PUBLIC... > <web-app>... <!--Faces Servlet --> <servlet> <servlet-name>faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.facesservlet</servlet-class> <load-on-startup>1 </load-on-startup> </servlet> <!--Faces Servlet Mapping --> <servlet-mapping> <servlet-name>faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> </web-app> Mapowanie rekomendowane przez specyfikację JSF: <url-pattern>*.faces</url-pattern> Alternatywne popularne mapowania: <url-pattern>/faces/*</url-pattern> (domyślny w JDeveloper) <url-pattern>*.jsf</url-pattern> web.xml 249

22 Struktura kodu formularzy do wprowadzania danych JSP/JSF 250 taglib uri=" prefix="f" %> taglib uri=" prefix="h" %> <f:view> znaczniki HTML <h:form> znaczniki HTML + znaczniki h: JSF (+ zagnieżdżone f:) </h:form> znaczniki HTML </f:view> Strona zawierająca znaczniki JSF jest reprezentowana w postaci drzewa komponentów. Korzeniem drzewa jest komponent UIViewRoot, reprezentowany przez znacznik <f:view>. Dlatego wszystkie znaczniki JSF użyte na stronie muszą być zawarte wewnątrz elementu <f:view></f:view>. <h:form> reprezentuje formularz HTML <FORM>. ACTION automatycznie wskazuje na bieżącą stronę (strona wywołuje sama siebie). METHOD przyjmuje wartość POST (obowiązkowo). Biblioteka znaczników JSF reprezentujących znaczniki HTML (w tym elementy formularzy) (zwyczajowy prefiks: h) Biblioteka znaczników JSF niezależnych od technologii prezentacji (np. do walidacji, obsługi zdarzeń,...) (zwyczajowy prefiks: f)

23 Formularz logowania 251 login.jsp page contenttype="text/html;charset=windows-1250"%> taglib uri=" prefix="h"%> taglib uri=" prefix="f"%> <f:view> <html> <head>...<title>logowanie</title></head> <body><h:form> <p>użytkownik: <h:inputtext value="#{loginbean.username}" id="username"/> <p>hasło: <h:inputsecret value="#{loginbean.password}" id="password"/> <p><h:commandbutton value="zaloguj" id="submitbutton" action="#{loginbean.register}"/> </h:form></body> </html> </f:view> Strona w pliku.jsp, uruchomienie poprzez FacesServlet, URL zależy od mapowania w pliku web.xml

24 Nawigacja statyczna 252 login.jsp... <h:commandbutton value="zaloguj" id="submitbutton" action="success"/>... Nawigacja statyczna: Wynik akcji zaszyty na stałe w deklaracji przycisku faces-config.xml <navigation-rule> <from-view-id>/login.jsp</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/ok.jsp</to-view-id> </navigation-case> </navigation-rule> Uwaga: Gdy cel nawigacji zależy od wprowadzonych danych, konieczna nawigacja dynamiczna

25 Komponenty backing beans 253 Komponenty backing beans definiują właściwości i metody powiązane z komponentami interfejsu użytkownika Każda właściwość powiązania z wartością lub instancją komponentu Dodatkowo backing bean może zawierać metody: Do walidacji danych komponentu Do obsługi zdarzeń generowanych przez komponent Do przetwarzania związanego z nawigacją Ich klasy muszą spełniać reguły Java Beans: Bezargumentowy konstruktor Brak publicznych pól Dostęp do właściwości poprzez metody setxxx/getxxx: public String getname() public void setname(string n) public boolean isactive() public void setactive(boolean a)

26 Koncepcja managed beans 254 JSF oferuje deklaratywny mechanizm tworzenia komponentów JavaBean Backing beans komponenty o zasięgu request, związane z konkretną stroną Application logic beans niepełniące roli backing beans, zawierające kod i właściwości niezwiązane z konkretną stroną Komponenty skonfigurowane w pliku faces-config.xml określane są jako managed beans Runtime JSF utworzy instancję na żądanie, gdy napotka wyrażenie odwołujące się do komponentu Odwołania do managed beans z poziomu kodu strony JSF realizowane są za pomocą języka wyrażeń JSF

27 Język wyrażeń JSF 255 Język wyrażeń JSF (JSF Expression Language) składniowo jest identyczny z JSP Expression Language Dostępnym od JSP 2.0 Wykorzystywanym również przez JSTL Różnica polega na tym że w JSP/JSTL wyrażenia służą jedynie do wyświetlania wartości, a w JSF do wyświetlania i ustawiania właściwości JSP EL wywołuje tylko metody getxxx JSF EL wywołuje metody getxxx i setxxx Powyższa różnica jest powodem innej notacji w JSF (#{...}) niż w JSP i JSTL (${...}) Uwagi: Używany tylko w atrybutach znaczników JSF Dostęp do managed beans i zasięgów request, session, application

28 Backing bean dla formularza logowania (1/2) 256 package view.backing; public class Login { private String username; private String password; Login.java Definicja klasy komponentu } public void setusername(string t) { this.username = t; } public String getusername() { return username; } public void setpassword(string t) { this.password = t; } public String getpassword() { return password; } faces-config.xml <faces-config...>... <managed-bean> Deklaracja komponentu (dzięki niej implementacja JSF sama utworzy instancję komponentu gdy będzie potrzebna - managed bean) <managed-bean-name>loginbean</managed-bean-name> <managed-bean-class>view.backing.login</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> </faces-config>

29 Backing bean dla formularza logowania (2/2) 257 page contenttype="text/html;charset=windows-1250"%> taglib uri=" prefix="h"%> taglib uri=" prefix="f"%> <f:view> <html> <head>...<title>logowanie</title></head> <body><h:form> <p>użytkownik: <h:inputtext value="#{loginbean.username}" id="username"/> <p>hasło: <h:inputsecret value="#{loginbean.password}" id="password"/>... </h:form></body> </html> </f:view> login.jsp Po zatwierdzeniu formularza i wysłaniu wprowadzonych danych do serwera, zostaną one automatycznie umieszczone we wskazanych właściwościach wskazanego komponentu Do wiązania komponentów interfejsu użytkownika z właściwościami komponentu backing bean wykorzystany język wyrażeń JSF (#{...})

30 Sposoby wiązania backing beans z komponentami interfejsu 258 Backing bean to komponent Java Bean, powiązany z komponentami interfejsu używanymi na stronie Każda z właściwości komponentu backing bean powiązana jest z wartością lub instancją komponentu Powiązanie właściwości z wartością komponentu: np. <h:inputtext id="uname" value="#{userbean.username}" /> (właściwość typu String, Integer, int, double,...) Zalecane w większości sytuacji Automatyczne konwersje typów danych Komponent backing bean nie odwołuje się do JSF API Powiązanie właściwości z instancją komponentu: np. <h:inputtext binding="#{userbean.usernamecomponent}" /> (właściwość typu UIInput) Wymagane gdy istnieje potrzeba programowego modyfikowania właściwości komponentu Wykorzystywane przez kreator w JDeveloperze

31 Przekazywanie wartości między stronami poprzez backing beans 259 page contenttype="text/html;charset=windows-1250"%> taglib uri=" prefix="h"%> taglib uri=" prefix="f"%> <f:view> <html> <head><title>ok</title></head> <body><h:form> <p>witaj <h:outputtext value="#{loginbean.username}"/>! <p>twoje hasło to: <h:outputtext value="#{loginbean.password}"/>. </h:form></body> </html> </f:view> Dostęp do właściwości komponentu backing bean za pomocą znacznika h:outputtext ok.jsp

32 Nawigacja dynamiczna (1/2) 260 login.jsp <h:commandbutton value="zaloguj" id="submitbutton action="#{loginbean.register}"/> Login.java login.jsp marek *** success failure public class Login { private String username; private String password;... public String register() { if (username.equals(password)) return "success"; else return "failure"; } } ok.jsp error.jsp Wynik akcji zwracany przez metodę (właściwość) komponentu backing bean

33 Nawigacja dynamiczna (2/2) 261 faces-config.xml... <navigation-rule> <from-view-id>/login.jsp</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/ok.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>failure</from-outcome> <to-view-id>/error.jsp</to-view-id> </navigation-case> </navigation-rule>... Jeśli metoda akcji zwróci wartość nieuwzględnioną w regule nawigacji, nastąpi ponowne wywołanie bieżącej strony

34 262 Tworzenie aplikacji JSF w środowisku JDeveloper 10g (10.1.3)

35 Wsparcie JSF w JDeveloper Kompletny zbiór standardowych komponentów JSF Biblioteka komponentów ADF Faces Zintegrowane środowisko wizualnego tworzenia aplikacji: Wizualna edycja nawigacji między stronami Paleta właściwości do przeglądania i edycji właściwości komponentów na stronie Automatyczne definiowanie backing beans Okna dialogowe wspierające tworzenie powiązań w JSF EL Wizualna edycja pliku faces-config.xml

36 Tworzenie nowej aplikacji 264 Tu można wybrać szablon uwzględniający JSF, wtedy projekty dla modelu i widoku oraz plik faces-config.xml w projekcie widoku zostaną utworzone automatycznie

37 Utworzenie pliku konfiguracyjnego aplikacji JSF 265 Wybór wersji specyfikacji serwletów / JSP Wraz z plikiem faces-config.xml tworzona jest cała struktura aplikacji webowej J2EE <servlet-mapping> <servlet-name>faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping>

38 Wizualny edytor nawigacji 266 Umożliwia: Graficzną edycję reguł nawigacji na diagramie Dodawanie nowych stron do diagramu Tworzenie nowych z palety komponentów Dodawanie wcześniej utworzonych stron JSP/JSF z nawigatora obiektów (drag & drop)

39 Tworzenie nowej strony 267 Dwuklik na ikonie Utworzenie nowego, automatycznie zarządzanego komponentu backing bean, z którego właściwościami będą wiązane komponenty interfejsu na stronie (opcjonalnie)

40 Tworzenie nowej strony efekt (1/2) 268 login.jsp page contenttype="text/html;charset=windows-1250"%> taglib uri=" prefix="h"%> taglib uri=" prefix="f"%> <f:view> <html> <head> <meta http-equiv="content-type" content="..."/> <title>login</title> </head> <body><h:form binding="#{loginbean.form1}" id="form1"></h:form></body> </html> </f:view> <%-- oracle-jdev-comment:auto-binding-backing-bean-name:loginbean--%>

41 Tworzenie nowej strony efekt (2/2) 269 package mypackage.backing; import javax.faces.component.html.htmlform; public class Login { private HtmlForm form1; public void setform1(htmlform form1) { this.form1 = form1; } public HtmlForm getform1() { return form1; } } Login.java faces-config.xml <faces-config xmlns=" <managed-bean> <managed-bean-name>loginbean</managed-bean-name> <managed-bean-class>mypackage.backing.login</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <!--oracle-jdev-comment:managed-bean-jsp-link:1login.jsp--> </managed-bean> </faces-config>

42 Wizualna edycja formularza JSP/JSF 270 Edycja strony (drag & drop) Elementy formularza z palety JSF HTML Można do dekoracji wykorzystywać elementy HTML Common (np. tabelka) Źródło strony i klasa backing bean (!) uaktualniane na bieżąco Zmiana etykiety przycisku w kodzie lub w palecie właściwości (value)

43 Wizualna edycja formularza JSP/JSF wynikowa klasa 271 package mypackage.backing; import javax.faces.component.html.htmlcommandbutton; import javax.faces.component.html.htmlform; import javax.faces.component.html.htmlinputsecret; import javax.faces.component.html.htmlinputtext; public class Login { private HtmlForm form1; private HtmlInputText inputtext1; private HtmlInputSecret inputsecret1; private HtmlCommandButton commandbutton1; Login.java JDeveloper generuje klasę backing bean z właściwościami odpowiadającymi instancjom komponentów a nie ich wartościom! (elastyczniejsze z dwóch możliwych rozwiązań) } public void setform1(htmlform form1) { this.form1 = form1; } public HtmlForm getform1() { return form1; } public void setinputtext1(htmlinputtext inputtext1) { this.inputtext1 = inputtext1; } public HtmlInputText getinputtext1() { return inputtext1; } public void setinputsecret1(htmlinputsecret inputsecret1) { this.inputsecret1 = inputsecret1; } public HtmlInputSecret getinputsecret1() { return inputsecret1; } public void setcommandbutton1(htmlcommandbutton commandbutton1) { this.commandbutton1 = commandbutton1; } public HtmlCommandButton getcommandbutton1() { return commandbutton1; }

44 Wizualna edycja formularza JSP/JSF wynikowa strona JSP 272 login.jsp <f:view> <body> <h:form binding="#{loginbean.form1}" id="form1"> <! Pominięte znaczniki definiujące tabelkę HTML --> Użytkownik: <h:inputtext binding="#{loginbean.inputtext1}" id="inputtext1"/> Hasło: <h:inputsecret binding="#{loginbean.inputsecret1}" id="inputsecret1"/> <h:commandbutton value="zaloguj" binding="#{loginbean.commandbutton1}" id="commandbutton1"/> </h:form> </body> </f:view> Powiązanie z instancją komponentu, a nie z wartością, a więc poprzez atrybut binding, a nie value!

45 Wizualna edycja reguł nawigacji 273 Pierwsza strzałka domyślnie dostaje etykietę success (etykiety można zmienić na diagramie) faces-config.xml <navigation-rule> <from-view-id>/login.jsp</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/ok.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>failure</from-outcome> <to-view-id>/error.jsp</to-view-id> </navigation-case> </navigation-rule>

46 Utworzenie metody akcji 274 Login.java... public String commandbutton1_action() { // Add event code here... return null; }... Dwuklik na przycisku Ręczna edycja... public String commandbutton1_action() { String user = (String) inputtext1.getvalue(); String pass = (String) inputsecret1.getvalue(); if (user.equals(pass)) return "success"; else return "failure"; }...

47 Dostęp p do danych przekazanych poprzez backing beans (1/2) 275 Dwuklik na ikonie Strona nie służy do wprowadzania danych, więc można nie deklarować dla niej komponentu backing bean Do wyświetlenia danych przekazanych przez backing bean służy element h:outputtext Powiązanie outputtext z właściwością backing bean za pomocą palety właściwości

48 Dostęp p do danych przekazanych poprzez backing beans (2/2) 276 Wprowadzenie wartości #{ uaktywnia przycisk wywołujący okno dialogowe pozwalający na powiązanie z właściwością komponentu backing bean (lub innego dostępnego obiektu np. powiązań z modelem)

49 Gotowa aplikacja 277 marek/marek marek/xxx

50 278 Rozbudowa aplikacji JavaServer Faces - walidacja - konwersja - obsługa zdarzeń - wsparcie dla aplikacji wielojęzycznych - ukrycie źródeł JSP przed dostępem

51 Walidacja danych w aplikacjach webowych 279 Typowe cele walidacji w aplikacjach webowych: Sprawdzenie czy zostały wprowadzone wartości do wszystkich wymaganych pól formularza i czy format wartości jest odpowiedni Ponowne wyświetlenie formularza w przypadku błędów Z komunikatami o błędach Z zachowaniem poprawnych wartości

52 Walidacja danych w aplikacjach JSF 280 Walidacja ręczna Walidacja w metodach setxxx i/lub metodzie akcji Metoda akcji zwraca null by wymusić ponowne wyświetlenie formularza Niejawna walidacja automatyczna Użycie atrybutu required Właściwości backing beans typów prostych System wyświetla formularz ponownie gdy błąd konwersji Wyświetlanie komunikatów o błędach: h:message Jawna walidacja automatyczna Użycie predefiniowanych walidatorów: f:validatelength, f:validatedoublerange, f:validatelongrange System wyświetla formularz ponownie gdy błąd walidacji Wyświetlanie komunikatów o błędach: h:message Walidatory aplikacji (custom validators) Implementują interfejs Validator Rejestrowane w faces-config.xml

53 Przykłady walidacji w JSF (1/2) 281 Obowiązkowa nazwa użytkownika: Ustawienie atrybutu required Dodanie elementu h:message i powiązanie go z polem formularza <h:inputtext binding="#{loginbean.inputtext1}" id="inputtext1" required="true"/> <h:message for="inputtext1" binding="#{loginbean.message1}" id="message1"/>

54 Przykłady walidacji w JSF (2/2) 282 Hasło od 4 do 6 znaków: Dodanie walidatora f:validatelength i ustawienie jego właściwości Dodanie elementu h:message i powiązanie go z polem formularza <h:inputsecret binding="#{loginbean.inputsecret1}" id="inputsecret1"> <f:validatelength maximum="6" minimum="4"/> </h:inputsecret> <h:message for="inputsecret1" binding="#{loginbean.message2}" id="message2"/>

55 Konwertery 283 Konwertery są używane gdy: Wymagana jest inna konwersja niż standardowa dokonywana automatycznie (do typów takich jak int, float, Integer, Boolean,...) Wymagane jest zaawansowane formatowanie (liczb, dat) Konwersja a walidacja Konwerter może służyć do walidacji generuje wyjątek i tworzy komunikat o błędzie gdy konwersja się nie powiedzie Konwerter również zmienia format wyświetlania, a nie tylko konwertuje wprowadzane dane Walidatory mogą być używane tylko z komponentami do wprowadzania danych, a konwertery również z h:outputtext Standardowe konwertery: f:convertnumber, f:convertdatetime Niestandardowe konwertery tworzy się implementując interfejs Converter <h:outputtext value="#{user.lastlogin}"> <f:convertdatetime datestyle="full" /> </h:outputtext> <h:outputtext value="#{user.lastlogin}"> <f:convertdatetime pattern="eeeeeeee, MMM dd, yyyy" /> </h:outputtext>>

56 Warunkowe renderowanie i aktywacja komponentów 284 Poprzez zmianę wartości atrybutu rendered można spowodować, że komponent nie będzie wyświetlany (domyślnie true) <h:commandbutton value="zaloguj" binding="#{loginbean.commandbutton1}" action="#{loginbean.commandbutton1_action}" rendered="false"/> Poprzez zmianę wartości atrybutu disabled można spowodować, że komponent nie będzie aktywny (domyślnie false) <h:commandbutton value="zaloguj" binding="#{loginbean.commandbutton1}" action="#{loginbean.commandbutton1_action}" disabled="true"/> Możliwe odwołanie do metody backing bean: #{}

57 Obsługa zdarzeń w aplikacji JSF 285 Zdarzenia zachodzące w aplikacji JSF można podzielić na dwie kategorie: Zdarzenia inicjujące przetwarzanie po stronie logiki biznesowej Zdarzenia wpływające jedynie na interfejs użytkownika Kategorie procedur obsługi zdarzeń w JSF: Action controllers (metody akcji) Uruchamiane po wypełnieniu komponentu backing bean danymi i po walidacji Zwracają wartości decydujące o nawigacji Event listeners Często uruchamiane przed wypełnieniem komponentu backing bean danymi i z pominięciem walidacji Nie wpływają bezpośrednio na nawigację

58 Rodzaje Event Listeners 286 ActionListener Wywoływany przez przyciski, mapy obrazkowe i linki z kodem JavaScript Elementy te automatycznie zatwierdzają formularz ValueChangeListener Wywoływany przez listy rozwijane, pola wyboru, grupy radiowe, pola tekstowe, itp. Elementy te automatycznie nie zatwierdzają formularza Konieczne wymuszenie zatwierdzenia formularza poprzez kod JavaScript: submit() w onchange lub onclick

59 ActionListener - Przykład 287 <h:commandbutton actionlistener= "#{bean.sideeffect}" immediate="true" /> Metoda obsługująca zdarzenie zwyczajowo w klasie komponentu backing bean Przypomnienie: Dla zdarzeń powodujących nawigację: atrybut action public void sideeffect(actionevent event) { // np. aktywacja/deaktywacja innych // elementów formularza } Umożliwia obsługę zdarzeń przed walidacją innych komponentów Metoda w klasie komponentu backing bean, zwracająca void

60 ValueChangeListener Przykład (1/2) 288 Pole wyboru uaktywniające przycisk zatwierdzający formularz logowania disabled= true Wpisanie w palecie właściwości nazwy metody powoduje utworzenie szkieletu metody w klasie backing bean public void checkbox1changed(valuechangeevent valuechangeevent) { // Add event code here... if (selectbooleancheckbox1.isselected()) commandbutton1.setdisabled(false); else commandbutton1.setdisabled(true); }

61 ValueChangeListener Przykład (2/2) 289 <h:selectbooleancheckbox binding="#{loginbean.selectbooleancheckbox1}" id="selectbooleancheckbox1" valuechangelistener="#{loginbean.checkbox1changed}" onchange="submit()"/> Wymagany JavaScript, aby zmiana stanu pola wyboru zatwierdzała formularz (należy wpisać ręcznie lub przez paletę) Problem: Po zmianie stanu pola wyboru budzi się walidacja pól tekstowych! Rozwiązanie problemu niechcianej walidacji: Dodanie immediate="true" w elemencie pola wyboru (domyślnie jest false), aby obsługa zdarzenia miała miejsce przed walidacją Dodanie poniższego kodu na końcu metody obsługi zdarzenia: FacesContext context = FacesContext.getCurrentInstance(); context.renderresponse(); // skraca normalne przetwarzanie UWAGA: W niektórych wersjach Internet Explorer, zdarzenie onchange wystąpi dopiero gdy focus znajdzie się na innym elemencie (jest to raczej bug...). Rozwiązaniem jest onclick

62 Nawigacja za pomocą linków 290 Nawigacja następuje w wyniku zwrócenia konkretnej etykiety przez metodę akcji Akcję nawigacyjną oprócz przycisków mogą wywoływać również linki Tworzone za pomocą znacznika h:commandlink Renderowane z wykorzystaniem kodu JavaScript, zatwierdzającego formularz (JavaScript w przeglądarce musi być włączony!) error.jsp <h:form> <h:commandbutton value="powrót" action="success"/> <h:commandlink action="success"> <h:outputtext value="powrót"/> </h:commandlink> </h:form>

63 Backing beans o zasięgu sesji 291 Backing beans najczęściej mają zasięg obsługi żądania (request) Można zwiększyć ich czas życia do zasięgu sesji (session) lub aplikacji (application), jeśli mają służyć do przechowywania danych między kolejnymi żądaniami loginbean scope=request loginbean scope=session <managed-bean> faces-config.xml <managed-bean-name>loginbean</managed-bean-name> <managed-bean-class>mypackage.backing.login</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean>

64 Pliki.properties. w JSF 292 Plik.properties to tekstowy plik zawierający pary klucz=wartość Aplikacja JSF może pobierać teksty do wyświetlenia z plików.properties (Resource Bundles) Pliki.properties umieszczane są tam gdzie klasy (WEB-INF/classes) Do ładowania plików.properties służy znacznik f:loadbundle wskazujący: Nazwę pliku (bez rozszerzenia, z prefiksem pakietu) Nazwę zmiennej (typu Map) do przechowania odczytanych danych <f:loadbundle basename="komunikaty" var="kom"/> #{kom.klucz}

65 Plik.properties. - Przykład 293 New->Simple files->file komunikaty.properties sorryprompt=sorry backlabel=back error.jsp <f:view> <f:loadbundle basename="komunikaty" var="kom"/>... <h:outputtext value="#{kom.sorryprompt}"/> <h:outputtext value="#{loginbean.inputtext1.value}"/>... <h:form> <h:commandbutton value="#{kom.backlabel}" action="success"/> <h:commandlink action="success"> <h:outputtext value="#{kom.backlabel}"/> </h:commandlink> </h:form>... </f:view>

66 Internacjonalizacja aplikacji 294 Należy przygotować zestaw plików.properties dla poszczególnych języków (różniących się kodem lokalizacji w przyrostku nazwy): komunikaty.properties, komunikaty_pl.properties,... W znaczniku f:view należy umieścić atrybut locale Może to nie być konieczne (serwer może ustawić sam) Wartość locale wyznaczoną przez ustawienia przeglądarki użytkownika można odczytać z FacesContext Odczyt pliku i wyświetlanie komunikatów bez zmian!

67 Internacjonalizacja aplikacji - Przykład 295 komunikaty.properties sorryprompt=sorry backlabel=back komunikaty_pl.properties sorryprompt=przykro nam backlabel=powrót UWAGA: Polskie znaki (poza ó ) w kostaci kodów Unicode (\uxxxx) error.jsp <f:view locale="#{facescontext.externalcontext.request.locale}"> <f:loadbundle basename="komunikaty" var="kom"/>... <h:outputtext value="#{kom.sorryprompt}"/> <h:outputtext value="#{loginbean.inputtext1.value}"/>... <h:form> <h:commandbutton value="#{kom.backlabel}" action="success"/> <h:commandlink action="success"> <h:outputtext value="#{kom.backlabel}"/> </h:commandlink> </h:form>... </f:view>

68 Podmiana i internacjonalizacja komunikatów w ze standardowych walidatorów (1/2) 296 Należy wykonać dwa kroki: Przygotować pliki.properties dla poszczególnych języków zawierające nowe komunikaty przypisane do predefiniowanych kluczy Wskazać przygotowane pliki jako message bundle zawierający dostosowane komunikaty w konfiguracji aplikacji (faces-config.xml) komunikaty_pl.properties javax.faces.component.uiinput.required=pole jest wymagane! javax.faces.validator.lengthvalidator.minimum=minimalna wymagana liczba znaków to {0}! javax.faces.validator.lengthvalidator.maximum=maksymalna wymagana liczba znaków to {0}! W miejsce {0} będzie wstawiany parametr ograniczenia np. limit na liczbę znaków

69 Podmiana i internacjonalizacja komunikatów w ze standardowych walidatorów (2/2) 297 faces-config.xml <application> <message-bundle> komunikaty </message-bundle> </application> Interaktywny edytor zawartości faces-config.xml

70 Problem dostępu do stron JSP 298 Domyślnie źródłowe strony JSP nie są chronione przed bezpośrednim dostępem Dostęp do stron JSP zawierających znaczniki JSF bez pośrednictwa kontrolera FacesServlet powoduje błędy Jest to jedna z wad JSF!

71 Ochrona źródłowych stron JSP 299 Nie można umieścić stron JSP w WEB-INF gdyż w JSF URL musi odpowiadać lokalizacji pliku: strona.jsp -> strona.faces lub faces/strona.jsp Rozwiązaniem jest wykorzystanie security-constraint w pliku web.xml web.xml <security-constraint> <web-resource-collection> <web-resource-name>raw JSPs </web-resource-name> <url-pattern>/login.jsp</url-pattern> <url-pattern>/ok.jsp</url-pattern>... </web-resource-collection> <auth-constraint> <description>no roles, no direct access</description> </auth-constraint> </security-constraint>

72 300 Tworzenie aplikacji bazodanowych w JavaServer Faces - prezentowanie danych tabelarycznych - dostęp p do wyników w zapytań

73 Prezentacja danych tabelarycznych 301 Często aplikacja musi przedstawić kolekcję danych w postaci tabelarycznej Na etapie projektowania strony liczba wierszy jest nieznana Typowy scenariusz przy zapytaniach do bazy danych JSF umożliwia prezentację danych tabelarycznych bez konstrukcji pętli za pomocą komponentu h:datatable h:datatable zawiera definicję jednego wiersza Struktura wiersza jest powielona dla elementów kolekcji Można wskazać szczególną zawartość dla nagłówka i stopki za pomocą elementu f:facet Można wskazać od którego elementu kolekcji (numeracja od 0) i ile wierszy ma być wyświetlonych (atrybuty first i rows)

74 Dane źródłowe dla h:datatable 302 Lista komponentów Java Bean Tablica komponentów Java Bean Pojedynczy komponent Java Bean java.sql.resultset javax.servlet.jsp.jstl.sql.result Użyteczna alternatywa dla java.sql.resultset Nie traci zawartości po zamknięciu połączenia z bazą javax.sql.rowset javax.faces.model.datamodel Wszystkie źródła danych muszą być jawnie lub niejawnie opakowane w DataModel Podklasy ScalarDataModel, ListDataModel, ArrayDataModel, ResultSetDataModel, ResultDataModel

75 h:datatable dla tablicy obiektów w (1/4) 303 Book.java public class Book { private String author; private String title; public Book() {} BookBean.java public class BooksBean { public Book [] getbooks() { Book [] books = { new Book("Adam Mickiewicz", "Pan Tadeusz"), new Book("Joanna Chmielewska", "Depozyt"), new Book("Ernest Hemingway", "Komu bije"), new Book("William Wharton", "Ptasiek") }; } } return books; public Book(String a, String t) { this.author = a; this.title = t; } } public void setauthor(string author) {...} public String getauthor() {...} public void settitle(string title) {...} public String gettitle() {...}

76 h:datatable dla tablicy obiektów w (2/4) 304 Rejestracja źródła danych jako managed bean w faces-config.xml faces-config.xml <managed-bean> <managed-bean-name> booksbean </managed-bean-name> <managed-bean-class> mypackage.booksbean </managed-bean-class> <managed-bean-scope> request </managed-bean-scope> </managed-bean> Dodanie komponentu datatable na stronie

77 h:datatable dla tablicy obiektów w (3/4) 305 Wskazanie właściwości komponentu managed bean jako źródłowej kolekcji danych Podanie klasy reprezentującej strukturę elementu kolekcji jest opcjonalne. Umożliwia kreatorowi automatyczne wypełnienie zawartości kolumn i ich nagłówków! Ręczne wprowadzenie nazwy zmiennej, która będzie reprezentować kolejne elementy

78 h:datatable dla tablicy obiektów w (4/4) 306 h:column definuje kolumnę tabeli f:facet w tabeli definiuje nagłówek (header) i stopkę (footer) Uwaga: Zawartość nie-jsf (np. HTML) musi być ujęta w element f:verbatim, aby była wyświetlona we właściwym miejscu ksiazki.jsp <h:datatable value="#{booksbean.books}" var="book"> <h:column> <f:facet name="header"> <h:outputtext value="title"/> </f:facet> <h:outputtext value="#{book.title}"/> </h:column> <h:column> <f:facet name="header"> <f:verbatim>author</f:verbatim> </f:facet> <h:outputtext value="#{book.author}"/> </h:column> </h:datatable>

79 Dostosowywanie wyglądu Klasy CSS 307 Elementy z biblioteki znaczników JSF HTML zawierają atrybut styleclass wskazujący klasę zdefiniowaną w dołączonym arkuszu stylów CSS Element h:datatable zawiera kilka atrybutów umożliwiających specyfikację stylu: styleclass columnclasses, footerclass, headerclass, rowclasses styl.css.nieparzysty { background-color: Yellow; color: black; }.parzysty { background-color: Cyan; color: black; } ksiazki.jsp <head> <link href="css/styl.css" rel="stylesheet"/>... </head>... <h:datatable value="#{booksbean.books}" var="book" rowclasses="nieparzysty, parzysty"> </h:datatable>

80 h:datatable Prezentacja wyników zapytań do bazy danych 308 Sposoby przygotowania danych źródłowych: Wydobycie danych ze zbioru wynikowego JDBC i ich umieszczenie w tablicy lub liście obiektów Wymaga wielu linii kodu i utworzenia klasy reprezentującej wiersze wyniku zapytania Sensowne przy wykorzystaniu technologii mapowania obiektowo-relacyjnego i wspierających je kreatorów (np. Oracle TopLink + JDeveloper) Bezpośrednie wykorzystanie ResultSet JDBC ResultSet wymaga utrzymania połączenia z bazą danych... Wykorzystanie klasy ResultSupport z JSTL Przejmuje dane z ResultSet (jedna linia kodu!) Odłączony od bazy danych

81 h:datatable dla wyniku zapytania (1/2) 309 EmpsBean.java public class EmpsBean { public Result getemps() { Result r = null; try { Context ctx = new InitialContext(); DataSource ds = (DataSource)ctx.lookup ("jdbc/marek8ids"); Connection conn = ds.getconnection(); Statement stmt = conn.createstatement(); ResultSet rs = stmt.executequery("select ENAME, SAL from EMP"); r = ResultSupport.toResult(rs); } catch (Exception e) {} return r; } } <managed-bean> <managed-bean-name>empsbean</managed-bean-name> <managed-bean-class>mypackage.empsbean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> faces-config.xml

82 h:datatable dla wyniku zapytania (2/2) 310 pracownicy.jsp <h:datatable value="#{empsbean.emps}" var="emp" border="1"> <h:column> <f:facet name="header"> <f:verbatim>nazwisko</f:verbatim> </f:facet> <h:outputtext value="#{emp.ename}"/> </h:column> <h:column> <f:facet name="header"> <f:verbatim>płaca</f:verbatim> </f:facet> <h:outputtext value="#{emp.sal}"/> </h:column> </h:datatable> DataModel udostępnia wiersz wyniku zapytania w postaci obiektu, zawierającego właściwości odpowiadające wartościom atrybutów

83 Podsumowanie 311

84 JSF Podsumowanie (1/2) 312 JSF to technologia tworzenia interfejsu użytkownika pracującego po stronie serwera w aplikacjach J2EE Obejmuje również obsługę nawigacji (kontroler) Nadzieja dla programistów J2EE na dorównanie.net w zakresie prostoty tworzenia interfejsu użytkownika w aplikacjach webowych W pewnym stopniu alternatywa dla Struts Wykorzystuje doświadczenia twórców Struts i innych szkieletów aplikacji Uproszczony kontroler Ograniczone możliwości walidacji Nacisk na interfejs użytkownika Struts i JSF mogą współpracować

85 JSF Podsumowanie (2/2) 313 JSF oferuje stanowe, rozszerzalne i konfigurowalne komponenty interfejsu i możliwość tworzenia dodatkowych Podstawowym środowiskiem do renderowania komponentów jest JSP Specyfikacja JSF definiuje dwie biblioteki znaczników JSF w Oracle JDeveloper 10g Podstawowa technologia tworzenia widoków i kontrolera od Pełne wsparcie z bogactwem kreatorów i edytorów wizualnych