OpenLaszloアドバンスド・テクニック
OpenLaszloアドバンスド・テクニック(1) Page 3/3

EclipseプラグインでOpenLaszlo IDEを構築する

ネットエイト
小野 圭二
2006/4/4

リファレンスマニュアルの活用

 さて、前項でリファレンスマニュアルが出ましたので、ちょっと活用方法について説明しておきます。1ページの図1のLaszlo Explorerを開き、画面左のメニューから「Documentation」→「LZX Reference」をクリックするとオンラインマニュアルが起動します(図9)。

 左メニューの「Contents」は、前述したようにEclipseのパレットに対応しています。ただし、<text>や<inputtext>といった基本的なタグは「Components」とは別の「View Basics」にあります。ここで「View Basics」→「inputtext」を選択すると<inputtext>タグのリファレンスが表示されます(図10)。

図9 オンラインのリファレンスマニュアル
(画面をクリックすると拡大します)

図10 <inputtext>タグのリファレンス
(画面をクリックすると拡大します)

 このマニュアルのいいところは、マニュアルで実験できるところです。マニュアルにあるサンプルコード表示部の「edit」ボタンを押すと、サンプル実行画面が起動します(図11)。

図11 マニュアルからサンプルコードを編集・実行する
(画面をクリックすると拡大します)

 左画面がコード編集部になっていますので、ここでコードを編集し「Update」をクリックすることで、右画面に実行結果が表示されます。このように、LZXの各コンポーネントやタグを調べる際に、マニュアル上で実行できるのは結構ありがたいものです。

アプリケーション開発手法

 OpenLaszloアプリケーションは、<canvas></canvas>でくくられたものです。この中に、ライブラリや独自クラスをインクルードしていきます。ライブラリや独自クラスは外部ファイルとすることもできますが、この場合は<library></library>タグでくくる必要があります。Eclipseで新規にLaszlo Fileを作成する際、ファイル名を指定するダイアログボックスの「File Type」から「Canvas」と「Library」が選択できるようになっているのはそのためです。前項で作成したアプリケーションで試してみます。コードの<simplelayout..../>から<text..../>までを外部ファイルにしてみましょう。するとコードはリスト2、リスト3のようになります。

<?xml version="1.0" encoding="UTF-8" ?>
<library>
  <simplelayout axis="x" spacing="5"/>
  <inputtext bgcolor="red">
    <method event="ontext">
      var e = this.getText();
      Debug.write( "入力: " + e );
      t.setText( e );
    </method>
  </inputtext>
  <text name="t" bgcolor="yellow"/>
</library>
リスト2 外部ファイル化されたライブラリファイル(hellolib.lzx)

<?xml version="1.0" encoding="UTF-8" ?>
<canvas>
  <include href="hellolib.lzx"/>
</canvas>
リスト3 アプリケーションのメインファイル(hello.lzx)

 次に、<inputtext>を独自クラスにして外部ファイルにしてみましょう。この独自クラスは単純に「背景が赤いinputtext」です。

<?xml version="1.0" encoding="UTF-8" ?>
<library>
  <class name="myinput" extends="inputtext" bgcolor="red">
    <attribute name="textdata" type="string"/>
    <method event="ontext">
      var e = this.getText();
      Debug.write( "入力: " + e );
      e += " が入力されました";
      this.setAttribute( "textdata", e );
    </method>
  </class>
</library>
リスト4 inputtextクラスを継承した独自クラスライブラリファイル(helloInput.lzx)

<?xml version="1.0" encoding="UTF-8" ?>
<canvas>
  <include href="helloInput.lzx"/>
  <simplelayout axis="x" spacing="5"/>
  <myinput>
    <method event="ontext">
      t.setText( this.textdata );
    </method>
  </myinput>
  <text name="t" bgcolor="yellow" />
</canvas>
リスト5 アプリケーションのメインファイル(hello.lzx)

 このように、既存クラスの属性や振る舞いを継承した新たな独自クラスを作成して利用できます。(次回に続く)

  3/3  

 INDEX

OpenLaszloアドバンスド・テクニック(1)
 EclipseプラグインでOpenLaszlo IDEを構築する
  Page1
はじめに
OpenLaszloの近況
OpenLaszloのインストール
EclipseにOpenLaszlo用のプラグインをインストール
  Page2
プロジェクトの作成とプログラム作成
Page3
リファレンスマニュアルの活用
アプリケーション開発手法




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

注目のテーマ

HTML5+UX 記事ランキング

本日 月間