JavaServer Faces 2.2 (Herbstcampus 2013)

Neues Gesicht
Neues und Erwähnenswertes aus JavaServer Faces 2.2
Michael Kurz
Irian Solutions GmbH

Herbstcampus 2013 – JavaServer Faces 2.2 2
JavaServer Faces im Rückblick
2004 2006 2009 2010 2013
JSF 1.1 JSF 1.2
Java EE 5
JSF 2.0
Java EE 6
JSF 2.1
Java EE 6
JSF 2.2
Java EE 7

Big Ticket Features
• HTML5 Friendly Markup
• Resource Library Contracts
• Faces Flows
• Stateless Views

HTML5
Neue Eingabetypen
Custom-Data-Attribute
Neue Elemente
Neue Attribute

HTML5: Klassisches JSF
• Seite mit JSF-Tags
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head><title>JSF 2.2 HTML5</title></h:head>
<h:body>
<h:form id="form">
<h:inputText id="email" value="#{bean.email}"/>
<h:commandButton action="#{bean.save}"
value="Save"/>
</h:form>
</h:body>
</html>

HTML5: Pass-Through-Attribute
• Seite mit JSF-Tags + HTML5-Attributen
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
<h:head><title>JSF 2.2 HTML5</title></h:head>
<h:body>
<h:form id="form">
<h:inputText id="email" value="#{bean.email}"
pt:type="email" pt:placeholder="Ihre Email"/>
<h:commandButton action="#{bean.save}"
value="Save"/>
</h:form>
</h:body>
</html>

HTML5: Pass-Through-Attribute
• Pass-Through-Attribute über Tags
• HTML5-Custom-Data-Attributes
<h:inputText id="email" value="#{bean.email}">
<f:passThroughAttribute name="type" value="email"/>
<f:passThroughAttribute name="placeholder"
value="Ihre Email"/>
<f:passthroughAttributes value="#{bean.attrs}"/>
</h:inputText>
<h:inputText id="email" value="#{bean.email}"
pt:type="email" pt:data-required="true"/>

HTML5: Pass-Through-Elemente
• Seite mit HTML5 + JSF-Attributen
xmlns:jsf="http://xmlns.jcp.org/jsf">
<head jsf:id="head"><title>JSF HTML5</title></head>
<body jsf:id="body">
<form jsf:id="form">
<input jsf:id="name" jsf:value="#{bean.name}"
type="text" placeholder="Enter name"/>
<button jsf:action="#{bean.save}">Save</button>
</form>
</body>
</html>

HTML5: Mapping zu JSF-Tags
HTML-Element Selektor-Attribut JSF-Tag
a jsf:action h:commandLink
a jsf:outcome h:commandLink
form h:form
input type="button" h:commandButton
input type="checkbox" h:selectBooleanCheckbox
input type="file" h:inputFile
input type="*" h:inputText
select multiple="*" h:selectManyListbox
select h:selectOneListbox

HTML5: Pass-Through-Elemente
• Pass-Through-Elemente werden Komponenten
• Generische Pass-Through-Elemente
<input type="email" jsf:value="#{bean.name}">
<f:validateLength minimum="3"/>
</input>
<progress jsf:id="progress" max="10"
value="#{bean.progress}">
<f:ajax event="click" render="@this"/>
</progress>

Demonstration
• Pass-Through-Attribute
• Pass-Through-Elemente
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-html5
HTML5 Friendly Markup

Resource Library Contracts
• Resource Library Contract
• Templates
• Ersetzbare Bereiche
• Ressourcen
contract1
image.png style.csstemplate.xhtml
contract2
image.png style.csstemplate.xhtml

Contracts: Ein erstes Beispiel 1/3
• JSF sucht Contracts an folgenden Stellen
• /contracts
• /META-INF/contracts
• Beispiel contract1
/contracts
contract1
template.xhtml
style.css
image.png

• Template template.xhtml
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head><title>Contract Template</title></h:head>
<h:body>
<h:outputStylesheet name="style.css"/>
<div class="header">
<ui:insert name="header"/>
</div>
<div class="content">
<ui:insert name="content"/>
</div>
</h:body>
</html>

• Template-Client
<ui:composition template="/template.xhtml">
<ui:define name="header">
<h1>Überschrift</h1>
</ui:define>
<ui:define name="content">
<p>Beliebiger Inhalt</p>
<h:graphicImage name="image.png"/>
</ui:define>
</ui:composition>

Contracts: Zuordnung
• Standard: Alle Seiten bekommen alle Contracts
• Statische Zuordnung in faces-config.xml
• Dynamische Zuordnung pro Seite
<resource-library-contracts>
<contract-mapping>
<url-pattern>/special/*</url-pattern>
<contracts>layout-special</contracts>
</contract-mapping>
</resource-library-contracts>
<f:view contracts="contract1">
<ui:composition template="/template.xhtml">
...

Demonstration
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-contracts
Resource Library Contracts

Faces Flows
• Flow gruppiert Seiten
• Definierte Start- und Endpunkte
• Flows ermöglichen:
• Wiederverwendbarkeit
• Navigation auf Flow einschränken
• Flow-Scope
checkout shipping payment confirm

Flows: Implizite Flow-Definition
• Definition in Verzeichnis /<flow-ID>
• Leere Konfiguration: <flow-ID>-flow.xml
• Startknoten: <flow-ID>.xhtml
• Endknoten: /<flow-ID>-return.xhtml
/flow1
flow1.xhtml
flow1-flow.xml
page2.xhtml
index.xhtml
flow1-return.xhtml

Flows: Impliziten Flow verwenden
• Flow starten:
• Navigation innerhalb Flow:
• Flow beenden:
<h:link value="Flow 1" outcome="flow1"/>
<h:commandButton value="Next" action="page2"/>
<h:button value="Finish" outcome="flow1-return"/>

Flows: Explizite Flow-Definition (XML)
• Konfiguration in <flow-ID>-flow.xml
<faces-config version="2.2">
<flow-definition id="flow1">
<flow-return id="flow1-return">
<from-outcome>/index.xhtml</from-outcome>
</flow-return>
</flow-definition>
</faces-config>

Flows: Explizite Flow-Definition (Java)
• Konfiguration mit CDI-Producer
public class Flow1 implements Serializable {
@Produces @FlowDefinition
public Flow buildFlow(@FlowBuilderParameter
FlowBuilder builder) {
String flowId = "flow1";
builder.id("", flowId);
builder.viewNode("flow1", "/flow1/flow1.xhtml")
.markAsStartNode();
builder.returnNode("flow1-return")
.fromOutcome("/index.xhtml");
return builder.getFlow();
}
}

Flows: Knotentypen
• View Node
• Return Node
• Flow Call Node
• Switch Node
• Method Call Node

Flows: @FlowScoped
• CDI-Scope für einen Flow
• An Browsertab/-fenster gebunden
• Implizites Objekt flowScope (Map)
@javax.inject.Named
@javax.faces.flow.FlowScoped(value="flow1")
public class FlowBean {
...
}
<h:outputText value="#{flowScope.param1}"/>

Demonstration
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-flows
Faces Flows

Stateless Views
• State für Seite nicht speichern
<f:view transient="true">
...
</f:view>

Neue Namensräume
http://xmlns.jcp.org
http://java.sun.com

View Actions
• Actions bei GET-Anfragen ausführen
• Action-Methode
<f:metadata>
<f:viewParam name="id" value="#{bean.id}"/>
<f:viewAction action="#{bean.loadPerson}"/>
</f:metadata>
public class Bean {
private int id;
public String loadPerson() {
// Person mit id laden
return null;
}
}

View Actions: Details
• Standardmäßig in Invoke Application
• View-Actions standardmäßig nur bei GET-Anfragen
• Achtung:
• Navigation immer als Redirect
• Komponentenbaum noch nicht aufgebaut
<f:viewAction phase="APPLY_REQUEST_VALUES"
action="#{bean.load}"/>
<f:viewAction onPostback="true"
action="#{bean.load}"/>

Demonstration
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-view-action
View Actions

Dateiupload mit h:inputFile
• Komponente h:inputFile
• Eigenschaft vom Typ javax.servlet.http.Part
<h:inputFile id="file" value="#{bean.file}"/>
public class Bean {
private Part file;
public Part getFile() {return file;}
public void setFile(Part f) {this.file = f;}
}

Demonstration
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-input-file
Dateiupload mit h:inputFile

CollectionDataModel
• h:dataTable unterstützt java.util.Collection
<h:dataTable value="#{bean.persons}" var="p">
<h:column>#{p.name}</h:column>
<h:column>#{p.email}</h:column>
</h:dataTable>
@Named @RequestScoped
public class bean {
@Inject
private PersonRepository personRepository;
public Collection<Person> getPersons() {
return personRepository.getPersons();
}
}

Tags für Kompositkomponenten
• Tags für einzelne Kompositkomponenten
<facelet-taglib version="2.2">
<namespace>http://jsflive.at/taglib</namespace>
<tag>
<tag-name>collapsible</tag-name>
<component>
<resource-id>
jsflive/collapsiblePanel.xhtml
</resource-id>
</component>
</tag>
</facelet-taglib>

Demonstration
• Tags für Komponenten aus mehreren Bibliotheken
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-composite-component-tags
Tags für Kompositkomponenten

Konfigurierbares Ressourcenverzeichnis
• Kontextparameter in web.xml
• ... auch für Contracts
<param-name>
javax.faces.WEBAPP_RESOURCES_DIRECTORY
</param-name>
<param-value>/WEB-INF/resources</param-value>
<param-name>
javax.faces.WEBAPP_CONTRACTS_DIRECTORY
</param-name>
<param-value>/WEB-INF/contracts</param-value>

Verzögerte Ajax-Anfragen
• Ajax-Anfrage wird verzögert
• Nur aktuellste Anfragen wird verarbeitet
<h:inputText value="#{bean.product}">
<f:ajax event="keyup" render="list" delay="300"/>
</h:inputText>
<h:panelGroup id="list">
<ui:repeat value="#{bean.products}" var="p">
#{p}<br/>
</ui:repeat>
</h:panelGroup>

Eingabefelder zurücksetzen
• Eingabefelder bei Ajax-Anfrage zurücksetzen
<h:form id="form">
<h:messages id="msgs"/>
<h:inputText id="v1" value="#{bean.value1}"/>
<h:commandLink value="+1" action="#{bean.incV1}">
<f:ajax render="v1" resetValues="true"/>
</h:commandLink>
<h:inputText id="v2" value="#{bean.value2}">
<f:validateLongRange minimum="10"/>
</h:inputText>
<h:commandButton value="Save">
<f:ajax execute="v1 v2" render="msgs v1 v2"/>
</h:commandButton>
</h:form>

Demonstration
• Beispiel
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-reset-values
Eingabefelder zurücksetzen

CDI-View-Scope
• Annotation für View-Scope in CDI
• Alternative:
@javax.inject.Named
@javax.faces.view.ViewScoped
public class CustomerBean {
@Inject
private CustomerService customerService;
...
}
Apache MyFaces CODI
@ViewAccessScoped

Apache MyFaces
2.2-SNAPSHOT
Status Implementierungen
Oracle Mojarra
2.2.2

Vielen Dank!
Michael Kurz
Irian Solutions GmbH

Neugierig?
• Kurz, Marinschek, Müllan:
JavaServer Faces 2.0, dpunkt.Verlag
• Irian JSF@Work Online-Tutorial
http://jsfatwork.irian.at
• JSFlive Weblog
http://jsflive.wordpress.com

JavaServer Faces 2.2 (Herbstcampus 2013)

Ähnliche diashows

Weitere ähnliche Inhalte

JavaServer Faces 2.2 (Herbstcampus 2013)