Challenge Engineer Life !

エンジニア人生を楽しみたい!仕事や趣味で学んだ技術的なことを書いていくブログです。

PrimeFacesのCalendarでローカライズ

PrimeFacesのShowcaseに置いてあるCalendarコンポにLocalizationのサンプルがあります↓
http://www.primefaces.org/showcase/ui/calendarLocalization.jsf

locale属性を指定すれば動くのか!と安易に真似したのですが動きません。あれ?と。
ドキュメント(3.4のp.48)を読むと

you need to add the necessary translations to your page
manually as PrimeFaces does not include language translations.

自分で追加しないとダメとあります。なるほど。で、参考ページのリンクがドキュメント内にあるのですが、飛べない…orz
その後、ググったのですが、多分ここじゃないかな、と。
http://code.google.com/p/primefaces/wiki/PrimeFacesLocales

Showcaseのhtmlソースみると確かにJavaScriptの記述がありました。
あと日本の方でも利用されている方がいらっしゃって
http://foolprogrammer.blogspot.jp/2012/06/primefaces-showcasecalendarlocalization.html
とても参考になりました。

この記述をあちこちで書くのはありえないので、jsファイルにして読み込んだりするのがよさそうです。

<h:outputScript library="js" name="xxx.js" />

が、自分の場合は、複合コンポーネントで包んでみました。

<composite:interface>
    <composite:attribute name="disabled" default="false" shortDescription="有効かどうか" />
    <composite:attribute name="readonly" shortDescription="読取専用かどうか" default="false" />
    <composite:attribute name="required" shortDescription="必須入力かどうか" default="false" />
    <composite:attribute name="tabindex" shortDescription="タブインデックス" />
    <composite:attribute name="value" shortDescription="日付(java.util.Date型)" />
    <composite:attribute name="pattern" shortDescription="日付表示フォーマット" default="yyyy/MM/dd"/>
    <composite:attribute name="locale" shortDescription="言語(ja等)" default="ja" />
    <composite:attribute name="navigator" shortDescription="年月のナビゲーション" default="true" />
    <composite:attribute name="showButtonPanel" shortDescription="ボタンパネル有無(今日、閉じるボタン)" default="true" />
</composite:interface>
    
<composite:implementation>
    <h:outputStylesheet library="css" name="calendar.css"/>
        
    <script type="text/javascript">
        PrimeFaces.locales['ja'] = {
            closeText : '閉じる',
            prevText : '先月',
            nextText : '翌月',
            currentText : '今日',
            monthNames : [ '1月', '2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            monthNamesShort : [ '1月', '2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            dayNames : ['日曜','月曜','火曜','水曜','木曜','金曜','土曜'],
            dayNamesShort : ['日','月','火','水','木','金','土'],
            dayNamesMin : ['日','月','火','水','木','金','土'],
            firstDay : 1,
            showMonthAfterYear : true
        };
    </script>

    <p:calendar
        id="cal" 
        disabled="#{cc.attrs.disabled}"
        readonly="#{cc.attrs.readonly}"
        required="#{cc.attrs.required}"
        styleClass="calendar"
        tabindex="#{cc.attrs.tabindex}"
        value="#{cc.attrs.value}"
        pattern="#{cc.attrs.pattern}"
        locale="#{cc.attrs.locale}"
        navigator="#{cc.attrs.navigator}"
        showButtonPanel="#{cc.attrs.showButtonPanel}"/>        
</composite:implementation>

属性はとりあえず必要そうなものだけ入れてます(自分が使うコンポでは時刻まで使わないので省略)。showMonthAfterYearをtrueにすると「11月 2012」→「2012 11月」になりました。PrimeFaces素晴らしい。

そういえば上記の複合コンポーネント書いてたら、JavaScriptの部分にて
リテラル内のUnicode - 移植性の高いエスケープ・シーケンスに変換しますか?」
という警告がNetBeansで出ました。変換すると「閉じる」は「\u9589\u3058\u308b」とエスケープされました。

JavaScript Unicode エスケープ」とググったら色々出てきたので、もう少し調べてみないと。
情けない話ですが、Windowsフォームの開発ばかりしてきた人間にとって、Web開発はまだまだ知らないことだらけです。
とはいえ仕事では言い訳にならないので、頑張らねば…。

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