Your SlideShare is downloading. ×
JavaServer Faces 2.2 (Herbstcampus 2013)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaServer Faces 2.2 (Herbstcampus 2013)

2,154
views

Published on

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

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.

Published in: Technology, News & Politics

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,154
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 42. Vielen Dank! Michael Kurz Irian Solutions GmbH
  • 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