Cool Portlets added to Dojo!

Last week I put the finishing touches my Portlets for the Dojo Ajax Toolkit.  You can see them now on the test page at http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/tests/test_PortletInGridContainer.html (it can take a while to load since it loads a hell of a lot of widgets and the code is not optimized with a build).

To see a description of what they can do, see my original post announcing them at https://shaneosullivan.wordpress.com/2009/03/11/cool-portlets-in-dojo

As a brief description, Portlets are widgets that represent individual applications used in a web portal.  They can be rearranged by dragging and dropping them around the page, and can often be customised with a number of settings.

The Dojo Portlets, in the dojox.widget project, support some useful features like:

• Customisable settings widgets, for setting user defined options.
• Loading Atom and RSS feeds to display as a list

and a good bit more.  See my previous post for a full description, or check out the test page.

Below you can see the Portlets using the blue Soria theme from Dojo.  There will probably be some small changes to the look and feel before v1.4 is released, but nothing major.  Note the different types of Portlets, from the Atom & RSS feed portlets on the left that can show more detail using tooltips or expandable secrions, to portlets containing generic widgets like a slideshow on the right.

Have fun!

Cool Portlets in Dojo

I’ve been working on writing Portlets for the Dojo Ajax Toolkit for a while now, and they’re almost ready.

You can see a demo of it at http://www.skynet.ie/~sos/misc/dojo/dojox/widget/tests/test_PortletInGridContainer.html?theme=soria

A Portlet is similar to a dijit.TitlePane, in that it has a title bar, a content area, and is collapsible.  However, it should also have the option of being configurable, perhaps using a dialog box or an expandable area.  A nice example is the BBC website at http://bbc.co.uk, or the Google Portal http://www.google.com/ig.

Portlets are generally presented in a draggable grid, and a very cool new addition to Dojo is the dojox.layout.GridContainer, which provides this framework.

A number of types of Portlets and Setting widgets will be provided, hopefully in v1.4 (1.3 is in final beta, so this is too late for that).

• dojox.widget.Portlet – this is the basic Portlet, which provides a close button, a collapse button, and a settings button.  All of these are optional.
• dojox.widget.FeedPortlet – this Portlet loads an external Atom or RSS feed and displays it as a list.  Hovering over an item shows a dijit.Tooltip with a summary of the news story.
• dojox.widget.ExpandableFeedPortlet – similar to FeedPortlet, but instead of using tooltips, a toggle icon is used to show more or less of a news story.
• dojox.widget.PortletSettings – a widget that can be placed inside a Portlet to provide customizable settings for that widget.
• dojox.widget.PortletDialogSettings – like PortletSettings, but the configuration options are displayed in a dijit.Dialog.
• dojox.widget.PortletFeedSettings – provides one or more URLs to Atom or RSS feeds for a FeedPortlet to load.

These widgets offer pretty large set of functionality, which should be sufficient for the majority of peoples needs.  However, this is still in active development, and if you have any ideas for cool additions or changes I could make, please let me know.

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

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.com UI Overhaul

I’ve completely overhauled the look and feel of Chofter.com, my next-gen search portal build using the Dojo Ajax Toolkit.  It’s now much more user friendly, prettier etc.  I’ve also fixed a number of small bugs.

Read the official blog post about it at http://chofter.com/blog/?p=26, or even better, try out Chofter.com for yourself!  It rocks, if I do say so myself (and I do 🙂 )

Ajaxian seemed to like it too.

Some pics of the new look

More Offline Goodness With Dojo

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

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

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.

New Demos for Dojo & Google search engine online

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 🙂

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

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:"https://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.

Google and Dojo, Sitting in a tree…

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!

Dojo Ajax Demo Engine released

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