Performing advanced data integration

A graph in Visualizer (or Diagrammer) can be created programmatically using several methods exposed by the component for this purpose. Using only addNodeElement, addTable and addLinkElement methods, the developer is able to create any type of graph with respect to all its rendering constraints and functional specifications. removeNodeElement and removeLinkElement methods are also provided in order to control the content of the graph and update it according to application and data model context.

Using add method

Using addNodeElement method, it is possible to add nodes or groups according to isGroup parameter, with respect to node and group rendering specifications. The method is context-aware which means that according to Visualizer properties and according to its scope, its behavior and context get updated (e.g adding a node to a group, updating Visualizer maps...).

When adding a node or group a set of options should be specified. Some of them are mandatory while the others are optional: The addLinkElement method comes as the next tool for dynamic graph creation. It is responsible for creating a link between two extremities and ensuring its correct rendering and that is effectively taken into account in the graph layout model. By this method several aspects of the created link can be specified: A table can also be added programmatically via addTable method. In addition to data, unique id and position that can be specified for the table, several arguments can be used to control the aspect of the table: This is an example that shows how to use the different adding methods :
<?xml version="1.0" encoding="utf-8"?>
<s:Application 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="100%" height="100%" 
		 xmlns:diagrammer="fr.kapit.diagrammer.*" xmlns:visualizer="fr.kapit.visualizer.*" xmlns:components="fr.kapit.tests.components.*">  
	
	<fx:Script>  
		<![CDATA[  
			import fr.kapit.layouts.algorithms.basic.Layout;
			import fr.kapit.layouts.constants.RootSelectionType;
			import fr.kapit.visualizer.base.IGroup;
			import fr.kapit.visualizer.base.IItem;
			import fr.kapit.visualizer.base.ISprite;
			import fr.kapit.visualizer.events.VisualizerEvent;
			import fr.kapit.visualizer.utils.CoordinatesUtils;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Button;
			import mx.events.FlexEvent;
			
			import spark.events.IndexChangeEvent;  
			protected function vis_creationCompleteHandler(event:FlexEvent):void
			{   
				vis.radialLayout.rootSelectionPolicy  =RootSelectionType.MOST_CLOSED_ROOT_SELECTION;
				vis.balloonLayout.rootSelectionPolicy  =RootSelectionType.MOST_CLOSED_ROOT_SELECTION;
				vis.hierarchicalTreeLayout.rootSelectionPolicy=RootSelectionType.MOST_CLOSED_ROOT_SELECTION;
				
			}
			
			protected var iter:uint = 1;
			
			protected function addChildToBtn_clickHandler(event:MouseEvent):void
			{
				var parentNode:ISprite = vis.nodesMap[childIDTxt.text];
				var uid:String = "nc"+iter;
				var childNode:ISprite = vis.addNodeElement({id:uid, label:uid},null,parentNode,null,uid);
				vis.addLinkElement({label:'ec'+iter},parentNode,childNode);
				iter++;
				visualizer.reLayout();
			}
			protected function addNodeToGroupBtn_clickHandler(event:MouseEvent):void
			{
				var group:IGroup = vis.nodesMap[groupIDTxt.text] as IGroup;
				if(!group)
					return;
				var uid:String = "nc"+iter;
				var childNode:ISprite = vis.addNodeElement({id:uid, label:uid},group,null,null,uid);
				iter++;
				visualizer.reLayout();
			}
			protected function createLinkBetweenBtn_clickHandler(event:MouseEvent):void
			{
				var source:ISprite = vis.nodesMap[sourceIDTxt.text];
				var target:ISprite = vis.nodesMap[targetIDTxt.text];
				vis.addLinkElement({label:'ec'+iter},source,target);
				iter++;
				visualizer.reLayout();
			}
			
			
			
			
			
			protected function createGroup_clickHandler(event:MouseEvent):void
			{
				var uid:String = "ng"+iter;
				var childNode:ISprite = vis.addNodeElement({id:uid, label:uid},null,null,new Point(Math.random(),Math.random()),uid,true);
				iter++;
				visualizer.reLayout();
				
			}
			
			
		]]>  
	</fx:Script>  
	
	<fx:Declarations>  
		<fx:XML id="dpg">  
			<graphml>
				<node id="n0" name="node0"/>
				<node id="n1" name="node1"/>
				<node id="n2" name="node2"/>
				<node id="n3" name="node3"/>
				<node id="n4" name="node4"/>
				<node id="n5" name="node5">
					<graph id="n5:" edgedefault="undirected">
						<node id="n5::n0" name="node5-0"/>
						<node id="n5::n1" name="node5-1"/>
						<node id="n5::n2" name="node5-2"/>
						<edge id="e0" source="n5::n0" target="n5::n2" type="type0"/>
						<edge id="e1" source="n5::n0" target="n5::n1" type="type1"/>
					</graph>
				</node>
				<node id="n6" name="node6">
					<graph id="n6:" edgedefault="undirected">
						<node id="n6::n0" name="node6-0">
							<graph id="n6::n0:" edgedefault="undirected">
								<node id="n6::n0::n0" name="node6-0-0"/>
								<node id="n6::n0::n1" name="node6-0-1"/>
								<node id="n6::n0::n2" name="node6-0-2"/>
								<edge id="e0" source="n6::n0::n0" target="n6::n0::n2" type="type0"/>
								<edge id="e1" source="n6::n0::n0" target="n6::n0::n1" type="type1"/>
							</graph>
						</node>
						<node id="n6::n1" name="node6-1"/>
						<node id="n6::n2" name="node6-2"/>
						<edge id="e10" source="n6::n1" target="n6::n0::n0" type="type10"/>
						<edge id="e11" source="n6::n1" target="n6::n2" type="type11"/>
					</graph>
				</node>
				
				<node id="n7" name="node7"/>
				<edge id="e2" source="n0" target="n1" type="type2"/>
				<edge id="e3" source="n0" target="n2" type="type3"/>
				<edge id="e4" source="n0" target="n3" type="type4"/>
				<edge id="e5" source="n2" target="n4" type="type5"/>
				<edge id="e6" source="n4" target="n7" type="type2"/>
				<edge id="e7" source="n2" target="n5::n0" type="type6"/>
				<edge id="e8" source="n2" target="n6::n0::n0" type="type7"/>
			</graphml>  
		</fx:XML>  
	</fx:Declarations>  
	<!--<s:Button label="Expand" click="button1_clickHandler(event)" />-->
	<s:VGroup width="100%" height="100%">
		<s:HGroup verticalAlign="middle" horizontalAlign="center" width="100%">
			<s:Button id="addChildToBtn" label="add new child" click="addChildToBtn_clickHandler(event)"/>
			<s:TextInput id="childIDTxt" text="n7" width="60"/> 
			<s:Button id="addNodeToGroupBtn" label="add Node To Group" click="addNodeToGroupBtn_clickHandler(event)"/>
			<s:TextInput id="groupIDTxt" text="n7" width="60"/> 
			<s:Button id="createLinkBetweenBtn" label="create Link Between" click="createLinkBetweenBtn_clickHandler(event)"/>
			<s:TextInput id="sourceIDTxt" text="n7" width="60"/>
			<s:Label text="and" />
			<s:TextInput id="targetIDTxt" text="n8" width="60"/> 
			<s:Button id="createGroup" label="create Group" click="createGroup_clickHandler(event)"/>
			
		</s:HGroup>
		
		<visualizer:Visualizer 
			dataProvider="{dpg}"
			layout="hierarchicalCyclic"
			id="vis"  
			width="100%"  
			height="100%"  
			nodeLabelFields="id" 
			groupLabelField="id"
			linkTooltipFields="id"
			creationComplete="vis_creationCompleteHandler(event)"/>  			
	</s:VGroup>
	
	
	
</s:Application>  
 

Using remove method

Dynamic and programmatic graph control implies in major cases removing some items. For each element type in Visualizer a method is provided to let developer remove it: