Feb 03 2009
An easy way to connect JSF with Adobe FLEX
Using Adobe Flex together with other technologys like JavaServer Faces, Struts or Spring Web Flow is not an easy task, because the embedded Flash-file interacts in its own world and from the sight of its surrounding JSF/JSP/HTML-Code, it is an foreign object. There exists some approaches to connect these different worlds like the jsf-flex project or the Exadel Fiji.
I am now showing you an another way, how you can connect Flex with JavaServer Faces. You are able to develop each Project (Flex and Java) separately.
Let’s take a look at this picture (click on the picture to enlarge it):
This is what we have. JSF-Code with an embedded Flex-Object. You can insert the firstname and the lastname with JSF-inputText -Fields, and the fields city and country with Flex. If you click submit, alle four values are saved inside the managed-bean.
Ok how is this possible? The solution is JavaScript! In some few words – if you enter some values for the city and country inside the Flash-Object, the ActionScript code is writing these values into JavaScript-Variables (which are declared in the JSF Code). If you hit submit, a JavaScript-Function is writing the values into the hidden tomahawk-inputFields which are bonded to the corresponding managed-bean (Page1Bean).
In ActionScript, you have to extend the class Proxy and overwrite flash_proxy function setProperty(..). You can see this here:
JSVariableProxy.as
package eu.jdevelop.blog.jsfandflex { import flash.external.ExternalInterface; import flash.utils.Proxy; import flash.utils.flash_proxy; public dynamic class JavascriptVariableProxy extends Proxy { /** * The method that's invoked when a property is set on this object. Passes the variable through * to the javascript environment. * * @private */ override flash_proxy function setProperty(name:*, value:*):void { ExternalInterface.call("function() { " + name + " = '" + value.toString() + "'; }"); } } }
You can call the function like this:
JSFandFlex.mxml
<?xml version="1.0" encoding="utf-8"?> <!-- JSF and FLEX @author Siegfried Bolz --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" color="#FFFFFF" layout="absolute" borderColor="#FDFEFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#205CF6, #01013D]" width="400" height="242"> <mx:Script> <![CDATA[ import eu.jdevelop.blog.jsfandflex.JavascriptVariableProxy; /** * Write content from TextField into JavaScript-Variable which can be * accessed by JSF. */ private function writeJavascriptVariable(jVariable:String, text:String):void { var proxy : JavascriptVariableProxy = new JavascriptVariableProxy(); proxy[jVariable] = text; } ]]> </mx:Script> <mx:Label x="149" y="24" text="JSF and Flex" fontSize="14" fontWeight="bold"/> <mx:Label x="31" y="79" text="Insert some data" fontWeight="bold" fontSize="11"/> <mx:Label x="31" y="109" text="City" fontWeight="bold"/> <mx:TextInput x="31" y="125" id="txtCity" change="writeJavascriptVariable('city',txtCity.text)" color="#000000"/> <mx:Label x="31" y="167" text="Country" fontWeight="bold"/> <mx:TextInput x="31" y="184" id="txtCountry" change="writeJavascriptVariable('country',txtCountry.text)" color="#000000"/> </mx:Application>
In Java, insert the whole Flex Code into the JSF file, add some JavaScript-Variables (city and country) and map them to the ActionScript-Code. Don’t forget to write the content of these Variables into the hidden inputFields when the submit is executed.
As you can see, it is possible to create JSF-Projects which are using the advantages of the Flex Technology. Try it and design astounding Web-GUIs with Adobe Flex and use the power of JSF (or something else) in the backend.
One response so far
Although, not a bad idea it is more elegant to use Spring as glue.
Flex to Spring:
http://blog.rainer.eschen.name/2008/07/02/flex-supports-spring-are-you-ready-to-skip-web-20/
JSF to Spring:
http://blog.rainer.eschen.name/2007/08/21/jsf-on-spring-beans/
DI inside ActionScript:
http://blog.rainer.eschen.name/2009/04/27/spring-actionscript-dependency-injection-and-more-for-flexair/