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.
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.
Related
I'm working on an app that uses Evernote SDK for Android. I can login and access notes on Sandbox environment, but when I switch to production I get an error. My key was activated on production.
I'm using
com.evernote:android-sdk:2.0.0-RC4
I've followed the official guide https://github.com/evernote/evernote-sdk-android
Should I change
The error is:
org.scribe.exceptions.OAuthException: Response body is incorrect. Can't extract token and secret from this: '<html>
<head>
<script>
(function() {
var request = new XMLHttpRequest();
request.open('GET', '/IsLoggedIn.action', true);
request.onload = function() {
if (this.status === 403) {
window.location = '/Login.action?targetUrl='
+ encodeURIComponent(window.location.pathname);
}
};
request.send();
})();
</script>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="Shortcut Icon" href="/favicon.ico?v2" type="image/x-icon" />
<link rel="stylesheet" href="/redesign/global/css/reset.css" />
<link rel="stylesheet" href="/redesign/global/css/fonts.css" media="all" />
<link rel="stylesheet" href="/redesign/global/css/header.css" />
<link rel="stylesheet" href="/redesign/global/css/layout.css" />
<title>Evernote Error</title>
</head>
<body>
<div class="header">
<div class="header-inner">
<a href="https://evernote.com/" class="evernote-logo"><svg xmlns="http://www.w3.org/2000/svg" width="160" height="36" viewBox="0 0 160 36">
<title>Evernote</title>
<g fill="none" fill-rule="evenodd" transform="translate(-14.89 -14.89)">
<rect width="189.752" height="65.168" y=".117"/>
<g fill="#fff" fill-rule="nonzero" transform="translate(14.89 14.89)">
<g transform="translate(38.54 5.84)">
<path class="evernote-logo-2018-text" d=""/>
</g>
<path class="evernote-logo-2018-elephant" d=""/>
</g>
</g>
</svg></a></div>
</div>
<div id="container-boundingbox" class="wrapper">
<div id="container" class="wrapper">
<div class="main">
<div class="page-header">
<h1>
Oops, we encountered an error.</h1>
</div>
<div>
<p>
Sorry, we've encountered an unexpected error.</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer wrapper">
Terms of ServicePrivacy Policy<span class="footer-entry last">Copyright 2018 Evernote Corporation. All rights reserved.</span>
</div>
</div>
</body>
</html>
'
at org.scribe.extractors.TokenExtractorImpl.extract(TokenExtractorImpl.java:41)
at org.scribe.extractors.TokenExtractorImpl.extract(TokenExtractorImpl.java:27)
at org.scribe.oauth.OAuth10aServiceImpl.getRequestToken(OAuth10aServiceImpl.java:64)
at org.scribe.oauth.OAuth10aServiceImpl.getRequestToken(OAuth10aServiceImpl.java:40)
at org.scribe.oauth.OAuth10aServiceImpl.getRequestToken(OAuth10aServiceImpl.java:45)
at com.evernote.client.android.EvernoteOAuthHelper.createRequestToken(EvernoteOAuthHelper.java:106)
at com.evernote.client.android.EvernoteOAuthHelper.startAuthorization(EvernoteOAuthHelper.java:127)
at com.evernote.client.android.login.EvernoteLoginTask.startAuthorization(EvernoteLoginTask.java:144)
at com.evernote.client.android.login.EvernoteLoginTask.execute(EvernoteLoginTask.java:51)
at com.evernote.client.android.login.EvernoteLoginTask.execute(EvernoteLoginTask.java:23)
at net.vrallev.android.task.Task.executeInner(Task.java:67)
at net.vrallev.android.task.TaskExecutor$TaskRunnable.run(TaskExecutor.java:191)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1162)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:636)
at java.lang.Thread.run(Thread.java:764)
Just in case anyone stumbles upon the same issue: I have contacted evernote and it turned out the key was not activated on production although I was told it was.
When launching my Ionic app on iOS device and in Ionic Lab, there are various popups that appear on launching. I have not been able to find out what they mean and how to resolve so I'm hoping someone here might be able to help.
The app will load if I accept the first popup, then cancel the rest.
The popups are:
Popup 1:
gap_init:2
Popup 2:
gap:[null,"CoreAndroid","messageChannel","CoreAndroid867226728"]
Popup 3:
gap:[null,"CoreAndroid","show","CoreAndroid1105789195"]
Popup 4:
gap:[null,"CoreAndroid","overrideBackbutton","CoreAndroid633498247"]
Because of the error saying "CoreAndroid" I'm assuming it's something to do with an android configuration.
I'm using the framework based off the package found on CodeCanyon. Link below: Codecanyon Ionic App
I can post any code you wish me to so please let me know.
Here is the home.html file:
<ion-view view-title="{{appname}}">
<ion-nav-buttons side="right">
<div class="cart-total ink">
<button class="button ink icon-cart button-icon button-clear ion-ios-search-strong" ui-sref="quicksearch"></button>
</div>
<div class="cart-total ink" ui-sref="app.cart">
<div ng-if="totalCartItem>0">
<span>{{totalCartItem}}</span>
</div>
<button class="button ink button-icon button-clear fa fa-shopping-basket"></button>
</div>
</ion-nav-buttons>
<ion-content class="home bg" overflow-scroll="true" scroll-to-top="150" delegate-handle="scroller">
<ion-refresher
on-refresh="doRefresh()">
</ion-refresher>
<div class="slider" ng-if="homeSlider">
<ion-slide-box auto-play="1000" does-continue="true">
<ion-slide ng-repeat="x in slides track by $index">
<a href="#/app/{{x.params}}">
<div class="img" style="background-image: url({{x.img}})"></div>
<ion-spinner class="onload"></ion-spinner>
</a>
</ion-slide>
</ion-slide-box>
</div>
<div class="row">
<ion-scroll direction="x">
<div class="wide">
<div ng-repeat="x in categories" ui-sref="app.category({id: x.id, slug: x.slug, title: x.name})">
<div class="slide-item">
<div ng-if="!x.image" class="img" style="background-image: url(img/product.png)"></div>
<div ng-if="x.image" class="img" style="background-image: url({{x.image}})"></div>
<ion-spinner class="onload"></ion-spinner>
</div>
<span class="out"></span>
<h3 class="center" ng-bind-html="x.name"></h3>
</div>
</div>
</ion-scroll>
</div>
<div ng-if="products" class="item item-divider">
LATEST PRODUCTS
</div>
<div class="row grid" ng-repeat="x in products track by $index" ng-if="$index%2==0">
<div class="col col-50 ink item" ng-if="$index < products.length" ui-sref="app.product({id: products[$index].id})">
<div class="badge">
<span ng-if="!products[$index].in_stock" class="sold">{{$root.Dict.TXT_SOLD}}</span>
<span ng-show="products[$index].regular_price > 0 && products[$index].on_sale" class="sale">
{{products[$index] | discount | number:0}}% OFF
</span>
</div>
<ion-spinner class="onload"></ion-spinner>
<div class="img" style="background-image: url({{products[$index].featured_src ? products[$index].featured_src : 'img/product.png'}})"></div>
<div class="info">
<h3>{{products[$index].title}}</h3>
<span ng-bind-html="products[$index].price | currency:format:decimal"></span>
<del ng-show="products[$index].regular_price > 0 && products[$index].on_sale" ng-bind-html="products[$index].regular_price | currency:format:decimal"></del>
</div>
</div>
<div class="col col-50 ink item" ng-if="$index+1 < products.length" ui-sref="app.product({id: products[$index+1].id})">
<div class="badge">
<span ng-if="!products[$index+1].in_stock" class="sold">{{$root.Dict.TXT_SOLD}}</span>
<span ng-show="products[$index+1].regular_price > 0 && products[$index+1].on_sale" class="sale">
{{products[$index+1] | discount | number:0}}% OFF
</span>
</div>
<ion-spinner class="onload"></ion-spinner>
<div class="img" style="background-image: url({{products[$index+1].featured_src ? products[$index+1].featured_src : 'img/product.png'}})"></div>
<div class="info">
<h3 ng-bind-html="products[$index+1].title"></h3>
<span ng-bind-html="products[$index+1].price | currency:format:decimal"></span>
<del ng-show="products[$index+1].regular_price > 0 && products[$index+1].on_sale" ng-bind-html="products[$index+1].regular_price | currency:format:decimal"></del>
</div>
</div>
</div>
<ion-infinite-scroll on-infinite="loadMore()" distance="10%" ng-if="more"></ion-infinite-scroll>
</ion-content>
<scroll-to-top-button animate="true">
<div class="float-button">
<span class="height-fix">
<a class="content">
<i class="ion-ios-arrow-up"> </i>
</a>
</span>
</div>
</scroll-to-top-button>
And here is the index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com http://ionstore.ionicpremium.com https://*.paypal.com/*">
<title>Ionstore</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/ionic.material.min.css" rel="stylesheet">
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="fonts/line-icon/css/line-icon.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
</head>
<body ng-app="app">
<ion-nav-view></ion-nav-view>
<!-- LOAD IONIC -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ionic.material.min.js"></script>
<!-- NGCORDOVA -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- PAYPAL GATEWAY -->
<script type="text/javascript" src="js/paypal-mobile-js-helper.js">
</script>
<!-- LOAD CONTROLLER -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filter.js"></script>
<script src="js/directive.js"></script>
<script src="js/services.js"></script>
<script src="js/config.js"></script>
<script src="js/language.js"></script>
<script src="js/topscroller.js"></script>
<script src="js/wcapi.js"></script>
<!-- LOAD ANGULAR MOMENT -->
<script src="js/moment.min.js"></script>
<script src="js/angular-moment.min.js"></script>
</body>
</html>
Modify your index.html file. cordova.js must be called at the bottom of the page. This worked for me.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com http://ionstore.ionicpremium.com https://*.paypal.com/*">
<title>Ionstore</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/ionic.material.min.css" rel="stylesheet">
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="fonts/line-icon/css/line-icon.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
</head>
<body ng-app="app">
<ion-nav-view></ion-nav-view>
<!-- LOAD IONIC -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ionic.material.min.js"></script>
<script type="text/javascript" src="js/paypal-mobile-js-helper.js">
</script>
<!-- LOAD CONTROLLER -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filter.js"></script>
<script src="js/directive.js"></script>
<script src="js/services.js"></script>
<script src="js/config.js"></script>
<script src="js/language.js"></script>
<script src="js/topscroller.js"></script>
<script src="js/wcapi.js"></script>
<!-- LOAD ANGULAR MOMENT -->
<script src="js/moment.min.js"></script>
<script src="js/angular-moment.min.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</body>
</html>
You are using the android cordova.js in the iOS app.
You don't have to add any cordova.js file, just link it in the index.html, it will be generated per platform and copied to the right place.
I'm using visual studio to develop hybrid applications to windows phone, android and iphone.
I can't get this code to work, and I don't know why. This is working good in Android but not in Windows Phone.
Basically I can not see the form. Blank appears instead.
Can someone, please, help me?
My code:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<!-- CidadaoAtivo references -->
<link rel="stylesheet" href="css/jquery/jquery.mobile-1.4.5.min.css">
<script src="cordova.js"></script>
<!--<link rel="stylesheet" href="css/jquery/jquery.mobile.structure-1.4.5.css">-->
<script src="scripts/JQuery/jquery-2.1.3.min.js"></script>
<script src="scripts/JQuery/jquery.mobile-1.4.5.min.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/contactos.js"></script>
<script src="scripts/winstore-jscompat.js"></script>
<script src="scripts/platformOverrides.js"></script>
<div data-role="page" id="login">
<div data-role="header" style="background-color:lightblue; color:black;">
</div>
<div data-role="main" class="ui-content" style="max-width: 500px; margin:auto">
<div style="max-width: 500px; margin:auto; font-family: Arial, Helvetica, sans-serif" >
<form>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Palavra-Passe" />
<div data-role="controlgroup" data-type="vertical">
<a class="ui-btn ui-corner-all ui-icon-check ui-btn-icon-left" id="loginMail">Entrar com Email</a>
<a class="ui-btn ui-corner-all" style="background-color:blue; color:whitesmoke; background-image:url(images/Facebook_Sticker_Icon.png); background-position:10px; background-repeat:no-repeat; background-size:24px;">Entrar com Facebook</a>
</div>
</form>
</div>
</div>
<div data-role="footer" data-position="fixed" style="background-color:lightblue; color:black; font-family: Arial, Helvetica, sans-serif; font-size:10px" >
<div data-role="navbar" style="max-width: 500px; margin:auto">
<ul>
<li>Entrar</li>
<li>Registar</li>
</ul>
</div>
</div>
</div>
Set the Build Action of each script as Content. To do this right click on a script file from the Solution Explorer and choose Properties. You will get Build Action in the Properties windows then.
I updated my code from jqm 1.3.2 to 1.4.0. To make sure that there were no issues after the upgrade I copied the navigation buttons to a test file. Sure enough, it does not work on the mobile browser on Samsung Galaxy 3 but works fine in Chrome. It also works fine in Chrome, FF 26.0, and IE 11 on a win 7 laptop. Here is my code -
<!DOCTYPE html>
<html>
<head>
<title>whnwh</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.0.css" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.4.0.js"></script>
</head>
<body>
<div data-role="page" id="p_home" data-title="when n where" data-theme="a">
<div data-role="header"><!-- header -->
<p />
<img src="images/logo.png" />
</div><!-- /header -->
<div role="main" class="ui-content">
<div data-role="controlgroup" data-mini="false" data-corners="false" data-type="horizontal"><!-- navbar -->
home
my calendar
add
sign in
sign out
</div>
</div><!-- /navbar -->
</div><!-- page p_home -->
</script>
</body>
</html>
This is how the above page looks in Galaxy browser -
and in Chrome on Galaxy as well as all browsers on laptop -
So, what can I do to fix this?
Thanks in advance.
RD
I guess either no one has run into this problem or no one has an answer.
I have lost a day in migrating and fixing all incompatibilities between 1.3.2 and 1.4.0.
I am frustrated, will revert back to 1.3.2 jqm and take this task on at some later time.
You are not alone!
The following configuration was incompatible with my android galaxy 2.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
I tested jquery-1.10.2.min.js separately and it works just fine. It's only because of jquery.mobile-1.4.1.min.js.
Previous jquery mobile version will work which is
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
Jquery mobile styles are not rendering in android App when storing the jquery mobile css and js file locally in assets folder of android project. But the same is working by including the jquery mobile files from CDN. Help me
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SAMPLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="file:///android_asset/www/css/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" charset="utf-8" src="file:///android_asset/www/js/cordova-2.7.0.js"></script>
<script src="file:///android_asset/www/js/jquery.mobile-1.3.2.min.js"></script>
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="js/TamkeenJQ.js"></script>
-->
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
Header
</div>
<div data-role="content">
content
<button onclick="changePageFn()">Change Page</button>
</div>
<div data-role="footer" data-position="fixed">
Footer
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed">
Header
</div>
<div data-role="content">
content
</div>
<div data-role="footer" data-position="fixed">
Footer
</div>
</div>
</body>
</html>
First add the jquery css files.
Then add the jquery 1.9.1 js file.
then add the jquery mobile 1.3.2 js file.
Actually it looks some issue in your implementation.
If you have included the correct path of your js and css files related to jquery mobile.
Solution: Reverify the path of js and css files.
Use the following order in the head tag
<link rel="stylesheet" href="css/jquerymobile-1.3.2.min.css" />
<script type="text/javascript" charset="utf-8" src="js/cordova-2.7.0.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquerymobile-1.3.2min.js"></script>