テーブル形式でデータを表示して、特定の列がハイパーリンクになってて、それを押すと詳細表示へ行くという形の、ありがちなアプリケーションの動き。
NetBeans6.1のVisual Web JSFの表に配列をバインドして、この動きを達成してみようと思う。
本来はDBとかからデータをひっぱってくるんだろうけど、簡単にするために単純に配列にぶちこんだものにしようと思う。
表示するデータは、超簡単ないつも通りの従業員クラス。
package com.wankuma.kazuki.vwjsf.currentrow;
public class Employee {
private int id;
private String name;
private String email;
// getter/setterは省略
}
配列は、手抜きだけどApplicationBeanに持たせることにする。
因みに、私はVisual Web JSFの雛形に入ってるSessionBean1とかApplicationBean1とかいう名前はダサイから嫌いなのでいったん綺麗に消してSessionBeanやApplicationBeanやRequestBeanという形で作るようにしてます。
private Employee[] employees;
public Employee[] getEmployees() {
return employees;
}
public void setEmployees(Employee[] employees) {
this.employees = employees;
}
public Employee getEmployee(int id) {
return employees[id];
}
@Override
public void init() {
// IDEの吐いてる部分は省略
List<Employee> employeeList = new ArrayList<Employee>();
for (int i = 0; i < 10; i++) {
Employee emp = new Employee();
emp.setId(i);
emp.setName("田中 太郎 no" + i);
emp.setEmail("tanaka@email.com" + i);
employeeList.add(emp);
}
employees = employeeList.toArray(new Employee[employeeList.size()]);
}
これで準備完了。
早速画面にバインドしてみる。まずは、新しくEmployeesPageという画面を作る。
テーブルを置いて、ApplicationBeanのemployeesとバインドしてページングとかの設定をした。
とりあえず、ここまでの動作を確認するために実行。
４０４エラーorz
開始ページ指定するのを忘れてた。よくやる失敗。
ということで、気を取り直して実行する。
ここまではいい感じだ、ということで名前列をアンカーにしてみようと思う。
表レイアウトから、名前の列をハイパーリンクに変更する。
そして、このハイパーリンクのアクションで選択された行の従業員のidを取得して詳細表示ページに遷移させる。
詳細ページが無いと始まらないので、EmployeePage（単数形にした）という名前でページを作って、詳細ページだとわかるようにStaticTextを貼っておく。
次に、画面遷移を定義する。faces-config.xmlを開いてEmployeesPageのhyperlink1(表にあるハイパーリンク)から矢印をEmployeePageに対して引っ張る。矢印の上にcase1と表示されるはずなので、一応go_employeeという文字列に直しておく。
そうると、EmployeesPageのhyperlink1_actionのコードがgo_employeeに遷移するようになってる。
public String hyperlink1_action() {
return "go_employee";
}この時点で画面遷移はするようになっている。とりあえず実行して確認！
ハイパーリンクになってる。
クリックすると画面遷移する
後は、ハイパーリンクのアクションでクリックされた行のidを取得して詳細ページへ引き渡すだけだ。
idの取得だけど、コンポーネントから直接取得する。
コンポーネントのコンバータにintegerConverterを指定して、取得する値がinteger型になるようにする。
そして、StaticTextで右クリックしてバインド属性を追加する。
これでプログラム側からコンポーネントに直接アクセスできるようになる。
値がちゃんと選択された行の値になってるか確認するために標準出力へ値を出してみる。
public String hyperlink1_action() {
// ちゃんと取れてるか確認
System.out.println("selectedEmployeeId: " + staticText1.getValue());
return "go_employee";
}この状態で実行して、idが0の人, 2の人, 8の人と順番に選択するとログに下のように表示された。
ばっちり。
selectedEmployeeId: 0
selectedEmployeeId: 2
selectedEmployeeId: 8
idがちゃんと取れていることが確認できたので、EmployeesPageにselectedEmployeeIdというプロパティを作って、そこに値を入れて詳細用のページへ移動する。
// 選択された従業員のIDを保持しておく
private Integer selectedEmployeeId;
public Integer getSelectedEmployeeId() {
return selectedEmployeeId;
}
public void setSelectedEmployeeId(Integer selectedEmployeeId) {
this.selectedEmployeeId = selectedEmployeeId;
}
public String hyperlink1_action() {
selectedEmployeeId = (Integer) staticText1.getValue();
return "go_employee";
}詳細表示のEmployeePageでは、prerenderの中でisPostBack()の値を確認して、初回のみ対象の従業員データを取得するようになっている。
// 表示対象の従業員データ
// このプロパティへ、画面のコンポーネントからバインドする
private Employee employee;
public Employee getEmployee() {
return employee;
}
public void setEmployee(Employee employee) {
this.employee = employee;
}
@Override
public void prerender() {
if (!isPostBack()) {
EmployeesPage prev = (EmployeesPage) getBean(EmployeesPage.class.getSimpleName());
employee = getApplicationBean().getEmployee(prev.getSelectedEmployeeId());
}
}詳細ページは、下のような感じにしてみた。0やabcと表示されてる部分は、StaticTextで、対応するプロパティへバインドされている。
どんな感じにバインドしてるかを見るためにJSPのコード部分を抜き出した。
<webuijsf:label id="label1" text="ID："/>
<webuijsf:staticText id="staticText2" text="#{EmployeePage.employee.id}"/>
<webuijsf:label id="label2" text="名前："/>
<webuijsf:staticText id="staticText3" text="#{EmployeePage.employee.name}"/>
<webuijsf:label id="label3" text="メールアドレス："/>
<webuijsf:staticText id="staticText4" text="#{EmployeePage.employee.email}"/>
それじゃぁ、おもむろに実行～。
田中 太郎 no2をぽちっとな。
ちゃんと詳細でたー。
めでたしめでたし。