Feathers - Starling-based UI framework for mobile and desktop applications

The reason for writing this post was the release of the new version of the UI framework Feathers .

Being an AS3 developer, I have been following the development of this product since the early beta versions. At this stage of development of this product, it is possible to assert with confidence that it is ready for mass use. And not only in the community and Flash enthusiasts.
')
Feathers is a library of user interface components using all GPU acceleration capabilities through the Starling framework. The library contains fast, lightweight and easily expandable UI controllers for mobile and desktop applications.

Feathers is open source and supported by the developer community on the one hand and Adobe on the other. Such a symbiosis provides ideal conditions for the development of the product, "when the tops can and the lower classes want." Technically, this framework relies on the solid and proven Starling foundation. About which you should definitely say a few words to understand the overall picture and the strength of the framework.

What is Starling?

Starling is an AS3 framework developed on the basis of Stage3D, for 2D applications. Starling was originally positioned as a means for developing games, but it turned out that it could be used to solve many other problems. Especially, the tasks in which the speed of the application is important, because Starling allows you to quickly create hardware accelerated applications. In fact, Starling allows you to use GPU acceleration without the need to write high-level libraries and understand the low-level API Stage3D.

The Starling framework is designed with an eye to the Flash Player API, it provides an excellent level of abstraction from the Stage3D API, and at the same time uses the structures familiar to the AS3 developer. The entry time, even for a novice AS3 developer, is minimal.



In summary, we get an excellent, thoughtful tool for writing games, in the shortest possible time, on different platforms and so as not to slow down. Starling games are excellent, I think everyone played Rovio birds .

Is it just a game? Well, you can and not the game, but then the UI is more conservative to draw need, buttons, lists, sliders, checkboxes, galleries. As this is all skinned under the device. What can I say, a person is by nature very lazy and, it would be strange, not to get a solution for quickly building UI applications based on Starling.

Stage3D UI by Feathers

Starting with the early beta versions of the framework, I tried to use it in my applications, for example, in the game Wonderful Stickers buttons and a list of items of stickers made using Feathers. No less fascinating examples can be found on the framework website .

For an AS3 developer, the start of using the framework is quick and painless. Add libraries to the project and go to the code.

The result would like to get some kind of Hello World:



Suppose you already know how to use and initialize Starling, and go straight to Feathers. Below is an example of the Main class, which we will use as the root display of the Starling sheet.

package feathers.examples.helloWorld { import feathers.controls.Button; import feathers.controls.Callout; import feathers.controls.Label; import feathers.themes.MetalWorksMobileTheme; import starling.display.Sprite; import starling.event.Event; public class Main extends Sprite { public function Main() { this.addEventListener( Event.ADDED_TO_STAGE, addedToStageHandler ); } protected var button:Button; protected function addedToStageHandler( event:Event ):void { } } } 

Further, most of the code will be in the addedToStageHandler() handler.
First, let's unsubscribe from the ADDED_TO_STAGE event and add subject initialization:

  protected function addedToStageHandler(event:Event):void { this.removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); new MetalWorksMobileTheme(); } 

The theme listener monitors the moment the components are added to the display list, and each time a UI object is added, the corresponding skin is applied. Examples of constructing unique themes can be found in the documentation for the framework. Based on them, you can quickly create your own theme.

Now add a Button :

 this.button = new Button(); this.button.label = "Click Me"; this.addChild( button ); 

And the tap / click handler:

 this.button.addEventListener( Event.TRIGGERED, button_triggeredHandler ); 

In the event handler for the click event, add the appearance of the Callout pop-up component:

 protected function button_triggeredHandler( event:Event ):void { const label:Label = new Label(); label.text = "Hi, I'm Feathers!\nHave a nice day."; Callout.show( label, this.button ); } 

It should be noted that Feathers has a redraw validation system, this allows you to redraw objects only when necessary. In case we apply several properties to an object, we can significantly save by redrawing the object only once.
In this case, no property has been applied to our button, we will force validation:

 this.button.validate(); 

And center our button:

 this.button.x = (this.stage.stageWidth - this.button.width) / 2; this.button.y = (this.stage.stageHeight - this.button.height) / 2; 

What happened you can see here .

As a result, we have a development tool comparable in speed to native solutions. Having a platform coverage, no less than that of frameworks for hybrid HTML5 JS applications. (Especially, given the fact that Starling has plans to cover JS directions .) And clearly deserving the strategic attention of developers of cross-platform mobile applications.