Author Archive: Milind Kumar Jha

Feathers 3.4

Congratulations to Josh Tynjala and the Feathers open source project for the release of Feathers 3.4. Feathers offer a large collection of ActionScript user interface components and layouts for mobile, desktop, and smart TVs. It is powered by both Starling Framework and Adobe AIR.

What’s new in this release?

In version 3.4.0, Feathers UI includes a new DataGrid componentsorting for collections, and updates to the FocusManager and all components to support TV remote controls when targeting Android TV.

Data Grid

The new DataGrid component displays data in a table format with multiple columns for each item in its data provider. It supports re-ordering columns, column resizing, and sorting items.

Let’s take a moment to learn the basics of the Feathers DataGrid component. First, instantiate the component and add it to the display list:

var grid:DataGrid = new DataGrid();
this.addChild( grid );

Next, populate the grid’s data provider with some items:

var items:ArrayCollection = new ArrayCollection(
    { item: "Chicken breast", dept: "Meat", price: "5.90" },
    { item: "Bacon", dept: "Meat", price: "4.49" },
    { item: "2% Milk", dept: "Dairy", price: "2.49" },
    { item: "Butter", dept: "Dairy", price: "4.69" },
    { item: "Lettuce", dept: "Produce", price: "1.29" },
    { item: "Broccoli", dept: "Produce", price: "2.99" },
    { item: "Whole Wheat Bread", dept: "Bakery", price: "2.49" },
    { item: "English Muffins", dept: "Bakery", price: "2.99" },
grid.dataProvider = items;

As you can see, each item contains multiple fields, and we want to display each of them in its own columns. To do that, define another collection:

grid.columns = new ArrayCollection(
    new DataGridColumn("item", "Item"),
    new DataGridColumn("dept", "Department"),
    new DataGridColumn("price", "Unit Price"),

For each column, specify the field to access from each item, and also specify a more human-readable label for the column header.

That’s it! You have created your first DataGrid in Feathers.

Get started with Feathers 3.4.0

You can find the Feathers UI 3.4.0 release notes on the project’s Github page. Developers are encouraged to download the latest stable build from the Feathers website.

Feathers 3.0: A New Major Version

Congratulations to Josh Tynjala and the Feathers open source project for the release of Feathers 3.0. Feathers offers a large collection of ActionScript user interface components and layouts for mobile and desktop. It is powered by both Starling Framework and Adobe AIR.


What’s new in this release?

Many of the changes in Feathers 3.0 can be found under the hood, including bug fixes and architecture improvements. This version lays a foundation for new components and features in future versions.

Improved Performance When Idle

Feathers apps benefit greatly from the architecture changes in Starling Framework 2.0. CPU usage in static scenes has dropped to nearly zero with Starling’s new skipUnchangedFrames property. This means that apps built with Feathers should use less battery, which makes them better citizens on mobile devices.

Just take a look at this comparison made by Adobe Scout that shows an idle Feathers 2.3 app compared with the same app running on Feathers 3.0:



In Feathers 3.0, the developer experience gets better too. Let’s look at some of the skinning improvements.

The Scale9Image, Scale3Image, and TiledImage classes are no longer necessary in Feathers 3.0 because Starling 2.0 now supports these capabilities natively in the Image class using the scale9Grid and tileGrid properties.

Here’s an example of using the scale9Grid property with an Image:

var image:Image = new Image( texture );
image.scale9Grid = new Rectangle( 3, 2, 6, 3 );
image.width = 100;
addChild( image );

For components that have more than one state (such as a Button that can be up, down or disabled), Feathers includes a new ImageSkin class that accepts multiple textures.

ImageSkin works a lot like Starling’s Image class, but it adds a new setTextureForState() method that can be used to pass in additional textures. Take a look at this example of using ImageSkin to skin a Button component’s states:

var skin:ImageSkin = new ImageSkin( upTexture );
skin.setTextureForState( ButtonState.DOWN, downTexture );
skin.setTextureForState( ButtonState.DISABLED, disabledTexture );
skin.scale9Grid = new Rectangle( 3, 2, 6, 3 );
button.defaultSkin = skin;

Migrating from Feathers 2.x to 3.0

Feathers 3.0 includes many more improvements, and some of them may require changes to your existing Feathers apps. Please read through the Feathers 3.0 Migration Guide for complete details about upgrading to this new major version.


You may also want to review the Starling 2 Migration Guide because it provides specific hints about upgrading Starling.

Get started with Feathers 3.0.0

You can find the Feathers UI 3.0.0 release notes on the project’s Github page. Developers are encouraged to download the latest stable version from the Feathers website.