レイアウト定義XML

マスカットにおける画面の描画単位である「レイアウト」を定義するための XML 文書です。画面に配置する GUI オブジェクトのコンポジット構造を XML タグの親子関係に対応付けて記述します。

記述可能なタグ一覧

ルート要素に layoutDef タグ、その子要素として layout タグをそれぞれ 1 つずつ記述します。layout タグの内部には、部品ライブラリが提供するタグを用いて GUI オブジェクトを配置していきます。

<?xml version="1.0" encoding="UTF-8"?>
<layoutDef>
  <layout name="layout">
    <!-- ここに GUI オブジェクトのためのタグを記述する -->
  </layout>
</layoutDef>

レイアウト定義 XML で共通的に利用可能なタグは以下の通りです。

部品ライブラリ

部品ライブラリはレイアウト定義 XML に記述可能なタグを追加するための拡張メカニズムであり、JSP におけるタグライブラリの概念とよく似ています。部品ライブラリを利用すると、サードパーティ製の Ajax ツールキットや JavaScript ライブラリの持つ機能をマスカットに取り込むことができます。

マスカットプロジェクトでは以下の部品ライブラリを開発しており、マスカットフレームワークに同梱して提供しています。

部品ライブラリのための拡張 API は JavaScript プログラマ向けに解放されているため、アプリケーション開発者がプロジェクト独自の目的のために部品ライブラリを追加することも可能です。

記述例

簡単な検索画面を表示するためのレイアウト定義 XML を以下に示します。この例では Rialto 部品ライブラリ が提供するタグを使用しています。

  • スクリーンショット
    layout-example.png
  • レイアウト定義 XML
      1
      2
      3
      4
      5
      6
      7
      8
      9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
    
    <?xml version="1.0" encoding="UTF-8"?>
    <layoutDef>
      <layout name="searchLayout">
        <popup name="searchPopup" left="12" top="12" width="433"
          height="133" title="検索ダイアログ" visible="true">
          <label name="searchLabel" left="10" top="10" text="文字列:" />
          <text name="searchText" left="59" top="11" width="229" />
          <frame name="optionFrame" left="11" top="47" width="169"
            height="73" title="オプション">
            <checkbox name="matchCaseCheckbox" left="11" top="11"
              text="大/小文字を区別する" />
            <checkbox name="matchOnlyWholeWordCheckBox" left="11" top="35"
              text="単語単位で探す" />
          </frame>
          <frame name="directionFrame" left="191" top="47" width="97"
            height="73" title="検索方向">
            <radio name="backwardRadio" left="11" top="11" text="上へ" />
            <radio name="forwardRadio" left="11" top="35" text="下へ" />
          </frame>
          <button name="searchButton" left="311" top="11" width="88"
            widthMin="88" title="検索" />
          <button name="cancelButton" left="311" top="35" width="88"
            widthMin="88" title="キャンセル" />
        </popup>
      </layout>
    </layoutDef>