java server pages

Tehnologii JavaCurs -

Cristian Frasinaru

[email protected]

Facultatea de Informatica

Universitatea ”Al. I. Cuza” Iasi

Java Server Faces

Tehnologii Java – p.1/69

Cuprins

Framework-uri Web / MVC

Caracteristici generale JSF

Exemplu simplu

Modelele arhitecturii JSF

Taguri proprii JSF

Folosirea mecanismelor standard

Crearea de componente proprii

Crearea de mecanisme proprii


Framework-uri Web / MVC


Consideratii generale

Separarea functionalitatilor

Controlul accesului la componente si resurse

Controlul fluxului logic al aplicatiei

Validarea datelor

Standardizarea aspectului

Internationalizare

Tratarea exceptiilor

Modularizarea sistemului


Model-View-Controller


Acces centralizat

Probleme generate de accesul direct la componenteleView:

Duplicarea codului : fiecare view trebuie sa ofereservicii sistem (securitate)

Navigarea : este în responsabilitatea componetelorView.

Solutia : Un punct central de acces pentru nivelul deprezentare responsabil cu: gestiunea cererilor, serviciisistem: autentificare, autorizare, gestiunea erorilor, etc.


Front Controller - Dispatcher


Strategii de mapare a resurselor

Mapare explicit ahttp://some.server.com/hello.jsp

Mapare logic ahttp://some.server.com/hello.jsp 7→ hello.do

Mapare multipl a

<servlet-mapping>

<url-pattern>*.do</url-pattern><servlet-name>

com.some.mvc.framework.FrontController</servlet-name>

</servlet-mapping>

Exemple de framework-uri

Java Server Faces

Apache Struts

Spring

JBoss Seam

Apache Wicket

Google Web Toolkit (GWT)

Altele: Apache Click, Apache Cocoon, AppFuse,Flexive, Grails, Vaadin, ItsNat, Jspx, Makumba,OpenXava, OpenLaszlo, Eclipse RAP, Play, Restlet,Stripes, Tapestry, WebWork, ZK, Wavemaker, etc.


Java Server Faces


Ce aduce nou JSF ?

Permite crearea UI folosind componente standard,reutilizabile , accesibile folosind taguri proprii.

Furnizeaza mecanismul pentru dezvoltarea decomponente proprii .

Ofera un model de interactiune bazat peevenimente .

Separa prezentarea componentelor defunctionalitate.

Asigura persistenta st arii la nivelul Web..

Simplifica modul de crearea a IDE-uri pentrudezvoltarea de aplicatii Web.


Interfata cu utilizatorul


Orientat pe componente UI


Caracteristici generale

Definirea regulilor de navigare între pagini

Validarea datelor

Specificarea regulilor de conversie

Tratarea erorilor

Lucrul cu Bean-uri

Tratarea evenimentelor

Internationalizare

Construit direct pe API-ul servleturilor−→ PageLanguage:{JSP, Facelets}


Separarea activitatilor

Design - editarea paginilor JSP, HTML

Dezvoltare - implementarea logicii aplicatiei

Crearea componentelor UI - componente ce vor fiutilizate de designeri pentru realizarea UI

Arhitectura - asigurarea fluxului aplicatiei, ascalabilitatii, configurare, etc.


Implementari

Versiuni : 1.0 (2004) 7→ 1.2 (2006) 7→ 2.0 (2009)Implement ari

Implementarea de referinta (Sun)

Open-Source, Ajax-enabledICEFacesJBoss RichFacesApache MyFaces...

7−→ RIA = Rich Internet Applications


Exemplu simplu


Etapele aplicatiei

Crearea componentelor beanPersonBean

Scriere paginilor ce vor utiliza componente UIinputName.xhtml, sayHello.xhtml

Crearea fisierului de resurseMessages.properties

Definirea regulilor de navigare


PersonBean

package hello;

import javax.faces.bean.ManagedBean;import javax.faces.bean.RequestScoped;

@ManagedBean(name = "personBean")@RequestScopedpublic class PersonBean {

private String name;

public String getName() {return name;

}public void setName(String name) {

this.name = name;}

}


inputname.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://java.sun.com/jsf/html">

<h:head><title>Hello</title>

</h:head><h:body>

<h:form>Your name:<h:inputText id="userName"

value="#{personBean.name}"required="true"/>

<h:commandButton id="submit" value="Submit"action="sayHello.xhtml"/>

<h:message id="errors" style="color: red"showSummary="true" showDetail="false"for="userName"/>

</h:form></h:body>

</html>


Messages.properties

Fisierul cu resurse contine localizarea (traducerea)mesajelor folosite in aplicatie.

title = Simple JSF Applicationgreeting = Hello


sayHello.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://java.sun.com/jsf/html"xmlns:f="http://java.sun.com/jsf/core">

<f:loadBundle basename="hello.Messages" var="message"/><h:head>

<title>#{message.title}</title></h:head><h:body>

<h:form><h2>

#{message.greeting} #{personBean.name} !</h2><h:commandButton id="back" value="Back" action="inputName.xht

</h:form>

</h:body></html>


Navigarea

Decuplam regulile de navigare de paginile aplicatiei:<h:commandButton id="submit" value="Submit" action="sayHello.xhtml"/>Inlocuim "sayHello.xhtml" cu o actiune abstracta: "hello"

Fisierul de configurare JSF: faces-config.xml<faces-config><navigation-rule>

<from-view-id>/inputName.xhtml</from-view-id><navigation-case>

<from-outcome>hello</from-outcome><to-view-id>/sayHello.xhtml</to-view-id>

</navigation-case></navigation-rule>

</faces-config>


Configurarea aplicatiei: web.xml

<web-app><context-param>

<param-name>javax.faces.application.CONFIG_FILES</param-name><param-value>/WEB-INF/faces-config.xml</param-value>

</context-param>

<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></web-app>

Modelele arhitecturii JSF


Arhitectura componentelor

Arhitectura componentelor UI include:

Modelul claselor UI

Modelul de prezentare

Modelul de conversie

Modelul de tratare a evenimentelor

Modelul de validare


Modelul claselor UI

Descriu functionalitatea componentelor

Extind UIComponent

Implementeaza diverse interfete comportamentale

Nu definesc o reprezentare grafica

Au notiunea de componente fiu

UICommand UIForm UIPanel

UIOutput UIInput UIMessage

UIData UIColumn ...


Interfete comportamentale

ActionSource

ValueHolder

EditableValueHolder

StateHolder

NamingContainer

UICommand -> ActionSource, StateHolderUIOutput -> StateHolder, ValueHolderUIInput -> EditableValueHolder, StateHolder, ValueHolder


Modelul de prezentare

Defineste înf atisarea componentelor.

Un model pentru reprezentare este implementat prinintermediul unui obiect de tip RendererKit si estespecific pentru un anumit tip de: dispozitiv / limbaj demarcare / localizare

Un RendereKit reprezinta o multime de obiecte detip Renderer care ofera o reprezentare specificacomponentelor UI.

Unei clase de tip UIComponent îi pot fi asociate maimulte reprezentari (Strategy Design Pattern)


Reprezentari multiple


HTML Renderer Kit

Implementarea JSF include un kit standard pentrureprezentare HTML.

Componenta Reprezentare Tag

UICommand HtmlCommandButton commandButton

HtmlCommandLink commandLink

UISelectOne HtmlSelectOneMenu selectOneMenu

HtmlSelectOneRadio selectOneRadio

HtmlSelectOneListbox selectOneListbox


Modelul datelor: Backing Bean


Gestionarea bean-urilor

Datele unui componente JSF pot fi legate de un beanaflat pe server în doua moduri:

prin valoare<h:outputText value="#{persoana.nume}" />

prin referint a<h:outputText binding="#{persoana.numeField}" />


Legarea bean-urilor prin valoare

@ManagedBean(name = "personBean")@RequestScopedpublic class PersonBean {

private String name;public PersonBean {}public String getName() {

return name;}public void setName(String name) {

this.name = name;}

}

Proprietatile bean-ului accepta ca argument o valoare .<h:inputText id="name" value="#{personBean.name}" />


Legarea bean-urilor prin referint a

...public class PersonBean {private UIInput nameComponent;public UIInput getNameComponent() {

return nameComponent;}public void setNameComponent(UIInput nameComponent) {

this.nameComponent = nameComponent;}public void someMethod() {

nameComponent.setRendered(false);}

}

Proprietatile bean-ului accepta ca argument o referint ade tipul componentei.<h:inputText id="name" binding="#{personBean.nameComponent}"/>


Modelul de conversie

O componenta UI poate avea asociate date , memoratela nivel de server într-un bean .Intr-o aplicatie JSF, datele unui componente suntorganizate astfel:

model : informatia propriu-zisa, reprezentataprintr-un tip Java de date, cum ar fi int, long,String, java.util.Date, etc.

prezentare : reprezentarea la nivel de client, într-omaniera care sa permita citirea / editarea informatiei.

JSF va face automat conversia între model si prezentare,si invers.


Convertori

StandardUISelectBoolean: String ↔ Boolean

BigDecimalConverter, BigIntegerConverterBooleanConverter, CharacterConverter,DoubleConverter, IntegerConverter, LongConverter, etc.DateTimeConverter

PropriiCrearea si înregistrarea unor clase de tip Converter .


Conversii standard

Implicit, la corespondenta cu o proprietate de unanumit tip a unui bean.

Explicit, folosind clasa corespunzatoare:<h:inputText converter="javax.faces.convert.IntegerConverter"/>

Explicit, folosind taguri pentru conversii:<h:outputText value="#{produse.dataExpediere}"><f:convertDateTime dateStyle="full" locale="Locale.SPAIN"

timeStyle="long" type="both" /></h:outputText>

<h:outputText value="#{produse.total}" ><f:convertNumber type="currency"

</h:outputText>


Crearea de convertori proprii

String ↔ UIComponent

Implementarea interfetei Convertor

Inregistrarea convertorului în aplicatie

Utilizarea


Interfata Convertor

public class URLConverter implements Converter {

// Prezentare -> Modelpublic Object getAsObject(FacesContext context,

UIComponent component, String newValue) throws ConverterExceptiontry {

return new URL(newValue);} catch(Exception e) {

throw new ConverterException("Eroare la conversie!");}

}

// Model -> Prezentarepublic String getAsString(FacesContext context,

UIComponent component, Object value) throws ConverterException {return String.valueOf(value);

}}


Folosirea unui convertor propriu

Inregistrarea în faces-config.xml<converter><description>

Convertor pentru URL-uri.Transforma un sir ce reprezinta o adresa Webintr-un obiect de tip URL

</description>

<converter-id> urlConverter </converter-id><converter-class> demo.URLConverter </converter-class>

</converter>

Utilizarea<h:inputText id="url"

value="resursa-url"converter="urlConverter" />


Modelul Event - Listener

Interactiunea utilizatorului cu componente UIgenereaza evenimente .

La aparitia unui eveniment, vor fi notificate metodeleclaselor listener înregistrate pentru componentasursa a evenimentului.

Tipurile de evenimente si interfetele listenercorespunzatoare:

ActionEvent - ActionListenerValueChangedEvent -ValueChangedListener

PhaseEvent - PhaseListener


Inregistrarea unor obiecte listener

ActionListener<h:commandLink id="adpers"

action="persoana.adauaga"><f:actionListener type="logger.logAction" />

</h:commandLink>

ValueChangedListener<h:inputText id="nume"

size="50"value="#{persoana.nume}"required="true"valueChangeListener="persoana.numeSchimbat">

<f:valueChangeListener type="logger.logValueChange" /></h:inputText>


Modelul pentru validare

JSF pemite validarea datelor la nivel de prezentare ,înainte de actualizarea modelului memorat pe server.Validatorii pot fi

StandardReferiti prin intermediul unor taguri de validare JSF,incluse în corpul unui tag corespunzator uneicomponente UI.

PropriiValidarea din cadrul unei componente beanImplementarea interfetei Validator


Validatori standard

required<h:inputText id="nume" size="50" value="#{persoana.nume}"

required="true"/>

validateLength<h:inputText id="nick" size="10" value="#{persoana.nick}"><f:validateLength minimum="1" maximum="10"/>

</h:inputText>

validateLongRange, validateDoubleRange<h:inputText id="cantitate" size="4" value="#{articol.cantitate}"><f:validateLongRange minimum="1"/>

</h:inputText>


Crearea unei metode de validare

public void validateEmail(FacesContext context,UIComponent component, Object value) {

String email = (String) value;if (email.indexOf(’@’) == -1) {

((UIInput)component).setValid(false);String message = "Bad email..."context.addMessage(component.getClientId(context),

new FacesMessage(message));}

}

Utilizarea<h:inputText id="email"

value="#{user.email}"validator="#{user.validateEmail}"/>


Interfata Validator

public void validate(FacesContext context,UIComponent component, Object value) {

if ((context == null) || (component == null)) {throw new NullPointerException();

}if (!(component instanceof UIInput)) {

return;}if (value == null) {

return;}boolean valid = ... ;if (!valid ) {

throw new ValidatorException("Eroare");}

}


Folosirea unui validator propriu

Inregistrarea - faces-config.xml<validator>...<validator-id>emailValidator</validator-id><validator-class>

demo.EmailValidator</validator-class><attribute>

...<attribute-name></attribute-name><attribute-class></attribute-class>

</attribute></validator>

Utilizarea<h:inputText id="email" value="#{user.email}" ><f:validator validatorId="emailValidator" />

</h:inputText>


Modelul pentru navigare

Navigarea reprezinta un set de reguli pentru selectareaurmatoarei pagini ce va fi afisata dupa executarea uneianumite actiuni.Evenimentele ActionEvent generate sunt preluate decatre un ActionListener implicit si transmise catreun obiect NavigatorHandler , responsabil cu controlulnavigarii. Acesta va determina urmatoarea paginaexaminând fisierul faces-config.xml .<navigation-rule><from-view-id>/greeting.jsp</from-view-id><navigation-case> <from-outcome>success</from-outcome>

<to-view-id>/response.jsp</to-view-id></navigation-case>

</navigation-rule>


Reguli de navigare

Reguli generale<navigation-rule><from-view-id> from-id1 </from-view-id><navigation-case> <from-outcome> outcome1 </from-outcome>

<to-view-id> to-id1 </to-view-id></navigation-case>

</navigation-rule>

Reguli implicite :lipseste outcomek, to− idk este implicit

Sabloane : from− id poate fi /pages/*Rezolvarea regulilor multiple :cea mai specifica regula este aplicata

Reguli "globale" : from− id lipseste sau este *


Exemplu navigare


Ciclul de viata


Crearea unui PhaseListener

public class PhaseLogger implements PhaseListener {public PhaseLogger() {

System.out.println("PhaseLogger created.");}public void afterPhase(PhaseEvent event) {

System.out.println("AFTER - " + event.getPhaseId());}public void beforePhase(PhaseEvent event) {

System.out.println("BEFORE - " + event.getPhaseId());}public PhaseId getPhaseId() {

return PhaseId.ANY_PHASE;}

}<lifecycle>

<phase-listener>myapp.listeners.PhaseLogger

</phase-listener></lifecycle>


Taguri proprii JSF


Biblioteci de taguri

JSF contine doua biblioteci de taguri proprii:

html_basic - taguri pentru reprezentareacomponentelor HTML standard.

jsf_core - taguri independente de reprezentare, utilepentru operatiuni de validare, conversie, etc.

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

Facelets<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://java.sun.com/jsf/html"xmlns:f="http://java.sun.com/jsf/core">


Taguri HTML

h:commandButton h:commandLink h:dataTable h:form

h:graphicImage h:inputHidden h:inputSecret h:inputText

h:inputTextarea h:message h:messages h:outputFormat

h:outputLabel h:outputLink h:outputText h:panelGrid

h:panelGroup h:selectBooleanCheckbox h:selectManyCheckbox

h:selectManyListbox h:selectManyMenu h:selectOneListbox

h:selectOneMenu h:selectOneRadio h:column, ...


Atribute comune

id - Identificatorul unic al componentei.

immediate - Forteaza efectuarea validarilor,conversiilor, etc. în faza "Apply Request Values".

rendered - Specifica daca va fi sau nu afisatacomponenta.

style, styleClass - Specifica un stil / clasa CSS.

value - Leaga componenta de o sursa externa dedate.

binding - Leaga componenta de o componentabean.


Taguri nucleu

f:actionListener f:attribute f:convertDateTime

f:convertNumber f:converter f:facet

f:loadBundle f:param f:selectItem

f:selectItems f:subview f:validateDoubleRange

f:validateLength f:validateLongRange f:validator

f:valueChangeListener f:verbatim f:view, ...


Localizarea

Specificarea unui fisier cu resurse<f:loadBundle var="bundle" basename="bundle.Messages" />

Identificarea unui mesaj pe baza cheii sale<h:outputText value="#{bundle.Hello}"/>

/WEB-INF/classes/bundle/Messages.propertiesHello=Salutari calduroase


Facelets


Ce reprezinta Facelets ?

Limbaj pentru crearea declarativa, orientat a pecomponente a paginilor de prezentare ale unei aplicatiiWeb.Caracteristici:

Utilizeaza XHTML pentru crearea paginilor

Bazat pe taguri proprii : Facelets, JSF, JSTL

Accepta limbajul de expresii EL

Permite crearea de sabloane

Permite crearea de componente proprii


Crearea paginilor folosindsabloane


Definirea unui sablon

template.xhtml<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:h="http://java.sun.com/jsf/html">

<h:head><title>Facelets Template</title>

</h:head><h:body>

<div id="top" class="top"><ui:insert name="top">Top Section</ui:insert>

</div><div id="content" class="main">

<ui:insert name="content">Main Content</ui:insert></div><div id="bottom" class="bottom">

<ui:insert name="bottom">Bottom Section</ui:insert></div>

</h:body></html>


Crearea unei pagini

hello.xhtml<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:h="http://java.sun.com/jsf/html">

<h:body><ui:composition template="./template.xhtml">

<ui:define name="top">Welcome to Facelets

</ui:define><ui:define name="content">

<h:graphicImage value="#{resource[’images:hello.jpg’]}"/><h:outputText value="Hello Facelets!"/>

</ui:define><ui:define name="bottom">

<h:outputLabel value="Power to the Facelets"/></ui:define>

</ui:composition></h:body>

</html>


Resurse

JSF utilizeaza o serie de conventii in accesarearesurselor\aplicatie

...\WEB-INF

\classes\lib

\resources\css\javascript\images

<h:graphicImage library="images" name="hello.jpg" /><h:graphicImage value="#{resource[’images:hello.jpg’]}"/>


Crearea de componente proprii


Definirea componentei

resources/ezcomp/email.xhtml<html xmlns="http://www.w3.org/1999/xhtml"xmlns:composite="http://java.sun.com/jsf/composite"xmlns:h="http://java.sun.com/jsf/html">

<h:head><title>This content will not be displayed</title>

</h:head><h:body>

<composite:interface><composite:attribute name="value" required="false"/>

</composite:interface>

<composite:implementation><h:outputLabel value="Email id: "></h:outputLabel><h:inputText value="#{cc.attrs.value}"></h:inputText>

</composite:implementation></h:body>

</html>


Utilizarea componentei

somePage.xhtml<html xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://java.sun.com/jsf/html"xmlns:ez="http://java.sun.com/jsf/composite/ezcomp/">

<h:head><title>Using a sample composite component</title>

</h:head>

<body><h:form>

<ez:email value="Enter your email id" /></h:form>

</body></html>


java server pages

Documents