由于這個迭代上面下發(fā)的任務(wù)中有一條：需要使用flex調(diào)用js來操控用ajax做的三維球，任務(wù)落在了我的身上，我也就才開始學(xué)習(xí)flex，以前用flash做過游戲，所以很快過了一遍語法就行了，開始網(wǎng)上查找flex和js之間互相調(diào)用的范例，這里整理一下也避免忘記，也和大家互相交流交流。

我用的是flash builder 4.6，也不熟悉。

一、flex調(diào)用js。

新建flex項(xiàng)目FlexToJs，如圖所示：

Felx調(diào)用js其實(shí)就是使用的方法ExternalInterface.call()。主界面添加一個按鈕，并且注冊一個點(diǎn)擊事件，如圖：

SayHellWorld是字符串，對應(yīng)我們調(diào)用的js文件里面的方法，名字一樣，params是所傳的參數(shù)字符串。

接下來我們使用WebStorm創(chuàng)建一個HellWorld.js文件（代碼簡單，用文本編輯器也可以快速創(chuàng)建），代碼如下：

將此js文件放在FlexToJs/html-template下，這是運(yùn)行時代碼的存放地址，如果需要調(diào)試，那么需要在FlexToJs/bin-debug下面也放一份，如圖：

在index.template.html里面加上一句<script type="text/javascript" src="HelloWorld.js"></script>，就是加一個js的引用，這個都會，不用截圖了吧！在FlexToJs.html里面同樣地方在你保存的時候會自動加上這句話，有興趣的可以研究他們的關(guān)系。接下來運(yùn)行FlexToJs.mxml，在點(diǎn)擊按鈕的時候會通過我們添加引用的界面去調(diào)用js文件里面的方法sayHelloWorld，最后彈出警告，如圖：

我這個電腦不知咋的，IE下可以，chrome下就是不行，按鈕都出不來。

下面，我們來優(yōu)化代碼，上面如果不需要傳遞參數(shù)，你在js文件里面就不使用，但是flex的那個參數(shù)還是要寫上，不然有些時候會出錯誤。

如果我們需要返回值呢？需要傳遞非字符串的參數(shù)呢？

下面我們就一起來改一改吧！

把FlexToJs.mxml內(nèi)部改為如下：

按鈕需要添加一個id，主要是為了方面使用，很容易明白我使用了數(shù)組傳遞給js，并且返回一個新的數(shù)組來改變按鈕的顯示。而之前的HelloWorld.js變?yōu)椋?/P>

也很容易明白，就改變了一下數(shù)組里面的內(nèi)容。最后結(jié)果為：“Hello yy!Hello xx!Hello zz!”

，返回值和傳參都完成了，基本可以滿足大家的需求了，不過這些參數(shù)只能滿足常用的String、int等，如果是自己寫的類想傳遞，那么你在兩邊都得寫解析的函數(shù)了，這里就不做詳細(xì)介紹了，大家可以自己嘗試。

二、js調(diào)用flex。

有人可能會提出當(dāng)我們調(diào)用了js文件，二如果js里面需要在某時候調(diào)用flex里面的方法如何辦呢？下面我們就來解決這個問題。

繼續(xù)使用剛才的項(xiàng)目，直接在上面做修改。將FlexToJs.mxml改為如下：

去掉了按鈕，不需要了，注意在Application最后添加了一個事件，在初始化完成后調(diào)用initApp，這里的sayCallBack對應(yīng)js里面的方法，在這里監(jiān)聽，當(dāng)在js里面觸發(fā)調(diào)用此方法時會轉(zhuǎn)化給callBack來處理，最后返回值給js里面的init。Js文件如下：

這里dou.sayCallBack調(diào)用的就是flex里面的那個字符串方法。

最后在文件index.template.html里面需要添加一個按鈕，如圖：

這個按鈕調(diào)用js里面的init方法。運(yùn)行后的效果：

參數(shù)和返回值都有了，應(yīng)該滿足大家的需求了吧！后續(xù)如果有時間再把flex調(diào)用js控制出二維地圖和三維球的過程寫寫，不過這些都需要使用超圖的一些第三方控件了！希望對大家有所幫助。

最新評論