ホストアプリケーションのソースコード例
以下は、管理されたハブを使って2つウィジェットをマッシュアップするホストアプリケーションの例です。
<html>
<head>
<title>Sample Host Application using ManagedHub</title>
<!-- まず最初に、OpenAjax HubのJavaScriptライブラリをロードする -->
<script src="http://mashup.example.com/hub20/release/all/OpenAjaxManagedHub-all.js">
</script>
<!-- 必要に応じて他のライブラリのコードをロードする -->
<script type="text/javascript">
/* セキュリティ・マネージャのコールバック関数を定義する */
function onMHPublish(topic, data, publisher, subscriber) {return true;}
function onMHSubscribe(topic, container) { return true; }
function onMHUnsubscribe(topic, container) { return true; }
function onMHSecurityAlert(source, alertType) {
alert("host app received security alert: source=" + source
+ ", alertType=" + alertType);
}
/* ホストアプリケーションがロードされた時に初期化を行う */
function initialize() {
/* 管理されたハブのインスタンスを生成する。
引数として、セキュリティ・マネージャ機能のコールバック関数郡を指定する */
var managedHub = new OpenAjax.hub.ManagedHub(
{ onPublish: onMHPublish, onSubscribe: onMHSubscribe,
onUnsubscribe: onMHUnsubscribe, onSecurityAlert: onMHSecurityAlert
}
);
/* Containerの属性となる、 ウィジェットのセキュリティ警告や接続イベント
-のためのコールバック関数を定義
*/
var myContainer = {
onSecurityAlert : function onClientSecurityAlert(source, alertType) { },
onConnect : function onClientConnect(container) { },
onDisconnect : function onClientDisconnect(container) { }
};
var widgetsArea = document.getElementById("mashupWidgets");
/* ウィジェットその1をロード */
var div1 = document.createElement("div");
widgetsArea.appendChild(div1);
var container1 = new OpenAjax.hub.IframeContainer(managedHub , "widget1",
{ Container: myContainer,
IframeContainer: {
parent: div1,
uri: "http://widget1.example.com/samples/widget1.html",
tunnelURI: "http://mashup.example.com/hub20/release/all/tunnel.html"
}
} );
/* ウィジェットその2をロード */
var div2 = document.createElement("div");
widgetsArea.appendChild(div2);
var container2 = new OpenAjax.hub.IframeContainer(managedHub , "widget2",
{ Container: myContainer,
IframeContainer: {
parent: div2,
uri: "http://widget2.example.com/samples/widget2.html",
tunnelURI: "http://mashup.example.com/hub20/release/all/tunnel.html"
}
} );
}
</script>
<body onload="initialize()">
This is a sample host application.
<div id="mashupWidgets"></div>
</body>
</html>
この例では、<div id=” mashupWidgets”> というDIV要素の下に2つのDIV要素を子要素として挿入し、それぞれの中にiframeコンテナを使ってウィジェットをロードしています。
OpenAjax.hub.IframeContainer のコンストラクタに対して3つの引数を指定しています。
- 第1引数：ウィジェットの通信を管理するManagedHub のインスタンス
- 第2引数：ウィジェットの名前
- 第3引数：ContainerとIframeContainerという二つのプロパティを持つオブジェクト
この第3引数のうち、Containerプロパティには、コールバック関数群を含むオブジェクトを指定します。IframeContainerプロパティには、次の3つのプロパティを持つオブジェクトを指定します。
- parent ：ウィジェットを挿入するHTML親要素への参照
- uri：ウィジェットのコンテンツとなるHTMLファイルのURL。このURLは、「準備」の項で説明したように、ホストアプリケーションと異なるサーバ名を参照する必要があります。この例では ウィジェット1がwidget1.example.com、ウィジェット2が widget2.example.comというURLを指定しています。
- tunnelURI ：管理されたハブでウィジェットが通信を行う際に内部的に使用するトンネル機能のURLを指定します。トンネル機能はOpenAjax Hub 2.0の実装の一部として、JavaScriptを含むHTMLファイルなどの形態で提供されます。この例では release/all/tunnel.html という OpenAjax Hub 2.0のリファレンス実装に含まれているファイルを参照しています。
このサンプル・アプリケーションをブラウザ上で表示したイメージを図4に示します。
ウィジェットのソースコード例
以下は、上記のホストアプリケーションに組み込まれるウィジェットの例です。
<html>
<head>
<title>Widget 1</title>
<!-- まず最初に、OpenAjax HubのJavaScriptライブラリをロードする -->
<script src="http://widget1.example.com/hub20/release/all/OpenAjaxManagedHub-all.js">
</script>
<script type="text/javascript">
/* セキュリティ警告発生時のコールバック関数 */
function clientSecurityAlertHandler(source, alertType) {
alert("received a security alert: source=" + source
+ ", alertType=" + alertType);
}
/* メッセージ受信用のコールバック関数 */
function myCallbackFunc(topic, data){
/* 受信したメッセージを表示する */
var msg = document.getElementById("receivedMessage").value = data;
}
/* ManagedHubに接続した際に呼ばれるコールバック関数 */
function connectCompleted( hubClient, success, error ) {
if (success) {
/* ここで任意の処理を行う. 下はトピックを購読する例 */
hubClient.subscribe("com.example.test.topicB", myCallbackFunc);
}
}
/* ウィジェットがロードされたときに呼び出されるイベントハンドラ */
function initialize() {
/* HubClient のインスタンスを初期化する */
hubClient = new OpenAjax.hub.IframeHubClient({
HubClient: { onSecurityAlert: clientSecurityAlertHandler }
});
/* ホストアプリケーションのManagedHubに接続する */
hubClient.connect( connectCompleted );
}
/* ボタンが押された場合のイベントハンドラ */
function sendMsg() {
var msg = document.getElementById("messageToSend").value;
hubClient.publish("com.example.test.topicA", msg);
}
</script>
</head>
<body onload="initialize()">
<div style="border:black">
<h3>Widget1</h3>
<p>
Received from Topic B:
<input type="text" id="receivedMessage"> <br />
Sending to Topic A:
<input type="text" id="messageToSend" value="hello from widget1" >
<input type="button" value="Send" onclick="sendMsg()"/><br />
</p>
</div>
</body>
</html>
この例では、まずセキュリティ警告発生時、メッセージ受信時、ManagedHubへの接続完了時にそれぞれ呼ばれるコールバック関数を定義しています。
次に、ウィジェットがロードされたときに呼び出される initialize 関数の中で、 OpenAjax.hub.IframeHubClient のコンストラクタによって HubClientのインスタンスを初期化しています。このHubClientインスタンスの connect関数を使用してManagedHubへの接続を行います。接続完了時に、あらかじめ定義した connectCompleted というコールバック関数が呼びだされます。
connectCompleted関数の中では任意の処理を行えばよいのですが、この例では “com.example.test.topicB” というトピックへの購読を行い、メッセージを受信したときにその内容を画面に表示する処理を行う myCallbackFunc 関数をコールバック関数として登録しています。
一方で、ウィジェットの内部（body要素）にはメッセージ表示用と送信用のテキストフィールドが定義されており、信用のテキストフィールドにメッセージを入力してボタンを押すと、メッセージが “com.example.test.topicA” というチャネルに対して発行されます。つまり、この例のWidget 1は、com.example.test.topicAをメッセージ送信用、com.example.test.topicBをメッセージ受信用のチャネルとして使用しています。もうひとつのウィジェットでは逆にcom.example.test.topicB をメッセージ送信用、com.example.test.topicA をメッセージ受信用のチャネルとして利用すれば、二つのウィジェットの間で双方向にメッセージをやりとりすることが可能です。
