Handling groups rendering

Groups rendering refers to the way Graph groups headers are populated with a specific rendering extracted from the data they represent. When using Visualizer, groups headers can be defined using :

DefaultGroupRenderer customization

DefaultGroupRenderer can be customized through the visualizer properties and styles. The text to be displayed in the group renderer is specified via groupLabelField or groupLabelFieldFunction. Then we have many style properties to customize the look and feel of the group such as groupBackgroundColors, groupBackgroundAlphas, groupBorderColor, groupBorderThickness, groupLabelFontColor, groupLabelFontFamily, etc.

Using custom group renderer

A custom rendering class for the groups can be specified through the groupRndererClass property which contains a factory for group renderers. The Class must extend the DisplayObject class and implement IGroupRenderer. It will be used, in combination with the groupRendererDataSource , to feed each element with its visual content.

According to visualization needs, it is recommended to let the class implement some useful interfaces for additional functionalities:

The following file defines a custom group renderer:

<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 implements="fr.kapit.visualizer.renderers.IGroupRenderer,mx.core.IDataRenderer">
	<fx:Script>
		<![CDATA[
			import fr.kapit.visualizer.renderers.IGroupRenderer;
			import mx.core.IDataRenderer;

			[Bindable]
			private var _data:Object;
			public function set data(value:Object):void
			{
				_data=value;
				title=_data['name'];
			}
			public function get data():Object
			{
				return _data;
			}
			
			public function get groupPaddingTop():Number
			{
				return 40;
			}
			
			public function get groupPaddingBottom():Number
			{
				return 5;
			}
			
			public function get groupPaddingLeft():Number
			{
				return 5;
			}

			public function get groupPaddingRight():Number
			{
				return 5;
			}
			
			public function get groupMinWidth():Number
			{
				return 100;
			}
			
			public function get groupMinHeight():Number
			{
				return 30;
			}
			
		]]>
	</fx:Script>
</s:Panel>

Using a group rendering function

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

According to visualization needs, it is recommended to let the returned instances implement some useful interfaces for additional functionalities :

The following snippet describes a groupRendererFunction used to return different components according to data type property:
protected function myGroupRendererFunction(data:Object):UIComponent 
{
	var myCustomComponent:MyCustomGroupRenderer; // A component extending Panel class and implementing IGroupRenderer and IRenderer.
	switch(data.type)
	{
		case 'blue' : myCustomComponent = new MyBlueGroupRenderer();break; // MyBlueGroupRenderer extends MyCustomGroupRenderer with blue background.
		case 'red' : myCustomComponent = new MyRedGroupRenderer();break; // MyRedGroupRenderer extends MyCustomGroupRenderer with red background.
		case 'gray' : myCustomComponent = new MyGrayGroupRenderer();break; // MyGrayGroupRenderer extends MyCustomGroupRenderer with gray background.
	}
	myCustomComponent.data=data;
   	myCustomComponent.width = 100;
	myCustomComponent.height = 100;
	myCustomComponent.groupPaddingTop = 20;
	myCustomComponent.groupPaddingBottom = 5;
	myCustomComponent.groupPaddingLeft = 5;
	myCustomComponent.groupPaddingRight = 5;
	myCustomComponent.groupMinWidth = 50;
	myCustomComponent.groupMinHeight = 30;
	return myCustomComponent;
}