Starling Feathers初体验

Getting Started with Feathers

from：http://wiki.starling-framework.org/feathers/getting-started

 

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

Prerequisites

• You should understand how to set up a regular Starling project. Please start with the Starling guides and tutorials, if you're new to Starling.
• The complete source code for the Hello World example is included with Feathers, so that you can follow along. You may also view the most recent version of the source code on Github.

Final Result

  

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

Before writing code

Download feathers from here: http://feathersui.com/download/ (At the moment of writing, the last stable version is “1.0 beta”). Unzip, find ”/feathers-1.0.0-beta/swc/feathers.swc” and copy it to the folder you use for '.swc' files. Now we should tell IDE where it can find feathers. In Flash Professional CS6:

• Go to 'Edit → Preferences → (Preferences dialog pop-ups)
• Category: ActionScript → Click 'ActionScript 3.0 Settings'
• On the right side of 'Library path' click icon with plus and then 'browse for swc' icon
• Find feathers.swc file and choose it
• Click 'OK', Click 'OK'.

Now you can use Feathers, as if it were built in ActionScript.

Do the same procedure with Starling if you didn't already. Go to: https://github.com/PrimaryFeather/Starling-Framework. And click 'ZIP' button to download Starling with full source code. But we need only ”/starling/bin/starling.swc”. Add it to 'Library path' in the same way. Now you can use Starling, as if it were built in ActionScript.

 

 

At the moment of writing this. “Feathers 1.0 beta” doesn't work with “Starling 1.2”, which can be downloaded directly from Starling website. That's why you should download Starling from GitHub.com, not from gamua.com.

 

If you are getting something like this:

"ArgumentError: Error #1063: Несоответствие количества аргументов в starling.events::TouchEvent/getTouches(). Ожидалось 1, получено 3. (Expected 1 argument, got 3)
	at feathers.controls::Button/touchHandler()
	at starling.events::EventDispatcher/invoke()
	at starling.events::EventDispatcher/bubble()
	at starling.events::EventDispatcher/dispatchEvent()
	at starling.display::DisplayObject/dispatchEvent()
	at TouchProcessor/advanceTime()
	at starling.core::Starling/advanceTime()
	at starling.core::Starling/nextFrame()
	at starling.core::Starling/onEnterFrame()"

Be sure to reload the latest version of Starling from GitHub.com (At the moment of writing - 1.3 RC (Release Candidate) )

 

 

Copy theme

Now copy 'assets' and 'source' folders from ”/feathers-1.0.0-beta/themes/MetalWorksMobileTheme” to your project folder. And set 'source' folder as sources folder for this particular project:

• Select your '.fla' file
• Go to 'ActionScript 3.0 Settings'
• Select 'Source path' tab (if it isn't selected)
• Double click on the only line in the list
• Replace './' (that is default) with './source'
• Click OK

Now remember to save all your '.as' files in '/source' folder.

Walkthrough

The following class should be the root display object that is initialized with Starling. Here's the basic structure of the class that we'll start with. Most of the code that we add later will go into the addedToStageHandler() function.

Create '/source/HelloFeathers.as' file with following content:

import starling.display.Sprite;
import feathers.themes.MetalWorksMobileTheme;
import feathers.controls.Button;
import feathers.controls.Label;
import feathers.controls.Callout;
import starling.events.Event;

public class HelloFeathers extends Sprite
{
	public function HelloFeathers()
	{
		this.addEventListener( Event.ADDED_TO_STAGE, addedToStageHandler );
	}
 
	protected var theme:MetalWorksMobileTheme;
	protected var button:Button;
 
	protected function addedToStageHandler( event:Event ):void
	{
	}
}

Let's start by initializing a theme. By default, the Feathers components don't have skins. However, a theme can be instantiated in just one line of code, and it will automatically provide skins to all Feathers components that are added to the stage.

this.theme = new MetalWorksMobileTheme( this.stage );

We pass a reference to the stage into the theme's constructor. The theme listens for certain events to detect when a new Feathers component is added to the stage. When a new component is added, the theme will create appropriate skins, including backgrounds, icons, text formats, and skins for sub-components, and pass them in automatically.

 

 

Most of the Feathers examples, including this one, use the MetalWorksMobileTheme. The Feathers library comes with several themes that you may choose from. Or you can create your own theme.

 

 

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
{
	const label:Label = new Label();
	label.text = "Hi, I'm Feathers!\nHave a nice day.";
	Callout.show(label, this.button);
}

This triggered listener displays a Label component in a Callout component. Like with our button, these two components are 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;

Full source (Starling 1.3RC, Feathers 1.0 beta)

By now you should have:

• /HelloFeathers.fla (if in Flash Professional CS6)
• /assets/…
• /source/feathers/…

• /source/HelloFeathersStartup.as:

package 
{
	import flash.display.MovieClip;
	import starling.core.*;
 
	public class HelloFeathersStartup extends MovieClip
	{
		public function HelloFeathersStartup()
		{
			var st:Starling = new Starling(HelloFeathers, this.stage);
			st.showStats = true;
			st.start();
		}
	}
}

• /source/HelloFeathers.as

package
{
	import starling.display.Sprite;
	import feathers.themes.MetalWorksMobileTheme;
	import feathers.controls.Button;
	import feathers.controls.Label;
	import feathers.controls.Callout;
	import starling.events.Event;
 
	class HelloFeathers extends Sprite
	{
		public function HelloFeathers()
		{
			this.addEventListener( Event.ADDED_TO_STAGE, addedToStageHandler );
		}
 
		protected var theme:MetalWorksMobileTheme
		protected var button:Button;
 
		protected function addedToStageHandler( event:Event ):void
		{
			this.theme = new MetalWorksMobileTheme(this.stage);
 
			this.button = new Button();
			this.button.label = "Click Me";
			this.addChild(button);
 
			this.button.addEventListener(Event.TRIGGERED, bt);
 
			this.button.validate();
			this.button.x = (this.stage.stageWidth - this.button.width) / 2;
			this.button.y = (this.stage.stageHeight - this.button.height) / 2;
		}
 
		private function bt(e:Event):void
		{
			const label:Label = new Label();
			label.text = "Hi, I'm Feathers!\nHave a nice day.";
			Callout.show(label, this.button);
		}
	}	
}

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 Callout class, read How to use the Feathers Callout component.

For more extensive sample code, check out the Feathers Examples (and their source code on Github).

For more tutorials, return to the Feathers Documentation.