プログラミング工房
TOP
Flex基本
開発環境 JavaScript連携 PHP連携1 PHP連携2(AMFPHP) ウィンドウ ボタンスキン 矩形スキン ローカルファイル(テキスト) F5等の対策 ローカルファイル(イメージ) ダウンロード、アップロード 1枚の画像のカラーを変更 時間のかかる計算処理 外部SWFの読込み
Flexで3D
Flexだけで3D Papervision3Dを使ってみる 3Dオブジェクト カメラ、前後判定の工夫しました 自由な形状を作成
Flexでクラス
Class1(白黒ゲームの盤) Class2(白黒ゲームのプレイヤー) Class3(プレイヤーを外部SWF)
PHP
共通関数1
Flexの作品
お問合せの説明 サンプルのソース表示の説明 分子構造の表示(PDBファイル) マンデルブロ集合の画像作成 swf参加型白黒ゲーム(Reversi) ストップウォッチ WEB素材
AIR
AIRを使ってみる ソースファイルのHTML変換を作る
etc.
マンデルブロ集合のギャラリー ジュリア集合のギャラリー wonderflを使ってみました お問合せ

Flex4基本-JavaScript連携

■2011.02.10:作成
サンプル サンプルのソース
FlexとJavaScript連携の連携に関してまとめたものです。

Flexの立ち上げ時のパラメータ

立ち上げ時にパラメータをHTNL(JavaScript)からswfに引き渡すことが出来ます。
この機能を使うことにより簡単にすこし異なる機能の処理を1個のswfで実行することが出来ます。

FlashDevelopが自動で作成する「/bin/index.html」に以下のように追加して下さい。
(FlashDevelop以外では記述方法は違うと思います「FlashVars」で検索してください。)
//Flexに初期データ引渡しの定義
var flashvars = {
    paem1:"漢字データ",
    paem2:"123.45"
};

Flexの受け取る側のソースです。
「FlexGlobals.topLevelApplication.parameters.[変数名]」にセットされています。
HTNL(JavaScript)でセットされていないときは「undefined」になります。
import mx.core.FlexGlobals;
//初期処理
private function initDataSet():void {
    //Flex (立ち上げ時のパラメータ)
    if(FlexGlobals.topLevelApplication.parameters.paem1!=undefined) {
        taPaa1.text = FlexGlobals.topLevelApplication.parameters.paem1;
    }
    if(FlexGlobals.topLevelApplication.parameters.paem2!=undefined) {
        taPaa2.text = FlexGlobals.topLevelApplication.parameters.paem2;
    }
               :    
}

JavaScript ⇒ Flexの連携

JavaScriptからFlex関数をCALLして処理結果をJavaScriptに返します。

JavaScript(CALL側)のソースです。
 ・連想配列でFlexに渡すデータを用意
 ・Flexがあるエレメントを求めます。(FlashDevelopだけで有効?)
 ・Flexの関数CALL
 ・戻り値の連想配列を表示
<script type="text/javascript">
    //JavaScriptの「JavaScript ⇒ Flex」ボタンが押されたときの関数
    function fncJStoFlex() {
        //htmlでの入力データ取得
        var eleName=document.getElementById("txtName");
        var strNam=eleName.value;
        var eleX=document.getElementById("txtX");
        var numX=eleX.value;
        var eleY=document.getElementById("txtY");
        var numY=eleY.value;
            :(入力値のチェック)
        //Flexに送るデータ作成
        var objData={ name: strNam, x : numX ,y:numY};
        //Flexのエレメントを取得("FlexToJavaScript"はswfの名称)
        var e = document.getElementById("FlexToJavaScript");
        //Flexの関数
        var retData=e.fJStoFlex( objData);
        //戻り値をHTML上に表示
        var eleRec=document.getElementById("txtRec");
        eleRec.innerHTML=retData.name+"<br/>掛け算の答えは"+
                                            retData.kekka;
    }
</script>

Flex側で行う事は2個あります。
 ・javascript側の関数コールイベント「fJStoFlex」に実際CALLの関数「fncJStoF」を指定
//初期処理
private function initDataSet():void {
            :
    //JavaScript ⇒ Flex関数のイベント登録
    try {
        ExternalInterface.addCallback(
            "fJStoFlex",        // Javascriptから呼び出す際の名前
            fncJStoF            // 呼び出しに応じて実行するFlexの関数
        );
    } catch (err:Error) {
        Alert.show("JavaScript ⇒ Flexの関数が使用できません。\n"+err.message);
    }
}
 ・実際CALLの関数「fncJStoF」(処理内容は名前に「さん」付けると掛け算)
//JavaScript ⇒ Flex関数
public function fncJStoF(objData:Object):Object {  
    var retData:Object = { name:objData.name + "さん" , 
                kekka:objData.x * objData.y };

    taSRdata.text = "受信データ=(" + objData.name + "," + objData.x + "," + 
                    objData.y + ")\n" +
                    "送信データ=(" +retData.name+","+retData.kekka+")";
    return retData;
}  

Flex ⇒ JavaScriptの連携

FlexからJavaScriptx関数をCALLして処理結果をFlexに返します。

Flex(CALL側)のソースです。
 ・連想配列でJavaScripに渡すデータを用意
 ・JavaScripの関数CALL
 ・戻り値の連想配列を表示
//Flex ⇒ JavaScript関数
private function onFtoJS(event:MouseEvent):void {
    var strName:String =txtName.text;
    var numX:Number = nsX.value;
    var numY:Number = nsY.value;
    var objData:Object = { name:strName, x:numX, y:numY };
    try {
        //JavaScript関数を実行
        var objRet:Object = ExternalInterface.call("fncJSkakezan", 
                                                         objData);
    } catch (err:Error) {
        Alert.show("Flex ⇒ JavaScriptの関数が使用できません。\n" + 
                                                      err.message);
        return;
    }
    taKekka.text = objRet.name + "\n掛け算の答えは" + objRet.kekka;
}

javascript側のソースです。(処理内容は名前に「さん」付けると掛け算)
<script type="text/javascript">
    //Flex ⇒ JavaScript(Flexから呼び出される関数)
    function fncJSkakezan(objData) {
        var objRet = { name: objData.name+"さん", 
                    kekka : objData.x*objData.y};
        //送受信データを表示
        var element=document.getElementById("txtSEdata");
        element.innerHTML="受信データ=("+objData.name+","+
                objData.x+","+objData.y+")<br/>" + 
                "送信データ=("+objRet.name+","+objRet.kekka+")";
        return objRet;
    }
</script>

プログラミング工房