16.2.1 画面部品タグの概要

Webcoordinatorの画面部品タグは、データの繰り返し数やデータの状態に従った動的な画面構成や、データと入出力ページを組にした部品化を支援する機能です。“A.2 画面部品のサンプル”には、画面部品タグを利用したアプリケーションのサンプルを示しています。

Webcoordinatorの画面部品タグには、以下のものがあります。

表
2次元の表を作成します。
ツリー
木構造のデータを段下げして表示します。
リスト
単純な繰り返しです。
条件
条件によって表示内容を選択します。
複合Bean
データBeanの形で繰り返しを持っているとき、データBeanの各項目を参照します。

ポイント

画面部品タグは部品化やHTMLの詳細な記述が可能です。単純に表や選択項目を作成する場合はコンポーネントタグを利用すると簡単に記述できます。

画面部品タグを使う場合には、各部品で決められたインタフェースを実装したデータBeanを準備します。また、入出力ページではレンダラと呼ばれるタグで繰り返し構造や条件ごとのフォーマットを記述します。画面部品タグはこのデータBeanにデータを問い合わせながら、該当するレンダラを選択して、内容を画面に転送します。例えば表の場合は、データBeanでTableModelを実装したプロパティを作成し、uji:tableタグはこのインタフェースを通して表のデータを参照します。

uji:tableタグは以下のように動作します。

uji:tableタグのアトリビュートから、TableModelインタフェースを取得します。 bodyに対応付けられたデータBeanのsummaryプロパティがTableModelを返す場合、uji:tableタグで以下のように記述します。サンプルのsummary.jspで記述しています。
```
<uji:table bean="body" property="summary">  
```
SummaryModelクラスはTableModelを実装しています。
```
public class SummaryModel implements com.fujitsu.uji.model.table.TableModel {  
```
ModelBeanクラスのsummaryプロパティはこのSummaryModelクラスを返します。
```
    protected SummaryModel summary;
    public SummaryModel getSummary() {
        return summary;
    }
```
uji:tableタグはTableModelインタフェースに表のサイズ（行、列）を問い合わせます。 SummayModelクラスではこのためのgetColumnCount、getRowCountメソッドを実装しています。
```
    public int getColumnCount() {
        return 6;
    }
    public int getRowCount() {
        return dm.getDataCount() + 1;
    }
```
uji:tableタグは表全体のレンダラを探します。表全体のレンダラはtype="table"と指定されたuji:tableRendererタグです。見つかれば、このタグの内容を出力します。なければ、デフォルトのパターンを出力します。 summary.jspでは以下のように記述しています。
```
    <uji:tableRenderer type="table" >
        <TABLE border="2" width="100%"><uji:children/></TABLE>
    </uji:tableRenderer>
```
出力中にuji:childrenタグがあれば、下位のレンダラの処理を実行します。表の場合は、キャプションのレンダラ（type="caption"）を処理したあと、行のレンダラ（type="row"）を行数分だけ繰り返して処理をします。例では行のレンダラが省略されているので、デフォルトで以下のように処理します。
```
<tr><uji:children/></tr>  
```
行のレンダラでuji:childrenタグがあれば、下位のセル（type="column"）の処理を実行します。
行とセルのレンダラは、データ属性（cls）を指定することで、複数のレンダラより選択することができます。 summary.jspでは以下のように記述しています。
```
      <uji:tableRenderer type="column" cls="header" >
        <TH bgcolor="#EEFFEE"><uji:value/></TH>
      </uji:tableRenderer>
      <uji:tableRenderer type="column" cls="editable" >
        <TD><INPUT name="<uji:name/>" value="<uji:value/>"></TD>
      </uji:tableRenderer>
```
データ属性（cls）は、TableModelインタフェースのgetRowClass、getColumnClassより取得した任意の文字列です。 SummayModelクラスで設定しています。
```
    public java.lang.String getColumnClass(int row, int col) {
        if(row == 0)
            return "header";
        else if(col == 5)
            return "editable";
        return null;
    }
```
例ではクラス指定のないレンダラが省略されているため、クラスがnullのセルに対してはデフォルトのレンダラが使用されます。
```
<td><uji:value/></td>  
```
セルのレンダラ中でuji:valueタグがあれば、セルのデータがそこに出力されます。また、uji:nameタグは、INPUTタグで入力された内容をデータBeanに書き戻すための名前を生成します。

ポイント

Webcoordinatorでは、データの状態判定はビジネスロジックまたはデータBean側で行って、表示の変更のみを画面に記述するように設計します。