xPagesのTabbed PanelをPartial RefreshでAjax化させよう

2009年10月20日
|In XPages アプリケーション開発
|By ktatsuki

xPagesのTabbed Panelってとても便利だと思うのですが、デフォルトだと、クリック毎にページ全体を読み直すのでかっこ悪い。
そこで、Partial Refreshを使ってAjax化させてみました。

<xp:panel id="container">
<xp:tabbedPanel id="tabbedPanel1">
<xp:this.selectedTab>
<![CDATA[#{javascript:(null == sessionScope.selectedTabId) ? "tabPanel1" : sessionScope.selectedTabId}]]>
</xp:this.selectedTab>
<xp:tabPanel label="Tab1" id="tabPanel1">
Tab1のコンテンツが入ります。
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="container">
<xp:this.action>
<![CDATA[#{javascript:sessionScope.selectedTabId = "tabPanel1"}]]></xp:this.action>
</xp:eventHandler>
</xp:tabPanel>
<xp:tabPanel label="Other" id="tabPanel2">
Tab2のコンテンツが入ります。
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="container">
<xp:this.action>
<![CDATA[#{javascript:sessionScope.selectedTabId = "tabPanel2"}]]>
</xp:this.action>
</xp:eventHandler>
</xp:tabPanel>
</xp:tabbedPanel>
</xp:panel>


ここでは、


１）各Tabの中にonclickイベントを作成。

２）Partial UpdateのElementに親タグのID”container”をRefreshIDに指定。

３）onclickイベントの中で、各タブごとに、selectedTabIdを以下のように指定する。

sessionScope.selectedTabId = “tabPanel1”


しかし、これをデザインのプロパティからやろうとすると、操作が難しい（というか出来ない）ので、ソースをガシガシ書いていくのが吉です。


ちなみに、自分の環境では8.5.0までは “_10f.push is not a function”のエラーが出て上手く動いていなかったので、XPages Blogにある通り8.5.1にアップデートしたら問題は解消されました。


Partial refresh and Firefox 3.5, Safari, Opera on 8.5.0 – XPages Blog – The XPages Blog


I just stumbled upon this post in the 8.5 forum: it describes the known problem that partial refreshes on a Domino 8.5.0 server causes the message “_10f.push is not a function”.


This happens with Firefox 3.5, Safari 4, Opera and I believe in IE 8, too.There is no workaround at least none I’m aware of but using full refreshes all the time.But: the solution is underway! This is fixed in the upcoming 8.5.1.


引用元: Partial refresh and Firefox 3.5, Safari, Opera on 8.5.0 – XPages Blog – The XPages Blog.


Tabbed Panel
XPages アプリケーション開発