5.22 uji:gridLayout

uji:gridLayoutについて説明します。uji:gridLayoutには、以下の機能があります。

また、ブラウザによる対応状況についても説明します。

ブラウザ対応状況

基本機能

uji:gridLayoutタグは、グリッド座標を指定して項目を配置します。

アトリビュート

uji:gridLayoutタグのアトリビュートは以下を指定します。

アトリビュート名	省略	意味	省略時の動作
width	可	領域の幅を指定します。(*)	標準の幅となります。
height	可	領域の高さを指定します。(*)	標準の高さとなります。
borderColor	可	領域枠の色を指定します。(*)	標準の色となります。
borderType	可	領域枠の形式を指定します。(*)	標準の形式となります。
borderWidth	可	領域枠の線幅を指定します。(*)	標準の線幅となります。
spacing	可	領域の隙間を指定します。(*)	標準の空白となります。
background	可	領域の背景色を指定します。(*)	標準の背景色となります。
columnWidth	可	グリッド座標の横幅（領域サイズ）を指定します。"equally"と指定すると均等に設定します。個別に指定する場合は、"10;20;30"のようにサイズをセミコロンで区切って指定します。(*)	自動配置となります。

(*)“7.5.1 項目の指定方法”を参照してください。

コンテント: uji:gridLayoutタグのコンテントには、uji:gridLayoutRendererタグを1個以上記述します。それ以外のタグは記述できません。

使用例

JSP

<uji:gridLayout >
  <uji:gridLayoutRenderer gridX="2" gridY="1" gridWidth="2" >
    領域(2,1)の表示内容...
  </uji:gridLayoutRenderer>
  <uji:gridLayoutRenderer gridX="2" gridY="3" gridWidth="3" >
    領域(2,3)の表示内容...
  </uji:gridLayoutRenderer>
</uji:gridLayout>

注意事項

各ブラウザでそれぞれのアトリビュートが有効かどうかは“ブラウザ対応状況”を参照してください。
画面部品タグのコンテントとしてuji:gridLayoutタグを使用した場合、その画面部品タグのカレントオブジェクトはuji:gridLayoutRendererタグのコンテントでは使用できません。

イベントモデル

uji:gridLayoutタグは、グリッド座標を指定して項目を配置します。

アトリビュート

uji:gridLayoutタグは、イベントモデルで使用する際に以下のアトリビュートを指定します。これ以外のアトリビュートについては、“基本機能”を参照してください。

アトリビュート名	省略	意味	省略時の動作
id	可	コンポーネントのIDを指定します。	自動的に付与されます。

コンテント

uji:gridLayoutタグのコンテントには以下のタグが記述できます。

uji:gridLayoutRenderer(1個以上)

使用例

JSP

<f:view>
  <uji:gridLayout >
    <uji:gridLayoutRenderer gridX="2" gridY="1" gridWidth="2" >
      領域(2,1)の表示内容...
    </uji:gridLayoutRenderer>
    <uji:gridLayoutRenderer gridX="2" gridY="3" gridWidth="3" >
      領域(2,3)の表示内容...
    </uji:gridLayoutRenderer>
  </uji:gridLayout>
</f:view>

注意事項: 注意事項については、“基本機能”を参照してください。

ブラウザ対応状況

アトリビュート	IE7	IE8	IE9	IE10	IE11
width	○	○	○	○	○
height	○	○	○	○	○
borderColor	○	○	○	○	○
borderType	○	○	○	○	○
borderWidth	○	○	○	○	○
spacing	○	○	○	○	○
background	○	○	○	○	○
columnWidth	○	○	○	○	○