Flex Callback Example with Visualforce

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"

  import flash.external.ExternalInterface;

  // 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 {
 <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"/>


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;
 <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 title="Javascript Callback Section" id="callbackSection">
  <apex:inputText id="myField" value="{!callbackText}" />