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

第2回

標準コントロール

　OpenLaszloに標準で実装されているコントロールについて代表的なものを紹介していきます。コントロールの詳細なデモはLaszlo-explorerでみることができます。

Laszlo-explorer

ラベル

　文字を表示するコントロールです。textタグを使用します。フォント種類、フォントサイズ、フォント色などを指定できます。HTMLタグを使用してイメージの表示、文字の装飾もできます。

　以下のHTMLタグを使用することができます。

• <a> ハイパーリンクを作成
• <b> テキストをボールドで表示
• <font> フォントの指定
• <i> テキストをイタリックで表示
• <p> 段落を作成
• <u> テキストに下線を引く
• <img> 画像ファイル（JPEG、GIF、PNG）、SWFファイルを埋め込む

サンプルソース

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

  <!-- フォント種類はMS UI Gothic
       フォントサイズは50ポイント
       フォント色は赤
       背景色は青 -->
  <text font    ="MS UI Gothic"
        fontsize="50"
        fgcolor ="red"
        bgcolor ="blue">Hello World</text>

  <!-- HTMLタグ使用 -->
  <text multiline="true">
    <img src="laszlo.png"/>
    <font face="MS UI Gothic" color="#ff0000" size="30">
      <b>太字</b><br/>
      <u>下線</u><br/>
      <i>イタリック</i>
    </font>
  </text>

  <simplelayout spacing="10"/>

</canvas>

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

テキストボックス

　文字が入力できるコントロールです。inputtext、edittextタグを使用します。multiline属性をtrueにすると複数行の入力ができます。password属性をtrueにすると入力したものがアスタリスク（'*'）で表示されます。

サンプルソース

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

  <!-- 単一行のテキストボックス -->
  <inputtext font    ="MS UI Gothic"
             fontsize="20"
             fgcolor ="red">あいうえお</inputtext>

  <!-- 枠がある単一行のテキストボックス -->
  <edittext font    ="MS UI Gothic"
            fontsize="20"
            fgcolor ="red">あいうえお</edittext>

  <!-- 複数行入力できるテキストボックス -->
  <edittext font     ="MS UI Gothic"
            fontsize ="20"
            fgcolor  ="red"
            multiline="true"
            height   ="50">あいうえお<br/>かきくけこ</edittext>

  <!-- 入力した文字がアスタリスク('*')で表示されるテキストボックス -->
  <edittext font    ="MS UI Gothic"
            fontsize="20"
            fgcolor ="red"
            password="true">passwd</edittext>

  <simplelayout spacing="5"/>

</canvas>

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