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.
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 am trying to make web application and i need to add an icon to my title bar with a name.
I am making the web application using empty project in MVC with web form included. I am doing the coding using Visual studio 2017. I have tried my layout as below so far.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/nav.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/svg" href="~/Content/img/download.png" />
<script src="~/Scripts/layout.js"></script>
<title>#ViewBag.Title</title>
</head>
<body>
<navbar>
<div class="topnav" id="myTopnav">
Home
Login
Payment
Customer Registration
<a href="javascript:void(0);" class="icon" onclick="myfunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div>
#RenderBody()
</div>
</navbar>
</body>
</html>
I have tried to link the image before title but it took a wrong turn. Since I am new to MVC, please give me some method to add an icon to title bar.
What you are looking for is called a favicon. You can generate it from png or whatever and then include it in your page like this:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Here's a favicon generator (one of many):
https://www.favicon-generator.org/
The problem lays in this code:
<link rel="icon" type="image/svg" href="~/Content/img/download.png" />
You are specifying that the type is image/svg while instead it is a image/png.
Be sure that a png image exists in Content/img folder.
There is a page, http://www.getbootstrap.sk/customize/index.html, but after you finish and compile and download the completed zip file - NOWHERE is anything giving even a clue as what to do with the darn files. ( I just installed the standard package though bower ).
SO what am I supposed to do with the downloaded customize files?
ALl I'm really trying to do is to stop my navbar items from disappearing when the width falls below 768px - I don't want them ever to disappear.
Bootstrap. How to make the navbar never collapsed
In the Grid system set the field #grid-float-breakpoint value of 0.
Click the Compile and Download button at the bottom of the page.
Extract the files bootstrap.css and bootstrap.min.css from the resulting archive.
Use them instead of the standard files bootstrap.css and bootstrap.min.css on your site.
you don't need to download the library. You can use online libraries.
For example:
<!DOCTYPE html="en">
<html>
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Course</title>
<!-- Normalize -->
<link rel="stylesheet" href="https://yui.yahooapis.com/3.18.1/build/cssnormalize/cssnormalize.css" type="text/css">
<!-- CSS BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- YOUR OWN CSS LIBRARY -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- JQUERY If you need it -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- JS BOOTSTRAP -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- YOUR OWN JS LIBRARY -->
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
....
</body>
</html>
However, if you want to download the library, you just have to move the bootstrap.min.css and bootstrap.min.js to the folders where you keep your CSS and your JS files, and reference them in the header of your web page.
For example:
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
...
</head>
UPDATE:
Based on Bootstrap's documentation, I suggest that, in order to avoid collapsing of the navbar, delete the class navbar-collapse from any element of your navigation bar.
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse. The responsive navbar requires the collapse plug-in to be included in your version of Bootstrap.
Additionally, you have to delete the button that is shown every time the navbar collapses.
Something like jsfiddle
I will need to see your source code to help you in a better way. Meanwhile, I hope this help you.
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!
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