Dojo
This is how I take advantage of dojo when developing an application that uses the toolkit.
First, in the past few months most of the applications I developed have has sparse use of JS with one major exception. Each application has an main “application page” where a bulk of the action takes place.
My current project is a large mapping application similar to maps.google.com or maps.live.com. The application instantiates with a large map and a variety of tools that users can use to generate reports based on the underlying map data. There are ancillary pages for help, sitemap, contact, etc that do not require the amount of JS the map interface requires.
Separation
I create multiple JavaScript files, one XXXX.js and the other XXXX-app.js. The app.js file is only included on the application specific pages.
Note: during development I will create separate JavaScript files for major functionally but combine them before moving to production.
Includes
I try to only include the app.js on the application page.
Onload
1:
2: function init() {
3: app_name = new app_name();
4: app_name.postCreate();
5: }
6: dojo.addOnLoad(init);
app_name
dojo.declare is my friend..
1: dojo.declare("my_app", null, {
2: _date : '',
3: schedule_success : 'Scheduled',
4: store_dealer : null,
5:
6: constructor: function() {
7: },
8: postCreate: function(){
9: var page_body = dojo.query('body')[0];
10: switch(page_body.id){
11: case 'index':
12: this.index.init();
13: break
14: default:
15: console.log('default');
16: break;
17: }
18: },
19: index: {
20: init: function(){
21: dojo.connect(dojo.byId('dashboard'),'onclick',function(){ dijit.byId('tabs').selectChild('tab_dashboard'); });
22: dojo.connect(dojo.byId('export'),'onclick',function(){ dijit.byId('tabs').selectChild('tab_export'); });
23: }
24: }
25: });
If the parent container of a dojox.grid.Grid has its style set to text-align:center the rows of the grid, in IE, won’t display their data. The data, of course, is still there and displays correct in everything else.
Code Snip:
1: <h2>Working</h2>
2: <div id="dojoxGrid" dojoType="dojox.Grid" jsId="dojoxGrid" structure="layout"></div>
3: <h2>Not Working (in IE)</h2>
4: <div style="text-align:center;">
5: <div id="dojoxGridError" dojoType="dojox.Grid" jsId="dojoxGridError" structure="layout"></div>
6: </div>
Ok, so maybe I’m doing it wrong..(that’s what she said)…and it would not be the first time.
dojo.byId(‘name’).value fails when using the Html Helper “Html.DropDownList” from ASP.NET MVC PR5 as seen below
1: <%'=Html.DropDownList("", "search_form_filter", ViewData())%>
Er..um…could it just be that dojo.byId does not return the display text when value is not explicitly defined in the dropdown…yeah..that’s probably it.
Dojo likes to trap events, as such the current way to disable the escape key for dialogs is to use dojo.stopEvent(evt) …
1: dojo.connect(dijit.byId("disclaimer_dialog").containerNode, 'onkeypress', function(evt) {
2: key = evt.keyCode;
3: if (key == dojo.keys.ESCAPE) {
4: console.debug("Escape trapped !!")
5: dojo.stopEvent(evt);
6: }
7: });
I’m starting to feel like there is “the dojo way” and them um…expected way…
Maybe I just missed it but why isn’t there a property for “disableEscape” or “allowEscape” …whatever…it works right…
When connecting events to simple DOM elements you use standard w3c event handlers. Here is a list of the DOM events implemented in gecko based browsers.
example 1:
1: dojo.connect(dojo.byId('htmlElement'), ‘onclick’, myFunction);
example 2:
1: dojo.connect(dojo.byId('htmlElement'),'onclick',function(){
2: dijit.byId('myDigit').show();
3: });
Doing the same thing with Dijits you need to use the available methods..they have the same name but are in camel case.
onClick
onBlur
onChance
Here is a link to the dijit.form.Button for example: dijit.form.Button
example:
1: dojo.connect(dijit.byId('myDijit'), 'onClick', doSomething);
Ok, so yesterday I spent a good deal of the day trying to figure out how to manage the display of DOM elements. I searched Google, the dojo forums, the tests on archive.dojotoolkit.org with no simple answer. Coming from a heavy jQuery background I just could not believe that you had to bring in additional classes and/or write your own functions.
But dojo is a powerful beast, sometimes referred to as an elephant, so I guess I just have to “use the force…er um…power”
Desired Functions
dojo.query(’#hide’).hide();
dojo.query(.’show’).show();
dojo.query(’.toggle’).toggle();
WARNING: The code below is incredibly crude, it does not take into account for inline elements, there are no advanced arguments like fade or animation, and the toggle method is not fully implemented.
1: dojo.extend(dojo.NodeList, {
2: show: function(){
3: console.log(this);
4: this.forEach( item.style.display = 'block' );
5: return this;
6: },
7: hide: function(){
8: this.forEach(function(item){
9: console.log(item);
10: item.style.display = 'none';
11: });
12: return this;
13: },
14: toggle: function(){
15: this.forEach(function(item){
16: if(item.style.display == 'none'){
17: //this.show();
18: item.style.display = 'block';
19: } else {
20: item.style.display = 'none';
21: }
22: });
23: return this;
24: }
25: });
PS: thanks Jayant for giving me the put to use the true power of dojo.
In jQuery DOM manipulation is incredibly easy:
$("#dealer-toggle").toggle();
One would assume the same can be accomplished in dojo via:
dojo.query('node').toggle();
but you would be DAMN WRONG!
dojo.query will work fine but hide/show/toggle have been moved to the dojo.fx and renamed fadeOut for .hide() and wipeIn for .show()…what about toggle? no sir. There is no dojo function to toggle nods. You have to write your own.
ESRI
For anyone using the ESRI JavaScript Library for ArcGIS Server (a JavaScript Lib based on Dojo): ESRI created their own namespace in the API.
The ESRI namespace consists of 7 methods. I bet you can guess 3 of them.
hide
show
and of course
toggle
http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jsapi/namespace_esri.htm
Wish
- Dojo “fixes” their query interface by using common function names. even if they are alias.
- Dojo adds toggle to the functions that can be acted on node lists (a node list if what is returned from dojo.query)
- The ESRI namespace used the same constructors as Dojo. ie: hide should be dojo.query(‘node’).hide();
Don’t seem to play nice.
It seems that both call create a function called … Number.function and error out when used together.
Error:
[Exception... "'Sys.ParameterCountException: Sys.ParameterCountException: Parameter count mismatch.' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0×8057001c (NS_ERROR_XPC_JS_THREW_JS_OBJECT)" location: "<unknown>" data: no]
Solution:
Don’t use ASP.NET AJAX if your using the vastly superior Dojo Toolkit 
