I started on a new project where it is used the javascript Dojo Toolkit library.
I am following the tutorial of the Dojo Toolkit's own website to learn how to use the tool. But I'm in trouble in the second example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
</body>
</html>
The code is very simple. On the line where appears the word "Hello" should be added -at Dojo- with the word "Dojo", forming the phrase "Hello Dojo". But only appears the word "Helo". Ie the Dojo libraries are not being carregdas!
Any suggestion?
I changed the link:
FROM:
src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
TO:
src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.2/dojo/dojo.js"
It worked!
Related
i want to build applications with extjs, i downloaded the GPL version from sencha.com, in me html file i have the code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="../lib/extjs/build/resources/ext-watermark/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test ExtJs version 6</title>
<script type="text/javascript" src="../lib/extjs/build/ext-all-debug.js"></script>
<script type="text/javascript" src="../lib/extjs/build/ext-all.js"></script>
<script type="text/javascript" src="testExtJsscript.js"></script>
</head>
<body>
<h2>Test ExtJs</h2>
</body>
</html>
and in me testExtJsscript.js i have the code:
function mess(){
Ext.MessageBox.alert('info','Extjs4 est pret');
}
Ext.onReady(mess);
but the result is just like in the photo
i think that the problem is i haven't the right css file, in all documents there is a ext-all.css file and i can not find it?
I tried to install the trial version of sencha extjs, but the extraction is not working, i reach 42 % and i have problems (CRS faild) with *.png files
thanks for your help
The problem is that you are missing the css file. But anyway, you should not write the html file with the inclusion of the css and js files yourself. You should use Sencha Cmd right from the start, as #Evan suggests. http://docs.sencha.com/extjs/6.2.0/guides/getting_started/getting_started.html
The minimal html should be like this:
<!DOCTYPE html>
<html>
<head>
<link href="/ext/6.0.0/build/classic/theme-triton/resources/theme-triton-all.css" rel="stylesheet" />
<script src="/ext/6.0.0/build/ext-all.js"></script>
<script src="/ext/6.0.0/build/classic/theme-triton/theme-triton.js"></script>
</head>
<body>
<script>
Ext.onReady(function() {
Ext.Msg.alert('Welcome', 'Hello, World!');
});
</script>
</body>
</html>
See my online demos here:
ExtJS 6 Hello World Application
ExtJS 6 Hello World Application Using Ext Loader
ExtJS 6 "Hello World" Application - Modern Toolkit
I am new to OPEN UI5, I have done the setup of importing Open UI5 in eclipse keepler version.
I can execute sample application inside my Javascript views but if I try using sap.ui.core library then I am unable to see the options/Classes inside it but I am able to see commons package and its content.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<!-- Bootstrap Script to load Open UI5 at Runtime (Including library and Themes)-->
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- Application Script (specific to the application ) -->
<script type="text/javascript">
sap.ui.localResources("TelephoneDirectory");
var view = sap.ui.view({id : "loginPage",
viewName : "TelephoneDirectory.LoginPage",
type : sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Am I missing some bootstrap files ?
I want that the sap.ui.core functions will be visible in eclipse when I press ctrl+space.
I am creating an app and would like to use the SpinWheel widget from Dojo.
Currently, all I am trying to do is get the working example of the SpinWheel Widget from the site, http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/SpinWheel.html#id4, functioning
Unfortunately, I cannot seem to do this.
I have tried:
Using the declarative code from the example online. I pulled both the dojo and dojox repos from github, and know that they are in the correct locations because the Hello Dojo tutorial worked perfectly with my paths. Code (mostly copied from site in bold above) is below.
What happens: None of the Dojo code works. The title shows up, as does the ".", but nothing else.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dojo SpinWheel</title>
<!-- load Dojo -->
<script src="dojo/dojo.js"
data-dojo-config="async: true"></script>
</script>
<script>
require([
"dojox/mobile/parser",
"dojox/mobile/SpinWheel"
]);
</script>
</head>
<body>
<div id="view1" data-dojo-type="dojox/mobile/View">
<h1 data-dojo-type="dojox/mobile/Heading">Custom SpinWheel</h1>
<div id="spin1" data-dojo-type="dojox/mobile/SpinWheel">
<div data-dojo-type="dojox/mobile/SpinWheelSlot"
labels="['A','B','C','D','E','F','G','H','I','J','K']"
style="text-align:center;width:40px;"></div>
<div data-dojo-type="dojox/mobile/SpinWheelSlot"
labelFrom="3000" labelTo="3100"
style="width:70px;"></div>
<div id="pt" class="mblSpinWheelSlot"></div>
<div id="txt" class="mblSpinWheelSlot">.</div>
<div data-dojo-type="dojox/mobile/SpinWheelSlot"
labelFrom="0" labelTo="9"
style="width:30px;"></div>
<div data-dojo-type="dojox/mobile/SpinWheelSlot"
labels="['pt','px','cm']"
style="width:50px;"></div>
</div>
</div>
</body>
</html>
Your example can't work, because:
You don't call parser.parse()
You don't require all modules used by declarative syntax
You don't load mobile theme
Assuming that DOJO is unpacked in the root of your htdocs of your Apache, the working head of your HTML file should look like that:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Dojo SpinWheel</title>
<!-- load Dojo -->
<script src="/dojox/mobile/deviceTheme.js"></script>
<script src="/dojo/dojo.js" data-dojo-config="async: true"></script>
<script type="text/javascript">
require([
"dojox/mobile/parser",
"dojox/mobile/SpinWheel", "dojox/mobile/View", "dojox/mobile/Heading", "dojox/mobile/SpinWheelSlot"
], function(parser) {
parser.parse();
});
</script>
</head>
See also the examples under dojox/mobile/tests. They usually do work, contrary to many examples from Dojo online docs :(
I downloaded backbone.js and underscore.js and included it in the tags and defined the model but the browser is showing uncaught error and anonymous function
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Backbone Twitter</title>
</head>
<body>
<h1>Backbone for Testing</h1>
<script src="backbone.js"></script>
<script src=" ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="underscore.js"></script>
<script>
var Tweet = Backbone.Model.extend({
});
console.log(new Tweet({author: 'ABCD', status: 'Hi Backbone Js' }));
</script>
</body>
</html>
I have watched tutorials they do the same way, very new to Backbonejs
You should move backbone.js after underscore.js as underscore is a dependency of Backbone.
This is just a piece of test dojo code I am writing. I am a beginner to Dojo and I can't understand what is wrong with this. The alert button is not displayed on load. Furthermore,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<!-- load Dojo -->
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" data-dojo- config="async:true, parseOnLoad:true">
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane", "dojo/parser"]);
require(["dojo/ready"],function(ready){
alert("BLAH");
});
</script>
<div id="targetID">
Hello world
</div>
</body>
</html>
Don't put javascript in the same tag where you have src= and close your script tags
It seems to be ok here: http://jsfiddle.net/XwAhY/ . Are u sure that data-dojo- config in your page is without spaces?