fabridge-沟通javascript与flex的桥梁...
时间：2010-08-06 来源：a83891224a
今天鼓捣了半天，终于能用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> <!--[CDATA[ import mx.controls.dataGridClasses.DataGridColumn; import mx.controls.Alert; import mx.controls.*; import mx.charts.*; import mx.charts.series.*; import mx.charts.effects.*; public function testFunc(val1:String = "defaultParam" ):void { Alert.show(val1, "called remotely"); } // these just force datagrid to be linked into the application public var refs:Array = [DataGrid, DataGridColumn, ColumnChart, ColumnSeries, LineSeries, CategoryAxis, SeriesInterpolate, SeriesSlide, SeriesZoom ]; ]]--> </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>里添加如下代码：
<input type="button" value="点击" onClick="jsButton()" />
这是新建一个按钮，再把响应函数写到 <head>里 ，代码如下：
<script type="text/javascript"> function jsButton(){ var flexApp = FABridge.b_JavaScriptFlex.root(); var currentCheckValue = flexApp.getCheck().getSelected(); flexApp.getCheck().setSelected( ! currentCheckValue ) } </script>
这是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教学视频！
相关阅读 更多 +
