Dojo Widgets: Converting to AMD

Ajax, Dojo, dojo-widgets, Javascript

A few years ago, I created gpDojoGallery – a Dojo image gallery widget. I was recently asked whether I had a AMD-ified version of the widget. I have been doing a lot of Drupal and Magento projects lately (with a heavy dose of jQuery) and I haven’t worked with Dojo in quite a while, so I had never heard of AMD (Asynchronous Module Definition). After some quick googling, I learned that Dojo is not the only library that uses AMD, so I decided to convert my gpDojoGallery widget to the AMD format in order to better understand it.

Continue reading

Checkout My New Site - T-shirts For Geeks

Dojo vs JQuery, Part 2: Plugins, Widgets

Ajax, Dojo, dojo-widgets, JQuery, plugins

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.

Checkout My New Site - T-shirts For Geeks

Dojo: Setting the Visibility Style Attribute on a Button Dijit

Ajax, Dojo, Pebblet

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:

?View Code JAVASCRIPT
dojo.style(node, style, value)

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

?View Code JAVASCRIPT
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:

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

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

?View Code JAVASCRIPT
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.

Checkout My New Site - T-shirts For Geeks

Dojo: Adding Items to a Combobox Dynamically

Ajax, Dojo, Javascript

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:

Continue reading

Checkout My New Site - T-shirts For Geeks

Dojo and TinyMCE – Creating a Widget

Ajax, Dojo, dojo-widgets

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.

Continue reading

Checkout My New Site - T-shirts For Geeks

Dojo – Changing Dialog’s Underlay Color

Ajax, CSS, Dojo, Pebblet

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.

Checkout My New Site - T-shirts For Geeks

Dojo – Using Query, forEach, and Connect

Ajax, Dojo

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.

Continue reading

Checkout My New Site - T-shirts For Geeks

Dojo – Understanding The BorderContainer

Ajax, Dojo

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.

Continue reading

Checkout My New Site - T-shirts For Geeks