Learn Dojo Toolkit — Part 1
What is Dojo Toolkit?
Dojo toolkit is another JavaScript framework that helps us to create web applications in a fast and easy way with a lot of functionality inside ready to use in any type of application, you can create a simple ToDo list or a complete enterprise application like IBM Content Navigator.
Unfortunately, Dojo Toolkit is not the most popular of the framework in the market, but it is used in a lot of custom enterprise application, some examples are applications based on IBM technology like IBM Content Navigator, IBM BPM, and IBM Case Manager (now IBM BAW), the reason to this is the stability across the time and the versions, you can develop today and tomorrow your application will work with the new version with the minimal changes (only to update your code, because it will still be working).
Dojo.io or Dojo Toolkit?
Well, here I will do not compare the two versions, you need to know that Dojo.io is Dojo 2.x and Dojo Toolkit is Dojo 1.x.
Today the last Dojo Toolkit version is 1.14.1, and is an active version I was worked in many places, on another hand the new Dojo.io is like a refresh trying to go ahead in the market with the same benefits of Dojo Toolkit but in the modern way.
We will talk about this at another time.
Let´s program a Hello Dojo
We are going to program the most basic dojo application to learn the basics that you need to start with Dojo Toolkit.
First of all, you need an HTML like this.
I have used the 1.7.12 version, but you can use the latest if you want, the code will work well, I prefer this version because I use it with IBPM developments.
Now add some dojo code to your HTML, we will get a DOM element and make a change on their inner HTML, it’s simple to do.
I know this is not the great code, does not have lasers, lights and another thing, but keep in mind that we are learning the basics, and the basics must be simple and easy.
Dojo requires you to specify the modules you want to use before use them is like the #include in C++ or the include(‘…’) in PHP but in a more fancy and easy way; you only needs to write the name of the module in the require function between the braces and after that associate the module with a variable in the callback function. — A piece of cake —
In this first example we used “dojo/dom” to get the element by ID using dom.byId() a very easy and intuitive way to get a DOM element, and well “dojo/dom-construct” is not used in this example but we will use them in the next.
The three most important modules to start programming are:
- dojo/ready — To known when the DOM is ready and start with our app
- dojo/dom — To use our DOM elements like with dom.byId() function
- dojo/dom-construct — To create new DOM elements on the fly
Of course, Dojo has a lot of modules and functionality but you can start with these.
Now another example, something more dynamic, we are going to get a dynamic message showing the week day
This is the code
I included “dojo/_base/window” to get a reference to the window element using the win.body() function and get the BODY element.
Are you bored with these simple examples? Me too, let’s some programming action with a To Do list.
This is what we want to do, I used Bootstap and I need you to advise you that popper.js is not included because it is not compatible with Dojo so if you want to experiment with Bootstrap be careful with this limitation.
The code to review is the next:
Let’s talk about some parts of the code.
Here you can see all the modules used to get the functionality wanted and the relation between the module and the variable to use them in the callback function, there are some new modules to play with them.
As you can see, al the code is inside of the ready() function because we want to execute the code when the DOM is ready.
Now something interesting, you can add events with the “dojo/on” module (we will discuses more in the next image), the important part here is the use of “dojo/dom-construct” to create new DOM elements and include them in the page, the last parameter is the parent DOM element where we want to include them.
This is not the best way to create all the DOM elements, but I think it’s didactic.
Now, a cherry in the cake; the wanted events, as you can see declare an event it’s a very easy task, you only needs to indicate the element in the first parameter, the event like a string or an object (mouse.leave event) and a callback function to do something awesome.
That’s all for today folks!, we will create more things with dojo in the future if you want.
Go to the next post from here
This is all for this now, I really appreciate your time. Stay connected for the next part
If this article has been useful to you, I invite you to follow me on my social networks to find out about my publications (English and Spanish):
Medium: https://medium.com/@jesus.alvb
Twitter: @JesusAlvB
Facebook: https://fb.me/JesusAlvaradoBastida
Printerest: https://www.pinterest.com.mx/JesusAlvaradoB
