Tabs not working in a Dojo app

Question

I am trying to make multiple pages in my hybrid app on IBM MobileFirst Platform on eclipse juno using the Dojo toolkit.

In design view: the text in pages other than the homepage does not appear.

after running and deploying all environments, i preview on the browser(chrome) and the tabs are not working

<!DOCTYPE HTML>
<html>
<head>
        <meta charset="UTF-8">
        <title>MoodApp</title>
        <meta name="viewport"
         content="width=device-width, initial-scale=1, maximum-scale=1, user- scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="stylesheet" href="css/main.css">
        <script>window.$ = window.jQuery = WLJQ;</script>
        <script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
        <script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
    </head>


    <body style="display: none;">

<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:false">
    <div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
    </div>
    <ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
        <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:loginPage,transition:'slide',icon:'images/done.png'">Log in</li><li
            data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:signupPage,icon:'images/comments16.png',transition:'slide'">Sign up</li>
    </ul>

    <div data-dojo-type="dojox.mobile.View" id="loginPage" data-dojo-props="selected:true">Enter username and password</div>
    <div data-dojo-type="dojox.mobile.View" id="signupPage" data-dojo-props="selected:false">sign up now</div>


</div>




<script src="js/initOptions.js"></script>
        <script src="js/main.js"></script>
        <script src="js/messages.js"></script>
    </body>

does this error have to do with the preview issue ??The server "MobileFirst Development Server" could not start. — CodeX
so how can I preview or run or emulate to see the working tabs? my environment is android @idan Adar — CodeX
Look at the Console > MobileFirst Development Server log. What do you see there? Or just try with a fresh workspace. BTW, you said you've previewed the app in the browser - how did you do that if the server is not running. ... — Idan Adar
actually i see all are started and syncronized under mobilefirst development server .. i even tried putting my IP address instead of localhost — CodeX

Idan Adar Idan Adar · Accepted Answer · 2015-04-12T21:00:25

Eclipse Juno is not a supported version of Eclipse in IBM MobileFirst Platform - upgrade to Eclipse Java EE Kepler or Luna.
In design mode, you will see only the active tab, so per your code you will see only view 0. Swap between the true/false values of data-dojo-props="selected to switch between your pages... but better yet, see the fuller example below.

Your tabs do not work because you did not put the moveTo values in single quotes:

<ul data-dojo-type="dojox.mobile.TabBar">
    <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'loginPage',transition:'slide',icon:'images/done.png'">Login</li>
    <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'signupPage',icon:'images/comments16.png',transition:'slide'">Signup</li>
</ul>

Fuller example:

<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:false">
    <div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
    </div>

    <p>
        This is view 0.<br/>
        This is view 0.<br/>
        This is view 0.<br/>
    </p>

    <ul data-dojo-type="dojox.mobile.TabBar">
        <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'loginPage',transition:'slide',icon:'images/done.png'">Login</li>
        <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'signupPage',icon:'images/comments16.png',transition:'slide'">Signup</li>
    </ul>
</div>

<div data-dojo-type="dojox.mobile.View" id="loginPage" data-dojo-props="selected:false">
    <div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
    </div>
    Enter username and password
</div>

<div data-dojo-type="dojox.mobile.View" id="signupPage" data-dojo-props="selected:false">
    <div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
    </div>

    sign up now
</div>

Tabs not working in a Dojo app

1 Answers