Czym jest JSF? JAVA SERVER FACES jest to nowy framework Javy do tworzenia interface u użytkownika dla aplikacji sieciowych. Wykorzystuje cykl życia (lifecycle) aplikacji internetowej za pośrednictwem kontrolera servletu; Posiada zbiór komponentów do budowy warstwy prezentacji, umożliwia obsługę zdarzeń użytkownika Prostota wytwarzania aplikacji internetowych, możliwość wykorzystania zintegrowanych środowisk programistycznych do budowy GUI (np. Eclipse, JDeveloper, NetBeans i inne) Wyraźne oddzielenie warstwy prezentacji od warstwy biznesowej Walidacja po stronie serwera Definiowanie nawigacji strony
Czym jest JSF? Obsługa wielojęzyczności aplikacji i dostępności Tworzenie komponentów UI na stronach JSP. Dowiązywanie komponentów do obiektów Java po stronie serwera Etapy przetwarzania żądań aplikacji JSF:
JSF implementacja Aplikacje JSF oparte są o strony JSP (warstwa widoku). Do wyświetlania aplikacji JSF potrzebna jest implementacja (ViewHandler) JSF. Implementacja komercyjna: Oracle; Implementacja Open Source - Apache MyFaces
Jak zacząć struktura katalogów 1. Tworzymy nowy projekt w eclipse, tak jak dla serwletu 2. W katalogu WEB-INF tworzymy podkatalogi classes i lib. 3. Do katalogu lib importujemy potrzebne biblioteki *.jar 4. Katalog classes ustawiamy jako output folder 5. W katalogu WEB-INF tworzymy pliki konfiguracyjne web.xml i faces-config.xml 6. W głównym katalogu tworzymy plik index.jsp, welcome.jsp, index.html klasę ziarna User
plik web.xml <?xml version="1.0"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> <web-app> <! Tu umieszczamy odpowiednie sekcje konfiguracyjne --> </web-app> Plik konfiguracyjny web.xml jest standardowym plikiem aplikacji webowych Javy. W przypadku JSF plik ten może być skonfigurowany i używany do większości serwisów w formie pokazanej powyżej.
plik web.xml sekcja filter <filter> <filter-name>extensionsfilter</filter-name> <filter-class> org.apache.myfaces.component.html.util.extensionsfilter </filter-class> <init-param> <param-name>uploadmaxfilesize</param-name> <param-value>100m</param-value> </init-param> <init-param> <param-name>uploadthresholdsize</param-name> <param-value>100k</param-value> </init-param> </filter> Filtr ten umożliwia korzystanie z myfaces.
plik web.xml sekcja servlet <servlet> <servlet-name>faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.facesservlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> <filter-mapping> <filter-name>extensionsfilter</filter-name> <url-pattern>*.faces</url-pattern> </filter-mapping> <filter-mapping> <filter-name>extensionsfilter</filter-name> <url-pattern>/faces/myfacesextensionresource/*</url-pattern> </filter-mapping> Mapowanie serwletu proszę zwrócić uwagę na rozszerzenie.faces
plik web.xml <welcome-file-list> <welcome-file> index.html </welcome-file> </welcome-file-list> <listener> <listener-class> org.apache.myfaces.webapp.startupservletcontextlistener </listener-class> </listener> Ustawienie domyślnego pliku serwisu
plik faces-config.xml <?xml version="1.0"?> <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN" "http://java.sun.com/dtd/web-facesconfig_1_0.dtd"> <faces-config> <managed-bean> <managed-bean-name>user</managed-bean-name> <managed-bean-class>user</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> <navigation-rule> <from-view-id>/index.jsp</from-view-id> <navigation-case> <from-outcome>login</from-outcome> <to-view-id>/welcome.jsp</to-view-id> <redirect/> </navigation-case> </navigation-rule> </faces-config> Zwróćmy uwagę na mapowanie klasy User (user) oraz zbiór reguł nawigacji, pozwalający na przejście ze strony index.jsp do welcome.jsp za pomocą akcji login.
plik index.html <html> <head> <meta http-equiv="refresh" content= "0; URL=index.faces"/> <title>start Web Application</title> </head> <body> <p>zaraz sie otworze uwaga uwaga uwaga.</p> </body> </html> Jest to plik pomocniczy. Powoduje on przekierowanie na plik index.jsp. Proszę zwrócić uwagę na to, że w JSF adresy URL kończą się na.faces, mimo że nazwy plików mają końcówkę jsp
index.jsp <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <html> <f:view> <body> <h:form> <h3>wprowadz swoj Login i Haslo</h3> <table> <tr> <td>login:</td><td><h:inputtext value="#{user.name}" /></td></tr> <tr><td>haslo:</td><td><h:inputsecret value="#{user.password}"/></td></tr> </table> <p><h:commandbutton value="login" action="login" /></p> </h:form> </body> </f:view> </html> W przedstawionym przykładzie oprócz zwykłych znaczników HTML widzimy znaczniki zaczynające się od <h: <f: są to właśnie znaczniki komponentów JSF.
Plik odpowiedzi welcome.jsp <html> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <f:view> <body> <h:form> <h:outputtext value="witaj W JSF-TWOJ LOGIN I HASLO To" /> <h:outputtext value="#{user.name}" /> <h:outputtext value="#{user.password}" /> </h:form> </body> </f:view> </html> Elementy user.name oraz user.password są to obiekty java beans zmapowane w pliku faces-config.xml, dzięki czemu możliwe jest przypisanie obiektów do konkretnych kontrolek.
public class User { private String name; private String password; public String getname(){ return name; } } Klasa ziarna Obiekty przypisane do komponentów na stronie muszą spełniać odpowiednie reguły i budowane są na podstawie prostych klas JAVY. Klasa przedstawiona poniżej zawiera dwa pola name i password zwane ziarenkami oraz metody get i set reprezentujące dostęp do obiektów odpowiednio pobieranie i ustawianie wartości. public void setname(string name){ this.name = name; } public String getpassword(){ return password; } public void setpassword(string password){ this.password = password; } Proszę zwrócić uwagę na odpowiednie normy nazewnicze podczas tworzenia klas java beans - wielkość liter - operatory dostępu
Nasz pierwszy projekt obejmować będzie prosty proces logowania na stronie. Przeniesienie do następnej strony i zapamiętanie informacji uwierzytelniających index.jsp welcome.jsp
Zarządzanie bean ami
Zarządzanie beanami Każdą klasę, zawierającą pola zwane ziarenkami oraz metody, które przypisać możemy do odpowiednich komponentów na stronie musimy mapować do pliku faces-config.xml. Poniższy wpis wykonuje właśnie takie zadanie. Gdzie: <managed-bean-name> - odpowiada nazwie pod jaką będzie rozpoznawana klasa podczas budowania stron JSF <managed-bean-class> - nazwa klasy wraz ze ścieżką pakietów <managed-bean-scope> - zasięg trwania tworzonych obiektów (application,session,request) <managed-bean> <managed-bean-name>user</managed-bean-name> <managed-bean-class>user</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean>
Zarządzanie beanami Wiązanie obiektów z widokiem podzielić możemy na trzy główne rodzaje: Wiązanie z polem obiektu <h:inputtext value="#{user.name}" /> Wiązanie z metodą <h:commandbutton actionlistener="#{user.whichcomponent}" /> Obsługa nawigacji i zdarzeń poprzez wiązanie z metodami <h:commandbutton action="#{user.gotootherpage}" />
Nawigacja Statyczna to nawigacja wykonywana bez względu na jakiekolwiek warunki. Powoduje ona przejście do konkretnej strony. Dynamiczna to nawigacja wykonywana z wykorzystaniem odpowiednich warunków, które definiują czy przejście ma nastąpić i do jakiej strony ma nastąpić przekierowanie
Nawigacja statyczna Wywoływana na podstawie akcji: action= login lub action= #{user.gotootherpage}, Gdzie gotootherpage jest to funkcja publiczna w klasie mapowanej jako user typu String, zwracającej odpowiednio identyfikowany przez reguły nawigacji ciąg znaków: public String gotootherpage() { return login ; }
Reguły nawigacji w przypadku statycznej i dynamicznej nawigacji są identyczne: <from-view-id>/index.jsp</from-view-id> - identyfikuje z jakiej strony ma nastąpić przekierowanie do następnej strony, w tym przypadku jest to index.jsp <from-outcome>login</from-outcome> - na podstawie jakiej akcji ma nastąpić przekierowanie <to-view-id>/welcome.jsp</to-view-id> - identyfikuje do jakiej strony za pomocą akcji login ma nastąpić przekierowanie <navigation-rule> <from-view-id>/index.jsp</from-view-id> <navigation-case> <from-outcome>login</from-outcome> <to-view-id>/welcome.jsp</to-view-id> </navigation-case> </navigation-rule>
Nawigacja dynamiczna Wywoływana na podstawie akcji, która podobnie jak w nawigacji statycznej opisana jest za pomocą metody typu String. Różnica polega sposobie zwracania przez metodę wartości na podstawie określonych warunków public String gotootherpage() { if(pewne warunki) return login ; else return badlogin ; } Oczywiście w tym przypadku należy utworzyć reguły nawigacji zarówno dla akcji login jak i badlogin
Podstawowe komponenty JSF <h:inputtext/> Reprezentuje pole tekstowe. Najważniejsze paramatry: rendered, disabled, readonly, style, styleclass, size, value, maxlength. Przykłady: <h:inputtext value= 123456" readonly="true"/> <h:inputtext value="input_text" style="color: Yellow; background:teal;"/>
Podstawowe komponenty JSF <h:inputtextarea/> Reprezentuje okienko tekstowe. Najważniejsze paramatry: rendered, disabled, readonly, style, styleclass, rows, cols, value. Przykłady: <h:inputtextarea value="123456789012345" rows="3" cols="10"/> <h:inputtextarea value="#{form.datainrows}" rows="2" cols="15"/>
Podstawowe komponenty JSF <h:outputtext/> Reprezentuje pole tesktowe. Podstawowe paramatry to: rendered, value, style, styleclass, escape. Przykłady: <h:outputtext value= 12345678901234567890"/> <h:outputtext value="number #{user.number}"/>
Podstawowe komponenty JSF <h:graphicimage/> Reprezentuje pola rysunku. Podstawowe parametry to: value, style, styleclass, rendered. Przykłady: <h:graphicimage value="/tj.jpg"/>
Podstawowe komponenty JSF <h:commandbutton/> Reprezentyje przycisk. Podstawowe parametry to: rendered, disabled, value, action, actionlistener, image, imadiate oraz parametry JavaScript jak: onclick, onmousemove itp.. Przykłady: <h:commandbutton value="submit" type="submit"/> <h:commandbutton value="click this button..." onclick="alert('button clicked')" type="button"/>
Podstawowe komponenty JSF <h:commandlink> Reprezentuje hiperłącze. Przykłady: <h:commandlink> <h:outputtext value="register"/> </h:commandlink> <h:commandlink> <h:outputtext value="#{msgs.linktext}"/> <h:graphicimage value="/registration.jpg"/> </h:commandlink>
Podstawowe komponenty JSF <h:selectbooleancheckbox/ > Reprezentuje pojedyńczego checkboxa. Przykład: <h:selectbooleancheckbox value= user.contactme /> W klasie mapowanej na user tworzymy następujące pole i metody: private boolean contactme; public boolean iscontactme() { return contactme; } public void setcontactme(boolean contactme) { this.contactme = contactme; }
Podstawowe komponenty JSF <h:selectmanycheckbox/> Reprezentuje zbiór checkbox ów. Przykład: <h:selectmanycheckbox value="#{form.name}"> <f:selectitem itemvalue= Lukasz"/> <f:selectitem itemvalue= Blazej"/> <f:selectitem itemvalue= Marek"/> </h:selectmanycheckbox>
Podstawowe komponenty JSF <h:selectoneradio/> Reprezentuje grupę radio button ów. Przykład: <h:selectoneradio value="#{form.education}"> <f:selectitem itemvalue= KOT"/> <f:selectitem itemvalue= PIES"/> <f:selectitem itemvalue= RYBA"/> <f:selectitem itemvalue= CHOMIK"/> </h:selectoneradio>
Podstawowe komponenty JSF <h:selectonelistbox/> Reprezentuje listę. Przykład: <h:selectonelistbox value="#{form.year}" size="5"> <f:selectitem value="1900"/> <f:selectitem value="1901"/>... </h:selectonelistbox>
Podstawowe komponenty JSF <h:selectonemenu/ > Reprezentuje listę rozwijaną (combi). Przykład: <h:selectonemenu value="#{form.day}"> <f:selectitem itemvalue="sunday"/> <f:selectitem itemvalue="monday"/> <f:selectitem itemvalue="tuesday"/> <f:selectitem itemvalue="wednesday"/> <f:selectitem itemvalue="thursday"/> <f:selectitem itemvalue="friday"/> <f:selectitem itemvalue="saturday"/> </h:selectonemenu>
Komponenty zawierające w sobie komponenty typu <f:selectitem. mogą być zastąpione kompoonentem <f:selectitems., który jako value przyjmuje kolekcje obiektów typu SelectItem np. <h:selectoneradio> <f:selectitems value= #{user.radio} /> <h:selectoneradio> W klasie user tworzymy następujące wpisy: private List radio; public List getradio() { if(radio==null){ radio = new LinkedList(); } radio.add(new SelectItem("1","LUKASZ")); radio.add(new SelectItem("2","BLAZEJ")); radio.add(new SelectItem("3","MAREK")); radio.add(new SelectItem("4","CZAREK")); eturn radio; } public void setradio(list radio) { this.radio = radio; }
Konwersja i walidacja Java Server Faces posiada wbudowane mechanizmy konwersji i walidacji danych przypisanych do standardowych kontrolek JSF. Mechanizmy te służą do sprawniejszego wprowadzania danych jak i odpowiedniego formatowania danych na stronie. Java Server Faces umożliwia ponadto możliwość tworzenia własnych konwerterów i walidatorów, oraz umożliwia rozszerzenie możliwości już istniejących.
Przykład konwersji (convertnumber): <h:inputtext value= #{user.amount} > <f:convertnumber type= currency /> </h:inputtext> Parametry f:convertnumber: type typ konwersji: number, currency, percent; pattern wzór formatowania; maxfractiondigits max. liczba znaków po przecinku minfractiondigits min. iczba znaków po przecinku maxintegerdigits max. liczba znaków przed przecinkiem minintegerdigits min. liczba znaków przed przecinkiem integeronly tylko liczby całkowite (true false) groupingused separatory grupowania (true false) oraz: locale, currencycode, currencysymbol
Przykład konwersji (convertdatetime): <h:inputtext value= #{user.birthdate} > <f:convertdatetime pattenr= MM/YYYY /> </h:inputtext> Parametry f:convertdatetime: type typ konwersji: date, time, both pattern wzór formatowania; datestyle styl formatowania daty: default, short, medium, long full timestyle - styl formatowania czasu: default, short, medium, long full oraz: locale, timezone
Przykład walidacji: <h:inputtext id= rok value= #{user.year} > <f:validationlength minimum= 10 /> </h:inputtext> <h:message for= rok /> Dodatkowe przydatne walidatory: validatedoublerange validatelongrange validatelength
Biblioteki MyFaces - Tomahawk JSCook Menu Tree2 Newspaper Table Alias Bean Buffer File Upload TabbedPane Calendar Popup Javascript Listener Date Html Editor Html Tag Data List Tree Tree2 Tree Table Panel Stack Style Sheet Sort Header Data Scroller Extended Data Table Panel Navigation Panel Navigation 2 UI Save State Columns Column Schedule Dojo Initializer SelectItems Walidatory validatecreditcard validateurl validateemail validateequal validateregexpr
Tomahawk przykłady Tree table Callendar TabbedPane Data Scroller
Komponenty biblioteki Sandbox Input Suggest Ajax Menu Auto Update DataTable Input Suggest Focus Form SubForm Picklist Dynamic Image FishEye Navigation Menu ExcelExport SecurityContext Limit Rendered Rounded DIV
aplikacja bazodanowa JSF podejście klasyczne STRONA GŁÓWNA (index.html) Wprowadz nowego studenta Wyświetl listę studentów GRID (wyswietl.jsp) Imię Nazwisko: Indeks: FORMULARZ (enter.jsp) Imię: Nazwisko: Indeks: ZAPI SANO POTWIERDZENIE (zapisano.jsp) Powrót ZAPISZ BEAN (Studenci) imie nazwisko indeks STUDENCI IMIE NAZWISKO INDEKS
Formularz (enter.jsp) <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <html> <f:view> <body> <h:form> <h3>wprowadz dane studenta</h3> <table> <tr><td>imię:</td><td><h:inputtext value="#{bean.imie}" /></td></tr> <tr><td>nazwisko:</td><td><h:inputtext value="#{bean.nazwisko}" /></td></tr> <tr><td>nr indeksu:</td><td><h:inputtext value="#{bean.indeks}" /></td></tr> </table> <h:commandbutton value="zapisz" action="zapisano" /> </h:form> </body> </f:view> </html>
Potwierdzenie (dodano.jsp) <html> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <f:view> <body> <h:form> <h:outputtext value="#{bean.imie}" /> <h:outputtext value="#{bean.nazwisko}" /> <h:outputtext value="#{bean.dopisano}" /> </h:form> <A href="index.html">powrót do menu</a> </body> </f:view> </html>
Wyświetlenie (wyswietl.jsp) <html> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <f:view> <body> <H1>Studenci w bazie</h1> <h:form> <h:panelgrid columns="1" styleclass="panel"> <h:datatable value="#{bean.studenci}" var="c"> <h:column><h:outputtext value="#{c.imie}" /></h:column> <h:column><h:outputtext value="#{c.nazwisko}" /></h:column> <h:column><h:outputtext value="#{c.indeks}" /></h:column> </h:datatable> </h:panelgrid> </h:form> <P><a href="index.html">powrót do menu</a></p> </body> </f:view> </html>
Inteligentny bean (Studenci.java) Akcesory standardowe: public class Studenci { private String imie; private String nazwisko; private int indeks; private List studenci; private String dopisano; public String getimie() { return imie; } public String getnazwisko() { return nazwisko; } public int getindeks() { return indeks; } public void setimie(string value) { imie=value; } public void setnazwisko(string value) { nazwisko=value; } public void setindeks(int value) { indeks=value; } public void setstudenci(list value) { studenci=value; }
Inteligentny bean (Studenci.java) Odczyt listy z bazy: public List getstudenci() { studenci = new ArrayList(); //Tu połącz z bazą przez JDBC ResultSet rs= stmt.executequery("select IMIE, NAZWISKO, INDEKS FROM student"); while (rs.next()) { Student s= new Student(); s.setimie(rs.getstring("imie")); s.setnazwisko(rs.getstring("nazwisko")); s.setindeks(rs.getint("indeks")); studenci.add(s); } return studenci; }
Inteligentny bean (Studenci.java) Zapis rekordu do bazy: public String getdopisano() { try{ //Połącz z bazą przez JDBC stmt = conn.preparestatement("insert INTO STUDENT (IMIE, NAZWISKO, INDEKS) VALUES (?,?,?)"); stmt.setstring(1, imie); stmt.setstring(2, nazwisko); stmt.setint(3, indeks); stmt.executeupdate(); } catch (ClassNotFoundException e){ return "Brak sterownika bazy";} catch (SQLException e){return "Brak połaczenia z bazą";} return "Dopisano studenta do listy"; }