OpenLaszloでマルチデバイス対応RIAを作ろう

第3回 OpenLaslzoのプログラミング言語「LZX」の基本

この記事を読むのに必要な時間:およそ 3.5 分

LZXの基礎

LZXでは独自のタグを使用します。OpenLaszloのリファレンスを見ながら1つずつ習得する必要があります。いくつか基本的なものを簡単に紹介します。

※OpenLaszloリファレンスはダウンロードした中に入っており,ローカルの http://localhost:8080/openlaszlo-4.9.0/docs/reference/index.html で閲覧可能です。OpenLaszlo本家サイトにも同じものがあります。

<canvas>

<canvas>はLZXの最上位に位置するルート要素のタグです。1つのアプリに1つだけ必要です。HTMLでいう<html>みたいなものですが,1つのアプリが複数のLZXファイルで構成される場合でも<canvas>は全ファイル中で1つだけ,というのがHTMLと違う点です。

※<canvas>のあるメインファイル以外のインクルード用のファイルのルート要素はすべて<library>になります。

<canvas>で指定できる属性のうち,よく使うものはproxied,bgcolor,width,heightです。これらはアプリ全体の設定になります。ただし幅と高さについては最終的に<embed>などHTMLで記述した範囲内になります。

表1 <canvas>の属性

proxiedプロキシモードにするかどうか。true:プロキシモード,false:SOLOモード。
bgcolorアプリの背景色。色は(0x)で始まる16進数表記。たとえば青だと0x0000ff。
widthアプリの幅。ピクセル数値あるいは%指定。
heightアプリの高さ。ピクセル数値あるいは%指定。
fontsizeアプリのデフォルトのフォントサイズ。

リスト10 <canvas>の例


<canvas proxied="false" bgcolor="0x0000ff" width="100%" height="50" fontsize="12"> 
	・・・
</canvas>

<text>

文字列を表示するタグです。

リスト11 <text>の例


<canvas proxied="false" bgcolor="0xffffcc"> 
  <text>こんにちは</text>
</canvas>

<button>

ボタンを表示するタグです。サンプルはボタンの表示だけですが,通常はonclickというイベントハンドラを設定してクリック時の動作を記述します。

リスト12 <button>の例


<canvas proxied="false" bgcolor="0xffffcc"> 
  <button>こんにちは</button>
</canvas>

<checkbox>

チェックボックスを表示するタグです。

リスト13 <checkbox>の例


<canvas proxied="false" bgcolor="0xffffcc"> 
  <checkbox>こんにちは</checkbox>
</canvas>

<radiobutton>

ラジオボタンを表示するタグです。ラジオボタンは複数の選択肢のうちどれか1つを選択するためのものなので1つだと機能しません。ラジオボタンを使うときは複数の<radiobutton>を<radiogroup>で囲みます。

リスト14 <radiobutton>の例


<canvas proxied="false" bgcolor="0xffffcc"> 
  <radiogroup>
    <radiobutton>こんにちは</radiobutton>
    <radiobutton>こんばんは</radiobutton>
  </radiogroup>
</canvas>

<view>

<view>はLZXの中でも基本中の基本のタグで,画面に表示されるすべてのタグのもとになっています。LZXはオブジェクト指向の設計になっており,あるタグの性質を継承して別のタグを作ることができます。既述の<canvas>,<text>,<button>,<checkbox>,<radiobutton>,などもすべて<view>を継承した作られたタグになります。つまりそれらは<view>の持つ性質(属性やメソッドなど)をすでに持っていることになります。

<view>には表示物に必要な色,幅,高さ,透明度,位置指定などの属性があります。<view>自体は四角の領域を表します。四角の領域を画面に表示させるにはリスト15のとおり幅(width⁠⁠,高さ(height⁠⁠,背景色(bgcolor)の指定が最低限必要です。

リスト15 <view>の例


<canvas proxied="false" bgcolor="0xffffcc"> 
  <view width="200" height="100" bgcolor="0xccccff">
	<button>ボタン</button>
  </view>
</canvas>

<window>

ドラッグアンドドロップで移動することが可能なウインドウです。リスト15の<view>を<window>に置き換えただけで単なる四角がウインドウに変わります。

リスト16 <window>の例


<canvas proxied="false" bgcolor="0xffffcc"> 
  <window width="200" height="100" bgcolor="0xccccff">
	<button>ボタン</button>
  </window>
</canvas>

もちろん<window>にはサイズ変更(resizable⁠⁠,クローズ(closeable⁠⁠,タイトル(title)などのウインドウらしい機能をつけるための属性が用意されています。

リスト17 <window>の属性


<canvas proxied="false" bgcolor="0xffffcc"> 
  <window width="200" height="100" bgcolor="0xccccff"
	resizable="true" closeable="true" title="ウインドウデモ">
	<button>ボタン</button>
  </window>
</canvas>

著者プロフィール

ason(あそん)

京都の在宅ITエンジニア。サーバやネットワーク系が得意。初めて触った言語はOpenLaszlo。現在WebプログラマとしてHTML,CSS,PHP,CMSに詳しくなってきたところ。デスメタルドラマー。

URL:http://xtter.openlaszlo-ason.com/