flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From aha...@apache.org
Subject [10/30] Radii8 code base as accepted by IP Clearance
Date Wed, 03 Sep 2014 00:17:43 GMT
http://git-wip-us.apache.org/repos/asf/flex-radii8/blob/f370bfcf/Radii8Library/src/com/flexcapacitor/views/panels/ConstraintsInspector.mxml
----------------------------------------------------------------------
diff --git a/Radii8Library/src/com/flexcapacitor/views/panels/ConstraintsInspector.mxml b/Radii8Library/src/com/flexcapacitor/views/panels/ConstraintsInspector.mxml
new file mode 100644
index 0000000..e41f547
--- /dev/null
+++ b/Radii8Library/src/com/flexcapacitor/views/panels/ConstraintsInspector.mxml
@@ -0,0 +1,1546 @@
+<?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:fc="com.flexcapacitor.controls.*"
+		 xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		 xmlns:local="*"
+		 xmlns:mx="library://ns.adobe.com/flex/mx"
+		 xmlns:s="library://ns.adobe.com/flex/spark"
+		 xmlns:utils="com.flexcapacitor.utils.*" 
+		 xmlns:handlers="com.flexcapacitor.handlers.*"
+		 xmlns:supportClasses="com.flexcapacitor.effects.supportClasses.*"
+		 
+		 styleName="constraintStyles"
+		 creationComplete="creationCompleteHandler(event)"
+		 width="100%"
+		 height="100%"
+		 >
+
+	<fx:Script>
+		<![CDATA[
+			import com.flexcapacitor.controller.Radiate;
+			import com.flexcapacitor.events.RadiateEvent;
+			
+			import mx.collections.ArrayList;
+			import mx.core.IVisualElement;
+			import mx.core.UIComponent;
+			import mx.events.FlexEvent;
+			
+			import spark.components.Image;
+			import spark.components.supportClasses.GroupBase;
+			import spark.primitives.BitmapImage;
+
+			public static const BASELINE:String = "baseline";
+			public static const BOTTOM:String = "bottom";
+			public static const HORIZONTAL_CENTER:String = "horizontalCenter";
+			public static const LEFT:String = "left";
+
+			public static const PERCENT_HEIGHT:String = "percentHeight";
+			public static const PERCENT_WIDTH:String = "percentWidth";
+			public static const RIGHT:String = "right";
+			public static const TOP:String = "top";
+			public static const VERTICAL_CENTER:String = "verticalCenter";
+
+			public static const X:String = "x";
+			public static const Y:String = "y";
+
+			[Bindable]
+			public var targetActualHeight:Number;
+
+			[Bindable]
+			public var targetActualWidth:Number;
+
+			[Bindable]
+			public var targetBottom:Number;
+
+			[Bindable]
+			public var targetHeight:Number;
+			
+			[Bindable]
+			public var targetHorizontal:Number;
+			
+			[Bindable]
+			public var targetBaseline:Number;
+
+			[Bindable]
+			public var targetLeft:Number;
+
+			[Bindable]
+			public var targetPercentHeight:Number;
+
+			[Bindable]
+			public var targetPercentWidth:Number;
+
+			[Bindable]
+			public var targetRight:Number;
+
+			[Bindable]
+			public var targetTop:Number;
+
+			[Bindable]
+			public var targetVertical:Number;
+
+			[Bindable]
+			public var targetWidth:Number;
+
+			[Bindable]
+			public var targetX:Number;
+
+			[Bindable]
+			public var targetY:Number;
+
+
+			private var _target:DisplayObject;
+			private var _visualElement:IVisualElement;
+			
+			[Bindable]
+			public var isVisualElement:Boolean;
+			
+			/**
+			 * Select all the text in an input on focus in.
+			 * */
+			public var selectOnFocusIn:Boolean;
+			
+			public var radiate:Radiate = Radiate.instance;
+			
+			protected function creationCompleteHandler(event:FlexEvent):void {
+				target = null;
+				radiate = Radiate.getInstance();
+				radiate.addEventListener(RadiateEvent.TARGET_CHANGE, targetChangeHandler);
+				radiate.addEventListener(RadiateEvent.PROPERTY_CHANGED, propertyChangeHandler);
+				radiate.addEventListener(RadiateEvent.HISTORY_CHANGE, historyChangeHandler);
+				
+				if (radiate.targets.length>0) {
+					target = radiate.target;
+				}
+			}
+			
+			/**
+			 * Clears the target dimension variables which updates any element
+			 * bound to them
+			 * */
+			public function clearTargetDimensions():void {
+				
+				if (_target) {
+					/*
+					if (target is SystemManager) {
+						target.removeEventListener(Event.RESIZE, updateTargetOutline);
+					}
+					else {
+						_target.removeEventListener(FlexEvent.UPDATE_COMPLETE, updateTargetOutline);
+						if (_target.parent) {
+							_target.parent.removeEventListener(FlexEvent.UPDATE_COMPLETE, updateTargetOutline);
+						}
+					}
+					
+					InspectorUtils.clearSelection(_target, systemManager);*/
+				}
+
+				targetWidth = undefined;
+				targetHeight = undefined;
+				targetX = undefined;
+				targetY = undefined;
+				targetBaseline = undefined;
+				targetTop = undefined;
+				targetBottom = undefined;
+				targetLeft = undefined;
+				targetRight = undefined;
+				targetVertical = undefined;
+				targetHorizontal = undefined;
+				targetPercentWidth = undefined;
+				targetPercentHeight = undefined;
+				
+			}
+
+			/**
+			 * Gets the current properties of the target and updates the properties inspector
+			 * with those values
+			 * */
+			public function initializeProperties():void {
+				var bitmap:BitmapImage;
+				var image:Image;
+				
+				if (isVisualElement) {
+					constraintsContainer.enabled = true;
+					
+					// get constraints
+					targetTop = Number(element.top);
+					targetBottom = Number(element.bottom);
+					targetLeft = Number(element.left);
+					targetRight = Number(element.right);
+					targetVertical = Number(element.verticalCenter);
+					targetHorizontal = Number(element.horizontalCenter);
+					targetBaseline = Number(element.baseline);
+					targetPercentWidth = Number(element.percentWidth);
+					targetPercentHeight = Number(element.percentHeight);
+				}
+				else {
+					//constraintsContainer.enabled = false;
+				}
+
+				if (target.width == 0 || target.height == 0) {
+
+					if (target is BitmapImage) {
+						bitmap = BitmapImage(target);
+						targetWidth = bitmap.sourceWidth;
+						targetHeight = bitmap.sourceHeight;
+						targetActualWidth = bitmap.sourceWidth;
+						targetActualHeight = bitmap.sourceHeight;
+					}
+					else if (target is Image) {
+						image = Image(target);
+						targetWidth = image.sourceWidth;
+						targetHeight = image.sourceHeight;
+						targetActualWidth = image.sourceWidth;
+						targetActualHeight = image.sourceHeight;
+					}
+				}
+				else {
+					targetWidth = target.width;
+					targetHeight = target.height;
+				}
+
+				targetX = target.x;
+				targetY = target.y;
+				/*
+				if (target is SystemManager) {
+					target.addEventListener(Event.RESIZE, updateTargetOutline, false, 0, true);
+				}
+				else {
+					target.addEventListener(FlexEvent.UPDATE_COMPLETE, updateTargetOutline, false, 0, true);
+					
+					// not all changes update the selection 
+					// maybe add to system manager 
+					// NOTE: This is not the place to do it
+					// Should be added as a flag to radiate instance
+					if (target.parent) {
+						target.parent.addEventListener(FlexEvent.UPDATE_COMPLETE, updateTargetOutline, false, 0, true);
+					}
+				}*/
+				
+				updateTargetDimensionsLayout();
+
+			}
+			
+			public function get element():IVisualElement {
+				return _visualElement;
+			}
+			
+			public function get target():Object {
+				return _target;
+			}
+
+			[Bindable]
+			public function set target(value:Object):void {
+				
+				if (!(value is DisplayObject)) {
+					_target = null;
+					clearForm();
+					clearTargetDimensions();
+					return;
+				}
+				
+				clearForm();
+				clearTargetDimensions();
+				
+				_target = value as DisplayObject;
+				
+				if (_target is IVisualElement) {
+					isVisualElement = true;
+					_visualElement = IVisualElement(_target);
+				}
+				else {
+					isVisualElement = false;
+					_visualElement = undefined;
+				}
+
+				if (_target) {
+					initializeProperties();
+				}
+				else {
+					updateTargetDimensionsLayout();
+				}
+				
+			}
+
+			/**
+			 * Updates the 
+			 * */
+			public function update():void {
+				updateTargetDimensionsLayout();
+			}
+
+			/**
+			 * Updates the target dimension layout inspector
+			 * */
+			public function updateTargetDimensionsLayout():void {
+
+				// check if the layout panel has been created yet
+				if (target == null) {
+					return;
+				}
+
+				// if target is a container we show the layout options
+				if (target is GroupBase) {
+					var layoutName:String = flash.utils.getQualifiedClassName(GroupBase(target).layout);
+					
+					for each (var item:Object in ArrayList(layoutLayoutComboBox.dataProvider).source) {
+						if (item.label == layoutName) {
+							layoutLayoutComboBox.selectedItem = item;
+						}
+					}
+				}
+				
+				// not sure of way to validate an IVisualElement
+				// new values aren't always committed on the same frame 
+				if (target.parent is UIComponent) {
+					UIComponent(target.parent).validateNow();
+				}
+				else if (target is UIComponent) {
+					UIComponent(target).validateNow();
+				}
+				
+				updateView();
+				
+			}
+			
+			/**
+			 * Updates the visual components to reflect the current values
+			 * */
+			public function updateView():void {
+				
+				// update UI
+				updateXProperty();
+				updateYProperty();
+				
+				updateTopConstraint();
+				updateBottomConstraint();
+				updateLeftConstraint();
+				updateRightConstraint();
+				
+				updateHorizontalCenterConstraint();
+				updateVerticalCenterConstraint();
+				updateBaselineConstraint();
+				
+				updateWidthProperty();
+				updateHeightProperty();
+				
+				updateVisibleControls();
+				
+				
+			}
+			
+			/**
+			 * Applies properties when enter key is pressed on text components
+			 * */
+			protected function applyPropertiesToTargetHandler(event:Event):void {
+				var currentTarget:UIComponent = event.currentTarget as UIComponent;
+				var textInput:TextInput = event.currentTarget as TextInput;
+				var combobox:ComboBox = event.currentTarget as ComboBox;
+				var checkbox:CheckBox = event.currentTarget as CheckBox;
+				var property:String;
+				
+				if (!target) return;
+				
+				if (combobox && combobox.selectedIndex != -1) { // not used
+					//TypeUtils.applyProperty(combobox, combobox.selectedItem.name, combobox.selectedItem.label, combobox.selectedItem.type);
+				}
+
+				else if (textInput) {
+					property = textInput.name.indexOf(":") ? textInput.name.split(":")[0]:textInput.name;
+					
+					// handle percents
+					if (property=="width" && textInput.text.indexOf("%")!=-1) {
+						property = "percentWidth";
+						textInput.text = textInput.text.split("%")[0];
+					}
+					else if (property=="height" && textInput.text.indexOf("%")!=-1) {
+						property = "percentHeight";
+						textInput.text = textInput.text.split("%")[0];
+					}
+					
+					if (textInput.text=="") {
+						Radiate.setProperty(DisplayObject(target), property, undefined);
+					}
+					else {
+						Radiate.setProperty(DisplayObject(target), property, textInput.text);
+					}
+					
+				}
+
+				else if (checkbox) {
+					var value:Boolean = checkbox.selected;
+					property = checkbox.name.indexOf(":") ? checkbox.name.split(":")[0]:checkbox.name;
+					Radiate.setProperty(DisplayObject(target), property, value);
+				}
+
+				updateTargetDimensionsLayout();
+			}
+
+
+			/**
+			 * Handles when a constraint checkbox is enabled or disabled
+			 * */
+			protected function constraintHandler(event:Event):void {
+				var enabled:Boolean = event.currentTarget.selected;
+				var constraint:String = event.currentTarget.id;
+				
+				// naming convention is important leftConstraint becomes "left"
+				constraint = constraint.split("Constraint")[0];
+
+				if (isVisualElement) {
+					if (enabled) {
+						convertToConstraint(constraint);
+					}
+					else {
+						convertFromConstraint(constraint);
+					}
+				}
+			}
+
+			/**
+			 * Convert constraint to property
+			 * Note: Setting a constraint to undefined
+			 * causes Flex to update the non constraint values
+			 * */
+			protected function convertFromConstraint(constraint:String):void {
+				var focusComponent:UIComponent;
+				var enabled:Boolean = false;
+				var constraint:String;
+				var value:Object;
+				
+				if (!target) return;
+
+				// convert Right to X
+				if (constraint == RIGHT) {
+					value = undefined;
+					constraint = "right";
+					rightText.text = "";
+					focusComponent = xText;
+				}
+
+				// convert from Left to X
+				else if (constraint == LEFT) {
+					value = undefined;
+					constraint = "left";
+					leftText.text = "";
+					focusComponent = xText;
+				}
+
+				// convert from Bottom to Y
+				else if (constraint == BOTTOM) {
+					value = undefined;
+					constraint = "bottom";
+					bottomText.text = "";
+					focusComponent = yText;
+				}
+
+				// convert from Top to Y
+				if (constraint == TOP) {
+					value = undefined;
+					constraint = "top";
+					topText.text = "";
+					focusComponent = yText;
+				}
+
+				// convert from Vertical Center to Y
+				if (constraint == VERTICAL_CENTER) {
+					//element.verticalCenter = undefined;
+					value = undefined;
+					constraint = "verticalCenter";
+					verticalCenterText.text = "";
+					focusComponent = yText;
+				}
+
+				// convert from Horizontal Center to X
+				if (constraint == HORIZONTAL_CENTER) {
+					//value = Object(element.horizontalCenter);
+					value = undefined;
+					constraint = "horizontalCenter";
+					horizontalCenterText.text = "";
+					//value = String(target.parent.width / 2 - target.width / 2 + Number(value));
+					//target.x = Number(value);
+					focusComponent = xText;
+				}
+
+				// convert from Baseline to Y
+				if (constraint == BASELINE) {
+					//element.baseline = undefined;
+					value = undefined;
+					constraint = "baseline";
+					baselineText.text = "";
+					focusComponent = yText;
+				}
+
+
+				Radiate.setProperty(target, constraint, value);
+				updateTargetDimensionsLayout();
+				callLater(focusComponent.setFocus);
+			}
+
+			/**
+			 * Convert property value to constraint value
+			 * NOTE: Does not take into account all options - could be incorrect
+			 * */
+			protected function convertToConstraint(constraint:String):void {
+				var value:String;
+				var enabled:Boolean = true;
+				var focusComponent:UIComponent;
+
+				if (!target) return;
+				
+				// convert from X to Right
+				if (constraint == RIGHT) {
+					value = String(Number(target.parent.width) - Number(target.width) - Number(target.x));
+					focusComponent = rightText;
+				}
+
+				// convert from X to Left
+				else if (constraint == LEFT) {
+					value = String(target.x);
+					focusComponent = leftText;
+				}
+
+				// convert from Y to Bottom
+				else if (constraint == BOTTOM) {
+					value = String(Number(target.parent.height) - Number(target.height) - Number(target.y));
+					focusComponent = bottomText;
+				}
+
+				// convert from Y to Top
+				else if (constraint == TOP) {
+					value = String(target.y);
+					focusComponent = topText;
+				}
+
+				// convert from Y to Vertical Center
+				else if (constraint == VERTICAL_CENTER) {
+					value = String(target.y - target.parent.height / 2 + target.height / 2);
+					focusComponent = verticalCenterText;
+				}
+
+				// convert from X to Horizontal Center
+				else if (constraint == HORIZONTAL_CENTER) {
+					value = String(target.x - target.parent.width / 2 + target.width / 2);
+					focusComponent = horizontalCenterText;
+				}
+
+				// convert from Y to Baseline
+				else if (constraint == BASELINE) {
+					value = String(target.y);
+					focusComponent = baselineText;
+				}
+
+				// not sure of way to validate an IVisualElement
+				//target[constraint] = value;
+				Radiate.setProperty(target, constraint, value);
+				updateTargetDimensionsLayout();
+				callLater(focusComponent.setFocus);
+
+				// we may need to take into account width and height and percentages
+			}
+
+			/**
+			 * Displays height value taking into account percent height
+			 * */
+			protected function displayCorrectHeight():void {
+				var isPercentHeight:Boolean;
+				
+				if (isVisualElement) {
+					isPercentHeight = Boolean(element.percentHeight);
+				}
+				
+				if (isPercentHeight) {
+					heightText.text = "";
+					heightText.prompt = String(element.percentHeight) + "%";
+				}
+				else {
+					
+					if ("explicitHeight" in target && target.height==target.explicitHeight) {
+						heightText.text = String(target.height);
+					}
+					else {
+						heightText.text = "";
+						heightText.prompt = String(target.height);
+					}
+				}
+			}
+
+			/**
+			 * Displays width value taking into account percent width
+			 * */
+			protected function displayCorrectWidth():void {
+				var isPercentWidth:Boolean;
+				
+				if (isVisualElement) {
+					isPercentWidth = Boolean(element.percentWidth);
+				}
+				
+				if (isPercentWidth) {
+					widthText.text = "";
+					widthText.prompt = String(element.percentWidth) + "%";
+				}
+				else {
+					if ("explicitWidth" in target && target.width==target.explicitWidth) {
+						widthText.text = String(target.width);
+					}
+					else {
+						widthText.text = "";
+						widthText.prompt = String(target.width);
+					}
+				}
+			}
+
+			/**
+			 * Casts the value to the correct type
+			 * NOTE: May not work for colors
+			 * Also supports casting to specific class. use ClassDefinition as type
+			 * returns instance of flash.utils.getDefinitionByName(className)
+			 * */
+			protected function getCorrectType(value:String, type:String):* {
+				if (type == "Boolean" && value.toLowerCase() == "false") {
+					return false;
+				}
+				else if (type == "Boolean" && value.toLowerCase() == "true") {
+					return true;
+				}
+				else if (type == "Number") {
+					if (value == null || value == "") {
+						return undefined
+					};
+					return Number(value);
+				}
+				else if (type == "int") {
+					if (value == null || value == "") {
+						return undefined
+					};
+					return int(value);
+				}
+				else if (type == "String") {
+					return String(value);
+				}
+				// TODO: Return color type
+				else if (type == "Color") {
+					return String(value);
+				}
+				else if (type == "ClassDefinition") {
+					if (value) {
+						var ClassDefinition:Class = flash.utils.getDefinitionByName(value) as Class;
+						return new ClassDefinition();
+					}
+					return new Object();
+				}
+				else {
+					return value;
+				}
+			}
+
+			/**
+			 * Returns true if left, right or horizontalCenter is set
+			 * */
+			protected function get hasHorizontalConstraints():Boolean {
+				var hasConstraints:Boolean;
+
+				if (isVisualElement && 
+					(element.left!=null || element.right!=null 
+						|| element.horizontalCenter!=null)) {
+					hasConstraints = true;
+				}
+
+				return hasConstraints;
+			}
+
+			/**
+			 * Returns true if top, bottom, verticalCenter or baseline is set
+			 * */
+			protected function get hasVerticalConstraints():Boolean {
+				var hasConstraints:Boolean;
+
+				if (isVisualElement 
+					&& (element.top!=null || element.bottom!=null
+						|| element.verticalCenter!=null || element.baseline!=null)) {
+					hasConstraints = true;
+				}
+
+				return hasConstraints;
+			}
+
+			/**
+			 * Selects all the text in the text field
+			 * */
+			protected function selectInputText(event:Event):void {
+				if (selectOnFocusIn && event.currentTarget is TextInput) {
+					TextInput(event.currentTarget).selectAll();
+				}
+			}
+			
+			/**
+			 * Sets the top constraint
+			 * */
+			protected function setTopConstraint(value:Object):void {
+				element.top = value ? value : undefined;
+			}
+			
+			/**
+			 * Sets the left constraint
+			 * */
+			protected function setLeftConstraint(value:Object):void {
+				element.left = value ? value : undefined;
+			}
+
+			/**
+			 * Sets the right constraint
+			 * */
+			protected function setRightConstraint(value:Object):void {
+				element.right = value ? value : undefined;
+			}
+
+			/**
+			 * Sets the bottom constraint
+			 * */
+			protected function setBottomConstraint(value:Object):void {
+				element.bottom = value ? value : undefined;
+			}
+
+			/**
+			 * Sets the vertical center constraint
+			 * */
+			protected function setVerticalCenterConstraint(value:Object):void {
+				element.verticalCenter = value ? value : undefined;
+			}
+			
+			/**
+			 * Sets the horizontal center constraint
+			 * */
+			protected function setHorizontalCenterConstraint(value:Object):void {
+				element.horizontalCenter = value ? value : undefined;
+			}
+			
+			/**
+			 * Sets the baseline constraint
+			 * */
+			protected function setBaselineConstraint(value:Object):void {
+				element.baseline = value ? value : undefined;
+			}
+
+
+			/**
+			 * Updates the display with the value of the baseline position
+			 * NOTE! This is not implemented or tested
+			 * */
+			protected function updateBaselineConstraint():void {
+				var baselineValue:Object;
+				
+				if (!isVisualElement) {
+					baselineText.text = "";
+					return;
+				}
+				
+				baselineValue = element.baseline;
+				
+				/**
+				 * If baseline is set then set Y to nothing
+				 * If baseline and bottom are set then set height to nothing
+				 * If verticalCenter is set then set baseline to nothing
+				 * Otherwise set baseline to nothing
+				 * */
+				if (baselineValue!=null) {
+					baselineText.text = String(baselineValue);
+
+					// baseline is set so do not display Y
+					yText.text = "";
+				}
+				else {
+					baselineText.text = "";
+				}
+
+			}
+
+			/**
+			 * Updates the display with the value of the bottom position
+			 * */
+			protected function updateBottomConstraint():void {
+				var bottomValue:Object;
+				
+				if (!isVisualElement) {
+					bottomText.text = "";
+					return;
+				}
+				
+				bottomValue = element.bottom;
+				
+				/**
+				 * If bottom is set then set Y to nothing
+				 * If bottom and bottom are set then set height to nothing
+				 * If verticalCenter is set then set bottom to nothing
+				 * Otherwise set bottom to nothing
+				 * */
+				if (bottomValue!=null) {
+					bottomText.text = String(bottomValue);
+
+					// if top and bottom are set then hide height
+					if (element.top) {
+						heightText.text = "";
+					}
+
+					// bottom is set so do not display Y
+					yText.text = "";
+				}
+				else {
+					bottomText.text = "";
+				}
+
+			}
+
+			/**
+			 * Updates the display with the value of the height
+			 * */
+			protected function updateHeightProperty():void {
+				var isPercentHeight:Boolean;
+
+				/**
+				 * If visual element and top is set and bottom is set then do not display height
+				 * */
+				if (isVisualElement && element.top != null && element.bottom != null) {
+					heightText.text = "";
+				}
+				else {
+					displayCorrectHeight();
+				}
+			}
+
+			/**
+			 * Updates the display with the value of the left constraint
+			 * */
+			protected function updateHorizontalCenterConstraint():void {
+				var value:String;
+				var horizontalCenterValue:Object;
+				
+				if (!isVisualElement) {
+					horizontalCenterText.text = "";
+					return;
+				}
+				
+				horizontalCenterValue = element.horizontalCenter;
+
+				/**
+				 * If left is set then set x to nothing
+				 * If left and right are set then set width to nothing
+				 * If horizontalCenter is set than set left and right to nothing
+				 * Otherwise set left to nothing
+				 * */
+				if (horizontalCenterValue!=null) {
+					horizontalCenterText.text = String(horizontalCenterValue);
+
+					// left is set so do not display X
+					xText.text = "";
+				}
+				else {
+					horizontalCenterText.text = "";
+				}
+
+			}
+
+			/**
+			 * Updates the display with the value of the left constraint
+			 * */
+			protected function updateLeftConstraint():void {
+				var value:String;
+				var leftValue:Object;
+				
+				if (!isVisualElement) {
+					leftText.text = "";
+					return;
+				}
+				
+				leftValue = element.left;
+
+				/**
+				 * If left is set then set x to nothing
+				 * If left and right are set then set width to nothing
+				 * If horizontalCenter is set than set left and right to nothing
+				 * Otherwise set left to nothing
+				 * */
+				if (leftValue!=null) {
+					leftText.text = String(leftValue);
+
+					// if left and right are set then hide width
+					if (element.right) {
+						widthText.text = "";
+					}
+
+					// left is set so do not display X
+					xText.text = "";
+				}
+				else {
+					leftText.text = "";
+				}
+
+			}
+
+			/**
+			 * Updates the display with the value of the right position
+			 * */
+			protected function updateRightConstraint():void {
+				var value:String;
+				var rightValue:Object;
+				
+				if (!isVisualElement) {
+					rightText.text = "";
+					return;
+				}
+				
+				rightValue = element.right;
+
+				/**
+				 * If horizontalCenter is set then set right to nothing
+				 * If left and right are set then set width to nothing
+				 * If horizontalCenter is set than set left and right to nothing
+				 * Otherwise set right to nothing
+				 * */
+				if (rightValue!=null) {
+					rightText.text = String(rightValue);
+
+					// if left and right are set then hide width
+					if (element.left) {
+						widthText.text = "";
+					}
+
+					// right is set so do not display X
+					xText.text = "";
+				}
+				else {
+					rightText.text = "";
+				}
+
+			}
+
+			/**
+			 * Updates the display with the value of the top position
+			 * */
+			protected function updateTopConstraint():void {
+				var value:String;
+				var topValue:Object;
+				
+				if (!isVisualElement) {
+					topText.text = "";
+					return;
+				}
+
+				topValue = element.top;
+
+				/**
+				 * If top is set then set Y to nothing
+				 * If top and bottom are set then set height to nothing
+				 * If verticalCenter is set then set top to nothing
+				 * Otherwise set top to nothing
+				 * */
+				if (topValue != null) {
+					topText.text = String(topValue);
+
+					// if top and bottom are set then do not display height
+					if (element.bottom!=null) {
+						heightText.text = "";
+					}
+
+					// top is set so do not display Y
+					yText.text = "";
+				}
+				else {
+					topText.text = "";
+				}
+
+			}
+
+			/**
+			 * Updates the display with the value of the vertical center position
+			 * */
+			protected function updateVerticalCenterConstraint():void {
+				var verticalCenterValue:Object;
+				
+				if (!isVisualElement) {
+					verticalCenterText.text = "";
+					return;
+				}
+				
+				verticalCenterValue = element.verticalCenter;
+				
+				if (verticalCenterValue!=null) {
+					verticalCenterText.text = String(verticalCenterValue);
+
+					// vertical center is set so do not display Y
+					yText.text = "";
+				}
+				else {
+					verticalCenterText.text = "";
+				}
+
+			}
+
+			/**
+			 * Updates the visibility of the rulers and text boxes in the contraints container
+			 * and checks or unchecks the constraint checkboxes
+			 * */
+			protected function updateVisibleControls():void {
+				var visible:Boolean = true;
+
+				topConstraint.selected = topRule.visible = topText.visible = (isVisualElement && element.top != null) ? visible : !visible;
+				bottomConstraint.selected = bottomRule.visible = bottomText.visible = (isVisualElement && element.bottom != null) ? visible : !visible;
+				leftConstraint.selected = leftRule.visible = leftText.visible = (isVisualElement && element.left != null) ? visible : !visible;
+				rightConstraint.selected = rightRule.visible = rightText.visible = (isVisualElement && element.right != null) ? visible : !visible;
+
+				horizontalCenterConstraint.selected = horizontalCenterRule.visible = horizontalCenterText.visible = (isVisualElement && element.horizontalCenter != null) ? visible : !visible;
+				verticalCenterConstraint.selected = verticalCenterRule.visible = verticalCenterText.visible = (isVisualElement && element.verticalCenter != null) ? visible : !visible;
+				baselineConstraint.selected = baselineRule.visible = baselineText.visible = (isVisualElement && element.baseline != null) ? visible : !visible;
+				
+				// update position of preview target
+				copyConstraints(constrainedTarget, element, 0);
+			}
+			
+			/**
+			 * Updates the preview target
+			 * */
+			protected function copyConstraints(target:IVisualElement, source:IVisualElement, setValue:Object=null):void {
+				setValue = setValue!=null ? 1 : setValue; // this doesn't make sense
+				
+				// this throws an error when target is system manager
+				// we should disable constraints if not supported
+				if (element == null) return; 
+				
+				target.top = (element.top != null) ? setValue || element.top : undefined;
+				target.bottom = (element.bottom != null) ? setValue || element.bottom : undefined;
+				target.left = (element.left != null) ? setValue || element.left : undefined;
+				target.right = (element.right != null) ? setValue || element.right : undefined;
+				
+				target.horizontalCenter = (element.horizontalCenter != null) ? setValue || element.horizontalCenter : undefined;
+				target.verticalCenter = (element.verticalCenter != null) ? setValue || element.verticalCenter : undefined;
+				target.baseline = (element.baseline != null) ? setValue || element.baseline : undefined;
+				
+				if (target.top==null 
+					&& target.bottom==null 
+					&& target.left==null 
+					&& target.right==null 
+					&& target.horizontalCenter==null 
+					&& target.verticalCenter==null 
+					&& target.baseline==null) {
+					target.visible = false;
+				}
+				else {
+					target.visible = true;
+				}
+			}
+
+			/**
+			 * Updates the display with the value of the width
+			 * */
+			protected function updateWidthProperty():void {
+				var isPercentWidth:Boolean;
+
+				// If left is set and right is set then set to nothing
+				if (isVisualElement && element.left != null && element.right != null) {
+					widthText.text = "";
+				}
+				else {
+					displayCorrectWidth();
+				}
+			}
+
+			/**
+			 * Updates the displayed with the value of the X position
+			 * */
+			protected function updateXProperty():void {
+
+				/**
+				 * If horizontalCenter is set then set to nothing
+				 * If left is set then set to nothing
+				 * If right is set then set to nothing
+				 * */
+				if (hasHorizontalConstraints) {
+					xText.text = "";
+				}
+				else {
+					xText.text = String(target.x);
+				}
+			}
+
+			/**
+			 * Updates the display with the value of the Y position
+			 * */
+			protected function updateYProperty():void {
+
+				/**
+				 * If verticalCenter is set then set to nothing
+				 * If top is set then set to nothing
+				 * If bottom is set then set to nothing
+				 *
+				 * if int is 0 will it return false? if (target.top) vs if (target.top!=null)
+				 * */
+				if (hasVerticalConstraints) {
+					// hide Y text
+					yText.text = "";
+				}
+				else {
+					yText.text = String(target.y);
+				}
+
+			}
+			
+			public function clearForm():void {
+				xText.text = "";
+				yText.text = "";
+				
+				topText.text = "";
+				leftText.text = "";
+				rightText.text = "";
+				bottomText.text = "";
+				verticalCenterText.text = "";
+				horizontalCenterText.text = "";
+				baselineText.text = "";
+				
+				widthText.text = "";
+				heightText.text = "";
+				
+				topConstraint.selected = false;
+				leftConstraint.selected = false;
+				rightConstraint.selected = false;
+				bottomConstraint.selected = false;
+				verticalCenterConstraint.selected = false;
+				horizontalCenterConstraint.selected = false;
+				baselineConstraint.selected = false;
+				
+				topRule.visible = false;
+				leftRule.visible = false;
+				rightRule.visible = false;
+				bottomRule.visible = false;
+				verticalCenterRule.visible = false;
+				horizontalCenterRule.visible = false;
+				baselineRule.visible = false;
+				
+			}
+			
+			/**
+			 * Get current target
+			 * */
+			protected function targetChangeHandler(event:RadiateEvent):void {
+				target = event.selectedItem;
+			}
+			
+			/**
+			 * Updates the view when a property is changed externally
+			 * */
+			protected function propertyChangeHandler(event:RadiateEvent):void {
+				var properties:Array = event.properties;
+				var length:int = event.properties.length;
+				
+				if (target!=event.selectedItem) {
+					target = event.selectedItem;
+				}
+				
+				if (!target) return;
+				
+				for (var i:int;i<length;i++) {
+					if (relevantProperties.indexOf(properties[i])!=-1) {
+						updateView();
+						break;
+					}
+				}
+			}
+			
+			protected function historyChangeHandler(event:RadiateEvent):void {
+				if (event.newIndex==-1 || !event.historyEventItem) return;
+				var properties:Array = event.historyEventItem.properties;
+				var length:int = properties ? properties.length : 0;
+				
+				if (!target) return;
+				
+				for (var i:int;i<length;i++) {
+					if (relevantProperties.indexOf(properties[i])!=-1) {
+						updateView();
+						break;
+					}
+				}
+			}
+			
+			private const relevantProperties:Array = [ "width", "height", "percentWidth", "percentHeight", "x",
+													"y", "top", "left", "right", "bottom", "verticalCenter",
+													"horizontalCenter", "baseline"]
+			
+		]]>
+	</fx:Script>
+
+	<fx:Declarations>
+		<!--<handlers:EventHandler eventName="{SearchTextInput.CLEAR_TEXT}"
+							   targets="{[
+							   topText, 
+							   bottomText, 
+							   rightText, 
+							   leftText, 
+							   widthText, 
+							   heightText, 
+							   xText, 
+							   yText,
+							   verticalCenterText, 
+							   horizontalCenterText, 
+							   baselineText]}"
+							   keepEvent="true"
+							   id="clearTextHandler">
+			<handlers:eventStart>
+				<![CDATA[
+				applyPropertiesToTargetHandler(event.currentTarget.event);
+				]]>
+			</handlers:eventStart>
+		</handlers:EventHandler>-->
+		
+		<handlers:EventHandler eventName="{FlexEvent.ENTER}"
+							   targets="{[
+							   topText, 
+							   bottomText, 
+							   rightText, 
+							   leftText, 
+							   widthText, 
+							   heightText, 
+							   xText, 
+							   yText,
+							   verticalCenterText, 
+							   horizontalCenterText, 
+							   baselineText]}"
+							   keepEvent="true"
+							   id="enterHandler">
+			<handlers:eventStart>
+				<![CDATA[
+				applyPropertiesToTargetHandler(event.currentTarget.event);
+				]]>
+			</handlers:eventStart>
+		</handlers:EventHandler>
+		
+		<!-- FOCUS OUT HANDLER 
+		
+		named focusOutHandler2 because conflict between UIComponent handler of the same name
+		-->
+		<handlers:EventHandler eventName="{FocusEvent.FOCUS_OUT}"
+							   targets="{[
+							   topText, 
+							   bottomText, 
+							   rightText, 
+							   leftText, 
+							   widthText, 
+							   heightText, 
+							   xText, 
+							   yText,
+							   verticalCenterText, 
+							   horizontalCenterText, 
+							   baselineText]}"
+							   keepEvent="true"
+							   id="focusOutHandler2">
+			<handlers:eventStart>
+				<![CDATA[
+				applyPropertiesToTargetHandler(event.currentTarget.event);
+				]]>
+			</handlers:eventStart>
+		</handlers:EventHandler>
+
+		<handlers:EventHandler eventName="{FocusEvent.FOCUS_IN}"
+							   targets="{[
+							   topText, 
+							   bottomText, 
+							   rightText, 
+							   leftText, 
+							   widthText, 
+							   heightText, 
+							   xText, 
+							   yText,
+							   verticalCenterText, 
+							   horizontalCenterText, 
+							   baselineText]}"
+							   keepEvent="true"
+							   id="focusInEventHandler">
+			<handlers:eventStart>
+				<![CDATA[
+				selectInputText(event.currentTarget.event);
+				]]>
+			</handlers:eventStart>
+		</handlers:EventHandler>
+
+		
+		<handlers:EventHandler eventName="{MouseEvent.CLICK}"
+							   targets="{[
+							   leftConstraint, 
+							   rightConstraint, 
+							   bottomConstraint, 
+							   topConstraint, 
+							   baselineConstraint,
+							   horizontalCenterConstraint, 
+							   verticalCenterConstraint]}"
+							   keepEvent="true"
+							   id="clickHandler">
+			
+			<handlers:eventStart>
+					<![CDATA[
+					constraintHandler(event.currentTarget.event);
+					]]>
+			</handlers:eventStart>
+			
+		</handlers:EventHandler>
+		
+		<s:SolidColorStroke id="stroke1" weight="1" color="#00AA00"/>
+		
+	</fx:Declarations>
+	
+	<!-- NAMING CONVENTION IS USED -->
+	
+	<!-- POSITIONING -->
+	<s:Group horizontalCenter="0" y="30" 
+			 styleName="constraintStyles">
+		<s:TextInput id="widthText" 
+					 fontSize="12"
+					 styleName="inputStyles"
+					 width="70" x="44" y="0"
+					 restrict="0-9%"
+					 name="width:Number"/>
+		<s:TextInput id="heightText"
+					 fontSize="12"
+					 styleName="inputStyles" 
+					 width="70" x="174" y="0"
+					 restrict="0-9%"
+					 name="height:Number"/>
+		<s:TextInput id="xText" 
+					 fontSize="12"
+					 styleName="inputStyles"
+					 width="70" x="44" y="35"
+					 restrict="0-9-"
+					 name="x:Number"/>
+		<s:TextInput id="yText" 
+					 fontSize="12"
+					 styleName="inputStyles"
+					 width="70" x="174" y="35"
+					 restrict="0-9-"
+					 name="y:Number"/>
+		<s:Label text="Height:" 
+				 styleName="constraintStyles"
+				 x="126" y="7"/>
+		<s:Label text="Width:" 
+				 styleName="constraintStyles"
+				 x="2" y="7"/>
+		<s:Label text="X:" 
+				 styleName="constraintStyles"
+				 x="30" y="42"/>
+		<s:Label text="Y:" 
+				 styleName="constraintStyles"
+				 x="160" y="42"/>
+	</s:Group>
+
+	
+	<!-- CONSTRAINTS PANEL -->
+	<s:BorderContainer id="constraintsContainer" 
+					   styleName="constraintStyles"
+					   horizontalCenter="0"
+					   y="119"
+					   borderVisible="false">
+
+		<!-- CONSTRAINTS -->
+		<s:TextInput id="topText"
+					 styleName="inputStyles"
+					 width="40" x="205" y="47"
+					 restrict="0-9-"
+					 name="top:style"/>
+		<s:TextInput id="verticalCenterText"
+					 styleName="inputStyles"
+					 width="40" x="205" y="95"
+					 restrict="0-9-"
+					 name="verticalCenter:style"/>
+		<s:TextInput id="bottomText"
+					 styleName="inputStyles"
+					 width="40" x="205" y="143"
+					 restrict="0-9"
+					 name="bottom:style"/>
+		<s:TextInput id="baselineText"
+					 styleName="inputStyles"
+					 width="40" x="205" y="165"
+					 restrict="0-9"
+					 visible="false"
+					 name="baseline:style"/>
+		
+		<s:TextInput id="rightText"
+					 styleName="inputStyles"
+					 width="40" x="147" y="189"
+					 restrict="0-9"
+					 name="right:style"/>
+		<s:TextInput id="horizontalCenterText"
+					 styleName="inputStyles"
+					 width="40" x="99" y="189"
+					 restrict="0-9"
+					 name="horizontalCenter:style"/>
+		<s:TextInput id="leftText"
+					 styleName="inputStyles"
+					 width="40" x="50" y="189"
+					 restrict="0-9"
+					 name="left:style"/>
+		
+		<s:CheckBox id="leftConstraint"
+					toolTip="Left"
+					x="64" y="8"/>
+		<s:CheckBox id="horizontalCenterConstraint"
+					toolTip="Horizontal Center"
+					x="114" y="8"/>
+		<s:CheckBox id="bottomConstraint"
+					toolTip="Bottom"
+					x="23" y="145"/>
+		<s:CheckBox id="topConstraint"
+					toolTip="Top"
+					x="23" y="48"/>
+		<s:CheckBox id="verticalCenterConstraint"
+					toolTip="Vertical Center"
+					x="23" y="97"/>
+		<s:CheckBox id="rightConstraint"
+					toolTip="Right"
+					x="162" y="8"/>
+		<s:CheckBox id="baselineConstraint" 
+					toolTip="Baseline"
+					visible="false"
+					x="23" y="165"/>
+
+		<!-- CONSTRAINTS PANEL BOX -->
+		<s:BorderContainer height="150" width="150" 
+						   x="44" y="31"
+						   borderAlpha=".4">
+
+			<s:BorderContainer borderColor="#9E9E9E"
+							   height="98" width="98" 
+							   x="25" y="25"
+							   borderVisible="true" 
+							   borderWeight="2">
+
+				<s:Group id="constrainedTarget" 
+						 visible="false"
+						 width="40" height="20">
+					
+					<s:Rect width="100%" height="100%" 
+							x="0" y="0">
+						<s:fill>
+							<s:SolidColor color="gray"/>
+						</s:fill>
+					</s:Rect>
+					
+				</s:Group>
+				
+			</s:BorderContainer>
+			
+			<!-- HORIZONTAL -->
+			<s:Line id="topRule" 
+					  left="0" right="0" 
+					  top="25"
+					  width="100%"
+					  stroke="{stroke1}"
+					  visible="false"/>
+			<s:Line id="verticalCenterRule"
+					  left="0" right="0" 
+					  width="100%"
+					  verticalCenter="0"
+					  stroke="{stroke1}"
+					  visible="false"/>
+			<s:Line id="bottomRule"
+					  left="0" right="0" 
+					  bottom="25" 
+					  width="100%"
+					  stroke="{stroke1}"
+					  visible="false"/>
+			<s:Line id="baselineRule"
+					left="0" right="0" 
+					bottom="4" 
+					width="100%"
+					stroke="{stroke1}"
+					visible="false"/>
+			
+			<!-- VERTICAL -->
+			<s:Line id="leftRule"
+					  bottom="0" left="25" 
+					  top="0"
+					  height="100%"
+					  stroke="{stroke1}"
+					  visible="false"/>
+			<s:Line id="horizontalCenterRule"
+					  bottom="0" horizontalCenter="0" 
+					  top="0"
+					  height="100%"
+					  stroke="{stroke1}"
+					  visible="false"/>
+			<s:Line id="rightRule"
+					  bottom="0" right="25" 
+					  top="0"
+					  height="100%"
+					  stroke="{stroke1}"
+					  visible="false"/>
+		</s:BorderContainer>
+
+	</s:BorderContainer>
+<!--
+	<s:Line left="23.5" right="23.5"
+			y="106" alpha=".5">
+		<s:stroke>
+			<s:SolidColorStroke/>
+		</s:stroke>
+	</s:Line>
+	
+	<s:Line left="23.5" right="23.5"
+			y="10" alpha=".5">
+		<s:stroke>
+			<s:SolidColorStroke/>
+		</s:stroke>
+	</s:Line>-->
+	
+	<s:Label left="0"
+			 y="5"
+			 text="Size and Position" 
+			 color="#585858"
+			 width="100%" 
+			 styleName="formItem" 
+			 />
+
+	<s:Label text="Constraints" 
+			 left="0"
+			 y="101"
+			 color="#585858"
+			 width="100%" 
+			 styleName="formItem" 
+			 />
+
+	<s:ComboBox id="layoutLayoutComboBox"
+				styleName="constraintStyles"
+				horizontalCenter="0"
+				includeInLayout="false"
+				visible="false" width="250" y="346"
+				change="applyPropertiesToTargetHandler(event)"
+				focusOut="applyPropertiesToTargetHandler(event)">
+		<s:dataProvider>
+			<mx:ArrayList>
+				<!--<fx:Object label=""
+						   name="layout" type="ClassDefinition"/>-->
+				<fx:Object label="spark.layouts::BasicLayout"
+						   name="layout" type="ClassDefinition"/>
+				<fx:Object label="spark.layouts::HorizontalLayout"
+						   name="layout" type="ClassDefinition"/>
+				<fx:Object label="spark.layouts::TileLayout"
+						   name="layout" type="ClassDefinition"/>
+				<fx:Object label="spark.layouts::VerticalLayout"
+						   name="layout" type="ClassDefinition"/>
+			</mx:ArrayList>
+		</s:dataProvider>
+	</s:ComboBox>
+
+</s:Group>

http://git-wip-us.apache.org/repos/asf/flex-radii8/blob/f370bfcf/Radii8Library/src/com/flexcapacitor/views/panels/DocumentationInspector.mxml
----------------------------------------------------------------------
diff --git a/Radii8Library/src/com/flexcapacitor/views/panels/DocumentationInspector.mxml b/Radii8Library/src/com/flexcapacitor/views/panels/DocumentationInspector.mxml
new file mode 100644
index 0000000..d394cd0
--- /dev/null
+++ b/Radii8Library/src/com/flexcapacitor/views/panels/DocumentationInspector.mxml
@@ -0,0 +1,160 @@
+<?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:c="com.flexcapacitor.controls.*"
+		 xmlns:handlers="com.flexcapacitor.handlers.*" 
+		 xmlns:collections="com.flexcapacitor.effects.collections.*"
+		 xmlns:components="com.flexcapacitor.components.*" 
+		 xmlns:flexiframe="com.google.code.flexiframe.*" 
+		 
+		 minWidth="200" 
+		 minHeight="100"
+		 implements="com.flexcapacitor.views.IInspector"
+		 >
+	
+	<fx:Script>
+		<![CDATA[
+			import com.flexcapacitor.controller.Radiate;
+			import com.flexcapacitor.events.RadiateEvent;
+			import com.flexcapacitor.model.MetaData;
+			import com.flexcapacitor.utils.DisplayObjectUtils;
+			
+			import flash.net.navigateToURL;
+			
+			
+			/**
+			 * Reference to Radiate
+			 * */
+			public var radiate:Radiate;
+			
+			public var lastURL:String;
+			public var declaredBy:String;
+			
+			public function activate():void {
+				radiate = Radiate.getInstance();
+				
+				radiate.addEventListener(RadiateEvent.PROPERTY_SELECTED, propertySelectedHandler, false, 0, true);
+			}
+			
+			public function deactivate():void {
+				if (radiate) {
+					radiate.removeEventListener(RadiateEvent.PROPERTY_SELECTED, propertySelectedHandler);
+				}
+			}
+			 
+			protected function propertySelectedHandler(event:RadiateEvent):void {
+				var metadata:MetaData = MetaData(event.selectedItem);
+				var isVisible:Boolean = DisplayObjectUtils.getGreatestVisibilityDisplayList(this);
+				var path:String = "";
+				var prefix:String = "";
+				
+				lastURL  = Radiate.getURLToHelp(metadata);
+				declaredBy = metadata.declaredBy;
+				
+				if (!isVisible || !showDocsCheckbox.selected) {
+					
+					textURL.text = "";
+					return;
+				}
+				
+				updateDocumentation();
+				
+			}
+			
+			protected function showDocsCheckbox_changeHandler(event:Event):void {
+				
+				updateDocumentation();
+			}
+			
+			protected function openInSeparateWindow_changeHandler(event:Event):void {
+				
+				updateDocumentation();
+			}
+			
+			public function updateDocumentation():void {
+				
+				if (showDocsCheckbox.selected) {
+					
+					if (openInSeparateWindow.selected) {
+						var request:URLRequest = new URLRequest(lastURL);
+						navigateToURL(request, "asdocs");
+						
+						if (docsFrame.source!="" || docsFrame.source!="about:blank") {
+							docsFrame.source = "";
+						}
+					}
+					else {
+						docsFrame.source = lastURL;
+					}
+					
+					if (showURL.selected) {
+						textURL.text = lastURL;
+					}
+					else {
+						textURL.text = declaredBy;
+					}
+				}
+				else {
+					docsFrame.source = "about:blank";
+					textURL.text = "";
+				}
+			}
+			
+			protected function showURL_changeHandler(event:Event):void {
+				if (showURL.selected) {
+					textURL.text = lastURL;
+				}
+				else {
+					textURL.text = declaredBy;
+				}
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:HGroup left="0" right="0" 
+			  width="100%"
+			  clipAndEnableScrolling="true" 
+			  paddingLeft="6" 
+			  paddingRight="10"
+			  >
+		<s:TextInput id="textURL" 
+					 width="100%" 
+					 color="#A6a5a5" 
+					 borderColor="#A5A5A5"
+					 borderVisible="false"
+					 focusAlpha="0"
+					 prompt="No documentation available. Select a property, style or event."/>
+		<s:CheckBox id="showURL" label="Show URL" 
+					change="showURL_changeHandler(event)"/>
+		<s:CheckBox id="openInSeparateWindow" label="Open in Window" 
+					change="openInSeparateWindow_changeHandler(event)"/>
+		<s:CheckBox id="showDocsCheckbox" 
+					label="Enabled" 
+					change="showDocsCheckbox_changeHandler(event)"
+					selected="true"
+					/>
+	</s:HGroup>
+	
+	<flexiframe:IFrame id="docsFrame" top="28" width="100%" height="100%" />
+	
+</s:Group>

http://git-wip-us.apache.org/repos/asf/flex-radii8/blob/f370bfcf/Radii8Library/src/com/flexcapacitor/views/panels/DocumentsInspector.mxml
----------------------------------------------------------------------
diff --git a/Radii8Library/src/com/flexcapacitor/views/panels/DocumentsInspector.mxml b/Radii8Library/src/com/flexcapacitor/views/panels/DocumentsInspector.mxml
new file mode 100644
index 0000000..5d4a93e
--- /dev/null
+++ b/Radii8Library/src/com/flexcapacitor/views/panels/DocumentsInspector.mxml
@@ -0,0 +1,600 @@
+<?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:views="com.flexcapacitor.views.*"
+		 xmlns:c="com.flexcapacitor.controls.*"
+		 xmlns:fc="com.flexcapacitor.effects.popup.*"
+		 xmlns:handlers="com.flexcapacitor.handlers.*" 
+		 xmlns:collections="com.flexcapacitor.effects.collections.*"
+		 
+		 width="100%" 
+		 height="100%"
+		 implements="com.flexcapacitor.views.IInspector" 
+		 >
+	
+	<fx:Script>
+		<![CDATA[
+			import com.flexcapacitor.controller.Radiate;
+			import com.flexcapacitor.events.RadiateEvent;
+			import com.flexcapacitor.model.DocumentData;
+			import com.flexcapacitor.model.IDocument;
+			import com.flexcapacitor.model.IDocumentData;
+			import com.flexcapacitor.model.IProject;
+			import com.flexcapacitor.views.IInspector;
+			import com.flexcapacitor.views.windows.DeleteDocumentWindow;
+			import com.flexcapacitor.views.windows.ImportWindow;
+			
+			import mx.core.IVisualElement;
+			import mx.events.FlexEvent;
+			
+			import spark.components.RadioButtonGroup;
+			import spark.events.IndexChangeEvent;
+			
+			private var rootDisplayObject:DisplayObject;
+			private var displayList:Array = [];
+			
+			[Bindable]
+			private var radiate:Radiate;
+			private var designDocument:IEventDispatcher;
+			
+			public var project:IProject;
+			
+
+			public function activate():void {
+				radiate = Radiate.instance;
+				
+				radiate.addEventListener(RadiateEvent.PROJECT_CHANGE, projectChangeHandler, false, 0, true);
+				radiate.addEventListener(RadiateEvent.DOCUMENT_ADDED, documentAddedHandler, false, 0, true);
+				radiate.addEventListener(RadiateEvent.DOCUMENT_CHANGE, documentChangeHandler, false, 0, true);
+				radiate.addEventListener(RadiateEvent.DOCUMENT_OPENING, documentOpeningHandler, false, 0, true);
+				radiate.addEventListener(RadiateEvent.DOCUMENT_REMOVED, documentRemovedHandler, false, 0, true);
+				radiate.addEventListener(RadiateEvent.DOCUMENT_DELETED, documentRemovedHandler, false, 0, true);
+				
+				update();
+			}
+			
+			public function deactivate():void {
+				if (radiate) {
+					radiate.removeEventListener(RadiateEvent.PROJECT_CHANGE, projectChangeHandler);
+					radiate.removeEventListener(RadiateEvent.DOCUMENT_ADDED, documentAddedHandler);
+					radiate.removeEventListener(RadiateEvent.DOCUMENT_CHANGE, documentChangeHandler);
+					radiate.removeEventListener(RadiateEvent.DOCUMENT_OPENING, documentOpeningHandler);
+					radiate.removeEventListener(RadiateEvent.DOCUMENT_REMOVED, documentRemovedHandler);
+					radiate.removeEventListener(RadiateEvent.DOCUMENT_DELETED, documentRemovedHandler);
+				}
+			}
+			
+			public function update():void {
+				
+				if (radiate.selectedProject) {
+					setProjectsDocuments(radiate.selectedProject);
+				}
+				
+				if (radiate.selectedDocument && radiate.selectedDocument) {
+					selectDocument(radiate.selectedDocument);
+				}
+			}
+			
+			/**
+			 * Label of the list
+			 * */
+			public function labelFunction(data:Object):String {
+				return data && data.document ? data.document.name : data.name;
+			}
+			
+			protected function projectChangeHandler(event:RadiateEvent):void {
+				if (event.selectedItem as IProject) {
+					setProjectsDocuments(event.selectedItem as IProject);
+				}
+			}
+			
+			/**
+			 * Document was changed from outside of this inspector. Update to reflect that. 
+			 * */
+			protected function documentChangeHandler(event:RadiateEvent):void {
+				var iDocument:IDocumentData = event.selectedItem as IDocumentData;
+				//var documentData:IDocumentData = iDocument.documentData;
+				
+				/*
+				if (document && (radiate.project!=document.project || documents.length==0)) {
+					setProjectsDocuments(document.project);
+				}
+				else if (document.project && document.project.documents.length != radiate.selectedDocuments.length) {
+					setProjectsDocuments(document.project);
+				}
+				else if (documents.length==0) {
+					setProjectsDocuments(document.project);
+				}*/
+				
+				var selectedDocument:IDocumentData = list.selectedItem as IDocumentData;
+				
+				if (selectedDocument && iDocument) {
+					if (selectedDocument.uid != iDocument.uid) {
+						selectDocument(iDocument);
+					}
+				}
+				
+				if (selectedDocument==null && iDocument) {
+					selectDocument(iDocument);
+				}
+				/*
+				if (selectedDocument) {
+					radiate.dispatchObjectSelectedEvent(selectedDocument);
+				}*/
+			}
+
+			/**
+			 * Update document
+			 * */
+			private function selectDocument(iDocument:IDocumentData):void {
+				var jDocument:IDocumentData;
+				list.validateNow();
+				
+				if (list.selectedItem != iDocument) {
+					
+					var length:int = documentsCollection.length;
+					for (var i:int;i<length;i++) {
+						jDocument = IDocumentData(documentsCollection.getItemAt(i));
+						
+						
+						if (jDocument.uid==iDocument.uid) {
+							list.selectedItem = IDocumentData(documentsCollection.getItemAt(i));
+							break;
+						}
+					}
+				}
+			}
+			
+			/**
+			 * Update documents
+			 * */
+			private function setProjectsDocuments(project:IProject, refresh:Boolean = false):void {
+				var projectDocuments:Array = project ? project.documents : [];
+				var iDocument:IDocumentData = list.selectedItem;
+				var uid:String;
+				
+				if (iDocument) {
+					uid = iDocument.uid;
+				}
+				else {
+					iDocument = radiate.getVisibleDocument();
+					if (iDocument==null) {
+						iDocument = radiate.selectedDocument;
+					}
+					uid = iDocument ? iDocument.uid : null;
+				}
+				
+				if (documentsCollection.source != projectDocuments) {
+					documentsCollection.source = projectDocuments;
+					
+					documentsCollection.refresh();
+					
+					// must call validate now so selected index doesn't revert if a new project is selected
+					list.validateNow();
+					
+					if (uid) {
+						selectDocumentByUID(uid);
+					}
+				}
+				else if (documentsCollection.source.length != project.documents.length) {
+					documentsCollection.refresh();
+					
+					if (uid) {
+						selectDocumentByUID(uid);
+					}
+				}
+				else if (refresh) {
+					documentsCollection.refresh();
+					
+					if (uid) {
+						selectDocumentByUID(uid);
+					}
+				}
+			}
+			
+			/**
+			 * Add new document
+			 * */
+			protected function newDocumentIcon_clickHandler(event:MouseEvent):void {
+				var newDocument:IDocument = radiate.addDocument(radiate.createDocument(), radiate.selectedProject, true, true);
+				radiate.openDocument(newDocument, DocumentData.INTERNAL_LOCATION, true); 
+			}
+			
+			protected function saveDocumentIcon_clickHandler(event:MouseEvent):void {
+				//radiate.saveProject(radiate.project);
+				var document:IDocument = list.selectedItem as IDocument;
+				
+				if (document) {
+					var saveRemote:Boolean = radiate.isUserConnected && radiate.isUserLoggedIn;
+					var savedLocation:String = saveRemote ? DocumentData.REMOTE_LOCATION : DocumentData.LOCAL_LOCATION;
+					
+					var savedLocally:Boolean = radiate.saveDocument(document, savedLocation);
+					
+					//Radiate.log.info("Saved locally: " + savedLocally);
+				}
+			}
+			
+			/**
+			 * User selected a document in the list
+			 * */
+			protected function list_changeHandler(event:IndexChangeEvent):void {
+				var documentData:IDocumentData = list.selectedItem ? IDocumentData(list.selectedItem) : null;
+				
+				if (documentData) {
+					if (documentData.isOpen) {
+						radiate.showDocument(documentData);
+					}
+					else {
+						//radiate.openDocumentByData(documentData);
+					}
+				}
+				
+				if (documentData) {
+					radiate.dispatchObjectSelectedEvent(documentData);
+				}
+			}
+			
+			protected function documentAddedHandler(event:RadiateEvent):void {
+				//event.preventDefault();
+				//setProjectsDocuments(radiate.project);
+				
+				setProjectsDocuments(radiate.selectedProject, true);
+			}
+			
+			protected function documentOpeningHandler(event:RadiateEvent):void {
+				//event.preventDefault();
+				//setProjectsDocuments(radiate.project);
+			}
+			
+			
+			protected function deleteDocumentIcon_clickHandler(event:MouseEvent):void {
+				var selectedDocument:IDocument = list.selectedItem as IDocument;
+				
+				if (selectedDocument) {
+					radiate.removeDocument(selectedDocument);
+				}
+				else {
+					Radiate.log.info("Please select a document");
+				}
+			}
+			
+			protected function documentRemovedHandler(event:Event):void {
+				setProjectsDocuments(radiate.selectedProject, true);
+			}
+			
+			
+			protected function closeDocumentIcon_clickHandler(event:MouseEvent):void {
+				var selectedDocument:IDocument = list.selectedItem as IDocument;
+				
+				if (selectedDocument) {
+					radiate.closeDocument(selectedDocument);
+				}
+				else {
+					Radiate.log.info("Please select a document");
+				}
+			}
+			
+			protected function openDocumentIcon_clickHandler(event:MouseEvent):void {
+				var selectedDocument:IDocument = list.selectedItem as IDocument;
+				
+				if (selectedDocument) {
+					radiate.openDocument(selectedDocument, DocumentData.REMOTE_LOCATION, true);
+				}
+				else {
+					Radiate.log.info("Please select a document");
+				}
+			}
+			
+			protected function importDocumentIcon_clickHandler(event:MouseEvent):void {
+				var selectedDocument:IDocument = list.selectedItem as IDocument;
+				
+				if (selectedDocument) {
+					//radiate.importMXMLDocument(radiate.selectedProject, selectedDocument, code);
+				}
+				else {
+					Radiate.log.info("Please select a document");
+				}
+			}
+			
+			protected function openpopup1_closeHandler(event:Event):void {
+				var selectedDocument:IDocument = list.selectedItem as IDocument;
+				var importWindow:ImportWindow = ImportWindow(openPopUp.popUp);
+				var code:String = importWindow.code;
+				var action:String = importWindow.action;
+				var type:String = RadioButtonGroup(importWindow.importLocation).selectedValue as String;
+				
+				if (action==ImportWindow.IMPORT) {
+					if (type==ImportWindow.NEW_DOCUMENT) {
+						radiate.importMXMLDocument(radiate.selectedProject, null, null, code);
+					}
+					else if (type==ImportWindow.CURRENT_DOCUMENT && selectedDocument) {
+						radiate.importMXMLDocument(radiate.selectedProject, selectedDocument, null, code);
+					}
+					else if (type==ImportWindow.CURRENT_SELECTION && radiate.target is IVisualElement) {
+						if (radiate.target is IVisualElement) {
+							radiate.importMXMLDocument(radiate.selectedProject, selectedDocument, IVisualElement(radiate.target), code);
+						}
+						Radiate.log.info("Please select a visual element");
+					}
+					else {
+						Radiate.log.info("Please select a document");
+					}
+				}
+			}
+
+			/**
+			 * Pressing enter would retrieve the style value.
+			 * 
+			 * This is no longer necessary since values are updated on property change events. 
+			 * */
+			protected function searchPropertyInput_enterHandler(event:FlexEvent):void {
+				var searchText:String = filterInput.text;
+				var item:XML;
+				
+			}
+			
+			/**
+			 * Move from search text input to properties grid on down arrow key
+			 * */
+			protected function filterInput_keyUpHandler(event:KeyboardEvent):void {
+				/*if (event.keyCode==Keyboard.DOWN) {
+					propertiesGrid.setFocus();
+					if (propertiesGrid.selectedIndex ==-1) {
+						propertiesGrid.setSelectedIndex(0);
+					}
+				}*/
+			}
+			
+			protected function list_doubleClickHandler(event:MouseEvent):void {
+				var documentData:IDocument = list.selectedItem ? IDocument(list.selectedItem) : null;
+				
+				if (documentData && !documentData.isOpen) {
+					radiate.openDocumentByData(documentData, true);
+				}
+			}
+			
+			private function selectDocumentByUID(uid:String):void {
+				var length:int = documentsCollection.length;
+				for (var i:int;i<length;i++) {
+					var iDocumentData:IDocumentData = IDocumentData(documentsCollection.getItemAt(i));
+					if (iDocumentData.uid==uid) {
+						list.selectedItem = iDocumentData;
+						break;
+					}
+				}
+				
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:ArrayCollection id="documentsCollection" />
+		
+		
+		
+		<!-- SORT BY NAME -->
+		<handlers:EventHandler eventName="creationComplete" >
+			<collections:SortCollection target="{documentsCollection}" 
+								 fields="{['name']}" />
+		</handlers:EventHandler>
+		
+		<!-- FILTER BY NAME -->
+		<handlers:EventHandler eventName="change" 
+							   targets="{[filterInput,showAllItemsOnEmpty,caseSensitive,searchAtStart]}"
+							   >
+			<collections:FilterCollection target="{documentsCollection}" 
+								   source="{filterInput}" 
+								   sourcePropertyName="text"
+								   fieldName="name"
+								   showAllItemsOnEmpty="{showAllItemsOnEmpty.selected}"
+								   caseSensitive="{caseSensitive.selected}"
+								   searchAtStart="{searchAtStart.selected}"
+								   />
+		</handlers:EventHandler>
+		
+		
+		
+		<!--- show import document popup -->		
+		<handlers:EventHandler eventName="click" target="{importDocumentIcon}">
+			<fc:OpenPopUp id="openPopUp" 
+						  popUpType="{ImportWindow}" 
+						  modalDuration="250" 
+						  percentWidth="75"
+						  percentHeight="90"
+						  width="600"
+						  parent="{parentApplication}"
+						  close="openpopup1_closeHandler(event)"/>
+		</handlers:EventHandler>
+		
+		<!--- show delete document popup -->
+		<handlers:EventHandler targets="{deleteDocumentIcon}" eventName="click" 
+							   enabled="{list.selectedItem!=null}">
+			<fc:OpenPopUp id="openDeleteProjectPopUp" 
+						  popUpType="{DeleteDocumentWindow}" 
+						  modalDuration="100" 
+						  percentWidth="75"
+						  percentHeight="90"
+						  width="600"
+						  parent="{parentApplication}"
+						  popUpOptions="{{currentState:'document',documentData:list.selectedItem}}"
+						  />
+		</handlers:EventHandler>
+		
+		<!--- show save before close document popup. disabled for now -->
+		<!--<handlers:EventHandler targets="{closeDocumentIcon}" eventName="click" 
+							   enabled="{list.selectedItem!=null}">
+			<fc:OpenPopUp id="saveBeforeClosePopUp" 
+						  popUpType="{SaveBeforeCloseWindow}" 
+						  modalDuration="100" 
+						  percentWidth="75"
+						  percentHeight="90"
+						  width="600"
+						  parent="{parentApplication}"
+						  popUpOptions="{{currentState:'document',documentData:list.selectedItem}}"
+						  />
+		</handlers:EventHandler>-->
+		
+		<fx:Component className="namePopUp">
+			
+			<s:Group mouseEnabledWhereTransparent="true" 
+					 width="100%" height="100%" 
+					 >
+<!--					 creationComplete="nameInput.setFocus()"-->
+				
+				<fx:Script>
+					<![CDATA[
+						import mx.events.FlexEvent;
+						protected function nameInput_enterHandler(event:FlexEvent):void {
+							
+						}
+					]]>
+				</fx:Script>
+				
+				
+				<fx:Declarations>
+					<handlers:EventHandler target="{this}" eventName="mouseDownOutside">
+						<!--<popup:ClosePopUp target="{newDocumentPopUp}" />-->
+					</handlers:EventHandler>
+				</fx:Declarations>
+				
+				
+				<s:Rect width="100%" height="100%" radiusX="0" radiusY="0">
+					<s:fill>
+						<s:SolidColor color="#ffffff" alpha=".9" />
+					</s:fill>
+					<s:stroke>
+						<s:SolidColorStroke color="#000000" pixelHinting="true" weight="0" />
+					</s:stroke>
+					<s:filters>
+						<s:DropShadowFilter distance="3" strength=".75"/>
+					</s:filters>
+				</s:Rect>
+				
+				<s:Group width="100%" height="100%">
+					<s:layout>
+						<s:HorizontalLayout paddingLeft="5" paddingRight="5"
+											paddingTop="5" paddingBottom="5"/>
+					</s:layout>
+						
+					
+					<s:Label text="Name:"/>
+					
+					<s:TextInput id="nameInput" width="100%" enter="nameInput_enterHandler(event)"/>
+				</s:Group>
+			</s:Group>
+		</fx:Component>
+	</fx:Declarations>
+	
+	<s:layout>
+		<s:VerticalLayout paddingLeft="8" paddingRight="8" paddingBottom="8"/>
+	</s:layout>
+	
+	<mx:VDividedBox id="verticalContainer" 
+					width="100%" height="100%"
+					top="0"
+					left="8" 
+					right="8" 
+					bottom="0"
+					>
+		
+		<s:Group height="24" 
+				 minHeight="24"
+				 width="100%" 
+				 >
+					
+			<c:SearchTextInput id="filterInput" 
+							   left="0" right="0" top="0" 
+							   width="100%"
+							   minWidth="60" 
+							   styleName="inputStyles"
+							   prompt="Search"
+							   enter="searchPropertyInput_enterHandler(event)"
+							   keyUp="filterInput_keyUpHandler(event)"
+							   />
+			<s:HGroup width="100%" top="32" left="4" verticalAlign="baseline">
+				<s:CheckBox id="showAllItemsOnEmpty" label="All" selected="true"/>
+				<s:CheckBox id="caseSensitive" label="Case" selected="false"/>
+				<s:CheckBox id="searchAtStart" label="At start" selected="false"/>
+				<s:Spacer width="100%"/>
+				<s:Label text="Results: {documentsCollection.length}"/>
+			</s:HGroup>
+		</s:Group>
+		
+		
+		<s:List id="list" 
+				focusAlpha="0"
+				minHeight="20"
+				width="100%" 
+				height="100%"
+				labelFunction="labelFunction"
+				borderAlpha=".2"
+				dataProvider="{documentsCollection}"
+				change="list_changeHandler(event)"
+				doubleClick="list_doubleClickHandler(event)"
+				doubleClickEnabled="true"
+				itemRenderer="com.flexcapacitor.views.renderers.EditableDocumentRenderer"
+				>
+		</s:List>
+	
+		
+	</mx:VDividedBox>
+	
+	<s:HGroup width="100%"
+			 height="24"
+			 minHeight="24"
+			 verticalAlign="middle"
+			 >
+		<c:ImageButton id="importDocumentIcon" 
+					   source="{Radii8LibraryAssets.importIcon}" 
+					   toolTip="Import Document"
+					   />
+		<s:Spacer width="100%"/>
+		<c:ImageButton id="closeDocumentIcon" 
+					   source="{Radii8LibraryAssets.closedFolder}" 
+					   toolTip="Close Document"
+					   click="closeDocumentIcon_clickHandler(event)"
+					   />
+		<c:ImageButton id="openDocumentIcon" 
+					   source="{Radii8LibraryAssets.openFolder}" 
+					   toolTip="Open Document"
+					   click="openDocumentIcon_clickHandler(event)"
+					   />
+		<c:ImageButton id="saveDocumentIcon" 
+					   source="{Radii8LibraryAssets.save}" 
+					   toolTip="Save Document"
+					   click="saveDocumentIcon_clickHandler(event)"
+					   height="15"
+					   />
+		<c:ImageButton id="newDocumentIcon" 
+					   source="{Radii8LibraryAssets.newFile}" 
+					   toolTip="New Document"
+					   click="newDocumentIcon_clickHandler(event)"
+					   />
+		<c:ImageButton id="deleteDocumentIcon" 
+					   source="{Radii8LibraryAssets.trashCan}" 
+					   toolTip="Remove Document"
+					   />
+	</s:HGroup>
+	
+
+</s:Group>

http://git-wip-us.apache.org/repos/asf/flex-radii8/blob/f370bfcf/Radii8Library/src/com/flexcapacitor/views/panels/DynamicComponentInspector.mxml
----------------------------------------------------------------------
diff --git a/Radii8Library/src/com/flexcapacitor/views/panels/DynamicComponentInspector.mxml b/Radii8Library/src/com/flexcapacitor/views/panels/DynamicComponentInspector.mxml
new file mode 100644
index 0000000..189734a
--- /dev/null
+++ b/Radii8Library/src/com/flexcapacitor/views/panels/DynamicComponentInspector.mxml
@@ -0,0 +1,141 @@
+<?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:c="com.flexcapacitor.controls.*"
+		 
+		 width="100%" height="100%"
+		 creationComplete="creationCompleteHandler(event)"
+		 >
+	
+	
+	<!-- 
+	
+	-->
+	<fx:Script>
+		<![CDATA[
+			import com.flexcapacitor.views.IInspector;
+			import com.flexcapacitor.controller.Radiate;
+			import com.flexcapacitor.events.RadiateEvent;
+			import com.flexcapacitor.model.InspectorData;
+			import com.flexcapacitor.utils.supportClasses.ComponentDescription;
+			
+			import mx.core.UIComponent;
+			import mx.events.FlexEvent;
+			
+			/**
+			 * Reference to Radiate
+			 * */
+			public var radiate:Radiate;
+			
+			public var componentDescription:ComponentDescription;
+
+			public var target:Object;
+			
+			private var _inspectors:Array;
+			
+			public function get inspectors():Array {
+				return _inspectors;
+			}
+			
+			[Bindable]
+			public function set inspectors(value:Array):void {
+				
+				_inspectors = value;
+				
+				if (_inspectors) {
+					
+				}
+				else {
+					
+				}
+			}
+			
+			protected function creationCompleteHandler(event:FlexEvent):void {
+				radiate = Radiate.getInstance();
+				
+				// listen at a higher priority so we can deactivate before child inspectors hear event 
+				// before they have to since the views are specific to the class they are used for
+				// for example, if we have inspectors for Button and we switch to Application
+				// we don't want the inspectors for Button to get the target change event 
+				// for Application
+				radiate.addEventListener(RadiateEvent.TARGET_CHANGE, handleTargetChange, false, 10, true);
+				//radiate.addEventListener(RadiateEvent.PROPERTY_CHANGED, propertyChangeHandler, false, 0, true);
+				
+				if (radiate.target) {
+					target = radiate.target;
+				}
+				
+				inspectors = radiate.getInspectors(target);
+				
+				updateInspectors(inspectors);
+			}
+			
+			protected function handleTargetChange(event:RadiateEvent):void {
+				var sameType:Boolean = radiate.isSameClassType(target, radiate.target);
+				
+				target = radiate.target;
+				
+				if (!sameType) {
+					inspectors = radiate.getInspectors(target);
+					
+					updateInspectors(inspectors);
+				}
+			}
+			
+			
+			public function updateInspectors(inspectors:Array):void {
+				var inspectorInstance:UIComponent;
+				var inspectorData:InspectorData;
+				var length:int = contentGroup.numElements;
+				
+				// deactivate and remove previous inspectors
+				for (var j:int;j<length;j++) {
+					if (contentGroup.getElementAt(j) is IInspector) {
+						IInspector(contentGroup.getElementAt(j)).deactivate();
+					}
+				}
+				
+				contentGroup.removeAllElements();
+				
+				length = inspectors.length;
+				
+				// add and activate inspectors
+				for (var i:int;i<length;i++) {
+					inspectorData = InspectorData(inspectors[i]);
+					inspectorInstance = inspectorData.getInstance() as UIComponent;
+					
+					if (inspectorInstance) {
+						contentGroup.addElement(inspectorInstance);
+						IInspector(inspectorInstance).activate();
+					}
+				}
+				
+			}
+		]]>
+	</fx:Script>
+	
+	
+	<s:Scroller id="scroller" top="0" left="8" right="8" bottom="4">
+		<s:VGroup id="contentGroup" width="100%" paddingRight="12" paddingBottom="12" />
+	</s:Scroller>
+	
+</s:Group>
\ No newline at end of file


Mime
View raw message