Simple Tasks v2 - Multiple lists, NativeWindows and Reminders
Sunday, February 24th, 2008
In collaboration with Adobe, one of the key additions in Ext 2.0.2 was Adobe AIR 1.0 support for running in the application sandbox. Also, the Simple Tasks AIR application sample was rewritten to take advantage of more of the native functionality in AIR and gained some cool custom Ext components that can be used outside of AIR.
AIR APIs
First, lets cover some of the AIR APIs that were used:
NativeWindow
This was one of the most useful additions to the Ext.air package. It provides an API to create windows, manage those windows, listen for events like standard Ext Observables and automatic state management for the windows.
var win = new Ext.air.NativeWindow({ id: winId, file: 'task.html', width:500, height:350, resizable: true });
Ext.sql.*
The Ext.data.Store/Record and AIR Sqlite API got an upgrade from the asynchronous database access in the early AIR betas to the synchronous database access introduced in AIR beta 3.
Simple Tasks demonstrates the ease of integration of Ext with Sqlite, using automatic persistence Ext.data.Record instances (e.g. Tasks or Lists) in the database.
tx.data.ListStore = Ext.extend(Ext.data.Store, { constructor: function(){ // superclass call tx.data.ListStore.superclass.constructor.call(this, { sortInfo:{field: 'listName', direction: "ASC"}, reader: new Ext.data.JsonReader({ id: 'listId', fields: tx.data.List }) }); this.conn = tx.data.conn; // Ext.sql.Proxy for managing Sqlite persistence this.proxy = new Ext.sql.Proxy(tx.data.conn, 'list', 'listId', this); }, ...
Native Drag and Drop and Clipboard
Simple Tasks v2 supports dragging any text from any application into the grid to automatically create a new task. You can also paste text from the system clipboard as a new task. However, one of the coolest features is the ability to drag tasks straight from Outlook into Simple Tasks.
Minimize to System Tray
After the initial release of Simple Tasks, one of things most requested internally here as Ext JS (yes, we actually use it!) was the ability to minimize to the windows System Tray. We added support to automatically manage the System Tray functionality to the Ext.air.NativeWindow class, so now minimizing to the system tray is as simple as setting a config option.
var win = new Ext.air.NativeWindow({ id: 'mainWindow', instance: window.nativeWindow, // System tray config minimizeToTray: true, trayIcon: 'ext-air/resources/icons/extlogo16.png', trayTip: 'Simple Tasks', trayMenu : [{ text: 'Open Simple Tasks', handler: function(){ win.activate(); } }, '-', { text: 'Exit', handler: function(){ air.NativeApplication.nativeApplication.exit(); } }] });
Sound
AIR also supports playing sounds. Ext.air.Sound makes that even easier.
Ext.air.Sound.play('beep.mp3');
Ext Custom Components
As noted above, the Simple Tasks application also features some useful samples of custom components in Ext. Some of them were specifically designed to be reusable and may be included as standard Ext components or samples in a future release.
ListTree
This component is similar to a ComboBox or SelectBox except the list of the component is backed by an Ext TreePanel. It makes display and selection within a hierarchical list much more intuitive than a standard flattened list.
Another cool sample that goes along with this component is a custom selection model “ActivationModel”. As the name may suggest, it support 2 forms of selection - activation and selection. With activation, the component supports full keyboard navigation, expand/collapse with the keyboard and unlike the standard tree selection model, selection is an action on it’s own.
Custom Grid Columns
The easiest way to explain is with screenshots.
Switch Button
This component is like a radio button seen commonly in desktop applications. It was named “Switch” Button so it wasn’t confused with the radio buttons already found in standard HTML. It provides a collection of buttons, one of which can be “pressed” at a time.
Summary
From AIR specific functionality to Ext extras, there are quite a few real world samples present in the Simple Tasks v2 application. If you are using Ext, I would highly recommend taking a look at the source.
- The full source can be found in the Ext 2.0.2 distribution under air/samples/tasks.
- Adobe AIR 1.0 can be downloaded here.
- The Simple Tasks v2 AIR application can be downloaded here.
- You can read about the first version of Simple Tasks in the original blog post.
I regularly hit 
