ASTRA Badge Kit Examples
The Badge Kit comes with a set of examples that ease you into using it, introducing data services, and show you how to extend the Badge Kit.
- Simple Badge
- Simple Badge with Overlay
- Simple Badge with URL Service
- Flickr Badge
- WTH Badge with custom Service and Element
"What The Heck" Badge Example
The playful "What The Heck" badge displays entries from the odd news RSS feed and includes a custom service and custom element.
Creating a custom service
Before constructing this badge, we'll need a custom service that reads from a particular RSS feed and prepares the data for use within the BadgeKit. To understand how the service is written, look at the Creating a Badge Kit Service article and then open the file OddNewsRSSService.as in the examples/wth folder. Let's look at how this particular service is implemented:- The OddNewsRSSService class extends the EventDispatcher and implements the IService interface. The IService interface requires the service to implement two methods: send() and get lastResult(). * The send() method instantiates a loader and submits a request for the appropriate XML * The resultHandler method parses the returned XML and places the results into the member variables of the service class.
- The get lastResult() method returns the data prepared by the resultHandler.
Creating a custom element
In addition to a custom service, this badge also needs a custom element: a particular type of List item. First, read the article on creating Badge Kit elements, and then take a look at the file WTHListItem.as. Here are the notable features:- The WTHListItem inherits from UIComponent. All Badge elements must inherit from that base class to function properly.
- The WTHListItem has a number of getters and setters that allow you to retrieve and set various aspects of the component: the texts of multiple labels, the source for the thumbnail, the url, etc.
The component and the objects comprising it are in the wth_components.fla (so named in case the badge needs to include other components - they can all go into the same FLA for compactness). Note that the component contains all the elements that are used to set and retrieve data in the WTHListItem class.
Putting the badge together
The rest of this process is a familiar story. We have compiled and exported the OddNewsRssService and the wth-components FLAs into SWFs and stored them in the swf/ folder. Now let's take a look at the config.xml and content.xml files associated with the badge:
config.xml
Nothing unusual here: we define shorthands for paths used in the badge, we include classpaths so we can use short class names rather than fully qualified ones, and we define a couple of animations to use when showing and hiding individual elements.content.xml
In the resources section of content.xml, we import the SWFs we just created. We are also including the base_components.swf to use the Image and Label components: Next, we define two services. The first service is the URLService, which allows us to open an arbitrary URL in the browser window. The second is the OddNewsRSSService which we just created: Note that when the results are returned from the OddNewsRSSService, a number of variable assignments take place. In particular, using the getters and setters we defined in the class for our custom element, we assign the values for the thumbnail, the title, timestamp and URL for each of the items. Next is the actual elements section where we place the list items on stage. First we define the background image and a few labels: Note that the Label node has an htmlText child node. Any property of an element can be a child text node rather than an attribute; that way, we can place CDATA in variables, which does not require HML escaping. Next we define the WTHListItems and assign them the necessary properties. Notice that because we defined a custom background_mc member variable for the WTHListItem, we can modify its properties based on mouse events: Finally, a few more decorations, and we are done! And that's all there is to the WTH Badge!