0
Stephan Müller| open knowledge GmbH
Year One – Ein Jahr mit JSF 2.2
Ein Jahr mit JSF 2.2
... und Geschenke
gibt’s auch
Unsere allseits
beliebte OK-Tasse
JSF 2.2
JSR-344
- Mojarra (RI) v2.2.6
- Apache MyFaces
v.2.2.4
Features
- Big Ticket (4x)
- Medium Size
- Small Size
(u.a....
Implemen-
tierungen
Laufzeit-
umgebungen
Utility-
Bibliotheken
Komponenten-
bibliotheken
JSF 2.2 Ökosystem
Year One ...
Mojarra 2.2.0
12. Juni 2013
 JSR-344 RI
MyFaces 2.2.0:
14. Januar 2014
Q2 2013 Q3 2013 Q4 2013 Q1 2014 Q2 20...
JSF 2.2 Projekt
Technologie
- Java EE7
- JBoss WildFly
- MySQL
- viel JavaScript & AJAX
Team
- 4 JSF-Neulinge
- 2 Coaches
...
JSF 2.2 Lessons learned
1) HTML Friendly Markup
2) Resource Library
Contracts
3) Faces Flow
4) ViewScope
5) ViewActions
6)...
HTML Friendly Markup
Idee
Standardisierter
HTML5 Support
in JSF
Konzepte
- Pass-through Attributes
- Pass-through Elements
Pass-through Attributes
Konzept
Unterstützung für HTML5
und
data-* Attribute
Lessons learned
Gut geeignet für
bestehende A...
Pass-through Attributes
<!DOCTYPE html>
<html xmlns="http://ww.w3.org/1999/xhtml" ...>
<h:head><title>...</title></h:head>...
Pass-through Attributes
<!DOCTYPE html>
<html xmlns="http://ww.w3.org/1999/xhtml" ...
xmlns:p="http://xmlns.jcp.org/jsf/pa...
Pass-through Elements
Konzept
- Volle Kontrolle
über HTML
- Trennung von
Design & UI-Logik
- HTML mit JSF
anreichern
Lesso...
Pass-through Elements
<!DOCTYPE html>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head><title>...</title></head>
<body>
<...
Pass-through Elements
<!DOCTYPE html>
<html xmlns=“http://www.w3.org/1999/xhtml”
xmlns:jsf=“http://xmlns.jcp.org/jsf" ...>...
Pass-through Elements
<h:inputText
id="firstName"
value="#{...}"
readonly="#{...}"
disabled="#{...}"
rendered="#{...}"
max...
Resource Library Contracts
Konzept
- Theming
- mandanten-
spezifisches
Look & Feel
Contract
- Facelet-Template
- CSS
- Bil...
Resource Library Contracts
demo.war
|- contracts Contracts
| - default Theme “default“
|- template.xhtml
|- ...
|- resourc...
Resource Library Contracts
<!DOCTYPE html>
<html xmlns=“http://ww.w3.org/1999/xhtml” ...>
<head jsf:id=“head“><title>...</...
Resource Library Contracts
<?xml version="1.0" encoding="UTF-8"?>
<faces-config ...>
<application>
...
<!– theme configura...
Faces Flow
Knotentypen
- View Node
- Return Node
- Flow Call Node
- Switch Node
- Method Call Node
Lessons learned
- Schle...
Faces Flow
<?xml version="1.0"?>
<faces-config version="2.2" ...>
<flow-definition id="flow">
<start-node>first</start-nod...
Faces Flow
@Named
@javax.faces.flow.ViewScoped("flow")
public class FlowBean implements Serializable {
@PostConstruct
void...
ViewScope
Konzept
Bean existiert über
mehrere Requests bis die
View verlassen wird
Lösungen
ViewAccessScope
verwenden
(Apa...
ViewScope
@Named
@javax.faces.view.ViewScoped
public class UserDetailBean implements Serializable {
private User user;
@Po...
ViewScope
@Named
@org.apache.deltaspike.core.api.scope.ViewAccessScoped
public class UserDetailBean implements Serializabl...
ViewAction
Konzept
- Ausführung von Logik
vor dem Rendern der
Seite
- Unterstützung für
GET-Requests mit
view-Parametern
V...
ViewAction
<!DOCTYPE html>
<html xmlns=“http://ww.w3.org/1999/xhtml” ...>
<head jsf:id=“head“><title>...</title></head>
<f...
ViewAction
@Named
@ViewScoped
public class UserDetailBean implements Serializable {
private User user;
@PostConstruct
void...
FileUpload
Konzept
Standardisierter
FileUpload
Lessons learned
- kein Support für fancy UI
(e.g. Fortschrittsbalken)
- kei...
FileUpload
<!DOCTYPE html>
<html xmlns=“http://ww.w3.org/1999/xhtml” ...>
<head jsf:id=“head“><title>...</title></head>
<b...
JSF 2.2 Lessons learned
1) HTML Friendly Markup
✓
2) Resource Library
Contracts ✓
3) Faces Flow ✓
4) ViewScope ✓
5) ViewAc...
CDI Injection in JSF artifacts
Konzept
CDI Injection in allen
JSF Artefakten
Lösungen
- OmniFaces
- Converter/Validator al...
CDI Injection in JSF artifacts
@FacesValidator
public class UniqueUserValidator implements Validator {
@Inject
private Use...
CDI Injection in JSF artifacts
@Named
@RequestScoped
@FacesValidator
public class UniqueUserValidator implements Validator...
CDI Injection in JSF artifacts
<!DOCTYPE html>
<html xmlns=“http://www.w3.org/1999/xhtml” ...>
<head jsf:id=“head“><title>...
CSRF Protection
Idee
Schutz gegen
CSRF Angriffe
Lessons learned
Jede View muss einzeln
definiert werden
Konzept
- GET-Requ...
CSRF Protection
<?xml version="1.0" encoding="UTF-8"?>
<faces-config ...>
...
<!– protected views configuration -->
<prote...
Configurable Resource Folder
Lessons learned
- in der Praxis leider mit
Seiteneffekten
Idee
Browser-Zugriff auf
/resource ...
Configurable Resource Folder
<web-app version="3.0" ...>
<context-param>
<param-name>
javax.faces.WEBAPP_RESOURCES_DIRECTO...
Ajax resetValues
Idee
Beim Schließen eines
Overlay sollen die
UIInput Komponenten
“resettet“ werden
Erfahrungen
- @form fu...
Ajax resetValues
<b:overlay>
<h:form id="form“>
<h:outputLabel for="userName" value="UserName"/>
<h:inputText id="userName...
Multiple Forms *
Lessons learned
- * bekannter Fehler
(PUBLIC-790)
- Lösung von BalusC
(Communication in JSF 2.0)
Anforder...
JSF 2.2 Lessons learned
1) HTML Friendly Markup
✓
2) Resource Library
Contracts ✓
3) Faces Flow ✓
4) ViewScope ✓
5) ViewAc...
Exkurs:
Expression Language 3.0
Expression Language 3.0
- Neue Operatoren
- Collection construction
- Lambda expressions
- Static field & method
reference...
Expression Language 3.0
<!-- Example: Map Construction -->
<h:inputText id=“email“ value=“#{...}“>
<f:passThroughAttribute...
Fazit
- War HTML Markup Friendly ein Schritt nach vorn?
- Wie fühlt sich FacesFlow in der Praxis an?
- Können Protected Vi...
Q&A
Gibt es noch
Fragen?
Dann los ...
Weitere Infos zu JSF 2.2
Java EE 7 Tutorial
http://docs.oracle.com/javaee/7/tutorial/doc/home.htm
JSF 2.2 (JSR-344) http:/...
Über open knowledge und den Speaker
> unabhängiges, inhabergeführtes
Softwareentwicklungs- und
Beratungsunternehmen aus
Ol...
Year one ein-jahr_mit_jsf_2-2
Year one ein-jahr_mit_jsf_2-2
Upcoming SlideShare
Loading in...5
×

Year one ein-jahr_mit_jsf_2-2

555

Published on

Der erste Geburtstag von JEE 7 bietet eine gute Möglichkeit, auf das letzte Jahr zurückzuschauen und die Praxistauglichkeit der neuen JSF-Features zu bewerten. War HTML Friendly Markup ein Schritt nach vorn? Ist der Einsatz von Resource Library Contracts ein Vorteil? Wie fühlt sich Faces Flow in der Praxis an? Können Protected Views einfach eingesetzt werden? Der Vortrag stellt die Ergebnisse aus den ersten JEE-7-Projekten vor und zeigt anhand von praktischen Beispielen, wie die neuen Features am besten genutzt werden können.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Transcript of "Year one ein-jahr_mit_jsf_2-2"

  1. 1. Stephan Müller| open knowledge GmbH Year One – Ein Jahr mit JSF 2.2
  2. 2. Ein Jahr mit JSF 2.2 ... und Geschenke gibt’s auch
  3. 3. Unsere allseits beliebte OK-Tasse
  4. 4. JSF 2.2 JSR-344 - Mojarra (RI) v2.2.6 - Apache MyFaces v.2.2.4 Features - Big Ticket (4x) - Medium Size - Small Size (u.a. Bugfixes) ergänzende JSRs - EL 3.0 (JSR-341)
  5. 5. Implemen- tierungen Laufzeit- umgebungen Utility- Bibliotheken Komponenten- bibliotheken JSF 2.2 Ökosystem
  6. 6. Year One ... Mojarra 2.2.0 12. Juni 2013  JSR-344 RI MyFaces 2.2.0: 14. Januar 2014 Q2 2013 Q3 2013 Q4 2013 Q1 2014 Q2 2014 Primefaces 4.0 21. Oktober 2013 IceFaces 4.0 Beta 24. März 2014 “Glassfish“ News 04. November 2013 WildFly 8.0.0 Final 11. Februar 2014  JEE7 certified Richfaces 4.5/5.0 Demnächst ... Glassfish 4.0 Mai 2013  JEE7 certified
  7. 7. JSF 2.2 Projekt Technologie - Java EE7 - JBoss WildFly - MySQL - viel JavaScript & AJAX Team - 4 JSF-Neulinge - 2 Coaches UI-Requirements - Dashboard mit Widgets - Overlay-Formulare - File-Upload für mehrere Dateien - Diagramme zur Datenvisualisierung
  8. 8. JSF 2.2 Lessons learned 1) HTML Friendly Markup 2) Resource Library Contracts 3) Faces Flow 4) ViewScope 5) ViewActions 6) FileUpload 7) CDI Injection in JSF artifacts 8) CSRF Protection 9) Ajax resetValues 10)Configurable resource directory 11)Multiple Forms *
  9. 9. HTML Friendly Markup Idee Standardisierter HTML5 Support in JSF Konzepte - Pass-through Attributes - Pass-through Elements
  10. 10. Pass-through Attributes Konzept Unterstützung für HTML5 und data-* Attribute Lessons learned Gut geeignet für bestehende Anwendungen & composite-components Verwendung - Name-Spaced Attribute (e.g. “p:placeholder“) - <f:passThroughAttribute/> - <f:passThroughAttributes/>
  11. 11. Pass-through Attributes <!DOCTYPE html> <html xmlns="http://ww.w3.org/1999/xhtml" ...> <h:head><title>...</title></h:head> <h:body> <h:form> <h:outputLabel for="email" value=“E-Mail"/> <h:inputText id="email“ value="#{...}"> <f:passThroughAttribute name="type" value="email"/> <f:passThroughAttribute name="placeholder" value=“E-mail“/> </h:inputText> ... </h:form> </h:body> </html>
  12. 12. Pass-through Attributes <!DOCTYPE html> <html xmlns="http://ww.w3.org/1999/xhtml" ... xmlns:p="http://xmlns.jcp.org/jsf/passthrough"> <h:head><title>...</title></h:head> <h:body> <h:form> <h:outputLabel for="email" value="E-Mail"/> <h:inputText id="email" value="#{...}"> p:type="email" p:placeholder="E-Mail"/> ... </h:form> </h:body> </html>
  13. 13. Pass-through Elements Konzept - Volle Kontrolle über HTML - Trennung von Design & UI-Logik - HTML mit JSF anreichern Lessons learned - hohe Einstiegshürde - IDE Validierung wertlos - Schlechte Lesbarkeit durch Namespaced Attribute Problem - Unübersichtlicher Code (starker Mix aus HTML und JSF-Tags)
  14. 14. Pass-through Elements <!DOCTYPE html> <html xmlns=“http://www.w3.org/1999/xhtml”> <head><title>...</title></head> <body> <form> <label>Vorname</label> <input type="text“ id=“FirstName”/> ... </form> </body> </html>
  15. 15. Pass-through Elements <!DOCTYPE html> <html xmlns=“http://www.w3.org/1999/xhtml” xmlns:jsf=“http://xmlns.jcp.org/jsf" ...> <head jsf:id=“head“><title>...</title></head> <body jsf:id=“body“> <form jsf:id=“form“> <label>Vorname</label> <input type="text“ jsf:id="firstName“ jsf:value="#{...}“/> <h:message for="firstName"/> ... </form> </body> </html>
  16. 16. Pass-through Elements <h:inputText id="firstName" value="#{...}" readonly="#{...}" disabled="#{...}" rendered="#{...}" maxlength="30" title="Vorname" styleClass="…"/> <input type=“text” jsf:id="firstName" jsf:value="#{...}" jsf:readonly="#{...}" jsf:disabled="#{...}" jsf:rendered="#{...}" length="30" title="Vorname” class="…"/>
  17. 17. Resource Library Contracts Konzept - Theming - mandanten- spezifisches Look & Feel Contract - Facelet-Template - CSS - Bilder - JavaScript Lessons learned - Erhöhte Komplexität für Resourcen-Verteilung durch weiteres Verzeichnis - Schlechte IDE-Unterstützung
  18. 18. Resource Library Contracts demo.war |- contracts Contracts | - default Theme “default“ |- template.xhtml |- ... |- resources Resourcen | - ... |- WEB-INF | - classes Java Klassen und Ressourcen | - lib Java Libraries | - faces-config.xml Konfigurationsdatei (optional) | - web.xml Deployment Deskriptor (optional)
  19. 19. Resource Library Contracts <!DOCTYPE html> <html xmlns=“http://ww.w3.org/1999/xhtml” ...> <head jsf:id=“head“><title>...</title></head> <body jsf:id=“body“> <f:view contracts=“#{currentTheme}“> <form jsf:id=“form“> ... </form> <f:view> </body> </html>
  20. 20. Resource Library Contracts <?xml version="1.0" encoding="UTF-8"?> <faces-config ...> <application> ... <!– theme configuration --> <resource-library-contract> <contract-mapping> <description>Default theme</description> <url-pattern>*</url-pattern> <contracts>default</contracts> </contract-mapping> </resource-library-contract> </application> </faces-config>
  21. 21. Faces Flow Knotentypen - View Node - Return Node - Flow Call Node - Switch Node - Method Call Node Lessons learned - Schlecht dokumentiert - Wenig komplexe Beispiele - Fehler in faces-config.xsd Konzept - UI Prozesse realisieren - Definierte Start-/Endpunkte - Navigation auf Flow beschränken
  22. 22. Faces Flow <?xml version="1.0"?> <faces-config version="2.2" ...> <flow-definition id="flow"> <start-node>first</start-node> <view id="first"> <vdl-document>/flow/page1.xhtml</vdl-document> </view> ... <flow-return id="flow-return"> <from-outcome>/index.xhtml</from-outcome> </flow-return> <initializer>#{...}</initializer> <finalizer>#{...}</finalizer> </flow-definition> </faces-config>
  23. 23. Faces Flow @Named @javax.faces.flow.ViewScoped("flow") public class FlowBean implements Serializable { @PostConstruct void init() { ... } public void initializeFlow() { ... } public void finalizeFlow() { ... } ... }
  24. 24. ViewScope Konzept Bean existiert über mehrere Requests bis die View verlassen wird Lösungen ViewAccessScope verwenden (Apache Deltaspike) Problem GET-Request (F5) erzeugt ViewScoped Bean neu
  25. 25. ViewScope @Named @javax.faces.view.ViewScoped public class UserDetailBean implements Serializable { private User user; @PostConstruct void init() { ... } public void load() { ... } }
  26. 26. ViewScope @Named @org.apache.deltaspike.core.api.scope.ViewAccessScoped public class UserDetailBean implements Serializable { private User user; @PostConstruct void init() { ... } public void load() { ... } }
  27. 27. ViewAction Konzept - Ausführung von Logik vor dem Rendern der Seite - Unterstützung für GET-Requests mit view-Parametern Vorteile - Aufruf “nur“ beim initialen Request - Standardnavigation (e.g. redirect) möglich Lessons learned TOP FEATURE !!! (auch für FacesFlow)
  28. 28. ViewAction <!DOCTYPE html> <html xmlns=“http://ww.w3.org/1999/xhtml” ...> <head jsf:id=“head“><title>...</title></head> <f:metadata> <f:viewParam name="id" value="#{userDetailBean.id}“ /> <f:viewAction action="#{userDetailBean.load}“ /> </f:metadata> <body jsf:id=“body“> <form jsf:id=“form“> ... </form> </body> </html>
  29. 29. ViewAction @Named @ViewScoped public class UserDetailBean implements Serializable { private User user; @PostConstruct void init() { ... } public void load() { ... } }
  30. 30. FileUpload Konzept Standardisierter FileUpload Lessons learned - kein Support für fancy UI (e.g. Fortschrittsbalken) - keine parallelen Uploads möglich Problem Ajax Requests mehrerer h:inputFile Komponenten werden nicht gequeued
  31. 31. FileUpload <!DOCTYPE html> <html xmlns=“http://ww.w3.org/1999/xhtml” ...> <head jsf:id=“head“><title>...</title></head> <body jsf:id=“body“> <form jsf:id=“form“ jsf:enctype="multipart/form-data“> <label>Bild</label> <f:inputFile id=“picture“ value=“#{...}“> <f:validatorId=“pictureValidator“> <f:ajax> </f:inputFile> <h:message for=“picture“ /> </form> </body> </html>
  32. 32. JSF 2.2 Lessons learned 1) HTML Friendly Markup ✓ 2) Resource Library Contracts ✓ 3) Faces Flow ✓ 4) ViewScope ✓ 5) ViewActions ✓ 6) FileUpload ✓ 7) CDI Injection in JSF artifacts 8) CSRF Protection 9) Ajax resetValues 10)Configurable resource directory 11)Multiple Forms *
  33. 33. CDI Injection in JSF artifacts Konzept CDI Injection in allen JSF Artefakten Lösungen - OmniFaces - Converter/Validator als RequestScoped CDI Bean realisieren Problem Keine CDI Injection für Converter / Validatoren
  34. 34. CDI Injection in JSF artifacts @FacesValidator public class UniqueUserValidator implements Validator { @Inject private UserRepository repository; @Override public void validate(...) { ... } }
  35. 35. CDI Injection in JSF artifacts @Named @RequestScoped @FacesValidator public class UniqueUserValidator implements Validator { @Inject private UserRepository repository; @Override public void validate(...) { ... } }
  36. 36. CDI Injection in JSF artifacts <!DOCTYPE html> <html xmlns=“http://www.w3.org/1999/xhtml” ...> <head jsf:id=“head“><title>...</title></head> <body jsf:id=“body“> <form jsf:id=“form“> <label>Vorname</label> <input type=“text“ jsf:value=“#{...}”> <f:validator binding=“#{uniqueUserValidator}”/> </input> ... </form> </body> </html>
  37. 37. CSRF Protection Idee Schutz gegen CSRF Angriffe Lessons learned Jede View muss einzeln definiert werden Konzept - GET-Request wird verhindert (ProtectedViewException) - Zugriff nur mit Token & POST-Navigation
  38. 38. CSRF Protection <?xml version="1.0" encoding="UTF-8"?> <faces-config ...> ... <!– protected views configuration --> <protected-views> <url-pattern>/secure/index.xhtml</url-pattern> <url-pattern>/secure/edit.xhtml</url-pattern> <url-pattern>...</url-pattern> </protected-views> ... </faces-config>
  39. 39. Configurable Resource Folder Lessons learned - in der Praxis leider mit Seiteneffekten Idee Browser-Zugriff auf /resource verhindern Problem - EL-Expressions in CSS notwendig(für Bilder) - IDE kann Verzeichnisse nicht mehr auflösenKonzept Pfad von /resource konfigurierbar
  40. 40. Configurable Resource Folder <web-app version="3.0" ...> <context-param> <param-name> javax.faces.WEBAPP_RESOURCES_DIRECTORY </param-name> <param-value>/WEB-INF/resources</param-value> </context-param> <context-param> <param-name> javax.faces.WEBAPP_CONTRACTS_DIRECTORY </param-name> <param-value>/WEB-INF/contracts</param-value> </context-param> </web-app>
  41. 41. Ajax resetValues Idee Beim Schließen eines Overlay sollen die UIInput Komponenten “resettet“ werden Erfahrungen - @form funktioniert nicht - clientId aller betroffenen Komponenten muss explizit angegeben werden
  42. 42. Ajax resetValues <b:overlay> <h:form id="form“> <h:outputLabel for="userName" value="UserName"/> <h:inputText id="userName" value="#{...}"/> <h:message for="userName" /> <h:outputLabel for="email" value="E-Mail"/> <h:inputText id="email" value="#{...}"/> <h:message for="email"/> <h:commandButton value="Schließen"/> <f:ajax render="userName email“ resetValues="true“ listener="#{...}" /> </h:commandButton> </h:form> </b:overlay>
  43. 43. Multiple Forms * Lessons learned - * bekannter Fehler (PUBLIC-790) - Lösung von BalusC (Communication in JSF 2.0) Anforderung - mehrere Formulare (h:form) auf einer Seite - AJAX Problem HiddenInput Element javax.faces.ViewState wird nicht zu 2./3./... Formular hinzugefügt
  44. 44. JSF 2.2 Lessons learned 1) HTML Friendly Markup ✓ 2) Resource Library Contracts ✓ 3) Faces Flow ✓ 4) ViewScope ✓ 5) ViewActions ✓ 6) FileUpload ✓ 7) CDI Injection in JSF artifacts ✓ 8) CSRF Protection ✓ 9) Configurable resource directory ✓ 10)Ajax resetValues ✓ 11)Multiple Forms ✓
  45. 45. Exkurs: Expression Language 3.0
  46. 46. Expression Language 3.0 - Neue Operatoren - Collection construction - Lambda expressions - Static field & method references x = bean.value; 'Wert ' += x ['a', 'b', 'c'] // List {'a':1, 'b':2, 'c':3} // Map (x -> x + 1)(10) // 11 Integer.MAX_VALUE Integer.toHexString(16)
  47. 47. Expression Language 3.0 <!-- Example: Map Construction --> <h:inputText id=“email“ value=“#{...}“> <f:passThroughAttributes value="#{{'placeholder':'test', 'type':'email'}}"/> </h:inputText> <!-- Example: List Construction --> <ui:repeat var="item" value="#{['a', 'b', 'c']}"> ... </ui:repeat> <!-- Static Field / :( not working (EL_SPEC-16) --> <h:outputText value="#{Integer.MAX_VALUE}"/>
  48. 48. Fazit - War HTML Markup Friendly ein Schritt nach vorn? - Wie fühlt sich FacesFlow in der Praxis an? - Können Protected Views einfach eingesetzt werden?
  49. 49. Q&A Gibt es noch Fragen? Dann los ...
  50. 50. Weitere Infos zu JSF 2.2 Java EE 7 Tutorial http://docs.oracle.com/javaee/7/tutorial/doc/home.htm JSF 2.2 (JSR-344) http://javaserverfaces.java.net EL 3.0 (JSR-341) https://java.net/projects/el-spec BalusC Weblog http://balusc.blogspot.de Michael Kurz‘s JSF Weblog http://jsflive.wordpress.com
  51. 51. Über open knowledge und den Speaker > unabhängiges, inhabergeführtes Softwareentwicklungs- und Beratungsunternehmen aus Oldenburg > Kernkompetenzen im Enterprise- und Mobile-Computing > Stephan Müller > Enterprise Architect facebook.com/openknowledge twitter.com/_openknowledge twitter.com/muellerst
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×