Getting started with Feathers

In the following beginner-level tutorial, we'll use our first Feathers Button component. This is a very simple demonstration that sets a label, adds an event listener, and creates a theme that will apply a skin.

Prerequisites

Final Result

feathers-hello-world.jpg

See the Hello World example running live in your browser. Requires Adobe Flash Player.

Walkthrough

Below, you'll find the basic structure of the Main class that we'll use as the root Starling display object. This walkthrough assumes that you already know how to initialize Starling. You may look through the example's full source code to see how this is done.

package feathers.examples.helloWorld
{
    import feathers.controls.Button;
    import feathers.controls.TextCallout;
    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
        {
        }
    }
}

In our Main class, most of the code that we add later will go into the addedToStageHandler() function.

Let's start by initializing a theme. By default, the Feathers components don't have skins. However, several example themes are included with Feathers to easily provide sample skins to all components. A theme can be instantiated in just one line of code.

new MetalWorksMobileTheme();

When a new component initializes, the theme will create appropriate skins, including backgrounds, icons, text formats, and skins for sub-components, and pass them in automatically.

With the theme created, let's create the Button and set it's label:

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

If we want to do something when the button is tapped or clicked, we should listen to the Event.TRIGGERED event.

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

Our listener function should look something like this:

protected function button_triggeredHandler( event:Event ):void
{
    TextCallout.show( "Hi, I'm Feathers!\nHave a nice day.", this.button );
}

The button's Event.TRIGGERED listener displays a message in a TextCallout component. Like with our button, this component is automatically skinned by the theme.

Finally, let's position the button in the middle of the stage. First, though, let's take note of one thing about how Feathers controls work. Feathers uses a system of invalidation that delays redraws until just immediately before Starling renders to the screen. This keeps Feathers from using too much CPU by redrawing over and over again when you need to change multiple properties all at once.

At this moment, our button still has width and height values of 0 because it hasn't drawn yet. Feathers controls automatically resize themselves to an ideal size when they redraw (unless you explicitly set your own width and height values). This is usually based on the original dimensions of the skins and other children.

In this case, we want to position our button immediately, without waiting for validation. To make a Feathers control draw right now, call the validate() function:

this.button.validate();

Now, we can properly center our button on the stage because it will correctly report appropriate dimensions based on the size of the button's skin and label:

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

Conclusion

That should get you started with the very basics of working with Feathers. For more information about the capabilities of the Button class, read How to use the Feathers Button component. For the TextCallout class, read How to use the Feathers TextCallout component.

For more extensive sample code, check out the other Feathers examples included in the examples directory when you download Feathers. For example themes (including MetalWorksMobileTheme), check out the themes directory.