Worklight: Issue while rendering dojo 1.9 widgets on actual device

Question

Environment:

Worklight 6.0
Dojo 1.9.1
ADT 22.0
API level 14
Device - Samsung Tab 3

We have developed a mobile app using worklight 5.0 and dojo 1.8. Now we have upgraded to worklight 6.0 and dojo 1.9. After upgrade we are seeing following issue while rendering dojo widgets.

The widgets are getting rendered fine in simulator (MBS). But on the actual device, the widgets are not getting rendered properly. The tab bar buttons are getting rendered as labels with bold underline etc.

The HTML file -

<head>
        <meta charset="UTF-8">
        <title>RQMOffline</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="shortcut icon" href="images/favicon.png">
        <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
        <link rel="stylesheet" href="css/MobileApp.css">
        <link rel="stylesheet" href="css/qmMobile.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, mblThemeFiles:['@theme',['qm.mobile','qmMobile']], async: true, parseOnLoad: false, mblHideAddressBar: false" src="dojo/dojo.js"></script>
    </head>
    <body id="content" style="display: none;">
        <div id="AppBody" >
            <div id="localTestList" data-dojo-type="dojox.mobile.View" style="selected:true" >
                <div id="mainViewHeadning" data-dojo-type="dojox/mobile/Heading" fixed="top">
                    <ul id="filtersBar" data-dojo-type="dojox.mobile.TabBar" 
                        data-dojo-props='barType:"segmentedControl"'>
                        <li id="runTabBarButton" data-dojo-type="dojox.mobile.TabBarButton"
                            data-dojo-props='label:"labelInProgress", moveTo:"downloadedTestListView", selected:true'></li>
                        <li id="resultTabBarButton"
                            data-dojo-type="dojox.mobile.TabBarButton"
                            data-dojo-props='label:"labelCompleted", moveTo:"uploadResultListView"'></li>
                    </ul>
               </div>
                <div id="tabBarNode" data-dojo-type="dojox/mobile/Heading" fixed="bottom">
                    <ul id="mainTabBar" data-dojo-type="dojox/mobile/TabBar" single="true">
                        <li id="mainShowTcerList" data-dojo-type="dojox/mobile/TabBarButton"
                            data-dojo-props='icon1:"images/download-act-d.png", icon2:"images/download-act-e.png", label:"labelGetTests", moveTo:"getTestsListView"'></li>
                        <li id="mainShowLocalTest" data-dojo-type="dojox/mobile/TabBarButton"
                            data-dojo-props='icon1:"images/run-act-d.png", icon2:"images/run-act-e.png", label:"labelRunTests", selected:true'></li>
                        <li id="mainShowSettings" data-dojo-type="dojox/mobile/TabBarButton"
                            data-dojo-props='icon1:"images/setting-act-d.png", icon2:"images/setting-act-e.png", label:"labelSettings", moveTo:"settingsView"'></li>
                    </ul>
                </div>
            </div>
        </div>
        <script src="js/initOptions.js"></script>
    <script src="js/MobileApp.js"></script>
    <script src="js/messages.js"></script>
    </body>

Note: I have added all the android related css file under www folder. This was working fine with dojo 1.8

Any help on this will be appreciated.

When you upgraded to Dojo 1.9, did you create a new Worklight Project, and was a Dojo Library Project (by default it would be called dojoLib in your workspace) created along with it? — nsand
@nsand I have followed the steps provided in Worklight Infocenter <pic.dhe.ibm.com/infocenter/wrklight/v6r1m0/…> I have also tried it by creating new sample worklight project in new workspace. I have provided Dojo Library Project name as "dojo19Lib". Added some dojo widgets. But still seeing the same issue on actual device. — Vijay Patil
Could you take a screenshot of the display ? Because when you say "The tab bar buttons are getting rendered as labels with bold underline", it sounds to me like the default Holodark rendering. see archive.dojotoolkit.org/nightly/dojotoolkit/dojox/mobile/tests/… . — Patrick Ruzand
Thanks @PatrickRuzand.. (Doesn't have reputation to insert images :( .. ) Yes, the app is getting rendered with Holodark theme. I have modified the devideTheme.js file to use "android" instead of "holodark". Now the issue I am facing is with the bigger layout (font) for widgets. Am I missing any css file ? Any suggestion ? — Vijay Patil
Did you make sure to do a full clean and rebuild so that worklight could pull in the necessary dojo modules from the now external library? (I really dislike dojo, and the fact Worklight does this) — Zarathuztra

Vijay Patil Vijay Patil · Accepted Answer · 2014-02-03T14:12:58

I fixed this issue by doing following changes -

In dojox/mobile/deviceTheme.js, replaced "holodark" with "android" for all android devices.
For bigger font size issue, added 'targetSdkVersion' attribute to property in AndroidManifest.xml - <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="13"/>

Thanks all for your help.

Worklight: Issue while rendering dojo 1.9 widgets on actual device

1 Answers