Java Magazine - Premiere Issue 2011

LISTING 1 LISTING 2 LISTING 3 LISTING 4 LISTING 5 LISTING 6

resources/demochart of the Web content of our JSF application project Sample Web. We create a composite component to encapsulate the embedding.

Composite components are a new facility in JSF 2.0 that tremendously eases the development of custom components. You no longer need to worry much about encoding, decoding, tag library descriptors (TLDs), and renderers. You simply declare a Facelet composite component file and use it, similar to the acclaimed custom tag support in Grails. Listing 3 shows our custom component demo:chart.

The open source SWFObject is used to
embed the Flash content. The JavaScript
file, swfobject.js, can be found under
folder templates\
swfobject of the
Flex 4 SDK instal-
lation. Copy it into
folder resources\
demochart of our
Web content.

To mitigate name conflicts, our local variables are defined in an anonymous function and the div HTML element ID is prefixed with the composite component client ID.

Now that we’ve
created the cus-
tom component,
we can use tag
demo:chart just
like any other JSF tags. It is transparent
that Flex is used in the implementation.
Listing 4 shows an example.

<property name="FLEX_HOME" value="C:/Programs/Adobe/flex_sdk/4.1"/>

Passing Variables to Flex Applications

More often than not, embedded Flex applications rely on dynamic data. It turns out to be easy to pass variables into Flex applications with the help of flashVars.

This section extends our sample chart by passing the ice cream flavor survey result from a JSF managed bean, as shown in Listing 5. We use the JSF 2.0 annotation to designate a managed bean.

To feed the survey result from the managed bean to Flex, we first modify our JSF composite component chart .xhtml by adding an attribute named data to the interface section to accept the survey result and passing the survey result as flashVars into Flex (see Listing 6).

Now in the consuming JSF page, we just need to pass the ice cream flavor survey result to the demo:chart tag. We use the following JSF page source code snippet (index.xhtml):

JAVA IN ACTION

LiveCycle Data
Services would
be particularly
appealing if you
could devote both
the client and server
sides to a complete
Adobe solution, but
open sourcing of
BlazeDS and AMF
makes it possible
to work with other
technologies.

ABOUT US

<demo:chart
data="#{ iceCreamSurvey.result}"/>
On the Flex application side, we need
to modify function getChartData to fetch
the parameter. We use the Flex source
code snippet shown in Listing 7.