229

Tworzenie aplikacji J2EE w technologii JavaServer Faces (JSF)

230

Plan prezentacji
Wprowadzenie do JavaServer Faces (JSF) Podstawy JavaServer Faces
Nawigacja, backing beans, jzyk wyrae JSF

Tworzenie aplikacji JSF w rodowisku JDeveloper 10g Rozbudowa aplikacji JavaServer Faces
Walidacja, konwersja, obsuga zdarze Wsparcie dla aplikacji wielojzycznych

Tworzenie aplikacji bazodanowych w JavaServer Faces

Prezentowanie danych tabelarycznych Dostp do wynikw zapyta

Podsumowanie

231

Wprowadzenie

232

Czym jest JavaServer Faces (JSF)?

Wg firmy Sun: server-side user interface component framework for Java technology-based web applications Gwne elementy technologii JSF to:
API do reprezentowania komponentw interfejsu uytkownika i zarzdzania ich stanem, obsugi zdarze, walidacji po stronie serwera, definiowania nawigacji midzy stronami, wspierania aplikacji wielojzycznych Dwie biblioteki znacznikw dla JavaServer Pages (JSP)
Do odwoywania si do komponentw interfejsu uytkownika ze stron JSP Do wizania komponentw z obiektami po stronie serwera

233

Historia JavaServer Faces

Jedna z modszych specyfikacji w ramach J2EE Opracowana w ramach Java Community Process jako JSR 127 (Java Specification Request) przez grup ekspertw wywodzcych si z projektw:
Jakarta Struts (w tym Craig McClanahan twrca Struts) Oracle Application Server, Sun Java Studio, IBM WebSphere Studio, ATG, ...

Pierwsza wczesna wersja specyfikacji (JSF 1.0 EA) we wrzeniu 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

Specyfikacja, implementacje i biblioteki komponentw JSF

Technologi JavaServer Faces definiuje specyfikacja firmy Sun jako cz J2EE Do tworzenia i uruchamiania aplikacji korzystajcych opartych o technologi JSF konieczna jest implementacja JSF
JavaServer Faces RI (referencyjna implementacja Sun) Apache MyFaces (http://myfaces.apache.org)

234

Dostpne biblioteki komponentw JSF:

Dodatkowe komponenty MyFaces Oracle ADF Faces (podarowane Apache Software Foundation)

Oracle wykorzystuje implementacj firmy Sun (wersja 1.1 w JDeveloper 10.1.3), oferujc swoj bibliotek komponentw ADF Faces

235

Nadzieje wizane z JSF (1/2)

Zalety platformy J2EE w porwnaniu z .NET:
Niezaleno od konkretnego producenta Dostpno narzdzi i serwerw open source

W zakresie wygody tworzenia oprogramowania przewaga leaa dotychczas po stronie Microsoft .NET
Dopracowane rodowisko RAD: Visual Studio Aplikacje internetowe tworzone w stylu bardzo zblionym do tradycyjnych aplikacji (WebForms)

236

Nadzieje wizane z JSF (2/2)

Technologia JSF jest standardem, ktry w poczeniu ze wspierajcymi go rodowiskami IDE ma uatwi i ustandaryzowa tworzenie interfejsu uytkownika w aplikacjach J2EE
Koncepcja JSF zbliona do WebForms w .NET JSF jako standard ma szanse na wiksze wsparcie przez dostawcw narzdzi 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

JSF Interfejs uytkownika po stronie serwera

Browser
HTTP request page.jsp

237

Web Container

renders HTML jsfUI HTTP response

Interfejs uytkownika pracuje po stronie serwera i jest renderowany jako HTML wysyany klientowi Strona JSP odwouje si do komponentw interfejsu zaimplementowanych w JSF poprzez znaczniki Interfejs uytkownika zarzdza komponentami i zwizanymi z nimi walidatorami, konwerterami itp.

238

JSF jako implementacja idei MVC

Gwnym zadaniem JSF jest dostarczenie modelu komponentw do tworzenia interfejsu uytkownika (widoku)
Komponenty konfigurowalne, rozszerzalne, stanowe i niezalene od technologii prezentacji Gotowe komponenty + moliwo tworzenia wasnych JSP jako podstawowe rodowisko renderowania komponentw JSF
Kada implementacja JSF musi wspiera JSP

JSF dostarcza implementacj kontrolera w postaci konfigurowalnego serwletu FacesServlet JSF nie wspiera tworzenia modelu. Udostpnia jedynie mechanizmy wice obiekty modelu z pozostaymi komponentami aplikacji

239

Komponenty JSF
Podstaw specyfikacji JSF jest opis modelu komponentw interfejsu uytkownika
Zestaw standardowych, gotowych komponentw API (Application Programming Interface) do rozszerzania standardowych komponentw i projektowania zupenie nowych

Przykady standardowych komponentw:

UIRoot korze drzewa komponentw interfejsu UIForm formularz do przesyania danych do aplikacji Proste komponenty interjejsu np. UIInput, UICommand, UISelectBoolean, ... Zoone komponenty interfejsu np. UIData - tabele

Kady komponent interfejsu uytkownika moe by uzupeniony o mechanizmy:

Konwersji i walidacji Obsugi zdarze i bdw

240

Relacje JSF z JSP i Struts

JSF nie wymaga JSP jako technologii widoku, ale JSP jest domyln technologi do renderowania komponentw JSF
Kada implementacja JSF musi posiada wsparcie dla JSP Definiowane przez specyfikacj biblioteki znacznikw JSF dla JSP uatwiaj i standaryzuj korzystanie z JSF w poczeniu z JSP Renderowanie komponentw JSF moliwe rwnie np. w Velocity JSF zakada wersj JSP 1.2, wsppracuje z JSP 2.0, ale dopiero przysze wersje JSF bd wykorzystywa moliwoci JSP 2.0

Funkcjonalno JSF pokrywa si ze Struts w zakresie obsugi nawigacji i walidacji

JSF uproszczone w porwnaniu ze Struts JSF i Struts mog (i zakada si, e czsto bd!) wsppracowa w ramach jednej aplikacji:
JSF wykorzystane do komponentw interfejsu uytkownika Struts jako szkielet caej aplikacji do obsugi nawigacji

241

Porwnanie JSF i Struts

Inny cel, cho funkcjonalno si nakada:
Struts - Java web application framework JSF - user-interface framework for Java web applications

Zalety JSF w porwnaniu ze Struts:

Model komponentw interfejsu uytkownika Prostszy kontroler i prostsza konfiguracja aplikacji Lepszy, zwizy jzyk wyrae Wiksza szansa na wsparcie ze strony narzdzi IDE Wsparcie dla innych technologii prezentacji ni HTML (np. dla PDA) Sabsze standardowe komponenty walidujce Brak aplikacji startowej (na wzr struts-blank) Brak walidacji po stronie klienta (jak oparta o JavaScript w Struts) Struts ju ma dobr pozycj na rynku, JSF dopiero si przebija

Wady JSF w porwnaniu ze Struts

242

JSF w Oracle JDeveloper 10g

Pene wsparcie dla JSF w wersji JDeveloper 10g 10.1.3:
Domylnie implementacja Sun JavaServer Faces RI Moliwo wykorzystania implementacji MyFaces Biblioteka komponentw Oracle ADF Faces Wizualny edytor nawigacji, wsparcie dla edycji i generacja plikw konfiguracyjnych, palety komponentw ze znacznikami JSF dla JSP

W przypadku wersji JDeveloper 10g 10.1.2 i wczeniejszych konieczne rczne dodanie wsparcia dla JSF
Naley zarejestrowa biblioteki JSF i znacznikw JSF dla JSP oraz doda biblioteki znacznikw do palety komponentw Wymagana rczna konfiguracja plikw web.xml i faces-config.xml Brak wizualnych narzdzi do edycji regu nawigacji aplikacji JSF

243

JSF w Eclipse
Aby uzyska wsparcie dla wizualnego projektowania JSF na poziomie JDeveloper 10.1.3 naley zainstalowa wtyczk (plug-in) np. Faces IDE

244

Podstawy JavaServer Faces

- nawigacja - backing beans, managed beans - jzyk wyrae JSF

245

Przykadowa aplikacja
Opis aplikacji:
Aplikacja obejmuje 3 strony Pierwsza strona prezentuje formularz logowania Po weryfikacji nazwy uytkownika i hasa nastpuje przekierowanie do strony informujcej o sukcesie lub niepowodzeniu logowania

246

Przepyw sterowania w aplikacji JSF

1) Zbir komponentw stanowicych interfejs jest zaprezentowany uytkownikowi w postaci formularza 2) Formularz wywouje sam siebie
Atrybut ACTION zawiera adres formularza

3) Tworzony jest Java Bean zawierajcy dane z formularza (tzw. backing bean) 4) Wywoywana jest akcja zwizana z zatwierdzeniem formularza
Metoda akcji zwraca warunek

5) Prezentowana jest strona zwizana z warunkiem

Podstawowe kroki tworzenia aplikacji JSF

1) Utworzenie stron z wykorzystaniem znacznikw odwoujcych si do komponentw JSF 2) Zdefiniowanie nawigacji midzy stronami w pliku konfiguracyjnym aplikacji 3) Implementacja komponentw Java Bean reprezentujcych dane z formularzy (backing beans) 4) Zadeklarowanie backing beans w pliku konfiguracyjnym aplikacji UWAGA: Powysze kroki mog by realizowane wspbienie lub w dowolnej kolejnoci

247

248

Pliki konfiguracyjne aplikacji JSF

web.xml (w katalogu WEB-INF/)
Standardowy plik konfiguracyjny moduu webowego aplikacji J2EE Zawiera deklaracj serwletu kontrolera aplikacji i mapowanie odpowiadajcego mu wzorca adresu

faces-config.xml (w katalogu WEB-INF/)

Specyficzny plik konfiguracyjny aplikacji JSF Zawiera reguy nawigacji, deklaracje backing beans, itd.

Deklaracja i mapowanie dla serwletu kontrolera JSF

web.xml

249

<!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> <url-pattern>/faces/*</url-pattern> <url-pattern>*.jsf</url-pattern> (domylny w JDeveloper)

Alternatywne popularne mapowania:

Struktura kodu formularzy do wprowadzania danych JSP/JSF

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <f:view> znaczniki HTML <h:form> znaczniki HTML + znaczniki h: JSF (+ zagniedone f:) </h:form> znaczniki HTML </f:view> Strona zawierajca znaczniki JSF jest reprezentowana w postaci drzewa komponentw. Korzeniem drzewa jest komponent UIViewRoot, reprezentowany przez znacznik <f:view>. Dlatego wszystkie znaczniki JSF uyte na stronie musz by zawarte wewntrz elementu <f:view></f:view>. <h:form> reprezentuje formularz HTML <FORM>. ACTION automatycznie wskazuje na biec stron (strona wywouje sama siebie). METHOD przyjmuje warto POST (obowizkowo). Biblioteka znacznikw JSF reprezentujcych znaczniki HTML (w tym elementy formularzy) (zwyczajowy prefiks: h) Biblioteka znacznikw JSF niezalenych od technologii prezentacji (np. do walidacji, obsugi zdarze, ...) (zwyczajowy prefiks: f)

250

251

Formularz logowania
login.jsp

<%@ page contentType="text/html;charset=windows-1250"%> <%@ 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>Uytkownik: <h:inputText value="#{loginBean.username}" id="username"/> <p>Haso: <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 zaley od mapowania w pliku web.xml

252

Nawigacja statyczna

login.jsp

... <h:commandButton value="Zaloguj" id="submitButton" action="success"/> ...

faces-config.xml

Nawigacja statyczna: Wynik akcji zaszyty na stae w deklaracji przycisku

<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 zaley od wprowadzonych danych, konieczna nawigacja dynamiczna

253

Komponenty backing beans

Komponenty backing beans definiuj waciwoci i metody powizane z komponentami interfejsu uytkownika
Kada waciwo powizania z wartoci lub instancj komponentu Dodatkowo backing bean moe zawiera metody:
Do walidacji danych komponentu Do obsugi zdarze generowanych przez komponent Do przetwarzania zwizanego z nawigacj

Ich klasy musz spenia reguy Java Beans:

Bezargumentowy konstruktor Brak publicznych pl Dostp do waciwoci poprzez metody setXXX/getXXX:
public public public public String getName() void setName(String n) boolean isActive() void setActive(boolean a)

254

Koncepcja managed beans

JSF oferuje deklaratywny mechanizm tworzenia komponentw JavaBean
Backing beans komponenty o zasigu request, zwizane z konkretn stron Application logic beans niepenice roli backing beans, zawierajce kod i waciwoci niezwizane z konkretn stron

Komponenty skonfigurowane w pliku faces-config.xml okrelane s jako managed beans

Runtime JSF utworzy instancj na danie, gdy napotka wyraenie odwoujce si do komponentu

Odwoania do managed beans z poziomu kodu strony JSF realizowane s za pomoc jzyka wyrae JSF

255

Jzyk wyrae JSF

Jzyk wyrae JSF (JSF Expression Language) skadniowo jest identyczny z JSP Expression Language
Dostpnym od JSP 2.0 Wykorzystywanym rwnie przez JSTL

Rnica polega na tym e w JSP/JSTL wyraenia su jedynie do wywietlania wartoci, a w JSF do wywietlania i ustawiania waciwoci
JSP EL wywouje tylko metody getXXX JSF EL wywouje metody getXXX i setXXX

Powysza rnica jest powodem innej notacji w JSF (#{...}) ni w JSP i JSTL (${...}) Uwagi:
Uywany tylko w atrybutach znacznikw JSF Dostp do managed beans i zasigw request, session, application

Backing bean dla formularza logowania (1/2)

Login.java

256

package view.backing; public class Login { private String username; private String password; public public public public }
faces-config.xml

Definicja klasy komponentu

void setUsername(String t) { this.username = t; } String getUsername() { return username; } void setPassword(String t) { this.password = t; } String getPassword() { return password; }

<faces-config ...> ... <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>

Deklaracja komponentu (dziki niej implementacja JSF sama utworzy instancj komponentu gdy bdzie potrzebna managed bean)

Backing bean dla formularza logowania (2/2)

login.jsp

257

<%@ page contentType="text/html;charset=windows-1250"%> <%@ 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>Uytkownik: <h:inputText value="#{loginBean.username}" id="username"/> <p>Haso: <h:inputSecret value="#{loginBean.password}" id="password"/> ... </h:form></body> </html> Po zatwierdzeniu formularza i wysaniu wprowadzonych danych </f:view> do serwera, zostan one automatycznie umieszczone we wskazanych waciwociach wskazanego komponentu Do wizania komponentw interfejsu uytkownika z waciwociami komponentu backing bean wykorzystany jzyk wyrae JSF (#{...})

Sposoby wizania backing beans z komponentami interfejsu

Backing bean to komponent Java Bean, powizany z komponentami interfejsu uywanymi na stronie Kada z waciwoci komponentu backing bean powizana jest z wartoci lub instancj komponentu Powizanie waciwoci z wartoci komponentu:

258

np. <h:inputText id="uName" value="#{UserBean.userName}" /> (waciwo typu String, Integer, int, double, ...) Zalecane w wikszoci sytuacji
Automatyczne konwersje typw danych Komponent backing bean nie odwouje si do JSF API

Powizanie waciwoci z instancj komponentu:

np. <h:inputText binding="#{UserBean.userNameComponent}" /> (waciwo typu UIInput) Wymagane gdy istnieje potrzeba programowego modyfikowania waciwoci komponentu Wykorzystywane przez kreator w JDeveloperze

Przekazywanie wartoci midzy stronami poprzez backing beans

ok.jsp

259

<%@ page contentType="text/html;charset=windows-1250"%> <%@ 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 haso to: <h:outputText value="#{loginBean.password}"/>. </h:form></body> </html> </f:view> Dostp do waciwoci komponentu backing bean za pomoc znacznika h:outputText

260

Nawigacja dynamiczna (1/2)

login.jsp
marek ***

success

ok.jsp

failure
login.jsp

error.jsp

<h:commandButton value="Zaloguj" id="submitButton action="#{loginBean.register}"/>

Login.java public class Login { private String username; private String password; ... public String register() { if (username.equals(password)) return "success"; else return "failure"; } }

Wynik akcji zwracany przez metod (waciwo) komponentu backing bean

261

Nawigacja dynamiczna (2/2)

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> ... Jeli metoda akcji zwrci warto nieuwzgldnion w regule nawigacji, nastpi ponowne wywoanie biecej strony

262

Tworzenie aplikacji JSF w rodowisku JDeveloper 10g (10.1.3)

263

Wsparcie JSF w JDeveloper 10.1.3

Kompletny zbir standardowych komponentw JSF Biblioteka komponentw ADF Faces Zintegrowane rodowisko wizualnego tworzenia aplikacji:
Wizualna edycja nawigacji midzy stronami Paleta waciwoci do przegldania i edycji waciwoci komponentw na stronie Automatyczne definiowanie backing beans Okna dialogowe wspierajce tworzenie powiza w JSF EL Wizualna edycja pliku faces-config.xml

264

Tworzenie nowej aplikacji

Tu mona wybra szablon uwzgldniajcy JSF, wtedy projekty dla modelu i widoku oraz plik faces-config.xml w projekcie widoku zostan utworzone automatycznie

Utworzenie pliku konfiguracyjnego aplikacji JSF

265

Wybr wersji specyfikacji serwletw / JSP

Wraz z plikiem faces-config.xml tworzona jest caa struktura aplikacji webowej J2EE
<servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping>

266

Wizualny edytor nawigacji

Umoliwia:
Graficzn edycj regu nawigacji na diagramie Dodawanie nowych stron do diagramu
Tworzenie nowych z palety komponentw Dodawanie wczeniej utworzonych stron JSP/JSF z nawigatora obiektw (drag & drop)

267

Tworzenie nowej strony

Dwuklik na ikonie

Utworzenie nowego, automatycznie zarzdzanego komponentu backing bean, z ktrego waciwociami bd wizane komponenty interfejsu na stronie (opcjonalnie)

268

Tworzenie nowej strony efekt (1/2)

login.jsp
<%@ page contentType="text/html;charset=windows-1250"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" 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--%>

269

Tworzenie nowej strony efekt (2/2)

Login.java
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; } }

faces-config.xml
<faces-config xmlns="http://java.sun.com/JSF/Configuration"> <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>

270

Wizualna edycja formularza JSP/JSF

Edycja strony (drag & drop)
Elementy formularza z palety JSF HTML Mona do dekoracji wykorzystywa elementy HTML Common (np. tabelka) rdo strony i klasa backing bean (!) uaktualniane na bieco

Zmiana etykiety przycisku w kodzie lub w palecie waciwoci (value)

Wizualna edycja formularza JSP/JSF wynikowa klasa

package mypackage.backing; import import import import

271

Login.java

javax.faces.component.html.HtmlCommandButton; javax.faces.component.html.HtmlForm; javax.faces.component.html.HtmlInputSecret; javax.faces.component.html.HtmlInputText; JDeveloper generuje klas

public class Login { private HtmlForm form1; private HtmlInputText inputText1; private HtmlInputSecret inputSecret1; private HtmlCommandButton commandButton1;

backing bean z waciwociami odpowiadajcymi instancjom komponentw a nie ich wartociom! (elastyczniejsze z dwch moliwych rozwiza)

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; } }

Wizualna edycja formularza JSP/JSF wynikowa strona JSP

login.jsp
<f:view> <body> <h:form binding="#{loginBean.form1}" id="form1"> <! Pominite znaczniki definiujce tabelk HTML --> Uytkownik: <h:inputText binding="#{loginBean.inputText1}" id="inputText1"/> Haso: <h:inputSecret binding="#{loginBean.inputSecret1}" id="inputSecret1"/> <h:commandButton value="Zaloguj" binding="#{loginBean.commandButton1}" id="commandButton1"/> </h:form> </body> </f:view> Powizanie z instancj komponentu, a nie z wartoci,

272

a wic poprzez atrybut binding, a nie value!

273

Wizualna edycja regu nawigacji

Pierwsza strzaka domylnie dostaje etykiet success (etykiety mona 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>

274

Utworzenie metody akcji

Login.java
... public String commandButton1_action() { // Add event code here... return null; } ...

Dwuklik na przycisku

Rczna edycja
... public String commandButton1_action() { String user = (String) inputText1.getValue(); String pass = (String) inputSecret1.getValue(); if (user.equals(pass)) return "success"; else return "failure"; } ...

Dostp do danych przekazanych poprzez backing beans (1/2)

Dwuklik na ikonie

275

Strona nie suy do wprowadzania danych, wic mona nie deklarowa dla niej komponentu backing bean Do wywietlenia danych przekazanych przez backing bean suy element h:outputText

Powizanie outputText z waciwoci backing bean za pomoc palety waciwoci

Dostp do danych przekazanych poprzez backing beans (2/2)

276

Wprowadzenie wartoci #{ uaktywnia przycisk wywoujcy okno dialogowe pozwalajcy na powizanie z waciwoci komponentu backing bean (lub innego dostpnego obiektu np. powiza z modelem)

277

Gotowa aplikacja

marek/marek

marek/xxx

278

Rozbudowa aplikacji JavaServer Faces

- walidacja - konwersja - obsuga zdarze - wsparcie dla aplikacji wielojzycznych - ukrycie rde JSP przed dostpem

Walidacja danych w aplikacjach webowych

Typowe cele walidacji w aplikacjach webowych:
Sprawdzenie czy zostay wprowadzone wartoci do wszystkich wymaganych pl formularza i czy format wartoci jest odpowiedni Ponowne wywietlenie formularza w przypadku bdw
Z komunikatami o bdach Z zachowaniem poprawnych wartoci

279

280

Walidacja danych w aplikacjach JSF

Walidacja rczna
Walidacja w metodach setXXX i/lub metodzie akcji Metoda akcji zwraca null by wymusi ponowne wywietlenie formularza

Niejawna walidacja automatyczna

Uycie atrybutu required Waciwoci backing beans typw prostych System wywietla formularz ponownie gdy bd konwersji Wywietlanie komunikatw o bdach: h:message

Jawna walidacja automatyczna

Uycie predefiniowanych walidatorw: f:validateLength, f:validateDoubleRange, f:validateLongRange System wywietla formularz ponownie gdy bd walidacji Wywietlanie komunikatw o bdach: h:message

Walidatory aplikacji (custom validators)

Implementuj interfejs Validator Rejestrowane w faces-config.xml

281

Przykady walidacji w JSF (1/2)

Obowizkowa nazwa uytkownika:
Ustawienie atrybutu required Dodanie elementu h:message i powizanie go z polem formularza

<h:inputText binding="#{loginBean.inputText1}" id="inputText1" required="true"/> <h:message for="inputText1" binding="#{loginBean.message1}" id="message1"/>

282

Przykady walidacji w JSF (2/2)

Haso od 4 do 6 znakw:
Dodanie walidatora f:validateLength i ustawienie jego waciwoci Dodanie elementu h:message i powizanie 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"/>

283

Konwertery
Konwertery s uywane gdy:
Wymagana jest inna konwersja ni standardowa dokonywana automatycznie (do typw takich jak int, float, Integer, Boolean, ...) Wymagane jest zaawansowane formatowanie (liczb, dat)

Konwersja a walidacja
Konwerter moe suy do walidacji generuje wyjtek i tworzy komunikat o bdzie gdy konwersja si nie powiedzie Konwerter rwnie zmienia format wywietlania, a nie tylko konwertuje wprowadzane dane Walidatory mog by uywane tylko z komponentami do wprowadzania danych, a konwertery rwnie z h:outputText

Standardowe konwertery:
f:convertNumber, f:convertDateTime

Niestandardowe konwertery tworzy si implementujc 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>>

Warunkowe renderowanie i aktywacja komponentw

Poprzez zmian wartoci atrybutu rendered mona spowodowa, e komponent nie bdzie wywietlany (domylnie true)
<h:commandButton value="Zaloguj" binding="#{loginBean.commandButton1}" action="#{loginBean.commandButton1_action}" rendered="false"/>

284

Poprzez zmian wartoci atrybutu disabled mona spowodowa, e komponent nie bdzie aktywny (domylnie false)
<h:commandButton value="Zaloguj" binding="#{loginBean.commandButton1}" action="#{loginBean.commandButton1_action}" disabled="true"/> Moliwe odwoanie do metody backing bean: #{}

285

Obsuga zdarze w aplikacji JSF

Zdarzenia zachodzce w aplikacji JSF mona podzieli na dwie kategorie:
Zdarzenia inicjujce przetwarzanie po stronie logiki biznesowej Zdarzenia wpywajce jedynie na interfejs uytkownika

Kategorie procedur obsugi zdarze w JSF:

Action controllers (metody akcji)
Uruchamiane po wypenieniu komponentu backing bean danymi i po walidacji Zwracaj wartoci decydujce o nawigacji

Event listeners
Czsto uruchamiane przed wypenieniem komponentu backing bean danymi i z pominiciem walidacji Nie wpywaj bezporednio na nawigacj

286

Rodzaje Event Listeners

ActionListener
Wywoywany przez przyciski, mapy obrazkowe i linki z kodem JavaScript Elementy te automatycznie zatwierdzaj formularz

ValueChangeListener
Wywoywany 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

287

ActionListener - Przykad
Metoda obsugujca zdarzenie zwyczajowo w klasie komponentu backing bean Przypomnienie: Dla zdarze powodujcych nawigacj: atrybut action

<h:commandButton actionListener= "#{bean.sideEffect}" immediate="true" />

public void sideEffect(ActionEvent event) { // np. aktywacja/deaktywacja innych // elementw formularza }

Umoliwia obsug zdarze przed walidacj innych komponentw

Metoda w klasie komponentu backing bean, zwracajca void

288

ValueChangeListener Przykad (1/2)

Pole wyboru uaktywniajce przycisk zatwierdzajcy formularz logowania
disabled= true

Wpisanie w palecie waciwoci 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); }

289

ValueChangeListener Przykad (2/2)

<h:selectBooleanCheckbox binding="#{loginBean.selectBooleanCheckbox1}" id="selectBooleanCheckbox1" valueChangeListener="#{loginBean.checkbox1Changed}" onchange="submit()"/>

Wymagany JavaScript, aby zmiana stanu pola wyboru zatwierdzaa formularz (naley wpisa rcznie lub przez palet) Problem: Po zmianie stanu pola wyboru budzi si walidacja pl tekstowych!

Rozwizanie problemu niechcianej walidacji:

Dodanie immediate="true" w elemencie pola wyboru (domylnie jest false), aby obsuga zdarzenia miaa miejsce przed walidacj Dodanie poniszego kodu na kocu metody obsugi zdarzenia: FacesContext context = FacesContext.getCurrentInstance(); context.renderResponse(); // skraca normalne przetwarzanie UWAGA: W niektrych wersjach Internet Explorer, zdarzenie onchange wystpi dopiero gdy focus znajdzie si na innym elemencie (jest to raczej bug...). Rozwizaniem jest onclick

290

Nawigacja za pomoc linkw

Nawigacja nastpuje w wyniku zwrcenia konkretnej etykiety przez metod akcji Akcj nawigacyjn oprcz przyciskw mog wywoywa rwnie linki
Tworzone za pomoc znacznika h:commandLink Renderowane z wykorzystaniem kodu JavaScript, zatwierdzajcego formularz (JavaScript w przegldarce musi by wczony!)
error.jsp
<h:form> <h:commandButton value="Powrt" action="success"/> <h:commandLink action="success"> <h:outputText value="Powrt"/> </h:commandLink> </h:form>

291

Backing beans o zasigu sesji

Backing beans najczciej maj zasig obsugi dania (request) Mona zwikszy ich czas ycia do zasigu sesji (session) lub aplikacji (application), jeli maj suy do przechowywania danych midzy 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>

292

Pliki .properties w JSF

Plik .properties to tekstowy plik zawierajcy pary klucz=warto Aplikacja JSF moe pobiera teksty do wywietlenia z plikw .properties (Resource Bundles) Pliki .properties umieszczane s tam gdzie klasy (WEB-INF/classes) Do adowania plikw .properties suy znacznik f:loadBundle wskazujcy:
Nazw pliku (bez rozszerzenia, z prefiksem pakietu) Nazw zmiennej (typu Map) do przechowania odczytanych danych
<f:loadBundle basename="komunikaty" var="kom"/> #{kom.klucz}

293

Plik .properties - Przykad

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>

294

Internacjonalizacja aplikacji
Naley przygotowa zestaw plikw .properties dla poszczeglnych jzykw (rnicych si kodem lokalizacji w przyrostku nazwy):
komunikaty.properties, komunikaty_pl.properties, ...

W znaczniku f:view naley umieci atrybut locale

Moe to nie by konieczne (serwer moe ustawi sam) Warto locale wyznaczon przez ustawienia przegldarki uytkownika mona odczyta z FacesContext Odczyt pliku i wywietlanie komunikatw bez zmian!

295

Internacjonalizacja aplikacji - Przykad

komunikaty.properties komunikaty_pl.properties

sorryPrompt=Sorry backLabel=Back
UWAGA: Polskie znaki (poza ) w kostaci kodw Unicode (\uXXXX)

sorryPrompt=Przykro nam backLabel=Powrt

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>

Podmiana i internacjonalizacja komunikatw ze standardowych walidatorw (1/2) Naley wykona dwa kroki:
Przygotowa pliki .properties dla poszczeglnych jzykw zawierajce nowe komunikaty przypisane do predefiniowanych kluczy Wskaza przygotowane pliki jako message bundle zawierajcy dostosowane komunikaty w konfiguracji aplikacji (faces-config.xml)
komunikaty_pl.properties

296

javax.faces.component.UIInput.REQUIRED=Pole jest wymagane! javax.faces.validator.LengthValidator.MINIMUM=Minimalna wymagana liczba znakw to {0}! javax.faces.validator.LengthValidator.MAXIMUM=Maksymalna wymagana liczba znakw to {0}!
W miejsce {0} bdzie wstawiany parametr ograniczenia np. limit na liczb znakw

Podmiana i internacjonalizacja komunikatw ze standardowych walidatorw (2/2)

faces-config.xml

297

<application> <message-bundle> komunikaty </message-bundle> </application>

Interaktywny edytor zawartoci faces-config.xml

298

Problem dostpu do stron JSP

Domylnie rdowe strony JSP nie s chronione przed bezporednim dostpem Dostp do stron JSP zawierajcych znaczniki JSF bez porednictwa kontrolera FacesServlet powoduje bdy Jest to jedna z wad JSF!

299

Ochrona rdowych stron JSP

Nie mona umieci stron JSP w WEB-INF gdy w JSF URL musi odpowiada lokalizacji pliku:
strona.jsp -> strona.faces lub faces/strona.jsp

Rozwizaniem 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>

300

Tworzenie aplikacji bazodanowych w JavaServer Faces

- prezentowanie danych tabelarycznych - dostp do wynikw zapyta

301

Prezentacja danych tabelarycznych

Czsto aplikacja musi przedstawi kolekcj danych w postaci tabelarycznej
Na etapie projektowania strony liczba wierszy jest nieznana Typowy scenariusz przy zapytaniach do bazy danych

JSF umoliwia prezentacj danych tabelarycznych bez konstrukcji ptli za pomoc komponentu h:dataTable
h:dataTable zawiera definicj jednego wiersza Struktura wiersza jest powielona dla elementw kolekcji
Mona wskaza szczegln zawarto dla nagwka i stopki za pomoc elementu f:facet Mona wskaza od ktrego elementu kolekcji (numeracja od 0) i ile wierszy ma by wywietlonych (atrybuty first i rows)

302

Dane rdowe dla h:dataTable

Lista komponentw Java Bean Tablica komponentw Java Bean Pojedynczy komponent Java Bean java.sql.ResultSet javax.servlet.jsp.jstl.sql.Result
Uyteczna alternatywa dla java.sql.ResultSet Nie traci zawartoci po zamkniciu poczenia z baz

javax.sql.RowSet javax.faces.model.DataModel
Wszystkie rda danych musz by jawnie lub niejawnie opakowane w DataModel
Podklasy ScalarDataModel, ListDataModel, ArrayDataModel, ResultSetDataModel, ResultDataModel

303

h:dataTable dla tablicy obiektw (1/4)

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() {} }

Book.java
public class Book { private String author; private String title;

public Book(String a, String t) { this.author = a; this.title = t; } public public public public } void setAuthor(String author) {...} String getAuthor() {...} void setTitle(String title) {...} String getTitle() {...}

304

h:dataTable dla tablicy obiektw (2/4)

Rejestracja rda 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

305

h:dataTable dla tablicy obiektw (3/4)

Wskazanie waciwoci komponentu managed bean jako rdowej kolekcji danych

Podanie klasy reprezentujcej struktur elementu kolekcji jest opcjonalne. Umoliwia kreatorowi automatyczne wypenienie zawartoci kolumn i ich nagwkw! Rczne wprowadzenie nazwy zmiennej, ktra bdzie reprezentowa kolejne elementy

306

h:dataTable dla tablicy obiektw (4/4)

ksiazki.jsp
h:column definuje kolumn tabeli f:facet w tabeli definiuje nagwek (header) i stopk (footer) Uwaga: Zawarto nie-JSF (np. HTML) musi by ujta w element f:verbatim, aby bya wywietlona we waciwym miejscu <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>

307

Dostosowywanie wygldu Klasy CSS

Elementy z biblioteki znacznikw JSF HTML zawieraj atrybut styleClass wskazujcy klas zdefiniowan w doczonym arkuszu stylw CSS Element h:dataTable zawiera kilka atrybutw umoliwiajcych 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>

h:dataTable Prezentacja wynikw zapyta do bazy danych

Sposoby przygotowania danych rdowych:
Wydobycie danych ze zbioru wynikowego JDBC i ich umieszczenie w tablicy lub licie obiektw
Wymaga wielu linii kodu i utworzenia klasy reprezentujcej wiersze wyniku zapytania Sensowne przy wykorzystaniu technologii mapowania obiektowo-relacyjnego i wspierajcych je kreatorw (np. Oracle TopLink + JDeveloper)

308

Bezporednie wykorzystanie ResultSet JDBC

ResultSet wymaga utrzymania poczenia z baz danych...

Wykorzystanie klasy ResultSupport z JSTL

Przejmuje dane z ResultSet (jedna linia kodu!) Odczony od bazy danych

309

h:dataTable dla wyniku zapytania (1/2)

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; } }

faces-config.xml
<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>

310

h:dataTable dla wyniku zapytania (2/2)

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>Paca</f:verbatim> </f:facet> <h:outputText value="#{emp.sal}"/> </h:column> </h:dataTable>

DataModel udostpnia wiersz wyniku zapytania w postaci obiektu, zawierajcego waciwoci odpowiadajce wartociom atrybutw

311

Podsumowanie

312

JSF Podsumowanie (1/2)

JSF to technologia tworzenia interfejsu uytkownika pracujcego po stronie serwera w aplikacjach J2EE
Obejmuje rwnie obsug nawigacji (kontroler)

Nadzieja dla programistw J2EE na dorwnanie .NET w zakresie prostoty tworzenia interfejsu uytkownika w aplikacjach webowych W pewnym stopniu alternatywa dla Struts
Wykorzystuje dowiadczenia twrcw Struts i innych szkieletw aplikacji Uproszczony kontroler Ograniczone moliwoci walidacji Nacisk na interfejs uytkownika Struts i JSF mog wsppracowa

313

JSF Podsumowanie (2/2)

JSF oferuje stanowe, rozszerzalne i konfigurowalne komponenty interfejsu i moliwo tworzenia dodatkowych Podstawowym rodowiskiem do renderowania komponentw jest JSP
Specyfikacja JSF definiuje dwie biblioteki znacznikw

JSF w Oracle JDeveloper 10g

Podstawowa technologia tworzenia widokw i kontrolera od 10.1.3 Pene wsparcie z bogactwem kreatorw i edytorw wizualnych