5.23 uji:gridLayoutRenderer

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

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

ブラウザ対応状況

基本機能

uji:gridLayoutRendererタグは、uji:gridLayoutの各領域の内容を記述します。

アトリビュート

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

アトリビュート名	省略	意味	省略時の動作
width	可	領域の幅を指定します。(*)	標準の幅となります。
height	可	領域の高さを指定します。(*)	標準の高さとなります。
borderColor	可	領域枠の色を指定します。(*)	標準の色となります。
borderType	可	領域枠の形式を指定します。(*)	標準の形式となります。
borderWidth	可	領域枠の線幅を指定します。(*)	標準の線幅となります。
insets	可	領域内側の余白の幅を指定します。(*)	標準の余白となります。
background	可	領域の背景色を指定します。(*)	標準の背景色となります。
gridX	可	領域のグリッド座標(X)を指定します。グリッド座標は0から始まります。	前の項目に続けて配置されます。
gridY	可	領域のグリッド座標(Y)を指定します。	前の項目と同じ行に配置されます。
gridWidth	可	横方向に続けて使用するグリッドの数を指定します。"remainder"と指定すると、その行の最後まで使用します。"relative"と指定すると、その行の最後を1列残し、その前まで使用します。	1座標分を使用します。
gridHeight	可	縦方向に続けて使用するグリッドの数を指定します。"remainder"と指定すると、その列の一番下まで使用します。"relative"と指定すると、その列の最後を1行残し、その前まで使用します。	1座標分を使用します。

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

コンテント: uji:gridLayoutRendererタグのコンテントには、展開するJSPを記述します。

使用例

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:gridLayoutRendererタグは、uji:gridLayoutタグの各領域の内容を記述します。

アトリビュート

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

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

コンテント: uji:gridLayoutRendererタグのコンテントには展開するJSPを記述します。

使用例

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	○	○	○	○	○
insets	○	○	○	○	○
background	○	○	○	○	○
gridX	○	○	○	○	○
gridY	○	○	○	○	○
gridWidth	○	○	○	○	○
gridHeight	○	○	○	○	○