Working with tables

Table rendering

Table rendering refers to the way tables are rendered. When using Visualizer, tables rendering can be defined using:

DefaultTableRenderer customization

DefaultTableRenderer can be customized through visualizer properties and styles such as tableBackgroundColors, tableBackgroundAlphas, columnBorderColor, columnSelectionBorderColor, laneHeaderFontColor, laneHeaderBackgroundColors,etc.

Using custom table renderer

A custom rendering class for the tables can be specified through the tableRendererClass property which contains a factory for table renderers. The Class must extend the DisplayObject class and implement ITableRenderer. It will be used, in combination with the TableRendererDataSource , to feed each element with its visual content.

The following file defines a custom table renderer:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" 
		 width="400" height="300" implements="fr.kapit.visualizer.renderers.ITableRenderer, fr.kapit.visualizer.renderers.ISelectable">
	<fx:Declarations>
		<s:ArrayCollection id="comboDataProvider">
			<fx:String>Start</fx:String>
			<fx:String>End</fx:String>
			<fx:String>Mixed</fx:String>
		</s:ArrayCollection>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import fr.kapit.diagram.sample.events.TableEvent;
			import fr.kapit.visualizer.base.IItem;
			import fr.kapit.visualizer.renderers.DefaultColumnRenderer;
			import fr.kapit.visualizer.renderers.DefaultLaneRenderer;
			import fr.kapit.visualizer.renderers.IColumnRenderer;
			import fr.kapit.visualizer.renderers.ILaneRenderer;
			
			import spark.events.IndexChangeEvent;
			
			public function getColumnRenderer(data:Object=null, depth:Number=0):IColumnRenderer
			{
				return new DefaultColumnRenderer();
			}
			
			/* **********
			* Implementing ISelectable interface for selection/highlight effect control.
			**************/
			
			private var _isHighlighted:Boolean;
			public function set isHighlighted(value:Boolean):void
			{
				_isHighlighted = value;
				if(_isHighlighted)
					currentState = "highlighted"
				else
				{
					if(_isSelected)
						currentState = "selected";
					else
						currentState = "normal";
				}
			}
			
			private var _isSelected:Boolean;
			public function set isSelected(value:Boolean):void
			{
				_isSelected = value;
				if(_isSelected)
					currentState = "selected"
				else
					currentState = "normal";
			}
			
			
			/* **********
			* Implementing ITableRenderer interface for custom lane/column rendering.
			**************/
			
			public function getLaneRenderer(data:Object=null, depth:Number=0):ILaneRenderer
			{
				return new DefaultLaneRenderer();
			}
			
			private var _data:Object;
			public function get data():Object
			{
				return _data;
			}			
			public function set data(value:Object):void
			{
				_data = value;
			}
			/* **********
			* Implementing IRenderer interface.
			**************/
			
			private var _isFixed:Boolean;
			public function get isFixed():Boolean
			{
				return _isFixed;
			}
			public function set isFixed(value:Boolean):void
			{
				_isFixed = value;
			}
			
			private var _item:IItem;
			public function get item():IItem
			{
				return _item;
			}
			
			public function set item(value:IItem):void
			{
				_item = value;
			}
			
			protected function combobox1_changeHandler(event:IndexChangeEvent):void
			{
				dispatchEvent(new TableEvent(TableEvent.TABLE_DATA_CHANGED, tableCbx.selectedItem));
			}
			
		]]>
	</fx:Script>
	<s:states>
		<s:State id="selected" name="selected"/>
		<s:State id="highlighted" name="highlighted"/>
		<s:State id="normal" name="normal"/>
	</s:states>
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<s:Rect width="100%" height="100%">
		<s:fill>
			<s:SolidColor color.selected="0xF1F1F1" color.highlighted="0xFAFAFA" color.normal="0xFFFFFF" alpha="0.6"/>
		</s:fill>
	</s:Rect>
	<s:ComboBox id="tableCbx"
				bottom="-30" width="100" height="20" 
				dataProvider="{comboDataProvider}" 
				change="combobox1_changeHandler(event)"/>
</s:Group>

Using Table rendering Function

A group rendering function can be specified via the tableRendererFunction property. It is used to return custom visual content (MXML component, Video, Image...) for each table given its data. The function takes as input the table data and according to it returns a custom class instance. The class extends DisplayOject and implements ITableRenderer. It is called at rendering time for each table or when setting this property.

The following file defines a custom table function:

private function customTableRendererFunction(data:Object):DisplayObject
			{
				var customTableRenderer:CustomTableRenderer=  new CustomTableRenderer();
				customTableRenderer.addEventListener(TableEvent.TABLE_DATA_CHANGED, tableDataChanged);
				return customTableRenderer;
			}