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

Challenge Java EE !

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

PrimeFacesのTabViewをJavaScriptで操作する

JSF JavaScript PrimeFaces

PrimeFacesのタブコンポーネントは実際に使ってみると、ちょくちょく予期せぬ挙動をすることがあったりして悩まされることがあります(^^;使い方が悪い気もしますが。

そんなTabView君、User's Guideを読むと、Client Side APIが揃っていて、JavaScriptで遊べるっぽいです。

JavaScript、超初心者なのですが…検証の中で使う機会があったのでトライしてみました。

JSFのビューで

  • 無効ボタンを押すと現在アクティブになっているタブ以外を無効にする
  • 有効ボタンを押すと全てのタブを有効にする

というしょぼいサンプルです(^^;

<?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>TabViewのClient side APIで遊ぶ</title>
    </h:head>
    <h:body>
        <h:form id="frmTabView">
            <p:commandButton value="タブ無効" onclick="disableTab();"/>
            <p:commandButton value="タブ有効" onclick="allenableTab();"/>
            
            <p:tabView id="tbView" widgetVar="mainTabView" >
                <p:tab id="tb1" title="タブ1"/>
                <p:tab id="tb2" title="タブ2"/>
                <p:tab id="tb3" title="タブ3"/>
            </p:tabView>
           
            <script type="text/javascript">
                //アクティブじゃないタブを無効化
                function disableTab(){
                    var tabNum = mainTabView.getLength();
                    var actIdx = mainTabView.getActiveIndex();
                    
                    for(i = 0; tabNum > i; i++){
                        if(i !== actIdx){
                            mainTabView.disable(i);
                        }
                    }
                }
                
                //全てのタブを有効化
                function allenableTab(){
                    var tabNum = mainTabView.getLength();
                    
                    for(i = 0; tabNum > i; i++){
                        mainTabView.enable(i);
                    }
                }
            </script>
        </h:form>
    </h:body>
</html>

なぜかわからないのですが、for分で「i < tabNum」と書いたらNetBeans君に怒られました(^^;
f:id:kikutaro777:20130419212206j:plain
やばい、理由がわかっていない。

表示すると、こんな感じで

f:id:kikutaro777:20130419211748j:plain

タブは動きます。タブ2を選択して

f:id:kikutaro777:20130419211757j:plain

無効ボタンを押すと

f:id:kikutaro777:20130419211803j:plain

アクティブなタブ以外が無効になった!

有効ボタンを押すと

f:id:kikutaro777:20130419211819j:plain

なんてショボイサンプルだ!

前に書いた「JavaScript内でJSFのEL式が使えることを初めて知りました ~画面表示時にダイアログ表示する挙動を例に~」にもあるように、EL式と組み合わせていけばJSFでも色々できるかなと。

可読性は落ちそうですが(^^;

あー本当にJavaScript力が欲しい…

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