flex与js通信与彼此之间的互调整理(一)

这次迭代的任务中有一条：需要用 flex 调用 js 来操控基于 ajax 的三维球。正好之前用 flash 做过游戏，快速过了一遍 flex 语法就开始了。网上翻了不少 flex 和 js 互相调用的资料，整理一下，权当备忘，也供大家参考。环境是 Flash Builder 4.6，说实话刚开始还挺陌生。

一、flex 调用 js

新建 flex 项目 FlexToJs，如图所示：

Flex 调用 js 的核心就是使用 ExternalInterface.call() 方法。主界面加一个按钮，注册一个点击事件，如图：

这里的 sayHelloWorld 是字符串，对应 js 文件里方法的名字，params 是传入的参数字符串。

接下来用 WebStorm 创建一个 HelloWorld.js 文件（用文本编辑器也成），代码如下：

把这个 js 文件放在 FlexToJs/html-template 下，这是运行时存放代码的地方。如果还需要调试，那么在 FlexToJs/bin-debug 下面也放一份，如图：

在 index.template.html 里加上一句 ，就是加个 js 引用，这个应该都会。在 FlexToJs.html 里同样位置，保存时会自动加上这句话，有兴趣的可以研究一下它们的关系。接下来运行 FlexToJs.mxml，点击按钮时，会通过引用的界面去调用 js 里的方法 sayHelloWorld，最终弹出警告，如图：

奇怪的是，在 IE 下可以正常显示，Chrome 下却不行，按钮都出不来。

下面来优化一下代码。如果不需要传递参数，js 里可以不用参数，但 flex 这边那个参数还是要写上，否则有些情况会出错。

如果我们需要返回值，或者需要传递非字符串的参数呢？一起来改一改。

把 FlexToJs.mxml 内部改为如下：

按钮加了个 id，方便使用。这里用数组传递给 js，并返回一个新数组来改变按钮的显示。之前的 HelloWorld.js 变为：

也很容易理解，只是改变了数组里的内容。最后结果为：“Hello yy!Hello xx!Hello zz!”，返回值和传参都完成了，基本可以满足日常需求。不过这些参数只适用于 String、int 等常用类型，如果是自己写的类，两边都得写解析函数，这里就不展开了，大家可以自己尝试。

二、js 调用 flex

有人可能会问，当我们调用了 js 文件，如果 js 里需要在某个时候调用 flex 里的方法怎么办？下面就来解决这个问题。

继续用刚才的项目，直接在上面修改。将 FlexToJs.mxml 改为如下：

去掉了按钮，注意在 Application 最后加了一个事件，初始化完成后调用 initApp。这里的 sayCallBack 对应 js 里的方法，在这里监听，当 js 触发调用此方法时，会转到 callBack 处理，最后返回值给 js 里的 init。Js 文件如下：

这里的 dou.sayCallBack 调用的就是 flex 里的那个字符串方法。

最后在 index.template.html 里需要加一个按钮，如图：

这个按钮调用 js 里的 init 方法。运行后的效果：

参数和返回值都有了，应该能满足大家的需求。后续如果有时间，再把 flex 调用 js 控制二维地图和三维球的过程写写，不过那些需要用到超图的一些第三方控件了。希望对大家有所帮助。