UJIタグで作れる物集

ujiタグとは

ujiタグとは、Webcoodinatorが提供しているJSP用のタグです。このujタグを利用することで、アプリケーションの動作を制御したり、HTMLので描写する画面部分を作成することができます。
今回は、ujiタグを使って、画面部分を作成する方法について、簡単に説明していきたいと思います！

ujiタグで作成できる画面部分

ujiタグを使って、様々なものを作成することができますが、以下のものを作成する方法について、説明していきたいと思います！
・表：２次元の表を作成します。
・ツリー：木構造のテータを段下げして表示させます。
・リスト：単純な繰り返しです。
・条件：条件によって、表示内容を変更します。
・複合Bean：データBeanの繰り返しを待っている際に、データBeanの各項目を参照します。

ujiタグでは、画面部分をインターフェースしたデータBeanを使用して、作成していきます。
意味が分からないという方もいらっしゃると思いますが、ゆっくり説明していきます！

表

まずは、TableModelをインターフェイスしたデータBeanを作成していきます。イメージとしては、表を作成するために、必要な情報を記載したクラスを作るイメージです。下記は、Apcoodinatorの公式マニュアルより引用させていただいた写真です。

summaryModel.java

package model;
import java.io.Serializable;

public class SummaryModel implements 
  com.fujitsu.uji.model.table.TableModel,Serializable {
  DataManager dm;

  public SummaryModel(DataManager dm) {
    this.dm = dm;
  }

  public int getColumnCount() {
    return 6;
  }

  public int getRowCount() {
    return dm.getDataCount() + 1;
  }

  public java.lang.Object getValueAt(int row, int col) {
    if(row == 0) {
      switch(col) {
        case 0: return "伝票番号";
        case 1: return "注文日";
        case 2: return "品番";
        case 3: return "数量";
        case 4: return "担当支店";
        case 5: return "納入予定日";
      }
    } else {
      MeisaiBean bean = dm.getData(row - 1);
      switch(col) {
        case 0:return bean.getDenpyoNo();
        case 1:return bean.getChumonDate();
        case 2:return bean.getShohinCode();
        case 3:return bean.getShohinCount();
        case 4:return bean.getTantoOffice();
        case 5:return bean.getNonyuDate();
      }
    }
    throw new ArrayIndexOutOfBoundsException();
 }

  public java.lang.String getColumnClass(int row, int col) {
    if(row == 0)
      return "header";
    else if(col == 5)
      return "editable";
    return null;
  }

  public java.lang.String getRowClass(int row) {
   return null;
  }

  public void setValueAt(java.lang.Object val, int row, int col) {
    if(row == 0 || col != 5 || !(val instanceof String))
     throw new IllegalStateException();
      MeisaiBean bean = dm.getData(row - 1);
      bean.setNonyuDate((String)val);
  }
}

これが、TarbleModelをインターフェイスしたデーブルです。他にも必要なクラスがあるのですが、それは表をujiタグを利用して作成する的な別の記事で記載します！
次に表示する画面（JSP）を記載します。

summary.jsp

<%@ page contentType="text/html; charset=shift_jis" %>
<%@ taglib uri="uji-taglib" prefix="uji" %>
<uji:useBean id="body" cls="model.ModelBean" request="true" />
<P>納入予定日設定（概要モード）</P>
<FORM method="post">
  <INPUT name="uji.verbs" type="hidden" value="showDetail"> 
  <INPUT name="uji.id" type="hidden" value="body">
  <uji:table bean="body" property="summary">
    <uji:tableRenderer type="table" >
      <TABLE border="2" width="100%"><uji:children/></TABLE>
    </uji:tableRenderer>
    <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>
  </uji:table>
  <INPUT name="showDetail" type="submit" value="詳細表示">
</FORM>

では早速、説明に参ります。

<uji:table bean="body" property="summary">

これはuji:tableタグにより、TableModelインターフェイスのsummaryプロパティを受け取って、テーブルが作成されますよと宣言しています。プロパティのsummaryはbodyに紐づけられていることは頭の片隅にでも置いておいてください。

<uji:tableRenderer type="table" >
  <TABLE border="2" width="100%"><uji:children/></TABLE>
</uji:tableRenderer>

uji:tableタグは、レンダラという何かを整形して描写してくれるものがないかを探し、見つけ次第指示を出して展開していきます。そのレンダラがuji:tableRenrederです。
ここでは、type="table"という属性を指定しており、これから作成される表の設定をしていきます。HTMLでいうheadタグの中みたいなイメージです。線を表示したり、横幅を指定してますね。
<uji:children/>は、これより下位にあるレンダラを処理しますという宣言です。

<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タグを使用することにより、レンダラの種類を選択することができます。今回の例で言えば、haderとeditableが使用されている。前者は読み込み専用、後者は変更可能などclsによってセルの属性が変わってくる仕組みになっている。
どのようにクラスを分けているかは、下記のメソッドにより分類されている。

summaryModel.java

public java.lang.String getColumnClass(int row, int col) {
  if(row == 0)
    return "header";
  else if(col == 5)
    return "editable";
  return null;
}

このメソッドにより、０行目の時はheader、５列目の時はeditableを指定していることがわかる。それ以外は、デフォルトでnullを返すようになっている。

<td><uji:value></td>

これは、指定されたデータを出力できるようにします。また、uji:nameがあった場合、inputで入力されたデータをデータBeanに保存するために使われます。

上記の他にもクラスなどが多々用意されていますが、今回はここまでにしておきます。また、データBean、ハンドラーなども含めた記事を投稿いたします。

次のujiタグで作れる画面部分は何にしようかな。