Devoxx 09 (Belgium)

1. Enhancing The JavaServer Faces 2.0 Component Model Roger Kitain Staff Engineer/Sun Microosystens

2. We will explore the JSF 2.0 Component Model and learn how we can enhance components with JSF 2.0 features.

4. Composite Components

5. Enhancing JSF 2.0 Components

6. Demos

7. Component Model

9. Renderer

10. Tag class

11. Tld

12. faces-config.xml

13. ......

15. XHTML and tags

16. Eliminates translation/compilation

22. It's in the specification !

26. Composite Components Using Page (XHTML) <html … xlms:my=”http....”> <my:comp value=”yes” /> </html> Component (XHTML)

28. Library name is directory name

29. Tag name is file name

30. Composite Components <html xmlns=”http:///www/w3/org/1999/xhtml” xmlns:h=” http://java.sun.com/jsf/html ” xmlns:f=” http://java.sun.com/jsf/core ” xmlns: my =” http://java.sun.com/jsf/composite/comp ”> On disk: <context root>/resources/ comp / out .xhtml < my : out value=”yes”/>

33. Composite Components <html... xmlns:ui="http://java.sun.com/jsf/facelets" xmlns: cc ="http://java.sun.com/jsf/composite"> … <h:body> <cc:interface> <cc:attribute name=”userVal” required=”true” ”/> <cc:attribute name=”passValue” required=”true” /> </cc:interface> <cc:implementation> <div> Username: <h:inputText id=”userId”” value=” #{cc.attrs.userVal }”/> </div> <div>Password: <h:inputSecret id=”passId” value=” #{cc.attrs.passVal} ” /></div> <div> <h:commandButton value=”Login” id=”loginButton” /> </div> </cc:implementation> .... </h:body> ... <context-root>resources/ezcomp/LoginPanel.xhtml

34. Composite Components <html... xmlns:ui="http://java.sun.com/jsf/facelets" xmlns: cc ="http://java.sun.com/jsf/composite"> … <h:body> <cc:interface> <cc:attribute name=”userVal” required=”true” ”/> <cc:attribute name=”passValue” required=”true” /> <cc:actionSource name="loginAction” targets=”loginButton” /> </cc:interface> <cc:implementation> <div> Username: <h:inputText id=”userId”” value=” #{cc.attrs.userVal }”/> </div> <div>Password: <h:inputSecret id=”passId” value=” #{cc.attrs.passVal} ” /></div> <div> <h:commandButton value=”Login” id=” loginButton ” /> </div> </cc:implementation> .... </h:body> ... <context-root>resources/ezcomp/LoginPanel.xhtml

37. Rendered location may be different than the tag placement in the view

38. <cc:interface...> … </cc:interface> <cc:implementation> <h:outputScript name=”script.js” library=”edit/script.js” target=”head”/> <h:outputStyleSheet name=”edit/styles.css”/> … </cc:implementation>

39. Composite Components Nested Components <cc:interface...> <cc:attribute name=”location” required=”true”/> </cc:interface> <cc:implementation> <place:map title=”Map”/> </cc:implementation> <cc:interface> < cc:attribute name=”title” /> </cc:interface> <cc:implementation> <h:outputText value= ”#{cc.attrs.title}” /> <h:outputText value= ”#{cc.parent.attrs.location}” /> </cc:implementation>

40. Enhancing JSF 2.0 Components

44. Useful for making JSF Ajax calls from JavaScript

45. Control component processing on the server and component rendering at the client

47. Enhancing JSF 2.0 Components Ajax : Declarative Solution : Nested <f:ajax /> <h:commandButton ...> <h:commandButton...> <f:ajax event=”action” /> <f:ajax /> </h:commandButton> </h:commandButton> Do exactly the same thing since “action” is the default event for commandButton components. <h:commandButton...> <h:commandButton...> <f:ajax event=”valueChange”/> <f:ajax event=”mouseover”/> </h:commandButton> </h:commandbutton> Error: valueChange is not a supported event for commandButton components! JavaScript events supported too.

48. Enhancing JSF 2.0 Components Ajax : Declarative Solution : <f:ajax /> Regions <f:ajax> <h:panelGrid> <h:inputText id=”text1”/> <h:commandButton id=”button1” /> </h:panelGrid> </f:ajax> Ajax applied to “text1” and “button1”. Ajax not applied to panelGrid since there is no default event associated with it.

49. Enhancing JSF 2.0 Components Ajax : Declarative Solution : <f:ajax /> Combined <f:ajax event=”click”> <h:panelGrid id=”grid1”> <h:inputText id=”text1”/> <h:commandButton id=”button1”> <f:ajax event=”mouseover”/> </h:commandButton> </h:panelGrid> </f:ajax> Ajax applied to “grid1” and “text1” for “onlick” event. Ajax applied to “button1” for “mouseover” event as well.

53. Ajax is a behavior (AjaxBehavior)

56. Attached by “event”

60. Facelets is the foundation for JSF 2.0 components

61. Most everything done in XHTML (Facelets) markup

62. Enhance components using JSF 2.0 features such as Ajax and Behaviors

65. http://www.jsfcentral.com/

66. https://glassfish.dev.java.net/

Devoxx 09 (Belgium)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Devoxx 09 (Belgium)

Similaire à Devoxx 09 (Belgium) (20)

Devoxx 09 (Belgium)