Ext JS Designer Preview

October 08, 2009 | Aaron Conran

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.

For Example:

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

Some of the exciting new components added are:

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

Auto Updating the Designer via Adobe AIR

Screenshots - Leveraging ActionScript within Ext JS

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.

Use the mxmlc compiler from the Flex SDK to compile the code:

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)

You can then copy the file into your project and include the file:

We can now encode the raw bitmap data and write it to the file system:

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.