クライアントサイドの実装例
では、今度はクライアント側でEchoを実装してみましょう。この連載はJavaプログラマを対象としていますが、Echoはせっかく「サーバ側とクライアント側の両方で実装できる」という面白い特徴があるのですから、JavaScriptではどうなるのか興味ある人も多いはずです。
ここでは、Webアプリケーションのルート下に「js」というフォルダを用意し、ここにEchoの「JavaScriptLibraries」に用意されているスクリプトファイルを配置する形で考えてみます。そして、ルートにHTMLファイルを用意し、以下のように記述します。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>Echo</title>
<script type="text/javascript" src="./js/Core.js"></script>
<script type="text/javascript" src="./js/Core.Web.js"></script>
<script type="text/javascript" src="./js/Application.js"></script>
<script type="text/javascript" src="./js/Render.js"></script>
<script type="text/javascript" src="./js/Sync.js"></script>
<script type="text/javascript" src="./js/Sync.ArrayContainer.js"></script>
<script type="text/javascript" src="./js/Sync.ContentPane.js"></script>
<script type="text/javascript" src="./js/Sync.Label.js"></script>
<script type="text/javascript" src="./js/Serial.js"></script>
<script type="text/javascript" src="./js/Client.js"></script>
<script type="text/javascript" src="./js/FreeClient.js"></script>
<script type="text/javascript">
<!--
HeloApp = Core.extend(Echo.Application, {
$construct: function() {
Echo.Application.call(this);
var column = new Echo.Column();
var label = new Echo.Label({
text: "Echo Framework."
});
label.set("font", {
typeface: ["Arial"],
size: 18,
bold: true
});
column.add(label);
var msg = new Echo.Label({
text: "これは、Clientサイドで作成したWebページです。"
});
msg.set("font", {
typeface: ["Arial"],
size: 12
});
column.add(msg);
this.rootComponent.add(column);
this.rootComponent.set("height","100px");
this.rootComponent.set("background","#EEFFFF");
}
});
init = function() {
var app = new HeloApp();
var client = new Echo.FreeClient(app, document.getElementById("rootArea"));
client.init();
};
//-->
</script>
</head>
<body onload="init();" style="background-color:#CCFFFF">
<div id="rootArea"></div>
</body>
</html>
図3 ブラウザから/HTMLファイルにアクセスすると、このように表示される。
作成したら、WebブラウザからHTMLファイルにアクセスをしてみましょう。先ほどと同じように、複数のテキストの配置されたWebページが表示されます。ソースコードを見れば、ボディには<div>タグ1つしかないことが分かります。画面の表示が、EchoのJavaScriptによって実現されていることがよく分かるでしょう。
本連載はJavaプログラマのためのものなので、ここでのJavaScriptのコードについて詳しい説明は行いませんが、「HeloApp」というオブジェクトを作成し、この中でEcho.ColumnやEcho.Labelといったオブジェクトを作って組み込んでいることはおぼろげにも分かることでしょう。JavaとJavaScriptは文法が違いますから同じコードにはなりませんが、JavaScriptのオブジェクト指向を利用して、Javaのコードとほぼ同じような形でオブジェクトを作成し組み込んでいることは想像つくのではないでしょうか。
