JBoss Development is brought to you in partnership with:

Max Katz heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces” (Apress 2008, 2011), and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: mkblog.exadel.com and Twitter: @maxkatz. Max is a DZone MVB and is not an employee of DZone and has posted 79 posts at DZone. You can read more from them at their website. View Full User Profile

Using JSF and Flex Components Together

09.16.2008
| 101709 views |
  • submit to reddit

Using <fiji:endpoint>

As a final example, I'm going to show you how to use <fiji:swf> together with <fiji:endPoint>. This will allow us to send a parameter from a Flash component to a JSF managed bean.

Let's start with the Flash part. This is the Flex application we want to use in our JSF page:

hello.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.rpc.http.HTTPService;

private var userRequest:HTTPService;

private function send():void {
userRequest = new HTTPService();
userRequest.url = Application.application.parameters.fiji;
userRequest.addEventListener("result", httpResult);
var param:Object = {};
param["hello"] = username.text;
userRequest.send(param);
}
public function httpResult(event:ResultEvent):void {
if (event.result) {
helloLabel.text = event.result.value;
}
}
]]>
</mx:Script>

<mx:Form x="22" y="10" width="280">
<mx:Label id="helloLabel" styleName="text"
text="{Application.application.parameters.text}" />
<mx:HBox>
<mx:Label id="helloPerson" text="Username"/>
<mx:TextInput id="username"/>
</mx:HBox>
<mx:Button label="Submit" click="send()"/>
</mx:Form>
</mx:Application>

It's a pretty simple MXML file which you can compile either in Flex Builder or just from the command line after installing Flex SDK

>mxmlc hello.mxml

I have also provided the SWF file inside the template (and here hello.swf <link>) in case you want to skip the compilation step.

The MXML file will produce the following:

[img_assist|nid=5017|title=|desc=|link=none|align=undefined|width=267|height=110]

Now, let's look at the JSF page:

<h:form>

<fiji:swf src="/hello.swf"

bgcolor="#FFFFFF" width="350" height="200">

<f:param name="text" value="Hello Fiji World"/>

<fiji:endpoint name="fiji"

decoder="fiji.HelloDecoder"

encoder="fiji.HelloEncoder"

service="#{serviceBean.greeting}"/>

</h:form>

<fiji:swf> is used to include the Flash component as we did before. The service attribute points to a JSF managed bean with a method called greeting:

public Object greeting(Object value){
if(value != null){
return "What's up, "+value+"?";
} else {
return "What's up, unknown?";
}
}


It also has to be registered in a JSF configuration file:

<managed-bean>
<managed-bean-name>serviceBean</managed-bean-name>
<managed-bean-class>fiji.ServiceBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>

I will cover HelloDecoder and HelloEncoder later.

When running this page, we will get something very similar to the previous image; however, now it's inside a JSF page and, if we enter a value for Username and click Submit, we will get the following.

[img_assist|nid=5018|title=|desc=|link=none|align=undefined|width=271|height=118]

The question is, how are we able to send a request to the JSF managed bean from the Flash component? It's done via the <fiji:endpoint> component:

<fiji:endpoint name="fiji"

decoder="com.exadel.fiji.demo.simple.HelloDecoder"

encoder="com.exadel.fiji.demo.simple.HelloEncoder"

service="#{serviceBean.greeting}"/>

We define an endpoint with the name of fiji. If you look back at the MXML file, we have the following:

private function send():void {
userRequest = new HTTPService();
userRequest.url = Application.application.parameters.fiji;
userRequest.addEventListener("result", httpResult);
var param:Object = {};
param["hello"] = username.text;
userRequest.send(param);
}

Inside the Flex component, the HTTP URL points to Application.application.parameters.fiji which in turn points to the Fiji endpoint defined in the JSF page by <fiji:endpoint> tag. When the Submit button inside the Flash is clicked, the URL is resolved. This is a standard JSF request and that's how we invoke the serviceBean.greeting method inside a JSF managed bean. The URL is again passed via the flashVars attribute when the page is rendered.

Finally, the initial label value is set via

{Application.application.parameters.text}

Its value is set via this <f:param> tag:

<f:param name="text" value="Hello Fiji World"/>

Published at DZone with permission of Max Katz, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Agata Przybyszewska replied on Mon, 2009/02/02 - 8:19pm

I have tried to follow the tutorial, and make Fiji work with Seam and Flex.

I have tried several approaches:
1) Followed the tutorial  here:
 Result - server crash from the helloworld on page 3 :-(

2) I tried to follow the tutorials advice that fiji is just a rich faces project - just copied the 2 files fiji-api.jar and fiji-ui.jar into the lib
folder of my HelloWorld Seam project, and added the following facelet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
          xmlns:a4j="http://richfaces.org/a4j"
      xmlns:fiji="http://exadel.com/fiji">

        <rich:panel>
                <f:facet name="header">
                        Fiji
                </f:facet>
                Ready for Fiji...

                <fiji:swf src="hello.swf" width="400" height="400"
bgcolor="#EFEFEF"
                        application="HelloWorld"/>
        </rich:panel>
  </ui:composition>

The hello.swf file liest in the same folder as the facelet file.
This didn't crash the server. But the result is not what I wanted - no
Flash component.

 Any ideas what I do wrong?

Best,

Agata

Joe Greene replied on Tue, 2009/03/03 - 12:47pm

Max -

You give little guidance on how to update an amChart wrapped inside a fiji:swf component.  Looking at the amCharts docs, it looks like the data wants to be either csv or xml format.  If I want to use an am line chart wrapped in the fiji:swf component, I need to know how to bind the chart data to a bean instead of xml or csv data.  Can this be done?  If not, I think this is important and should be stated.

Max Katz replied on Mon, 2009/03/09 - 12:39pm in response to: Joe Greene

For anyone else looking for an answer, Joe posted it here

Santhosh Kumar replied on Wed, 2010/01/06 - 11:23am

your article on fiji chart was great..

I am using fiji line chart.. i need  a help on line chart..

i need to highlight the  y axis based on input given,,,,

for exampl if y-axis value is 45... i want to show highlihted y-axis region 40-50...

 

 

thanks in advance... 

Dani Holiday replied on Thu, 2010/02/18 - 4:30am

Hi! I saw that in RichFaces i have to read the data from the xml/csv. I bring the data from the database. if so, how can i integrate RichFaces + AMCharts + reading the data from the database and sending it to the bean? thanks!

Devika Nara replied on Fri, 2010/02/19 - 12:07am

is it possible to add the flex components dynamically to JSF page???

Design Geeks replied on Sat, 2010/02/27 - 12:51am

hi,

good example.

I have tried it with Netbeans 6.8 & glassfish 2.0 wirh jsf-richfaces

//jsp code

<%@taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="fiji" uri="http://exadel.com/fiji"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<f:view locale="#{skinBean.currentlang}">
    <html>
        <h:form>

            <fiji:stackedColumnChart   id="stackedColumnChart" value="#{oneSeriesBar.data}"
                                     title="Simple Stacked Column Chart" subtitle="Display Resolution Statistics"
                                     captionX="Years" captionY="Percent" legendCaption="Resolution"
                                     barColors="#{oneSeriesBar.colors}" width="400" height="400"
                                     rulersValuesHighlight="none">
                <fiji:chartData type="name" value="#{oneSeriesBar.names}" />
            </fiji:stackedColumnChart>
        </h:form>
    </body>
</html>
</f:view>

at runtime it gives xml error like Retrieved XML is invalid

 stacktrace

<ROOT XMLNS:FIJI='HTTP://WWW.EXADEL.COM/FIJI'>#b0343c<FIJI:BARCOLORS>#dd9f2c</FIJI:BARCOLORS><FIJI:BARCOLORS>#5db2c2</FIJI:BARCOLORS><FIJI:CAPTIONX>Years</FIJI:CAPTIONX><FIJI:CAPTIONY>Percent</FIJI:CAPTIONY><FIJI:LEGENDCAPTION>Resolution</FIJI:LEGENDCAPTION><FIJI:RULERSVALUESHIGHLIGHT>none</FIJI:RULERSVALUESHIGHLIGHT><FIJI:SUBTITLE>Display Resolution Statistics</FIJI:SUBTITLE><FIJI:TITLE>Simple Stacked Column Chart</FIJI:TITLE><FIJI:CHARTDATA><FIJI:SERIES><FIJI:DATA><FIJI:X>2006<FIJI:Y>17<FIJI:DATA><FIJI:X>2007<FIJI:Y>26<FIJI:DATA><FIJI:X>2008<FIJI:Y>38<FIJI:NAME>Higher<FIJI:SERIES><FIJI:DATA><FIJI:X>2006<FIJI:Y>57<FIJI:DATA><FIJI:X>2007<FIJI:Y>54<FIJI:DATA><FIJI:X>2008<FIJI:Y>48<FIJI:NAME>1024x768<FIJI:SERIES><FIJI:DATA><FIJI:X>2006<FIJI:Y>20<FIJI:DATA><FIJI:X>2007<FIJI:Y>14<FIJI:DATA><FIJI:X>2008<FIJI:Y>8<FIJI:NAME>800x600</ROOT>

any idea?

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.