MacのGrowlみたいなメッセージコンポーネントを試してみる

HTML5を少し触ってみて、今後PrimeFacesとかRichFacesとかのリッチコンポーネントとの棲み分け・共存がどうなっていくんだろう？と気になる今日この頃(^^;

ただ業務系のWebシステムだと普通にIE7や8が指定されたりするので、HTML5を使う日が来るのか…とも思ったり。まあ仕事関係なく触ればいいんですが。

さて、今日はそんな業務系からのちょっとしたネタです。

PrimeFacesにはGrowlコンポーネントというものがあり、実際にシステムで利用したわけではないのですが、検討の1つになったので、将来的には何らか使うケースもあるのかなぁ、と。

……

…

業務系に限った話ではないですが、バリデーションによるエラーメッセージの表示などはお客さんが非常に気にされる点の1つかと思います。
メッセージの表示場所、表示タイミング、消えるタイミング、メッセージ内容……。

コンポーネントのそばに表示する

以下は例え話ですが、バリデーションエラーを以下のように出したりしたとします。

問題のテキストの横に出るからわかりやすいよね。と。

ちなみに上記サンプルはPrimeFacesを使って

<h:panelGrid columns="2">
    <p:inputText id="txt" validatorMessage="必須です" />
    <p:message id="message" for="frm:txt" showDetail="true" />
</h:panelGrid>

と定義するだけです。

メッセージエリアを設けて表示する

でもテキスト入力にあまり関係ないような場合、メッセージ表示エリアみたいなのが望まれたりもあるんじゃないかと。

PrimeFacesではメッセージ表示したい場所にmessagesコンポを置くだけ。

<p:messages id="messages" showDetail="false" />

あとはツールチップで出す、とかもあるかもしれませんが、大体の選択肢はこんな感じなのかなぁと。

でも画面によってはなんか縦が長いものもあったりして（画面内のスクロールとはなくて）、メッセージエリアが見えない、なんてことを言われるケースもあったりなかったり…。

以下はDataTableみたいなもので行が長いパターンですが、もうメッセージエリアとかみえない(^^;

で、こんなときの手段の1つとして考えてもいいのかなと思ったのがGrowlです。

Growlによるメッセージ

私はあまりMacユーザではないのでわからないのですがMacにGrowlという通知システムがあって、それをPrimeFacesが模したコンポーネントです。

ASCII OS X必携ツール「Growl」の知って得する使い方
http://ascii.jp/elem/000/000/562/562062/

こいつを使うと画面に重ね合わせた感じでメッセージが表示されて

スクロールで移動してもついてきます(sticky属性をtrueにしないと消えますが)。

コンポーネントの配置は簡単でmessagesとほぼ同じ扱いです。

<p:growl id="growlMessage" showDetail="false" sticky="true"/>

formの中において、あとはボタンでupdateとかすれば表示されます。

便利で簡単に使えるコンポの1つかなぁと(^^)