本格派エンジニアの工具箱

第12回 Echo Web FrameworkのクライアントサイドAPIによるWebアプリケーションの作成

この記事を読むのに必要な時間:およそ 5.5 分

JavaScriptによるWebアプリケーションの作成

前回は,軽量WebアプリケーションフレームワークのひとつであるEcho Web Framework⁠以下,Echo)について,サーバサイドのJava用APIを利用してWebアプリケーションを作成する方法を解説しました。EchoのサーバサイドAPIを利用した場合,HTMLを一切記述することなく,JavaプログラムだけでWebサイトのUIが構築できます。

その一方で,EchoにはJavaScriptによるクライアントサイド用のAPIも用意されています。これを利用した場合,今度はサーバ側のプログラムを一切記述することなく,JavaScriptと最小限のHTMLだけでUIが構築できます。サーバサイド/クライアントサイドで,それぞれ個別に,同等のUIを実現するAPIを備えているというのがEchoの特徴なのです。今回はクライアントサイドのJavaScriptを利用したアプリケーションの作成方法を解説します。

JavaScript用のライブラリは,配布ファイル中の「JavaScriptLibraries」フォルダにあります。このフォルダにあるすべてのファイルを,WebアプリケーションのJavaScriptまたはHTMLファイルからアクセスできる場所にコピーしましょう。今回はHTMLファイルと同じ階層に「echo」ディレクトリを作り,そこに配置することにします。

HTMLファイルでは,これらのJavaScriptファイルのうち必要なものをscriptタグで読み込んでおきます。次のような具合です。

<script type="text/javascript" src="./echo/Core.js"></script>
<script type="text/javascript" src="./echo/Core.Web.js"></script>
<script type="text/javascript" src="./echo/Application.js"></script>
<script type="text/javascript" src="./echo/Render.js"></script>
<script type="text/javascript" src="./echo/Client.js"></script>
<script type="text/javascript" src="./echo/Serial.js"></script>
<script type="text/javascript" src="./echo/FreeClient.js"></script>
<script type="text/javascript" src="./echo/Sync.js"></script>
<script type="text/javascript" src="./echo/Sync.ArrayContainer.js"></script>
<script type="text/javascript" src="./echo/Sync.ContentPane.js"></script>
<script type="text/javascript" src="./echo/Sync.Label.js"></script>

Sync.XXXX.jsは利用可能なコンポーネントが定義されたファイルです。ラベルコンポーネントを表すEcho.Labelクラスを使う場合にはSync.Label.jsが,Echo.TextFieldなどのテキストコンポーネントを使う場合にはSync.TextComponent.jsなどが必要になります。

続いてJavaScriptコードを書いていきましょう。まずは前回同様,ページに「Hello Echo3!」と表示するだけのHelloEchoクラスを作ってみます。基本的なコードの形は以下のようになります。

<script type="text/javascript">
  HelloEcho = Core.extend(Echo.Application, {
    $construct: function() {
	Echo.Application.call(this);
        
	// ここにUIを構築するコードを書く
  });

  // 初期化(HelloEchoの構築)
  init = function() {
    var app = new HelloEcho();
    var client = new Echo.FreeClient
            (app, document.getElementById("contentsArea"));
    client.init();
  };
</script>

Core.extend()メソッドを利用してHelloEchoを定義し,それをEcho.FreeClientクラスを使ってページコンテンツとして貼り付ける形です。UIコンポーネントの構築ですが,Labelコンポーネントであれば次のようにしてオブジェクトを生成できます。

var label = new Echo.Label({
  text: "Hello, Echo3!"
});

Labelクラスにはtextプロパティの値を設定するためのsetText()というメソッドが用意されているので,上のコードは次のように書くこともできます。

var label = new Echo.Label();
label.setText("Hello, Echo3!");

また,すべてのコンポーネントの親クラスであるComponentクラスには汎用的にプロパティを設定するためのset()メソッドが用意されている。これを利用すれば,上のコードは次のようにも書けます。

var label = new Echo.Label();
label.set("text", "Hello, Echo3!");

その他,コンポーネントクラスの使い方の詳細はAPIドキュメントを参照してください。以下に,今回作成したHTMLを含むコード全体を示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Echo Framworkのサンプル</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- Echo FrameworkによるJavaScriptライブラリの読込み -->
    <script type="text/javascript" src="./echo/Core.js"></script>
    <script type="text/javascript" src="./echo/Core.Web.js"></script>
    <script type="text/javascript" src="./echo/Application.js"></script>
    <script type="text/javascript" src="./echo/Render.js"></script>
    <script type="text/javascript" src="./echo/Client.js"></script>
    <script type="text/javascript" src="./echo/Serial.js"></script>
    <script type="text/javascript" src="./echo/FreeClient.js"></script>
    <script type="text/javascript" src="./echo/Sync.js"></script>
    <script type="text/javascript" src="./echo/Sync.ArrayContainer.js"></script>
    <script type="text/javascript" src="./echo/Sync.ContentPane.js"></script>
    <script type="text/javascript" src="./echo/Sync.Label.js"></script>
    
    <script type="text/javascript">
      HelloEcho = Core.extend(Echo.Application, {
        $construct: function() {
          Echo.Application.call(this);
          
          // ラベルを作成してフォントを設定
          var label = new Echo.Label({
              text: "Hello, Echo3!"
          });
          label.set("font", {
                typeface: ["Serif"],
                size: 36,
                bold: false
          });

          // ラベルを配置
          this.rootComponent.add(label);
        }
      });
      
      // 初期化(HelloEchoの構築)
      init = function() {
        var app = new HelloEcho();
        var client = new Echo.FreeClient
              (app, document.getElementById("contentsArea"));
        client.init();
      };
    </script>
  </head>

  <body onload="init();">
    <div id="contentsArea">
      <!-- ここにEchoで生成したコンテンツが配置される。 -->
    </div>
  </body>
</html>

this.rootComponentはデフォルトのルートコンポーネントで,今回はこれに対してadd()メソッドを使ってラベルを追加しています。bodyタグにはonload属性でinit()メソッドを実行するように指定してあります。作成したコンテンツは,⁠contentsArea」のIDを付けた場所に挿入されます。このIDはEcho.FreeClientクラスのコンストラクタで指定しているものです。

このファイルをWebサーバにデプロイしてWebブラウザからアクセスすると,図1のような表示になります。

図1 EchoのJavaScript APIで作成したWebページの例

図1 EchoのJavaScript APIで作成したWebページの例

著者プロフィール

杉山貴章(すぎやまたかあき)

ONGS Inc.所属のプログラマ兼テクニカルライター。雑誌,書籍,Webメディアで多数の著作をもつ。

著書

コメント

コメントの記入