CODEWITHSUNDEEP
androiddojoibm-mobilefirstdojox.mobile
Vijay Patil
Vijay Patil

Reputation: 31

Worklight: Issue while rendering dojo 1.9 widgets on actual device

Environment:

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.

Upvotes: 0

Views: 233

Answers (1)

Vijay Patil
Vijay Patil

Reputation: 31

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.

Upvotes: 0

Related Questions