SOS

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

Archive for the ‘demo’ Category

Dojo’s new Mobile App Project

Posted by Shane O'Sullivan on June 13, 2010

Dojo v1.5, which should be released in the coming weeks, will contain an early beta of a new infrastructure for building Mobile Apps.  Currently it is called dojox.mobile.app, but that is expected to change.  Check out the test apps (the bottom section) at http://www.skynet.ie/~sos/misc/dojoxMobile/tests/dojox/mobile/tests , which work best in WebKit, so use Safari or Chrome for best results.

Jared Jurkiewicz and Yoshiroh Kamiyama recently added the dojox.mobile project.  It provides some very nice widgets for use on mobile phones, such as views that can transition between each other, rounded lists, tab containers etc.

However, the focus of dojox.mobile is to be very small, so as to suit websites formatted for mobile devices.  When writing cross device apps that are hosted on a phone, the size of the JavaScript is less of a concern, so a much more powerful experience can be created.

Hence, dojox.mobile.app is born.

It is built on top of dojox.mobile, but adds many new features, with more on the way.

  • Templated views that can be pushed and popped off the stack of views, all of which are lazily loaded.
  • Templated lists
  • Input widgets
  • Image Gallery
  • Dialog Boxes
  • Popup Menus

are all available now.  The structure of a dojox.mobile.app application is modeled very closely to a webOS app.  The templates and code are in a similar folder structure, and the lifecycle for creating and destroying (popping) scenes/views are very similar.

The goal of dojox.mobile.app is NOT to replace or duplicate the functionality in PhoneGap.  PhoneGap provides low level access to many phone features. dojox.mobile.app aims to provide an easy to use, flexible application structure, and many widgets that you will find useful, all themed to appear native to each platform.  In a real world app, it would make most sense to use both PhoneGap and dojox.mobile.app.

One of the cooler widgets currently available is the ImageView widget, check it out at http://www.skynet.ie/~sos/misc/dojoxMobile/tests/dojox/mobile/tests/imageControlsApp .  Some of its features include

  • Canvas based
  • Touch capable
  • Swipe across to change images
  • Tap to zoom in, and then swipe to move around an image
  • Progressive loading of images – first load a small version of an image, and later a larger version

dojox.mobile.app is currently tested mostly on the iPhone, but will soon support webOS and Android also.  The mobile world is an exciting place to be right now, and Dojo is jumping in feet first ;-)

Posted in Ajax, demo, dojox, Flickr, Image Gallery, Javascript, mobile, open source, Palm, Technical, templating, WebOS | 7 Comments »

Cool Portlets in Dojo

Posted by Shane O'Sullivan on March 11, 2009

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.

Posted in Ajax, Atom, Calendar, chart, charting, Date Picker, demo, dijit, Dojo, dojo.charting, dojo.data, dojox, open source, widget | 72 Comments »

New Demos for Dojo & Google search engine online

Posted by Shane O'Sullivan on May 13, 2008

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 :-)

Posted in Ajax, demo, Demo Engine, dijit, Dojo, dojo.data, dojox, open source, Technical | 2 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 »

Dojo Demo Engine Update

Posted by Shane O'Sullivan on January 7, 2008

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

Posted in Ajax, demo, Demo Engine, dijit, documentation, Dojo, dojo.query, dojox, Javascript, json, open source | 6 Comments »

A new Demo engine for Dojo

Posted by Shane O'Sullivan on December 4, 2007

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’ve put in quite a few already, but it’s so easy to do that this could become a huge resource for the Dojo community.

If you have any suggestions, please let me know.

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

Posted in Ajax, demo, dijit, documentation, Dojo, dojox.image, Javascript, json, open source | 6 Comments »

 
Follow

Get every new post delivered to your Inbox.

Join 535 other followers

%d bloggers like this: