PrimeFaces Mobileで始める初めてのモバイル画面

なんかiPad対応のモバイル専用画面のプロトタイプを作るような話があるらしく、それは是非関わってみたい！というオーラをアピールするために週末で何か作ってみたいなーと思ってます。

将来性を考えるとHTML5とかやってみたいのですが、今の自分が手っ取り早く作れるのはなんだろう…と考えたらPrimeFaces Mobileじゃなかろうか…と(^^;

実は触ったことなかったのですが、ちょっと試してみたら結構簡単に画面表示まで作れたのでまとめてみようと思います。

JSFでモバイル画面作れるのは何気嬉しいです！

環境は

IDE:NetBeans 7.3
フレームワーク：Java EE 6
JSFコンポ：PrimeFaces Mobile 0.9.4

です。

PrimeFaces MobileはjQuery Mobileをベースに開発されたJSF向けのモバイルコンポーネントです。Showcaseは以下からどうぞ。
http://www.primefaces.org/showcase-labs/mobile/index.jsf

PrimeFaces同様、開発者向けのユーザガイドドキュメントが充実しているので良い感じ(^^)

なお、対応しているモバイル機器はjQuery mobileに準拠しているようで、以下のサイトへのリンクとなっていました。
http://jquerymobile.com/gbs/

Mavenのpom.xml

とりあえずMavenでプロジェクトを作りました。
PrimeFaces同様、MavenのレポジトリはCentralではなくPrimeFaces専用なので以下定義が必要です。

<repositories>
    <repository>
        <id>prime-repo</id>
        <name>Prime Repo</name>
        <url>http://repository.primefaces.org</url>
    </repository>
</repositories>

で、必要なjarは以下です。最初mobileのだけ入れてましたが動かず、PrimeFacesがいるっぽいです。

<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>3.5</version>
</dependency>
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces-mobile</artifactId>
    <version>0.9.4</version>
</dependency>

画面

モバイル画面だけの前提ですが、とりあえず、サンプルを見る限り、bodyとかの定義はなくても以下のようにviewだけで書けるようです。

A画面とB画面があって、リンクでAからBへ遷移するサンプル(ちなみにindex.xhtml)

<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="mobile">
        <pm:view id="viewA">
            <pm:header title="A"/>
            <pm:content>
                <h:outputLink value="#viewB">Bへ遷移</h:outputLink>
            </pm:content>
        </pm:view>
        
        <pm:view id="viewB">
            <pm:header title="B"/>
            <pm:content>
                B
            </pm:content>
        </pm:view>
    </pm:page>
</f:view>

実行

とりあえず普通にPCのブラウザで確認ですが、以下のような感じに。

初期表示

リンクを押して遷移

遷移のエフェクトパターンを変更

<h:outputLink value="#viewB">Bへ遷移</h:outputLink>

と書いていた部分を例えば

<h:outputLink value="#viewB?transition=slide">Bへ遷移</h:outputLink>

とすると、横スライドのエフェクトで遷移します。

わかりにくいですが(^^;

この感じだと、ちょっとしたプロトレベルならサクサク作れそうな気も。。。

あとで肝心のiPadからみてみねば。