Ext

Pixel Bender is an exciting new technology by Adobe which brings video and image processing capabilities to the flash runtime. It allows you to create and apply filters to ‘bend’ pixels and create compelling animations which have never been possible in an HTML environment. Because Adobe AIR uses flash to load any HTML content, we can leverage these powerful filters on a standard Ext Application in the AIR environment. Ext is releasing a Pixel Bender Explorer demo which allows you to explore many of the new filters which have been created by the Adobe Community and demonstrates how to integrate them into an Ext Application.

Pixel Bender Explorer

Download and install the Pixel Bender Explorer application. Apply different filters or effects by clicking on the Filter Grid. By selecting a filter on the left hand side and adjusting the sliders you can apply live effects to the current target video, browser or image. For some of the filters we have already built some animations such as bend/flatten, waveIn/waveOut, dissolve/combine and tileIn. You can test these animations by choosing the appropriate filter and clicking the animation button above the sliders. These animations can be called within code with a single method call on any Ext.air.NativeWindow or Ext.air.VideoPanel.

Here is an example of bending an Ext.air.NativeWindow:

var win = new Ext.air.NativeWindow({
        file: '../html/browser.html',
        transparent: true,
        chrome: 'none',
        width: 640,
        height: 480
});
win.bend();

Construction of Pixel Bender Kernels

Constructing your own Pixel Bender Effects and Animations is a multi-step process. First, you need to construct a kernel or filter for Pixel Bender. These kernels describe how each pixel should change for a single frame based on a mathematical algorithm which you implement. Kernels are written in the Pixel Bender Kernel Language and compiled with the Pixel Bender Toolkit. The language is very similar to GLSL (OpenGL Shading Language). The benefits of writing effects in this language is that are generalized to all common video hardware platforms and can be used in other Adobe Applications such as After Effects and Photoshop. There is a great article, Pixel Bender basics for Flex and AIR, created by Charles Ward of Adobe that explains the Pixel Bender language in more detail.

Using Pixel Bender Kernels

After compiling the source code of a Pixel Bender Kernel the extension will change from .pbk (source form) to .pbj (binary/compiled form). The compiled version of the kernel is the only file that we need in order to use the new kernel. After compiling a new kernel, you can place the .pbj file in the kernels/ directory of your installed Pixel Bender Explorer application and you will be able to test it after restarting the application.

Pixel Bender Exchange

There is a lively community around the creation of Pixel Bender Kernels on the Pixel Bender Exchange, most of which are under an open source license. Download a few kernels and take them for a test run in the Pixel Bender Explorer. The Explorer provides you all of the tools necessary to create your own custom animations for a NativeWindow or VideoPanel. For example, if you wanted to use the smudge filter created by Frank Reitberger as an animation you would determine the paramName that you want to change and where it should start and end along with a few other configurations.

Using the same NativeWindow as shown in the example above:

win.animFn({
    paramName: 'amount',
    reset: true,			
    startValue: 5,
    endValue: 0,
    duration: 1,
    mode: 'easeOutStrong',
    url: 'app:/kernels/smudger.pbj'
});

Code Explanation

This will tween the value of the parameter amount from 5 to 0 over a duration of 1 second. This will have an effect which I would name smudgeIn because it starts smudged and will eventually look normal. We are using one of Robert Penner’s Easing equations easeOutStrong. Support has been added for 15 different easing modes, which explain how fast/slow we adjust the value over time. The filter also needs to be reset at the end of animation because there is no parameter which will not affect the image. (When we set amount to 0 it will still have a slight change on the target.) Anyone who is developing Pixel Bender Kernels, I encourage you to have a parameter which reflects the unapplied state vs the fully applied state. A good example of this are the Adobe filters which use the parameter of transition (0 does nothing, 1 is fully applied).

Wrapping up

Pixel Bender can spruce up an Ext.air application by adding custom animations to wow your users. However, you should be cautious about the over-use of these filters throughout your application. For a good example of how effective these filters and animations can be to provide proper user feedback you should check Adobe’s signature sample BlackBookSafe. Each time an animation occurs it is clear why it happened, not a surprise to the user and adds character to the application. When using these animations you should strive for the same goal, not to surprise your user, but to impress them.

In collaboration with Adobe, Ext is releasing several new enhancements to the Ext.air package today. These include improvements to existing classes responsible for Sounds, Windowing and Database as well as new classes responsible for Notification, Clipboard and File System Interaction. We have also added new samples demonstrating how to use these new features. One of these examples is ExtPlayer, a simple MP3 player, that leverages the new Ext.air.MusicPlayer and Ext.air.Notify classes. You can install ExtPlayer or download the source.

Ext.air.MusicPlayer

Ext 2.0.2 introduced an Ext.air.Sound class, which is useful for playing small sounds such as beep and chimes. In contrast, Ext.air.MusicPlayer is meant for long running sounds such as music and podcasts which you would never want multiple files playing at the same time. MusicPlayer supports all of the basic operations, stop, pause, play and skipTo along with supporting events. The MusicPlayer enables the developer to add music and podcasts to their AIR-enabled Ext application very quickly.

var mp = new Ext.air.MusicPlayer();
mp.adjustVolume(0.5);
mp.play(url);

Ext.air.Notify

The new notification class allows you to notify your users with toast or growl-like messages from the operating system. This allows you to notify users that something important has occurred even when your application may not be visible. By displaying these notifications at the operating system level it is sure to get the users attention without being lost within a browser tab.

var msg = 'Title: {0}<br/>Artist: {1}';
var sample = new Ext.air.Notify({
    msg: String.format(msg, id3info.songName, id3info.artist),
    icon: '../famfamfam/music.png'
});

Window and App API’s

We added methods and configurations for common window manipulation tasks that did not already exist. Ext.air.NativeWindow now exposes methods to re-order windows, set a window as always on top, and enable full-screen mode. A new singleton, Ext.air.App will allow you to set your application to start on login and get the currently active window.

Ext.air.App.launchOnStartup(true);

Ext.air.Clipboard

Ext.air.Clipboard allows you to interact with the system’s clipboard. Developers can determine if a particular format has data, set the data and get the data. At this point, this is largely a pass through to an existing class from Adobe air.Clipboard.generalClipboard. There may be enhancements or workarounds which Ext will add in the future including integration with drag and drop.

Ext.air.Clipboard.setData('air:text', 'Sample set on the clipboard');
var data = Ext.air.Clipboard.getData('air:text');

Ext.air.VideoPanel

Ext.air.VideoPanel enables you to embed flash based video while maintaining the same functionality as an Ext.Panel. VideoPanel’s can also take part in Ext layout management. This means that you can nest your Video’s in a border layout, add toolbars, buttons, just as you have become accustomed to. You just need to provide the recorded FLV to playback or provide a camera connected to the PC. You can even watch the video fullscreen in high definittion!

var vp = new Ext.Viewport({
    layout: 'fit',
    items: [{
        id: 'video',
        xtype: 'videopanel'
    }]
});
Ext.getCmp('video').loadVideo('sample.flv');

AIR and the Future of Ext.air

Adobe AIR enables web developers to use their existing skill set to create desktop applications. AIR is a cross-platform runtime and allows you to develop your application once and then deploy it across Windows, OS X or Linux. (The Linux runtime is currently in beta status.) Adobe AIR 1.5 was shipped last week at AdobeMAX and features database encryption, an updated WebKit (including SquirrelFish) and Flash Player 10.

Ext will be adding support to encrypt your SQLite database soon. Another exciting technology which was included in Adobe AIR 1.5 is PixelBender. PixelBender allows you to apply lightning fast image or video processing filters to your application. An important feature of AIR that many people are unaware of is that you can mix and match Ajax, Flash and Flex technologies. There are several existing open-source ActionScript libraries which you can take advantage of immediately by including them in your application. A new project from Adobe named Alchemy will even let you compile C or C++ code to the ActionScript virtual machine. You could then consume this code in an Ext application on the AIR platform! The entire Ext.air package including samples can be downloaded here. It will also be included in the next release of Ext.

We are pleased to announce that Ext has partnered with CacheFly, a global content network, to provide free CDN hosting for the Ext JS framework. Cachefly’s globally distributed network and aggressive caching accelerate the delivery of web content like JavaScript and CSS, making for an even faster Ext experience.

The Ext CDN also provides the ability to create your own custom builds using Ext’s Build It! tool, and host them on the CDN. The custom builder implements features to intelligently cache your component selections, adapter, and Ext version to create a unique custom build. These custom builds are cached across sessions and used by anyone who makes the same selections as you have - allowing for caching of custom builds across applications to fully realize the benefits of the CDN.

Creating a Custom Build

We’ve made the process of creating the custom build on the CDN as simple as a selecting the option.

Using the Custom build

To use your custom build on your own site, insert the output into the HEAD section of your site. If you needed to use a build with no grid or tree support you would just paste the following:

 <script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-7.js"> </script>
 <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2/resources/css/ext-all.css" />

For those of you that need the complete library and use ext-all.js and ext-all.css we have those available as well.

 <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2/ext-all.js"> </script>
 <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2/resources/css/ext-all.css" />

Summary

There are many ways to judge an application’s performance, however none are as noticeable as the time it takes for an application to load. There are many techniques such as compression using gzip , minification using JSMin, and tools like YSlow to help developers make noticeable improvements. We hope the Ext CDN is another optimization our community will add to their toolbox.

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.

Ext JS is an excellent framework for building web applications that have desktop like functionality in a web browser. But what if you could take your JavaScript powered application and run on the desktop like any other native application?

The launch of Adobe AIR (formerly Apollo) has made this not only a reality, but extremely easy. Armed with early access Ext 2.0, Aptana IDE and a 4 pack of Red Bull I set out to build my first AIR application.

Get Aptana

With the new Aptana AIR plugin creating an AIR app was easy, even for a newbie like me. First go to the Aptana site and get Aptana.

1. Go to Window->Preferences and check this setting and do an update to get the latest Ext support.

2. Follow the steps in the “Start Page” to get the AIR environment set up.

3. Click on File->New->Project, select AIR Project and follow the simple directions.

Coding the application

Coding the UI of the AIR application was indentical to coding any other Ext application. Within a short amount of time, I had my user interface set up and started abstracting pieces out to make them reusable. Here are some of the most noteworthy pieces that others building an AIR application with Ext may wish to take a look at.

Ext.air.MainWindow

AIR allows the application developer to remove the system window chrome and use their own. With the help of Kevin Hoyt of Adobe, we were able to replace the standard window chrome with Ext.Window. While some may not like it’s non-native look, I think the result looks great! I took this code and abstracted it out into a reusable class, CSS and images appropriately named Ext.air.MainWindow. The class can be used on any AIR native window, similar to how you would use an Ext.Viewport.

Ext.data.SqlDB and Google Gears support

The other challenge faced was when I wanted to run the same application in a browser. The most logical choice was to use Google Gears for the SQL DB. However, the APIs for AIR and Google Gears are nothing alike. In fact, AIR’s SQLite database API is 100% asynchronous via events while Gears API is all synchronous with results coming immediately on execution. So Ext.data.SqlDB was created to abstract both of these APIs into a single API to access both.

The other part of this database code that is worth talking about is Ext.data.SqlDB.Proxy. The Proxy class is a standard Ext data proxy, which makes using SQLite with Ext data stores painless. You can use them like you would use a store working over Ajax. They work “out of the box” with Grids, ComboBoxes and other components without worrying about whats going on in the background. The proxy also handles persisting any changes to the database automatically. So when you add, edit or remove a task in the task store, it handles data translations, events and callbacks to make sure the changes get persisted into the SQLite database.

Building the application

Can Aptana make this any easier?

Simple Tasks

I started out with low expectations - just making a simple application in AIR using Ext. But in less than a day of actual development time I was able to create a cool personal task list application that I will actually use (good bye 50 open Notepad windows!). Here’s a rundown of some of the things that it does:

• Task sorting and grouping - this was easy using the new Ext 2.0 GridView.
• Runs on the desktop with AIR or online with Google Gears with the only change being swapping out the database adapter JS file.
• Inline editing, adding and deleting of tasks with *automatic* persistence to local storage.
• Basic keyboard support.
• Intuitive and responsive interface.

The AIR application can be downloaded here. The online version which uses Google Gears can be viewed here.

While Adobe Air is still being refined, I have the feeling that this is the start of something great.

More Information

An AIR application is itself just a zip file. If you unpack that zip file, the full source code is available in the file.

Ext 2.0

The sample application referenced in this post uses an early version of Ext 2.0. Ext 2.0 is available to early access subscribers in the Ext SVN under branches/ext2.0 now! Grab your copy on our Download page.

Adobe AIR

The AIR runtime can be downloaded from http://labs.adobe.com/downloads/air.html. The AIR SDK can be downloaded from http://labs.adobe.com/downloads/airsdk.html.

Kevin Hoyt is a platform evangelist with Adobe. His blog is at http://blog.kevinhoyt.org/. He has a podcast interview from a training session in Vegas with Ext JS which you can listen to at http://blog.kevinhoyt.org/interviews/.

Aptana IDE

Aptana IDE is a free, open-source, cross-platform, JavaScript-focused development environment for building Ajax applications. They have great support for building AIR applications and their overall Ext development support is getting better with every release. More information about Aptana can be found on their website, http://aptana.com.

Red Bull

Red Bull is a must for any software development project. Red bull gives you wings to fly in AIR.