Java web programozásJava web programozás

9-10.9-10.

2009 2

TartalomTartalom

• JavaServer Faces (JSF)– JSF jellemzői– JSF projekt létrehozása– Beviteli elemek– Kiviteli elemek– Egyéb elemek– Managed Bean– Navigáció– Validáció

2009 3

A JSF jellemzőiA JSF jellemzői• A JSP-re épülő technológia• Egy webes keretrendszer• Beépített adatkonverzió• Beépített adatvalidáció• „okos” Komponensek• Nemzetköziesítés (I18N) támogatása• Igazodik az „MVC” tervezési mintához• Bővíthető (lásd. RichFaces)

2009 4

A JSF architektúrájaA JSF architektúrája

2009 5

A JSF működéseA JSF működése

2009 6

JSF projekt létrehozásaJSF projekt létrehozása• File New Project …

2009 7

JSF projekt létrehozásaJSF projekt létrehozása

2009 8

JSF projekt létrehozásaJSF projekt létrehozása

2009 9

JSF projekt létrehozásaJSF projekt létrehozása

2009 10

JSF projekt létrehozásaJSF projekt létrehozása

JSF konfigurációs állomány

Telepítés leíró

JSF lap

2009 11

A minta JSF lapA minta JSF lap

2009 12

AlapvetőAlapvető elemekelemek• f:view

– A JSF lapot jelenti

• f:subview– Al-nézet létrehozása. Pl. fejléc, lábléc

• h:form– Egy HTML form-ot generál

• JSF tagkönyvtárak használata– <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>

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

2009 13

KiviteliKiviteli elemekelemek• h:outputText

– Egy szöveget ír ki az oldalra– Pl. <h:outputText value=„Ezt fogom kiírni”/>

• h:outputLink– Egy hyperhivatkozást teszt ki az oldalra– Pl. <h:outputLink value=„http://www.google.hu”>

<h:outputText value=„Google”/></outputLink>

2009 14

KiviteliKiviteli elemekelemek

• h:graphicImage– Egy képet rajzol ki– Pl. <h:graphicImage url=„images/kep.png”/>

• h:dataTable– Adatokat megjelenítő táblázat

2009 15

h:dataTableh:dataTable• A modell

2009 16

h:dataTableh:dataTable

• A vezérlő

2009 17

h:dataTableh:dataTable• A nézet

2009 18

h:dataTableh:dataTable

2009 19

Beviteli elemekBeviteli elemek

• h:inputText– Adatbekérést tesz lehetővé

– Pl. <h:inputText value=„#{bean.nev}”/>

• h:inputTextarea– Többsoros beviteli mező– Pl. <h:inputTextarea rows=„4” cols=„20”

value=„#{bean.szoveg}”/>

2009 20

Beviteli elemekBeviteli elemek• h:inputHidden

– Egy rejtett beviteli mező– Pl. <h:inputHidden value=„#{bean.ertek}”/>

• h:inputSecret– Egy jelszó beviteli mező

– Pl. <h:inputSecret value="jelszo"/>

2009 21

Beviteli elemekBeviteli elemek• h:selectBooleanCheckBox

– Jelölőnégyzet

– Pl. <h:selectBooleanCheckbox value="#{emb.f}"/>

• h:selectOneRadio– Rádiógombok

2009 22

Beviteli elemekBeviteli elemek• h:selectOneMenu

– Választólista

2009 23

Vezérlő elemekVezérlő elemek• h:commandButton

– Egy nyomógomb

• h:commandLink– Parancs hivatkozás (link)

2009 24

Az elemek közös attribútumaiAz elemek közös attribútumai

• style– CSS utasításokat írhatunk ebbe az attribútumba

• styleClass– CSS osztályt (class) rendelhetünk az adott komponenshez

• rendered– Megadhatjuk, hogy megjelenjen-e a felületen az adott

komponens (true/false)

• disabled– Le van-e tiltva az adott komponens (pl. gomb)

• value– A komponens értéke.

2009 25

Managed BeanManaged Bean• Egy java osztály a JSF lap mögött.• Gyakorlatilag a „vezérlést” segíti• Felhasználási területei:

– Adatkötés komponenseknél (value attribútum)– Metódusok végrehajtása pl. egy gombra kattintáskor– Navigáció végrehajtása– Általában a Managed Bean osztály metódusaiból hívjuk a

Session Bean által megvalósított üzleti metódusokat.

2009 26

Managed BeanManaged Bean• Létrehozása

– A web-rétegben álljunk kattintsunk jobb egérgombbal, a „Source Packeges”-en.

– New Other…

2009 27

Managed BeanManaged Bean

2009 28

faces-config.xmlfaces-config.xml

• A létrejött managed bean-ünk bejegyzése

2009 29

NavigációNavigáció

• A „faces-config.xml” állományban• A „<navigation-rule>” elemekkel valósul

meg.• Általában egy h:commandButton vagy egy

h:commandLink segítségével kezdeményezheti a felhasználó a navigációt.

2009 30

NavigációNavigáció

welcomeJSF.jsp

otherPage.jsp

2009 31

Validáció, KonverzióValidáció, Konverzió• Nézzük át, a JSF tag-ek attribútumaiként használható

validációs lehetőségeket.• Kötelezően kitöltendő

– required=„true”

• Kötelezően csak szám lehet– <f:convertNumber integerOnly=„true”/>

• A hossz korlátozása– <f:validateLength minimum=„5” maximum=„10”/>

• Dátum konvertálása– <f:convertDateTime pattern=„yyyy.MM.dd”/>

2009 32

Validáció, KonverzióValidáció, Konverzió• Hibaüzenet(ek) megjelenítése:

– <h:message>, <h:messages>

2009 33

Validáció, KonverzióValidáció, Konverzió