Flex Callback Example with Visualforce

December 9th, 2008

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<?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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<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>

Categories: Code Sample, Flex, Salesforce, Visualforce

Leave a comment

Comments Feed6 Comments

  1. Embed a Flex Slider in a Visualforce Page | Jeff Douglas - Technology, Coding and Bears... OH MY!

    [...] did a simple Flex callback with JavaScript about a year ago and I always wanted to follow up with this topic. Somehow I never quite found the [...]

  2. mohd

    Hi Jeff,
    Have you done any integration of salesforce with Blackberry,Iphone,Samsung or any other mobile.

    It would be great f you fwd any link or steps that will help me in integration as i have no integration experience.

    Please reply soon:-)

  3. Jeff Douglas

    @mohd, no.. sorry I have not.

  4. Laxman

    Hi Jeff,
    Have you done any integration of salesforce with uProduce(XMPie VDP).
    It would be helpful to me if you send any information on this.

  5. Jeff Douglas

    @Laxman, sorry… never even hear of uProductive before.

  6. Laxman

    thanks a lot

Leave a comment

Feed

http://blog.jeffdouglas.com / Flex Callback Example with Visualforce

WordPress Appliance - Powered by TurnKey Linux