Archive for ‘Javascript’

October 17, 2011

a simple and elegant yes no dialog using dojo

a very common situation in ui design is to let the user confirm an action (especially one which is destructive) via a dialog. similar to microsoft windows yes/no or ok/cancel dialogs.

here is how do accomplish this using dojo, something I customized for our needs,

1. first the markup

Yes

No

2. next the handler

function yesno()
{
// assume that yesno is called when the user clicks on the object which is key // to the elements being destroyed.

var obj = this;

// my yesno is reusable, you could arbitrarily bind the same // dialog to more than one object. i store the title and the // description of the dialog in the object itself.

var description = obj.node.dialog_description;
var title = obj.node.dialog_title;

// tie the user action handlers – here if the user clicks on yes, // the object has to be destroyed.

dojo.byId(‘yesbutton’).onclick = dojo.hitch(obj, remove);

// no? simply hide the dialog.

dojo.byId(‘nobutton’).onclick = dojo.hitch(obj, function(){yndialog.hide()}); dojo.byId(‘yncontent’).innerHTML = description;
yndialog.set(‘title’, title);
yndialog.show();
}

function remove()
{

// this is the remove handler. i associate this handler with the // object itself such that ‘this’ points to the object.

var obj = this;

dojo.destroy(obj); // or trigger a server side action and then destroy this node. }

Advertisements
July 2, 2010

Integrating Plone and Dojo

Note: This makes sense only if you want to ship a custom dojo build with your Plone application or if you find it slow and annoying to go get dojo from one of the CDNs. If you don’t have a custom dojo build (if you don’t know what I am talking about, then you certainly don’t need one) just get dojo from the CDN – works beautifully with Plone.

We recently had to integrate the amazing ┬ádojo toolkit with Plone. The problem we encountered was pretty simple – Plone does not serve any files/objects etc which have their names ┬ástarting with an underscore character ‘_’. Dojo has plenty of javascript modules beginning with ‘_’.

The existing solutions ranged from the brute force to the exotic and excessive.

The solution we settled down to (after a little bit of thinking) is to setup dojo behind apache and serve the files from there. Here’s how to do it.

  1. Get the dojo sdk
  2. extract it to a directory like /home/xxx/dojo and do a cross domain build (see dojo documentation on how to do this).
  3. Setup apache if you haven’t already done this. Don’t be scared – setting up apache these days just means installing the package from your favorite distribution.
  4. Open up /etc/apache2/apache2.conf (This is where it resides on my ubuntu server) and add the following at the end
Alias /dojo/ "/home/xxx/dojo/"
<Directory "/home/xxx/dojo">
Options Indexes MultiViews FollowSymLinks
AllowOverride None
Order deny,allow
Deny from all
Allow from 127.0.0.0/255.0.0.0 ::1/128
</Directory>

That will setup your dojo files to be served to the localhost – for development purposes it is ok. You can eventually change it to serve your intranet/internet users as well.