Simple Visualizer Integration

Visualizer can be integrated easily in any Flex application. You only have to: When integrating the component, non specified options will be replaced internally by default values (Default Item Renderer, Default Tooltip...). Visualizer output is shown in the following example. You can see how Visualizer has interpreted the content of the XML file and created correct content for tooltips and labels while pointing out hierarchy structure using coloring and layout features. Visualizer can also be integrated in PHP, ASP, JSP and other languages via flash vars that can be associated to a Visualizer wrapper.

The following code shows how we can integrate the visualizer on a simple application:


<mx: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" minWidth="955" minHeight="600" xmlns:diagrammer="fr.kapit.diagrammer.*" xmlns:visualizer="fr.kapit.visualizer.*">

	<fx:Script>
		<![CDATA[
			import fr.kapit.visualizer.actions.MultiSelectionAction;
			import fr.kapit.visualizer.actions.PanAction;
			import fr.kapit.visualizer.actions.data.SelectionActionData;

		]]>
	</fx:Script>

	<fx:Declarations>
		<fx:XML id="dp">
			<graphml>
				<node id='1' label='A'/> 
				<node id='2' label='B'/> 
				<node id='3' label='C'/> 
				<node id='4' label='D'/>
				<node id='5' label='E'/>
				<node id='6' label='E'/>
				<node id='7' label='E'/>
				<node id='8' label='E'/>
				<node id='9' label='E'/>
				<node id='10' label='E'/>
				<edge source='1' target='2'/> 
				<edge source='1' target='3'/>
				<edge source='2' target='4'/>
				<edge source='2' target='5'/>
				<edge source='2' target='6'/>
				<edge source='6' target='7'/>
				<edge source='7' target='8'/>
				<edge source='8' target='9'/>
				<edge source='8' target='10'/>
			</graphml>
		</fx:XML>
	</fx:Declarations>
	
		<visualizer:Visualizer
			id="vis"
			width="100%"
			height="100%"
			layout="balloon"
			nodeLabelFields="label"
			dataProvider="{dp}"
			/>
	
</mx:Application>

The output of this integration can be shown through this graph: