TileView: Add double click on details item

- Fix issue where stateChangeComplete event was double dispatched by removing bead SimpleStatesImpl which is already registered in main application (reference #56)

Super.Human.Portal_Royale/src/generated/Super.Human.Portal_Royale/views/modules/DocumentationForm/DocumentationFormViews/DocumentationForm.mxml

@@ -3,14 +3,13 @@
 			xmlns:dataGrid="Super.Human.Portal_Royale.classes.dataGrid.*"
 			xmlns:components="Super.Human.Portal_Royale.views.components.*" xmlns:htmlEditor="Super.Human.Portal_Royale.classes.htmlEditor.*" 
 			xmlns:tileView="classes.com.devexpress.js.tileView.*" xmlns:breadcrump="classes.breadcrump.*"
-			currentState="startview" gap="5" stateChangeComplete="{this.dispatchEvent(new Event('valueChange'))}"
+			currentState="startview" gap="5" stateChangeComplete="onDocumentationFormStateChange(event)"
 			itemsVerticalAlign="itemsTop" initComplete="onViewInitComplete(event)" percentHeight="100" className="bodyPadding">
   <j:beads>
     <js:ContainerDataBinding/>
-    <js:SimpleStatesImpl/>
   </j:beads>
   <j:states>
-  	<js:State name="startview"/>
+  	<js:State name="startview" />
     <js:State name="dataGridState"/>
     <js:State name="contentState"/>
   </j:states>
@@ -23,6 +22,7 @@
 	import Super.Human.Portal_Royale.classes.htmlEditor.events.HtmlEditorEvent;
 	import Super.Human.Portal_Royale.classes.htmlEditor.helpers.ToolbarItems;
 	import model.vo.TileViewVO;
+	import classes.com.devexpress.js.tileView.events.TileViewEvent;
 
 	[Bindable] private var proxy:DocumentationFormProxy;
 
@@ -33,7 +33,7 @@
 
     private function onViewInitComplete(event:Event):void
     {
-    	 	proxy = DocumentationFormProxy.getInstance();
+    	    proxy = DocumentationFormProxy.getInstance();
         proxy.addEventListener(ErrorEvent.SERVER_ERROR, onServerError);
         proxy.addEventListener(DocumentationFormProxy.EVENT_ITEM_UPDATED, onServerItemChanged);
         proxy.addEventListener(DocumentationFormProxy.EVENT_ITEM_REMOVED, onServerItemChanged);
@@ -42,6 +42,11 @@
         breadcrumpGettingStarted.buildBreadcrump(proxy.breadcrumpItems.gettingStarted);
     }
     
+    private function onDocumentationFormStateChange(event:Event):void
+    {
+    		this.dispatchEvent(new Event('valueChange'));	
+    }
+    
     public function resetDocumentationForm():void
     {
     		this.currentState = 'startview';
@@ -83,7 +88,7 @@
         this.itemVO = null;
     }
 
-    private function initReadOnlyForm():void
+    public function initReadOnlyForm():void
     {
     		this.currentState = 'contentState';
         this.isDisabled = true;
@@ -131,11 +136,6 @@
         this.itemVO = dg.selectedItem.clone();
     }
 
-    private function onGridDoubleClick(event:Event):void
-    {
-        this.initReadOnlyForm();
-    }
-
     private function onServerItemChanged(event:Event):void
     {
         this.currentState = 'dataGridState';
@@ -177,6 +177,8 @@
 	{
 		this.itemVO.DocumentationBody = event.text;
 	}
+	
+
 
 ]]></fx:Script>
   <breadcrump:Breadcrump localId="breadcrumpGettingStarted"/>

Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/TileView.as

@@ -7,7 +7,8 @@ package classes.com.devexpress.js.tileView
     import classes.com.devexpress.js.tileView.events.TileViewEvent;
 
     [Event(name="clickItemTileView", type="classes.com.devexpress.js.tileView.events.TileViewEvent")]
-
+    [Event(name="doubleClickItemTileView", type="classes.com.devexpress.js.tileView.events.TileViewEvent")]
+
 	public class TileView extends Group 
 	{
 		public function TileView()

Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/beads/TileViewView.as

@@ -10,6 +10,7 @@ package classes.com.devexpress.js.tileView.beads
     import org.apache.royale.core.IStrand;
     import org.apache.royale.html.beads.GroupView;
     import org.apache.royale.jewel.View;
+    import org.apache.royale.events.MouseEvent;
 
 	public class TileViewView extends GroupView 
 	{
@@ -32,6 +33,9 @@ package classes.com.devexpress.js.tileView.beads
 	        			host["selectedItem"] = event.itemData;
 
 					host.dispatchEvent(new TileViewEvent(TileViewEvent.CLICK_ITEM, event.itemData, event.itemIndex));
+				},
+				onDisposing: function onDisposing(element:Object, component:Object):void {
+					var e:Object = element;
 				}});
 	        this._model.addEventListener("dataProviderChanged", handleDataProviderChanged);
 	        this._model.addEventListener("itemRendererChanged", handleItemRendererChanged);
@@ -90,6 +94,9 @@ package classes.com.devexpress.js.tileView.beads
 						div.percentHeight = 100;
 
 					renderer.data = itemData;
+					renderer.addEventListener(MouseEvent.DOUBLE_CLICK, function onItemDoubleClick(event:MouseEvent):void {
+						host.dispatchEvent(new TileViewEvent(TileViewEvent.DOUBLE_CLICK_ITEM, _model.selectedItem, _model.selectedIndex));
+					});
 					div.addElement(renderer as IChild);	
 					itemElement.append(div.element);
 			}});

Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/events/TileViewEvent.as

@@ -5,6 +5,7 @@ package  classes.com.devexpress.js.tileView.events
 	public class TileViewEvent extends Event 
 	{
 		public static const CLICK_ITEM:String = "clickItemTileView";
+		public static const DOUBLE_CLICK_ITEM:String = "doubleClickItemTileView";
 
 		public function TileViewEvent(type:String, item:Object = null, index:int = -1)
 		{

Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/mediator/MediatorViewGettingStarted.as

@@ -1,19 +1,21 @@
 package mediator
 {
-    import interfaces.IViewHello;
+    import Super.Human.Portal_Royale.views.modules.DocumentationForm.DocumentationFormServices.DocumentationFormProxy;
+
+    import classes.com.devexpress.js.tileView.events.TileViewEvent;
 
     import org.puremvc.as3.multicore.interfaces.IMediator;
     import org.puremvc.as3.multicore.interfaces.INotification;
     import org.puremvc.as3.multicore.patterns.mediator.Mediator;
 
     import view.general.BusyOperator;
-    import Super.Human.Portal_Royale.views.modules.DocumentationForm.DocumentationFormServices.DocumentationFormProxy;
-    import classes.com.devexpress.js.tileView.events.TileViewEvent;
 
     public class MediatorViewGettingStarted extends Mediator implements IMediator
     {
 		public static const NAME:String = 'MediatorViewGettingStarted';
 
+		private var proxy:DocumentationFormProxy;
+
 		public function MediatorViewGettingStarted(component:Object) 
 		{
 			super(NAME, component);
@@ -23,16 +25,23 @@ package mediator
 		{
 			super.onRegister();
 
-			var proxy:DocumentationFormProxy = DocumentationFormProxy.getInstance();
-				proxy.loadConfig();
+			proxy = DocumentationFormProxy.getInstance();
+			proxy.loadConfig();
+
+			view.addEventListener("stateChangeComplete", onViewStateChange);
 			view.tileGettingStarted.addEventListener(TileViewEvent.CLICK_ITEM, onTileViewClickItem);
 		}
 
 		override public function onRemove():void 
 		{			
 			super.onRemove();
 
+			view.removeEventListener("stateChangeComplete", onViewStateChange);
 			view.tileGettingStarted.removeEventListener(TileViewEvent.CLICK_ITEM, onTileViewClickItem);
+			if (view.dg)
+			{
+				view.dg.removeEventListener(TileViewEvent.DOUBLE_CLICK_ITEM, onDgTileDoubleClickItem);
+			}
 		}	
 
 		public function get busyOperatory():BusyOperator
@@ -50,7 +59,7 @@ package mediator
 
 			switch (note.getName()) 
 			{
-									
+
 			}
 		}		
 
@@ -59,10 +68,28 @@ package mediator
 			return viewComponent as Object;
 		}
 
+		private function onViewStateChange(event:Event):void
+		{
+			if (view.currentState == "dataGridState")
+			{
+				if (proxy.editable)
+				{
+					if (view.dg && !view.dg.hasEventListener(TileViewEvent.DOUBLE_CLICK_ITEM))
+					{
+						view.dg.addEventListener(TileViewEvent.DOUBLE_CLICK_ITEM, onDgTileDoubleClickItem);
+					}
+				}
+			}
+		}
+
 		private function onTileViewClickItem(event:TileViewEvent):void
 		{
-			var item:Object = event.item;
 			view.refreshItems();
 		}
+
+		private function onDgTileDoubleClickItem(event:TileViewEvent):void
+		{
+			view.initReadOnlyForm();
+		}
     }
 }