Как оформить ‹xe:tabBar› и ‹xe:tabBarButton› как панель навигации нижнего колонтитула на мобильном устройстве?

Чтобы панель вкладок оставалась внизу страницы, используйте панель прокрутки Dojo (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:

• фиксированный заголовок
• фиксированный нижний колонтитул
• прокруткаDir
• фиксированныйHeaderHeight
• фиксированныйFooterHeight

Если вы используете Domino 8.5.3, вам придется добавить ScrollablePane и все его зависимости в ваш NSF, о чем я расскажу в сообщении блога здесь. Дополнительную документацию можно найти здесь.

Вам потребуется реализовать версию dojo scrollableView или scrollablePane, чтобы панель навигации надежно позиционировалась в нижней части мобильного устройства. Посмотрите видео Кейта Стрикленда на NotesIn9, в котором объясняется, как это сделать, если у вас возникнут проблемы.

Используя Domino 9.0, мы в Red Pill Development обнаружили, что стилизация NavBar только с помощью CSS не гарантирует, что панель навигации всегда будет опускаться вниз экрана при каждом переходе страницы приложения и/или ориентации экрана и/или частичном обновлении.

В настоящее время это невозможно с текущим набором мобильных элементов управления XPages. Мы зарегистрировали PHAN962BJ8, чтобы решить эту проблему в будущем.