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

第10回 OpenLaszloで使えるコンポーネントいろいろ

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

<grid>

いわゆる表ですが,データパスのデータを表示するのが前提のコンポーネントです。

リスト11ではよく使う属性を全部使っています。<grid>については,shownitemsはデフォルト表示項目数,showvlinesは縦罫線の表示,showhlinesは横罫線の表示,bgcolor0とbgcolor1は偶数行と奇数行で色分け,といった属性をよく使います。

グリッド中で文字列を表示する<gridtext>については,textalignは文字列の位置指定,datatypeはデータタイプの指定。datatypeは数値データの場合numberに設定するとソートしたときに数値順に並びます。

<gridcolumn>は文字列だけでなく他のコンポーネントを含めることができます。リスト11では<view>を入れ,売上数値がそのまま幅になって,グラフになっています。売上数値をクリックして数値を変更するとグラフもリアルタイムで変わるので,試してみてください。

リスト11

<canvas proxied="false" bgcolor="0xffffcc">
  <dataset name="ds" >
    <root>
      <data data1="250" data2="りんご"/>
      <data data1="50" data2="いちご"/>
      <data data1="30" data2="みかん"/>
      <data data1="220" data2="ぶどう"/>
      <data data1="200" data2="かき"/>
      <data data1="60" data2="もも"/>
      <data data1="70" data2="さくらんぼ"/>
      <data data1="150" data2="なし"/>
      <data data1="100" data2="すいか"/>
    </root>
  </dataset>
  <grid datapath="ds:/root" width="400"
      shownitems="5" 
      showvlines="true"
      showhlines="true"
      bgcolor0="0xffffdd"
      bgcolor1="0xffdddd"  >
    <gridtext name="d" datapath="position()" textalign="right">連番</gridtext>
    <gridcolumn width="200">売上グラフ
      <view>
        <view y="8" width="$path{'@data1'}" height="10" bgcolor="0x6666ff" />
      </view>
    </gridcolumn>
    <gridtext datapath="@data1" datatype="number">売上</gridtext>
    <gridtext datapath="@data2">商品</gridtext>
  </grid> 
</canvas>

リスト11サンプル

<list>

ボックス形式の選択肢リストコンポーネントです。コーディングは<combobox>に似ています。デフォルトではなにも選ばれていないのでvalue値はnullになります。

リスト12

<canvas proxied="false" bgcolor="0xffffcc"> 
  <simplelayout spacing="30" axis="x"/>
  <list id="lst" width="130" shownitems="5">
    <textlistitem text="黒" value="'くろ'"/>
    <textlistitem text="赤" value="'あか'"/>
    <textlistitem text="青" value="'あお'"/>
    <textlistitem text="白" value="'しろ'"/>
    <textlistitem text="緑" value="'みどり'"/>
    <textlistitem text="紫" value="'むらさき'"/>
    <textlistitem text="黄" value="'き'"/>
  </list>
  <text text="${lst.value}"/>
</canvas>

リスト12サンプル

<tree>

ツリー形式にデータを表示するコンポーネントです。ツリー用のコンポーネントはすべて<tree>ですが,ファイルシステムでいうフォルダ/ファイルの区別をisleaf属性でします。isleaf="false"(デフォルト)にすると,フォルダのような形になります。

リスト13

<canvas proxied="false" bgcolor="0xffffcc"> 
  <include href="lz/tree.lzx"/>
  <tree open="true" text="サイトマップ">
    <tree open="true" text="会社情報">
      <tree text="会社概要" isleaf="true"/>
      <tree text="事業内容" isleaf="true"/>
      <tree text="沿革" isleaf="true"/>
      <tree text="アクセス" isleaf="true"/>
    </tree>
    <tree open="true" text="採用情報">
      <tree text="新卒採用" isleaf="true"/>
      <tree text="中途採用" isleaf="true"/>
    </tree>
  </tree>
</canvas>

リスト13サンプル

著者プロフィール

ason(あそん)

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

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