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
Flickr Badge Example
The Flickr Badge displays a few of the latest photos for a particular Flickr user. It's a small application that can embedded into pages to showcase recent images and lead the viewer back to Flickr.
First, let's take a look at the config.xml file for the Flickr badge. A particular point of interest here is the <animations> section:
This section defines transitions that we can use in conjunction with UI elements in the badge. Each UI element has two properties: onShow and onHide -- these can be assigned the id fields of animations specified above to produce animated appearance and disappearance effects.
In the content.xml file, we first define the resources our badge uses:
In this badge, we are only using two of the base components: Image and Label. Although the base_components.swf we are using contains all of the base components, it can be modified and recompiled to only contain the components used in the project.
Next, we specify the services used in the badge:
Since this is a Flickr badge, we are using just one service, the flickrService, which is among the supplied services in base_components.swf. Note that on the result event, the source field of multiple images (defined further in the elements section) is assigned to specific values retrieved from the flickrService. Also note that we dispatch the send call to the service immediately at initialization (since we already have all the parameters needed to make the service call).
Now let's take a look at the <elements> section of the badge:
There are 8 thumbnails, which are all assigned values by the flickrService in its _result_event. We are only showing one of the eight thumbnails above, for brevity. Let's look at the attributes assigned to the element: - width, height, x, y: these are fairly straightforward: we are setting the size and position of the thumbnail
- useHandCursor and buttonMode: these are native properties of the Flash DisplayObject that allow it to act as a button.
- onShow: sets the animation for the display of the element.
- visible: initial visibility of the element.
- complete: the event that's dispatched when the thumbnail has finished loading
- mouseOver, mouseOut: events that are dispatched when the user rolls the mouse over or out of the element's visible area. Note that when the rollover happens, we set imgTitle (the label defined further down in the code) text and visibility; when the user rolls the mouse out, we make the label invisible. The text of the label is set to the title corresponding to the image.
- click: The mouse click event, which in this case sets a source for the fullimage element, defined further in the code.