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
Simple Badge Example
This badge is a good starting point for understanding how badges are constructed using XML files.
First, let's take a look at the config.xml file:
There are two important sections in this config file. The first is contentpath, which sets the full path to the content.xml. In this case, content.xml is located in the same folder.
The next section is paths, which provides a list of shorthands for paths used in the project. In a moment, we'll see how these are used in content.xml.
In content.xml, we have the following markup:
Notice that the top-level node is badge, and it contains multiple sub-sections. The possible sub-sections for the badge are: resources, services and elements. In this case, we are not using any services, so only resources and elements sections are present.
In the resources section, we are loading in an outside SWF contains the elements used in the badge. Note that we are using a path shorthand defined in config.xml when specifying the path (the "%%" delimiters are necessary to identify it as a shorthand and not plain text).
In the elements section, we have a background Image, a Label and another Image. The elements' Z-order is the same as the order in which they are defined. Hence, the background image will be in the very back, with the Label on top, and another Image above (Label and Image don't overlap, so the Image won't obscure the Label).
Note that each of the elements has a set of attributes determining its properties. Note, for example, that the background Image has an id attribute (these are necessary if you need to refer to elements dynamically), a source element (note again the use of the shorthand), as well as the self-explanatory width and height.
The Label element has an htmlText property that allows you to set the content of the label to a formatted text. Notice that the HTML in this case is URL-escaped -- that's necessary because of restrictions on XML-like code within XML attributes.
And just like that, with only a few lines of markup, we have a badge that displays a background image, and an image with a label.