You are here: Home > News > SPAS 3.0 Item Renderers

SPAS 3.0 Item Renderers

SPAS 3.0 Item Renderers

Currently, we are working on a new item renderers implementation in SPAS 3.0. Previously, some list components, such as listbox and all drop box components, did not use item renderers. It was the same for header items, for example in Accordion and DataGrid classes...

The coming SPAS release will include item renderers for all components that display visual collections. Because SPAS uses Look and Feel, instead of skin classes, as base implementation for visual components displaying, the difficulty was to isolate and separate the different parts responsible for displaying item renderers and the component Look and Feel.

Moreover, it was important to keep SPAS simplicity regarding the customization of the user interface (CSS colors, textures, graphic skins and custom Look and Feels). But another key point was to allow developers creating their own item renderers as easily as possible.

SPAS 3.0 Item Renderers Design

SPAS 3.0 item renderers have been splitted in two different families: item renderers and header item renderers.

Item renderers are used to define items in a visual collection, while header item renderers define items of object which display interactive header objects. Thus, some complex classes, such as the Datagrid class, can use both implemetations.

Because item renderers are used to display huge set of information, they can be created from scratch, by implementing only the ItemRenderer interface. This is how datagrid item renderers currently work.

To the opposite, header item renderers are usually static in a User Interface. For that reason, and because it is easier for improving the appearence of the application, header item renderers implement the HeaderItemRenderer interface. The HeaderItemRenderer interface extends the IUIObject interface, so it means that header item renderers must extend the UIObject class.

To do that and create header items more easily, you can extend the AbstractHeaderItemRenderer class. (For example, the BasicHeaderItemRenderer class, used by Accordion and ExpandableBox classes, is a subbclass of AbstractHeaderItemRenderer.)

Creating Item Renderers

Before extending the new item renderers capabilities to all SPAS components, we have created a brand new class, called ExpandableBox, to experiment these functionalities.

The following sample application shows how to implement a new custom header item renderer for this class. The starting point of this example was the documentation ExpandableBox example, which will be available in the next documentation update.

Get Adobe Flash player

package {
	import org.flashapi.swing.*;
	import org.flashapi.swing.constants.*;
	import org.flashapi.swing.event.*;
	public class SpasHeaderTest extends Application {
		public function SpasHeaderTest() {
		private var _boxes:Array;
		private function init():void {
			gradientBackground = bodyVisibility = true;
			_boxes = [];
			var panel:PanelContainer = new PanelContainer("ExpandableBox Example", 300);
			panel.layout.orientation = LayoutOrientation.VERTICAL;
			panel.padding = panel.verticalGap = 0;
			panel.autoHeight = true
			var eb1:ExpandableBox = createBox("Box # 1", ExpandableState.OPENED, "red", 25);
			var eb2:ExpandableBox = createBox("Box # 2", ExpandableState.CLOSED, "green", 62);
			var eb3:ExpandableBox = createBox("Box # 3", ExpandableState.CLOSED, "blue", 58);
			panel.addGraphicElements(eb1, eb2, eb3);
		private function createBox(label:String, state:String, color:String, percentage:uint):ExpandableBox {
			var eb:ExpandableBox = new ExpandableBox(300);
			eb.headerRenderer = CustomHeaderRenderer;
			eb.headerLabel = label;
			eb.state = state;
			eb.backgroundColor = color; = { trackColor:color, percentage:percentage };
			eb.headerTexture = "brushed_metal.jpg";
			return eb;

import org.flashapi.swing.core.spas_internal;
import org.flashapi.swing.ProgressBar;
import org.flashapi.swing.renderer.header.BasicHeaderItemRenderer;
import org.flashapi.swing.renderer.header.HeaderItemRenderer;

use namespace spas_internal;

class CustomHeaderRenderer extends BasicHeaderItemRenderer implements HeaderItemRenderer {
	public function CustomHeaderRenderer() {
	override public function updateItem(info:Object):void {
		var data:Object =;
		if (data) updateValueBar(data);
	override protected function setItemsMetrics():void {
		_valueBar.width = $width - 20;
	private var _valueBar:ProgressBar;
	private function initObj():void {
		$preferedHeight = 40;
		initSize(100, $preferedHeight);
	private function createValueBar():void {
		_valueBar = new ProgressBar(); = spas_internal::uioSprite;
		_valueBar.height = 10;
		_valueBar.trackColor = 0x000000;
		_valueBar.trackOpacity = .25;
		_valueBar.borderAlpha = .5;
		_valueBar.display(10, 20);
	private function updateValueBar(data:Object):void {
		var p:Number = data.percentage;
		var c:* = data.trackColor;
		if (p != _valueBar.value) _valueBar.value = p;
		if (c != _valueBar.color) _valueBar.color = c;

What's Next

It is important to provide developers a strong API for creating their own item renderers, especially if we consider the future evolutions of SPAS for targeting more particularly AIR and Mobile environements.

But the new item renderers capabilities will be also the base of the implementation for the Tree class, which is wished by developers for a long time.

SPAS 3.0 item renderers capabilities will be available in the alpha 6.4 release.

Share this article:


There are no comments yet for this article.

Leave a reply

Your email is required but will not be displayed.

To prevent abusive emails, please enter the numbers you see in the image below:

Security code