I was working on a somewhat complex search interface for Salesforce.com using Flex. I needed to do some communication with Apex so I threw together a little demo to outline the basic functionality of a Flex app communicating with a Visualforce page via a Javascript callback.

You can run this example on my Developer Site.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute"  alpha="1.0"
  width="300" height="100"
  backgroundGradientAlphas="[0,0,0,0]" backgroundColor="#F3F3EC"
  creationComplete="init()">

  <mx:Script>
    <![CDATA[
    import flash.external.ExternalInterface;

        [Bindable]
        // the name of the javascript function in the Visualforce page to be called
        private var callbackFunction:String;
        // the dom id of the text field in the Visualforce page
        private var domId:String;

        private function init():void {
          callbackFunction = this.parameters.callbackFunction;
          domId = this.parameters.domId;
        }

        public function changeListener(evt:Event): void {
          ExternalInterface.call(this.callbackFunction,evt.currentTarget.text,this.domId);
        }
    ]]>
  </mx:Script>
  <mx:TextInput x="10" y="10" width="280" change="changeListener(event)"/>
  <mx:Text x="10" y="40" text="Type some text in this box to update the value &#xa;of the box below via Javascript callback.&#xa;&#xa;" width="280" height="50"/>

</mx:Application>

The Visualforce page that hosts the Flex app. There is a simple controller that just maintains the state of the "callbackText" property.


<apex:page controller="FlexCallbackController">
    <script language="JavaScript" type="text/javascript">
        function updateHiddenValue(value, eId){
            var e = document.getElementById(eId);
            e.value = value;
        }
    </script>
     <apex:sectionHeader title="Flex / Javascript Callback Example"/>
     <apex:form >
     <apex:pageBlock id="flexBlock">

          <apex:pageBlockSection title="Flex Section">
        <apex:flash src="{!$Resource.FlexCallback}"
          width="300" height="100"
          flashvars="callbackFunction=updateHiddenValue&domId={!$Component.callbackSection.myField}" />
          </apex:pageBlockSection>

          <apex:pageBlockSection title="Javascript Callback Section" id="callbackSection">
        <apex:inputText id="myField" value="{!callbackText}" />
          </apex:pageBlockSection>

     </apex:pageBlock>
     </apex:form>
</apex:page>