Radii8Library/src/com/flexcapacitor/views/panels/ComponentsInspector.mxml - flex-radii8 - Git at Google

 <?xml version="1.0" encoding="utf-8"?>
 <!--

 Licensed to the Apache Software Foundation (ASF) under one or more
 contributor license agreements.  See the NOTICE file distributed with
 this work for additional information regarding copyright ownership.
 The ASF licenses this file to You under the Apache License, Version 2.0
 (the "License"); you may not use this file except in compliance with
 the License.  You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.

 -->
 <s:Group 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:handlers="com.flexcapacitor.handlers.*"
 		 xmlns:collections="com.flexcapacitor.effects.collections.*"

 		 implements="com.flexcapacitor.views.IInspector"
 		 width="400" height="300"
 		 >

 	<!--

 	The list of components to include come from spark-manifest-defaults.xml
 	in Radii8LibrarySparkAssets. The include attribute must be set to true for them to be visible.

 	The component classes are included by creating a reference to them in Radii8LibrarySparkAssets.

 	We create an instance of the class in the mouse down handler.


 	-->


 	<fx:Script>
 		<![CDATA[
 			import com.flexcapacitor.controller.Radiate;
 			import com.flexcapacitor.events.DragDropEvent;
 			import com.flexcapacitor.events.RadiateEvent;
 			import com.flexcapacitor.managers.layoutClasses.LayoutDebugHelper;
 			import com.flexcapacitor.model.IDocument;
 			import com.flexcapacitor.utils.DragManagerUtil;
 			import com.flexcapacitor.utils.supportClasses.ComponentDefinition;
 			import com.flexcapacitor.views.IInspector;

 			import mx.core.ClassFactory;
 			import mx.events.DragEvent;
 			import mx.managers.ISystemManager;
 			import mx.managers.SystemManagerGlobals;

 			import spark.components.Application;
 			import spark.components.Group;
 			import spark.components.Label;

 			private var target:Object;
 			private var radiate:Radiate;
 			private var dragManagerInstance:DragManagerUtil;


 			public function activate():void {
 				radiate = Radiate.getInstance();

 				components.source = Radiate.componentDefinitions.source;
 			}

 			public function deactivate():void {

 			}

 			protected function targetChangeHandler(event:RadiateEvent):void {
 				target = event.selectedItem;
 			}

 			/**
 			 * Listen for drag movement and start dragging if drag tolerance is met
 			 * */
 			public function rowGroupMouseDownHandler(event:MouseEvent, data:Object, itemIndex:int):void {
 				var classFactory:ClassFactory;
 				var item:ComponentDefinition;
 				var application:Application;
 				var component:Object;
 				var document:IDocument = radiate.selectedDocument;
 				var rowGroup:Group;

 				item = ComponentDefinition(data);

 				dropTargetLabel.text = "";

 				rowGroup = event.currentTarget as Group;

 				event.stopImmediatePropagation();
 				//list.dragEnabled = false;

 				application = document && document.instance ? document.instance as Application : null;

 				if (!application) return;

 				component = Radiate.createComponentForAdd(document, item);


 				if (!dragManagerInstance) {
 					dragManagerInstance = new DragManagerUtil();
 				}

 				rowGroup.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
 				rowGroup.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, false, 0, true);

 				//dragManagerInstance.listenForDragBehavior(rowGroup, application, event, component);
 				dragManagerInstance.listenForDragBehavior(rowGroup, document, event, component);
 				dragManagerInstance.removeEventListener(DragDropEvent.DRAG_DROP, handleDragDrop);
 				dragManagerInstance.removeEventListener(DragEvent.DRAG_OVER, handleDragOver);
 				dragManagerInstance.removeEventListener(DragDropEvent.DRAG_DROP_COMPLETE, handleDragDropComplete);

 				dragManagerInstance.addEventListener(DragDropEvent.DRAG_DROP, handleDragDrop);
 				dragManagerInstance.addEventListener(DragEvent.DRAG_OVER, handleDragOver);
 				dragManagerInstance.addEventListener(DragDropEvent.DRAG_DROP_COMPLETE, handleDragDropComplete);

 				// DRAG DROP
 				// is continued in
 				// DragManagerUtil.dragDropHandler()

 				// and then in handleDragDrop() here
 			}

 			/**
 			 * Remove mouse handlers from row
 			 * */
 			protected function mouseUpHandler(event:MouseEvent):void
 			{
 				// we need a custom FlexSprite class to do this
 				/*if (event.currentTarget.eventListeners) {
 					event.currentTarget.removeAllEventListeners();
 				}*/

 				//list.dragEnabled = true;
 				event.currentTarget.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

 			}

 			/**
 			 * Handles drag drop event. This is only the first part of adding to the stage.
 			 * We can prevent automatic adding by calling event.preventDefault().
 			 * If we do not call preventDefault dragDropComplete is the next event to be called.
 			 * */
 			protected function handleDragDrop(event:DragDropEvent):void
 			{
 				var component:Object = event.draggedItem;

 				// if text based or combo box we need to prevent
 				// interaction with cursor

 				// UPDATE THIS IN DRAG DROP COMPLETE
 				/*
 				if (component is TextBase || component is SkinnableTextBase) {
 					component.mouseChildren = false;

 					if ("textDisplay" in component && component.textDisplay) {
 						component.textDisplay.enabled = false;
 					}
 				}*/

 				dragManagerInstance.removeEventListener(DragDropEvent.DRAG_DROP, handleDragDrop);
 				dropTargetLabel.text = "Drag drop to:" + dragManagerInstance.dropTargetName;

 				dragManagerInstance.removeEventListener(DragEvent.DRAG_OVER, handleDragOver);
 			}

 		    private static var _layoutDebugHelper:LayoutDebugHelper;

 		    public static function get debugHelper():LayoutDebugHelper
 		    {
 		        if (!_layoutDebugHelper)
 		        {
 		            _layoutDebugHelper = new LayoutDebugHelper();
 		            _layoutDebugHelper.mouseEnabled = false;
 		            var sm:ISystemManager = SystemManagerGlobals.topLevelSystemManagers[0]
 		            sm.addChild(_layoutDebugHelper);
 		        }
 		        return _layoutDebugHelper;
 		    }

 			private function deferredInstanceFromFunction():Array {
 				var label:Label = new Label();
 				return [label];
 			}

 			/**
 			 * Dispatched after drag drop event. Drag drop can be canceled. If it
 			 * is not canceled this event happens.
 			 * */
 			protected function handleDragDropComplete(event:DragDropEvent):void
 			{
 				var o:LayoutDebugHelper = debugHelper;
 				var component:Object = event.draggedItem;


 				/*
 				// if text based or combo box we need to prevent
 				// interaction with cursor
 				if (component is TextBase || component is SkinnableTextBase) {
 					component.mouseChildren = false;

 					if ("textDisplay" in component && component.textDisplay) {
 						component.textDisplay.enabled = false;
 					}
 				}

 				if (component is ComboBox) {
 					if ("textInput" in component && component.textInput.textDisplay) {
 						component.textInput.textDisplay.enabled = false;
 					}
 				}

 				// we can't add elements if skinnablecontainer._deferredContentCreated is false
 				if (component is BorderContainer) {
 					var factory:DeferredInstanceFromFunction = new DeferredInstanceFromFunction(deferredInstanceFromFunction);
 					BorderContainer(component).mxmlContentFactory = factory;
 					//BorderContainer(component).initialize();
 					BorderContainer(component).createDeferredContent();
 					BorderContainer(component).removeAllElements();

 					// we could probably also do this:
 					//BorderContainer(component).addElement(new Button());

 				}

 				// we need a custom FlexSprite class to do this
 				// do this after drop
 				if ("eventListeners" in component && !(component is GroupBase)) {
 					component.removeAllEventListeners();
 				}*/

 				//o.addElement(component as ILayoutElement);
 				dragManagerInstance.removeEventListener(DragDropEvent.DRAG_DROP_COMPLETE, handleDragDropComplete);
 				dropTargetLabel.text = "Drag Complete to:" + dragManagerInstance.dropTargetName;


 				dragManagerInstance.removeEventListener(DragEvent.DRAG_OVER, handleDragOver);
 			}

 			protected function addItemHandler(event:RadiateEvent):void {
 				//trace("item addedd");

 				//radiate.target = event.eventTarget;

 			}

 			protected function handleDragOver(event:Event):void {

 				//Radiate.log.info("target: " + dragManagerInstance.lastTargetCandidate);
 				dropTargetLabel.text = "Drag over: " + dragManagerInstance.dropTargetName;
 			}

 			protected function list_dragStartHandler(event:DragEvent):void {

 			}

 			public function filterComponentsFunction(item:Object):Boolean {

 				if (item && item.enabled) {
 					return true;
 				}

 				return false;
 			}
 		]]>
 	</fx:Script>

 	<fx:Declarations>
 		<s:ArrayCollection id="components" filterFunction="filterComponentsFunction"/>


 		<!-- FILTER BY NAME -->
 		<handlers:EventHandler eventName="creationComplete"
 							   target="{this}"
 							   >
 		</handlers:EventHandler>
 	</fx:Declarations>

 	<!--
 	<s:Rect>
 		<s:fill>
 			<s:SolidColor color=""
 		</s:fill>
 	</s:Rect>-->

 	<s:layout>
 		<s:VerticalLayout gap="6"/>
 	</s:layout>

 	<s:List id="list"
 			width="100%"
 			height="100%"
 			labelField="name"
 			dragEnabled="true"
 			borderVisible="false"
 			interactionMode="mouse"
 			dataProvider="{components}"
 			dragStart="list_dragStartHandler(event)"
 			>
 		<s:itemRenderer>
 			<fx:Component>
 				<s:ItemRenderer width="100%" height="100%" minHeight="22" >
 					<fx:Script>
 						<![CDATA[
 							import com.flexcapacitor.controller.Radiate;
 							import com.flexcapacitor.utils.supportClasses.ComponentDefinition;

 							override public function set data(value:Object):void {
 								super.data = value;
 								var definition:ComponentDefinition = value as ComponentDefinition;
 								var path:String;


 								if (definition) {
 									if (definition.icon) {
 										iconImage.source = definition.icon;
 									}
 									else {
 										path = "assets/images/components/" + definition.name + ".png";
 										iconImage.source = path;
 									}
 								}
 							}

 							protected function iconImage_ioErrorHandler(event:Event):void {
 								iconImage.source = "assets/images/components/BorderContainer.png";
 							}

 							protected function groupMouseDownHandler(event:MouseEvent):void
 							{
 								outerDocument.rowGroupMouseDownHandler(event, data, itemIndex);
 							}

 						]]>
 					</fx:Script>

 					<s:HGroup id="rowGroup"
 							  width="100%"
 							  height="100%"
 							  verticalAlign="middle"
 							  paddingLeft="5"
 							  mouseDown="groupMouseDownHandler(event)">
 						<s:Image id="iconImage"
 								 contentLoader="{Radiate.contentCache}"
 								 ioError="iconImage_ioErrorHandler(event)"
 								 securityError="iconImage_ioErrorHandler(event)"
 								 width="16" height="16"/>
 						<s:Label id="labelDisplay"
 								 fontSize="11"
 								 typographicCase="lowercaseToSmallCaps"/>
 					</s:HGroup>

 				</s:ItemRenderer>
 			</fx:Component>

 		</s:itemRenderer>
 	</s:List>

 	<s:Label id="dropTargetLabel" width="100%" paddingLeft="4" visible="false" includeInLayout="false"/>
 	<s:Spacer height="4"/>
 </s:Group>
	<?xml version="1.0" encoding="utf-8"?>
	<!--

	Licensed to the Apache Software Foundation (ASF) under one or more
	contributor license agreements. See the NOTICE file distributed with
	this work for additional information regarding copyright ownership.
	The ASF licenses this file to You under the Apache License, Version 2.0
	(the "License"); you may not use this file except in compliance with
	the License. You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

	Unless required by applicable law or agreed to in writing, software
	distributed under the License is distributed on an "AS IS" BASIS,
	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	See the License for the specific language governing permissions and
	limitations under the License.

	-->
	<s:Group 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:handlers="com.flexcapacitor.handlers.*"
	xmlns:collections="com.flexcapacitor.effects.collections.*"

	implements="com.flexcapacitor.views.IInspector"
	width="400" height="300"
	>

	<!--

	The list of components to include come from spark-manifest-defaults.xml
	in Radii8LibrarySparkAssets. The include attribute must be set to true for them to be visible.

	The component classes are included by creating a reference to them in Radii8LibrarySparkAssets.

	We create an instance of the class in the mouse down handler.


	-->


	<fx:Script>
	<![CDATA[
	import com.flexcapacitor.controller.Radiate;
	import com.flexcapacitor.events.DragDropEvent;
	import com.flexcapacitor.events.RadiateEvent;
	import com.flexcapacitor.managers.layoutClasses.LayoutDebugHelper;
	import com.flexcapacitor.model.IDocument;
	import com.flexcapacitor.utils.DragManagerUtil;
	import com.flexcapacitor.utils.supportClasses.ComponentDefinition;
	import com.flexcapacitor.views.IInspector;

	import mx.core.ClassFactory;
	import mx.events.DragEvent;
	import mx.managers.ISystemManager;
	import mx.managers.SystemManagerGlobals;

	import spark.components.Application;
	import spark.components.Group;
	import spark.components.Label;

	private var target:Object;
	private var radiate:Radiate;
	private var dragManagerInstance:DragManagerUtil;


	public function activate():void {
	radiate = Radiate.getInstance();

	components.source = Radiate.componentDefinitions.source;
	}

	public function deactivate():void {

	}

	protected function targetChangeHandler(event:RadiateEvent):void {
	target = event.selectedItem;
	}

	/**
	* Listen for drag movement and start dragging if drag tolerance is met
	* */
	public function rowGroupMouseDownHandler(event:MouseEvent, data:Object, itemIndex:int):void {
	var classFactory:ClassFactory;
	var item:ComponentDefinition;
	var application:Application;
	var component:Object;
	var document:IDocument = radiate.selectedDocument;
	var rowGroup:Group;

	item = ComponentDefinition(data);

	dropTargetLabel.text = "";

	rowGroup = event.currentTarget as Group;

	event.stopImmediatePropagation();
	//list.dragEnabled = false;

	application = document && document.instance ? document.instance as Application : null;

	if (!application) return;

	component = Radiate.createComponentForAdd(document, item);


	if (!dragManagerInstance) {
	dragManagerInstance = new DragManagerUtil();
	}

	rowGroup.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
	rowGroup.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, false, 0, true);

	//dragManagerInstance.listenForDragBehavior(rowGroup, application, event, component);
	dragManagerInstance.listenForDragBehavior(rowGroup, document, event, component);
	dragManagerInstance.removeEventListener(DragDropEvent.DRAG_DROP, handleDragDrop);
	dragManagerInstance.removeEventListener(DragEvent.DRAG_OVER, handleDragOver);
	dragManagerInstance.removeEventListener(DragDropEvent.DRAG_DROP_COMPLETE, handleDragDropComplete);

	dragManagerInstance.addEventListener(DragDropEvent.DRAG_DROP, handleDragDrop);
	dragManagerInstance.addEventListener(DragEvent.DRAG_OVER, handleDragOver);
	dragManagerInstance.addEventListener(DragDropEvent.DRAG_DROP_COMPLETE, handleDragDropComplete);

	// DRAG DROP
	// is continued in
	// DragManagerUtil.dragDropHandler()

	// and then in handleDragDrop() here
	}

	/**
	* Remove mouse handlers from row
	* */
	protected function mouseUpHandler(event:MouseEvent):void
	{
	// we need a custom FlexSprite class to do this
	/*if (event.currentTarget.eventListeners) {
	event.currentTarget.removeAllEventListeners();
	}*/

	//list.dragEnabled = true;
	event.currentTarget.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

	}

	/**
	* Handles drag drop event. This is only the first part of adding to the stage.
	* We can prevent automatic adding by calling event.preventDefault().
	* If we do not call preventDefault dragDropComplete is the next event to be called.
	* */
	protected function handleDragDrop(event:DragDropEvent):void
	{
	var component:Object = event.draggedItem;

	// if text based or combo box we need to prevent
	// interaction with cursor

	// UPDATE THIS IN DRAG DROP COMPLETE
	/*
	if (component is TextBase \|\| component is SkinnableTextBase) {
	component.mouseChildren = false;

	if ("textDisplay" in component && component.textDisplay) {
	component.textDisplay.enabled = false;
	}
	}*/

	dragManagerInstance.removeEventListener(DragDropEvent.DRAG_DROP, handleDragDrop);
	dropTargetLabel.text = "Drag drop to:" + dragManagerInstance.dropTargetName;

	dragManagerInstance.removeEventListener(DragEvent.DRAG_OVER, handleDragOver);
	}

	private static var _layoutDebugHelper:LayoutDebugHelper;

	public static function get debugHelper():LayoutDebugHelper
	{
	if (!_layoutDebugHelper)
	{
	_layoutDebugHelper = new LayoutDebugHelper();
	_layoutDebugHelper.mouseEnabled = false;
	var sm:ISystemManager = SystemManagerGlobals.topLevelSystemManagers[0]
	sm.addChild(_layoutDebugHelper);
	}
	return _layoutDebugHelper;
	}

	private function deferredInstanceFromFunction():Array {
	var label:Label = new Label();
	return [label];
	}

	/**
	* Dispatched after drag drop event. Drag drop can be canceled. If it
	* is not canceled this event happens.
	* */
	protected function handleDragDropComplete(event:DragDropEvent):void
	{
	var o:LayoutDebugHelper = debugHelper;
	var component:Object = event.draggedItem;


	/*
	// if text based or combo box we need to prevent
	// interaction with cursor
	if (component is TextBase \|\| component is SkinnableTextBase) {
	component.mouseChildren = false;

	if ("textDisplay" in component && component.textDisplay) {
	component.textDisplay.enabled = false;
	}
	}

	if (component is ComboBox) {
	if ("textInput" in component && component.textInput.textDisplay) {
	component.textInput.textDisplay.enabled = false;
	}
	}

	// we can't add elements if skinnablecontainer._deferredContentCreated is false
	if (component is BorderContainer) {
	var factory:DeferredInstanceFromFunction = new DeferredInstanceFromFunction(deferredInstanceFromFunction);
	BorderContainer(component).mxmlContentFactory = factory;
	//BorderContainer(component).initialize();
	BorderContainer(component).createDeferredContent();
	BorderContainer(component).removeAllElements();

	// we could probably also do this:
	//BorderContainer(component).addElement(new Button());

	}

	// we need a custom FlexSprite class to do this
	// do this after drop
	if ("eventListeners" in component && !(component is GroupBase)) {
	component.removeAllEventListeners();
	}*/

	//o.addElement(component as ILayoutElement);
	dragManagerInstance.removeEventListener(DragDropEvent.DRAG_DROP_COMPLETE, handleDragDropComplete);
	dropTargetLabel.text = "Drag Complete to:" + dragManagerInstance.dropTargetName;


	dragManagerInstance.removeEventListener(DragEvent.DRAG_OVER, handleDragOver);
	}

	protected function addItemHandler(event:RadiateEvent):void {
	//trace("item addedd");

	//radiate.target = event.eventTarget;

	}

	protected function handleDragOver(event:Event):void {

	//Radiate.log.info("target: " + dragManagerInstance.lastTargetCandidate);
	dropTargetLabel.text = "Drag over: " + dragManagerInstance.dropTargetName;
	}

	protected function list_dragStartHandler(event:DragEvent):void {

	}

	public function filterComponentsFunction(item:Object):Boolean {

	if (item && item.enabled) {
	return true;
	}

	return false;
	}
	]]>
	</fx:Script>

	<fx:Declarations>
	<s:ArrayCollection id="components" filterFunction="filterComponentsFunction"/>



	<!-- FILTER BY NAME -->
	<handlers:EventHandler eventName="creationComplete"
	target="{this}"
	>
	</handlers:EventHandler>
	</fx:Declarations>

	<!--
	<s:Rect>
	<s:fill>
	<s:SolidColor color=""
	</s:fill>
	</s:Rect>-->

	<s:layout>
	<s:VerticalLayout gap="6"/>
	</s:layout>

	<s:List id="list"
	width="100%"
	height="100%"
	labelField="name"
	dragEnabled="true"
	borderVisible="false"
	interactionMode="mouse"
	dataProvider="{components}"
	dragStart="list_dragStartHandler(event)"
	>
	<s:itemRenderer>
	<fx:Component>
	<s:ItemRenderer width="100%" height="100%" minHeight="22" >
	<fx:Script>
	<![CDATA[
	import com.flexcapacitor.controller.Radiate;
	import com.flexcapacitor.utils.supportClasses.ComponentDefinition;

	override public function set data(value:Object):void {
	super.data = value;
	var definition:ComponentDefinition = value as ComponentDefinition;
	var path:String;


	if (definition) {
	if (definition.icon) {
	iconImage.source = definition.icon;
	}
	else {
	path = "assets/images/components/" + definition.name + ".png";
	iconImage.source = path;
	}
	}
	}

	protected function iconImage_ioErrorHandler(event:Event):void {
	iconImage.source = "assets/images/components/BorderContainer.png";
	}

	protected function groupMouseDownHandler(event:MouseEvent):void
	{
	outerDocument.rowGroupMouseDownHandler(event, data, itemIndex);
	}

	]]>
	</fx:Script>

	<s:HGroup id="rowGroup"
	width="100%"
	height="100%"
	verticalAlign="middle"
	paddingLeft="5"
	mouseDown="groupMouseDownHandler(event)">
	<s:Image id="iconImage"
	contentLoader="{Radiate.contentCache}"
	ioError="iconImage_ioErrorHandler(event)"
	securityError="iconImage_ioErrorHandler(event)"
	width="16" height="16"/>
	<s:Label id="labelDisplay"
	fontSize="11"
	typographicCase="lowercaseToSmallCaps"/>
	</s:HGroup>

	</s:ItemRenderer>
	</fx:Component>

	</s:itemRenderer>
	</s:List>

	<s:Label id="dropTargetLabel" width="100%" paddingLeft="4" visible="false" includeInLayout="false"/>
	<s:Spacer height="4"/>
	</s:Group>