如何在xe：tabBar中使用图形按钮

Question

我要求在移动应用程序的每个屏幕的底部有几个图形按钮。我使用Graham Acres NotesIn9 presentation (#121)中的逻辑来获取移动控制选项卡栏（xe.tabBar）以加载并保持在屏幕的底部。但是，添加Tab Bar Buttons（xe：tabBarButton）以外的任何内容都会导致控件显示在中心的右侧，而不是根据需要显示在中间或左对齐。

这是我试过的代码：

<xe:tabBar
    id="tabBar1">
    <xe:this.dojoAttributes>
        <xp:dojoAttribute
            name="center"
            value="true">
        </xp:dojoAttribute>
    </xe:this.dojoAttributes>
    <xp:image
        url="/BottomButtonHome.jpg"
        id="image1">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="complete">
            <xp:this.action>
                <xe:moveTo
                    direction="Left to Right"
                    targetPage="homepage"
                    transitionType="slide">
                </xe:moveTo>
            </xp:this.action>
        </xp:eventHandler>
    </xp:image>
</xe:tabBar>

这导致偏向正确的演示文稿并单击图形未成功打开另一页。

由于这不起作用我尝试了一个简单的Panel控件（xp：panel）与图形，并提出更好，但链接仍然无法打开另一页。这是代码：

<xp:panel
    style="height:54px;width:100%">
    <xp:image
        url="/bottomButtonHome.jpg"
        id="image2">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="complete">
            <xp:this.action>
                <xe:moveTo
                    direction="Left to Right"
                    targetPage="homepage"
                    transitionType="slide">
                </xe:moveTo>
            </xp:this.action>
        </xp:eventHandler>
    </xp:image>
</xp:panel>

Answer 1

从Bootstrap中获取一个页面，看看Font-Awesome是否有适合您的图标。然后只需将其添加到具有相应CSS类的按钮即可