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 ...
Herbstcampus 2013 – JavaServer Faces 2.2 3
Big Ticket Features
• HTML5 Friendly Markup
• Resource Library Contracts
• Face...
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...
Herbstcampus 2013 – JavaServer Faces 2.2 6
HTML5: Pass-Through-Attribute
• Seite mit JSF-Tags + HTML5-Attributen
<html xml...
Herbstcampus 2013 – JavaServer Faces 2.2 7
HTML5: Pass-Through-Attribute
• Pass-Through-Attribute über Tags
• HTML5-Custom...
Herbstcampus 2013 – JavaServer Faces 2.2 8
HTML5: Pass-Through-Elemente
• Seite mit HTML5 + JSF-Attributen
<html xmlns="ht...
Herbstcampus 2013 – JavaServer Faces 2.2 9
HTML5: Mapping zu JSF-Tags
HTML-Element Selektor-Attribut JSF-Tag
a jsf:action ...
Herbstcampus 2013 – JavaServer Faces 2.2 10
HTML5: Pass-Through-Elemente
• Pass-Through-Elemente werden Komponenten
• Gene...
Herbstcampus 2013 – JavaServer Faces 2.2 11
Demonstration
• Pass-Through-Attribute
• Pass-Through-Elemente
Beispiel: https...
Herbstcampus 2013 – JavaServer Faces 2.2 12
Resource Library Contracts
• Resource Library Contract
• Templates
• Ersetzbar...
Herbstcampus 2013 – JavaServer Faces 2.2 13
Contracts: Ein erstes Beispiel 1/3
• JSF sucht Contracts an folgenden Stellen
...
Herbstcampus 2013 – JavaServer Faces 2.2 14
Contracts: Ein erstes Beispiel 2/3
• Template template.xhtml
<html xmlns="http...
Herbstcampus 2013 – JavaServer Faces 2.2 15
Contracts: Ein erstes Beispiel 3/3
• Template-Client
<ui:composition template=...
Herbstcampus 2013 – JavaServer Faces 2.2 16
Contracts: Zuordnung
• Standard: Alle Seiten bekommen alle Contracts
• Statisc...
Herbstcampus 2013 – JavaServer Faces 2.2 17
Demonstration
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-contra...
Herbstcampus 2013 – JavaServer Faces 2.2 18
Faces Flows
• Flow gruppiert Seiten
• Definierte Start- und Endpunkte
• Flows ...
Herbstcampus 2013 – JavaServer Faces 2.2 19
Flows: Implizite Flow-Definition
• Definition in Verzeichnis /<flow-ID>
• Leer...
Herbstcampus 2013 – JavaServer Faces 2.2 20
Flows: Impliziten Flow verwenden
• Flow starten:
• Navigation innerhalb Flow:
...
Herbstcampus 2013 – JavaServer Faces 2.2 21
Flows: Explizite Flow-Definition (XML)
• Konfiguration in <flow-ID>-flow.xml
<...
Herbstcampus 2013 – JavaServer Faces 2.2 22
Flows: Explizite Flow-Definition (Java)
• Konfiguration mit CDI-Producer
publi...
Herbstcampus 2013 – JavaServer Faces 2.2 23
Flows: Knotentypen
• View Node
• Return Node
• Flow Call Node
• Switch Node
• ...
Herbstcampus 2013 – JavaServer Faces 2.2 24
Flows: @FlowScoped
• CDI-Scope für einen Flow
• An Browsertab/-fenster gebunde...
Herbstcampus 2013 – JavaServer Faces 2.2 25
Demonstration
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-flows
...
Herbstcampus 2013 – JavaServer Faces 2.2 26
Stateless Views
• State für Seite nicht speichern
<f:view transient="true">
.....
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...
Herbstcampus 2013 – JavaServer Faces 2.2 29
View Actions: Details
• Standardmäßig in Invoke Application
• View-Actions sta...
Herbstcampus 2013 – JavaServer Faces 2.2 30
Demonstration
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-view-a...
Herbstcampus 2013 – JavaServer Faces 2.2 31
Dateiupload mit h:inputFile
• Komponente h:inputFile
• Eigenschaft vom Typ jav...
Herbstcampus 2013 – JavaServer Faces 2.2 32
Demonstration
Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-input-...
Herbstcampus 2013 – JavaServer Faces 2.2 33
CollectionDataModel
• h:dataTable unterstützt java.util.Collection
<h:dataTabl...
Herbstcampus 2013 – JavaServer Faces 2.2 34
Tags für Kompositkomponenten
• Tags für einzelne Kompositkomponenten
<facelet-...
Herbstcampus 2013 – JavaServer Faces 2.2 35
Demonstration
• Tags für Komponenten aus mehreren Bibliotheken
Beispiel: https...
Herbstcampus 2013 – JavaServer Faces 2.2 36
Konfigurierbares Ressourcenverzeichnis
• Kontextparameter in web.xml
• ... auc...
Herbstcampus 2013 – JavaServer Faces 2.2 37
Verzögerte Ajax-Anfragen
• Ajax-Anfrage wird verzögert
• Nur aktuellste Anfrag...
Herbstcampus 2013 – JavaServer Faces 2.2 38
Eingabefelder zurücksetzen
• Eingabefelder bei Ajax-Anfrage zurücksetzen
<h:fo...
Herbstcampus 2013 – JavaServer Faces 2.2 39
Demonstration
• Beispiel
Beispiel: https://github.com/jsflive/jsf22-examples/j...
Herbstcampus 2013 – JavaServer Faces 2.2 40
CDI-View-Scope
• Annotation für View-Scope in CDI
• Alternative:
@javax.inject...
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
• I...
Nächste SlideShare
Wird geladen in …5
×

JavaServer Faces 2.2 (Herbstcampus 2013)

3.086 Aufrufe

Veröffentlicht am

Folien für die Session "Neues Gesicht: Neues und Erwähnenswertes aus JavaServer Faces 2.2" vom Herbstcampus 2013.

Die Beispiele für diese Session sind unter https://github.com/jsflive/jsf22-examples verfügbar.

Veröffentlicht in: Technologie, News & Politik
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.086
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

JavaServer Faces 2.2 (Herbstcampus 2013)

  1. 1. Neues Gesicht Neues und Erwähnenswertes aus JavaServer Faces 2.2 Michael Kurz Irian Solutions GmbH
  2. 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. 3. Herbstcampus 2013 – JavaServer Faces 2.2 3 Big Ticket Features • HTML5 Friendly Markup • Resource Library Contracts • Faces Flows • Stateless Views
  4. 4. Herbstcampus 2013 – JavaServer Faces 2.2 4 HTML5 Neue Eingabetypen Custom-Data-Attribute Neue Elemente Neue Attribute
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 17. Herbstcampus 2013 – JavaServer Faces 2.2 17 Demonstration Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-contracts Resource Library Contracts
  18. 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. 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. 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. 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. 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. 23. Herbstcampus 2013 – JavaServer Faces 2.2 23 Flows: Knotentypen • View Node • Return Node • Flow Call Node • Switch Node • Method Call Node
  24. 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. 25. Herbstcampus 2013 – JavaServer Faces 2.2 25 Demonstration Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-flows Faces Flows
  26. 26. Herbstcampus 2013 – JavaServer Faces 2.2 26 Stateless Views • State für Seite nicht speichern <f:view transient="true"> ... </f:view>
  27. 27. Herbstcampus 2013 – JavaServer Faces 2.2 27 Neue Namensräume http://xmlns.jcp.org http://java.sun.com
  28. 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. 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. 30. Herbstcampus 2013 – JavaServer Faces 2.2 30 Demonstration Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-view-action View Actions
  31. 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. 32. Herbstcampus 2013 – JavaServer Faces 2.2 32 Demonstration Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-input-file Dateiupload mit h:inputFile
  33. 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. 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. 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. 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. 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. 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. 39. Herbstcampus 2013 – JavaServer Faces 2.2 39 Demonstration • Beispiel Beispiel: https://github.com/jsflive/jsf22-examples/jsf22-reset-values Eingabefelder zurücksetzen
  40. 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. 41. Herbstcampus 2013 – JavaServer Faces 2.2 41 Apache MyFaces 2.2-SNAPSHOT Status Implementierungen Oracle Mojarra 2.2.2
  42. 42. Vielen Dank! Michael Kurz Irian Solutions GmbH
  43. 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

×