Fabridge-沟通javascript与flex的桥梁

来源：互联网发布：大淘客cms偷单吗编辑：程序博客网时间：2024/04/29 03:59

今天鼓捣了半天，终于能用javascript 调用 flex 了，下面记录下成功调用的第一个实例：

1、准备工作：

在flex里建立一个工程： JavaScriptFlex,自动生成一个同名.mxml文件后，我们就可以在mxml里放组件写flex代码,代码如下：

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" height="400" viewSourceURL="srcview/index.html"><mx:Script></mx:Script><mx:Panel width="100%" height="100%" id="panel" paddingLeft="20" paddingTop="20" ><mx:Text width="100%" height="16"><mx:text>Refer to the controls below, via javascript, as slider(), check(), and button() respectively</mx:text></mx:Text><mx:CheckBox x="49" y="34" label="Checkbox" id="check"/><mx:HSlider snapInterval=".01" id="slider" liveDragging="true"/><mx:Button id="button" label="generic button" /></mx:Panel><fab:FABridge xmlns:fab="bridge.*" /></mx:Application>

我比较懒，这个是flex的官方sdk里的例子，具体路径为D:/Flex Builder 3/sdks/3.2.0/frameworks/javascript/fabridge/samples ，我从里面的app.mxml里copy的，只是个简单的flex程序，导入了些以后调用需要用到的类。

2、在该工程上点右键，选择【creat Ajax Bridge】，添加FABridge支持,这时候会生成一些支持文件如下图：

这里我们主要用到其中的 JavaScriptFlex.html 右键用txt编辑器打开它如下图:

这里主要看蓝色框里的代码，b_JavaScriptFlex 是flex-ajax桥的名称，这个很重要,flex、ajax相互调用时必须用到它，后面也会提到

3、给 JavaScriptFlex.html 里添加javascript代码，调用 flex 。

先在 <body>里添加如下代码：

这是新建一个按钮，再把响应函数写到 <head>里，代码如下：

这是sdk里两个example里的，主要是用js里的button控制 flex 里的 checkBox 的 seeleted 的 value。好了，现在可以用浏览器打开 JavaScriptFlex.html 了，点击左下角那个 '点击' 按钮，是不是可以控制 checBox了，这里的 FABridge 提供了 flex-ajax里的所有操作，而 b_JavaScriptFlex 就是上文提到的这个工程的实例名。

好了，由于本人表达实在有限，且还要在睡前把 example里的其他code也摸透，就不说原理了，想了解可以参考下面这位的这个帖子：

http://tieba.baidu.com/f?kz=355709784

最后在感谢下郑岩峰的flex教学视频！