Upload
ruxanda-yarinkowski
View
48
Download
3
Embed Size (px)
DESCRIPTION
Concepte de baza ale JSP
Citation preview
Tehnologii JavaCurs -
Cristian Frasinaru
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
Tehnologii Java – p.2/69
Framework-uri Web / MVC
Tehnologii Java – p.3/69
Consideratii generale
Separarea functionalitatilor
Controlul accesului la componente si resurse
Controlul fluxului logic al aplicatiei
Validarea datelor
Standardizarea aspectului
Internationalizare
Tratarea exceptiilor
Modularizarea sistemului
Tehnologii Java – p.4/69
Model-View-Controller
Tehnologii Java – p.5/69
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.
Tehnologii Java – p.6/69
Front Controller - Dispatcher
Tehnologii Java – p.7/69
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
<!-- Standard Action Servlet Mapping --><servlet-mapping>
<url-pattern>*.do</url-pattern><servlet-name>
com.some.mvc.framework.FrontController</servlet-name>
</servlet-mapping>
Tehnologii Java – p.8/69
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.
Tehnologii Java – p.9/69
Java Server Faces
Tehnologii Java – p.10/69
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.
Tehnologii Java – p.11/69
Interfata cu utilizatorul
Tehnologii Java – p.12/69
Orientat pe componente UI
Tehnologii Java – p.13/69
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}
Tehnologii Java – p.14/69
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.
Tehnologii Java – p.15/69
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
Tehnologii Java – p.16/69
Exemplu simplu
Tehnologii Java – p.17/69
Etapele aplicatiei
Crearea componentelor beanPersonBean
Scriere paginilor ce vor utiliza componente UIinputName.xhtml, sayHello.xhtml
Crearea fisierului de resurseMessages.properties
Definirea regulilor de navigare
Tehnologii Java – p.18/69
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;}
}
Tehnologii Java – p.19/69
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>
Tehnologii Java – p.20/69
Messages.properties
Fisierul cu resurse contine localizarea (traducerea)mesajelor folosite in aplicatie.
title = Simple JSF Applicationgreeting = Hello
Tehnologii Java – p.21/69
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>
Tehnologii Java – p.22/69
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>
Tehnologii Java – p.23/69
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>
<!-- Faces Servlet --><servlet>
<servlet-name>Faces Servlet</servlet-name><servlet-class>javax.faces.webapp.FacesServlet</servlet-class><load-on-startup> 1 </load-on-startup>
</servlet>
<!-- Faces Servlet Mapping --><servlet-mapping>
<servlet-name>Faces Servlet</servlet-name><url-pattern>/faces/*</url-pattern>
</servlet-mapping></web-app>
Tehnologii Java – p.24/69
Modelele arhitecturii JSF
Tehnologii Java – p.25/69
Arhitectura componentelor
Arhitectura componentelor UI include:
Modelul claselor UI
Modelul de prezentare
Modelul de conversie
Modelul de tratare a evenimentelor
Modelul de validare
Tehnologii Java – p.26/69
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 ...
Tehnologii Java – p.27/69
Interfete comportamentale
ActionSource
ValueHolder
EditableValueHolder
StateHolder
NamingContainer
UICommand -> ActionSource, StateHolderUIOutput -> StateHolder, ValueHolderUIInput -> EditableValueHolder, StateHolder, ValueHolder
Tehnologii Java – p.28/69
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)
Tehnologii Java – p.29/69
Reprezentari multiple
Tehnologii Java – p.30/69
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
Tehnologii Java – p.31/69
Modelul datelor: Backing Bean
Tehnologii Java – p.32/69
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}" />
Tehnologii Java – p.33/69
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}" />
Tehnologii Java – p.34/69
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}"/>
Tehnologii Java – p.35/69
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.
Tehnologii Java – p.36/69
Convertori
StandardUISelectBoolean: String ↔ Boolean
BigDecimalConverter, BigIntegerConverterBooleanConverter, CharacterConverter,DoubleConverter, IntegerConverter, LongConverter, etc.DateTimeConverter
PropriiCrearea si înregistrarea unor clase de tip Converter .
Tehnologii Java – p.37/69
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>
Tehnologii Java – p.38/69
Crearea de convertori proprii
String ↔ UIComponent
Implementarea interfetei Convertor
Inregistrarea convertorului în aplicatie
Utilizarea
Tehnologii Java – p.39/69
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);
}}
Tehnologii Java – p.40/69
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" />
Tehnologii Java – p.41/69
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
Tehnologii Java – p.42/69
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>
Tehnologii Java – p.43/69
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
Tehnologii Java – p.44/69
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>
Tehnologii Java – p.45/69
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}"/>
Tehnologii Java – p.46/69
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");}
}
Tehnologii Java – p.47/69
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>
Tehnologii Java – p.48/69
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>
Tehnologii Java – p.49/69
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 *
Tehnologii Java – p.50/69
Exemplu navigare
Tehnologii Java – p.51/69
Ciclul de viata
Tehnologii Java – p.52/69
Ciclul de viata
Tehnologii Java – p.53/69
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>
Tehnologii Java – p.54/69
Taguri proprii JSF
Tehnologii Java – p.55/69
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">
Tehnologii Java – p.56/69
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, ...
Tehnologii Java – p.57/69
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.
Tehnologii Java – p.58/69
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, ...
Tehnologii Java – p.59/69
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
Tehnologii Java – p.60/69
Facelets
Tehnologii Java – p.61/69
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
Tehnologii Java – p.62/69
Crearea paginilor folosindsabloane
Tehnologii Java – p.63/69
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>
Tehnologii Java – p.64/69
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>
Tehnologii Java – p.65/69
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’]}"/>
Tehnologii Java – p.66/69
Crearea de componente proprii
Tehnologii Java – p.67/69
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>
Tehnologii Java – p.68/69
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>
Tehnologii Java – p.69/69