Ext

We are very excited to share our latest version of the Ext JS Designer. This new version adds many new features to improve your efficiency creating application designs. Once you get accustomed to these features its difficult to live without them. For those of you that don't have the time or ability to download and play around with the Designer, we have created a Preview screencast in which we mock up some interfaces. We have tried to show off as much features and functionality as possible.

New Features

• Duplicating Components
• Transforming Components
• Undo/Redo
• Configuration Searching
• Auto Updating
• Screenshots

Duplicating Components

How many times have you copied and pasted a set of source code and/or configuration and modify a couple of values to save on some keystrokes? The designer now has the same ability by providing you the ability to duplicate sets of components and then modify their values.

Take a look at this quick sample where I've leveraged the duplicate functionality to quickly build a form without dragging and dropping the components and setting up common configurations over and over.

Building a simple form:

Transforming Components

When developing you are capable of quickly changing a component from one class to another without losing your configurations by changing the class that you are extending from or instantiating.

MyGrid = Ext.extend(Ext.grid.EditorGridPanel, {
 
});
// or
new Ext.grid.EditorGridPanel({
 
});

Developing in the designer should not be any different. If after creating a GridPanel I decide that I really meant to use an EditorGridPanel. I can right click on the component within the inspector and see which transformation options are available.

A GridPanel can be transformed to an EditorGridPanel and vice-versa.

Let's put together a GridPanel. When we drag out a field for a particular column the designer intelligently knows that in order to use a TextField within a column it must convert itself to an EditorGrid. The designer will automatically perform this transformation for you.

Another interesting transformation is converting a TabPanel to a Panel and then setting the layout to accordion. Fields are capable of transforming between types.

Component Undo/Redo

If you make a mistake while putting together your application you can undo/redo the last change that was made via the Undo and Redo buttons in the top toolbar. A current limitation of this feature is that if you perform a transform on a top level component then the history is reset.

Configuration Searching

A critical feature missing in prior releases was the ability to search configurations which are available to the component you have currently selected. In the past, if you were searching for a component configuration you had to look through the entire list available! The screenshot to the right demonstrates searching for the 'la' configuration in a FormPanel.

You can now unset configurations by clicking on the x on the right hand side of the configuration. This is useful when you want to remove setting a configuration and not just set it to "".

Newly Added Components

• EditorGrid
• ButtonGroup
• BoxComponent
• Slider

Auto-Update

We are using Adobe AIR's Auto Update framework to provide updates to the designer as we push out new public releases. When we release a new version you will be prompted to update to the latest version. You can expand out the "Release Notes" to see what enhancements and bug fixes have been made. Adobe AIR provides us the ability to quickly deploy updates to all of you as new versions are released seamlessly.

One feature we wanted to implement within the designer was taking screenshots of your budding prototype directly within the application. Imagine this, you quickly mock up a borderlayout complete with tabs, a grid, and a form and then click the screenshot button. You can then choose to save the screenshot of the component you've just created as a PNG. We thought that this would probably be a simple task within AIR but ended up having to do quite some digging to figure out how to accomplish it.

In order to create a screenshot of the applications current state we can use air.BitmapData to retrieve the raw bitmap data of the current screen by calling the draw method.

var capture = new air.BitmapData( window.htmlLoader.stage.stageWidth, 
                                  window.htmlLoader.stage.stageHeight);
capture.draw( window.htmlLoader );

The contents of the variable capture now has the raw bitmap data of our entire application. We'd like to convert this into a modern format like PNG and save it to the file system. We will use PNGEncoder from as3corelib. You can compile and use any arbitrary actionscript code to a SWF and expose it to JavaScript within Adobe AIR by including it in the page by giving it a type of application/x-shockwave-flash.

aaron@aaron-desktop:~/as3corelib-.92.1/src$ mxmlc -source-path=. com/adobe/images/PNGEncoder.as 
Loading configuration file /home/aaron/FlexSDK/frameworks/flex-config.xml
/home/aaron/as3corelib-.92.1/src/com/adobe/images/PNGEncoder.swf (1242 bytes)

<script src="adobe/PNGEncoder.swf" type="application/x-shockwave-flash"></script>

var file = air.File.documentsDirectory.resolvePath('screenshot.png');
var stream = new air.FileStream();
// Encode image captured from air.BitmapData
var png = window.runtime.com.adobe.images.PNGEncoder.encode( capture );
 
stream.open( file, air.FileMode.WRITE );
stream.writeBytes( png, 0, 0 );
stream.close();

When you import classes from ActionScript into your HTML App they will immediately be placed in the window.runtime namespace with their appropriate package namespaces.

Therefore our class com.adobe.images.PNGEncoder is placed in window.runtime.com.adobe.images.PNGEncoder. (As an aside this is all AIRAliases.js file which you include simply provides smaller aliases from window.runtime into the air namespace.)

When taking the screenshot we also use a clipping rectangle and the copyPixels method to to grab only the bounding rectangle of the currently active component.

Summary

We've added lots of features which should improve your productivity when building user interfaces with the designer. We hope you like our progress and as always we greatly appreciate your feedback. For those of you that have suggestions, questions, found bugs, or just want to make a remark, we are listening.

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, 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.