JSFでもレスポンシブWebをやってみたい！

Twitterで以下の情報が流れてました。

Responsive Design for your ADF Faces Web Applications http://t.co/KbmxhiaRNN
— OracleBlogs (@OracleBlogs) 2013, 10月 31

OracleのJSF コンポーネントであるADF FacesでレスポンシブWebをやってみた話です。

レスポンシブWebは、Web系の方からすれば常識的なことかもしれないのですが、私が初めて知ったのは「HTML5とか勉強会　ビギナーズ」に参加してデモをみたときでした。
当時のエントリ↓

HTML5とか勉強会ビギナーズ第2回へ参加しました #html5j
このあと以下の本を買ってました(^^;けどパラパラ見ただけでした、すみません。

うわっ、すげー、と思いつつ、こういうのってHTML5使わないとダメ(=Java EE的にはEE 7でJSF2.2かぁ)、とか勝手に思ってました(^^;
でも最初のTwitterのリンク先にも書いてありますが、CSS3 Media Queriesを使える環境であればいいんですね。

そんなわけで、JSFでもそういうことやってみようと思って、とりあえず雑なサンプルですが、以下のようなものをJava EE6で作ってみました。

メニューのサンプル

メニューはADFではなく、PrimeFacesのコンポーネントを使ってます。
（こういう例でサードパーティー使うのもあれなんですが、このメニューの例だと後述するメリットがあるので使いました）

実行して表示されると単純にメニューがあるだけなんですが
f:id:kikutaro777:20131101231822j:plain

画面を小さくして(タブレットサイズくらい)するとメニューの表示形式が変わります。
f:id:kikutaro777:20131101231848j:plain

JSFの中身

レスポンシブWebについてはまだ全然勉強していないため、ネットでいくつか見たサンプルを参考に作ってみたレベルです(^^;

CSSで以下を定義しました。

@media screen and (min-width : 700px) and (max-width : 1280px){
    .verticalmenu{
        display: none !important;
    }
}

@media screen and (max-width : 700px){
    .horizontalmenu{
        display: none !important;
    }
}

.menuFont{
    font-size: 0.8em;
}

mediaを2つ定義して、横幅が700pxから1280pxだったら、横のメニューを非表示に、横幅が700px以下だったら縦のメニューを非表示にする感じです。

JSFのxhtmlは

<?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://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:outputStylesheet library="css" name="responsiveMenu.css" />
    <h:body>
        <h:form styleClass="menuFont">
            <!-- 縦のメニュー -->
            <p:menu model="#{menuBean.menuModel}" styleClass="horizontalmenu" />
            
            <!-- 横のメニュー -->
            <p:menubar model="#{menuBean.menuModel}" styleClass="verticalmenu"/>
        </h:form>  
    </h:body>
</html>

管理Beanは

package jp.co.hoge.mediaqueriessample;

import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;
import lombok.Getter;
import lombok.Setter;
import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.DefaultSubMenu;
import org.primefaces.model.menu.MenuModel;

@Named
@RequestScoped
public class MenuBean implements Serializable{

    //メニューの中身
    @Getter @Setter
    private MenuModel menuModel;
    
    @PostConstruct
    public void init(){
        //以下、メニューの動的生成
        menuModel = new DefaultMenuModel();
        
        DefaultSubMenu opp = new DefaultSubMenu("商談");
        DefaultMenuItem newOpp = new DefaultMenuItem("新規作成");
        DefaultMenuItem delOpp = new DefaultMenuItem("削除");
        opp.addElement(newOpp);
        opp.addElement(delOpp);
        
        DefaultSubMenu quote = new DefaultSubMenu("見積");
        DefaultMenuItem newQuote = new DefaultMenuItem("新規作成");
        DefaultMenuItem delQuote = new DefaultMenuItem("削除");
        quote.addElement(newQuote);
        quote.addElement(delQuote);
        
        menuModel.addElement(opp);
        menuModel.addElement(quote);
    }
}