JavaServer Faces (JSF) Autor wykładu: Marek Wojciechowski Plan wykładu JSF jako infrastruktura aplikacji WWW JSF.x Nowe cechy JSF.0 Java Enterprise Edition (Java EE) JavaServer Faces (JSF) Java Enterprise Edition (Java EE) () JSF jako infrastruktura aplikacji WWW Technologia, ułatwia i standaryzuje tworzenie interfejsu użytkownika w aplikacjach WWW na platformie Java EE Część specyfikacji Java EE (od JEE.4) Oparta o stanowe, konfigurowalne komponenty interfejsu użytkownika pracujące po stronie serwera Koncepcja podobna do Web Forms w ASP.NET Główne elementy technologii JSF: API do reprezentowania komponentów interfejsu użytkownika i zarządzania nimi biblioteki znaczników dla JSP/Facelets Zakres funkcjonalny: stanowy, komponentowy interfejs użytkownika obsługa nawigacji między stronami walidacja danych wsparcie dla aplikacji wielojęzycznych JSF jako implementacja architektury MVC: model komponentów do tworzenia stron-widoków gotowy, konfigurowalny kontroler: FacesServlet nie obejmuje modelu, współpracuje z różnymi modelami Java Enterprise Edition (Java EE) (3) Java Enterprise Edition (Java EE) (4)
JSF Interfejs użytkownika po stronie serwera Podstawowe kroki tworzenia aplikacji JSF Przeglądarka Żądanie HTTP HTML Odpowiedź HTTP Serwer aplikacji page.jsp JSF UI Strona (JSP/Facelets) 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. Interfejs użytkownika pracuje po stronie serwera i jest renderowany jako HTML wysyłany klientowi Java Enterprise Edition (Java EE) (5) Kontroler JSF FacesServlet Konfiguracja serwletu kontrolera jako punktu wejścia do aplikacji Utworzenie stron-widoków z wykorzystaniem znaczników odwołujących się do komponentów JSF Zdefiniowanie nawigacji między stronami w pliku konfiguracyjnym aplikacji Implementacja komponentów JavaBean reprezentujących właściwości i funkcje komponentów dla stron (tzw. Backing Beans) Zadeklarowanie komponentów JavaBean, których cyklem życia ma zarządzać JSF w pliku konfiguracyjnym jako tzw. managed beans Java Enterprise Edition (Java EE) (6) Struktura kodu formularzy do wprowadzania danych Serwlet FacesServlet pełni funkcję kontrolera Stanowi pojedynczy punkt wejścia do aplikacji (web.xml) Konfiguracja poprzez plik faces-config.xml (opcjonalny w JSF.0) web.xml <servlet> <servlet-name>faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.facesservlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> Java Enterprise Edition (Java EE) (7) 3 <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> 4 <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <f:view> znaczniki HTML <h:form> znaczniki HTML + znaczniki h: JSF (+ zagnieżdżone f:) </h:form> znaczniki HTML </f:view> Java Enterprise Edition (Java EE) (8)
Przykładowa aplikacja JSF Formularz logowania Uwaga: Przykładowa implementacja na kolejnych slajdach wg specyfikacji JSF.x Nawigacja statyczna Java Enterprise Edition (Java EE) (9) <%@ page contenttype="text/html;charset=windows-50"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" 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> Java Enterprise Edition (Java EE) (0) Komponenty Backing Beans <h:commandbutton value="zaloguj" id="submitbutton" action="success"/> faces-config.xml <navigation-rule> <from-view-id>/</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/ok.jsp</to-view-id> </navigation-case> </navigation-rule> Komponenty Backing Beans definiują właściwości i metody powiązane z komponentami interfejsu użytkownika każda właściwość powiązana 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 Java Enterprise Edition (Java EE) () Java Enterprise Edition (Java EE) ()
Koncepcja managed beans Unified Expression Language JSF oferuje deklaratywny mechanizm tworzenia komponentów JavaBean Backing Beans Application logic beans 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ń Unified EL Połączenie języka wyrażeń (EL) JSP z językiem wyrażeń opracowanym dla pierwszych wersji JSF JSP wykorzystuje natychmiastowe wartościowanie wyrażeń notacja ${} tylko odczyt danych (wyrażenia read-only) dostęp do właściwości obiektów JSF wykorzystuje odroczone wartościowanie wyrażeń notacja #{} odczyt i zapis danych dostęp do właściwości i metod obiektów Java Enterprise Edition (Java EE) (3) Backing Bean dla formularza logowania (/) Java Enterprise Edition (Java EE) (4) Backing bean dla formularza logowania (/) package view.backing; public class Login { private String username; private String password; Login.java 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; } } <managed-bean> faces-config.xml <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> Java Enterprise Edition (Java EE) (5) <%@ page contenttype="text/html;charset=windows-50"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" 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> Java Enterprise Edition (Java EE) (6)
Sposoby wiązania Backing Beans z komponentami interfejsu Przekazywanie wartości między stronami poprzez Backing Beans 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}" /> zalecane w większości sytuacji Powiązanie właściwości z instancją komponentu: np. <h:inputtext binding="#{userbean.usernamecomponent}" /> wymagane gdy istnieje potrzeba programowego modyfikowania właściwości komponentu ok.jsp <%@ page contenttype="text/html;charset=windows-50"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" 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> Java Enterprise Edition (Java EE) (7) Nawigacja dynamiczna (/) Java Enterprise Edition (Java EE) (8) Nawigacja dynamiczna (/) marek *** Login.java success failure ok.jsp error.jsp public class Login { private String username; private String password; public String register() { if (username.equals(password)) return "success"; else return "failure"; } } <h:commandbutton value="zaloguj" id="submitbutton action="#{loginbean.register}"/> Wynik akcji zwracany przez metodę komponentu Backing Bean Java Enterprise Edition (Java EE) (9) faces-config.xml <navigation-rule> <from-view-id>/</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> Java Enterprise Edition (Java EE) (0)
Walidacja danych w JSF Walidacja w JSF Przykład Walidacja ręczna - w metodzie akcji Niejawna walidacja automatyczna użycie atrybutu REQUIRED właściwości Backing Beans typów prostych system wyświetla formularz ponownie wyświetlanie komunikatów o błędach: <h:message> Jawna walidacja automatyczna użycie predefiniowanych komponentów walidatorów system wyświetla formularz ponownie wyświetlanie komunikatów o błędach: <h:message> Walidatory aplikacji (custom validators) Obowiązkowa nazwa użytkownika <h:inputtext binding="#{loginbean.inputtext}" id="inputtext" required="true"/> <h:message for="inputtext" /> Java Enterprise Edition (Java EE) () Walidacja w JSF Przykład Java Enterprise Edition (Java EE) () Modyfikacja standardowych komunikatów (obowiązkowość, walidacja, konwersja) Hasło od 4 do 6 znaków <h:inputsecret binding="#{loginbean.inputsecret}" id="inputsecret"> <f:validatelength maximum="6" minimum="4"/> </h:inputsecret> <h:message for="inputsecret" /> Własny plik komunikatów nadpisujący ustawienia z domyślnego pliku zawartego w bibliotekach JSF ErrorMessages.properties javax.faces.component.uiinput.required=value is required. javax.faces.validator.lengthvalidator.maximum=value is greater than allowable maximum of ''{0}'' javax.faces.validator.lengthvalidator.minimum=value is less than allowable minimum of ''{0}'' <application> <message-bundle>errormessages</message-bundle> </application> faces-config.xml Od JSF. możliwe użycie atrybutów komponentów: requiredmessage, convertermessage, validatormessage Java Enterprise Edition (Java EE) (3) Java Enterprise Edition (Java EE) (4)
Obsługa zdarzeń w aplikacji JSF Rodzaje Event Listeners Kategorie zdarzeń w aplikacji JSF : 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) zwracają wartości decydujące o nawigacji Event listeners nie wpływają bezpośrednio na nawigację 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 ActionListener - Przykład Java Enterprise Edition (Java EE) (5) Java Enterprise Edition (Java EE) (6) ValueChangeListener Przykład (/) Strona JSF <h:commandbutton actionlistener= "#{bean.sideeffect}" immediate="true" /> Klasa Backing Bean public void sideeffect(actionevent event) { } // np. aktywacja/deaktywacja innych // elementów formularza Java Enterprise Edition (Java EE) (7) Pole wyboru uaktywniające przycisk zatwierdzający formularz logowania <h:commandbutton value="zaloguj" disabled= true /> <h:selectbooleancheckbox binding="#{loginbean.selectbooleancheckbox}" id="selectbooleancheckbox" valuechangelistener="#{loginbean.checkboxchanged}" onchange="submit()"/> Java Enterprise Edition (Java EE) (8)
ValueChangeListener Przykład (/) Internacjonalizacja aplikacji JSF (/) Problem niechcianej walidacji <h:selectbooleancheckbox immediate="true"/> public void checkboxchanged( ValueChangeEvent valuechangeevent) { if (selectbooleancheckbox.isselected()) commandbutton.setdisabled(false); else commandbutton.setdisabled(true); Login.java FacesContext context = FacesContext.getCurrentInstance(); context.renderresponse(); } Java Enterprise Edition (Java EE) (9) Internacjonalizacja aplikacji JSF (/) faces-config.xml <application> <locale-config> <default-locale>en</default-locale> <supported-locale>pl</supported-locale> </locale-config> <message-bundle>errormessages</message-bundle> </application> Java Enterprise Edition (Java EE) (30) Prezentacja danych tabelarycznych komunikaty.properties sorryprompt=sorry 4 3 5 komunikaty_pl.properties sorryprompt=niestety <f:view locale="#{facescontext.externalcontext.request.locale}"> <f:loadbundle basename="komunikaty" var="kom"/> <h:outputtext value="#{kom.sorryprompt}"/> error.jsp domyślnie <h:outputtext value="#{loginbean.username}"/> </f:view> lub: #{kom['sorryprompt']} Java Enterprise Edition (Java EE) (3) Komponent h:datatable umożliwia prezentację dynamicznej zawartości w formie tabelki HTML liczba wierszy tabeli nieznana na etapie projektowania strony typowy scenariusz przy zapytaniach do bazy danych h:datatable zawiera definicję struktury wiersza z danymi i opcjonalnie wiersza nagłówka i stopki Java Enterprise Edition (Java EE) (3)
Źródła danych dla h:datatable h:datatable Przykład (/) Lista lub tablica komponentów JavaBean Pojedynczy komponent JavaBean java.sql.resultset javax.servlet.jsp.jstl.sql.result javax.sql.rowset javax.faces.model.datamodel Java Enterprise Edition (Java EE) (33) h:datatable Przykład (/) faces-config.xml 3 public class EmpsBean { EmpsBean.java public Result getemps() { Result r = null; try { Statement stmt = conn.createstatement(); ResultSet rs = stmt.executequery( "SELECT nazwisko, etat FROM pracownicy"); r = ResultSupport.toResult(rs); } catch (Exception e) {} return r; }} <managed-bean> 4 <managed-bean-name>empsbean</managed-bean-name> <managed-bean-class>mypackage.empsbean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> Java Enterprise Edition (Java EE) (34) JSF w środowisku IDE (/) 3 4 5 pracownicy.jsp <h:datatable value="#{empsbean.emps}" var="emp" border=""> <h:column> <f:facet name="header"> <f:verbatim>nazwisko</f:verbatim> </f:facet> <h:outputtext value="#{emp.nazwisko}"/> </h:column> <h:column> <f:facet name="header"> <f:verbatim>etat</f:verbatim> </f:facet> <h:outputtext value="#{emp.etat}"/> </h:column> </h:datatable> Java Enterprise Edition (Java EE) (35) Java Enterprise Edition (Java EE) (36)
JSF w środowisku IDE (/) JSF.0 Dwuklik na przycisku public String commandbutton_action() { } // Add event code here return null; Login.java Zastąpienie JSP przez Facelets Parametry widoku, linki obsługujące żądania GET Uproszczenie nawigacji Wsparcie dla AJAX-a (Partial Page Updates) Partial State Saving Konfiguracja przez adnotacje faces-config.xml opcjonalny Nowe zasięgi view (bieżący widok) flash (następna strona w sesji) Facelets Java Enterprise Edition (Java EE) (37) Zalety Facelets Java Enterprise Edition (Java EE) (38) Język definicji widoków opracowany z myślą o JSF brak problemu niezgodności cykli życia JSP/JSF Oparty o XHTML Oferuje własne biblioteki znaczników, ale obsługuje również: znaczniki JSF (Core i HTML) znaczniki JSTL (Core i Functions) Obsługuje Unified EL Unika problemów niezgodności cykli życia JSP/JSF Wspiera reużywalność kodu szablony komponenty złożone Szybka kompilacja Walidacja wyrażeń EL w czasie kompilacji Wydajne renderowanie strony Java Enterprise Edition (Java EE) (39) Java Enterprise Edition (Java EE) (40)
Facelets przykład strony JSF.0 Managed Beans success.xhtml <?xml version='.0' encoding='utf-8'?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML.0 Transitional//EN" "http://www.w3.org/tr/xhtml/dtd/xhtml-transitional.dtd"> <html xmlns="http://www.w3.org/999/xhtml" xmlns:h="http://java.sun.com/jsf/html"> <f:view> - opcjonalny <h:head> <title>powitanie</title> </h:head> <h:body> Witaj <h:outputtext value="#{loginbean.username}" />! </h:body> </html> @ManagedBean(name="LoginBean") @RequestScoped public class LoginBean { private String username; public String getusername() { return username; } public void setusername(string username) { this.username = username; } } LoginBean.java Java Enterprise Edition (Java EE) (4) JSF.0 Uproszczona nawigacja Podsumowanie Java Enterprise Edition (Java EE) (4) <h:commandlink action="index.xhtml" value="back" /> <h:commandbutton id="loginbutton" value="log in" action="#{loginbean.login}" /> public String login() { } if (password.equals(username)) return "success.xhtml"; else return "failure.xhtml"; JSF jest podstawowym frameworkiem do implementacji interfejsu użytkownika w aplikacjach Java EE JSF jest oparty o architekturę MVC W JSF.0 nastąpiły znaczące zmiany uproszczenie konfiguracji aplikacji (XML zastąpiony przez adnotacje, mniej poziomów pośrednich) zastąpienie JSP przez Facelets Java Enterprise Edition (Java EE) (43) Java Enterprise Edition (Java EE) (44)
Materiały dodatkowe The Java EE 6 Tutorial, Volume I http://java.sun.com/javaee/6/docs/tutorial/doc/ Java Enterprise Edition (Java EE) (45)