I’ve previously written about the data stores I committed to the Dojo Ajax Toolkit that enable you to search Google’s services for all sorts of things - books, news, blogs, images and everything else.

Now I’ve put some demos up on DojoCampus that show off a few of the stores.  Check them out at http://dojocampus.org/explorer/#Dojo_Data_GoogleSearchStore , especially the Google Images one - it’s shiny

The Dojo Feature Explorer now has an Atom feed you can subscribe to to keep up with all the latest demos that have been added.  So, point your browser at http://dojocampus.org/explorer/featureexplorer/latestDemos.xml and subscribe!

For all the Web 2.0 addicts out there, I’ve also added access to the list via SCRIPT IO.  If you point your browser to http://dojocampus.org/explorer/featureexplorer/latestDemos.php, you will receive a file containing a JavaScript array of the last ten demos added to the feature explorer.  By default, it will call the function dojocDemos, passing it the array.  You can specify the callback function you want using the callback parameter. e.g.

http://dojocampus.org/explorer/featureexplorer/latestDemos.php?callback=myFunction

will call the myFunction JavaScript function.  You can load this file, as I mentioned, using SCRIPT IO.  This could be hard coded into your HTML page, e.g.:

<script type=”text/javascript” src=”http://dojocampus.org/explorer/featureexplorer/latestDemos/php?callback=myFunction”></script>

or loaded using dojo.io.script.

This is the second in series of posts on the work I’m doing to bring the Google Ajax APIs and Dojo Ajax Toolkit together. The first post was Google And Dojo, Sitting in a Tree, which you can read for some background.

I have submitted a new data store to the DojoX project, dojox.data.GoogleFeedStore, which makes it possible to access any RSS or Atom feed, anywhere, directly from your own web page. Simply pass the URL of the feed to the GoogleFeedStore, and it will return it to you using the dojo.data.Read API.

Example

var store = new dojox.data.GoogleFeedStore();
store.fetch({
  query:{url:"http://shaneosullivan.wordpress.com/feed/"},
  onComplete: function(items) {
    dojo.forEach(items, "alert('Got feed entry with title ' + this.getValue(item, 'title'))", store);
  },
  count: 10
});

This will retrieve the first 10 entries in my blogs feed, and alert the title of each.

The huge advantage of this is that you no longer need any server side redirects to access RSS and Atom feeds from your own website. This Google service is the basis for Google Reader and iGoogle.

If you want to access an Atom feed from your own web server, you can also use the dojox.data.AtomReadStore that I wrote earlier. However, this is only useful if you have direct access to the Atom XML document using Ajax, and due to browser security issues, you can only load these documents from the web server hosting the web page. This new GoogleFeedStore removes that restriction, and has the added advantage that it also works with RSS.

Check out the demo page to get a feel for it (available in the May 6th nightlies), and there should be an example up on the Dojo Feature Explorer quite soon too.

As before, a big thanks to Google for providing such a cool service.

I’ve submitted a bunch of new data stores to the Dojo Ajax Toolkit that make it simple to search Google directly from your own site (ticket here).

Update: I’ve also submitted a store to read any Atom or RSS feed, anywhere, without any server redirects. See Google And Dojo, F.E.E.D.I.N.G

This is different from putting a search box on your site and redirecting to Google. With the new dojox.data.GoogleSearchStore family of data stores, you can retrieve google search results in JSON format, and display them on your site directly.

Pause a second…. let it sink in…..

There are no cross domain issues, and no server side component is required. It uses the dojo.io.script transport to access the Google Ajax API service. Just stick the following on your page:

<div dojoType=”dojox.data.GoogleWebSearchStore” jsID=”googleStore”></div>

and you have Google’s millions of servers at your fingertips.

The following data stores are available:

• GoogleWebSearchStore - does a standard web search.
• GoogleBlogSearchStore - searches blogs. A future enhancement I will be writing will be to write a data store that accesses Google’s extremely cool Ajax Feed API, which provides access to any ATOM feed, anywhere, in JSON. It’ll be possible to do a full web search of all blogs for certain topics, then using the feed store to pull down that complete feed .
• GoogleLocalSearchStore - searches the Google Local service to find places, businesses etc.
• GoogleVideoSearchStore - Does what it says on the tin, searches for videos.
• GoogleNewsSearchStore - Finds news stories…. noticing a pattern yet?
• GoogleBookSearchStore - Um, finds books..
• GoogleImageSearchStore - Finds images. This provides both a thumbnail and full sized version, similar to the FlickrRestStore already provided by Dojo.

The potential applications are more or less infinite. Demos included in the check-in show how to integrate this with the extremely cool dojox.dtl templating engine to display the results in a number of different ways, as well as how to feed the results into the Dojo Grid, Gallery and SlideShow.

This code is included in the nightly checkouts of Dojo, and not in v1.1. To get it, either check it out from source control, or get it from http://archive.dojotoolkit.org/nightly/.

Have a look at the simplistic demo of it in action at http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/data/demos/demo_GoogleSearchStore.html (available from the May 1st nightlies).

A big thank you to Google for making this service available. Now go play!

P.S. Stay tuned for the Yahoo variant, coming soon!

DojoCampus.org has created a feed for their amazingly useful series of tutorials on all things Dojo, called Dojo Cookies, at http://dojocampus.org/content/category/dojo-cookies/feed/. Bookmark it. Now. Seriously. Or, as this guy says, Do It

Pete Higgins has posted a great tutorial on how to write a Dojo widget, taking as an example his recent addition, FisheyeLite.  Check it out at http://dojocampus.org/content/?p=100

Following on from my previous post about the cool new Calendar widget I wrote for the Dojo Ajax toolkit, the initial version has now been committed to the DojoX project.

Check out the calendar test page at http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/tests/test_Calendar.html

Check out the dropdown date text box at http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/form/tests/test_DateTextBox.html

Some more work still has to go into the widgets, including allowing individual dates to be highlighted for specific event, and perhaps including a refactoring into a series of mixin classes, but it should be in great shape for 1.2!

DojoCampus.org is an ever-growing learning resource for users of the Dojo Ajax toolkit, and also for anyone wanting to do cool (and mundane) things with JavaScript. It is designed to complement, rather than replace, the existing Dojo documentation. It features:

• Tutorials - examples aimed at both beginners and advanced hackers
• Videos - step by step videos showing off Dojo capabilities, and showing how to get the most out of the toolkit.
• Cookies - small nuggets of handy information, as discovered by Dojo hackers. These come both from the Dojo contributors, and can also be submitted by the general public through the website.
• Feature Explorer - a great demo engine, written by myself and Nikolai Onken, that shows off most of the capabilities of the Dojo toolkit, and shows how it is done. I wrote a previous post about this here.
• Community Polls - polls to allow the community to vote on what features they would prefer were covered next in tutorials, cookies and demos.
• Dojo News - updates on what’s happening in Dojo-Land.

Many people have helped out on making DojoCampus what it is today, but biggest props have to go to Peter Higgins and Nikolai Onken, who have both done, and are doing, a great job.  However, it’s up to the community now to participate and make it even better.  You can:

• Submit new Dojo Cookies
• Submit new tutorials
• Send in ideas about something that would make a good tutorial.  A good example is to take two technologies that may not be used together in demos or unit tests, but would complement each other.
• Once the development environment is stable for the Feature Explorer, you will be able to submit new demos.

A great new demo engine has just been released for the Dojo Toolkit. Check it out at http://dojocampus.org/explorer/. It is based on the initial attempt at a demo engine I wrote a few months ago, but has since been updated with new demos, and made infinitely more sexy by css/theme master Nikolai Onken.

The features include:

• Demos for all three Dojo projects - Dojo (the base toolkit), Dijit (widgets) and DojoX (all that is newest and coolest) .
• Source views for all demos. Not only do we show what Dojo can do, we show you how to do it! The source views also benefit from the very cool dojox.highlight project, which provides client side syntax highlighting.
• Addressability - you can link directly to a demo, as I did with the dojox.highlight link above.
• Search feature - a combo box that you can use to quickly find a demo on any subject. For example, type “image” into the box, and you’ll be shown a list of all demos to do with displaying images, such as dojox.image.Gallery, dojox.image.SlideShow etc.
• Cool animated menus - totally aesthetic I know, but a very pretty addition by Peter Higgins. The menus separate the three projects, providing easier, clearer navigation.
• Link hierarchies - each set of demos can have links attached to it, for example to extra tutorials or documentation. If you click a parent of that demo, you are shown all links of all children of that section. For example, click on the DojoX link on the top of the page, and you’ll be presented with a list of all links to all DojoX projects.
• Browser Back Button management. Using the dojo.back package, you can navigate back and forward through the application using the browser’s back and forward buttons.

The demo engine is hosted on the extremely cool Dojo Campus website, which is a new learning resource for all things Dojo. It contains videos, tutorials and much more.

This version of the demo engine has many many examples in it. However, it is only the beginning, and there is a lot of room to add more content. The next step is to open the development process for community submissions of all the cool things people have done with Dojo. We will be making available the demo engine on Subversion, and writing development and submission processes to make it as easy as possible for people to contribute.

This is gonna be big!

Update: see http://ajaxian.com/archives/dojo-mini-and-the-feature-explorer for the Ajaxian post.
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

The latest and greatest release of the Dojo Ajax Toolkit has just hit the presses, and she’s looking good. As Alex mentioned, the number of cool features in Dojo can be difficult to keep up with, so I’ll just list some of the things I’ve either written for Dojo, helped along, or just been damn impressed by in this release:

Dojo Datastores

The number of useful data stores for Dojo just keeps growing and growing, under the watchful eye of Jared. For release 1.1, I submitted a data store to read Atom XML documents, dojox.data.AtomReadStore. See more about this at http://shaneosullivan.wordpress.com/2008/02/20/new-atom-data-store-for-dojo/.

FisheyeLite

Peter Higgins submitted an amazingly simple, but oh-so-cool widget called dojox.widget.FisheyeLite. Rather than act like a ‘true’ Fisheye widget, which would generally only work on images (á la OS X), this widget can apply cool Fisheye-like behaviors to just about anything - text, divs, spans, you name it. Check out the test page for some cool examples, or see my personal website for an example of how I used it to spruce up my site menu.

Django Template Languate - dojox.dtl

The Django Template Language is an amazingly powerful templating language, with which you can turn your JavaScript data into HTML. While this was originally designed to be a server side templating solution, Neil Roberts has done a brilliant job of converting it over to work in the browser. While I though I’d had an original idea when I pitched the idea to him that it’d be cool to integrate Dojo data stores directly into DTL, Alex already had the whole thing implemented and about to check it in. Typical I’ve written up a tutorial on how to integrate DTL with Dojo data stores, specifically the AtomReadStore I wrote, at http://shaneosullivan.wordpress.com/2008/03/03/writing-a-django-template-widget-with-dojo-data-stores/.

Functional Programming

This enables you perform many operations on data using just a single function call. Once of the cool things it provides is the ability to specify a function as a simple string, drastically reducing the complexity and size of your own code. Eugene Lazutkin wrote a great blog post about this, which is well worth a read. I wrote a follow up post, as a quick reference to some of the cool things you can do with this feature. Some of this was available in 1.0, but I’ve just discovered it, so here you go!

Dojo Campus

Peter Higgins, Nikolai Onken and myself have been working on a new learning resource for Dojo developers, called Dojo Campus. It provides a lot of learning materials, including videos, tutorials for beginners and more advanced programmers, and much more. We also have a still-under-wraps-but-soon-to-be-release demo engine that has loads of easy to use runtime examples of things to make and do with Dojo. I blogged about a very early version of it at http://shaneosullivan.wordpress.com/2008/01/07/dojo-demo-engine-update/, but it’s come a long way since then. Keep you eyes peeled for it’s release. Any day now…..

And finally….

A very sexy Calendar widget I’ve written got submitted just a bit too late to make in into 1.1 (read: the day before release), but will be in the nightlies soon, and will make it into 1.2. See the blog post about it at http://shaneosullivan.wordpress.com/2008/03/24/sexy-new-calendar-widget-for-dojo/.

This is nowhere near a comprehensive list of course, just the bits I’ve been fiddling with over the last few months:

• See Dylan’s post for some more info.
• Get the release notes here.
• See the Ajaxian post here.
• See Alex Russell’s (Dojo project lead) post here.

So go forth and explore, it’s good healthy nerd-fun! Share this post:
digg it|kick it|Email it|bookmark it|reddit|liveIt

I’ve submitted a sexy new Calendar widget to the Dojo Toolkit, called dojox.widget.Calendar. Check out a test page for it at http://www.skynet.ie/~sos/js/demo/dojo/dojox/widget/tests/test_Calendar.html. The ticket tracking it is at http://trac.dojotoolkit.org/ticket/6297.

The features of this calendar widget are:

• Day view - the standard view, showing all the days in a month
• Month view - lists the twelve months of the year.
• Year view - lists all the years that can be chosen.
• Cool animations between these views.
• Cool animations when moving from month to month, and from year to year.
• Cool animations when moving the mouse over the widget, courtesy of the dojox.widget.FisheyeLite widget. (tired of cool animations yet? Nah, me neither)

The daily, monthly and yearly views of the Calendar

I was inspired to write it after seeing the very cool Calendar widget in the AjaxControl Toolkit, a .NET Ajax framework, which made me think “I wonder how long this would take to write with Dojo?“, taking into account the obvious: not a single line of code could be copied from the original.

The answer turned out to be about 3 hours or so, since Dojo already provided the majority of what I needed.

• All the Date-related heavy lifting is done with dijit._Calendar, the existing Dojo calendar widget. This also handles the majority of the localisation issues.
• Most of the animations are done using the dojo.animateProperty function.
• Generating the HTML of the widget is mostly taken care of by the standard Dijit templating system.

What remained to do was changing the exiting dijit._Calendar HTML template to give a month and year view, and fiddling with CSS to get it looking right. A textbox popup widget was also submitted to integrate the Calendar with a text input field, called dojox.form.DateTextBox;

Hopefully this will make it’s way into the DojoX project fairly soon, and be available for general use.
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

One of the very cool recent additions to the Dojo toolkit is support for the Django Template engine. It is essentially a very advanced browser based templating engine, that enables you to use things like FOR loops, IF statements and much more directly in a HTML template. Or, as the author puts it:

The Django Template Language is one part of Django, a “high-level Python Web framework that encourages rapid development and clean, pragmatic design.

This blog post is an in depth tutorial on working with DTL, Atom XML and Dojo data stores. To see the final working version, have a look here, or get the code from here. Extract the code at the same level as Dojo, and open the demoAtomDTL.html file. Note that you need either the nightly Dojo code, or v1.1 or later for this to work.

Simple Example

As a very simple example, you could write a single template, such as

<ul>
    <!--{% for item in items %}-->
        <li value="{{item.value}}">{{item.text}}</li>
    <!--{% endfor %}-->
</ul>

Then, you populate the template with some JSON data, e.g.

{
    items:[
        {value:1,text:"Choice 1"},
        {value:2,text:"Choice 2"},
        {value:3,text:"Choice 3"}
    ]
}

and it generates the following HTML.

<ul>
    <li value="1">Choice 1</li>
    <li value="2">Choice 2</li>
    <li value="3">Choice 13</li>
</ul>

Writing A Widget And Template To Work With Atom XML

The example above is simplistic, though still very useful of course. However it is possible to do much more interesting things with DTL. A recent enhancement to the code base means that a template can now be built using data from a dojo.data repository, rather than a simple JSON object. This means that you can have a single template that can be used with data from many different data sources (see here for an ItemFileReadStore and here for a Flickr data store example).

This post shows how to write a templated widget that uses a Dojo data store I have written for reading Atom XML data (which has been committed to the Dojox project), and transforming it using DTL into a nice fancy HTML widget, complete with visual effects. See http://www.skynet.ie/~sos/blog.php to see the final result. Do a “View Source” on that page to see how simple it is to include it on a page.

Writing the Template

Firstly, the structure of the HTML to be produced must be decided. For this example, I’ll just create a series of DIV elements that contain a header for the title, and a body for the text. The body will also contain another DIV to list all the tags (or categories in Atom-speak). So, a single entry will end up looking like:

<div class="entry">
    <div class="entryTitle">This is an entry title</div>
    <div class="entrySummary">
        This is some summary text
        <div>
            Tags: <a href="http://shaneosullivan.wordpress.com/category/ajax">Ajax</a>
        </div>
    </div>
</div>

A template for this looks as follows:

<!--{% load dojox.dtl.contrib.html %}-->
<div id="{{rootId}}" >
    <!--{% for item in items %}-->
        <div class="entry">
            <div class="title"><!--{{item.title.text}}--></div>
            <div class="summary">
                <!--{% if item.summary.type == "html" %}-->
                    <!--{% html item.summary.text %}-->
                <!--{% else %}-->
                    <!--{{ item.summary.text }}-->
                <!--{% endif %}-->
            <div>
                <!--{% if item.category %}-->
                    Tags:
                    <!--{% for cat in item.categorys %}-->
                        <a href="{{cat.scheme}}/category/{{cat.term}}"> <!--{{cat.term}}-->  </a>
                    <!--{% endfor %}-->
                <!--{% endif %}-->
            </div>
        </div>
    </div>
<!--{% endfor %}-->

Break it down!

Ok, so let’s have a look at this.

<!--{% load dojox.dtl.contrib.html %}-->

This tells the template system to load an optional module that can convert text into HTML DOM nodes. This function is used when the summary type is “html”, meaning that the text contained in the data is acually HTML tags. The module is used on the line
<!--{% html item.summary.text %}-->
Here you can see a Django function , “html” being called - this takes the text in the item.summary.text data object and renders it to HTML, rather than creating a text node.

<div id="{{rootId}}" >

Give the root node of our template an ID. The rootId parameter must be provided by the widget. Note that when you want to put a piece of data in a HTML attribute, you do not need to escape it with <!–{{, just {{.

<!--{% for item in items %}-->

This is a FOR loop that iterates over all the elements of a data structure called items. This parameter must be provided by the widgets, and should be an array. The item (singular) is a value that can be referenced inside the loop, and is not something that must be provided by the widget. Note that {% is used for calling functions, for loops etc, and {{ is used to access data

<div class="title"><!--{{item.title.text}}--></div>

This creates a DIV, and places the value of item.title.text in it. The item parameter is the element of the items array that is currently accessed as part of the FOR loop. This item should have a parameter called title, which in turn should have a parameter called text. If it were a simple JSON object, it would look something like:

{ title: {text:"This is the title"}}

However, due to the wonder of the Dojo.data and dojox.DTL integration, it will also work if item is a data store item, that contains an attribute called title. In that case, the data will be retrieved using something like:

store.getValue(item, "title")

However, the template does not need to be concerned with this. Which is cool

<!--{% if item.summary.type == "html" %}-->
    <!--{% html item.summary.text %}-->
<!--{% else %}-->
    <!--{{ item.summary.text }}-->
<!--{% endif %}-->

Here you see an IF statement being used. It checks to see if the summary has a type parameter equal to “html”. If so, it prints out the value as HTML, using the HTML function discussed above. Otherwise, it simply prints out the text verbatim.

<!--{% if item.category %}-->

This checks if the item has a parameter called category. Note that is not checking it for any particular value, just for existence.
<!--{% for cat in item.categorys %}-->
As before, this is a FOR loop. It iterates over an array. However, note the plural categorys. The actual name of the attribute is category, but because a plural is used, when item is a accessed using a data store, the getValues function is called instead of getValue. This ensures that an array is available.

<a href="{{cat.scheme}}/category/{{cat.term}}">
<!–{{cat.term}}–> </a>
This one is quite simple, just accessing the category. A category in Atom has a scheme and a term. The scheme can be thought of as a namespace, and the term is generally what you are interested in. Here you can see how to include multiple pieces of data in a single attribute. As this template was written to display a transformed Atom document, which comes from my blog, it is constructing a url that looks like http://shaneosullivan.wordpress.com/category/dojo.

And that’s it for the template!

Writing the Widget

The widget, called demo.AtomDtl, uses two mixin classes:

• dijit._Widget - The standard base widget type.
• dojox.dtl._HtmlTemplated - The base for a DTL widget that contains a template.

So, declare the widget like:

dojo.declare("demo.AtomDtl", [dijit._Widget, dojox.dtl._HtmlTemplated],
{
    templateString: ‘{% load dojox.dtl.contrib.data %}{% bind_data items to store as items %}{% include templateFile %}’,
    templateFile: dojo.moduleUrl(”dojox.data.demos.widgets.templates”, “atomTemplate.html”),

The templateFile parameter points to the file name of the template described earlier. The templateString parameter enables the widget to use dojo.data stores. First it loads the dojox.dtl.contrib.data module, which adds special handling for data stores to DTL. Secondly, it states that the items parameter should be accessed using the store parameter.

So far so simple! Now we just have to retrieve the data, and tell the widget to render.

postCreate: function(){
    //Create the data store
    this.store = new dojox.data.AtomReadStore({url: this.href,unescapeHTML: true});
    var _this = this;
    //Set the rootId
    this.rootId = this.id+"_entries";
    //Tell the store to get all Atom entries
    this.store.fetch({
        query: {},
        onComplete: function(entries){
            _this.items = entries;
            _this.render();
        }
    });
}

This postCreate function

1. Creates a new data store, dojox.data.AtomReadStore, which can interpret ATOM XML documents. This is not yet part of Dojo, but I am attempting to get it committed, see the ticket tracking it here.
2. Sets a root ID to be used for the root element of the template.
3. Calls the store’s fetch method. This retrieves the data, and passes an array of entries to the onComplete function.
4. Adds the entries to the widget as the items parameter. This is what the template expects.
5. Calls the render method.

That’s it for a simple widget! See the AtomDTL.js file in the demo zip file for the full version of this.

Extract that zip file alongside the latest version of Dojo. Open the file demoAtomDtl.html to see this widget in action. The widget code is in the AtomDtl.js file.

A more complex widget is available in AtomDtlAnim.js, which adds animations to the basic class. To see that in action, open the demoAtomDtl_animations.html file. Both widgets use the same template, and the same data source.

Enjoy!

Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

I’ve just submitted a patch to the DojoX project for a dojo.data data store that can read Atom XML documents. It’s relatively simple for the moment, but is capable of taking an XML document that conforms to the Atom spec, and returning the entries using the dojo.data.Read API.

Update: this has now been committed to the DojoX project.

This arose out a desire to rewrite the page on my personal website that mirrors this blog. At time of writing, that has a strong dependency on PHP to query my blog for the Atom feed, parse the feed, and output it using a server side HTML template.

This is of course be easily achievable on the browser also, except for the fetching of the XML document from the remote website which the server would still have to do. Of course, if the Atom URL is on the same server as the page, even this dependency could be removed, and all the work, from the fetching, parsing and templating, could be done on the browser.

However, implementing this as a Dojo data store has many advantages, the primary one being that I get to play with integrating a Dojo data store with the very very cool Django templating language package in DojoX, dojox.dtl. Alex recently checked in a patch to dojox.dtl that enables the use of dojo.data stores directly in templates, so I can’t wait to get this checked in (once any issues Jared has with it are satisfied) and get going on my site!
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

This post is a summary, and more, of a great blog post by Eugene Lazutkin on the insanely cool new Functional Programming features in the Dojo Ajax toolkit. It gives number of quick examples in the vein of : “How to I do (x) to a data structure of type (y)“. Have a read of Eugene’s post if you want to know the reasoning behind these features, and how they can be used to vastly simplify your own code.

Please feed free to post your own suggestions as comments and I will include them here. Note that some of the examples contain the variable df, this is short for dojox.lang.functional.

1. How do I add a number to every element of an array (creating a new array)?

var list= [10,20,30,50,25,5];
var newList= dojo.map(arr, “return arguments[0]+2″);

2. How do I add a number to every element of an array without creating a new array?

var list= [10,20,30,50,25,5];
dojo.forEach(list, “array[index]+=2″);

3. How do I sum all the values in an array?

var arr = [10,20,30,50,25,5];
var sum = df.reduce(arr, “+”);

4. How do I sum all the values in a JSON array containing objects?

var json = [{value: 1, name:"foo"}, {value:25}, {value:12,name:"bar"}];
var sum = df.reduce(json, “{value:a.value+b.value}”).value;

5. How do I check if a condition is true for all elements of an array?

var arr = [10,20,30,51,25,5];
var isTrue = dojo.every(arr, “return item % 5==0;”);

6. How do I check if a condition is true for at least one element of an array?

var arr = [10,20,30,51,25,5];
var isTrue = dojo.some(arr, “return item % 5==0;”);

7. How do I find the smallest element in an array?

var arr = [10,20,30,51,25,5];
var min = df.reduce(arr, “Math.min(a,b)”);

8.How do I find the largest element in an array?

var arr = [10,20,30,51,25,5];
var min = df.reduce(arr, “Math.max(a,b)”);

9. How to I calculate the percentage each element of an array makes up of the sum of all elements in the array?

var arr = [10,20,30,51,25,5];
var percents = df.map(arr, “/this”, df.reduce(arr, “+”));

10. How do I generate a running total of an array?

var arr = [1,2,3,4,5];
var runningTotal = df.scanl1(arr, “+”);
//Gives runningTotal=[1,3,6,10,15]

11. How do I create an array where each element is the multiplicand of all elements that came before it and itself?

var arr = [1,2,3,4,5];
var result = df.scanl1(arr, “+”);
//Gives result=[1,2,6,24,120]

12. How do I combine multiple arrays into an equal number of arrays, but arranged by index?

var arraysByIndex = df.zip([1,2,3],[11,22,33],[111,222,333]);
//Gives arraysByIndex=[[1,11,111] , [2,22,222], [3,33,333]]

13. How do I search a dojo.data store for the existance of a named attribute?
//Assume a data store exists called 'store' and items have been retrieved
//and placed in an array called 'items'. We will search for an item that has
//an attribute 'country' equal to 'Ireland'
var found = df.some(items, "this.getValue(item, 'country') == 'Ireland'", store);

14. How do I filter an array to just the items that match a boolean condition?
var array = [22,4,66,100,55];
var over30 = dojo.filter(array, “return item > 30″);
//Gives a new array [66,100,55]. The original array is not modified.

15. How do I find an element in an array?

var array = ["this","is","an","array","of","strings"];
var index = dojo.indexOf(array, “an”);
//returns 2

16. How do I apply a Django Template to one or more nodes?

dojo.require(”dojox.dtl.ext-dojo.NodeList”);

var array = ["some", "sample", "template", "input"];

dojo.query(”.someClass”).dtl(”templates/myTemplate.html”, array);

Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

The Dojo Ajax Toolkit is kindly hosted by AOL for the consumption of anyone at all. This has the advantage of

• Reducing the load on your own server
• Speeding up the delivery, as a Content Delivery Network (CDN) is used to ensure that the server is as close as possible to the client, and
• The more people who use this the better, as the same Dojo files will be cached when users move from site to site, as they’ll all be downloading the AOL hosted files.
• Gzip compression as standard, so the files are as small as possible

Additionally, since release 0.9 onwards, the main Dojo JavaScript file, dojo.js, is always exactly the same, whereas in previous released it changed for every developer who built it.

However, the problem comes in where you want to use your own custom code with the hosted Dojo code. This is because the hosted code uses Dojo’s loading system to dynamically load the resources needed on the page, and this will read the files from AOL, not your server (as you would expect - it knows nothing about your server). If you want to build custom layers to improve performance, the remotely hosted Dojo will not be able to find them.

So, the solution I generally tend to use is to put the AOL dojo.js on every page, and tell Dojo to load any other required files from my own server. To do this, set the baseUrl parameter on the djConfig attribute for the JavaScript file to the folder where Dojo is stored on your server. E.g.

<script type=”text/javascript” src=”http://o.aolcdn.com/dojo/1.0.2/dojo/dojo.js” djConfig=”{baseUrl:’/js/dojo/’}”></script>

Notice here that the file I load is dojo.js, the normal version, not dojo.xd.js, which is the cross domain version capable of loading files from AOL.

After doing this, you can then include whatever custom built layers you like onto an particular page.  For example, if you have a layer built for the dojox.image.Gallery widget called  /js/dojo/dojox/image/Gallery-layer.js, you can load it either dynamically:

<script type=”text/javascript”>dojo.require(”dojox.image.Gallery-layer.js”);</script>

or include it via a script tag:

<script type=”text/javascript” src=”js/dojo/dojox/image/Gallery-layer.js”></script>

and it should work just as if you were using Dojo from your own server. Only of course you are not - AOL is serving up that file, and in many cases users will already have cached that file, speeding up your site quite nicely.

Another approach is to create a custom namespace, register it with Dojo, and put all your layers in there…. but that’s for another post
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

A short while ago I posted about the demo engine I’m writing for the Dojo Ajax Toolkit. Click here to read that post or go to http://www.skynet.ie/~sos/js/demo/dojo/dojoc/demos/featureexplorer.html to see it in action.

Update: Version 1.0 of the demo engine has been release. See here.

Features

Since that post, quite a lot of work has gone into both the features and the content of the demo engine, and the development process has solidified nicely. Some of the features include:

• Tree navigation. A dijit.Tree widget, reading from a remote JSON data store is used to navigate the various demos.
• Search feature. A dijit.form.ComboBox widget, reading from the same JSON data store as the tree, can be used to dynamically search for demos by matching any part of their name.
• Theme switcher. A dijit.form.ComboBox widget is used to switch between the CSS styles that Dojo provides.
• URL addressability. Using a hash identifier (e.g. #Dojo_Query_By%20Class) in the URL of the demo engine causes it to open that demo when it has finished loading. For example, if you click this link, it will open the dojo.query demo showing you how to select nodes by class name. Opening any demo changes the URL in the browser to the URL for that demo, for easy bookmarking.
• Integrated build process. A simple build script is integrated with the Dojo build process. It builds a JSON data file listing all the existing demos and their respective files. It also builds files with URL links for each demo.

Content

To date, a lot of content has been added. Many, many widgets in Dijit and DojoX
have have been added, including the majority of the Form Controls.

The latest, pretty cool additions have been the IO and dojo.query demos. These cover things such as:

• Performing a XMLHttpRequest request
• Using an iFrame transport
• Submitting a form asynchronously
• Loading remote JavaScript files from another domain
• Selecting nodes using CSS selectors with dojo.query
• Performing operations on the NodeList returned from dojo.query
• Attaching events to the NodeList returned from dojo.query

File Naming Scheme
A simple file naming scheme is used to add content to the demo framework. Each folder beneath the root folder represents a demo. Each file in a folder must be named the same as the folder, with five possible extensions. For example, given a folder with the name ‘Button‘, the possible files are:

• Button.html - this contains the demo to be displayed. Any JavaScript code inside <script> tags is executed, and any <link type=”text/css”> and <style> tags have their CSS loaded. The executed code is shown in the View tab, and and the source code is shown in the XML tab. The <html>, <head> and <body> tags are not required.
• Button.js - this contains pure JavaScript code that performs the same operations as Button.html, if applicable. It is not executed however. It is shown in the JS tab.
• Button.txt - this contains the text description of the demo. It is loaded above the tabs.
• Button.links - this contains a JSON array of URL links. The build script transforms these links into HTML, and the result is loaded into the Links tab. One neat feature of this is that all links from sub folders are integrated with the parent folder and displayed in a nested structure. Do, for example, clicking on Dijit will show all the links for all widgets in the Dijit project.
• Button.full.html - this is standalone demo, that is designed to run outside the demo engine. The View tab provides a link to the external file.
• sort.txt - this contains a comma separated list of the child folders contained in this folder. It specifies the order in which to display the child demos in the tree. If this file is not specified, then an alphabetical ordering is used.

All of these files are optional. If a file in a folder does not match this naming scheme, it is assumed to be some kind of resource that the demo needs, such as an image or a JSON data file. In this case, the file can be named whatever you like.

The tree structure in the demo engine mirrors the folder layout.

Still To Do

There remains quite a lot of work ahead. There are a few bugs remaining, some more cross browser testing is needed, and of course more content is required, particularly the base Dojo package.

In the relatively near future this should be opened up to the public for development. The Dojo folks are setting up a source control server for community additions, and this demo engine should be part of that. Once that is done, people can start adding all sorts of cool stuff!
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

Internet Explorer has a nice feature where a new window can be opened modally using the window.showModalDialog function, meaning that the page that opened it cannot be accessed until the new window is closed. This can be useful in many situations.

However, the main limitation of IE Modal Dialogs (other than being non-standard), is that any hyperlink clicked in a modal dialog causes another, non modal, dialog to be opened, rather than opening the page linked to in the same window, as would happen in a normal pop up window.

The key to solving this problem is to note that a modal dialog only opens another window when a GET request is made, not when a POST request is made. However, an anchor tag automatically causes a GET request, so the solution is to:

1. Catch the click on each anchor tag, cancel it,
2. Submit a dynamically created FORM element, with it’s method set to ‘POST’ and it’s action set to the URL of the link clicked.

While it is possible to put a listener on each anchor tag to achieve this, such an approach will not scale well. Instead, place a listener on the body tag. The example below is done using methods from the Dojo Ajax Toolkit, since that the toolkit I use the most, but you can of course use whatever methods you like to achieve the same result:

<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.connect(dojo.body(), “onclick”, function(evt) {
if(evt.target.tagName != “A”) {return true;}
dojo.stopEvent(evt);
var form = document.createElement(”form”);
form.setAttribute(”target”, window.name ? window.name : “SrPopUp”);
form.setAttribute(”action”, url);
form.setAttribute(”method”,”POST”);
document.appendChild(form);
form.submit();
return false;
});
});
</script>

This method assumes that you have control over the content of the page being shown in the modal dialog. It would also make sense to add a similar listener to the body tag for key events, as a user can trigger an anchor tag by tabbing to it and hitting enter.

Thanks to Danny Goodman and Steiner Overbeck Cook for coming up with this solution.
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

A couple of weeks ago I saw a cool demo framework for an Ajax toolkit just released as open source. It’s a very slick implementation, with a tree listing all the various demos, and a tabbed area showing the implementation, and the widget in practice.

So, I think to myself, this is exactly what the Dojo Ajax Toolkit is missing! Cut to today, and I’ve put the first rough cut at the demo framework on the web for people’s perusal. Check it out at http://www.skynet.ie/~sos/js/demo/dojo/dojoc/demos/featureexplorer.html .

Note: I have written a follow up post here.

Some of the features include:

• Tree navigation for the demos. Demos can be nested as deep as required.
• View tab. This shows the widgets in action.
• HTML tab. This shows how to instantiate the widget using HTML markup.
• JS tab. This shows how to instantiate the widget using JavaScript code.
• Links tab. This shows various hyperlinks to alternate content for that demo, e.g. the Dojo Book.
• Demo description. Gives a text description of the demo.
• Theme selector. This allows you to change from one CSS theme to another
• Ability to link to standalone demos that open in a new page. This is useful for large demos that show the integration of many widgets together, and may not fit well within the demo framework itself. See the Dijit/Mail demo for an example of this.
• A build system that takes a very simple naming scheme for the demos, and creates a JSON data store that the framework runs off of. So, whenever a user adds a new demo, they simply have to re-run the build step, and that’s it! No need for a server side script, so you can run this right off your hard drive.

This is still very much beta code, and there are a couple of errors floating around, but those will of course be hunted down. There are also some Internet Explorer issues that I’ll get to soon, so try this in Firefox for now (update Dec 05 2007 - most of these have been solved, with one or two small bugs remaining). I’m in discussions to get this into the Dojo toolkit, so that the community at large can start adding in demos. I&