SlideShare ist ein Scribd-Unternehmen logo
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
Herbstcampus 2013 – JavaServer Faces 2.2 3
Big Ticket Features
• HTML5 Friendly Markup
• Resource Library Contracts
• Faces Flows
• Stateless Views
Herbstcampus 2013 – JavaServer Faces 2.2 4
HTML5
Neue Eingabetypen
Custom-Data-Attribute
Neue Elemente
Neue Attribute
Herbstcampus 2013 – JavaServer Faces 2.2 5
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>
Herbstcampus 2013 – JavaServer Faces 2.2 6
HTML5: Pass-Through-Attribute
• Seite mit JSF-Tags + HTML5-Attributen
<html xmlns="http://www.w3.org/1999/xhtml"
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>
Herbstcampus 2013 – JavaServer Faces 2.2 7
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"/>
Herbstcampus 2013 – JavaServer Faces 2.2 8
HTML5: Pass-Through-Elemente
• Seite mit HTML5 + JSF-Attributen
<html xmlns="http://www.w3.org/1999/xhtml"
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>
Herbstcampus 2013 – JavaServer Faces 2.2 9
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
Herbstcampus 2013 – JavaServer Faces 2.2 10
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>
Herbstcampus 2013 – JavaServer Faces 2.2 11
Demonstration
• Pass-Through-Attribute
• Pass-Through-Elemente
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-html5
HTML5 Friendly Markup
Herbstcampus 2013 – JavaServer Faces 2.2 12
Resource Library Contracts
• Resource Library Contract
• Templates
• Ersetzbare Bereiche
• Ressourcen
contract1
image.png style.csstemplate.xhtml
contract2
image.png style.csstemplate.xhtml
Herbstcampus 2013 – JavaServer Faces 2.2 13
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
Herbstcampus 2013 – JavaServer Faces 2.2 14
Contracts: Ein erstes Beispiel 2/3
• Template template.xhtml
<html xmlns="http://www.w3.org/1999/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>
Herbstcampus 2013 – JavaServer Faces 2.2 15
Contracts: Ein erstes Beispiel 3/3
• 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>
Herbstcampus 2013 – JavaServer Faces 2.2 16
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">
...
Herbstcampus 2013 – JavaServer Faces 2.2 17
Demonstration
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-contracts
Resource Library Contracts
Herbstcampus 2013 – JavaServer Faces 2.2 18
Faces Flows
• Flow gruppiert Seiten
• Definierte Start- und Endpunkte
• Flows ermöglichen:
• Wiederverwendbarkeit
• Navigation auf Flow einschränken
• Flow-Scope
checkout shipping payment confirm
Herbstcampus 2013 – JavaServer Faces 2.2 19
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
Herbstcampus 2013 – JavaServer Faces 2.2 20
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"/>
Herbstcampus 2013 – JavaServer Faces 2.2 21
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>
Herbstcampus 2013 – JavaServer Faces 2.2 22
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();
}
}
Herbstcampus 2013 – JavaServer Faces 2.2 23
Flows: Knotentypen
• View Node
• Return Node
• Flow Call Node
• Switch Node
• Method Call Node
Herbstcampus 2013 – JavaServer Faces 2.2 24
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}"/>
Herbstcampus 2013 – JavaServer Faces 2.2 25
Demonstration
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-flows
Faces Flows
Herbstcampus 2013 – JavaServer Faces 2.2 26
Stateless Views
• State für Seite nicht speichern
<f:view transient="true">
...
</f:view>
Herbstcampus 2013 – JavaServer Faces 2.2 27
Neue Namensräume
http://xmlns.jcp.org
http://java.sun.com
Herbstcampus 2013 – JavaServer Faces 2.2 28
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;
}
}
Herbstcampus 2013 – JavaServer Faces 2.2 29
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}"/>
Herbstcampus 2013 – JavaServer Faces 2.2 30
Demonstration
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-view-action
View Actions
Herbstcampus 2013 – JavaServer Faces 2.2 31
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;}
}
Herbstcampus 2013 – JavaServer Faces 2.2 32
Demonstration
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-input-file
Dateiupload mit h:inputFile
Herbstcampus 2013 – JavaServer Faces 2.2 33
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();
}
}
Herbstcampus 2013 – JavaServer Faces 2.2 34
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>
Herbstcampus 2013 – JavaServer Faces 2.2 35
Demonstration
• Tags für Komponenten aus mehreren Bibliotheken
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-composite-component-tags
Tags für Kompositkomponenten
Herbstcampus 2013 – JavaServer Faces 2.2 36
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>
Herbstcampus 2013 – JavaServer Faces 2.2 37
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>
Herbstcampus 2013 – JavaServer Faces 2.2 38
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>
Herbstcampus 2013 – JavaServer Faces 2.2 39
Demonstration
• Beispiel
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-reset-values
Eingabefelder zurücksetzen
Herbstcampus 2013 – JavaServer Faces 2.2 40
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
Herbstcampus 2013 – JavaServer Faces 2.2 41
Apache MyFaces
2.2-SNAPSHOT
Status Implementierungen
Oracle Mojarra
2.2.2
Vielen Dank!
Michael Kurz
Irian Solutions GmbH
Herbstcampus 2013 – JavaServer Faces 2.2 43
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

Weitere ähnliche Inhalte

Was ist angesagt?

Web Components
Web ComponentsWeb Components
Web Components
Oliver Hader
 
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Oliver Hader
 
GWT: Eintauchen in MVP und Internationalisierung
GWT: Eintauchen in MVP und InternationalisierungGWT: Eintauchen in MVP und Internationalisierung
GWT: Eintauchen in MVP und Internationalisierung
Cenarion Information Systems GmbH
 
MVP mit dem Google Web Toolkit
MVP mit dem Google Web ToolkitMVP mit dem Google Web Toolkit
MVP mit dem Google Web Toolkit
Cenarion Information Systems GmbH
 
DB-Schema-Evolution mit LiquiBase
DB-Schema-Evolution mit LiquiBaseDB-Schema-Evolution mit LiquiBase
DB-Schema-Evolution mit LiquiBase
gedoplan
 
Eintauchen in MVP mit GWT
Eintauchen in MVP mit GWT Eintauchen in MVP mit GWT
Eintauchen in MVP mit GWT
Cenarion Information Systems GmbH
 
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJSWebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
Oliver Hader
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das web
gedoplan
 
Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?
gedoplan
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der Praxis
Tobias Kraft
 
Kann ich mit Grails Enterprise Applikationen umsetzen?
Kann ich mit Grails Enterprise Applikationen umsetzen?Kann ich mit Grails Enterprise Applikationen umsetzen?
Kann ich mit Grails Enterprise Applikationen umsetzen?
Tobias Kraft
 
Enterprise 2.0 Portale mit Grails. Geht das?
Enterprise 2.0 Portale mit Grails. Geht das?Enterprise 2.0 Portale mit Grails. Geht das?
Enterprise 2.0 Portale mit Grails. Geht das?
Tobias Kraft
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
adesso AG
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im VergleichWie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
gedoplan
 
Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100
Yvette Teiken
 
Backbase Intro
Backbase IntroBackbase Intro
Backbase Intro
Béla Varga
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
Hendrik Lösch
 
Web-GUIs mit Vaadin
 Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadin
gedoplan
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Christian Janz
 

Was ist angesagt? (20)

Web Components
Web ComponentsWeb Components
Web Components
 
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
 
GWT: Eintauchen in MVP und Internationalisierung
GWT: Eintauchen in MVP und InternationalisierungGWT: Eintauchen in MVP und Internationalisierung
GWT: Eintauchen in MVP und Internationalisierung
 
MVP mit dem Google Web Toolkit
MVP mit dem Google Web ToolkitMVP mit dem Google Web Toolkit
MVP mit dem Google Web Toolkit
 
DB-Schema-Evolution mit LiquiBase
DB-Schema-Evolution mit LiquiBaseDB-Schema-Evolution mit LiquiBase
DB-Schema-Evolution mit LiquiBase
 
Eintauchen in MVP mit GWT
Eintauchen in MVP mit GWT Eintauchen in MVP mit GWT
Eintauchen in MVP mit GWT
 
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJSWebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das web
 
Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der Praxis
 
Kann ich mit Grails Enterprise Applikationen umsetzen?
Kann ich mit Grails Enterprise Applikationen umsetzen?Kann ich mit Grails Enterprise Applikationen umsetzen?
Kann ich mit Grails Enterprise Applikationen umsetzen?
 
Enterprise 2.0 Portale mit Grails. Geht das?
Enterprise 2.0 Portale mit Grails. Geht das?Enterprise 2.0 Portale mit Grails. Geht das?
Enterprise 2.0 Portale mit Grails. Geht das?
 
Query Result Caching
Query Result CachingQuery Result Caching
Query Result Caching
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im VergleichWie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
 
Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100
 
Backbase Intro
Backbase IntroBackbase Intro
Backbase Intro
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
 
Web-GUIs mit Vaadin
 Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadin
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
 

Ähnlich wie JavaServer Faces 2.2 (Herbstcampus 2013)

Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
kkramhoeft
 
Forms and Reports 12c - Processes and Automation in Development and Operations
Forms and Reports 12c - Processes and Automation in Development and OperationsForms and Reports 12c - Processes and Automation in Development and Operations
Forms and Reports 12c - Processes and Automation in Development and Operations
Torsten Kleiber
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Benjamin Schmid
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
Martin Kliehm
 
jQueryMobile mit Extbase/Fluid
jQueryMobile mit Extbase/FluidjQueryMobile mit Extbase/Fluid
jQueryMobile mit Extbase/Fluid
Peter Schuhmann
 
XPages: Performance-Optimierung - Ulrich Krause (eknori) SNoUG 2013
XPages: Performance-Optimierung  - Ulrich Krause (eknori) SNoUG 2013XPages: Performance-Optimierung  - Ulrich Krause (eknori) SNoUG 2013
XPages: Performance-Optimierung - Ulrich Krause (eknori) SNoUG 2013
BCC - Solutions for IBM Collaboration Software
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Sven Haiges
 
Testing tools
Testing toolsTesting tools
Testing tools
Sebastian Springer
 
Einführung in React
Einführung in ReactEinführung in React
Einführung in React
Sebastian Springer
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
Sebastian Springer
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
Dirk Ginader
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
Sebastian Springer
 
Ist Gradle auch für die APEX-Projekte?
Ist Gradle auch für die APEX-Projekte?Ist Gradle auch für die APEX-Projekte?
Ist Gradle auch für die APEX-Projekte?
MT AG
 
Zend Framework 2 - Best Practices
Zend Framework 2 - Best PracticesZend Framework 2 - Best Practices
Zend Framework 2 - Best Practices
Ralf Eggert
 
Domain Driven Design in Rails
Domain Driven Design in RailsDomain Driven Design in Rails
Domain Driven Design in Rails
Angelo Maron
 
AngularJs
AngularJsAngularJs
AngularJs
NETUserGroupBern
 
Top 10 Internet Trends 2003
Top 10 Internet Trends 2003Top 10 Internet Trends 2003
Top 10 Internet Trends 2003
Jürg Stuker
 
Angular und JEE - Wieso, weshalb, warum (und wie)?
Angular und JEE - Wieso, weshalb, warum (und wie)?Angular und JEE - Wieso, weshalb, warum (und wie)?
Angular und JEE - Wieso, weshalb, warum (und wie)?
gedoplan
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
Manfred Steyer
 

Ähnlich wie JavaServer Faces 2.2 (Herbstcampus 2013) (20)

Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Forms and Reports 12c - Processes and Automation in Development and Operations
Forms and Reports 12c - Processes and Automation in Development and OperationsForms and Reports 12c - Processes and Automation in Development and Operations
Forms and Reports 12c - Processes and Automation in Development and Operations
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
jQueryMobile mit Extbase/Fluid
jQueryMobile mit Extbase/FluidjQueryMobile mit Extbase/Fluid
jQueryMobile mit Extbase/Fluid
 
XPages: Performance-Optimierung - Ulrich Krause (eknori) SNoUG 2013
XPages: Performance-Optimierung  - Ulrich Krause (eknori) SNoUG 2013XPages: Performance-Optimierung  - Ulrich Krause (eknori) SNoUG 2013
XPages: Performance-Optimierung - Ulrich Krause (eknori) SNoUG 2013
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
 
Testing tools
Testing toolsTesting tools
Testing tools
 
Einführung in React
Einführung in ReactEinführung in React
Einführung in React
 
Ruby on Rails SS09 06
Ruby on Rails SS09 06Ruby on Rails SS09 06
Ruby on Rails SS09 06
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
Ist Gradle auch für die APEX-Projekte?
Ist Gradle auch für die APEX-Projekte?Ist Gradle auch für die APEX-Projekte?
Ist Gradle auch für die APEX-Projekte?
 
Zend Framework 2 - Best Practices
Zend Framework 2 - Best PracticesZend Framework 2 - Best Practices
Zend Framework 2 - Best Practices
 
Domain Driven Design in Rails
Domain Driven Design in RailsDomain Driven Design in Rails
Domain Driven Design in Rails
 
AngularJs
AngularJsAngularJs
AngularJs
 
Top 10 Internet Trends 2003
Top 10 Internet Trends 2003Top 10 Internet Trends 2003
Top 10 Internet Trends 2003
 
Angular und JEE - Wieso, weshalb, warum (und wie)?
Angular und JEE - Wieso, weshalb, warum (und wie)?Angular und JEE - Wieso, weshalb, warum (und wie)?
Angular und JEE - Wieso, weshalb, warum (und wie)?
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
 

JavaServer Faces 2.2 (Herbstcampus 2013)

  • 1. Neues Gesicht Neues und Erwähnenswertes aus JavaServer Faces 2.2 Michael Kurz Irian Solutions GmbH
  • 2. 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
  • 3. Herbstcampus 2013 – JavaServer Faces 2.2 3 Big Ticket Features • HTML5 Friendly Markup • Resource Library Contracts • Faces Flows • Stateless Views
  • 4. Herbstcampus 2013 – JavaServer Faces 2.2 4 HTML5 Neue Eingabetypen Custom-Data-Attribute Neue Elemente Neue Attribute
  • 5. Herbstcampus 2013 – JavaServer Faces 2.2 5 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>
  • 6. Herbstcampus 2013 – JavaServer Faces 2.2 6 HTML5: Pass-Through-Attribute • Seite mit JSF-Tags + HTML5-Attributen <html xmlns="http://www.w3.org/1999/xhtml" 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>
  • 7. Herbstcampus 2013 – JavaServer Faces 2.2 7 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"/>
  • 8. Herbstcampus 2013 – JavaServer Faces 2.2 8 HTML5: Pass-Through-Elemente • Seite mit HTML5 + JSF-Attributen <html xmlns="http://www.w3.org/1999/xhtml" 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>
  • 9. Herbstcampus 2013 – JavaServer Faces 2.2 9 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
  • 10. Herbstcampus 2013 – JavaServer Faces 2.2 10 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>
  • 11. Herbstcampus 2013 – JavaServer Faces 2.2 11 Demonstration • Pass-Through-Attribute • Pass-Through-Elemente Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-html5 HTML5 Friendly Markup
  • 12. Herbstcampus 2013 – JavaServer Faces 2.2 12 Resource Library Contracts • Resource Library Contract • Templates • Ersetzbare Bereiche • Ressourcen contract1 image.png style.csstemplate.xhtml contract2 image.png style.csstemplate.xhtml
  • 13. Herbstcampus 2013 – JavaServer Faces 2.2 13 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
  • 14. Herbstcampus 2013 – JavaServer Faces 2.2 14 Contracts: Ein erstes Beispiel 2/3 • Template template.xhtml <html xmlns="http://www.w3.org/1999/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>
  • 15. Herbstcampus 2013 – JavaServer Faces 2.2 15 Contracts: Ein erstes Beispiel 3/3 • 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>
  • 16. Herbstcampus 2013 – JavaServer Faces 2.2 16 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"> ...
  • 17. Herbstcampus 2013 – JavaServer Faces 2.2 17 Demonstration Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-contracts Resource Library Contracts
  • 18. Herbstcampus 2013 – JavaServer Faces 2.2 18 Faces Flows • Flow gruppiert Seiten • Definierte Start- und Endpunkte • Flows ermöglichen: • Wiederverwendbarkeit • Navigation auf Flow einschränken • Flow-Scope checkout shipping payment confirm
  • 19. Herbstcampus 2013 – JavaServer Faces 2.2 19 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
  • 20. Herbstcampus 2013 – JavaServer Faces 2.2 20 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"/>
  • 21. Herbstcampus 2013 – JavaServer Faces 2.2 21 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>
  • 22. Herbstcampus 2013 – JavaServer Faces 2.2 22 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(); } }
  • 23. Herbstcampus 2013 – JavaServer Faces 2.2 23 Flows: Knotentypen • View Node • Return Node • Flow Call Node • Switch Node • Method Call Node
  • 24. Herbstcampus 2013 – JavaServer Faces 2.2 24 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}"/>
  • 25. Herbstcampus 2013 – JavaServer Faces 2.2 25 Demonstration Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-flows Faces Flows
  • 26. Herbstcampus 2013 – JavaServer Faces 2.2 26 Stateless Views • State für Seite nicht speichern <f:view transient="true"> ... </f:view>
  • 27. Herbstcampus 2013 – JavaServer Faces 2.2 27 Neue Namensräume http://xmlns.jcp.org http://java.sun.com
  • 28. Herbstcampus 2013 – JavaServer Faces 2.2 28 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; } }
  • 29. Herbstcampus 2013 – JavaServer Faces 2.2 29 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}"/>
  • 30. Herbstcampus 2013 – JavaServer Faces 2.2 30 Demonstration Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-view-action View Actions
  • 31. Herbstcampus 2013 – JavaServer Faces 2.2 31 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;} }
  • 32. Herbstcampus 2013 – JavaServer Faces 2.2 32 Demonstration Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-input-file Dateiupload mit h:inputFile
  • 33. Herbstcampus 2013 – JavaServer Faces 2.2 33 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(); } }
  • 34. Herbstcampus 2013 – JavaServer Faces 2.2 34 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>
  • 35. Herbstcampus 2013 – JavaServer Faces 2.2 35 Demonstration • Tags für Komponenten aus mehreren Bibliotheken Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-composite-component-tags Tags für Kompositkomponenten
  • 36. Herbstcampus 2013 – JavaServer Faces 2.2 36 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>
  • 37. Herbstcampus 2013 – JavaServer Faces 2.2 37 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>
  • 38. Herbstcampus 2013 – JavaServer Faces 2.2 38 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>
  • 39. Herbstcampus 2013 – JavaServer Faces 2.2 39 Demonstration • Beispiel Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-reset-values Eingabefelder zurücksetzen
  • 40. Herbstcampus 2013 – JavaServer Faces 2.2 40 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
  • 41. Herbstcampus 2013 – JavaServer Faces 2.2 41 Apache MyFaces 2.2-SNAPSHOT Status Implementierungen Oracle Mojarra 2.2.2
  • 43. Herbstcampus 2013 – JavaServer Faces 2.2 43 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