Your SlideShare is downloading. ×
FacesTales - live on Stage
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

FacesTales - live on Stage

837
views

Published on

Die beiden Autoren der JSF-Kolumne - Lars Röwekamp und Matthias Weßendorf – zeigen den aktuellen Stand der Dinge im JSF-2.0-Umfeld. Neben bekannten Hits wie "JSF 2.0 Special Features", "JSF & CDI" …

Die beiden Autoren der JSF-Kolumne - Lars Röwekamp und Matthias Weßendorf – zeigen den aktuellen Stand der Dinge im JSF-2.0-Umfeld. Neben bekannten Hits wie "JSF 2.0 Special Features", "JSF & CDI" oder "Composite Components" bringen die beiden auch bisher unveröffentlichtes Live-Material auf die Bühne. Ein absolutes Muss für jeden JSF-Fan!

Published in: Technology, Business

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

  • Be the first to like this

No Downloads
Views
Total Views
837
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Components\n
  • Components\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Achtung: woher kommt newPwd?\n
  • \n
  • poprietärere Ansätze führen bei Problem wenn man mehrere Libs verwendet. \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Live on Stage:Lars Röwekamp Matthias Weßendorfopen knowledge GmbH kaazing Corporation(@mobileLarson) (@mwessendorf)
    • 2. I‘ am aJSF2 Fan
    • 3. JSF 2- Greatest Hits (ever) - „New Features(remix)“„Templates & Components“ „Navigation reloaded“ „eXtreme Validation“ „Ajax & Friends“
    • 4. JSF 2- Greatest Hits (ever) - „New Features(remix)“ t“„Templates & Components“ s ue G al „Navigation reloaded“ ci pe „S „eXtreme Validation“ „Ajax & Friends“
    • 5. „New Features(remix)“– VDSL mit Facelets als Default*– Templating Mechanism*– Composite Components*– Ajax Support*– Partial State Saving– System Events– eXtended Navigation*– GET Support
    • 6. „New Features(remix)“– Scopes*– Behaviors*– @nnotations*– Error Handling– Ressource Loading*
    • 7. JSF 2- Greatest Hits (ever) - „New Features(remix)“„Templates & Components“ „Navigation reloaded“ „eXtreme Validation“ „Ajax & Friends“
    • 8. „Templates & Components“View Declaration Syntax Language– Syntax zur Deklaration von JSF Views– Facelets als Default VDSL– „Geschenkt“: – Facelets Templating – Composite Components
    • 9. „Templates & Components“ View Declaration Syntax Language„Liebe JSPs, danke für die schöne Zeit!“! – Syntax zur Deklaration von JSF Views – Facelets als Default VDSL – „Geschenkt“: – Facelets Templating – Composite Components
    • 10. „Templates & Components“Facelets– speziell für JSF konzipiert und daher optimal abgestimmter LifeCycle– Inhalte aus XHTML Dokumenten verknüpfen und zu einem Komponentenbaum zusammen fügen
    • 11. „Templates & Components“Facelets & Templating–
    • 12. „Templates & Components“ Facelets & Templating –Header
    • 13. „Templates & Components“ Facelets & Templating –Header Footer
    • 14. „Templates & Components“ Facelets & Templating –Header Footer Content
    • 15. „Templates & Components“ Facelets & Templating –Header Footer Content Navigation
    • 16. „Templates & Components“Facelets & Templating– ui:insert: definiert ersetzbare Bereich in einem xhtml Template– ui:composition: definiert das Template, das auf eine xhtml Seite angewendet werden soll– ui:define: definiert den im Template zu ersetzenden Bereich einer xhtml Seite
    • 17. „Templates & Components“ Template Page<html xmlns=“http://www.w3.org/1999/xhtml” xmlns:ui=”http://java.sun.com/jsf/facelets” > <head><title>#{title}</title> ... </head> <body> <div id=“header> <ui:insert name=“header”>#{title}</ui:insert> </div> <div id=“content> <ui:insert name=“content”> <ui:include src=“defaultContent.xhtml“ /> </ui:insert> </div> <div id=“footer> <ui:insert name=“footer”>&copy; 09</ui:insert> </div> </body></html>
    • 18. „Templates & Components“ Client Page<html xmlns=“http://www.w3.org/1999/xhtml” xmlns:ui=”http://java.sun.com/jsf/facelets” > <head><title>#{title}</title> ... </head> <body> <ui:composition template=“baseTemplate.xhtml”> <ui:param name=“title” value=“Login” /> <ui:define name=“content”> <!-- real page content --> ... </ui:define> </ui:composition> </body></html>
    • 19. „Templates & Components“Facelets & Template Hierachien
    • 20. „Templates & Components“Facelets & Template Hierachien– Idee: mehrere Templates pro Seite verwenden– Problem: mehrere ui:composition pro Seite sind nicht möglich, da Bereich außerhalb ausgeblendet wird– Lösung: spezielle Variante ui:decorate innerhalb eines ui:composite Tags verwenden
    • 21. „Templates & Components“ Template Page ... <ui:composition template=“baseTemplate.xhtml”> ... <ui:define name=“left_content> <ui:decorate template=“leftContent.xhtml”> <ui:param name=“title” value=“News” /> ... </ui:decorate> </ui:define> ... <ui:composition> ...
    • 22. „Templates & Components“ Template Page ... <ui:composition template=“baseTemplate.xhtml”> ... <ui:define name=“left_content> <ui:decorate template=“leftContent.xhtml”> <ui:param name=“title” value=“News” /> ... </ui:decorate> </ui:define> ... <ui:composition> ...
    • 23. „Templates & Components“Facelets & Components– Ziel: Konsistentes L&F und Usability– Mittel: Reuse via Komponenten– Basis: Trennung von Model & View
    • 24. „Templates & Components“
    • 25. „Templates & Components“
    • 26. „Templates & Components“
    • 27. „Templates & Components“Facelets & Components– JSF 1: Classic Custom Components – sehr mächtig aber auch sehr komplex in der Erstellung („Kanonen auf Spatzen“)– JSF 2: Composite Components – ebenfalls mächtig – dank XHTML und JS – aber einfach in der Erstellung
    • 28. „Templates & Components“Facelets & Components– JSF 1: Classic Custom Component – „Keep every Thing possible – „Maximum of Flexibility“– JSF 2: Composite Components – „Keep simple Things simple“ – „Convention over Code“ – „Convention over Configuration“
    • 29. „Templates & Components“Facelets & Components– Beispiel: commandIcon – Eine eigene Komponente, die sich wie ein CommandLink verhält und wie ein Image aussieht – „Image“ ist frei konfigurierbar – „Action“ ist frei konfigurierbar – „Style“ ist frei konfigurierbar
    • 30. „Templates & Components“ <html xmlns=“http://www.w3.org/1999/xhtml” ... xmnls:util=“http://java.sun.com/jsf/composite/ comp/util“> ... <util:commandIcon actionMethod=“...” image=“...” styleClass=“...” /> ... </html>
    • 31. „Templates & Components“ <html xmlns=“http://www.w3.org/1999/xhtml” ... xmnls:util=“http://java.sun.com/jsf/composite/ comp/util“> ... <util:commandIcon actionMethod=“...” image=“...” styleClass=“...” /> ... </html>Komponente liegt unter: ./resources/comp/util/commandIcon.xhtml
    • 32. „Templates & Components“<html xmlns=“http://www.w3.org/1999/xhtml" xmlns:composite=".../jsf/composite"> <!-- INTERFACE --> <composite:interface> <composite:attribute name="image"/> <composite:attribute name="actionMethod" method-signature="java.lang.String action()"/> <composite:attribute name=“styleClass“ default=“icon“ required=“false“ /> </composite:interface> <!-- IMPLEMENTATION --> <composite:implementation>... </composite:implementation></html>
    • 33. „Templates & Components“ <html xmlns=“http://www.w3.org/1999/xhtml" xmlns:composite=".../jsf/composite"> <!-- INTERFACE --> <composite:interface> <composite:attribute name="image"/> <composite:attribute name="actionMethod" method-signature="java.lang.String action()"/> <composite:attribute name=“styleClass“ default=“icon“ required=“false“ /> </composite:interface> <!-- IMPLEMENTATION --> <composite:implementation>... </composite:implementation> </html>Komponente hat Attribute: image actionMethod styleClass
    • 34. „Templates & Components“<html ...> <!-- INTERFACE --> ... <!-- IMPLEMENTATION --> <composite:implementation> <h:outputStyle library=“comp/util“ name=“commandIcon.css“ /> <h:commandLink action="#{cc.attrs.actionMethod}“ immediate="true"> <h:graphicImage value="#{cc.attrs.image}“ styleClass="#{cc.attrs.styleClass}"/> </h:commandLink> </composite:implementation></html>
    • 35. „Templates & Components“ <html ...> <!-- INTERFACE --> ... <!-- IMPLEMENTATION --> <composite:implementation> <h:outputStyle library=“comp/util“ name=“commandIcon.css“ /> <h:commandLink action="#{cc.attrs.actionMethod}“ immediate="true"> <h:graphicImage value="#{cc.attrs.image}“ styleClass="#{cc.attrs.styleClass}"/> </h:commandLink> </composite:implementation> </html>Komponente hat CSS unter: ./resources/comp/util/commandIcon.css
    • 36. JSF 2- Greatest Hits (ever) - „New Features(remix)“„Templates & Components“ „Navigation reloaded“ „eXtreme Validation“ „Ajax & Friends“
    • 37. „Navigation reloaded“Was ist JSF Navigation?– statisch: fixe Zielseite– dynamisch: berechnete Zielseite– implizit: Konvention bestimmt Zielseite– explizit: Konfiguration bestimmt Zielseite– bedingte: Wenn, dann ...
    • 38. „Navigation reloaded“public String myAction(String myParam) { // do something useful // jump to nextPage.xhtml // or find adequate navigation rule return “nextPage“;}
    • 39. „Navigation reloaded“BTW: Method expressions public String myAction(String myParam) { // do something useful // jump to nextPage.xhtml // or find adequate navigation rule return “nextPage“; }
    • 40. „Navigation reloaded“ Navigation rule?public String myAction(String myParam) { // do something useful // jump to nextPage.xhtml // or find adequate navigation rule return “nextPage“;}
    • 41. „Navigation reloaded“ Navigation rule?public String myAction(String myParam) { // do something useful // jump to nextPage.xhtml // or find adequate navigation rule return “nextPage“;} nextPage.xhtml?
    • 42. „Navigation reloaded“Wie funktioniert JSF Navigation?– Existiert explizite Navigationsregel? – „from-view“, „action“, „outcome“, * – „if“– Existiert implizite Navigationsregel? – View „Outcome“? – View „Outcome“ + Def.-Suffix?
    • 43. „Navigation reloaded“Wie funktioniert JSF Navigation?– Existiert explizite Navigationsregel? – „from-view“, „action“, „outcome“, * – „if“– Existiert implizite Navigationsregel? – View „Outcome“? – View „Outcome“ + Def.-Suffix? BTW: MyFaces - 680 Zeilen Code
    • 44. JSF 2- Greatest Hits (ever) - „New Features(remix)“„Templates & Components“ „Navigation reloaded“ „eXtreme Validation“ „Ajax & Friends“
    • 45. „eXtreme Validation“
    • 46. „eXtreme Validation“Was bietet JSF 2 Validation?– Default Validator – f:validateLength/...Range/...DoubleRange – f:validateRegex – f:validateRequired– Self-Made Validator – via „ManagedBean & validate(...)“ – via „implements Validator“ Interface
    • 47. „eXtreme Validation“Was bietet JSF 2 Validation nicht?– Cross Layer Validation– Cross Component Validation
    • 48. „eXtreme Validation“Cross Layer Validation in JSF 2– Bean Validation (JSR 303)– schichtenübergreifend– @nnotation basiert– Validierung des Domain Models– JSF „supported“ (wenn vorhanden)– eigene Constraints möglich
    • 49. „eXtreme Validation“public class Customer { @Birthday private Date dateOfBirth; @Min(value = 0) @Max(value = 10) private Integer children; @NotNull private String firstName; @NotNull private String lastName; ...}
    • 50. „eXtreme Validation“Cross Layer Validation in JSF 2– Bean Validation – @AssertFalse, @AssertTrue – @DecimalMax, @DecimalMin – @Digits – @Future, @Past – @Max, @Min – @NotNull, @Null – @Pattern – @Size
    • 51. „eXtreme Validation“Cross Component Validation in JSF 2– Validierung über mehrere Komponenten bzw. Attribute hinweg– Password == PasswordRepeat– Password != Login– Password Validation wie in Klasse XYZ
    • 52. „eXtreme Validation“ Cross Component Validation in JSF 2 – Validierung über mehrere Komponenten bzw. Attribute hinweg – Password == PasswordRepeat – Password != Login – Password Validation wie in Klasse XYZ(noch) NICHT in JSF
    • 53. „eXtreme Validation“Cross Component Validation in JSF 2– Alternative A: externe Lib – z.B. Apache extVal– Alternative B: JSF Validator – „implements Validator“– Alternative C: JSF 2 Events – <f:event> bei Komponente – pre/postValidate LifeCycle Callbacks
    • 54. „eXtreme Validation“Cross Component Validation in JSF 2– Alternative A: externe Lib – z.B. Apache extVal– Alternative B: JSF Validator – „implements Validator“– Alternative C: JSF 2 Events – <f:event> bei Komponente – pre/postValidate LifeCycle Callbacks
    • 55. „eXtreme Validation“<html xmlns=“http://www.w3.org/1999/xhtml” ... <h:form id=“loginForm”> <f:event type=“postValidate” listener=“changePwdBean.validate” /> ... </h:form> ... <h:messages globalOnly=“true” /></html>
    • 56. „eXtreme Validation“public class ChangePasswordBean { ... public void validate(ComonentSystemEvent event){ // get relevant component(s) and values UIForm form = (UIForm)e.getComponent(); UIInput oldPwdInput = (UIInput)form.findComponent(ID_OLD_PWD); String oldPwd = (String)oldPwdInput.value(); ... if (oldPwd.equals(newPwd)) { // 1. set faces error messgage // 2. render response ... } }}
    • 57. JSF 2- Greatest Hits (ever) - „New Features(remix)“„Templates & Components“ „Navigation reloaded“ „eXtreme Validation“ „Ajax & Friends“
    • 58. „Ajax & Friends“Ajax– Das soll neu sein?– Jein! – Alt: Ajax via poprietärere Ansätze mit JSF verwenden – Neu: Ajax via Standard mit JSF verwenden
    • 59. „Ajax & Friends“Ajax– Idee: beliebige Komponenten um genormte AJAX Funktionalität erweitern– Mittel: eigene Ajax JavaScript API inkl. zugehörigem Tag
    • 60. „Ajax & Friends“<f:ajax> in Action <h:commandButton value=“Update“> <f:ajax execute=“@form“ render=“updateMe“ /> </h:commandButton> <h:outputText value=#“{updatebleValue}“ id=“updateMe“ />
    • 61. „Ajax & Friends“<f:ajax> in Action Script Injection <h:commandButton value=“Update“> <f:ajax execute=“@form“ render=“updateMe“ /> </h:commandButton> <h:outputText value=#“{updatebleValue}“ id=“updateMe“ />
    • 62. „Ajax & Friends“Ajax Vorteile– Trick 1: Partial Tree Processing– Trick 2: Partial Page Update– BTW: auch als umliegendes Tag für eine Gruppe von Komponenten nutzbar
    • 63. „Ajax & Friends“Ajax Vorteile
    • 64. „Ajax & Friends“Behavior– Idee: Komponente um clientseitige Funktionalität erweitern, die vom Autor ursprünglich nicht vorgesehen war– Mittel: eigene Behavior API zur Erweiterung beliebiger Komponenten
    • 65. „Ajax & Friends“– WTH? Kenne ich nicht!– <f:ajax>, ach so. <h:commandButton value=“Update“> <f:ajax render=“updateMe“ /> </h:commandButton> <h:outputTextField value=#“{updatebleValue}“ id=“updateMe“ />
    • 66. „Ajax & Friends“Behavior Anwendungsgebiete– Client-side Validierung– Client-side Logging– DOM & Style Manipulation– Animationen & visuelle Effekte– Alerts & Confirmation Dialoge– Lazy Data Fetching– Integration mit 3rd Party Libraries– ...
    • 67. „Ajax & Friends“Behavior Main Player– ClientBehavior a.k.a. Script-Generator – Zuständig für Generierung von „passendem“ Script– ClientBehaviorHolder a.k.a. Vermittler – zuständig für das Wiring zwischen Komponente, Event und ClientBehavior
    • 68. „Ajax & Friends“Behavior Main Player– ClientBehavior a.k.a. Script-Generator // chain of behavoirs <h:commandButton für Generierung von – Zuständig value=“Update“> „passendem“ Script // 1. ask user for permission <mystuff:confirm event=“click“ />– ClientBehaviorHolder a.k.a. Vermittler // 2. if YES send AJAX call <f:ajax event=“click“ render=“updateMe“ /> – zuständig für das Wiring zwischen </h:commandButton> Komponente, Event und ClientBehavior
    • 69. „Ajax & Friends“MyBehavior in 3 Schritten– Behavior Implementieren– Behavior registrieren– Facelet Tag-Library definieren
    • 70. „Ajax & Friends“MyBehavior: Behavior implementierenpackage de.enterprisetales.example.behavior;public class ConfirmBehavior extends ClientBehaviorBase { @Override public String getScript( ClientBehaviorContext behaviorContext) { return “return confirm(‘Are your sure?‘)“; }
    • 71. „Ajax & Friends“MyBehavior: Behavior registrieren <faces-config> ... <behavior> <behavior-id> xyz.behavior.Confirm </behavior-id> <behavior-class> de.enterprisetales.behavior.ConfirmBehavior </behavior-class> </behavior> ... </faces-config>
    • 72. „Ajax & Friends“MyBehavior: Behavior registrieren <faces-config> ... <behavior> <behavior-id> xyz.behavior.Confirm </behavior-id> <behavior-class> de.enterprisetales.behavior.ConfirmBehavior </behavior-class> </behavior> ... </faces-config> WTH: ich hasse XML!
    • 73. „Ajax & Friends“MyBehavior: Behavior registrierenpackage de.enterprisetales.example.behavior;@FacesBehavior(xyz.behavior.Confirm)public class ConfirmBehavior extends ClientBehaviorBase { @Override public String getScript( ClientBehaviorContext behaviorContext) { return “return confirm(‘Are your sure?‘)“; }} Dann nimm doch @annotations!
    • 74. „Ajax & Friends“MyBehavior: Facelet Tag-Library definieren<?xml version=1.0 encoding=UTF-8?><facelet-taglib xmlns="..." version="2.0"> <namespace>http://xyz.de/mystuff</namespace> <tag> <tag-name>confirm</tag-name> <behavior> <behavior-id> xyz.behavior.Confirm </behavior-id> </behavior> </tag></facelet-taglib> in WEB-INF oder META-INF
    • 75. JSF 2- Greatest Hits (ever) - „New Features(remix)“„Templates & Components“ „Navigation reloaded“ „eXtreme Validation“ „Behavior“
    • 76. JSF 2- Greatest Hits (ever) - „New Features(remix)“ t“„Templates & Components“ s ue G al „Navigation reloaded“ ci pe „S „eXtreme Validation“ „Behavior“
    • 77. „JSF & CDI“ Cool, neues JSF 2 Feature!@javax.faces.bean.ManagedBean@javax.faces.bean.RequestScopedpublic class MyJsfBean { @ManagedProperty(value=“#{theService}“) private Service myService;}
    • 78. „JSF & CDI“ Cool, neues JSF 2 Feature!@javax.faces.bean.ManagedBean@javax.faces.bean.RequestScopedpublic class MyJsfBean { @ManagedProperty(value=“#{theService}“) private Service myService;} YEAH soooo cool, NOT!
    • 79. „JSF & CDI“Wo liegt das Problem?– es sind JSF Managed Beans– per Definition stark beschränkter Lebensraum (JSF Schicht)– eigener Injection Mechanismus– eigener LifeCycle– Referenzierung via Namen, d.h. keine Typensicherheit
    • 80. „JSF & CDI“Was ist die Lösung?– CDI Managed Beans– schichtenübergreifend verwendbar– genormter JSR 250 LifeCycle– typensicher
    • 81. „JSF & CDI“ Cool, neues „EE“ Feature!@javax.inject.Named@javax.enterprise.context.RequestScopedpublic class MyBean { @Inject private Service myService;}
    • 82. „JSF & CDI“ Cool, neues „EE“ Feature!@javax.inject.Named@javax.enterprise.context.RequestScopedpublic class MyBean { @Inject private Service myService;} Hmmm, that‘s all?
    • 83. „JSF & CDI“Ok, aber wo liegt der Vorteil?– CDI kann deutlich mehr– Conversations– User Defined Scopes– Producer Methods– Qualifier– Event Mechanismus– Interceptors
    • 84. „JSF & CDI“ Ok, aber wo liegt der Vorteil? – CDI kann deutlich mehr „Fachliche Injection“ – Conversations – User Definedstatt Scopes – Producer Methods„Infrastructure Injection“ – Qualifier – Event Mechanismus – Interceptors
    • 85. „JSF & CDI“// introducing „current“ annotation@Qualifier@Target({TYPE, METHOD, PARAMETER, FIELD})@Retention(RUNTIME)public @interface Current{} CDI Custom Qualifier
    • 86. „JSF & CDI“@SessionScopedpublic class UserController implements Serializable { ... @Produces @Current public User getCurrentUser() { return currentUser; }} CDI Producer Method
    • 87. „JSF & CDI“public class MyService implements Service { ... @Inject @Current private User loggedInUser; ...}
    • 88. „JSF & CDI“public class MyService implements Service { ... @Inject @Current private User loggedInUser; ...} YEAH, that‘s realy cool!
    • 89. „JSF & CDI“public class MyService implements Service { ... ABER, was ist mit JSF Views? @Inject @Current private User loggedInUser; ...} YEAH, that‘s realy cool!
    • 90. „JSF & CDI“@SessionScopedpublic class UserController implements Serializable { ... @Produces @Current @Named(“loggedInUser“) public User getCurrentUser() { return currentUser; }} Verwendung in JSF via EL
    • 91. Gibt es nochFragen?Dann los ...