2013. Apache Struts. Spring MVC. Java Server Faces. Google Web Toolkit. Képességek

UML-1

20/11/2013

Tartalom 

Integrált fejlesztés Java platformon



Webes keretrendszerek JSF  Felépítés  Nézet

megvalósítás

 Életciklus modell  Konfiguráció

Java Server Faces (JSF)

 ManagedBeanek  Validátorok, konverterek  Taglibrary-k © BME IIT, Budai Péter, Hartung István

2013.11.20.

Eddig… 



Problémák

Egyszerű weboldal készítése:



Kis alkalmazás esetén

 Programozottan: szervlet

 Elegendő az

 Deklaratívan: JSP

 Nem

Adatbázis elérés, szerver oldali logika:



eszközkészlet túl bonyolult technológia

Nagyobb alkalmazás esetén

 JDBC

 Egyre

 JPA,

 Átláthatatlan lesz

Hibernate  JavaBeanek

© BME IIT, Budai Péter, Hartung István

nehezebb bővíteni

 Kódújrahasználás



2013.11.20.

2

3

Használjunk keretrendszert!

2013.11.20.


4

MVC architektúra

KERETRENDSZEREK

2013.11.20.

© BME IK


5

1

UML-1

20/11/2013

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ú

2013.11.20.




   

7

Google Web Toolkit     

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

2013.11.20.

8


Java Server Faces

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ó

 

2004 óta Szabvány, Java EE 5 óta  Számos implementáció  Garantáltan támogatott minden alkalmazásszerveren

  

 GWT-RPC

Szerver oldali, komponens alapú keretrendszer MVC architektúra Esemény alapú

 JSON

2013.11.20.


9

2013.11.20.


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ó

2013.11.20.

© BME IK


12

2

UML-1

20/11/2013

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 © BME IIT, Budai Péter, Hartung István

2013.11.20.



 Újrahasználható  Testre szabható  Állapottal rendelkezik

 

13

Osztályhierarchia


2013.11.20.

Komponensekből fa alapul Elkülönül a megjelenítéstől, klienstől függő Renderer

2013.11.20.


14

Komponens fa

15

Működés 

Jellemzői

2013.11.20.


16


18

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

2013.11.20.

© BME IK

Gyári FacesServlet Hozzá XML konfiguráció (faces-config.xml)


17

2013.11.20.

3

UML-1

20/11/2013

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:



 Html: 


 



19


2013.11.20.

 

21

A keretrendszer biztosítja, web.xml regisztráció A megfelelő életciklus végrehajtásáért felelős


2013.11.20.

22

Életciklus – 1. Restore View 

Nézet visszaállítása  Ha 

 Ha 

 

© BME IK

20

<web-app> <servlet> <servlet-name>Faces Servlet <servletclass>javax.faces.webapp.FacesServlet 1 <servlet-mapping> <servlet-name>Faces Servlet /faces/*

Életciklus

2013.11.20.

formon belül egyedi

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"%> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> JSP Page


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

JSF view példa:

2013.11.20.

Alapvető HTML komponensek

 Core:

<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%> 2013.11.20.

Beépítetten két könyvtár:


23

első kérés: Felépül a komponens fa JSP oldal alapján

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

2013.11.20.


24

4

UML-1

20/11/2013

É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



 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)

eltárolása FacesContextbe

ActionSource leszármazottakra  Meg

lettek-e nyomva -> requestből kinyerve eltárolása a FacesContextbe

 ActionEvent


2013.11.20.

25

Életciklus – 4. Process Validation  



 

Események feldolgozása Hiba esetén

 Konverzió megfelelő adattípusra

 Konverziós hiba

 Ha

 Validációs hiba

van regisztrált validátor, akkor annak végrehajtása

 Rögtön a

Hibaüzenetek a FacesContextbe kerülnek


27

Életciklus – 6. Update Model Values

2013.11.20.

 

 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

© BME IK


9. Render Response fázisba ugrás

Hibamentes esetben továbblépés


28

Életciklus – 7. Process Events

Modell frissítése Minden komponensre

2013.11.20.

26

Életciklus – 5. Process Events

Validáció végrehajtása UIinput leszármazottakra

2013.11.20.




2013.11.20.





Request-események feldolgozása Minden olyan komponensre, ahol keletkezett valamilyen esemény: processEvent()

Események feldolgozása Hiba esetén  Java konverzió  Rögtön



29

esetén léphetett fel RenderResponse fázisba ugrás

Hibamentes esetben továbblépés

2013.11.20.


30

5

UML-1

20/11/2013

É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!

2013.11.20.


 

31

Hiba az életciklussal – Példa 

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

2013.11.20.


32

Hiba az életciklussal – Magyarázat

Regisztrációs oldal, rengeteg bemenet, validátorral



 Születési

idő (YYYY-MM-DD) mezővel  Telefonszám (+3611234567)  Email cím ([email protected])



Mégse gomb esetén életciklus ugyanúgy végigfut Csak helyes bemenet mellett lehet visszavonni!

 Pontos lakcím, több

 

Oldal alján Regisztrál és Mégse gombok Mi a probléma?

2013.11.20.


33

Életciklus módosítása  

    

 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!

© BME IK



34

FacesServlet konfigurációja

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)

2013.11.20.

2013.11.20.

 

35

WEB-INF/faces-config.xml Navigációs szabályok Managed beanek Validátorok Konverterek Saját komponens Rengeteg itt nem érintett konfiguráció

2013.11.20.


36

6

UML-1

20/11/2013

Navigáció 



Managed Beanek

Deklaratív leírás, XML-ben Állítható forrás, cél, parancs, redirect/forward

* index /index.jsp 2013.11.20.


 Validációs kód

 Oldalnavigációt kezdeményező metódusok  JSTL kifejezésekkel hivatkozhatunk rájuk

37







meg



Managed-Property:



Kötés:  Értéket: value=”#{loginBean.username}”  Komponenst: binding=”#{loginBean.input}”

39

2013.11.20.


40

Validátorok/2 Beépített validátorok:  Hosszra,



értékkészletre

Saját validátor függvény:

 Paraméterek ellenőrzése

eseménykezelőben lefutott, illetve a többi validátor is. Csak bonyolult dolgot érdemes…

 Életciklus! Konverzió már




Alkalmazás szintű, beépített, saját függvény, saját osztály Alkalmazás szintű validálás:

© BME IK

Scope:

 Függőséginjektálás

Cél: bemenet helyességének ellenőrzése Hibaüzenet a FacesContextbe kerül elmentésre

2013.11.20.

38

 application/session/request/none

 Megjelenítése: <message> taggel




 Élettartamot határozza

Validátorok 

2013.11.20.

JSP-ből

Managed Beanek/3

Regisztrálni kell faces-config.xml-ben:


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

<managed-bean> <managed-bean-name>loginBean <managed-bean-class> example.LoginBean <managed-bean-scope>request <managed-property> <property-name>user <property-class>example.UserSessionBean #{userSession} 2013.11.20.

 

Managed Beanek/2 



41

2013.11.20.


42

7

UML-1

20/11/2013

Validátorok/3 

Konverterek

Saját validátor függvény, folytatás



Boolean, BigInteger, BigDecimal ha megfelelő típusú változót kötünk be:

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

2013.11.20.


 Automatikus konverzió

 Dátum

43

metódus metódus  Konverter regisztrálása faces-config.xml-ben  Használat: tag segítségével  getAsString()  getAsObject()


45

Saját komponens

 

  

© BME IK

44


2013.11.20.


46

JSF és AJAX

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

2013.11.20.


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

 Converter interfész implementálása



2013.11.20.

Konverterek/3

Saját konverter írása:

2013.11.20.

esetén testreszabható:

Konverterek/2 

Alapértelmezetten több konverter:  Float, Double, DateTime, Character, Byte,

 LoginBeanben:

  

AJAX: Asynchronous JavaScript and XML Komponensbe könnyedén lehet JavaScript kódot elhelyezni JSF 2.0-tól beépítve támogatott  tag



47

Több komponenskönyvtár támogatja már korábbi verziókban

2013.11.20.


48

8

UML-1

20/11/2013

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

 2013.11.20.


49



 

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…

2013.11.20.

© BME IK

2013.11.20.


50

JSF komponenskönyvtárak – DEMO

JSF 2.0 

http://jsfmatrix.net/


 



 51

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/

2013.11.20.


52

9

2013. Apache Struts. Spring MVC. Java Server Faces. Google Web Toolkit. Képességek

Recommend Documents