ICEfacesでページフラグメント

ページフラグメントをテストしてみる。各種ファイルを生成するのが面倒なので今回もNetBeansのVisual Web ICEfacesで。


ページフラグメントとはメニュー等共通の項目を別ページにするもの。JSFはページフラグメントが手軽に行えるのが特徴なので、ICEfacesで試す。ICEfacesに限らず業務アプリ等でもページフラグメントは良く使うし、必須の知識。


アプリは今回も足し算。前回の足し算アプリに手を加えてみる。具体的には結果の表示部分を別フラグメントにする。つまりPage1にFragment1を埋め込むわけだ。

  • ページ
  • フラグメント
    • Fragment1.jspf
    • Fragment1.java

結果の削除

resultプロパティを削除する。アクションの計算部分もとりあえず削除。JSPに記述してある結果を表示するOutputTextも削除。

ページフラグメントを作成

パレットのグループ「ICEfaces Layout」の中にあるページフラグメントボックスを選択し、Page1のデザインで貼り付け。

ここで表示されるダイアログで新規作成をし、それを選択するとフラグメントファイル(JSPFとJavaコード)が生成され、それがPage1のJSPに埋め込まれる。


Fragment1を開く。以下のようにOutputTextを貼り付ける。

結果を格納するresultプロパティを記述する。今回はセッターとゲッターを両方とも作成する。

int result;

public int getResult() {
    return result;
}

public void setResult(int result) {
    this.result = result;
}

そしてはりつけたOutputTextコンポーネントに上の画面の右下の赤く囲んだ部分のようにvalueにresultプロパティをバインドする。

わかりやすいようにフラグメントの背景色を変えてみた。

計算ロジックの記述

Page1をデザインで開くとこのようになっているはず。

イコールボタンクリックのコードを以下のように修正する。

public String button1_action() {
    Fragment1 f = (Fragment1) getBean("Fragment1");

    f.setResult( param1 + param2 );

    return null;
}

結果

ブラウザで実行。

ふむ。問題ない。

すべてAJAXで処理されているため画面遷移がないというのが上の画面を見るとわかるだろうか。ボタンにフォーカスがあたったままというのに注目して欲しい。結果戻るボタンがきかないというのは業務系アプリにとってかなり便利だよね。