Mobile Test Workbench does not recognize dojomobile - ibm-mobilefirst

I created a simple dojomobile app in worklight 6.1. I have the mobile test workbench installed in the same eclipse env as worklight. The code below is the dojo code for the hybrid app's index.html. It is a very basic dojo mobile app using default header information from worklight.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>index</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/main.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, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
</head>
<body style="display: none;">
<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:'Heading'"></div>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Category</h2>
<div data-dojo-type="dojox.mobile.RoundRect">
<div data-dojo-type="dojox.mobile.RoundRectList">
<div data-dojo-type="dojox.mobile.ListItem" data-dojo-props="label:'Item'"></div>
<div data-dojo-type="dojox.mobile.ListItem" data-dojo-props="label:'Item'"></div>
</div>
</div>
<button data-dojo-type="dojox.mobile.Button">Button1</button>
<button data-dojo-type="dojox.mobile.Button">Button2</button>
<button data-dojo-type="dojox.mobile.Button">Button3</button>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
The problem when I register the app in the test workbench and record a test on my android device (Samsung s4). The test app does not recognize it is running dojo. The display of the app on the device is missing the header line. The test contents from from the recorded steps say that I clicked on JQuery Button and not dojox.mobile.Button.
Weird thing, when you go to replay the recorded test, the app displays properly (header and other dojo controls), and the script fails because it is looking for JQuery Button. I could go in and edit the script so that it is correct, but that is not what I want to do for every script that I record or rerecord because of app changes.
Please let me know what I'm doing wrong or is this a known problem.


Jquery is added by default into the worklight application. See the script tag with
<script>window.$ = window.jQuery = WLJQ;</script>
in your Html head tag. Remove it and try!

Related

I have made my Shopify app embedded from Shopify Partners, but the app still opens in its own browser window

I have made a Shopify app, it is a sales channel... now I want to embed the app, but the app always shows in a new browser window.
This is what I have done: From Shopify Partners Account, I have gone to the App's Extension and made it embedded:
Now when user installs the app, I redirect the users to the oAuth page... if user accepts the app is installed. 
Next time user logs in to the app, I return the following code (C#, ASP.NET MVC):
public ActionResult Handshake(string shop)
{
return View("Test"); // test view
}
I have tried returning both of the following content in the Test view:
a complete HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/3.21.1/polaris.min.css" />
</head>
<body>
<div class="Polaris-Page">
<div class="Polaris-Page__Header">
<h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">Settings</h1>
</div>
<div class="Polaris-Page__Content">
<p>Page Content</p>
</div>
</div>
</body>
</html>
Just a div which contains my app:
<div class="Polaris-Page">
<div class="Polaris-Page__Header">
<h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">Settings</h1>
</div>
<div class="Polaris-Page__Content">
<p>Page Content</p>
</div>
</div>
But the HTML that I return never gets embedded in Shopify Admin page... It always appear in a new browser tab.
How can I embed this app?

I had to change my response with the following and then the app was embedded:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/3.21.1/polaris.min.css" />
<script src="https://cdn.shopify.com/s/assets/external/app.js"></script>
<script type="text/javascript">
ShopifyApp.init({
forceRedirect: true,
apiKey: 'my-api-key',
shopOrigin: 'https://store-name.myshopify.com'
});
ShopifyApp.Bar.loadingOff();
</script>
</head>
<body>
<div class="Polaris-Page">
<div class="Polaris-Page__Header">
<h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">Settings</h1>
</div>
<div class="Polaris-Page__Content">
<p>Page Content</p>
</div>
</div>
</body>
</html>
This link is also a good resource.

How to set a html as the home page of the app

I used easy java simulation to create a simulation and export it into an HTML file with some reference js and CSS file
How do I edit it to make an ionic app
<ion-content>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/ejss.css" />
<script src="assets/js/common_script.js"></script>
<script src="assets/js/textresizedetector.js"></script>
<script src="assets/js/ejsS.v1.min.js"></script>
</head>
<body>
<div role="button" id="_topFrame" style="text-align:center"></div>
<script src="assets/js/Test.js"></script>
</body>
</ion-content>
Use these code on the home page but running it does not display anything

IBM Worklight 6.1 - Previewing a Dojo hybrid app displays a blank page

I am developing a Hybrid application in Worklight 6.1 using Dojo 1.9.3. As a startup i just created a simple project with a View and a scrollable view.
Index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>index</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/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
</head>
<body style="display: none;">
<div data-dojo-type="dojox.mobile.View" id="mainView"
data-dojo-props="selected:true" style="background-image: url('images/bgnew.jpg'); background-repeat: repeat;">
<div data-dojo-type="dojox.mobile.ScrollableView" id="view1"
data-dojo-props="selected:true,scrollDir:'v'">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Login',fixed:'top'">
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
After creating building and deploying the project i tried to Run it by clicking "Preview as Common Resources" link. But unfortunately nothing displays on my screen. I checked my browser console i can see no error showing.
Dojo is already present in my www folder.
How to solve this issue.
Any help is appreciated.

Cannot reproduce. I've done the following in Worklight 6.1.0.0:
Created a new Worklight project
Added an application with the Dojo library (using the provided wizard)
Right-click on the Common folder > Run As > Preview
The browser opened, displaying the app.
The same worked if opening Worklight Console and selecting Preview as Common Resources.
Tested on OS X 10.9.2
Chrome as default external browser (Eclipse > Preferences > General Web Browser > use external web browser)

It happened to me today, and I found a solution :
Use the default Dojo provided by the IBM Worklight (actually the 1.9.1 ) instead of the 1.9.3
When I tried to import and use the 1.9.3, it did the same thing than the original poster. I think it is not already supported or there is a problem we do not think about during the importation.

dojo.ready call shows error in Worklight 6.0

I have created a dojo based Worklight project and a hybrid application it.
I did a drag and drop of a dojo mobile button which gets added inside a dojo mobile view. All of this works fine and renders fine in the various environments (common, android etc.). It also correctly shows the look and feel in Rich Page Editor.
But then i added a script that has a very simple dojo.ready call. Now when i run this application i get a console error saying ReferenceError: dojo is not defined. Any idea why that is happening?
I know that i have correctly setup the dojo as other pieces seem to work. I have also checked that the dojo.js is loading (which is obvious as the other pieces are working). I am using IBM Worklight 6.0 developer edition with all capabilities installed.
Here is my sample code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>jmdwl</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<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/jmdwl.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, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
<script>
dojo.ready(function() {
alert("Here");
});
</script>
</head>
<body id="content" style="display: none;">
<div data-dojo-type="dojox.mobile.ScrollableView" id="view0" data-dojo-props="selected:true">
<!--application UI goes here-->
<button data-dojo-type="dojox.mobile.Button">Label</button>
</div>
<script src="js/initOptions.js"></script>
<script src="js/jmdwl.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
Thanks,
Gaurav

If you want to use dojo.ready you must initialize it first.
<script>
require(["dojo/ready"], function(ready){
ready(function() {
alert("Here");
});
});
Here's the reference : http://dojotoolkit.org/reference-guide/1.8/dojo/ready.html#dojo-ready
Update 1
Which Version of dojo do you use by now? 1.6 or 1.7+ ?
The new AMD requires to initialize the modules like i write before.
Have you read this threads? There seem to be an failure while importing the dojo Libarys. I guess this could have something to do with your error.
worklight fail to require DOJO Combobx on real device -fail to load ... /dijit/form/nls/it/ComboBox.js
and
Worklight core-web-layer.js errors
Regards, Miriam

Hide the ugly startup screen (dojox not fully parsed yet)

When I start my application, the dojo start loading but are not yet fully parsed and thus screen looks ugly!!!
Is there a way to hide this ugly screen until it is fully loaded a parsed?
Thanks
Dominique
EDIT ADD SNIPPET
I heard that WL Studio would hide automatically the body and thus no need to create an overlay.
Here my html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Test</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/Test.css">
<script>
window.$ = window.jQuery = WLJQ;
</script>
<script type="text/javascript"
data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false"
src="dojo/dojo.js"></script>
</head>
<body id="content" style="display: none;">
<div id="main" data-dojo-type="dojox.mobile.View"
data-dojo-props='selected:true'>
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props='fixed:"top"'>Main Screen</div>
<button id="refreshBte" data-dojo-type="dojox.mobile.Button"
style="width: 100%">Refresh</button>
<button id="settingsBte" data-dojo-type="dojox.mobile.Button"
style="width: 100%">Setting</button>
</div>
<!--application UI goes here-->
<script src="js/initOptions.js"></script>
<script src="js/Test.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
and my js
function wlCommonInit(){
require([ "dojo/core-web-layer", "dojo/mobile-ui-layer",
"dojo/mobile-compat-layer" ], dojoInit);
}
function dojoInit() {
require([ "dojo", "dojo/parser", "dojox/mobile", "dojox/mobile/compat",
"dojox/mobile/deviceTheme", "dojox/mobile/Heading", "dojox/mobile/Button" ],
function(dojo) {
dojo.ready(function() {
});
});
}
I tried also to add hidden="hidden" in the but it doesn't change anything.
Any idea?

Yes there is,
you need to build a loading overlay. Check out this tutorial:
http://dojotoolkit.org/documentation/tutorials/1.6/recipes/loading_overlay/

What I normally did with this is:
<div id="main" style="visibility: hidden;"></div>
After the parsing is complete:
set the main visibility to visible again.
Might not fully solve the problem (depends on how fast the browser able to resolve the layout), but you won't be getting plain html displayed until it is:converted into widget.
Further reference:
dojo/Ready = to detect when the page is parsed.