FacesTales - live on Stage

  • 825 views
Uploaded 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!

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
825
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
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 ...