OpenLaszloのプログラミングと標準コントロール

第2回

2009/04/02 14:00

ポスト

ボタン

　ボタンコントロールです。button、basebuttonタグを使用します。標準のボタンはシルバーの四角形のボタンです。ボタンのイメージを準備してボタンにすることもできます。

サンプルソース

<?xml version="1.0" encoding="UTF-8"?>
<canvas>

  <!-- ボタンイメージの定義 -->
  <resource name="BUTTON_PNG">
    <!-- 通常のイメージ -->
    <frame src="./button_normal.png"/>
    <!-- マウスオーバーのイメージ -->
    <frame src="./button_over.png"/>
    <!-- マウスダウンのイメージ -->
    <frame src="./button_down.png"/>
  </resource>

  <!-- 標準ボタン -->
  <button font    ="MS UI Gothic"
          fontsize="50"
          bgcolor ="blue">Hello World</button>

  <!-- イメージボタン -->
  <basebutton resource="BUTTON_PNG">Hello World</basebutton>

  <simplelayout spacing="10"/>

</canvas>

サンプルソースを実行した結果

リストボックス・コンボボックス

　リスト状のアイテムから1つ以上のアイテムを選択するコントロールです。list、comboboxタグを使用します。

　アイテムを初期化する方法は３種類あります。

アイテムをtextlistitemタグで最初からセットして初期化する方法
アイテムをJavaScriptで動的にセットする方法
アイテムをサーバーサイド（jsp、phpなど）からXMLで取得してセットする方法

サンプルソース

<?xml version="1.0" encoding="UTF-8"?>
<canvas>

  <!-- アイテムを最初からセットしておく-->
  <list>
    <textlistitem text="item-1" value="1" selected="true"/>
    <textlistitem text="item-2" value="2"/>
    <textlistitem text="item-3" value="3"/>
  </list>

  <!-- アイテムを初期化のときにJavaScriptでセット -->
  <list>
    <handler name="oninit">
    <![CDATA[
      //リストボックスの初期化イベントでアイテムをセット
      this.addItem('item-1', '1');
      this.addItem('item-2', '2');
      this.addItem('item-3', '3');
    ]]>
    </handler>
  </list>

  <!-- アイテムをサーバーサイドからXMLで取得してセット -->
  <dataset name   ="dsItems"
           request="true"
           src    ="http://localhost:8080/lps-4.2.0.1/my-apps/getItems.jsp"/>
  <list>
    <textlistitem datapath="dsItems:/BODY/item"
                  text    ="$path{'text()'}"
                  value   ="$path{'@value'}"/>
  </list>

  <!-- コンボボックスもリストボックスと同様にアイテムを初期化できます -->
  <combobox>
    <textlistitem text="item-1" value="1" selected="true"/>
    <textlistitem text="item-2" value="2"/>
    <textlistitem text="item-3" value="3"/>
  </combobox>

  <simplelayout spacing="10"/>

</canvas>

getItems.jspのソース

<%@ page pageEncoding="UTF-8"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%
  out.println("<BODY>");
  out.println("<item value=\"1\">item-1</item>");
  out.println("<item value=\"2\">item-2</item>");
  out.println("<item value=\"3\">item-3</item>");
  out.println("</BODY>");
%>

サンプルソースを実行した結果

ウインドウ

　ドラッグ&ドロップ、リサイズ可能なウインドウコントロールです。windowpanel、window、modaldialogタグを使用します。

サンプルソース

<?xml version="1.0" encoding="UTF-8"?>
<canvas fontsize="15"
        font    ="MS UI Gothic">

  <window width="350" height="250" title="ログイン認証">
    <text x="50" y="40">ユーザーID：</text>
    <edittext x="140" y="40" text_y="3"/>

    <text x="50" y="80">パスワード：</text>
    <edittext x="140" y="80" text_y="3" password="true"/>

    <button x="80" y="150" text="ログイン"/>
    <button x="180" y="150" text="クリア"/>
  </window>

</canvas>

サンプルソースを実行した結果

レイアウト

　コントロールを画面に配置する位置を決定する方法として、X座標とY座標を直接指定する方法と、レイアウトを制御するタグを使用する方法があります。

X座標とY座標を直接指定して画面に配置するサンプルソース

<?xml version="1.0" encoding="UTF-8"?>
<canvas fontsize="20"
        font    ="MS UI Gothic">

  <text x="0" y="0">あいうえお</text>
  <text x="0" y="54">かきくけこ</text>
  <text x="0" y="108">さしすせお</text>

</canvas>

simplelayoutタグを使って画面に配置するサンプルソース

<?xml version="1.0" encoding="UTF-8"?>
<canvas fontsize="20"
        font    ="MS UI Gothic">

  <text>あいうえお</text>
  <text>かきくけこ</text>
  <text>さしすせお</text>

  <!-- 縦方向に間隔を30ピクセル空けて配置する -->
  <simplelayout axis="y" spacing="30"/>
  
</canvas>

サンプルソースを実行した結果（上記の2つのサンプルソースの結果は同じです）

　layoutタグを継承して独自のレイアウトタグを作成することができます。JavaScriptでレイアウトを制御するロジックを記述することができます。複雑なレイアウトを行う必要がある場合に便利です。

独自のレイアウトタグを使って画面に配置するサンプルソース

<?xml version="1.0" encoding="UTF-8"?>
<canvas fontsize="20"
        font    ="MS UI Gothic">

  <!-- layoutタグを継承した独自のレイアウトタグ -->
  <class name   ="MyLayout"
         extends="layout">

    <method name="init">
    <![CDATA[
      super.init();
      //画面サイズが変わったらupdateメソッドが呼ばれるようにする
      this.updateDelegate.register(this.parent, 'onwidth');
    ]]>
    </method>

    <!-- レイアウトが必要なときに呼ばれメソッド -->
    <method name="update">
    <![CDATA[
      //X座標を画面の中央にする
      parent.txtA.setAttribute('x', (immediateparent.width - parent.txtA.width) / 2);
      parent.txtA.setAttribute('y', 0);

      //X座標を画面の中央にする
      parent.txtB.setAttribute('x', (immediateparent.width - parent.txtB.width) / 2);
      parent.txtB.setAttribute('y', 54);

      //X座標を画面の中央にする
      parent.txtC.setAttribute('x', (immediateparent.width - parent.txtC.width) / 2);
      parent.txtC.setAttribute('y', 108);
    ]]>
    </method>

  </class>

  <text name="txtA">あいうえお</text>
  <text name="txtB">かきくけこ</text>
  <text name="txtC">さしすせお</text>

  <MyLayout/>

</canvas>

サンプルソースを実行した結果

まとめ

　今回は、JavaScriptによるプログラミングの方法やOpenLaszloの標準コントロールについて説明しました。OpenLaszloには他にも多数のコントロールが標準で実装されています。本文中にも述べましたがLaszlo-explorerで標準コントロールのデモが見られますので、ぜひ触ってみてください。

　次回は、OpenLaszloとサーバーサイドとの連携の仕方について説明する予定です。

この記事は参考になりましたか？

印刷用を表示

ポスト

OpenLaszlo（オープンラズロ）をはじめよう連載記事一覧: OpenLaszloでDHTML（Ajax）コンテンツの作成

OpenLaszloでmixiアプリの開発

OpenLaszloでGoogleマップを使う

もっと読む

この記事の著者: 株式会社ドゥアイネット　前田慎治（マエダシンジ）

株式会社ドゥアイネットに勤務するプログラマーです。制御系から事務系まで様々な開発を経験し、現在はCurlやOpenLaszloを使ってRIAの開発を担当しています。OpenLaszloで開発した「スマートスケジューラー」http://www.dinss.jp/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事