PrimeFaces ExtensionsのBlock UIを利用してみました

現在のJava EE6開発で、ボタンの2度押しや連打をどう防ごうか少し前に考えたのですが、今回はPrimeFacesが持つBlockUIを利用する方針としています。

実際の動きは以下Showcaseで確認できます。

• PrimeFacesのBlockUIデモ

非常に簡単に利用できるので、良い感じです。

そして、同じBlockUIコンポーネントがPrimeFaces Extensionsにもあります。
以下がShowcaseです。

• PrimeFaces ExtensionsのBlockUIデモ

こちらも非常に簡単に使えて、しかもBlockUIの内部にコンポーネントが配置できます(^^)/

PrimeFaces Extensionsはまだバージョンが0.6.3と若い感じなので、利用することを悩みましたが、BlockUIに関してはこちらをメインで採用することにしました。

各画面で入れたりするのは手間なので、JSFのテンプレートに以下のように配置して

<pe:blockUI target="cpqTemplateFrm" widgetVar="blc">
    <h:panelGrid columns="2">
        <p:graphicImage id="imgLoaderBlc" value="/resources/images/ajax-loader.gif" styleClass="status"/>
        <h:outputLabel id="lblBlcProcessing" value="#{tmpBean.dictonary(component.id)}" />
    </h:panelGrid>
</pe:blockUI>

各画面では

<p:commandButton id="btnSearch" -- 中略 -- onstart="blc.block()" oncomplete="blc.unblock()"/>

と書いて利用する感じです。

実行すると以下のような感じに

こちらのほうがユーザに若干優しい…のかな(^^;
業務システムだと「突然画面暗くなるだけだとわかんないよ、メッセージとか入れなさいよ」とか普通に言われたりもしてしまうので…。まあケースバイケースで使い分け、かなと思います。