Flex3.0 new features 2 ---- Flex-Ajax Bridge

2009-07-13  来源:本站原创  分类:AJAX  人气:1218 

23.5 the use of Flex-Ajax Bridge Technology Control Flex application
The previous section describes how Flex technology called Ajax. In contrast, the use of Ajax technology can also control the Flex application. JavaScript procedure Flex-Ajax Bridge Technology Flex applications can be controlled and the appearance of components. This section will introduce Flex-Ajax Bridge technology based on knowledge and use.

23.5.1 Flex-Ajax Bridge Technology
Flex-Ajax Bridge is Adobe technology provides a service technology. This technology Flex technology and Ajax technologies to build a special link. Flex-Ajax Bridge through technology to control the effects of Flex applications. For example, click the button page, Flex application, add a button component.

Flex-Ajax Bridge techniques include a "FABridge.as" documents and "FABridge.js" document. "FABridge.as" document defines the Flex client and methods of the various attributes. "FABridge.js" file defines the client-side JavaScript various properties and methods. Of the "FABridge.as" documents and "FABridge.js" documents related to the contents of the chapter will be introduced in the follow-up.

Flex-Ajax Bridge technology are included in the source file Flex Builder 3.0 or LiveCycle Data Service 2.5, under the installation path. Specific location for the "Flex Builder 3.0 installation path \ sdks \ moxie \ frameworks \ javascript \ fabridge" or "LiveCycle Data Service 2.5 installation path \ resources \ FABridge".

Flex-Ajax Bridge technology allows Flex technology and Ajax technology easier and faster interaction. Flex-Ajax Bridge technology is characterized by the largest Flex application can control the appearance of the component, Flex applications to call methods and functions.

23.5.2 Flex-Ajax Bridge technology operating principle
Flex-Ajax Bridge technology only contains two source files: "FABridge.as" documents and "FABridge.js" document. By defining the two different client (Flex client and client-side JavaScript) properties and methods corresponding to achieve different between client calls.

"FABridge.as" type of succession EventDispatcher class, at the same time IMXMLObject interface. Its main function is to store the attributes of various Flex components and methods for a variety of methods to add the name of the corresponding call. "FABridge.as" category of the most important method to achieve the method of initializeCallbacks.

Following is the definition of code initializeCallbacks methods.

public function initializeCallbacks (): void

(

if (ExternalInterface.available == false)

(

return;

)

/ / Add call to method name js_getRoot

ExternalInterface.addCallback ( "getRoot", js_getRoot);

/ / Add call to method name js_getPropFromAS

ExternalInterface.addCallback ( "getPropFromAS", js_getPropFromAS);

/ / Add call to method name js_setPropertyInAS

ExternalInterface.addCallback ( "setPropInAS", js_setPropertyInAS);

/ / Add call to method name js_invokeMethod

ExternalInterface.addCallback ( "invokeASMethod", js_invokeMethod);

/ / Add call to method name js_invokeFunction

ExternalInterface.addCallback ( "invokeASFunction", js_invokeFunction);

/ / Add call to method name js_releaseASObjects

ExternalInterface.addCallback ( "releaseASObjects", js_releaseASObjects);

/ / Add call to method name js_create

ExternalInterface.addCallback ( "create", js_create);

/ / Add call to method name js_releaseNamedASObject

ExternalInterface.addCallback ( "releaseNamedASObject", js_releaseNamedASObject);

/ / Add call to method name incRef

ExternalInterface.addCallback ( "incRef", incRef);

/ / Add call to method name releaseRef

ExternalInterface.addCallback ( "releaseRef", releaseRef);

)

(57) ExternalInterface class addCallback method call to add the name of the designated function. The definition can be called after the name of the JavaScript call. For example, the use of JavaScript language "getRoot ();" statement to call Flex methods js_getRoot process.

(58) addCallback method only calls the name of the definition, rather than the definition of parameters. So call the function, parameter number and order of procedures must be consistent with the method of Flex is identical to the definition. For example, the use of JavaScript language "setPropInAS (21, 'text', 'aaaaaa');" statement to call Flex methods js_setPropertyInAS process.

"FABridge.js" file defines the client-side JavaScript various properties and methods. Its main function is to store client-side JavaScript, and data attributes and provide more direct access of the Flex-Ajax Bridge interface methods.

The use of Flex-Ajax Bridge and Ajax technology to connect Flex procedure are as follows.

Add in the MXML document FABridge components.

When you add components FABridge before FABridge source files need to be ( "bridge" folder) to copy the path to the next project.

Add in the MXML document FABridge syntax components are as follows.

<fab:FABridge xmlns:fab="bridge.*" />

MXML file to compile.

Press Ctrl + F11 shortcut, MXML compiler program to run.

New HTML page.

Add a new page on the Flex application (SWF file) of the reference.

Flex Builder 3 at compile MXML files will automatically generate SWF file and nested in the HTML page of the same name. Users can be nested one SWF file to copy the code to the new page, but bearing in mind that SWF file.

SWF files nested page syntax as shown below.

<object'SWF process id '

classid = 'clsid: D27CDB6E-AE6D-11cf-96B8-444553540000'codebase =' http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab # version = 8,5,0,0 ' height = 'high value' width = 'width'>

<param name='src' value='SWF Program path '/>

<embed name = 'SWF process id' pluginspage = 'http://www.macromedia.com/go/ getflashplayer'

src = 'SWF program path' height = 'high value' width = 'width' />

</ object>

Id can be any SWF procedures. src parameter to specify the path of SWF procedures.

The following code has nested "main.swf" applications.

<object

classid = 'clsid: D27CDB6E-AE6D-11cf-96B8-444553540000' codebase = 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab # version = 8,5,0,0' height ='400 'width ='400'>

<param name='src' value='main.swf'/>

<embed name = 'faa' pluginspage = 'http://www.macromedia.com/go/ getflashplayer'

src = 'main.swf' height ='400 'width ='400' />

</ object>

Add object tags in the flashvars variable.

flashvars variable to store examples of Flex-Ajax Bridge its name suggests, is to connect Flex key Office applications. The syntax is as follows.

<object … >

...

<param name='flashvars' value='bridgeName=Flex-Ajax Bridge The name of the instance '/>

<embed … flashvars ='bridgeName= Flex-Ajax Bridge The name of the instance '/>

</ object>

Flex-Ajax Bridge instance the names can be arbitrary.

The following code has nested "main.swf" application, and add the flashvars variable.

<object

classid = 'clsid: D27CDB6E-AE6D-11cf-96B8-444553540000' codebase = 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab # version = 8,5,0,0' height ='400 'width ='400'>

<param name='flashvars' value='bridgeName=example'/>

<param name='src' value='main.swf'/>

<embed name = 'faa' pluginspage = 'http://www.macromedia.com/go/ getflashplayer'

src = 'main.swf' height ='400 'width ='400' flashvars = 'bridgeName = example' />

</ object>

Website quoted in the "FABridge.js" document.

Tags in use <head> quoted <script> label "FABridge.js" document.

Quote the following code "FABridge.js" document.

<head>

<script src="bridge\FABridge.js"> </ script>

</ head>

JavaScript call in the Flex application.

The completion of the six steps, you can call in the JavaScript in the Flex application. The syntax is as follows.

FABridge.flashvars variable value. Root ();

(59) flashvars variables stored examples of Flex-Ajax Bridge name.

(60) root is "FABridge.js" methods defined in the document, point to "FABridge.as" method js_getRoot documents.

The following JavaScript code to call the Flex application.

FABridge.example.root ();

23.5.3 method used to obtain components getCompenentID
Flex-Ajax Bridge technology getCompenentID methods used to obtain components. getCompenentID methods were not identified, and that "get" string connect string component id. For example, Flex applications called the definition of "myPanel" components, then the method of access to the component called "getMyPanel". Note that the string component id the first letter capitalized.

The following code uses the method to get getCompenentID components of "myButton".

/ / MXML file

...

<mx:Button label="test"/>

/ / HTML document

...

<head>

<script src="bridge\FABridge.js"> </ script>

<script>

function tt ()

(

var flexApp = FABridge.example.root (); / / point to Flex applications

var btn = flexApp.getMyButton (); / / obtain the components of "myButton"

)

</ script>

</ head>

<body>

<object … >

<param name="flashvars" value="bridgeName=example">

<embed … flashvars ="bridgeName=example"/>

</ object>

</ body>

23.5.4 use the method to get attribute values getPropertyName
getPropertyName method to obtain the components of the attribute value. GetCompenentID method with the same, getPropertyName method is to determine the method does not name, but "get" string string attributes to connect components.

GetCompenentID method to get the use of components, the method can be used to obtain components getPropertyName attributes.

The following code uses the method to get getPropertyName component button "myButton" attribute of the label.

var flexApp = FABridge.example.root (); / / point to Flex applications

var btn = flexApp.getMyButton (); / / obtain the components of "myButton"

alert (btn.getLabel ()); / / obtain the label attribute value

GetCompenentID method with the same component attribute string uppercase first letter.

23.5.5 the use of methods set attribute values setPropertyName
setPropertyName method to set the attribute value components. GetCompenentID method with the same, setPropertyName method is to determine the method does not name, but "set" string string attributes to connect components.

GetCompenentID method to get the use of components, the method can be used setPropertyName component property settings. The syntax is as follows.

Component instance. Set the property name (attribute value);

The following code uses the method to change the button setPropertyName components "myButton" attribute of the label.

var flexApp = FABridge.example.root (); / / point to Flex applications

var btn = flexApp.getMyButton (); / / obtain the components of "myButton"

btn.setLabel ( "rrrrrrrrrrrrrrrrr"); / / Set the label attribute components

GetCompenentID method with the same component attribute string uppercase first letter.

23.5.6 To add a component to monitor the incident
Flex-Ajax Bridge technology components can be added to monitor the incident. The syntax is as follows.

Component instance. AddEventListenner ( "event name", JavaScript function names in the treatment);

GetCompenentID methods used to obtain components, the components can directly call all the methods (including addEventListenner methods).

Use the following code for the button component addEventListenner method "myButton" click to add events to monitor.

var flexApp = FABridge.example.root (); / / point to Flex applications

var btn = flexApp.getMyButton (); / / obtain the components of "myButton"

var callback = function ()

(

alert ( "success");

)

btn.addEventListenner ( "click", callback); / / components for the button "myButton" click to add events to monitor

An explanation of the procedures adopted by the Flex-Ajax Bridge technology to deal with in JavaScript events in Flex component. In this way, can reduce the size of Flex applications.

23.5.7 Calling a function in the Flex program
As a result of "FABridge.example.root ()" statement to the Flex application process itself, so there would be a direct function of the procedure call Flex.

The following code to call the Flex function test procedures.

/ / MXML file

function test (): void

(

Alert.show ( "hello world");

)

/ / HTML document

var flexApp = FABridge.example.root ();

flexApp.test ();

23.5.8 Flex-Ajax Bridge instance Flex Technology Control
The effect of this example: the buttons in the page or the drop-down box components, Flex applications that change the view.

Flex-Ajax Bridge instance Flex technology control steps are shown below.

New Flex Project "Flex-AjaxBridgeExample".

The root directory of the project to add "bridge" folder.

"Bridge" folder contains the Flex-Ajax Bridge source file.

The root directory of the project to add "image" folder.

"Image" folder store picture resources (in this case the use of the image components).

The preparation of "main.mxml" document.

"Main.mxml" document defines the function and testAlert visual component.

The following code is "main.mxml" document MXML code.

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

<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"xmlns:bridge="bridge.*"fontSize="13">

<mx:Script>

<! [CDATA [

import mx.controls.Alert; / / reference type Alert

public function testAlert (): void

(

Alert.show ( "Hello World!"); / / Prompt "Hello World!"

)

]]>

</ mx: Script>

<fab:FABridge xmlns:fab="bridge.*"/> <! - Flex-Ajax Bridge component ->

<mx:Panel width="400" height="350" verticalGap="1" title= "Flex-Ajax Bridge Instance ">

<mx:HBox width="100%" horizontalAlign="center">

<mx:VBox/>

<! - Image components ->

<mx:Image width="300" height="300" source="image/ dog.jpg"/>

</ mx: HBox>

</ mx: Panel>

</ mx: Application>

"Main.mxml" the appearance of the effect of the document shown in Figure 23-10.

Press Ctrl + F11 shortcut keys, the compiler run the program.

In the project "bin" folder under the new "FABridge Example.html" file.

"FABridgeExample.html" document defines a "Create button" button and a drop-down box components. Click the "Create button" button, call createFlexButton function to a new Flex application button. Drop-down box to change components of data, selectChange function call Flex application to amend the image components.

The following code is "FABridgeExample.html" the definition of a document code.

<! DOCTYPEhtmlPUBLIC "- / / W3C / / DTDXHTML1.0Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset="gb2312" />

<script src="bridge\FABridge.js"> </ script>

<script language='javascript'>

function createFlexButton () / / create a button handler

(

var flexApp = FABridge.example.root (); / / point to the adoption of Flex applications FABridge

/ / Create a button

var btn = FABridge.example.create ( "mx.controls.Button");

btn.setWidth (70); / / set the button width

btn.setHeight (25); / / set the button height

btn.setLabel ( "test"); / / Set the button label

var callback = function () / / define callback function

(

flexApp.testAlert (); / / call the Flex application testAlert function

alert ( "Hello"); / / Call JavaScript function prompt

)

btn.addEventListener ( "click", callback); / / for the button's click event handler to add

flexApp.getMyVbox (). addChild (btn); / / Add a button to Flex applications

)

function selectChange () / / change the drop-down box data processing function

(

var flexApp = FABridge.example.root ();// point through the Flex application FABridge

/ / Set the Flex application source image components attributes

flexApp.getMyImage (). setSource (imgSelect.value);

)

</ script>

<title> Flex-Ajax Bridge example </ title>

</ head>

<body>

<div>

<label> Select a picture: </ label>

<select name="imgSelect" onchange="selectChange()"> <! - the drop-down box ->

<option value="image\dog.jpg"> dog.jpg </ option>

<option value="image\fruit1.jpg"> fruit1.jpg </ option>

<option value="image\fruit2.jpg"> fruit2.jpg </ option>

<option value="image\flower.jpg"> flower.jpg </ option>

</ select>

<br/> <br />

<input type="button" value=" Create button " />

</ div>

<div>

<script>

document.write ( "<object

id = 'flexApp'

classid = 'clsid: D27CDB6E-AE6D-11cf-96B8-444553540000' codebase = 'http://download.macromedia.com/pub/shockwave/cabs/ flash / swflash.cab # version = 8,5,0,0'

height ='350 'width ='400'>");

document.write ( "<param name='flashvars' value='bridgeName= example'/>");

document.write ( "<param name='src' value='main.swf'/>");

document.write ( "<embed

name = 'flexApp'

pluginspage = 'http://www.macromedia.com/go/ getflashplayer'

src = 'main.swf' height ='350 'width ='400'

flashvars = 'bridgeName = example'/>");

document.write ( "</ object>");

</ script>

</ div>

</ body>

</ html>

(61) To use the Flex-Ajax Bridge technology, there are two essential code. To quote a "FABridge.js" file, a label for <object> add flashvars variables.

(62) click the Flex application to add the button, Flex calls the procedure and the JavaScript language testAlert function of the alert function.

Save "FABridgeExample.html" file, use your browser to open the file.

Examples of pre-operational effects and the effects of running in Figure 23-11, as shown in Figure 23-12.

Figure 23-11 Examples of the effect of plans to run before running instance of the effects of 23-12

23.6 Summary
Examples in the form of this chapter introduces some new features of Flex 3.0 applications. Due to the length of this book is limited, can not introduce new features. However, the new features introduced in this chapter are useful and representative features, including load PDF documents and use the local SQL database, the upgrade AIR applications, such as integration of Ajax technologies. Learning through this chapter, readers can understand and grasp some of the new Flex 3.0 features, in order to develop a richer feature RIA applications.

相关文章