Ajax和Flex互访

接触flex有2个多月了，一直没有考虑网页如何传值给flex生成的swf文件的问题。昨天在工作中遇到了这样一个问题：

一个生成好的并加载到页面的swf，需要根据页面提供的公司id，显示相关内容。和同事商量了好久，最终决定使用FABridge这个神奇的工具。

这个FABridge顾名思义，是flex ajax bridge的意思。一旦知道其中的原理，这层神秘的面纱就被揭掉了，随之而来的是对这个框架设计上的敬仰。
 
本文不是讲这个框架的，而是介绍一个简单的应用。至于这个框架，推荐ibm网站的相关文章。

1创建flex工程
这里，命名为goFlexAjax。我们要发布项目到tomcat，所以使用了blazeDs框架，Server要选J2EE。

2服务器配置
选择tomcat5.5，加载blazeds包 这里需要修改的是 content folder和output folder，把它们指到web。

接下来两个步骤是：将flex工程转换为web工程和桥加载。个人感觉这两个步骤顺序可以随意。这里先做转web工程。

3转web工程 
4丰富mxml页面
接下来，在加桥前，我们丰富mxml页面。这里加了一个textinput和一个button。

5加flex-ajex桥

下一步，我们加flex-ajex桥。这以后，如果页面控件有变化，请重复这一步。

加载后会产生flex桥和ajax桥。它们的作用是互相翻译对方的语言。

6添加js脚本
我们要在AjaxBridge/goFlexAjax/goFlexAjax.html中添加访问flex文件的代码：

         <script type="text/javascript">

         function touchFlex(){

                   var t= goFlexAjax.getMyText().setText("javascript touch flex kindly");

         }        

         var callBack=function(event){

                   alert(event.getValue());

         }        

         goFlexAjax.getMyButton().addEventListener("click",callBack);

         </script>

<input type="button" value=" o   k " οnclick="touchFlex()"/>

goFlexAjax是goFlexAjax.js中定义好的变量，是flex应用的句柄。

7复制代码
在发布之前，需要做两件事：

1 修改AjaxBridge/goFlexAjax/goFlexAjax.html中swf的路径(有两处)

"../../web/goFlexAjax.swf" => "goFlexAjax.swf"

2 将下图goFlexAjax中的三个文件，复制到web下。Lib包和js文件是增加，html是替换。

这一步请灵活应用，如果你要将桥技术应用在你已有的工程里，请复制相关文件即可。

8发布工程
好，简单的应用做好了，现在发布

9访问
效果如下

懒得上传图片，文档和图片请下载附件收看。惊喜大放送，里面有这个实例的源代码！