Another Random Developer Blog

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.

Technorati Tags: actionscript, adobe flex, connect, javascript, javaserver faces, jsf, NetBeans

Tags: actionscript, adobe flex, connect, javascript, javaserver faces, jsf, NetBeans