Creating Badge Kit Elements

While a large number of controls are at your disposal, you might find that you need a type of interaction that isn't readily available. That's when it's time to get your hands dirty and start coding. Since the Badge Kit controls are built upon the Flash CS3 component framework, most of the hard work is already done. And because all controls are extensible, you'll probably find that you just need to extend an existing UI control. One of the huge benefits of using this framework is that any existing components you've created can be used immediately in the Badge Kit, and any you create for the Badge Kit can also be used in other Flash projects.

Prerequisites

Creating and extending classes in Flash is an advanced topic that may require a good deal of knowledge and experience with ActionScript 3 and Flash CS3. For a detailed introduction into the art of component creation for Flash, check out the Adobe Developer Center article Creating ActionScript 3.0 components in Flash.

Creating a new Element

Choosing your Base Class

The first step is to choose the type of interaction you require, and look for an existing control that contains this functionality. If none of the controls, such as buttons or lists, have a type of interaction that you require, you can consider simply using the base class for all Badge Kit components, fl.core.UIComponent. However, you'll probably find it most useful to extend an existing UI control.

Extending the Class

Once you've chosen your base, you'll want to extend this class in ActionScript. For instance, extending the Button component would have you place code like this in a file called MyComponent.as. Where you place this file doesn't matter, as long as when you compile it you know where to point the compiler to. I recommend placing it under the Badge Kit's source folder, under com/yahoo/astra/badgekit/controls, as this is where all the other UI controls are placed. package { import fl.controls.Button; public class MyComponent extends Button { public var myProperty:String; public function MyComponent() { //do something } } }

You can then add additional functionality to this class, and you'll be able to manipulate easily in the Badge Kit markup. While a badge cannot call a method of this class, it can modify properties and styles as well as add listeners for events. You don't need to worry about which is which, as the Badge Kit will determine this for you. For instance, in the above class we've added a property called myProperty. Simply by doing that, we've made that property accessbile in the badge.

<elements> <MyComponent myProperty="some value"/> </elements>

Deployment

Finally, when you've tested your control and are ready to deploy it, you'll want to compile it into a SWF that you'll import into your badge. For more information on compiling and deployment, see the article Deploying Items to the Badge Kit.