FABridge構成(jsとas通信)

7012 ワード

JavaScript Ajax Flex bridge

[flash builder 4を使用してプロジェクトをクリック-->右クリック-->Ajax Bridgeの作成サポートの追加]
FABridgeの使用を開始する前に、以下に使用可能な資料と開発環境を提供します.最新のFlex SDKをダウンロードしたら、リスト2に示すディレクトリ構造:リスト2を構成してください.FABridgeチュートリアルのディレクトリ構造

/
+--- bridge
|      +--- fabridge.js
|      +--- fabridge.as
|
+--- index.html

このディレクトリ構造は非常に簡単です.インデックスページとbridgeディレクトリに接続されたFABridgeスクリプトがあります.FABridgeライブラリファイルの場所は、環境によって異なります.Mac OS XのFlex Builder 3 Professionalを使用しているので、ライブラリファイルはinstall_root/sdks/frameworks/3.0.0/javascript/fabridge/にあります.
これで適切なアーキテクチャが用意され、HTML/JavaScriptおよびActionScript側でスケルトンの作成を開始できます.インベントリ3のコードを使用してHTML/JavaScriptスケルトンを開発する:インベントリ3.HTML/JavaScriptスケルトン

<html>
<head>
<title>FABridge Tutorial</title>

<script type="text/javascript" src="bridge/FABridge.js"></script>
<script type="text/javascript">
   // ...
</script>

</head>
<body>
</body>
</html>

ご覧のように、FABridge JavaScriptライブラリをコードにリンクするだけで、ブリッジのすべての機能をすぐに使用できます.次に、リスト4のコードを用いてActionScript側でブリッジを実現する:リスト4.アプリケーションスケルトン

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
       xmlns:bridge="bridge.*"
       layout="absolute"
       width="300"
       height="142">

   <bridge:FABridge bridgeName="flex" />
   <mx:TextInput x="70" y="54" id="txt_test" text="FABridge rocks!"/>

</mx:Application>

このコードはもっとよく知らないかもしれません.ID txt_testとFABridge rockのデフォルト値を持つ単一テキスト入力コントロールを定義することで、UIを清潔に保つことができます.bridge名空間が定義され、bridgeディレクトリ内のすべてのクラスがインポートされます.最後に、Flexアプリケーションに名前を付けて、そのアプリケーションにブリッジでアクセスするときに使用します:flex.このFlexコードをSWF作業ドキュメントにコンパイルするには、Flex 3 SDKのmxmlcユーティリティを使用します.インベントリ5には、最も基本的なコンパイルコマンドであるインベントリ5が表示される.MXMLのコンパイル

                path_to_flex_bin_folder/mxmlc path_to_mxml file

インベントリ5のコマンドはソースファイルをコンパイルし、同じディレクトリでMXMLと同じ名前でSWFファイルを出力します.コンパイルに成功したと仮定すると、リスト6に示すように、得られたSWFをHTMLファイルにリンクすることができます.リスト6.リンクされたSWFファイル

<embed src=”main.swf” />

注意:リスト6のコードは、主にFABridgeのプレゼンテーションに使用されます.ターゲットが特定の環境(リスト6のターゲット環境はMozilla)である場合を除き、オブジェクトタグやその他のロードスクリプトに関する詳細なテクニックを追加する必要があります.
すべてが正常に動作していると仮定すると、アプリケーションは図1:図1に似ています.サンプルアプリケーション
これで、FlexアプリケーションをHTMLコンテナにコンパイルしてリンクし、最初のFABridge関数を呼び出してFlexアプリケーションの参照を取得できます.リスト7のコードを使用してHTMLスケルトンファイルの空の<script>タグ:リスト7を埋めます.Flexアプリケーションの参照を取得

// global variable, holds reference to the Flex application
var flexApp;  

var initCallback = function() {
   flexApp = FABridge.flex.root();
   return;
}
// register the callback to load reference to the Flex app
FABridge.addInitializationCallback( "flex", initCallback );

インベントリ7のコードは、まずグローバルJavaScript変数を定義し、FABridgeがFlexアプリケーションの参照を取得すると、その変数は保存されます.グローバル変数が設定され、addInitializationCallback() FABridgeメソッドで呼び出されるコールバック関数が定義されます.このコードを使用するには、Flexアプリケーションで構成されているブリッジの名前を一致させるだけです.ここからJavaScriptコードから各種ActionScript機能にアクセスできます.
ActionScriptオブジェクトの使用
Flexアプリケーションのグローバル参照が取得されました.ActionScriptオブジェクトには、FABridgeで提供されている一貫したインタフェースを使用してアクセスできます.ActionScriptワールドでは、オブジェクトには通常、ポイントタグobject.idでアクセスします.ただし、FABridgeは、ActionScriptオブジェクトをポイントタグに公開するのではなく、関数呼び出しによって使用可能にします.最初は少し違いますが、従うテンプレートを知るだけです.ActionScriptで通常object.idと認識されているオブジェクトは、object.getId()としてアクセスできるようになりました.これは、リスト8のコードをHTMLスケルトンに入力する例を示すのに最適です.リスト8を試してみてください.ActionScriptオブジェクトをIDで取得

// get the text input control
var txt = flexApp.getTxt_test();

変数txtはFlexアプリケーションのID txt_testはテキスト入力コントロールのオブジェクトを表します.IDで他のActionScriptオブジェクトにアクセスするために必要なテンプレートを表示できます.この宣言は、まずFlexアプリケーションのグローバル参照であり、次に、常に文字列getを先頭としてターゲットオブジェクトIDを後続するメソッド呼び出しである.なお、この宣言のID名は大文字で始まる必要があります.
ActionScriptオブジェクトのプロパティを取得して設定するのは、先ほどの手順と似ています.処理テキスト入力コントロールの例を受け、リスト9のコードを用いてtextの属性:リスト9を取得して設定.ActionScriptプロパティの取得と設定

alert( "old: " + txt.getText() );

txt.setText( "Reset!" );

alert( "new: " + txt.getText() );

インベントリ9のコードは、まずFlexアプリケーションのテキスト入力コントロールの初期値を警告する.前述のテンプレートに従うと、関数呼び出しによってtextの属性が得られ、get文字列が添付され、属性名にはアルパカマッチング原則(camel cased)が適用されていることがわかります.set()メソッドでは、同じプロセスが使用されますが、オブジェクトの新しい値を構成するためのパラメータが受け入れられます.リスト9のコードを実行すると、図2のような画面が表示されます.図2.ActionScriptオブジェクトのプロパティの設定
次に、ActionScriptオブジェクトメソッドを呼び出す最も簡単な操作を続けましょう.このプロセスには特に注意する必要はありません.JavaScriptコードには、ActionScriptコードでこれらのオブジェクトメソッドを使用するように、ActionScriptオブジェクトメソッドが使用されます.インベントリ10のコードは、テキスト入力コントロールでメソッドを呼び出す方法を示す:インベントリ10.ActionScriptメソッドの呼び出し

txt.setVisible( false );

インベントリ10のコードは、Flexアプリケーションのテキスト入力コントロールを非表示にします.オブジェクトは、物理的に表示されないだけで参照および処理できます.ActionScriptとJavaScriptの間でメソッドを呼び出す方法は変わりません.
FABridgeの最も強力な機能の1つは、JavaScriptとActionScriptコードの間で関数を伝達できることです.Flexのテキスト入力値をHTML/JavaScript側の<div>に動的にコピーするインベントリ11のコードを表示します.インベントリ11.でんたつかんすう

// define a function used as a callback to JavaScript
var txtCallback = function( event ) {
   // get the object which fired the event
   var swf_source = event.getTarget();  

   document.getElementById( "copy" ).innerHTML = swf_source.getText();

   return;
}
txt.addEventListener( "change", txtCallback );

インベントリ11のコードはJavaScriptコールバック関数であり、Flexアプリケーションのテキスト入力コントロールの値が変更されるたびにトリガーされます.値が変更されると、その値はIDとともに<div>タグにコピーされる.このような機能は、特にAjaxとFlexコンテンツの統合を試みた場合に非常に強力です.両方の環境はイベントに大きく依存するため,両者を結びつける能力が重要である.
本論文で探究した最後の機能は異常処理である.デフォルトでは、JavaScriptコードでtry . . . catchコードブロックを使用します.少なくともエラーコードにアクセスし、ActionScriptエラーのオンラインリファレンスで検索できます.この方法は効果的ですが、開発中はできるだけ多くの情報を事前に表示したいと思っています.FABridgeでは、デバッグ機能付きFlash Player 9をインストールするだけで、これらの情報を入手できます.この機能をインストールすると、行番号、ファイル名、エラータイプ、スタックトラッキングにアクセスできます.リスト12のコードを使用して一例を表示する:リスト12.例外処理

try {
   alert( flexApp.throwsAnError() );
}
catch( e ) {
   var msg = "";
   for( var i in e ) {
      msg += i + " = " + e[i];
   }
   alert( msg );
}

リスト12のコードは、throwsAnError()メソッドが存在しないため、エラーを投げ出した.catchブロックのコードは、図3と同様の警告を出力.例外データ
ご覧のように、これらのデータは単一のエラーコードよりはるかに有用であり、必要なエラー診断作業も少ない.JavaScriptやActionScriptなどの異なるテクノロジー間の複雑な統合の問題を処理する場合は、追加の助けを得て嬉しいです.
jsがswfテキストボックスの値を変更した例
function testFAB(){var flexApp;var initCallback=function(){flexApp=FABridge.b_jstoAS 2.root();flexApp.getTxt_test().setText("テキストボックスを変更しましたハ");//getTxt_test()はswfテキストボックスであり、getの後ろにテキストボックスのID(頭文字大文字でなければならないことに注意してください). } FABridge.addInitializationCallback(”flex”,initCallback); }
flexApp.XiaoshouAlert(Date()+username);//呼び出しswfの関数はswfの関数名と一致すればよい.
なぜ?b_jstoAS2.root();グローバル変数にコピーすると、グローバルにアクセスできませんね.気がふさいで,まだ研究を続けなければならない.

jqueryは1つのページのスライスhtmlのロードの方法をよく解決します

Winform現在のフォームのコントロールを取得