IBM Worklight 6.1 - Unable to have a working Dojo view transition

StackOverflow https://stackoverflow.com/questions/23515300

Question

I am new to working with worklight enviroment and started working it on recently.

I am using dojo version 1.9 (the IBM supllied one) , worklight 6.1, OS windows 7, eclipse juno sr2 64bit, IE 10 (For RPE), Google chrome latest (As default browser).

I have tried many widgets in dojo mobile and all of them work fine, i have been through other questions too like "Worklight 6.1 Android Applicaiton renders all views with no widgets" and followed all steps given in the solution and successfully created and viewed the pages on both MBS and android emulator. The only problem is when i am working with views. I add a tabBar from dojo and TabBarButtons for view transitions . Also add a few views in the pages and link them with the buttons. I also check and see that my main.js file is updated with all included elements. Although the toolbar along with default view is visible it does not switch view when i click on other buttons in tabBar. also onclicking the TabBarButtons an error popsup in chrome console - Uncaught TypeError: undefined is not a function

This error pops up on each click .

here is the structure of my source code of in the body tag of index.html file :-

<body style="display: none;">
<div data-dojo-type="dojox.mobile.View" id="view2"
        data-dojo-props="selected:true">
    <div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:true" >
            <div data-dojo-type="dojox.mobile.Heading"
        data-dojo-props="label:'Hello world'"></div>

        <button data-dojo-type="dojox.mobile.Button">Hello</button>
        <input data-dojo-type="dojox.mobile.TextBox"><input type="range"
            data-dojo-type="dojox.mobile.Slider"
            data-dojo-props="orientation:'H'">


    </div>
    <div data-dojo-type="dojox.mobile.View" id="view1"
        data-dojo-props="selected:false">
        <div data-dojo-type="dojox.mobile.Heading"
            data-dojo-props="label:'About',moveTo:'view0'">
            </div>
        <div data-dojo-type="dojox.mobile.RoundRect">
        Hello, we are a leading company in innovations
        </div>
    </div>
    <ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom" id="Tab1">
        <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:view0,transition:'slide'" id="tabB1">Home</li>
        <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:view1,transition:'slide'" id="tabB2">About</li>
    </ul>
    </div>
    <script src="js/initOptions.js"></script>
            <script src="js/main.js"></script>
            <script src="js/messages.js"></script>
    </body>

// Rest all is default code, no changes in jquery version or anything else I have also tried the following things and none of them seem to work:- -Copied and replaced files in www folder from dojoLib/dojo/dojo/nls/core-web-layer.js and mobile-web-layer.js files. -Kept the Tabbar out of any view directly into body tag and linked views to it. -Added id attribute to tabBar and tab button elements, and view elements. -turned off provide missing library resources and included missing files (if any) ,rebuilt the project and ran again.

Was it helpful?

Solution

The main issue (causing the exception) is the missing quotes around the view ids of the moveto attributes. It should be:

data-dojo-props="moveTo:'view0',

Once fixed, your sample will work.

But there are another issue, this time a design one: the TabBar fixed property is only meaningful when used with a ScrollableView (this property ensures the tabbar is not scrolled and keeps its bottom position). So your outer view should be a ScrollableView instead. Also, note that nesting views come with some limitations. In particular, using the 'moveto' attribute you cannot transition from a view to another view if the latter is contained in another parent.

Do not hesitate to look at the various tests in dojox/mobile/tests and to the documentation

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top