How do you place the XPages mobile controls Tab Bar at the bottom of the screen? - xpages

Question

I'm trying to get a bottom tab bar in Xpages Mobile controls. It's typically black with dark icons and the page changes has you press an icon.
I couldn't figure out how to get the look and feel with the actual Mobile Controls Tab bar. That seems geared for segmentedTabBar rather then I guess standard Tab bar. I tried to access Dojo manually with the code below and I got the look and feel but the tab bar is showing at the top and not the bottom of the screen.
I'd rather use the mobile controls version but regardless I'm easy. I'd love to get a bottom tab bar working in XPages.
Any advice would be appreciated.
<xe:singlePageApp id="singlePageApp1" selectedPageName="home">
<xe:appPage id="appPage1" pageName="home">
<ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"/Add_32x32.png",
selected:true'>
Featured
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"/1_48x48.png"'>
Categories
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"1_48x48.png"'>
Top 25
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"Add_32x32.png"'>
Search
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"1_48x48.png"'>
Updates
</li>
</ul>
</xe:appPage></xe:singlePageApp></xp:view>

Answer 1

Look in the Extension Library book from IBM Press on page 295. This chapter on Tab Bar contains an example of an action bar at the bottom of the screen:
<xe:tabBar id="tabBar1">
<xe:tabBarButton id="tabBarButton1" label="Button 1"></xe:tabBarButton>
<xe:tabBarButton id="tabBarButton2" label="Button 2"></xe:tabBarButton>
<xe:tabBarButton id="tabBarButton3" label="Button 3"></xe:tabBarButton>
</xe:tabBar>
It appears only to be a segmented tab bar if you use barType="segmentedControl".

Answer 2

I am trying to accomplish the same thing myself. I suspect the issue is caused because the XPages Mobile Controls do not yet support a Mobile Scrollable Pane which would allow for the positioning of fixed size (scrollable) content between the header and the footer. The css will most likely used absolute positioning of the tab bar to prevent it scrolling with the content. But when that has been accomplished you are going to need to implement some form of scrollable pane t stop the main content from scrolling over/under the toolbar.
The following CSS works "most" of the time but I found it is sometimes reluctant to snap into the correct location.
.rpTabBar {
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
height: 50px;
margin-top: -50px;
clear: both;
}

Answer 3

After looking at the dojo examples I have noticed the examples of the navbar remaining fixed at the bottom use the scrollableView control. The XPages appPage control is based on the standard view control. All of those examples seem to have the navBar float at the base of the content. After trying for a few weeks, I can see why. It seems next to impossible to get the navBar to stick to the bottom when using this control.
We haven't found a way yet to implement scrollableView without throwing away all the Xpages mobile controls. Instead we created a div inside each appPage that implements the dojo scrollablePane. Using this we can provide control ids for a fixed header and a fixed footer. And the navBar now sticks nicely at the bottom of every page.