Talking with JavaScript and HTML: Web Page Integration in Java

Creation PDF 417 in Java Talking with JavaScript and HTML: Web Page Integration

9

There are many cases where you need integration of your Flex applications with JavaScript. For instance, you want to leverage existing JavaScript code in conjunction with your Flex application or you want a better Search Engine Optimization (SEO) by creating part of the page in HTML/JavaScript while integrating a Flex Widget or component. This chapter will cover JavaScript integration both in the sense of JavaScript getting called by your Flex application and having the JavaScript on the page call the Flex application code. We will also cover a real life example of a widget using JavaScript integration and leveraging Runtime Shared Libraries (RSL) technology in Flash 9/10 and Flex to build Flash applications small enough to be widgets.

Since a lot of the work you will be doing in this chapter involves JavaScript, you are going to be messing around with the HTML of the page. Flash Builder 4 maintains an HTML template for your application in the html-template directory. This file is shown in Figure 9-1.

Figure 9-1. The HTML page template We recommend installing an Eclipse plug-in for JavaScript called JSEclipse. From the top menu select: Help Software updates Find and install New Remote Site Name: JSEclipse URL: http://download.macromedia.com/pub/labs/jseclipse/autoinstall/ See Figure 9-2.

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 binrelease. That file is written over each time the application is compiled, so all of your changes will be lost.

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

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:

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

<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: