PrimeFacesのTabViewをJavaScriptで操作する

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>