読者です 読者をやめる 読者になる 読者になる

Challenge Java EE !

Java EEを中心に趣味や仕事における開発メモを書いています。

PrimeFacesのAutoCompleteコンポーネント

PrimeFaces JSF AutoComplete

今回の開発案件ではPrimeFacesのAutoCompleteコンポーネントを利用しています。

手軽にサクッと使えて便利なのと、Java 8使っていればStream APIでのフィルタも簡単にできて良い感じです。

例えば次のような管理Beanを作って

@Named(value = "autoCompleteBean")
@ViewScoped
public class AutoCompleteBean implements Serializable{
    
    @Getter @Setter
    private String selectedMember;
    
    public List<String> listNogizaka(String input){
        return Arrays.asList("MaiShiraishi", "NanaseNishino" ,"RinaIkoma",
                "MaiHukagawa", "NanamiHashimoto","ErikaIkuta");
    }
}

ビューでは、autoCompleteのcompleteMethod属性に対して、表示するリストを返すメソッドをバインドします。value属性には選択した値を格納する変数を指定します。

listNogizakaメソッドの引数inputには入力された文字列が都度入ってきます。

<h:body>
    <h:form prependId="false">
        <p:autoComplete 
            value="#{autoCompleteBean.selectedMember}"
            completeMethod="#{autoCompleteBean.listNogizaka}" />
    </h:form>
</h:body>

実行して、テキストに文字を入力すると次のように該当部分がボールドで表示されたリストがでます。

f:id:kikutaro777:20150317184838j:plain

該当するリストだけ出したい場合などはフィルタ処理を入れるだけ。

public List<String> listNogizaka(String input){
    return Arrays.asList("MaiShiraishi", "NanaseNishino" ,"RinaIkoma",
            "MaiHukagawa", "NanamiHashimoto")
            .stream()
            .filter(m -> m.contains(input))
            .collect(Collectors.toList());
}

f:id:kikutaro777:20150317185048j:plain

Stream APIの練習にもいいですね。

forceSelection属性

候補リストからしか選択できない(リストにない文字列を入力しても無効化される)ようにしたい場合はforceSelectionをtrueにします。

<p:autoComplete forceSelection="true" ...
dropdown属性

何も入力していないときに、全ての項目を出したい場合などにはdropdown属性をtrueにすれば次のようにボタンがついて、クリックすると全ての選択肢が表示されます。

f:id:kikutaro777:20150317185728j:plain

cache属性

クライアント側で入力文字と結果のキャッシュもできるらしく、cache属性をtrueにすればいいようです。

cacheTimeout属性もあって、どれくらい保持するかも調整できるとのこと。

選択の反映

ビューにラベルを追加して、選択された項目を表示してみます。

<h:form prependId="false">
    <p:autoComplete 
        value="#{autoCompleteBean.selectedMember}"
        completeMethod="#{autoCompleteBean.listNogizaka}">
        <p:ajax event="itemSelect" update="txtMember" />
    </p:autoComplete>

    <p:separator />

    <h:outputText id="txtMember" value="選ばれたメンバは#{autoCompleteBean.selectedMember}" />
</h:form>

初期表示です。
f:id:kikutaro777:20150317190547j:plain

文字入力して、選択肢を選びます。
f:id:kikutaro777:20150317190602j:plain

選択結果が反映されます。
f:id:kikutaro777:20150317190617j:plain

ビューにあるajaxイベントが味噌で、これで選択時にサーバサイドへselectedMemberがセットされます。

<p:ajax event="itemSelect" update="txtMember" />

属性は他にもあって、基本的にはPrimeFacesのDocumentにちゃんと書いてあるので読んでみてください。

追記:注意書き

@shinsukeodaさんからコメント頂きました(^^;

今回の開発では選択候補が英数字のみのコードみたいなモノだったので、ちゃんと検証してませんでした。

上記サンプルで日本語を入れたレベルであれば普通に動きましたが、、、

f:id:kikutaro777:20150317194112j:plain

色々属性と絡めると駄目かもしれないので、注意が必要そうです。

PrimeFacesのようなJSFライブラリは、すごく便利な反面、ハマるとホント辛いときがあります。

Showcaseだけみて「おー、これ良さげ、採用」と上流工程で決め打ちされると、実際に使うときに「それできない…」みたいなこともありえます(実際何度か経験してます…)

なので、あまり普段利用していないコンポーネントの採用時には、しっかり検証することが大事かなと。

検証せずに採用を決めてしまうのは、実装する立場のことを考えていない人ではないかなと(^^;

にほんブログ村 IT技術ブログへ
にほんブログ村
にほんブログ村 IT技術ブログ Javaへ
にほんブログ村