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

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のような表示になります。

入力フォームを利用する

続いてテキストフィールドとボタンなどによる入力フォームを作ってみましょう。テキストフィールドはEcho.TextFieldクラス、ボタンはEcho.Buttonクラスで作成します。それぞれSync.TextComponent.jsとSync.Button.jsを読み込んでおく必要があります。

ボタンが押された際の処理は、Buttonオブジェクトに対してaddListener()メソッドでリスナを登録することによって定義します。例えば、次のように記述すると「Hello!」と書いたアラートが表示されます。

var button = new Echo.Button( ...  );
// リスナを追加
button.addListener("action", function(e) {
        alert("Hello!");
      });

今回は、テキストフィールドから入力された文字列をラベルで表示するようなフォームを作ってみます。次のようなコードになります。

<!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" src="./echo/Sync.TextComponent.js"></script>
    <script type="text/javascript" src="./echo/Sync.Button.js"></script>
    
    <script type="text/javascript">
      TextInputApp = Core.extend(Echo.Application, {
        $construct: function() {
          Echo.Application.call(this);
          
          // ContentPaneを作成
          var contentPane = new Echo.ContentPane();
          contentPane.set("insets", 20);
          this.rootComponent.add(contentPane);
          
          // Columnレイアウトコンポーネントを作成
          var column = new Echo.Column();
          contentPane.add(column);
          
          // 入力フィールドを配置
          var fieldLabel = new Echo.Label({
            text: "メッセージを入力してください："
          });
          column.add(fieldLabel);
          var field = new Echo.TextField({
            width: 300
          });
          column.add(field);
          
          // ボタンを配置
          var button = new Echo.Button({
            width: 50, 
            background: "#a0a0a0", 
            text: "入力"
          });
          button.set("border", "2px solid #000000");
          column.add(button);
          
          // ラベルを作成してフォントを設定
          var messageLabel = new Echo.Label({
              text: "『』"
          });
          messageLabel.set("font", {
                typeface: ["Serif"],
                size: 24,
                bold: false
          });
          
          // ボタンにリスナを追加
          button.addListener("action", function(e) {
            var inputText = field.get("text");
            messageLabel.set("text", "『" + inputText + "』");
          });

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

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

Echo.ContentPaneやEcho.Columnなどのクラスは、Java APIの場合と同様に、他のコンポーネントのコンテナとなるコンポーネントです。今回は、縦にコンポーネントを並べるColumnに、ラベルとテキストフィールド、ボタンをそれぞれ配置しています。ボタンのリスナでは、テキストフィールドのtextプロパティの値（これが入力された文字列）をget()メソッドで取得し、それをLabelのset()メソッドを使って表示しています。

Webブラウザからアクセスすると、最初に図2のようにテキストフィールドとボタンが表示され、メッセージを入力してボタンをクリックすれば図2のように入力した内容がページに反映されます。

前回のサンプルの実行結果と比べると、サーバサイドのJavaで構築したものとほぼ同じ見た目になっていることがわかります。ただし、コンポーネントのデフォルトの見た目がシンプルなので、それらしいデザインにするには大幅なカスタマイズが必要なのは残念なところです。見た目に不満があるという方は、拡張コンポーネントなどが使える「Echo3 Extras」や、サードパーティ製のアドオンなども提供されているので、こちらも試してみるといいでしょう。