小分類画面の実装

 小分類関連の画面構成やその遷移に関しては、 こちら を参照してください。この章の全体構成に関する説明は、大分類画面の実装を参照してください。

 小分類関連の画面定義の xhtml ファイルは、 minorPage.xhtml になります。ペアとなる管理 Bean クラスは MinorPageBean です。

                     
@Named
@RequestScoped
public class MinorPageBean extends BaseBean implements Serializable {

    private String mId = "";
    
    private String id = "";
    
    private String name;
    
    private String comment;

    private String selectedMid;
    private String selectedId;
    
    private List<Major> majors;
    private List<Minor> minors;

    @Inject
    private MajorDao majorDao;
            
    @Inject
    private MinorDao minorDao;
}                     

                 

  Mid、id、name、comment はそれぞれ画面上の大分類コード、小分類コード、小分類名、コメント用です。大分類のコンボボックスから選択した大分類コードを selectedMid に格納します。小分類の一覧から任意の行をクリックするとその行の表示色を変更しています。その色変更処理と選択行の小分類コードを保存する処理は jQuery で行っています。もちろん選択行の保存は、 hidden 属性を付けた input タグを使用しています。そしてその値は selectedId を介して操作しています。majors はデータベースに登録されている全大分類を格納し、 minors は現在の大分類に含まれる全小分類を格納します。

  majorDao は大分類テーブルを表現したインスタンスであり、 minorDao は小分類テーブルを表現したインスタンスです。それぞれ大分類と小分類の検索・追加・変更・削除というデータベースに関連した操作を行います。 @Inject アノテーションは、このインスタンスの生成は Web サーバに任せていることを示します。これが可能となるのは、 MajorDao クラスと MinorDao クラスに @Stateless アノテーションを付けていることと対応しています。

                     
@Stateless
public class MajorDao {
  …
}

@Stateless
public class MinorDao {
  …
}

                 

 初期化処理としては、大分類コンボボックスに表示するために全大分類を検索して、 majors 変数に格納する必要があります。

                     
    @PostConstruct
    private void initialize()
    {
        majors = select(majorDao.findAll());
    }

                 

 大分類のコンボボックスから別の大分類を選択した場合、小分類のテーブルを更新する必要があります。その部分の xhtml ファイルの内容を示します。（部分）

    <select jsfc="h:selectOneMenu" id="majors" value="#{minorPageBean.mid}" readonly="#{minorPageBean.getId().length() > 0}" >
        <option jsfc="f:selectItem" itemLabel="----- 選択してください -----" itemValue="-1" />
        <option jsfc="f:selectItems" var="major" value="#{minorPageBean.majors}" itemValue="#{major.id}" itemLabel="#{major.name}">
        <f:ajax listener="#{minorPageBean.majorChanged}" render="tablePanel" />
    </select>         

                 

 具体的には、 select タグと option タグを使用しています。まず select タグ。 jsfc 属性には h:selectOneMenu を指定しています。コンボボックスで選択されている値は、 MinorPageBean の getMid/setMid メソッドでやり取りされます。全く大分類が登録されていないとき、このコンボボックスを使用できなくしています。

  option タグには２種類あります。固定の項目でよい場合が最初のものです。動的に繰り返し処理が必要な場合が２つ目になります。繰り返し処理が必要な場合、jsfc="f:selectItems" を指定します。 value="#{minorPageBean.majors}" から MinorPageBean の getMajors メソッドを呼び出します。戻り値は何らかの集合となります。その要素は var="major" から major という変数名で参照できます。コンボボックスの表示に使用するのは、 getName メソッドの値を、選択された項目の値としては getId メソッドを使用することになります。

  f:ajax タグは、コンポボックスが変更されたときの処理を記述します。 listener="#{minorPageBean.majorChanged}" から、 AJAX の非同期処理として majorChanged メソッドが呼び出されます。その戻値りから HTML ファイルの id 属性が tablePanel のコンポーネントだけが再描画されます。 majorChanged メソッドを示します。

                     
    public void majorChanged(AjaxBehaviorEvent evt) throws AbortProcessingException
    {
        minors = select(minorDao.findByMid(getMid()));
    }                         

                 

 引数と例外は約束事です。選択されている大分類コードで検索を行っているだけです。

  xhtml ファイルの追加ボタンの内容を示します（部分）。

    <form jsfc="h:form" action="minorPage.xhtml">
    …
        <input jsfc="h:commandButton" id="addButton" class="btn btn-primary" type="submit" value="追 加" action="#{minorPageBean.insert()}" disabled="#{minorPageBean.isSearched()}" />
    …
    </form>

                 

 全体は form タグに含まれている必要があります。そのサブミット先は、自分自身（minorPage.xhtml）すなわちポストバックさせることになります。では input タグを見てみましょう。 jsfc="h:commandButton" により JSF の処理対象となります。 class 属性の指定は、 Bootstrap の値を使用しています。action="#{minorPageBean.insert()}" から追加ボタンをクリックされてポストバックされた場合、管理 Bean の insert メソッドが呼び出されます。また追加ボタンの有効／無効の切り替えは、 disabled="#{minorPageBean.isSearched()}" で行います。つまり大分類の一覧で任意の行が読みだされている状態では追加ボタンは動作しません。

 次に、MajorPageBean の insert メソッドを見てみましょう。

                     
    public void insert()
    {
        Minor obj = new Minor();
        MinorPK key = new MinorPK(getMid(), getId());

        obj.setMinorPK(key);
        obj.setName(getName());
        obj.setComment(getComment());
        
        ArrayList<Executable> list = new ArrayList<>();
        list.add(minorDao.insert(obj));
        transact(list);
        
        clear();
    }

                 

  Minor クラスのインスタンスを作り、画面の値から変数を設定し、親クラスである BaseBean の transact メソッドでデータベースに追加しています。ここで、大分類コード・小分類コードと名前は必須項目です。こうした検査はブラウザの jQuery で行っており、サーバ上では検査をしていません。

  xhtml ファイルの読出ボタンの内容を示します（部分）。

    <form jsfc="h:form" action="minorPage.xhtml">
    …
        <input jsfc="h:commandButton" id="readButtonOn" class="btn btn-primary hidden" type="submit" value="読 出" action="#{minorPageBean.read()}" />
        <input id="readButtonOff" class="btn btn-primary" type="button" value="読 出" disabled="disabled" />
    …
    </form>

                 

 読出ボタンは有効な場合と無効な場合の２つの状態を表現する必要があります。そのため同じ位置に同じ大きさのボタンを２つ用意して、その２つの表示を切り替えることで実現しています。この切替えは、 jQuery で行っています。上の input タグがポストバックを行う有効時のボタン。下の input タグは表示だけのボタンになります。

 次に、MinorPageBean の read メソッドを見てみましょう。

                     
    public void read() 
    {
        MinorPK key = new MinorPK(getSelectedMid(), getSelectedId());
        Minor minor = (Minor) select(minorDao.uniqueKey(key));
        
        setId(minor.getMinorPK().getId());
        setName(minor.getName());
        setComment(minor.getComment());
        
        minors = select(minorDao.findByMid(getMid()));
    }  

                 

 ブラウザで選択された大分類コードと小分類コードをもとにデータベースを検索して、変数を設定しているだけです。

  xhtml ファイルの更新ボタンの内容（部分）と update メソッドを示します。説明文は省略します。

    <form jsfc="h:form" action="minorPage.xhtml">
    …
        <input jsfc="h:commandButton" id="updateButtonOn" class="btn btn-primary" type="submit" value="更 新" action="#{minorPageBean.update()}" />
        <input id="updateButtonOff" class="btn btn-primary" type="button" value="更 新" disabled="disabled" />
    …
    </form>
                  
            
    public void update()
    {
        MinorPK key = new MinorPK(getSelectedMid(), getSelectedId());
        Minor minor = (Minor) select(minorDao.uniqueKey(key));
        
        minor.setName(getName());
        minor.setComment(getComment());

        ArrayList<Executable> list = new ArrayList<>();
        list.add(minorDao.update(minor));
        
        transact(list);
        
        clear();        
    }

                 

  xhtml ファイルの削除ボタンの内容（部分）と delete メソッドを示します。

    <form jsfc="h:form" action="minorPage.xhtml">
    …
        <input jsfc="h:commandButton" id="deleteButton" class="btn btn-primary" type="button" value="削 除" disabled="#{minorPageBean.isUnsearched()}" />
    …
    </form>
                  
            
    public void delete()
    {
        ArrayList<Executable> list = new ArrayList<>();
        MinorPK key = new MinorPK(getSelectedMid(), getSelectedId());
        list.add(minorDao.delete(key));
        
        transact(list);
        
        clear();        
    }

                 

 削除ボタンには submit 時の処理が記述してありません。これは削除ボタンがクリックされた場合、 jQuery で削除の確認を求めるダイアログを表示しています。そのダイアログで削除の確認を行った時に、 submit 処理を行っているためです。