Challenge Engineer Life !

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

PrimeFaces Mobileのデフォルトテーマ5つを見比べる

PrimeFaces MobileではjQuery Mobile同様にテーマを作成することができるようです。
その際にはjQuery MobileのTheme Rollerをそのまま使うみたいですが(^^;
http://jquerymobile.com/themeroller/
まぁ、本体のPrimeFacesと同じっちゃ同じですね(^^;

一応デフォルトでも5種類のテーマが使えるようになっていて、viewタグやheaderタグで指定すれば簡単に変更できます。

属性名はswatchという名前で、Alc先生によると「材料見本、ちょっとした寄せ集め」という意味があるそうです。

すさまじくやる気を感じられないのが、属性指定する値。まさかの

  • a
  • b
  • c
  • d
  • e

っていう…(ノД`)・゚・。 。゚PrimeFacesらしくない手抜き感。せめてテーマの雰囲気を示すような属性値にしてくれればいいのに…どうしたんだろ。

追記:上記取り消し線入れました。jQuery Mobileのデフォルトスウォッチがそのような設定になっているようです。(コメント頂いた@den2snさん、ありがとうございました)

jQuery Mobileの日本語サイトより↓
http://dev.screw-axis.com/doc/jquery_mobile/api/theme_framework/

てか、上記サイトみるほうが詳しいので、今回のブログエントリはほぼ不要でした(ノД`)

各々、以下のような定義で、viewタグ、headerタグ、footerタグにswatchが指定できます。

<span style="font-size: 90%"><f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"
        contentType="text/html"
        renderKitId="PRIMEFACES_MOBILE"
        xmlns:h="http://java.sun.com/jsf/html">

    <pm:page id="pgLoginTheme" title="loginTheme">
        <pm:view id="viewLoginTheme" swatch="a">

            <!-- ヘッダ -->
            <pm:header id="headerLoginTheme" 
                title="ログイン画面でテーマ変えてみる" swatch="a"/>
            
            <!-- コンテンツ -->
            <pm:content id="contentLoginTheme">
                
                <pm:field id="fieldLoginUserTheme">
                    <h:outputLabel id="lblLoginUserTheme" 
                       for="txtLoginUser" value="ログインユーザ名" />
                    <h:inputText id="txtLoginUserTheme" />
                </pm:field>

                <pm:field id="fieldLoginPasswordTheme">
                    <h:outputLabel id="lblLoginPasswordTheme" 
                       for="txtLoginPassword" value="ログインパスワード" />
                    <p:password id="txtLoginPasswordTheme" />
                </pm:field>
                
                <h:form>
                    <p:commandButton id="btnLoginTheme" value="ログイン" />
                </h:form>
            </pm:content>

            <!-- フッタ -->            
            <pm:footer id="footerLoginTheme" swatch="a">
                <h:outputLabel id="footerCopyrightTheme" 
                   value="Copyright テスト株式会社" />
            </pm:footer>
            
        </pm:view>
    </pm:page>
</f:view></span>

属性値を変えて画面を並べてみると以下のような感じ

swatchの指定がない場合

f:id:kikutaro777:20130701194746j:plain

swatch="a"を指定した場合

f:id:kikutaro777:20130701194751j:plain

swatch="b"を指定した場合

f:id:kikutaro777:20130701194755j:plain

swatch="c"を指定した場合

f:id:kikutaro777:20130701194800j:plain

swatch="d"を指定した場合

f:id:kikutaro777:20130701194804j:plain

swatch="e"を指定した場合

f:id:kikutaro777:20130701194808j:plain

swatchをviewタグ、header/footerタグで別に指定した場合

f:id:kikutaro777:20130701194812j:plain

こんなミックスも可能。

てか、a,b,c,d,eじゃ全然イメージわかなくて頭の中で結びつかないヽ(o`Д´o)ノ

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