Monday, March 31, 2014

Don't Get Disconnected with Connect

Here is another of my "My Experience in Building Dojo Widgets" post.

Dojo.connect (dojo/on) is a versatile and important part of dojo that handle events.  Along with dojo.subscribe and dojo.publish these three features of Dojo provide a powerful set of tools to query the DOM.


<div class="widget" id="happy">
<ul>
<li id="1">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
<li id="2">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
<li id="3">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
<li id="4">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
<li id="5">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
</ul>
</div>


Referencing my widget that I used in my last blog, I can connect this list widget using the following lines of code and create event responses accordingly.


dojo.query('ul > li',this.domNode).connect('onclick',function(e){
  alert(e.target.tagName);
});


If this list widget does not change throughout the existence of this page, this code is perfectly fine.

Let say that during the use of this web page the list needs to be updated.  If you clear the list using for example dojo.destroy or dojo.empty and repopulate the page, you can reapply dojo.connect and it will work.  However, the connections to the previous DOM nodes that you have destroyed still exist in Dojo.  Normally, this is fine though you use up more and more memory. 

However, in a more complex widget where the behavior of list DOM Nodes is different, this will come and bite you.  For example, below is a grid that has a toolbar with buttons and dropdown buttons that is dynamic.



In this widget, the toolbar will change depending on what tab you select in a tab widget that is on the same page.  If you open the button menu and click outside of the menu we want the menu to close.  However when you destroy the first toolbar and create the second, the dojo event handler still thinks that the first toolbar is there.  So the connection for closing the menu is still there and if you click anywhere on the body of the page, you will create a nasty JavaScript error.  

In order t remedy the situation, dojo provide dojo.disconnect.  Dojo.disconnect removes any event connection created by dojo.connect.  In order to disconnect an event you need to get a handle to the connection.  So from our previous example, we can assign a handle to the connections.

var handle=dojo.query('ul > li',this.domNode).connect('onclick',function(e){
  alert(e.target.tagName);
});
Since we are creating a list of connections "handle" is an array of connections. So when you what to refresh the list, we need to first get an array of handles so that we can disconnect them before rebuilding the widget DOM. So we first need to declare an array to store the list of handles.  I normally declare this in the widget constructor:

constructor:function(){
    this.connections=[];
});

So before you refresh the list widget and add new DOM nodes disconnect any existing connections that the widget has then destroy the DOM nodes, rebuild the DOM nodes, and store the new connection handles into the disconnect array, this.connections.  Therefore, the code for creating event connections becomes.

dojo.forEach(this.connections,function(connection){
      dojo.disconnect(connection);
});
var listNode=dojo.query('ul',this.domNode)[0];
dojo.empty(listNode);
var handle=dojo.query('ul > li',this.domNode).connect('onclick',function(e){
      alert(e.target.tagName);
});
this.connections.push.apply(this.connections,handle);

Hope this was useful.






Tuesday, March 25, 2014

When This is This and What is This, but What is not This, Dojo Event and Objects

In the past couple of years, I have been building Dojo Bootstrap widgets from stratch rather than using standard Dojo widgets and styling using a Bootstrap theme.  Why in the world would you do that might you ask.  Sometimes I also ask myself that question. There are many advantages, including adding security features that are not founded normally. Since we RESTFul JSON services, the widgets are optimized for our format.  In addition, the widgets are automatically binded with the RESTFul JSON services when the web page is instantiated. 

So as part of my Dojo adventures, I had to learn and relearn Dojo again and again. There is so many different ways to do things, but the right way is sometimes elusive.  One advantage of Dojo over JQuery is that Dojo forces you to use a pattern for creating widgets which I really like.  It is hard enough for me to follow what I did 2 months ago.  Imagine if another developer had to follow my code years later.

One problem is that like all software development, there are lot of stuff that are not written down in the documentation and they just assumed that you know it.  So here is a few important things that I learned that is extreme helpful.

If you use Bootstrap widgets, the HTML below is very familar to you.

<div class="widget" id="happy">
<ul>
<li id="1">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
<li id="2">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
<li id="3">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
<li id="4">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
<li id="5">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
</ul>
</div>
To connect this widget to an event you can use this simple few lines of code where "e" is the event handler.

dojo.query('ul > li',this.domNode).connect('onclick',function(e){
  alert(e.target.tagName);
});


or for even shorter number of characters:

dojo.query('ul > li',this.domNode).onclick(function(e){
  alert(e.target.tagName);
});

So when you click on the widget, an alert box will appear with the tagname of the element. But what if you want to display the id of the widget. You could get it by using:

dojo.query('ul > li',this.domNode).connect('onclick',function(e){
  alert(e.target.parentNode.parentNode.parentNode.id );
});

as long as you click on the A tag. However, if you click on the "I" tag then you would need to use

dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(e.target.parentNode.parentNode.parentNode.parentNode.id );
});


An easier way is to pass the reference of the widget itself which is defined in Dojo as "this".  This can be accomplished by passing it as an argument:

dojo.query('ul > li',this.domNode).connect('onclick',this,function(e){
 alert(this.id);
});


So "this" is "this". Much easier isn't it. You can also redefine "this" as "what" and accomplish the same thing.

var what=this;
dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(what.id);
});

So what if you need to determine the id of the "LI" tag that you have clicked on, which is typical of a widget like a listbox, combobox, or menu? Again you can use the following if you clicked on the "A" tag:

dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(e.target.parentNode.id );
});

or if you click on the "I" tag:

dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(e.target.parentNode.parentNode.id );
});

This can get messly and this was what I was doing until I figured it out through experimentation. You can not find this in Dojo documentation. In this scenario, if you need to get the id of the LI tag, the reference of the "LI" tag is "this" since we are using dojo.query('ul > li') to define an event array.
 
dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(this.id);  // equal "3" when you click on the LI tag with id="3"
});

So no matter if you are clicking on the "A" tag or "I" tag you have the reference of the "LI" tag.
Now, if you also need to reference the widget itself you do not want to pass the reference of the widget as an argument as we did before.  That is because your will override the reference of LI with the reference of the widget.  So in order to reference the widget you need to define "this" as "what"

var what=this;
dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(this.id);  // "3"
 alert(what.id);  //"happy"

});


So now "what" is not "this". I hope "this" was helpful to you.  Coming soon I will let you know "what" you can do to tie events to dialog box event responses.