AdvancED Flex 4

TALKING WITH JAVASCRIPT AND HTML: WEB PAGE INTEGRATION

289

After the plug-in is installed, it will take ownership over different file types such as the HTML and JS

extensions. Click to open the index.html file. Don’t edit the index.html file in bin-debug or bin-

release. That file is written over each time the application is compiled, so all of your changes will be lost.

Flex Calling JavaScript

The first type of connection between Flex and JavaScript to explore is a Flex application calling out to a

JavaScript function. This is handy when you want to integrate some interactive component within the Flex

application with another element on the web page. For example, if you use a Flex component to do

navigation and you want the JavaScript on the page to use Ajax to dynamically load a section of content,

you will want that Flex component to tell you whenever customers have chosen to view some content.

The first example is a fairly arbitrary one. There is a List control with a set of values, so when the

customer double-clicks a value, the JavaScript function itemSelected is called. This code is shown in the

following:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="1024" minHeight="768">

<fx:Script>

<![CDATA[

private function onDoubleClick(event:Event):void

{

ExternalInterface.call("itemSelected", list.selectedItem );

}

]]>

</fx:Script>

<s:List id="list" width="300"

doubleClick="onDoubleClick(event);"

doubleClickEnabled="true">

<s:dataProvider>

<s:ArrayCollection>

<fx:String>Apples</fx:String>

<fx:String>Oranges</fx:String>

<fx:String>Bananas</fx:String>

</s:ArrayCollection>

</s:dataProvider>

</s:List>

</s:Application>

The magic is performed by the Flash Player API’s ExternalInterface class, which does the work of

connecting to JavaScript and registering methods that can be called by JavaScript. In this case, you use

CHAPTER 9

290

the call method on the ExternalInterface class to call a JavaScript method with the currently selected

item’s text.

The JavaScript code that responds to this is as follows:

<script>

function itemSelected( itemName )

{

alert( itemName );

}

</script>

If you were to stop and run the example at this point, you would get a security violation from the player

reading SecurityError: Error #2060: Security sandbox violation (see Figure 9-3).

Figure 9-3. Console producing a security sandbox violation error

To get JavaScript and Flash to talk together, you have to change every location in the

index.template.html file that references allowScriptAccess to always. The following code is an

example portion:

<param name="movie" value="${swf}.swf" />

<param name="quality" value="high" />

<param name="bgcolor" value="${bgcolor}" />

<param name="allowScriptAccess" value="always" />

<param name="allowFullScreen" value="true" />

<!--[if !IE]>

<object type="application/x-shockwave-flash" data="${swf}.swf"

width="${width}" height="${height}">

<param name="quality" value="high" />

TALKING WITH JAVASCRIPT AND HTML: WEB PAGE INTEGRATION

291

<param name="bgcolor" value="${bgcolor}" />

<param name="allowScriptAccess" value="always" />

<param name="allowFullScreen" value="true" />

This means that you are allowing the Flash Player to connect with the JavaScript layer, and vice versa.

Now when you run this from Flash Builder 4, you should see something like Figure 9-4.

Figure 9-4. The Flex application on the page

Once you double-click an item you will see Figure 9-5.

Figure 9-5. The JavaScript callback with the alert

Excellent. Your Flex applications can now talk to the JavaScript layer. But what if you want the JavaScript

layer to be able to specify the name of the function to call? Well, in that case, I can specify a parameter to

the SWF for the application. That Flex code is shown here:

<?xml version="1.0" encoding="utf-8"?>

CHAPTER 9

292

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="1024" minHeight="768"

creationComplete="creationCompleteHandler()">

<fx:Script>

<![CDATA[

private var callbackName:String="";

protected function creationCompleteHandler():void

{

callbackName = ( parameters["callback"] != null ) ? 

parameters["callback"] : "itemSelected";

}

private function onDoubleClick(event:Event):void

{

ExternalInterface.call(callbackName, list.selectedItem);

}

]]>

</fx:Script>

<s:List id="list" width="300"

doubleClick="onDoubleClick(event);"

doubleClickEnabled="true">

<s:dataProvider>

<s:ArrayCollection>

<fx:String>Apples</fx:String>

<fx:String>Oranges</fx:String>

<fx:String>Bananas</fx:String>

</s:ArrayCollection>

</s:dataProvider>

</s:List>

</s:Application>

Now if you pass a different value for callback, the new value will be used as the name of the JavaScript

function to get the callback message.

You also need to change the index.template.html pageto create the Flash with the parameter. This

change is shown in Figure 9-6.

flashvars.callback = myCallback;