Graph Export/Import

A graph in Visualizer (or Diagrammer) can be imported and then exported using several methods exposed by the component for this purpose. toXML and fromXML methods are provided in order to created an XML file. Then this created file would be use as an input for the diagrammer.

Basic Export/Import

Basic Graph Export

To do a basic export, developer can call toXML that is a method used to generate an XML representation of the current Visualizer graph based on the graph's artifacts properties and xml generation customization properties.

When calling toXML, an XML file is generated according to a default XML schema. This schema can be modelized as follows:

		  <diagram ratio="1">
		  	<group id="" dx="" dy="" width="" height="" isGroupCollapsed="" collapseDes=""c> // Nested groups are also nested in the XML representation
		  	  	<group id="" dx="" dy="" width="" height="" isGroupCollapsed="" collapseDesc="">
		  			<node id="" dx="" dy="" width="" height="" collapseDesc="">
		       		<data id=""/> // can be other custom generated data export 
		   		</node>
		     	</group>
		  		<node id="" dx="" dy="" width="" height="" collapseDesc="">
		       	<data id=""/> // can be other custom generated data export 
		  		</node>
		    	<data id=""/> // can be other custom generated data export 
		   </group>
		   <node id="" dx="" dy="" width="" height="" collapseDesc="">
		     	<data id=""/> // can be other custom generated data export 
		   </node>
		   <link id="2-5" controlPoints="" target="5" source="2" anchorX="0.00" anchorY="0.00">
		     	<style>
		  			// if default or highlight, selection filters are used, the filters xml node is exported.
		       	<filters id=""> 
		         		<filter name="" color="" blurX="" blurY=""/>
		       	</filters>
		 			// other styles can be added according to differences with Visualizer link Style (linkStyle).
		     	</style>
		     	<data id=""/> // can be other custom generated data export 
		   </link>
		  </diagram>
		  

The generated XML can be used directly as an input for the fromXML method to re-generate the exported graph.

Basic Graph Import

To do a basic import, developer can use fromXML that is a method used to recover a Visualizer status (Graph, Zoom, Data optionnally) from an xml representation generated via the toXML method. The generated Visualizer graph will be exactly similar to the graph from which the xml input is generated if:

Basic example

This is an example of visualizer export use, this method will save the exported file on the disk:

private var xmlFile:String;
			protected function exportGraph(event:MouseEvent):void
			{
				xmlFile = visualizer.toXML().toXMLString();
				var xml:XML = visualizer.toXML();
				var fileReference:FileReference = new FileReference();
				fileReference.save(xml, "exportedData.xml");
			}
			
This is an example of visualizer import use, this method will load the savex xml file:

			protected function importGraph(event:MouseEvent):void
			{
				load(event)
			}
			
			private var file_ref:FileReference;
			private var bitmap:Object;
			private function load(e:MouseEvent):void
			{
				        file_ref = new FileReference();
				        file_ref.addEventListener(Event.SELECT, onSelect);
				        file_ref.browse([new FileFilter("Data","*.xml")]);
			}
			private function onSelect(e:Event):void
			{
				        file_ref.addEventListener(Event.COMPLETE, onData);
				        file_ref.load();
			}
			private function onData(e:Event):void
			{
				var xml:XML =new XML( file_ref.data );
				visualizer.fromXML(xml);
			}

Advanced Export/Import

Custom export data function

The XML version can be customized via nodeExportDataFunction and linkExportDataFunction when nodes and links data export must be user-provided (in case of custom rendering). In that case, the generated XML can be imported correctly via the fromXML method only if a reversed version of the custom export function is provided via nodeImportDataFunction and linkImportDataFunction

The data description can be exported through the methods:

Custom import data function

The data description can be imported through these methods :

Handing custom rendering

When using default item rendering, an internal function is used to export data based on nodeLabelFields, nodeTooltipFields, nodeDecoratorLabelFields content. You still can customize the exported data with respect to the default rendering parameters. When using custom item renderers, it is mandatory to set this property to a function capable of exporting the data with the required values that should be consumed by node rendering properties (nodeRendererFunction, nodeRendererClass). In fact, in order to get correct rendering, the imported XML should provide a set of information compatible with the rendering parameters.

Note If the default XML schema doesn't fit your project needs, you can create your own schema by overriding the toXML method. If you override the toXML method, you will have to override the fromXML method as well in order to handle this new schema.

Advanced Export/Import sample

This is an example shown how to use import/ and export node data function.

			private function exportNodeDataFunction(data:Object):XML
			{
				var xml:XML;
				xml = new XML();
				if(data.hasOwnProperty("label"))
					xml.@label = data["label"].toString();
				if(data.hasOwnProperty("renderer"))
				{
					xml.@renderer = data["renderer"].toString();
					xml.@size = data["size"].toString();
				}
				if(data.hasOwnProperty("color"))
					xml.@color = data["color"].toString()
				return(xml);
			}
Using this method the user will save the renderer, size , color and the label of each node. To use this attributes will be then used by Kalileo through the importDataFunction
			private function importNodeDataFunction(xml:XML):Object
			{
				var data:Object=new Object;
				data["renderer"] = xml.@renderer.toString();
				data["label"] = xml.@label.toString();
				data["size"] = xml.@size.toString();
				data["color"] = xml.@color.toString()
				return data;
			}
			
The new generated XML file looks like :

		  <diagram ratio="1">
		  	<group id="" dx="" dy="" width="" height="" isGroupCollapsed="" collapseDes=""c> // Nested groups are also nested in the XML representation
		  	  	<group id="" dx="" dy="" width="" height="" isGroupCollapsed="" collapseDesc="">
		  			<node id="" dx="" dy="" width="" height="" collapseDesc="">
		       		<data label="" size="" renderer="" color=""/> 
		   		</node>
		     	</group>
		  		<node id="" dx="" dy="" width="" height="" collapseDesc="">
		       <data label="" size="" renderer="" color=""/> 
		  		</node>
		    	<data label="" size="" renderer="" color=""/> 
		   </group>
		   <node id="" dx="" dy="" width="" height="" collapseDesc="">
		     	<data label="" size="" renderer="" color=""/> 
		   </node>
		   <link id="2-5" controlPoints="" target="5" source="2" anchorX="0.00" anchorY="0.00">
		     	<style>
		  			// if default or highlight, selection filters are used, the filters xml node is exported.
		       	<filters id=""> 
		         		<filter name="" color="" blurX="" blurY=""/>
		       	</filters>
		 			// other styles can be added according to differences with Visualizer link Style (linkStyle).
		     	</style>
		     	<data id=""/> // can be also customized through the linkDataExportFunction as we have shown on the sample of the exportNodeDataFunction
		   </link>
		  </diagram>