Simple Tasks v2 – Multiple lists, NativeWindows and Reminders

February 25, 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
});

Task NativeWindow in Simple Tasks 2

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.

Dragging Outlook tasks 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();
        }
    }]
});

Simple Tasks in the System Tray

Sound
AIR also supports playing sounds. Ext.air.Sound makes that even easier.

 
Ext.air.Sound.play('beep.mp3');

The irritating beeping sound is sure to catch your attention

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.

TreeList supports selection of data organized hierarchically

Custom Grid Columns
The easiest way to explain is with screenshots.

Pseudo button column, used to toggle complete/active

Menu column, used to set quick reminders

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.

Quick view change

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.