SOS

Shane O'Sullivan's technical blog… really ties the room together

Archive for the ‘dojox.data’ Category

Context Menus And Korean Added To Chofter, 한국어판 출시

Posted by Shane O'Sullivan on October 17, 2008

Today two features I’m very happy with were added to Chofter, the next-generation search engine.

오늘 두가지의 새로운 기능이 Chofter, 차세대 검색 엔진,에 업데이트 되었습니다.

The first feature is the Context Menu. A new orange icon is placed next to search results which, when clicked, gives you list of actions you can take on the link in the search result. For example, you can create a bookmark, send it to Digg, add it to your online bookmarks at del.icio.us, share it on Facebook, and more. The image below shows it in action.

첫번째 기능은 팝업 메뉴창입니다. 검색 결과 페이지에 오렌지색의 아이콘들이 새롭게 만들어 졌는데, 이 아이콘을 클릭시 검색 결과에 관련된 링크 리스트가 보여집니다. 예를 들면 특정한 결과 페이지를 북마크에 더한다거나, del.icio.us로부터의 개별적인 온라인 북마크, Digg 사이트에 더할수도 있으며, 또는 페이스북에 원하는 검색 결과를 공유하는 등의 여러가지 기능이 더욱 손쉬어 졌습니다. 아래 사진에서 확인할수 있구요:-)

The second feature is Chofter’s first Asian language, Korean (which is why this post is in both languages). The translation was done by the lovely Francesca Kim, otherwise known as my main distraction.

두번째 새로운 기능은 Chofter의 첫번째 아시안 언어, 한국어 사용이 가능해졌습니다. 번역은 Francesca Kim님이 도와주셨습니다.

Chofter Context Menu

Chofter Context Menu

Posted in Ajax, chofter, dijit, Dojo, dojo.data, dojox.data, Javascript, open source, Technical | 1 Comment »

More Offline Goodness With Dojo

Posted by Shane O'Sullivan on September 23, 2008

Kris Zyp from SitePen has posted an article about the Dojo Ajax Toolkit‘s latest addition to it’s Offline Web capabilities, OfflineRest. Check it out at http://www.sitepen.com/blog/2008/09/23/effortless-offline-with-offlinerest.

The idea is brilliant – if you send your data to the user using the JsonRestStore, you can now add an amazingly simple offline capabilty to your website with two lines of code (more or less).

This rocks.

There’s also an interview with Kris over at Ajaxian – http://ajaxian.com/archives/audible-ajax-episode-30-interview-with-kris-zyp

Posted in Ajax, Dojo, dojo.data, dojox.data, json, offline, open source | Leave a Comment »

Chofter.com: Expanded views added

Posted by Shane O'Sullivan on August 9, 2008

I’ve added expanded views to Chofter.com, my Dojo/Ajax-powered search portal. See the blog post on it at http://chofter.com/blog/?p=18, and check out the changes at http://chofter.com

Up next – multiple language support. Time to hit facebook as see what friends speak which languages!!

Posted in chofter, dojox.data, search | Leave a Comment »

Chofter.com – A Next-Gen Search Portal is launched

Posted by Shane O'Sullivan on August 4, 2008

For quite a while, I had been working with various REST services, e.g. Flickr, the Google search services and more, as part of my contributions to the Dojo Ajax Toolkit, when it occurred to me that no one had done a good job of bringing all these various sources of information together in a usable way.

Cut to four months later, and I have launched my new search portal, Chofter.com.

To add it to the search bar in your browser, click here.

Immodest as it may sound, Chofter.com provides a better search experience than Google, Yahoo or Microsoft Live, because it incorporates search results from all of them, and much more.

The entire application is written using the Dojo toolkit, utilising

  • Layouts, Dialogs, Menus and ContentPanes for the user interface.
  • dojo.data and dojo.rpc for data transfer.
  • dojox.dtl (Django Templating Library) for transforming search data into visuals.
  • dojo.fx and FisheyeLite for eye candy
  • …. and a chunk of custom code.

As of writing, the following search sources are available, arranged into a number of categories:

  • Google – web, news, image, blog, video and book search.
  • Yahoo – web, news and image search.
  • Microsoft Live – web and news search.
  • YouTube – video search.
  • Flickr – image search.
  • BBC News – news and sports search.
  • Digg – web, news and video search.
  • Amazon.com – book search.
  • Wikipedia – web search.
  • IMDB – video search.
  • Technorati – blog search.
  • DZone – technical search.

I will be adding more as time goes on.  A forum is being set up, and I welcome all feedback on the site.  I’ve also set up a blog for the site at http://www.chofter.com/blog.

Posted in chofter, dijit, Dojo, dojo.data, dojox, dojox.data, Javascript, json, search, Technical | 4 Comments »

Google and Dojo, F.E.E.D.I.N.G

Posted by Shane O'Sullivan on May 6, 2008

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.

Posted in Ajax, Dojo, dojo.data, dojox, dojox.data, Feeds, Google, Javascript, json, open source, Technical | Tagged: | 6 Comments »

Dojo Ajax Demo Engine released

Posted by Shane O'Sullivan on April 3, 2008

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.

Dojo Demo Engine

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

Posted in Ajax, demo, Demo Engine, dijit, django, Dojo, dojo.charting, dojo.data, dojo.event, dojo.image, dojo.query, dojox, dojox.data, dojox.image, Image Gallery, Javascript, json, open source, Technical | 16 Comments »

Dojo 1.1 is cooked and ready to eat!

Posted by Shane O'Sullivan on March 28, 2008

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

Posted in Ajax, Alex Russell, Atom, Date Picker, demo, Demo Engine, django, Dojo, dojo.data, dojox.data, Javascript, json, open source, Technical, widget | Leave a Comment »

Writing a Django Template Widget With Dojo Data Stores

Posted by Shane O'Sullivan on March 3, 2008

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.

A Django templated widget built from an Atom XML file

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.

Read the rest of this entry »

Posted in Ajax, dijit, Dojo, dojox, dojox.data, Feeds, Flickr, Javascript, json, open source, Technical | 10 Comments »

New Atom data store for Dojo

Posted by Shane O'Sullivan on February 20, 2008

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

Posted in Ajax, Alex Russell, Atom, Blogs, Dojo, dojo.data, dojox.data, Feeds, Javascript, json, open source, Technical | 2 Comments »

Introducing the new Dojo Image Widgets

Posted by Shane O'Sullivan on October 13, 2007

In previous posts (here for the Dojo 0.4.3 version, here and here), I wrote how I wrote an image gallery for version 0.4.3 of the Dojo Ajax Toolkit, and how I was translating it for the latest version of the toolkit, version 1.0.

Well, that work is now, finally, complete, and I have to say, I’m pretty damn happy with the results. The code is now part of the dojox.image project (dojox is the Dojo extensions project, for cool new code that may in the future make it into the core code base if enough people like/want it).

If you’d like to just see the gallery in action, have a look at the Photos page on my personal website, or see the links at the bottom of the post, otherwise, read on!

Update: changes have been made to the widgets since this post was written, resulting in some badly aligned images. This will be fixed in the next few days. (Oct 25th 2007)

Update: issue above has been fixed (Oct 29th 2007)

All For One….

The gallery is composed of three widgets:

  • dojox.image.ThumbnailPicker – a widget to list many small images in either a horizontal or vertical orientation, scroll through them, and attach click events that other widgets can listen to
  • dojox.image.SlideShow – a widget that displays one image at a time, and can run a slideshow, changing the images every ‘x’ seconds.
  • dojox.image.Gallery – A wrapper around the ThumbnailPicker, and SlideShow widgets.

Both the ThumbnailPicker and Slideshow widgets can also be used on their own, and have no dependencies on each other.

Dojo Data Is Too Cool for School

One of the coolest features of all of these widgets is that they all feed off image data provided by the dojo.data API. What this basically means is that each widget can display images from any source, with no modification whatsoever. You simply pass it a Dojo data store, and is shows the pictures. Some of the data stores currently in the Dojo toolkit include:

  • dojo.data.ItemFileReadStore – pull in simple JSON data in an array. You could use this if you simply have a directory of images on your own web server you would like to display
  • dojox.data.FlickrRestStore (demo) – query the Flickr photo sharing website for images. This is all done on the browser, with no need for any server-side redirects. This is another of my additions to the Dojo toolkit – I love Flickr, feel free to check out my photo stream here. I previously wrote another blog post on this data store here.
  • dojox.data.PicasaStore (demo) – query Google’s Picasa image sharing website for images. As with the Flickr data store, this is done on the browser, with no need for server side support.

and many more….. You can also write your own data store if you so desire, but the ones included in the toolkit should cover almost everything you might need.

Gimme, Gimme, Gimme!

So, how can I get this, you ask! Well, you can:

Update: Dojo 1.0 is now released. Get it at http://www.dojotoolkit.org/downloads
As always, any and all feedback is welcome. Also, a big thanks to Peter Higgins, owner of the dojox.image project, and Jared Jurkiewicz, owner of the dojo.data project, for all their helpful ideas, and for reviewing/committing my code to the Dojo project.
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

Posted in Ajax, aol, cross domain, dijit, Dojo, dojo.data, dojox, dojox.data, dojox.image, Flickr, Image Gallery, Javascript, json, open source, Technical | 77 Comments »

 
Follow

Get every new post delivered to your Inbox.

Join 533 other followers

%d bloggers like this: