Not long after I begin learning a new Javascript Framework, I find a need to create a plugin (or widget). I have created quite a few JQuery plugins (see previous posts) and have recently created a my 4th Dojo Widget (I have also created a few YUI widgets). I recently began working on a  JQuery photogallery plugin (I know, why re-create the wheel). I actually created this photogallery quite a few years ago, but not as a JQuery Plugin, but as a Javascript object (class). I am now converting it into a JQuery plugin.

While working on a different project (that uses Dojo), I also had to create a photogallery. While I enjoyed the benefits of using both JQuery and Dojo to re-create the photogallery, I have to say that the ability to create a template (Dojo Widgets) can significanly decrease the time it takes to create a plugin or widget.

When I initially read about Dojo widget templates, I didn’t really understand the need. My perception was that if a developer was fairly proficient with creating and manipulating DOM elements, then what is the need for a template? Well, creating this plugin using both JQuery and Dojo gave me a more favorable perception of using templates – a tremendous advantage.

Although the requirements for the JQuery photogallery plugin was a bit more complex (and although I still find it easier in general to develop using JQuery), I have to say that having the ability to create a template gives Dojo a real advantage over JQuery when creating widgets or plugins.  Advantage: Dojo.

I ran into a problem the other day when trying to set the visibility style attribute on a Dojo button. I assumed that setting styles on a Dijit was similar to setting the style on any other DOM element:

dojo.style(node, style, value)

But setting styles on a Dijit does not work they one would expect. My original code:

var btn = dijit.byId('register_btn');
dojo.style(btn, {visibility:'visible'});

This did not work because ‘btn‘ is not a DOM node. After an hour or so of trying different ways to get the code to work, I finally tried:

var btn = dijit.byId('register_btn').domNode;
dojo.style(btn, {visibility:'visible'});

It worked. And it makes sense. I can further simplify it with:

dojo.style(dijit.byId('register_btn').domNode, {visibility:'visible'});

While I have accessed widgets (Dijits) using the domNode in the past, I just didn’t think that I would have to when using dojo.style. But it works, so I can move on.

I was trying to fill a dijit.form.combobox dynamically without using ItemFileReadStore, but it has proven to be quite a challenge. I was trying to fill the combobox from an array. It appears that Dojo’s combobox does not inherit all the attributes of a regular HTML combobox. When using just Javascript to dynamically fill a combobox, I made use of the ‘options’ attribute:

Read the rest of this entry »

I’m working on a project using Dojo which requires a wysiwyg editor that is more robust than Dojo’s Dijit.Editor. After doing a bit of research, I decided to use TinyMCE.  This wysiwyg editor is very robust, has great documentation and is the editor that Wordpress uses. Integrating TinyMCE did not appear to be difficult, but I also wanted to create a TinyMCE Dojo widget, so that I could easily reuse TinyMCE in other Dojo projects without having to remember how to set it up.

Read the rest of this entry »

I read on dojocampus.org that the color of the Dialog’s underlay can be changed. The example on the site shows how to change the underlay color of an individual dialog box:

    #dialogColor_underlay {
        background-color:green;
    }

<div id="dialogColor" title="Colorful" dojoType="dijit.Dialog">
     My background color is Green
</div>

But, this only changes the underlay color of an individual dialog box. It seems to me that unless I am building an Dojo application for, let’s say a kid’s website, that I want the color change to be consistent. I also don’t want to have to create a separate style for each Dialog box that I may have on a page. So, to change the underlay color for all dialog boxes on a page:

.dijitDialogUnderlay {
     background: green;
}

Easy.

I recently created a help system for a Dojo application that I have been working on. I wanted a simple implementation, but also one that is fairly robust. My initial implementation (version 1) was easy to create due to the power of dojo.query, dojo.forEach, and dojo.connect.

Read the rest of this entry »

I have created Dojo Dialog boxes via markup in the past, but I recently began to dynamically create all Dialogs within an application. My primary reason for doing so is to remove some of the code from an html page and give me greater flexiblity with the functionality.

Read the rest of this entry »

I recently restarted a project that I haven’t worked on in nearly a year. I am using Dojo for the project. I ran the application in order view the current functionality and to try to figure out where I stopped in my development. I then upgraded to a new version (1.3) and viewed the website once again. I immediately noticed a firebug message that basically told me that the LayoutContainer was being deprecated and would not be used in version 2. The message also suggested that I should use BorderContainer instead.

Read the rest of this entry »

I am working on a project using Dojo and I wanted all the buttons in the application to have the same width. By default Dojo will set the width of the button by the width of the button label (the more characters in the label, the wider the button). To set all the buttons to the same width, I add the following to my CSS file:

.dijitButtonNode {
     width:150px;
}

Simple enough.

Although I had created a few code snippets using Scriptaculous/Prototype, Dojo Toolkit was the first Javascript Framework that I really learned. I had read about (and downloaded) it quite a few years before I actually used it. I purchased a couple of books (Mastering Dojo: JavaScript and Ajax Tools for Great Web Experiences (Pragmatic Programmers) and Dojo: The Definitive Guide) to help me get started. I was working on a project where web pages would be dynamically created. I have to admit, I struggled. Although Dojo is a  “Javascript” Framework, learning it was like learning a new language – before the discovery of the Rosetta Stone. While I was able to learn the basics from reading the books and looking at the examples on Dojo’s website, in many cases, I just could not find the documentation to do what I wanted to do (or how I wanted to do it). So I guessed. And guessed again. And continually guessed until, “Eureka!”. No that didn’t work either…

Read the rest of this entry »