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

Challenge Java EE !

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

PrimeFaces MobileのMobile Componentsを試してみる

PrimeFaces Mobile JSF

今日もPrimeFaces Mobileを触ってみました。
昨日も書きましたが、JSFで書けるので普通に画面作ってる感覚に近くて楽です(^^)

PrimeFaces MobileではMobile Componentsと呼ばれるモバイル専用コンポーネントが10個あります。

それ以外は通常のPrimeFacesコンポーネントが使えて、それがモバイル用のrenderされるみたいです。

以下、ユーザーガイドで紹介されているMobile Components達。
順序はユーザガイドで紹介されている順です。

  • ButtonGroup
  • Content
  • Field
  • Footer
  • Header
  • InputRange
  • NavBar
  • Page
  • Switch
  • View

PageとView、Header、Footer、Content辺りは昨日のサンプルでも
既出なので省きます。あまり説明はないですが…(^^;

ButtonGroup

ボタンのグルーピングです。以下のように書けば

<pm:buttonGroup>
    <p:commandButton value="はい" />
    <p:commandButton value="いいえ" />
</pm:buttonGroup>

こんな感じに
f:id:kikutaro777:20130628190046j:plain

orientation属性でhorizontalを指定してみます。

<pm:buttonGroup orientation="horizontal">
    <p:commandButton value="はい" />
    <p:commandButton value="いいえ" />
</pm:buttonGroup>

こんな感じに(画像下のほう)
f:id:kikutaro777:20130628190056j:plain

Field

ラベルとテキストを整形してくれます。

まずField使わずに置いた場合

<h:outputLabel for="input" value="入力:"/>
<h:inputText id="input" />

こうなります
f:id:kikutaro777:20130628190121j:plain

これをFieldで囲むと

<pm:field>
    <h:outputLabel for="input2" value="入力:"/>
    <h:inputText id="input2" />
</pm:field>

一行表示に
f:id:kikutaro777:20130628190135j:plain

縦が微妙にずれてる気もするけど… (つд⊂)ゴシゴシ

InputRange

置いただけ

<pm:inputRange />

f:id:kikutaro777:20130628190144j:plain

NavBar

こんな感じに定義して

<pm:navBar>
    <p:button value="ホーム" icon="home" />
    <p:button value="情報" icon="info" />
    <p:button value="検索" icon="search" />
</pm:navBar>

こんな表示
f:id:kikutaro777:20130628190151j:plain

Switch
<pm:switch onLabel="はい" offLabel="いいえ" />

「はい」の場合
f:id:kikutaro777:20130628190224j:plain

「いいえ」の場合
f:id:kikutaro777:20130628190201j:plain

全部乗せ

昨日のサンプルに全部盛り込んでみました。

<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 title="hello mobile">
        <pm:view id="viewA">
            <pm:header title="A"/>
            <pm:content>
                <h:outputLink value="#viewB?transition=slide">Bへ遷移</h:outputLink>
            </pm:content>
        </pm:view>
        
        <pm:view id="viewB">
            <pm:header title="ヘッダー">
                <f:facet name="left">
                    <p:button value="戻る" icon="back" />
                </f:facet>
                <f:facet name="right">
                    <p:button value="設定" icon="gear" />
                </f:facet>
            </pm:header>
            
            <pm:content>
                <pm:buttonGroup>
                    <p:commandButton value="はい" />
                    <p:commandButton value="いいえ" />
                </pm:buttonGroup>
                
                <pm:buttonGroup orientation="horizontal">
                    <p:commandButton value="はい" />
                    <p:commandButton value="いいえ" />
                </pm:buttonGroup>
                
                <h:outputLabel for="input" value="入力:"/>
                <h:inputText id="input" />
                
                <pm:field>
                    <h:outputLabel for="input2" value="入力:"/>
                    <h:inputText id="input2" />
                </pm:field>
                
                <pm:inputRange />
                
                <pm:navBar>
                    <p:button value="ホーム" icon="home" />
                    <p:button value="情報" icon="info" />
                    <p:button value="検索" icon="search" />
                </pm:navBar>
                
                <pm:switch onLabel="はい" offLabel="いいえ" />
            </pm:content>
            
            <pm:footer>
                フッター
            </pm:footer>
        </pm:view>
    </pm:page>
</f:view>

f:id:kikutaro777:20130628190315j:plain

ふむふむ。

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