Apcoordinator ユーザーズガイド
目次 前ページ次ページ
第3部 Webアプリケーションの開発> 第15章 UJIタグを使ったプログラミング> 15.4 コンポーネントタグを使ったプログラミング

15.4.3 コレクションタグの利用

コレクションタグは、対応する項目クラスと組み合わせて利用します。

■コレクションタグの種類

以下のコレクションタグがあります。
・uji:comboBox
選択肢をプルダウン形式で指定します。
combobox
・uji:listBox
選択肢をリストから選択します。
listbox
・uji:buttonList
選択肢をボタン形式で指定します。
buttonlist
・uji:recordView
ラベル付きの入力項目です。
recordview
・uji:tableView
表形式の項目です。
tableview
・uji:treeView
表の第一列をツリー形式で表示します。
treeview

■コレクションタグの基本的な利用方法

ここではuji:comboBoxタグを例に説明します。
データBeanに項目クラスをプロパティとして作成します。 uji:comboBoxタグを利用する場合は、データBeanにComboBoxクラスを利用します。 

package sample;
import com.fujitsu.uji.compo.*;

public class BodyBean extends com.fujitsu.uji.DataBean
{
    protected ComboBox comboData = new ComboBox();

    public ComboBox getComboData() {
        return comboData;
    }

    ...
}
項目クラスに対して一覧データを追加します。 

    ... 表示前の処理
    ComboBox cb = dataBean.getComboData();
    cb.add("赤");
    cb.add("青");
    cb.add("緑");
    ...
ポイント
リソースファイルを使用すると、コンボボックス、リストボックス、ボタンリストの項目クラスに設定する選択肢を外付けのXMLファイルに定義できます。詳細は、リソースファイルを参照してください。
JSPでuji:comboBoxタグを記述します。 

<FORM>
    <uji:comboBox bean="body" property="comboData" />
    ...
</FORM>
フォームが送信されると、選択肢の選択状態は項目クラスに格納されます。また、画面表示時には、項目クラスに追加された一覧データが選択肢として表示されます。このとき、一覧データに文字 '"', '&', '<', '>' が含まれている場合、それぞれ'&quot;', '&amp;', '&lt;', '&gt;'に変換されて出力されます。

色や大きさをタグのアトリビュートや項目クラスのプロパティで設定できます。 タグによって設定可能な内容は異なります。
x ns4.xNetscape 4.xでは色、大きさの指定は無効です。 


<FORM>
    <uji:comboBox bean="body" property="comboData"
            width="100" background="yellow" fontSize="12pt" />
    ...
</FORM>

■uji:tableViewの利用方法

uji:tableViewタグは以下のように利用します。
・データを設定する
データBeanにTableViewクラスをプロパティとして作成します。 

package sample;
import com.fujitsu.uji.compo.*;

public class BodyBean extends com.fujitsu.uji.DataBean
{
    protected TableView tableView = new TableView();

    public TableView getTableView() {
        return tableView;
    }

    ...
}
TableViewクラスに対してデータ行を追加します。 

    ...

    TableView table = dataBean.getTableView();
    table.addRow(new Object[] { "りんご", "300", "1" } ); // 1行目のデータ
    table.addRow(new Object[] { "みかん", "50", "2" } ); // 2行目のデータ
    ...
JSPでuji:tableViewタグを記述します。 表の大きさやセルの色はタグのアトリビュートで設定します。 

<FORM>
    <uji:tableView bean="body" property="tableView"
            width="400" background="yellow" />
</FORM>
・ヘッダ行を作成する
表にはヘッダ行を付けることができます。 

    ...

    TableView table = dataBean.getTableView();
    table.setHeader(new Object[] { "品名", "値段", "個数" } );
    ...
JSPでのタグのアトリビュートの指定により、ヘッダ行のセルをボタンまたはリンクにすることもできます。 ボタンがクリックされると、"verb:"の後ろに記述したコマンド（下の例ではaction）が実行されます。 

<FORM>
    <uji:tableView bean="body" property="tableView"
                    header="verb:action" />
</FORM>
リンクにする場合は"link:"に続けてコマンドを指定します。

ヘッダの特定の列だけをボタンやリンクにすることもできます。 "verb:"または"link:"を設定した列のセルだけがボタンやリンクになります。例のように各列ごとに異なるコマンドを設定できます。 


<FORM>
    <uji:tableView bean="body" property="tableView"
                    header="title;verb:action1;link:action2" />
</FORM>
データ行の任意の列もボタンやリンクにすることができます。以下の例では、第3列目がボタンになります。 

<FORM>
    <uji:tableView bean="body" property="tableView"
                    dataCellType="data;data;button:action" />
</FORM>
・文字列フィールドを作成する
タグのアトリビュートの指定により、データ行の特定の列を文字列フィールドにできます。 例ではデータ行の第2列目と第3列目が文字列フィールドになります。 

<FORM>
    <uji:tableView bean="body" property="tableView"
                    dataEditable="false;true;true" />
</FORM>
・ラジオボタンやチェックボックスを作成する
タグのアトリビュートの指定により、データ行の特定の列をラジオボタンやチェックボックスにできます。 例ではデータ行の第2列目と第3列目がそれぞれラジオボタン、チェックボックスになります。 

<FORM>
    <uji:tableView bean="body" property="tableView"
                    dataCellType="data;radio;check" />
</FORM>
・列の色や大きさなどを指定する
タグのアトリビュートで、ヘッダ行やデータ行の列の色や大きさなどを指定します。 

<FORM>
    <uji:tableView bean="body" property="tableView"
                    headerBackground="gray"
                    dataFontWeight="bold;normal;normal" />
</FORM>
CellAttributeクラスを使うと、文字色など設定の一部をセル単位で指定できます。 CellAttributeクラスで指定した内容はタグのアトリビュートよりも優先されます。 

    ...

    CellAttribute attr = new CellAttribute();
    attr.setBackground("red");
    TableView table = dataBean.getTableView();
    table.setAttributeAt(attr, 0, 0);
    ...
・セルを連結する
タグのアトリビュートで、セルを連結して表示することができます。 

<FORM>
    <uji:tableView bean="body" property="tableView"
                    multiRow="1,2;1;1$2" />
</FORM>
・セルの数値フォーマットを設定する
セルの値にはCellModelインタフェースを実装したオブジェクトを設定できます。 この場合、CellModelを実装したオブジェクトのgetValue()が返す値がそのセルに表示されます。
例えば次のようなクラスを用意すると、数値を"1,500"のようにフォーマットして表示できます。 

package sample;
import com.fujitsu.uji.compo.*;
import java.text.*;

public class NumberFormatCell implements CellModel {
    int number;
    DecimalFormat formatter = new DecimalFormat("#,##0");

    public NumberFormatCell(int number) {
        this.number = number;
    }

    public Object getValue() {
        return formatter.format((long)number);
    }

    public void setValue(Object value) {
        try {
            // #,##0の入力
            number = formatter.parse((String)value).intValue();
        } catch(Exception e) {
            try {
                // ###0の入力
                number = Integer.parseInt((String)value);
            } catch(Exception e2) {
                //不明な入力
            }
        }
    }
}
作成したクラスはTableViewクラスのaddRowメソッドで指定します。 

    ...

    TableView table = dataBean.getTableView();
    table.addRow(new Object[] { "りんご", new NumberFormatCell(1500), "5" } );
    table.addRow(new Object[] { "みかん", new NumberFormatCell(50), "2" } );
    ...
・一定行数ずつに分割表示する
表を一定行数ずつ表示し、「次へ」「前へ」などのスクロールボタンを設置して表示部分を切り替えることができます。 この場合は、TableViewクラスの代わりにScrollTableViewクラスを使用します。 

package sample;
import com.fujitsu.uji.compo.*;

public class BodyBean extends com.fujitsu.uji.DataBean
{
    protected ScrollTableView tableView = new ScrollTableView();

    public ScrollTableView getTableView() {
        return tableView;
    }

    ...
}
ScrollTableViewを持つデータBeanを領域に割り当てるときには、setResponseBeanメソッドの第3引数にtrueを指定します。 

public void startup(DispatchContext context) {
    BodyBean bean = new BodyBean();
    ....
    context.setResponseBean("body",bean,true);
}

表示行数はuji:tableViewタグのpageSizeアトリビュートか、ScrollTableViewクラスのsetPageSizeメソッドで指定します。両方指定した場合、ScrollTableViewクラスの指定が優先されます。 


<FORM>
    <uji:tableView bean="body" property="tableView" pageSize="10" />
</FORM>
スクロールボタンを設置するには、uji:tableViewタグのscrollButtonアトリビュートか、uji:pushButtonタグを使用します。

scrollButtonアトリビュートは、容易にボタンを設置する場合に使用します。 この場合、以下のようにタグを使用します。

以下は、次へ進むボタン、前へ戻るボタンを表の右下に設置する例です。 

<FORM method="post">
    <input type="hidden" name="uji.verbs" value="uji.showback, ....">
    <uji:tableView bean="body" property="tableView" 
                   pageSize="10" scrollButton="right" />
</FORM>
ボタンの設置場所や形状を細かく指定する場合はuji:pushButtonタグを使用します。 この場合、以下のようにタグを使用します。 以下は記述例です。 

<FORM method="post">
    <input type="hidden" name="uji.verbs" value="uji.showback, ....">
    ...
    <uji:tableView bean="body" property="table"
                   pageSize="10" tableName="employee" />
    <uji:pushButton type="scrollTable" label="前へ" 
                    table="employee" scroll="backward"/>
    <uji:pushButton type="scrollTable" label="次へ" 
                    table="employee" scroll="forward"/>

    ...
</FORM>
スクロールボタンによって表示部分を切り替える処理は、サーバ側でJSPを再実行することによって実現されます。 したがって、スクロールボタンを押した場合のアプリケーションの動作は、ビジネスクラスが呼ばれない点を除いて、通常の送信ボタンを押した場合と同じです。すなわち、以下の処理が実行されます。

分割表示を使用する場合は以下の注意事項があります。

■uji:treeViewの利用方法

uji:treeViewタグの利用方法はほぼuji:tableViewタグと共通です。 以下では異なる部分を説明します。
・データを設定する
データBeanにTreeViewクラスをプロパティとして作成します。 

package sample;
import com.fujitsu.uji.compo.*;

public class BodyBean extends com.fujitsu.uji.DataBean
{
    protected TreeView treeView = new TreeView();

    public TreeView getTreeView() {
        return treeView;
    }

    ...
}
TreeViewクラスに対してデータ行を追加します。 

    ...

    TreeNodeRow root = new TreeNodeRow(new Object[] { "root" });

    TreeNodeRow child1 = new TreeNodeRow(new Object[] { "child1" });
    TreeNodeRow child2 = new TreeNodeRow(new Object[] { "child2" });
    TreeNodeRow child3 = new TreeNodeRow(new Object[] { "child3" });
    root.addChild(child1);
    root.addChild(child2);
    root.addChild(child3);

    TreeNodeRow grandchild11 = new TreeNodeRow(new Object[] { "grandchild1" });
    TreeNodeRow grandchild12 = new TreeNodeRow(new Object[] { "grandchild2" });
    child1.addChild(grandchild11);
    child1.addChild(grandchild12);

    TreeView tree = dataBean.getTreeView();
    tree.setRoot(root);
    ...
JSPでuji:treeViewタグを記述します。 

<FORM>
    <uji:treeView bean="body" property="treeView" />
</FORM>
・アイコンを設定する
タグのアトリビュートで、インデントを表すアイコンやノードのアイコンを指定できます。 

<FORM>
    <uji:treeView bean="body" property="treeView"
                   openIcon="open.jpg"
                   closeIcon="close.jpg"
                   leafIcon="leaf.jpg"
                   indentIcon="child.jpg;lastchild.jpg;hasmorechild.jgp;nomorechild.jpg" />
</FORM>
TreeNodeRowクラスを使うと、ノードごとにアイコンを指定できます。TreeNodeRowクラスで指定した内容はタグのアトリビュートよりも優先されます。 

    ...

    TreeView tree = dataBean.getTreeView();
    TreeNodeRow root = (TreeNodeRow)tree.getRoot();
    root.setIcon("special.jpg");
    ...
目次 前ページ次ページ
All Rights Reserved, Copyright © 富士通株式会社 2000-2005