Worklight: Issue while rendering dojo 1.9 widgets on actual device

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

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.

Was it helpful?

Solution

I fixed this issue by doing following changes -

  1. In dojox/mobile/deviceTheme.js, replaced "holodark" with "android" for all android devices.
  2. 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.

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