Understanding libraries concept

Libraries are a tool can be used to easily create elements with different renders and add them to Diagrammer. Developers can create libraries of items from which the user can drag items and drop them in the diagrammer to create nodes, groups and tables. The Diagrammer encapsulates two predefined libs that can be used in most cases:

The LibSelector component uses the lib instance to initialize its content (TileLists) and to enable the dragging of visual artifacts such as nodes, groups or tables.

Below we give a brief example of how to integrate the RendererLib with Diagrammer. A RendererLib is initialized with a source, an Array, containing objects, each describing a lib entity (unique id, icon, group dependancy and renderer). Once initialized, the RendererLib instance is injected in the LibSelector to get lib entities displayed as icons in their corresponding groups (tabs). It should be also be setted to the lib property of Diagrammer to take into account dropped lib entities previously dragged from the LibSelector.

Renderer Lib Integration :

<?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"
		 xmlns:visualizer="fr.kapit.visualizer.*"
		 xmlns:diagrammer="fr.kapit.diagrammer.*" 
		 width="100%" height="100%" xmlns:components="fr.kapit.diagrammer.artifacts.components.*" xmlns:lib="fr.kapit.diagrammer.lib.*">
	<fx:Script>
		<![CDATA[
			import fr.kapit.tests.views.lib.CircleRenderer;
			import fr.kapit.tests.views.lib.RectangleRenderer;
		]]>
	</fx:Script>
	<fx:Declarations>
		<fx:Array id="myLib">
			<fx:Object uid="rectBlue" color="{0x0000ff}" icon="assets/lib/rectangle_blue.png" group="Rectangle" renderer="{RectangleRenderer}"/>
			<fx:Object uid="rectRed" color="0xff0000" icon="assets/lib/rectangle_red.png" group="Rectangle" renderer="{RectangleRenderer}"/>
			<fx:Object uid="rectGreen" color="0x00ff00" icon="assets/lib/rectangle_green.png" group="Rectangle" renderer="{RectangleRenderer}"/>
			<fx:Object uid="circleRed" color="0xff0000" icon="assets/lib/circle_red.png" group="Circle" renderer="{CircleRenderer}"/>
			<fx:Object uid="circleGreen" color="0x00ff00" icon="assets/lib/circle_green.png" group="Circle" renderer="{CircleRenderer}"/>
		</fx:Array>
		<lib:RendererLib id="rendererLib" idField="uid" groupField="group" iconField="icon" libSource="{myLib}"/>
	</fx:Declarations>
	<s:HGroup width="100%" height="100%">
		<s:VGroup width="200" height="100%">
			<components:LibSelector width="100%" height="300" lib="{rendererLib}"/>
			<s:Label text="Note : Drag and Drop items from the List"/>
		</s:VGroup>
		<diagrammer:Diagrammer id="viz"
							   width="100%"
							   height="100%"
							   lib="{rendererLib}"
							   />
	</s:HGroup>
</s:Application>


Rectangle renderer used with all rectangular lib entities
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" 
				autoDrawBackground="true" width="100" height="30">
	<fx:Script>
		<![CDATA[
			[Bindable]
			protected var color:uint;
			[Bindable]
			protected var labelText:String;
			public override function set data(value:Object):void
			{
				super.data = value;
				color = value.color;
				labelText = value.uid;
			}
		]]>
	</fx:Script>
	<s:Rect width="100%" height="100%">
		<s:fill>
			<s:SolidColor color="{color}"/>
		</s:fill>
	</s:Rect>
	<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
		<s:Label text="{labelText}"/>
	</s:VGroup>
	
</s:ItemRenderer>


Circle renderer used with all circular lib entities
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" 
				autoDrawBackground="true" width="60" height="60">
	<fx:Script>
		<![CDATA[
			[Bindable]
			protected var color:uint;
			[Bindable]
			protected var labelText:String;
			public override function set data(value:Object):void
			{
				super.data = value;
				color = value.color;
				labelText = value.uid;
			}
		]]>
	</fx:Script>
	<s:Ellipse width="100%" height="100%">
		<s:fill>
			<s:SolidColor color="{color}"/>
		</s:fill>
	</s:Ellipse>
	<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
		<s:Label text="{labelText}"/>
	</s:VGroup>
	
</s:ItemRenderer>