AdvancED Flex 4

CHAPTER 9

296

document.getElementById( 'JavaScriptCallingFlexExample' ).

addItem( 'Peas' );

}

</script>

Note that the element name in the JavaScript code needs to match the SWF / application name so it can

retrieve the object. We called the project: JavaScriptCallingFlexExample. When you run this in Flash

Builder 4, you should see something like Figure 9-8.

Figure 9-8. The JavaScript-driven Flex application

You might be asking yourself, why call out to JavaScript only to have it call back? Can’t the JavaScript call

in directly? It could, if the Flex application were loaded. But the loading sequence can vary from browser to

browser and between operating systems. We have found that the most predictable way to know that a

Flash application has been loaded is for it to call back into the JavaScript layer.

Flex for Widgets

Communicating between JavaScript and Flex is very common when building widgets. However, Flex 1 and

2 should have made building widgets easy, but only up until Flex 3, the file sizes of the Flash applications

built by Flex were too large to make for good widgets. Now that we have the ability to cache the framework

in the Flash Player using remote shared libraries (RSLs), the size of an individual Flash application can be

much smaller. Now, we can truly make widgets and integrate applications fully into the page.

Flex applications built without RSLs are too big to be widgets; 250 kilobytes is too much to download to put

an RSS reader on a page. But with RSLs, the application size can decrease to the 60-to-90 kilobyte range.

That’s very acceptable.

As a real life application example, you will create a widget that communicates between Flex and

JavaScript and uses RSL to improve performance. Create a new Flex Project and call it FlexWidget.

To get started with RSL, open up the Project dialog by selecting the project, right-clicking, and selecting

Properties from the context menu. Navigate to the Library Path section of the Flex Build Path tab. This

is shown in Figure 9-9.

TALKING WITH JAVASCRIPT AND HTML: WEB PAGE INTEGRATION

297

Figure 9-9. The library settings for the project

Next, expand the framework.swc library, select RSL URL, and click the Edit button. This will take you to

the dialog shown in Figure 9-10.

Figure 9-10. The selection of RSL for the framework

CHAPTER 9

298

From there, select Runtime Shared Library and click the Add button, which will take you to the dialog,

shown in Figure 9-11.

Figure 9-11. Specifying the location of the framework

This dialog allows you to specify the URL where the framework is located on your web site. That means

you have to copy this file from the Flash Builder 4 library to your web site in the location you specified.

To experiment with this, we are going to create a little Yahoo! Maps widget using their Flash library. You

can download that Flash library from Yahoo (http://developer.yahoo.com/flash/maps/) and install it

in your project’s lib directory. At the time of writing, you can download the swc directly from here:

http://developer.yahoo.com/flash/maps/getLatest.php.

From there, you can create a Flex application that references the library, as shown in the following

complete code:

<?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"

creationComplete="creationCompletehandler()">

<fx:Script>

<![CDATA[

import mx.events.ResizeEvent;

import com.yahoo.maps.api.YahooMap;

import com.yahoo.maps.api.YahooMapEvent;

import com.yahoo.maps.api.core.location.Address;

import com.yahoo.maps.webservices.geocoder.GeocoderResult;

import com.yahoo.maps.webservices.geocoder.events.GeocoderEvent;

TALKING WITH JAVASCRIPT AND HTML: WEB PAGE INTEGRATION

299

private var yahooMap:YahooMap;

private var location:String = "1 market, san francisco, ca";

private var address:Address = new Address(location);

private function creationCompletehandler():void

{

ExternalInterface.addCallback( "gotoAddress", function(add:String):void

{

address = new Address( add );

address.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, 

handleGeocodeSuccess);

address.geocode();

});

var appid:String = describeType(this)[e-mail]("::").join(".");

yahooMap = new YahooMap();

yahooMap.addEventListener(YahooMapEvent.MAP_INITIALIZE, handleMapInitialize);

yahooMap.init(appid, mapContainer.width, mapContainer.height);

mapContainer.addChild(yahooMap);

mapContainer.addEventListener(ResizeEvent.RESIZE, handleContainerResize);

yahooMap.addPanControl();

yahooMap.addZoomWidget();

yahooMap.addTypeWidget();

}

private function handleMapInitialize(event:YahooMapEvent):void

{

address.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, 

handleGeocodeSuccess);

address.geocode();

}

private function handleGeocodeSuccess(event:GeocoderEvent):void

{

var result:GeocoderResult = address.geocoderResultSet.firstResult;

yahooMap.zoomLevel = result.zoomLevel;

yahooMap.centerLatLon = result.latlon;

ExternalInterface.call( "mapComplete" );

}

private function handleContainerResize(event:ResizeEvent):void

{

yahooMap.setSize(mapContainer.width,mapContainer.height);

}

]]>

</fx:Script>

<mx:UIComponent id="mapContainer" width="100%" height="100%"/>

</s:Application>