xpages - 如何风格和作为移动设备中的页脚导航栏？

Question

如何设置 xe:tabBar 和 xe:tabBarButton 控件的样式，使其看起来像带有按钮（包括图标、文本）的“本机”页脚？

Answer 1

要将标签栏留在页面底部，请使用 Dojo ScrollablePane (dojox.mobile.ScrollablePane)。如果您使用的是 Domino 9，那么这个小部件已经可用并且可以像这样实现：

<xe:appPage
id="appPage1"
pageName="firstpage">
<xe:djxmHeading
    id="heading1"
    label="Scrollable Pane Demo">
</xe:djxmHeading>
<xp:div
    id="scrollableContent"
    dojoType="dojox.mobile.ScrollablePane">
        <xp:this.dojoAttributes>
            <xp:dojoAttribute name="fixedFooter">
                <xp:this.value><![CDATA[#{javascript:var mobFooter = getComponent("tabBar1");
return mobFooter.getClientId(facesContext);}]]></xp:this.value>
            </xp:dojoAttribute>
            <xp:dojoAttribute name="fixedHeader">
                <xp:this.value><![CDATA[#{javascript:var mobHeader = getComponent("heading1");
return mobHeader.getClientId(facesContext);}]]></xp:this.value>
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="scrollDir"
                value="v">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="fixedHeaderHeight"
                value="54">
             </xp:dojoAttribute>
            <xp:dojoAttribute
                name="fixedFooterHeight"
                value="54">
            </xp:dojoAttribute>
        </xp:this.dojoAttributes>
    YOUR CONTENT GOES HERE
</xp:div>
<xe:tabBar
    id="tabBar1"
    barType="segmentedControl"> 
</xe:tabBar>
</xe:appPage>

页眉和页脚必须位于 ScrollablePane 之外，并且功能需要以下 dojo 属性：

• 固定标头
• 固定页脚
• 滚动目录
• 固定页眉高度
• 固定页脚高度

如果您使用的是 Domino 8.5.3，那么您必须将 ScrollablePane 及其所有依赖项添加到您的 NSF 中，我在此处的博客文章中对此进行了介绍。您可以在此处找到其他文档。

Answer 2

您将需要实现一个 dojo 的 scrollableView 或 scrollablePane 版本，以使导航栏可靠地定位在移动设备的底部。请注意 Keith Strickland 在 NotesIn9 上的视频，该视频解释了如果您遇到任何问题如何执行此操作。

使用 Domino 9.0，我们 Red Pill Development 发现，仅使用 CSS 设置 NavBar 样式并不能保证导航栏在每次应用程序页面转换和/或屏幕方向和/或部分刷新时始终下降到屏幕底部。

Answer 3

目前这对于当前的 XPages 移动控件集是不可能的。我们已经记录了 PHAN962BJ8 以在未来解决这个问题。