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
The open source SWFObject is used to
file, swfobject.js, can be found under
swfobject of the
Flex 4 SDK instal-
lation. Copy it into
demochart of our
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-
we can use tag
like any other JSF tags. It is transparent
that Flex is used in the implementation.
Listing 4 shows an example.
<!-- Change me to your Flex SDK installation location -->
<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
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
JAVA IN ACTION
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
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.
See all listings as text