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
Related
I might be doing something wrong but I can't make this tutorial working and I have no idea why:
https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/excel-quickstart-vue
When I run the addin in Excel I get these errors (Edge DevTools Preview):
HTML1300: Navigation occurred.
taskpane.html (1,1)
[HMR] Waiting for update signal from WDS...
SCRIPT5007: SCRIPT5007: Unable to get property 'config' of undefined or null reference
taskpane.html (18,1)
XML5632: Only one root element is allowed.
taskpane.html (1,1)
[WDS] Disconnected!
SCRIPT5022: SCRIPT5022: Office.js has not fully loaded. Your app must call "Office.onReady()" as part of it's loading sequence (or set the "Office.initialize" function). If your app has this functionality, try reloading this page.
office.js (46,28277)
taskpane.html content:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>my-xl-addin</title>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but my-xl-addin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
Update:
After a bit more investigation, it appears that everything is working well by selecting Vue2 in place of Vue3.
Now the question is more about migrating from Vue2 to Vue3 which is a different topic.
Update2:
The quickstart got updated with a new src/main.js, everything is working well now
I'm playing around with Polymer 0.4. I'm trying to do a jsonp request using polymer-jsonp component which I've installed using bower.
But it's not working, it looks to me like the polymer-jsonp component is not compatible with Polymer 0.4 and it has been deprecated according to this https://github.com/PolymerLabs/polymer-jsonp/releases/tag/0.3.0
I can see in my network panel that the polymer-jsonp comoponent is being correctly imported but even though it has the "auto" parameter it does not make the request at all. I'm not running it throug any JS code, I'm expecting it to run automatically because of the auto param and to bind it results to the results param value.
May I wait for a compatible version to be released or is there any way to use it or some alternative?
EDIT:
Here is an example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Polymer WebApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<script src="bower_components/platform/platform.js"></script>
<!-- build:vulcanized elements/elements.vulcanized.html -->
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/polymer-jsonp/polymer-jsonp.html">
<link rel="import" href="elements/elements.html">
<!-- endbuild-->
<style>
#drawer {
background-color: #CCC;
}
#main {
background-color: #EBFA6F;
}
#main site-table {
padding: 20px;
}
</style>
</head>
<body unresolved>
<template>
<polymer-jsonp url="http://127.0.0.1/abmonitor-server/Ajax.class.php?callback=" auto response="{{ sitelist }}"></polymer-jsonp>
</template>
<core-drawer-panel>
<div id="drawer" drawer>
<sites-menu></sites-menu>
</div>
<div id="main" main>
<header>
<core-toolbar>Toolbar</core-toolbar>
</header>
<site-table></site-table>
</div>
</core-drawer-panel>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
Thank you very much.
The jsonp element really should be updated for core, it's just a nuisance that is hasn't been yet. However, I looked at the code, and I believe the old one should work just fine. It's possible you just have a simple problem in your setup.
I can see in the browser console that it is not being imported.
Make sure you have a <link> tag in your application that imports the element. Probably something like:
<link rel="import" href="bower_components/polymer-jsonp/polymer-jsonp.html>
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.
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!
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.