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 – 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

YUI: Using Event.addListener. One Calendar, Multiple Fields

Ajax, YUI

I am working on a YUI application where I have multiple date fields. The date fields are regular input fields. When a user clicks on the input field a YUI Calendar appears. When a date is selected from the calendar, the date value is inserted into the appropriate input field.

Continue reading

Checkout My New Site - T-shirts For Geeks

Yahoo User Interface Library Method Shortcuts

Ajax, Pebblet, YUI

One of the aspects of developing with the Yahoo User Interface Library (YUI) that I do not particularly like typing the long method calls (i.e., YAHOO.util.dom.get). Fortunately, I can create shorcuts to eliminate much of the typing. I generally add these shortcuts to the top of an anonymous function:

(function() {
     var Dom = YAHOO.util.Dom,
     Event = YAHOO.util.Event,
     Selector = YAHOO.util.Selector,
     Calendar = YAHOO.widget.Calendar,
     Dialog = YAHOO.widget.Dialog;
     ...

})();

So if I need to instantiate the Calendar widget,  I can type:
var calCal = new Calendar("appointCal", {
     iframe:false
});

instead of:
var calCal = new YAHOO.widget.Calendar("appointCal", {
     iframe:false
});

Also, I recently started using $ to replace Dom.get:
var Dom = YAHOO.util.Dom,
$ = Dom.get;

So instead of typing:
var fld = Dom.get('whatever');

I now type:
var fld = $('whatever');

YUI code can be very verbose, so any shortcut is helpful.

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

Dojo: Setting Button Width via CSS

Ajax, Dojo, Pebblet

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:

?View Code JAVASCRIPT
.dijitButtonNode {
     width:150px;
}

Simple enough.

Checkout My New Site - T-shirts For Geeks

JQuery Plugin: imUpsideDownTabber

JQuery, plugins

While designing this blog, I decided that I wanted to use tabs to display certain pages. I needed a JQuery Plugin that worked similarly to jTabber except that I wanted the tabs to display underneath the content. In addition, I wanted the relevant content to slide down (animated) when the tab was clicked. I read somewhere that I could use jTabber to accomplish this, but I thought that it would be easier if I just created the plugin myself. So I created the JQuery Plugin, imUpsideDownTabber (I couldn’t think of a better name). Click on the menu items at the top of this page (about, links, recent) to see the plugin in action.

Continue reading

Checkout My New Site - T-shirts For Geeks

Dojo vs JQuery, Part 1

Dojo, JQuery

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…

Continue reading

Checkout My New Site - T-shirts For Geeks