JSF2 Composite Components - Ian Hlavats

Ian Hlavats | Tarantula Consulting Inc.

JSF2
Composite Components Workshop

Ian Hlavats
•  JSF Consultant
•  info@tarantulaconsulting.com
•  Author, JSF 1.2 Components (Packt)
•  JSFToolbox for Dreamweaver
(www.jsftoolbox.com)

JSF2 Composite Components
Workshop
•  Goals:
–  To review new features in JSF2
–  To understand composite components,
how they work, what problem they solve,
when to use them, etc.
–  To gain experience writing JSF2 composite
components with several examples

Overview: JSF2
•  What’s new in JSF2?
– Facelets integration (VDL)
– Composite components
– Resource libraries
– EL 2.2 (method params)
– Standardized Ajax
– @ManagedBean
– New scopes
– Much more

Overview: JSF2
•  Why focus on composite components?
–  Exciting new feature
–  Requires Facelets
–  Fully declarative UI components
–  Great potential for simplifying JSF
–  Unlock developer productivity

Composite Components
•  What problem do they solve?
–  Lightweight, rapid UI development
–  Traditional JSF component development is
cumbersome (component, renderer, TLD,
taglib.xml, faces-config.xml, web.xml)
•  Developers need a faster way to build/
reuse user interface elements

•  How do they work?
–  Define with new <composite> JSF tags
–  Uses naming convention (namespace prefix, URI)
–  No configuration needed
–  Facelets only (no JSP)
–  Can be packaged/deployed as a jar
–  Can use resources (images, stylesheets, scripts, etc.)
–  Special EL objects: #{cc}, #{resource}
•  Some terminology:
–  Using page: the file that uses the composite
component
–  Component definition: the file that declares the
composite component

•  Important naming convention:

<html
xmlns:foo=“http://java.sun.com/jsf/composite/foo”>
<body>
<foo:hello />
</body>
</html>

•  The component is defined in
/resources/foo/hello.xhtml
•  JSF 2 automatically detects and renders the
component

JSF 2.1 <composite> taglib
<composite:actionSource>
<composite:attribute>
<composite:clientBehavior />
<composite:editableValueHolder>
<composite:extension>
<composite:facet>
<composite:implementation>
<composite:insertChildren>
<composite:insertFacet>
<composite:interface>
<composite:renderFacet>
<composite:valueHolder>

•  Declares the usage contract of the
component

…
</composite:interface>

•  Defines the component implementation

<composite:interface />
<h:outputText value=“Hello World” />
</composite:implementation>
…
<foo:hello />

<composite:attribute>
•  Defines a tag attribute exposed to developer

<composite:attribute name=“message”
required=“true” default=“Howdy” />
<h:outputText value=“#{cc.attrs.message}” />
…
<foo:hello message=“Hello World” />

<composite:facet>
•  Defines a custom facet supported by this component

<composite:facet name=“header” />
<composite:renderFacet name=“header” />
…
<foo:facetExample>
<f:facet name=“header”>
<h:outputText value=“My Header” />
</f:facet>
</foo:facetExample>

<composite:renderFacet>
•  Renders the facet’s content

<div class=“content”>
<composite:renderFacet name=“content” />
</div>
…
<foo:myComponent>
<f:facet name=“content”>
<h:outputText value=“My Content” />
</f:facet>
</foo:myComponent>

<composite:insertFacet>
•  Inserts the facet into the component subtree

<h:dataTable …>
<composite:insertFacet name=“header” />
<composite:insertFacet name=“footer” />
</h:dataTable>
…
<foo:myComponent>
<f:facet name=“header”>
<h:outputText value=“My Header” />
</f:facet>
<f:facet name=“footer”>
<h:outputText value=“My Footer” />
</f:facet>
</foo:myComponent>

<composite:actionSource>
•  Defines ActionListener event published by the component

<composite:actionSource name=“helloButton”
targets=“helloButton” />
<h:commandButton id=“helloButton” value=“Say Hello” />
…
<foo:myComponent>
<f:actionListener for=“helloButton”
binding=“#{bean.sayHello(ActionEvent)}” />
</foo:myComponent>

<composite:valueHolder>
•  Exposes a component’s non-editable value to the page author
for registering a converter or validator

<composite:valueHolder name=“country” />

<h:outputText value=“#{countryBean.country}” />
…
<foo:country>
<f:converter for=“country” converterId=“test.CountryConverter” />
</foo:country>

<composite:editableValueHolder>
•  Enables registration of a ValueChangeListener, Converter or Validator
on one or more components within the composite component

<composite:editableValueHolder name=“country” targets=“country” />
<h:selectOneMenu id=“country” value=“#{country}”>
<f:selectItems value=“#{countryList}” />
</h:selectOneMenu>
…
<foo:countries>
<f:converter for=“country” converterId=“countryConverter” />
<f:validator for=“country” validatorId=“countryValidator” />
</foo:countries>

<composite:insertChildren>
•  Inserts the child UI components into the component
subtree

<span style=“font-weight:bold”>
<composite:insertChildren />
</span>
…
<foo:myComponent>
<h:outputText value=“Hello ” />
<h:outputText value=“World” />
</foo:myComponent>

<composite:clientBehavior>
•  Declares Ajax events that can be handled by the page author

<composite:clientBehavior name=“speak” event=“action”
targets=“speakButton” />
<h:commandButton value=“Speak” id=“speakButton” />
<h:commandButton value=“Don’t Speak” id=“noSpeakButton” />
…
<foo:speak>
<f:ajax event=”speak" onevent=”alert(‘Hello’)"/>
</foo:speak>

•  Enables design-time metadata to be
included in the component interface

<composite:attribute name=“message”>

</composite:extension>
</composite:attribute>

Composite Component
Implicit EL Object
•  #{cc}
–  Refers to the current composite component
•  #{cc.attrs}
–  Refers to attributes map of composite component,
e.g.
#{cc.attrs.message} is reference to <foo:hello
message=“Hello” />
•  #{cc.resourceBundleMap.key}
–  Refers to composite component’s resource bundle
–  Must be in same dir and have same name as
component definition file:
/resources/foo/hello.xhtml
/resources/foo/hello.properties

Lab Exercises
1.  Hello World Component
2.  Country List Component
3.  Customer Info Panel Component
4.  Customer Registration Wizard

Hello World Component
1.  Write a JSF2 composite component
that prints “Hello World”.
2.  Use this component from another
page.
3.  Deploy and test using JBoss 7.

Country List Component
that renders a list of countries for
selection.
page.
3.  Implement the TODO comments.

Customer Info Panel
Component
that receives input for a new customer.
2.  Include the country list component
from lab #2.
page.

Customer Registration Wizard
that uses the PrimeFaces Wizard
component.
2.  Reuse the customer info panel
component from lab 3.
3.  Implement a Feedback tab.

JSF2 Composite Components - Ian Hlavats

Recommended

More Related Content

What's hot (18)

Viewers also liked (16)

Similar to JSF2 Composite Components - Ian Hlavats (20)

Recently uploaded (20)

JSF2 Composite Components - Ian Hlavats