I'm a beginner to dojo toolkit. And I know that dojo.byId() function is similar to JavaScript's document.getElementById() but I don't understand what's the use of dom.byId().
Can someone explain me what are the differences between dom.byId() and dojo.byId()?
The dojo syntax is pre AMD using the global dojo object. The dom syntax is when you load the dojo/dom module with the new AMD structure.
Edit
I suppose I should add an example.
// Pre-AMD (<1.7)
dojo.ready(function(){
var elm = dojo.byId('myElement'); // id="myElement"
})
// Dojo using AMD (1.7+)
require(['dojo/dom', 'dojo/domReady!'], function(dom){
var elm = dom.byId('myElement');
})
Dojo and AMD is tricky to get used to, at least it was for me.
More on AMD from RequireJS
Related
I am working on the Migration of Dojo from 1.4 to 1.8. I have a project in which there are some jsp pages in which dojo is written and it takes the path of dojo from an xml file.
I have changed the path from dojo 1.4 Library to dojo 1.8 Library, but after doing this the referneces to the dojo widgets are throwing an error
e.g dijit.byId("idofwidget")
ERROR : dijit.byId("idofwidget") is null or not an object.
Please guide how to resolve the issue and it would be better if basics steps to upgrade can be provided.
Thanks in Advance
If you're really going to upgrade to Dojo 1.8, then you will have to rewrite your code into AMD, for example:
// Load the modules you need
require([ "dijit/registry", "dojo/ready", "dojo/parser" ], function(registry, ready) {
// Wait until DOM is finished + widgets on the page are parsed
ready(function() {
// Retrieve widget instance
registry.byId("idofwidget");
});
});
One important thing to know is that you don't upgrade Dojo, you migrate it (at least when using pre- and post-1.7). This usually involves that you can not simply change the Dojo library, but you will have to migrate your code as well.
There are some articles about migrating from pre-1.7 to post-1.7, for example this article about migrating.
Sitepen also provided a tool called the Dojo AMD converter which can convert your modules into AMD syntax, it's not 100% guaranteed that it will work, but it puts you one step closer (at least). They also have an article about migrating, which you can find here.
I'm using Titanium Studio and Titanium SDK. In this case I'm developing for Android but I have an installation on OSX too.
When using Alloy, I can specify
<Label class="header" id="someId">Week 50</Label>
and then specify the colors,fonts etc in the TSS file like this
".header": {
color: "blue"
}
However when I use the SDK version:
var l = Ti.UI.createLabel({class:"header", text:"sometext"});
The color from the TSS file isnt picked up???
What am I doing wrong. Isn't 'class' a valid property? (I cant seem to find it in the docs).
Alloy style are applied automatically to views created through xml. If you want to keep that effect while you are creating objects inside controller you have to use $.UI.create() method instead of Titanium API. In your case your code will look like this:
var l = $.UI.create('Label', {
title: "sometext",
classes: ["header"],
});
For more read Dynamic Styles guide. It's not very well documented and some parts of it were unclear for me when I read it but it's good starting point to experiment with the code and learn Alloy behaviour.
Encountered you question while I was searching for something similar. The chosen answer was unfortunately not the solution I was looking for, since I was writing a commonJS and needed the same this. If you are writing a commonJS (but still under an Alloy project) you can use the following solution:
var l = Alloy.UI.create("index", "Label", {
title: "sometext",
classes: ["header"],
});
Where "index" is what being generated by Alloy from you app.tss file.
I'm trying to migrate an application from dojo 1.6 to version 1.9.1, and I've a legacy module that I didn't want to migrate yet (it's pretty complex and will take me some time to understand). The Dojo docs indicate you can load legacy modules along with AMD modules, but when I try, I'm getting a "dojo.provide is not a function" when the loader tries to load the legacy module.
My script:
require([..., "agsjs/dijit/TOC","dojo/domReady!"],
function(..., TOC) {
on(map,'layers-add-result',function(results){
//Add Legend
var toc = new TOC({
map: map,
layerInfos:legendLayers
}, 'legendDiv');
toc.startup();
});
});
The first line of code of the module:
dojo.provide('agsjs.dijit.TOC');
Everything works until the loader tries to load the agsjs/dijit/TOC module, where I get a "dojo.provide is not a function" error. How do I solve this without having to refactor the entire module to AMD? Thanks
In order for legacy modules to load, you need to run the loader in legacy mode, which means you cannot set async: true. As long as you are running with async: false (the default), you will be able to load and use legacy modules from AMD modules, and vice-versa.
A good point of AMD is that you don't have to use "dojo" and "dijit" global variables now. If you don't want change all those dojo.xxx calls in your old modules, you may try to wrap you old module in a
define([
"dojo/_base/declare",
"dojo", "dijit",
...
], function(declare, dojo, dijit) {
return declare([/*your parent widgets*/], {
//your old module content at here, maybe you need make little modifications of your old module
});
});
So that those dojo.xxx functions may still works.
This link may provide everything you need:
http://dojotoolkit.org/reference-guide/1.9/releasenotes/migration-17.html
recently I have a problem about including other js files using dojo. e.g. :
In my 1.js file, I wrote:
require(["dijit/form/Button"], function(Button){
addButton(someWidget);});
and in my 1a.js file, I wrote the function addButton:
function addButton(target){
var b1=new Button({
style: "border: 1px solid green",
label: "xxxxx"
});
target.addChild(b1);
return b1;
}
for 1a.js there must be an error, because I did not require that module, but i add require, the biggest
problem is that returned value, I can not get the return value, because of nested funciton.
how can i wrote a js file, which i wrote all my functions, and in another js file, i just call these functions with dojo require("xxxx", function(x){})
Thanks for help!
dojo.require is the legacy (<=1.6) loader for the toolkit. Using dojo.require in one file, made the code available to all files.
Dojo has moved to using the AMD API for loading modules. In 1a.js, you will also need to add the require statement.
My answers to the following questions will provide a better understanding of the AMD API and the require statement:
What is the main difference between require() and define() function in dojo and when would we use either?
Dojo Builds...? What now?
What is the purpose of function in the dojo require?
I'm trying to access Dojo within my webapp, and having issues getting what I need. Specifically, I have a webapp in an iframe with different versions of Dojo loaded:
In Firebug, I can do this:
window.dojo.version; // 1.7
window.frames[0].window.dojo.version; // 1.0
(Note iframe is in same domain as parent)
In GreaseMonkey, I can't find either version of Dojo:
dojo // undefined
window.dojo // undefined
window.frames[0].window.dojo // undefined
I started looking into unsafeWindow which supposedly I shouldn't use. It gives me access to the window'd Dojo, but not the iframe'd dojo I actually want.
unsafeWindow.dojo.version // 1.7 (wrong version)
unsafeWindow.frames[0].dojo // undefined
unsafeWindow.frames[0].window.dojo // undefined
window.frames[0].window.dojo // undefined
window.frames[0].unsafeWindow // undefined
window.frames[0].window.unsafeWindow // undefined
I've tried withDoc but I suspect I'm using it incorrectly:
unsafeWindow.dojo.withDoc(window.frames[0].window, function(){
var dijit = unsafeWindow.dijit; // seems wrong; doesn't work
var widget = dijit.byId('someWidgetInsideIframe');
console.log(widget); // undefined
}, this);
Any suggestions on other things I can try to get access to Dojo 1.0 in the iframe? Or if not that, at least figure out how to get access to dojo widgets defined in the iframe using the Dojo I do have access to?
I would expect unsafeWindow.frames[0].window.dojo.version; to work when GM is running on the main page (see below). The fact that it doesn't is a bug in my opinion, but the lead GM dev might not agree. Consider filing a bug report.
However, Greasemonkey normally processes frames/iframes as though they were standalone pages (with some exceptions). This means that the script will fire once for the main page and once for each frame whose src matches the #include/#exclude/#match directives. This also means that things like window.frames[0] will not be defined in every pass.
You can tell you are in the right frame with code like this:
if (window.self == window.top.frames[0]) {
//-- Currently running in the target frame
unsafeWindow.console.log ("dojo.version:", unsafeWindow.dojo.version);
}
else
unsafeWindow.console.log ("These are not droids... Or, er something.");