大分類画面の実装

 大分類関連の画面構成やその遷移に関しては、 こちら を参照してください。この章の全体構成に関して最初に記述しておきます。 xhtml ファイルのソースを一括して乗せることはしません。それは、まずファイルが大きいのです。そして、重要度や難易度からみて、そのレベルはさまざまです。そうした性格をもつファイルを一度に表示したのでは説明が困難ですし、読み手からしても大変と思います。そこで、この部分はきちんと説明しておきたいという部分と、それとペアで動作する管理 Bean の説明を繰り返そうと思います。

 全体として見ると、トピック集といった形式になると思います。この形式の問題点は、全体像がつかみにくいということだと思います。ただその欠点は大きな問題ではないと考えています。それは、 Java EE のプログラムを作成するとなると、かなりの試行錯誤が必要になります。またそうした作業を通じて、理解がより深まると考えるからです。

 特に、 jQuery や Bootstrap に関したことは別のところで書く予定にしています。

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

  MajorPageBean クラスの定義と主な変数に関するソース（部分）を示します。メソッドは省略してあります。

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

public MajorPageBean() { }
    
    private String id = "";
    
    private String name = "";
    
    private String comment = "";
    
    private String selectedId = "";
    
    private List<Major> majors;

    @Inject
    private MajorDao majorDao;
 }                     

                 

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

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

                     
@Stateless
public class MajorDao {
  …
}

                 

 初期化処理としては、現在データベースに登録されている全大分類を検索して、 majors 変数に格納する必要があります。通常の Java プログラムであれば、初期化処理はコンストラクタで行いますが、 Web アプリケーションではそうはいきません。それは、インスタンスの生成するタイミングとそのインスタンスが有効となるタイミングが異なるためです。これはポストバックのことを考えればよくわかります。ポストバックの場合、まずインスタンスを生成し、次にポストバックされた値からそのインスタンスの各変数を初期化することが必要です。その上で初めてインスタンスが有効になるわけです。ではその初期化用メソッドを見てみましょう。大事なのは、 @PostConstruct アノテーションを付けることです。

                     
    @PostConstruct
    private void initialize()
    {
        initialize(! FacesContext.getCurrentInstance().isPostback());
    }
    
    private void initialize(boolean flag)
    {
        if (flag)
            majors = select(majorDao.findAll());
    }                 

                 

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

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

                 

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

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

                     
    public void insert()
    {
        Major obj = new Major();
        obj.setId(getId());
        obj.setName(getName());
        obj.setComment(getComment());
        
        ArrayList<Executable> list = new ArrayList<>();
        list.add(majorDao.insert(obj));
        transact(list);
        
        clear();
    }                 

                 

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

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

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

                 

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

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

                     
    public void read() 
    {
        String key = getSelectedId();
        Major major = (Major) select(majorDao.uniqueKey(key));
        
        setId(major.getId());
        setName(major.getName());
        setComment(major.getComment());
        
        initialize(true);
    }                         

                 

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

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

    <form jsfc="h:form" action="majorPage.xhtml">
    …
        <input jsfc="h:commandButton" id="updateButtonOn" class="btn btn-primary" type="submit" value="更 新" action="#{majorPageBean.update()}" />
        <input id="updateButtonOff" class="btn btn-primary" type="button" value="更 新" disabled="disabled" />
    …
    </form>
                  
            
    public void update()
    {
        String key = getSelectedId();
        Major major = (Major) select(majorDao.uniqueKey(key));
               
        major.setId(getSelectedId());
        major.setName(getName());
        major.setComment(getComment());

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

                 

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

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

                 

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