Handling nodes and links input

Visualizer can generate representations based on graphs based on the properties nodesDataProvider and linksDataProvider. It lets you generate the nodes and the links separately. The link between these properties can be ensured through different properties.

nodesDataProvider and linksDataProvider can be implemented in one form of an ICollectionView as follows.
The properties in relation with the nodeDataProvider are as the following:

<fx:Declaration>
  <ArrayCollection id="nodesDataProvider">
			<fx:Object uid="n1" label="node1"/>
			<fx:Object uid="n2" label="node2"/>
			<fx:Object uid="n3" label="node3"/>
			<fx:Object uid="n4" label="node4"/>
			<fx:Object uid="n5" label="node5"/>
			<fx:Object uid="n6" label="node6"/>
			<fx:Object uid="n7" label="node7"/>
  </s:ArrayCollection>
  <s:ArrayCollection id="linksDataProvider">
		<fx:Object uid="e1" source="n1" target="n2"/>
		<fx:Object uid="e2" source="n2" target="n3"/>
		<fx:Object uid="e3" source="n3" target="n4"/>
		<fx:Object uid="e4" source="n4" target="n5"/>
		<fx:Object uid="e5" source="n5" target="n6"/>
		<fx:Object uid="e6" source="n2" target="n7"/>
		<fx:Object uid="e7" source="n3" target="n1"/>
		<fx:Object uid="e8" source="n6" target="n2"/>
		<fx:Object uid="e9" source="n7" target="n3"/>
  </s:ArrayCollection>
</fx:Declarations>

To feed visualizer with this data input. we can proceed as follows:

<visualizer:Visualizer
			id="viz"
			width="100%"
			height="100%"
			nodesDataProvider="{nodesDataProvider}"
			linksDataProvider="{linksDataProvider}"
			nodeLabelFields="label"/> 

Visualizer properties that depends directly on the properties nodesDataProvider and linksDataProvider are :

It is possible to create a custom bindable node object NodeObject and a custom bindable link object with custom properties as follows:

[Bindable]
	public class NodeObject
	{
		public var uid:String;
		public var label:String;
		public var x:Number;
		public var y:Number;
		public var children:ArrayCollection;
	}
[Bindable]
	public class LinkObject
	{
		public var uid:String ;
		public var source:String ;
		public var target:String ;
		public var type:String;
	}

Based on this objects, it becomes easy to change node and links properties, namely , linkStyle , nodes position , nodes scopes and link scopes.
The application of this is in the following component:

<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" 
		 xmlns:visualizer="fr.kapit.visualizer.*"
		 width="100%" height="100%">
	
	<fx:Script>
		<![CDATA[
			
			import fr.kapit.visualizer.styles.LinkStyle;
	
			public function linkStyleFunc(data:LinkObject):LinkStyle
			{
				var lStyle:LinkStyle = new LinkStyle();
				lStyle.lineColor = data.type=="OK" ? 0x00FF00 : 0xFF0000;
				return lStyle;
			}
			
			protected function dataChange_clickHandler(event:MouseEvent):void
			{
				var index:Number = linksDataProvider.length*Math.random();
				linksDataProvider[index].type = linksDataProvider[index].type=="OK" ? "KO" : "OK";
			}
			
			protected function nodePos_clickHandler(event:MouseEvent):void
			{
				var index:Number = 1+5*Math.random();
				nodesDataProvider[index].x += 100;
				nodesDataProvider[index].y += 100;
			}
			
			protected function nodeScope_clickHandler(event:MouseEvent):void
			{
				if (ArrayCollection(nodesDataProvider[0].children).length>0)
				{
					var sprite:Object = ArrayCollection(nodesDataProvider[0].children).removeItemAt(0);
					nodesDataProvider.addItem(sprite);
					sprite.y += 300;
				}
				
			}
			
			protected function changeLinkScope_clickHandler(event:MouseEvent):void
			{
				var link:Object = linksDataProvider.removeItemAt(0);
				link.source = "n6";
				linksDataProvider.addItem(link);
			}
			
			protected function changeLinkExtremity_clickHandler(event:MouseEvent):void
			{
				linksDataProvider[2].source = "n5";
			}
			
			protected function bundleLinks_changeHandler(event:Event):void
			{
				 viz.enableAutomaticLinkBundling=bundleLinks.selected;
			}
			
			protected function useNodesPositions_changeHandler(event:Event):void
			{
				viz.nodeXField="x";
				viz.nodeYField="y";
			}
			
		]]>
	</fx:Script>
	
	
	<fx:Declarations>
	
		<s:ArrayCollection id="nodesDataProvider">
			
			<local:NodeObject uid="n1" label="node1" x="100" y="100">
				<local:children>
					<s:ArrayCollection>
						<local:NodeObject uid="n11" label="node11" x="120" y="50"/>
						<local:NodeObject uid="n12" label="node12" x="150" y="120"/>
						<local:NodeObject uid="n13" label="node13" x="200" y="50"/>
					</s:ArrayCollection>
				</local:children>
			</local:NodeObject>
			<local:NodeObject uid="n2" label="node2" x="300" y="150"/>
			<local:NodeObject uid="n3" label="node3" x="200" y="340"/>
			<local:NodeObject uid="n4" label="node4" x="400" y="400"/>
			<local:NodeObject uid="n5" label="node5" x="300" y="20"/>
			<local:NodeObject uid="n6" label="node6" x="500" y="80"/>
		</s:ArrayCollection>
		<s:ArrayCollection id="linksDataProvider">
			<local:LinkObject uid="e1" source="n11" target="n2" type="OK"/>
			<local:LinkObject uid="e11" source="n12" target="n2" type="KO"/>
			<local:LinkObject uid="e12" source="n13" target="n2" type="OK"/>
			<local:LinkObject uid="e2" source="n1" target="n3" type="KO"/>
			<local:LinkObject uid="e3" source="n1" target="n4" type="OK"/>
			<local:LinkObject uid="e4" source="n2" target="n5" type="OK"/>
			<local:LinkObject uid="e41" source="n5" target="n2" type="KO"/>
			<local:LinkObject uid="e42" source="n5" target="n2" type="OK"/>
			<local:LinkObject uid="e5" source="n2" target="n6" type="KO"/>
			<local:LinkObject uid="e6" source="n6" target="n3" type="OK"/>
		</s:ArrayCollection>
	</fx:Declarations>
	<s:VGroup width="100%" height="100%">
		<s:HGroup width="100%">
			<s:CheckBox label="enable link bundling" id="bundleLinks" change="bundleLinks_changeHandler(event)"/>
			<s:CheckBox label="use nodes default positions"  id="useNodesPositions" change="useNodesPositions_changeHandler(event)"/>
			<s:Button label="ChangeLinkTypeBtn" click="dataChange_clickHandler(event)"/>
			<s:Button label="ChangeNodePosBtnBtn" click="nodePos_clickHandler(event)"/>
			<s:Button label="ChangeNodeScopeBtn" click="nodeScope_clickHandler(event)"/>
			<s:Button label="ChangeLinkScopeBtn" click="changeLinkScope_clickHandler(event)"/>
			<s:Button label="ChangeLinkExtremityBtn" click="changeLinkExtremity_clickHandler(event)"/>	
		</s:HGroup>   
		<visualizer:Visualizer
			id="viz"
			width="100%"
			height="100%"
			nodesDataProvider="{nodesDataProvider}"
			linksDataProvider="{linksDataProvider}"
			nodeLabelFields="label"
			linkStyleFunction="{linkStyleFunc}"
			/> 
		
	</s:VGroup>
</s:Group>
The Graph visualized is shown in the following screen shot: