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

Challenge Java EE !

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

PrimeFaces 4.0のStickyコンポーネント

JSF PrimeFaces

PrimeFacesの4.0では幾つかコンポーネントが増えるのですが、その1つにstickyコンポーネントがあります。
正式リリースの前ですが、SNAPSHOTを触ってみました。

stickyは名詞では「付箋(紙)」、形容詞では「粘着性のある」といった意味のようです。
http://eow.alc.co.jp/search?q=sticky

コンポを触ってみるとわかりますが、target属性で指定したコンポーネントを画面の一部にペタっとへばりつかせることができる感じです(^^;
Showcaseは以下にあるので、ブラウザのスクロールバーを下へもっていってみて下さい。
http://www.primefaces.org/showcase/ui/sticky.jsf

Stickyで指定するコンポーネントは何でもよさなので、メッセージをサンプルに使ってみました。

ページの上段にスケジュールコンポを置いて
f:id:kikutaro777:20130908211735j:plain

その下に必須のテキストがあります。
f:id:kikutaro777:20130908221638j:plain

メッセージエリアは上段に固定されていて、ボタン押下すると表示されます。
f:id:kikutaro777:20130908221806j:plain

必須テキストも赤くなってますが、下にあるのでメッセージエリアはみえません。
f:id:kikutaro777:20130908212621j:plain

この例は少し雑ですが、業務系のシステムとかでは、メッセージ表示するエリアは(ダイアログ系を除いて)固定のエリアに表示したりするケースが多い気がします(今回のようなテキストに対するエラーはテキストの横に出したりすることもあると思いますが、画面全体にかかわるようなエラーの場合)

で、stickyコンポーネントで、メッセージコンポーネントを指定すると以下のような表示になります。
f:id:kikutaro777:20130908212006j:plain

stickyコンポーネントを定義する前のビュー定義は以下です。

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form id="frm">
            <!-- メッセージエリア -->
            <p:messages id="msg" />
            
            <!-- スケジュールコンポ置いただけ -->
            <p:schedule />
            
            <!-- 入力テキストとボタン -->
            <p:inputText id="txtReq" required="true" requiredMessage="必須ですよー"/>
            <p:commandButton value="送信" ajax="false" action="index.xhtml" />
        </h:form>
    </h:body>
</html>

で、先ほどの例みたいにメッセージエリアを固定的に表示したい場合はformの中に以下コンポを追加して置くだけです(^^)簡単に追加できるのがありがたい。

<!-- target属性でメッセージコンポを指定 -->
<p:sticky target="frm:msg" />

自分の場合は、実際の案件で、一覧情報が多い場合に(件数制限してページングしつつも)、あるユーザさん達は非常に小さい解像度で画面をみるから上段メッセージがみえない。みたいな指摘があったこともあったりしたので、こういうコンポで手軽に対応したいなぁと思ったり(^^;

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