ボタン
ボタンコントロールです。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>
![サンプルソースを実行した結果](http://cz-cdn.shoeisha.jp/static/images/article/3689/004.gif)
リストボックス・コンボボックス
リスト状のアイテムから1つ以上のアイテムを選択するコントロールです。list、comboboxタグを使用します。
アイテムを初期化する方法は3種類あります。
- アイテムを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>
<%@ 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>"); %>
![サンプルソースを実行した結果](http://cz-cdn.shoeisha.jp/static/images/article/3689/005.gif)
ウインドウ
ドラッグ&ドロップ、リサイズ可能なウインドウコントロールです。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>
![サンプルソースを実行した結果](http://cz-cdn.shoeisha.jp/static/images/article/3689/006.gif)
レイアウト
コントロールを画面に配置する位置を決定する方法として、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>
<?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つのサンプルソースの結果は同じです)](http://cz-cdn.shoeisha.jp/static/images/article/3689/007.gif)
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>
![サンプルソースを実行した結果](http://cz-cdn.shoeisha.jp/static/images/article/3689/008.gif)
まとめ
今回は、JavaScriptによるプログラミングの方法やOpenLaszloの標準コントロールについて説明しました。OpenLaszloには他にも多数のコントロールが標準で実装されています。本文中にも述べましたがLaszlo-explorerで標準コントロールのデモが見られますので、ぜひ触ってみてください。
次回は、OpenLaszloとサーバーサイドとの連携の仕方について説明する予定です。