Open Laszloを使って作るリッチクライアント（3）
Open Laszloのイベントコンポーネントを
カスタマイズする


 浅野守
2005/6/7
本連載ではオープンソースのリッチクライアント製品として注目を集める「Open Laszlo」を解説している。Laszloはサーバサイドで生成したコンテンツをFlashとしてクライアントのWebブラウザに配信するもので、Macromedia社のFlexと非常によく似たアーキテクチャを採用。前回「オープンソースのリッチクライアントを使おう」、「Open Laszloで日本語を表示してみよう」の記事で日本語化できた読者はイベントコンポーネントをカスタマイズしてみよう。

■ イベント処理（続き）

　前回（参照：Open Laszloで日本語を表示してみよう）のイベント処理では、イベントハンドラーの簡単な例を紹介しました。

　前回のリスト1を見ても分かるように、OpenLaszloのイベント処理の記述方法はJavaScriptのイベントハンドラーに似た形式と、メソッド自体をインスタンス（viewやbuttonなどのオブジェクト）のイベントハンドラーとして記述する方法があります。

　例えば、　以下のコードでは、view の onclickイベントハンドラーとしてdoClick()メソッドが呼び出されますが、これは、JavaScriptのイベントハンドラーの記述方法とそっくりです。

<canvas>
    <view onclick="doClick()">
       <method name="doClick">
         <!-- do something -->
       </method>
    </view>
</canvas>

　

　これとは別に最初からメソッドをイベントハンドラーとして記述することが可能です。下記のコードではメソッドをあらかじめ特定のイベントonclickのイベントハンドラーとして定義しています。

<canvas>
    <view>
       <method event="onclick">
         <!-- do something -->
       </method>
    </view>
</canvas>

・ 基本イベント

　buttonコンポーネントに対するonclickイベントの存在は容易に想像がつきますが、ではこのほかにはどんなイベントがあるのでしょうか。各コンポーネントがサポートしているイベントはLZX Reference Manualに記述されています。LZX Reference ManualはOpenLaszlo explorerのサイドバーにあるDocumentationメニューから表示することができます。


・ onイベント

　コンポーネントの属性値が変化するとOpenLaszloはON＋属性名イベントを発生させます。例えば、windowコンポーネントのx属性値が変化すると（つまりwindowがx軸に移動すると）onxイベントが発生します。

<canvas width="200">
  <window height="100" width="150">
    <method event="onx">
      this.setAttribute("title", "Moved!");
    </method>
  </window>
</canvas>

　上記のコードでは、window を移動するとイベントハンドラーが呼び出されwindowのタイトルが変更されます。

・ イベントの発生

　前項1.2では、setAttribute()で属性値を変更することでonイベントが自動的に発生していましたが、sendEvent()を使用することで任意のタイミングでイベントを発生させることができます。これはカスタムコンポーネントを作成するときに重要となります。

<canvas width="200">
  <window height="100" widht="150">
    <attribute name="windowtitle" type="number"/>
    <method event="onx">
      this.windowtitle = "Moved!";
     this.onwindowtitle.sendEvent();
    </method>
    <method event="onwindowtitle">
      this.aetAttribute("title",
                        this.getAttribute("windowtitle"));
    </method>
  </window>
</canvas>

　上記のコードではwindowtitle属性に直接値を設定して、sendEvent()で明示的にイベントを発生させています。

　これで、OpenLaszloでもJavaScript同様にイベントハンドラーによってイベント発生時の振る舞いを記述できることを理解していただけたと思います。

・　スクリプト

　LZXではアプリケーションの処理を、 <script> タグおよび <method> タグで囲んだ部分に、JavaScript互換のスクリプトで記述します。下記のコードは、LZXに組み込まれているデバッグ用のウィンドウを利用したスクリプトの書き方の簡単なサンプルです。

<canvas width="500" height="200" debug="true">
  <script>
    Debug.write("Hello, World!");
  </script>
</canvas>


　スクリプトの記述で気を付けなくてはいけないのは、XMLのタグの記述で使用される < や > を使用する場合です。その場合は、&lt;や &gt;を使用するか、スクリプトを <![CDATA[ と ]]> で囲む必要があります。

<canvas height="150" debug="true">
  <script>
    for (var i = 0; i &lt; 5; i++)
    {
      Debug.write(i);
    }
  </script>
</canvas>

<canvas height="150" debug="true">
  <script>
    <![CDATA[
    for (var i = 0; i < 5; i++)
    {
      Debug.write(i);
    }
    ]]>
  </script>
</canvas>

　<script> タグや <method> タグで囲んで記述するほかに、JavaScript同様イベントハンドラーとして直接スクリプトを記述することができます。

<canvas height="150" width="150>
  <window title="Not clicked yet." width="150">
    <button text="click me!"
      onclick="this.parent.setAttribute('title', 'Clicked!')"/>
  </window>
</canvas>

■基本コンポーネント

　これまでの説明で <canvas> <window> <button> といったコンポーネントを使用してきました。次は、OpenLaszloがあらかじめ用意しているコンポーネントのスクリーンショットを紹介したいと思います。スクリーンショットを見ていただければ、どういったコンポーネントがあらかじめ用意されているかを感覚的につかめると思います。

・alert


・button

・checkbox
・combobox
(編集不可）
（編集可）


・datepicker


・edittext


・floatinglist


・form


・grid


・gridcolumn


・gridtext


・hscrollbar


・list


・listitem


・menu


・menubar


・menuitem

・menuseparator

・modaldialog

・radiobutton
・radiogroup

・scrollbar

・simpleinputtext

・slider

・statictext

・tab

・tabelement
・tabslider

・tabpane

・tabs

・tabsbar

・tabscontent

・textlistitem

・tree

・vscrollbar

・window

・windowpanel

　以上で、Laszloのイベントコンポーネントのカスタマイズ方法を説明しました。次回はLaszloアプリケーションを記述するXMLとJavaScriptをベースとしたオブジェクト指向言語のLZXのクラスを定義してコードを再利用する方法や、既存のクラスを拡張する方法を解説します。

　なお、前回の記事「Open Laszloで日本語を表示してみよう」掲載以降、OpenLaszlo 3.0がリリースされました（参照記事：オープンソースがRIA市場の起爆剤となる、ラズロCEO）。機能的にはベータ2と大きく変わらないようですが、アーキテクチャのネーミングが若干変更されてドキュメントの整理もベータのころよりは進んでいるようです。

　今回は、MacOSX上にインストールしたOpenLaszloを使用してスクリーンショットのキャプチャーや動作確認を行っています。OS Xにインストールしたところインストールエラーが発生してしまったので、OS Xをお使いの方でインストールに失敗したという方は、次の操作を試してみてください。

  • openlaszlo-3.0-osx-dev-install.pkgをCtrl＋クリックしてコンテキストメニューを表示し、「パッケージの内容を表示」を選択する。
  • Contentsフォルダが表示されるのでContentsフォルダを開く。
  • Resourceフォルダが表示されるのでResourceフォルダを開く。
  • postflightというファイルを選択してCtrl＋クリックでコンテキストメニューを表示し、「情報を見る」を選択する。
  • ターミナルアプリケーションを起動し、表示された情報ダイアログの場所フィールドにあるディレクトリへチェンジディレクトリする。
  • chmod u＋x postflight コマンドを実行して、postflihgtに実行許可を与える。





HTML5 + UX フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

HTML5＋UX 記事ランキング

本日 月間
＠IT