Tartalom Integrált fejlesztés Java platformon Java Server Faces (JSF) Webes keretrendszerek JSF Felépítés Nézet megvalósítás Életciklus modell Konfiguráció ManagedBeanek Validátorok, konverterek Taglibrary-k István 2 Eddig Problémák Egyszerű weboldal készítése: Programozottan: szervlet Deklaratívan: JSP Adatbázis elérés, szerver oldali logika: JDBC JPA, Hibernate JavaBeanek Kis alkalmazás esetén Elegendő az eszközkészlet Nem túl bonyolult technológia Nagyobb alkalmazás esetén Egyre nehezebb bővíteni Átláthatatlan lesz Kódújrahasználás Használjunk keretrendszert! István 3 István 4 MVC architektúra KERETRENDSZEREK István 5 BME IK 1
Apache Struts Spring MVC 2000 óta létezik Nyílt forráskódú MVC architektúrán alapul Alkalmazásszerver szükséges futtatáshoz Az első sikeres keretrendszer JSP kiváltásához Nem esemény alapú 2003 óta létezik Nyílt forráskódú MVC architektúrán alapul Alkalmazásszerver szükséges Kérdés-válasz alapú felépítés, nagyban épít a HTML szabványra István 7 István 8 Google Web Toolkit 2006 óta létezik, folyamatos fejlődésben Nyílt forráskódú MVC megvalósítható Java kódot ír a fejlesztő, amely Javascriptre fordul, kliens oldalon fut Lehetséges kliens-szerver kommunikáció GWT-RPC JSON Java Server Faces 2004 óta Szabvány, Java EE 5 óta Számos implementáció Garantáltan támogatott minden alkalmazásszerveren Szerver oldali, komponens alapú keretrendszer MVC architektúra Esemény alapú István 9 István 10 Képességek JAVA SERVER FACES MVC felépítés Komponensek megjelenítése, állapotuk menedzselése Eseménykezelés Szerver-oldali validáció Adatkonverzió Oldalak közti navigáció Internacionalizáció István 12 BME IK 2
Képességek/2 Komponensek Tagek segítségével teljes komponensek elhelyezése az oldalakon Események kötése szerveroldali kódhoz Komponens tartalmának kötése szerveroldali adathoz Újrahasználható elemek UI állapot mentés és visszatöltés request-en túl AJAX Jellemzői Újrahasználható Testre szabható Állapottal rendelkezik Komponensekből fa alapul Elkülönül a megjelenítéstől, klienstől függő Renderer István 13 István 14 Osztályhierarchia Komponens fa István 15 István 16 Működés Felépítés MVC felépítés: Model: Javaban írt osztályok View: JSP oldal Regisztrált eseménykezelők, validátorok, konverterek Controller Gyári FacesServlet Hozzá XML konfiguráció (faces-config.xml) István 17 István 18 BME IK 3
View réteg JSF tag library-k Standard JSP (van más szabvány is) Szabványos kiegészítés: tag könyvtárak (tag library) segítségével: Két fő könyvtár: <%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%> Beépítetten két könyvtár: Html: Alapvető HTML komponensek Core: Megjelenítő környezettől független általános komponensek Egymásba ágyazva alkotják a komponens fát Minden komponensnek van azonosítója (id) Ez formon belül egyedi István 19 István 20 JSF view példa: FacesServlet <%@page contenttype="text/html" pageencoding="utf-8"%> <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <f:view> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>jsp Page</title> </head> <body> <h1><h:outputtext value="hello World!"/></h1> </body> </html> </f:view> István 21 A keretrendszer biztosítja, web.xml regisztráció A megfelelő életciklus végrehajtásáért felelős <web-app> <servlet> <servlet-name>faces Servlet</servlet-name> <servletclass>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> </web-app> István 22 Életciklus Életciklus 1. Restore View Nézet visszaállítása Ha első kérés: Felépül a komponens fa JSP oldal alapján Ha postback: VIEWSTATE objektumból előző fa elővétele Eseménykezelők, validátorok hozzárendelése a komponensekhez View elmentése (postback esetére) a FacesContext ojektumba István 23 István 24 BME IK 4
Életciklus 2. Apply Request Values Életciklus 3. Process Event Requests Request értékek beállítása UIInput leszármazottakra decode() metódus -> requestből kinyeri új értékét Stringként tárolás Konverziós hibák eltárolása FacesContextbe ActionSource leszármazottakra Meg lettek-e nyomva -> requestből kinyerve ActionEvent eltárolása a FacesContextbe Request-események feldolgozása Minden olyan komponensre, ahol keletkezett valamilyen esemény: processevent() Ha az összes komponensre false a visszatérési érték, akkor folytatódik a kiszolgálás Ha nem, akkor a 9. fázisra ugrik a kiszolgálás (Render Response) István 25 István 26 Életciklus 4. Process Validation Validáció végrehajtása UIinput leszármazottakra Konverzió megfelelő adattípusra Ha van regisztrált validátor, akkor annak végrehajtása Hibaüzenetek a FacesContextbe kerülnek Életciklus 5. Process Events Események feldolgozása Hiba esetén Konverziós hiba Validációs hiba Rögtön a 9. Render Response fázisba ugrás Hibamentes esetben továbblépés István 27 István 28 Életciklus 6. Update Model Values Modell frissítése Minden komponensre Hozzá lehet kapcsolva egy Java osztálybeli model objektumhoz updatemodel() meghívása -> a megfelelő attribútumok átírása, konverzió is lehetséges Hibaüzenetek a FacesContextbe kerülnek Életciklus 7. Process Events Események feldolgozása Hiba esetén Java konverzió esetén léphetett fel Rögtön RenderResponse fázisba ugrás Hibamentes esetben továbblépés István 29 István 30 BME IK 5
Életciklus 8. Invoke Application Életciklus 9. Render Response Alkalmazás események feldolgozása A korábbi fázisok eseményeinek végrehajtása Pl. gombra vagy linkre való kattintás, bemenetekhez rendelt valuechanged események Ezek az eseménykezelők már validált, biztosan jó típusú elemeken hajtódnak végre! Response renderelése A felépült komponensfán minden elem kirajzolja magát a megfelelő Renderer objektuma segítségével Hiba esetén előző állapot még elérhető A kész fa mentésre kerül a következő híváshoz István 31 István 32 Hiba az életciklussal Példa Regisztrációs oldal, rengeteg bemenet, validátorral Születési idő (YYYY-MM-DD) Pontos lakcím, több mezővel Telefonszám (+3611234567) Email cím (valaki@valami.hu) Oldal alján Regisztrál és Mégse gombok Mi a probléma? Hiba az életciklussal Magyarázat Mégse gomb esetén életciklus ugyanúgy végigfut Csak helyes bemenet mellett lehet visszavonni! István 33 István 34 Életciklus módosítása Bármely komponensre immediate=true attribútum 2. Apply Request Values fázisban meghívja az eseménykezelőt (nem csak a 8. Invoke Application fázisban) UIInput esetén: korábbi validálás és saját modellfrissítés (többi komponensre nem!) UICommand esetén: a nem immediate inputok nem validálódnak! FacesServlet konfigurációja WEB-INF/faces-config.xml Navigációs szabályok Managed beanek Validátorok Konverterek Saját komponens Rengeteg itt nem érintett konfiguráció István 35 István 36 BME IK 6
Navigáció Managed Beanek Deklaratív leírás, XML-ben Állítható forrás, cél, parancs, redirect/forward <navigation-rule> <from-view-id>*</from-view-id> <navigation-case> <from-outcome>index</from-outcome> <to-view-id>/index.jsp</to-view-id> <redirect/> </navigation-case> </navigation-rule> Szerver oldali, átlagos Java osztályok Modell állapotát reprezentáló változókat vagy komponens található itt Emellett komponenshez tartozó: Eseménykezelők Validációs kód Oldalnavigációt kezdeményező metódusok JSTL kifejezésekkel hivatkozhatunk rájuk JSP-ből István 37 István 38 Managed Beanek/2 Managed Beanek/3 Regisztrálni kell faces-config.xml-ben: <managed-bean> <managed-bean-name>loginbean</managed-bean-name> <managed-bean-class> example.loginbean </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>user</property-name> <property-class>example.usersessionbean</propertyclass> <value>#{usersession</value> </managed-property> </managed-bean> Scope: Élettartamot határozza meg application/session/request/none Managed-Property: Függőséginjektálás Kötés: Értéket: value= #{loginbean.username Komponenst: binding= #{loginbean.input István 39 István 40 Validátorok Validátorok/2 Cél: bemenet helyességének ellenőrzése Hibaüzenet a FacesContextbe kerül elmentésre Megjelenítése: <message> taggel Alkalmazás szintű, beépített, saját függvény, saját osztály Alkalmazás szintű validálás: Paraméterek ellenőrzése eseménykezelőben Életciklus! Konverzió már lefutott, illetve a többi validátor is. Csak bonyolult dolgot érdemes Beépített validátorok: Hosszra, értékkészletre <h:inputtext id="age" value="#{loginbean.user.age"> <f:validatelongrange maximum="150" minimum="0"/> </h:inputtext> Saját validátor függvény: <h:inputtext id="email" value="#{loginbean.user.email" validator="#{loginbean.validateemail" required="true"> </h:inputtext> István 41 István 42 BME IK 7
Validátorok/3 Konverterek Saját validátor függvény, folytatás LoginBeanben: public void validateemail(facescontext ctx, UIComponent tovalidate, Object value) { String email = (String) value; if (!email.contains( @ )) { ((UIInput)toValidate).setValid(false); FacesMessage m = new FacesMessage("Invalid Email"); ctx.addmessage(tovalidate.getclientid(ctx),m); Alapértelmezetten több konverter: Float, Double, DateTime, Character, Byte, Boolean, BigInteger, BigDecimal Automatikus konverzió ha megfelelő típusú változót kötünk be: <h:inputtext id="age" value="#{loginbean.user.age"/> Dátum esetén testreszabható: <h:inputtext id="birth" value="#{loginbean.user.birth"> <f:convertdatetime pattern="mm/yyyy"/> </h:inputtext> István 43 István 44 Konverterek/2 Saját konverter írása: Converter interfész implementálása getasstring() metódus getasobject() metódus Konverter regisztrálása faces-config.xml-ben Használat: <converter> tag segítségével István 45 Konverterek/3 public class EnumConverter implements Converter{ public Object getasobject(facescontext ctx, UIComponent comp, String value) throws ConverterException { if("lány".equals(value)) return Gender.Female; else if("fiú".equals(value)) return Gender.Male; return null; public String getasstring(facescontext ctx, UIComponent comp, Object value) throws ConverterException { if(value instanceof Gender) { switch((gender) value) { case Female: return "Lány"; case Male: return "Fiú"; return ""; István 46 Saját komponens Osztály származtatása egy létező komponensből (UIComponent) Regisztrálás faces-context.xml-be Saját renderer írása, amely leszármazik a Renderer osztályból Renderer regisztrálása Saját tag készítése, UIComponentELTagből leszármazva TLD leírás a saját taghez JSF és AJAX AJAX: Asynchronous JavaScript and XML Komponensbe könnyedén lehet JavaScript kódot elhelyezni JSF 2.0-tól beépítve támogatott <f:ajax> tag Több komponenskönyvtár támogatja már korábbi verziókban István 47 István 48 BME IK 8
JSF és AJAX Komponenskönyvtárak A rendelkezésre álló komponensek nem elegendőek egy nagy alkalmazás esetén Nehézkes saját komponenst írni Több nyílt forráskódú komponenskönyvtár: RichFaces MyFaces Trinidad/Tobago/Tomahawk ICEFaces PrimeFaces http://jsfmatrix.net/ István 49 István 50 JSF 2.0 JSF komponenskönyvtárak DEMO Annotációk faces-config.xml helyett: @ManageBean, @ManagedProperty, @FacesConverter, @FacesValidator, @FacesRenderer, @FacesComponent Új scope-ok (view, custom, flash): @RequestScoped Faceletek: XHTML a korábbi JSP helyett Standardizált AJAX Még sok minden más PrimeFaces: http://www.primefaces.org/showcase/ui/home.jsf RichFaces: http://livedemo.exadel.com/richfacesdemo/index.jsp MyFaces Trinidad: http://example.irian.at/trinidaddemo/faces/index.jspx Még több: http://jsfmatrix.net/ István 51 István 52 BME IK 9