(3)FABridgeの使い方1

Ajax-Flex2

FABridgeを使ってみませう。
ここまでの準備は前回までを見て下さいね


メインのアプリケーションmxmlで、ラベルを用意しておきます。

javascriptからmxmlのラベルのテキスト文字を変えたり、テキストを取得してみたり。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	width="50%" height="50%">
	<fab:FABridge xmlns:fab="bridge.*" />
	<mx:Label id="lbl" text="text"/>
</mx:Application>

javascriptを用意します。
■sample.js

function onButton1(){}

htmlに、作成したjsを読み込ませます。また、ボタンを用意して、クリック時に作成したfunctionを呼ぶようにします。
■index-template.html

<script src="sample.js" language="javascript" type="text/javascript"></script>

・・・

<input type="button" value="button1" onClick="onButton1();">

うほっ！ボタンタグがほんまのボタンになった。。。

2007/07/17：追記 ハイライトを覚えました


さっきつくったjsを実装します。

function onButton1(){
	var flexApp = FABridge.flash.root();
	alert(flexApp.getLbl().getText());
}

Button1を押したらas側のラベルのテキストの値を取得してアラートで表示させています。

flexApp.getLbl().getText()

と書いています。
mxml側でidを定義しておき、getXxx()という形式で操作します。(xxxはid名)
子コンポーネントでも同様に階層を追っていけば操作できます。

反対に、

flexApp.getLbl().setText("hoge")

とすれば、Labelの値がhogeになります。

as上の値を取得するのも、asの値を変化させるのも、同じような手続きで行う事ができます。

次回は、jsからasのfunctionを実行してみます。