How can you use an graphic buttons in the xe:tabBar

Question

I have a requirement for having several graphical buttons at the bottom of each screen of a Mobile App. I have used the logic found in Graham Acres NotesIn9 presentation (#121) to get the Mobile Control Tab Bar (xe.tabBar) to load at and stay at the bottom of the screen. However adding anything other than Tab Bar Buttons (xe:tabBarButton) causes the control to display off to the right of center, and not in the center or left justified as needed.

Here is code I tried:

<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>

This resulted in a skewed to the right presentation and clicking the graphic did not successfully open the other page.

Since that did not work I tried a simple Panel control (xp:panel) with the graphics and that presented better but the links still fail to open the other page. Here is that code:

<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

Take a page from Bootstrap and see if Font-Awesome has an icon that would suite you. Then simply add it to your button with the respective CSS class