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

gpDojoGallery: A Dojo Photo Gallery Widget

Ajax, Dojo, dojo-widgets

I added a new photo gallery to galleries.digitalvilliage.com. I created the Photo Gallery widget using Dojo Toolkit about a year ago for a project that I have been working on. I recently updated to give it more options than I needed for my project.

The gpDojoGallery widget can be set to display thumbnail images in the center, left, right, top, or bottom of the page. When the thumbnails are set to the center position, the dojox.image.Lightbox module can be used to display the large image.

The widget receives a JSON object that contains the image information (location, width, height, etc). I store the information using dojo.data.ItemFileReadStore, so it was easy to add a pics-per-page option just be limiting the number items to be read within the store.

?View Code JAVASCRIPT
if (this.picsPerPage) {
	request = imageStore.fetch({onBegin: startFetch, onError: fetchFailed, onComplete: initGallery, start: 0, count: this.picsPerPage});
}  else {
	request = imageStore.fetch({onBegin: startFetch, onError: fetchFailed, onComplete: initGallery});
}

The gpDojoGallery widget was fairly simple to create, but it has enough options to be a very versatile photo gallery. You can view demos on my digitalvilliage.com site. The widget (and demos) can be downloaded from GitHub.

Checkout My New Site - T-shirts For Geeks

gpDojoPortfolio: A Dojo Portfolio Widget

Ajax, Dojo, dojo-widgets

I’m working on a new project that uses Dojo Toolkit and DJango. I haven’t started on the DJango back-end yet because I first need to create a few Dojo widgets. The first widget that I created is gpDojoPortfolio. As the name suggests, this widget will display a portfolio. Each item in the portfolio slides into view using the dojo.fx module.

Continue reading

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