Posts tagged "Starling Framework"

Feathers 3.2

Congratulations to Josh Tynjala and the Feathers open source project for the release of Feathers 3.2. 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?

In version 3.2.0, Feathers UI includes a new PullToRefresh example, a new swipe gesture for TabNavigator, real time collection filtering, and support for asynchronous texture uploads with the ImageLoader component.

Collection filtering

The new filterFunction property in the ListCollection class makes it possible to filter data in real time. To illustrate this functionality, let us create a quick example that uses a TextInput component to filter the items in a List component.

Firstly, we will create the List and TextInput. Then we will populate the ListCollection with some data:

var data:Array =
[
	{ label: "Apple" },
	{ label: "Banana" },
	{ label: "Cherry" },
	{ label: "Grape" },
	{ label: "Lemon" },
	{ label: "Peach" },
	{ label: "Strawberry" },
	{ label: "Watermelon" },
];
var collection:ListCollection = new ListCollection(data);

var list:List = new List();
list.dataProvider = collection;
this.addChild(list);

var input:TextInput = new TextInput();
this.addChild(input);

Now, we would like to filter the items displayed in the List when the TextInput is modified. To accomplish this, we will listen for Event.CHANGE and modify the filterFunction property:

input.addEventListener(Event.CHANGE, function():void
{
   if(input.text.length === 0)
   {
       collection.filterFunction = null;
       return;
   }
   collection.filterFunction = function(item:Object):Boolean
   {
       var itemText:String = item.label.toLowerCase();
       var filterText:String = input.text.toLowerCase();
       return itemText.indexOf( filterText ) >= 0;
   };
});

The filterFunction is called for each item in the ListCollection. If it returns true, the item is displayed and if it returns false, the item is hidden.

Get started with Feathers 3.2.0

You can find the Feathers UI 3.2.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.

feathers-3-dot-0-final

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:

feathers-idle-performance

Skinning

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.

feathers-migration-guide

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.