| <?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.*" |
| |
| minWidth="100" |
| minHeight="100" |
| creationComplete="creationCompleteHandler(event)" |
| > |
| |
| |
| <!-- |
| This is a standard properties grid that is showing property and value |
| except that the editor (color picker, text input, etc) is |
| in the footer rather than next to the view. |
| |
| There is a second view that attempts to put the editor next to the |
| property. This sort of works but is CPU intensive and causes slow |
| down. This may be because it has hundreds of properties or |
| another cause. The idea then would be to specify the properties |
| in the spark or inspectors manifest file and only show those. |
| Or it would show only the properties defined on it's self. |
| For example, if it's a Button it will show only the Button |
| class properties but not ButtonBase, UIComponent and so on. |
| This has its limitations though. What about size and position? |
| In that case, the common properties from the inherited classes |
| would have to be specified. So Button would show all of it's |
| properties, then any properties on ButtonBase that were specified |
| as useful would be shown and then add any properties on UIComponent |
| that were specified as useful would be shown. |
| |
| For Button this would look like this: |
| - |
| Label - Part of Button base |
| - |
| Width - Part of UIComponent |
| Height |
| X |
| Y |
| |
| Unfortunately there is the order and grouping to keep in mind. |
| |
| The third view would be custom property inspectors based on type or class. |
| This is defined in the inspectors manifest file. It specifies the views to |
| display by class name or URL. |
| |
| |
| One of the current problems is that the component or class and it's |
| description is in XML still in some locations and not stored anywhere else. |
| We use describeType to get the properties, styles, events and inheritence. |
| Using XML is relatively heavy, slow and is not typed. We use this |
| information to dynamically build the inspectors for color, numbers, boolean |
| and enumerated values. |
| |
| It should be refactored. For example, class information should be globally accessable, |
| and return a strong data type. It should have look up for getting the |
| inspector type (color, boolean, text inspector etc) and for setting it's value. |
| |
| |
| |
| TODO: |
| - do not update if not visible or is not active tab |
| - add refresh button |
| - display read only property |
| - filter to show only the properties that we specify |
| - show custom views when defined |
| - add better way to switch between views |
| --> |
| |
| <fx:Script> |
| <![CDATA[ |
| import com.flexcapacitor.controller.Radiate; |
| import com.flexcapacitor.events.RadiateEvent; |
| import com.flexcapacitor.model.AccessorMetaData; |
| import com.flexcapacitor.model.MetaData; |
| import com.flexcapacitor.model.StyleMetaData; |
| import com.flexcapacitor.utils.ClassUtils; |
| import com.flexcapacitor.utils.DisplayObjectUtils; |
| import com.flexcapacitor.utils.InspectorUtils; |
| import com.flexcapacitor.utils.StringUtils; |
| import com.flexcapacitor.views.renderers.BooleanRenderer; |
| import com.flexcapacitor.views.renderers.ColorPickerRenderer; |
| import com.flexcapacitor.views.renderers.ComboBoxRenderer; |
| import com.flexcapacitor.views.renderers.NumberRenderer; |
| import com.flexcapacitor.views.renderers.TextRenderer; |
| |
| import flash.utils.getTimer; |
| |
| import mx.collections.XMLListCollection; |
| import mx.core.IFlexModule; |
| import mx.core.IFlexModuleFactory; |
| import mx.core.UIComponent; |
| import mx.effects.effectClasses.PropertyChanges; |
| import mx.events.FlexEvent; |
| import mx.utils.DescribeTypeCacheRecord; |
| |
| import spark.events.GridSelectionEvent; |
| import spark.events.IndexChangeEvent; |
| import spark.events.TextOperationEvent; |
| |
| import flashx.textLayout.operations.SplitParagraphOperation; |
| |
| public var CUSTOM_ITEM_SORT_CHARACTER:String = "~"; |
| |
| public var PROPERTIES_STATE:String = "properties"; |
| public var NONE_STATE:String = "none"; |
| public var BOOLEAN_STATE:String = "boolean"; |
| public var COLOR_STATE:String = "color"; |
| public var FORMATS_STATE:String = "formats"; |
| public var TEXT_STATE:String = "text"; |
| public var NUMBER_STATE:String = "number"; |
| public var INT_STATE:String = "int"; |
| public var UINT_STATE:String = "uint"; |
| |
| // LETS GET RID OF SOME OF THESE! |
| private var fontInfoCollection:XMLListCollection = new XMLListCollection(); |
| private var allItems:XMLListCollection = new XMLListCollection(); |
| private var inheritingStylesList:XMLListCollection = new XMLListCollection(); |
| private var nonInheritingStylesList:XMLListCollection = new XMLListCollection(); |
| private var objectPropertiesList:XMLListCollection = new XMLListCollection(); |
| private var _dataProviderProperties:XMLListCollection; |
| |
| public var describedType:XML; |
| |
| |
| [Bindable] |
| public var showSearchBox:Boolean = true; |
| |
| [Bindable] |
| public var showValueBox:Boolean = true; |
| |
| [Bindable] |
| public var showHeader:Boolean = false; |
| |
| /** |
| * Reference to Radiate |
| * */ |
| public var radiate:Radiate; |
| |
| /** |
| * Height of the header when not show (to allow resizing of columns) |
| * */ |
| public var hiddenHeaderHeight:uint = 0; |
| |
| private var _target:Object; |
| |
| public function get target():Object { |
| return _target; |
| } |
| |
| [Bindable] |
| public function set target(value:Object):void { |
| |
| _target = value; |
| |
| if (_target) { |
| clear(); |
| currentState = NONE_STATE; |
| populatePropertiesGrid(_target); |
| } |
| else { |
| clear(); |
| } |
| } |
| |
| |
| protected function creationCompleteHandler(event:FlexEvent):void { |
| radiate = Radiate.getInstance(); |
| |
| if (!showHeader) { |
| //propertiesGrid.columnHeaderGroup.visible = showHeader; |
| propertiesGrid.columnHeaderGroup.height = hiddenHeaderHeight; |
| } |
| |
| radiate.addEventListener(RadiateEvent.TARGET_CHANGE, handleTargetChange, false, 0, true); |
| radiate.addEventListener(RadiateEvent.PROPERTY_CHANGED, propertyChangeHandler, false, 0, true); |
| |
| if (radiate.target) { |
| target = radiate.target; |
| } |
| |
| } |
| |
| protected function handleTargetChange(event:RadiateEvent):void { |
| target = event.selectedItem; |
| } |
| |
| public function get dataProviderProperties():XMLListCollection { |
| return _dataProviderProperties; |
| } |
| |
| [Bindable] |
| public function set dataProviderProperties(value:XMLListCollection):void { |
| if (_dataProviderProperties) { |
| _dataProviderProperties = new XMLListCollection(new XMLList()); |
| } |
| |
| /*value.sort = new Sort(); |
| value.sort.fields = [new SortField("@name", false)]; |
| value.refresh();*/ |
| _dataProviderProperties = value; |
| } |
| |
| /** |
| * Get Name or ID of target object |
| * */ |
| public function getName(element:Object):String { |
| var id:String; |
| |
| if (element is UIComponent && element.id != null) { |
| id = UIComponent(element).id; |
| } |
| else if (element.hasOwnProperty("id") && element.id != null) { |
| id = element.id; |
| } |
| else if (element.hasOwnProperty("name") && element.name != null) { |
| id = element.name; |
| } |
| else { |
| id = ""; |
| } |
| return id; |
| } |
| |
| /** |
| * Populates the datagrid with all the properties that describe type returns for the given object |
| * */ |
| public function populatePropertiesGrid(target:Object):void { |
| var describedTypeRecord:mx.utils.DescribeTypeCacheRecord; |
| var stylesList:XMLListCollection; |
| var accessorList:XMLListCollection; |
| var propertyName:String; |
| var fontLookup:String; |
| var fontFamily:String; |
| var renderingMode:String; |
| var properties:String; |
| var inheritingStyles:Object; |
| var nonInheritingStyles:Object; |
| var property:String; |
| var item:XML; |
| var styleNotDefined:Boolean; |
| var styleIsColor:Boolean; |
| |
| |
| // TODO: not use xml - use json version |
| if (target != null) { |
| //describedType = describeType(target); |
| var time:int = getTimer(); |
| /*Radiate.log.info("Get properties on target " + getName(target)); |
| describedType = ClassUtils.getDescribeType(target); |
| Radiate.log.info("2 Get properties on target : " + String(getTimer()-time));*/ |
| describedType = ClassUtils.getDescribeType(target); |
| //Radiate.log.info("3 Get properties on target : " + String(getTimer()-time)); |
| accessorList = new XMLListCollection(describedType.accessor); |
| |
| // DISABLE UPDATE UNTIL COMPLETE |
| //allItems.removeAll(); |
| //allItems.disableAutoUpdate(); |
| |
| // ADD ACCESSORS LIST |
| allItems.addAll(accessorList); |
| |
| // if item is an object enumerate |
| if (describedType.@name=="Object") { |
| for (property in target) { |
| item = createXMLItem(property, target[property], null, true, true); |
| objectPropertiesList.addItem(item); // we could use allItems.addItem(); |
| } |
| } |
| |
| allItems.addAll(objectPropertiesList); |
| |
| /* var blah:Object = getMemberNames(this, true); |
| blah = getMemberNames(this); |
| blah = nonInheritingStyles; |
| blah = styleDeclaration; |
| blah = styleName; |
| blah = styleManager.inheritingStyles; |
| blah = styleManager.qualifiedTypeSelectors; |
| blah = styleManager.selectors; |
| blah = styleManager.stylesRoot; |
| blah = styleManager.typeHierarchyCache; |
| blah = styleManager.typeSelectorCache; |
| blah = styleManager.hasAdvancedSelectors(); */ |
| |
| if (filterInput) filterInput.text = ""; |
| |
| // we check for the text flow property so we can see if fonts are embedded |
| if (target.hasOwnProperty("textFlow")) { |
| /* if (target.textFlow.computedFormat) { |
| fontLookup = target.textFlow.computedFormat.fontLookup; |
| fontFamily = target.textFlow.computedFormat.fontFamily; |
| renderingMode = target.textFlow.computedFormat.renderingMode; |
| fontLookup = "<accessor name='fontLookup' value='" + fontLookup + "'/>"; |
| fontFamily = "<accessor name='fontFamily' value='" + fontFamily + "'/>"; |
| renderingMode = "<accessor name='renderingMode' value='" + renderingMode + "'/>"; |
| properties = fontLookup + fontFamily + renderingMode + propertiesList.toString(); |
| propertiesList = new XMLList(properties); |
| } */ |
| } |
| |
| //allItems.addAll(propertiesList); |
| |
| |
| var styles:XMLList = ClassUtils.concatenateMetaDataXMLItems(target, "Style", new XMLList()); |
| |
| //describedTypeXML = describeType(target); |
| stylesList = new XMLListCollection(styles); |
| |
| allItems.addAll(stylesList); |
| |
| var moduleFactory:IFlexModuleFactory = null; |
| if (target is IFlexModule) |
| moduleFactory = target.moduleFactory; |
| |
| // attempts to get the values of the properties on the current target |
| // and add them to the node in string representation |
| for each (var node:XML in allItems) { |
| setValueOnNode(node); |
| } |
| |
| // Add in inheriting styles |
| /*if ("inheritingStyles" in target) { |
| inheritingStyles = target.inheritingStyles as Object; |
| |
| for (property in inheritingStyles) { |
| item = createXMLItem(property, inheritingStyles[property], null, true, true); |
| inheritingStylesList.addItem(item); |
| } |
| |
| //trace("Inheriting style count", inheritingStylesList.length); |
| |
| //allItems.addAll(inheritingStylesList); |
| }*/ |
| |
| // Add in non inheriting styles - |
| /*if (target.hasOwnProperty("nonInheritingStyles")) { |
| nonInheritingStyles = target.nonInheritingStyles as Object; |
| |
| for (property in nonInheritingStyles) { |
| item = createXMLItem(property, nonInheritingStyles[property], null, true, false); |
| nonInheritingStylesList.addItem(item); |
| } |
| |
| //trace("Non-Inheriting style count", nonInheritingStylesList.length); |
| |
| allItems.addAll(nonInheritingStylesList); |
| }*/ |
| |
| |
| // not using |
| // create an item for unnamed style |
| // this floats at the top so we can get the value of a style not listed by describe type |
| var customItem:XML = createXMLItem(CUSTOM_ITEM_SORT_CHARACTER, "", "String"); |
| customItem.@search = true; |
| //allItems.addItem(customItem); |
| |
| dataProviderProperties = allItems; |
| } |
| else { |
| dataProviderProperties = new XMLListCollection(); |
| } |
| |
| } |
| |
| /** |
| * Set the value on the node |
| * */ |
| public function setValueOnNode(node:XML):void { |
| var propertyName:String; |
| var styleNotDefined:Boolean; |
| var styleIsColor:Boolean; |
| |
| propertyName = node.@name; |
| if (propertyName=="backgroundColor") { |
| //trace("HELLO"); |
| } |
| |
| if (node.@access != "writeonly") { |
| |
| if (propertyName in target) { |
| |
| try { |
| node.@value = target[propertyName]; |
| //node.@valueIsObject = (target[propertyName] is Object); |
| } |
| catch (error:Error) { |
| node.@value = error.message; |
| node.@valueError = true; |
| } |
| } |
| // styles |
| else if (target is IStyleClient) { |
| styleNotDefined = false; |
| styleIsColor = false; |
| var currentVal:Object = target.getStyle(propertyName); |
| |
| // Handle situation of turning strings into Boolean values |
| //if (currentVal is Boolean) |
| //{ |
| //if (val is String) val = (value.toLowerCase() == "true"); |
| //} |
| // Handle turning standard string representations of colors |
| // into numberic values |
| if (propertyName.toLowerCase().indexOf("color") != -1 && |
| propertyName.toLowerCase().indexOf("colors") == -1) |
| { |
| styleIsColor = true; |
| } |
| |
| if (currentVal is Number && styleIsColor) |
| { |
| currentVal = StyleManager.getStyleManager(moduleFactory).getColorName(currentVal); |
| } |
| |
| try { |
| if (target.getStyle(propertyName)===undefined) { |
| styleNotDefined = true; |
| node.@styleNotDefined = true; |
| node.@value = ""; |
| } |
| else { |
| if (styleIsColor) { |
| node.@value = DisplayObjectUtils.getColorInHex(currentVal as uint, true); |
| } |
| else { |
| node.@value = currentVal; |
| } |
| //node.@valueIsObject = (currentVal is Object); |
| } |
| } |
| catch (error:Error) { |
| node.@value = error.message; |
| node.@valueError = true; |
| } |
| } |
| |
| } |
| } |
| |
| /** |
| * From SetAction |
| * */ |
| public function getValue(propName:String):* |
| { |
| if (propName in target) |
| return target[propName]; |
| else |
| return target.getStyle(propName); |
| } |
| |
| public function createXMLItem(name:String, value:*, type:String, style:Boolean=false, inheriting:Boolean=false):XML { |
| var xml:XML = <accessor />; |
| xml.@name = name; |
| xml.@style = style; |
| xml.@inheriting = inheriting; |
| xml.@access = "readwrite"; |
| if (type) { |
| xml.@type = type; |
| } |
| else { |
| xml.@type = InspectorUtils.getValueType(value); |
| } |
| xml.@value = value!=null || undefined ? String(value) : ""; |
| return xml; |
| } |
| /* |
| protected function filterDisplayObjectChangeHandler(item:XML):Boolean { |
| var itemName:String = item.attribute("name") ? item.attribute("name") : ""; |
| var value:String = searchPropertyInput.text; |
| |
| if (itemName.toLowerCase().indexOf(value) != -1) { |
| return true; |
| } |
| return false; |
| }*/ |
| |
| /** |
| * Filters the property list |
| * if we type a period or a space at the end of the word then |
| * the value and the name have to match exactly (case-insensitive) |
| * */ |
| /*protected function filterPropertyChangeHandler(item:XML):Boolean { |
| var itemName:String = item.attribute("name") ? item.attribute("name") : ""; |
| var value:String = searchPropertyInput.text; |
| var valueLength:int = value.length; |
| var itemNameLength:int = itemName.length; |
| var valueLowerCase:String = value.toLowerCase(); |
| var itemNameLowerCase:String = itemName.toLowerCase(); |
| |
| // show all items if search is empty |
| if (valueLength==0) { |
| return true; |
| } |
| |
| |
| // show custom item in case of style |
| if (item.@search=="true") { |
| |
| |
| |
| // undefined |
| // at Function/<anonymous>()[E:\dev\4.y\frameworks\projects\framework\src\mx\utils\XMLNotifier.as:93] |
| // at com.flexcapacitor.views::Properties/filterPropertyChangeHandler()[/Users/monkeypunch/Documents/ProjectsGithub/Radii8/Radii8Library/src/com/flexcapacitor/views/Properties.mxml:331] |
| // at mx.collections::ListCollectionView/addItemsToView()[E:\dev\4.y\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:1089] |
| // at mx.collections::ListCollectionView/moveItemInView()[E:\dev\4.y\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:1594] |
| // at mx.collections::ListCollectionView/handlePropertyChangeEvents()[E:\dev\4.y\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:1421] |
| // at mx.collections::ListCollectionView/listChangeHandler()[E:\dev\4.y\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:1316] |
| // at flash.events::EventDispatcher/dispatchEventFunction() |
| // at flash.events::EventDispatcher/dispatchEvent() |
| // at mx.collections::ListCollectionView/dispatchEvent()[E:\dev\4.y\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:1024] |
| // at mx.collections::ListCollectionView/handlePropertyChangeEvents()[E:\dev\4.y\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:1449] |
| // at mx.collections::ListCollectionView/listChangeHandler()[E:\dev\4.y\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:1316] |
| // at flash.events::EventDispatcher/dispatchEventFunction() |
| // at flash.events::EventDispatcher/dispatchEvent() |
| |
| // at mx.collections::XMLListAdapter/itemUpdateHandler()[E:\dev\4.y\frameworks\projects\framework\src\mx\collections\XMLListAdapter.as:623] |
| // at mx.collections::XMLListAdapter/itemUpdated()[E:\dev\4.y\frameworks\projects\framework\src\mx\collections\XMLListAdapter.as:366] |
| // at mx.collections::XMLListAdapter/xmlNotification()[E:\dev\4.y\frameworks\projects\framework\src\mx\collections\XMLListAdapter.as:725] |
| |
| // Seems like it's caused by a change > update > change > update loop |
| |
| // we have a custom item at the top of the |
| //filteredPropertiesCollection.disableAutoUpdate(); |
| item.@name = CUSTOM_ITEM_SORT_CHARACTER + value; |
| //filteredPropertiesCollection.enableAutoUpdate(); |
| return true; |
| } |
| else { |
| //filteredPropertiesCollection.disableAutoUpdate(); |
| } |
| |
| // if we type a period or a space at the end of the word then |
| // the value and the name have to match exactly (case-insensitive) |
| if (value.lastIndexOf(".")==valueLength-1 || value.lastIndexOf(" ")==valueLength-1) { |
| if (itemNameLowerCase+"."==valueLowerCase || itemNameLowerCase+" "==valueLowerCase) { |
| return true; |
| } |
| else { |
| return false; |
| } |
| } |
| |
| // we filter from any index |
| if (itemNameLowerCase.indexOf(valueLowerCase) != -1) { |
| return true; |
| } |
| |
| return false; |
| }*/ |
| |
| /*protected function findPropertyChangeHandler(event:TextOperationEvent):void { |
| filteredPropertiesCollection.refresh(); |
| }*/ |
| |
| /** |
| * Attempts to drill into the selected property |
| * */ |
| /*protected function gridDoubleClickHandler(event:MouseEvent):void { |
| // if the user switches applications and the editor is not closed |
| // we get the text control of the editor. we don't want that so return |
| if (!(event.target is IDataRenderer)) return; |
| |
| var instance:Object = event.currentTarget; |
| var itemRenderer:IDataRenderer = IDataRenderer(event.target); |
| var data:XML = itemRenderer.data as XML; |
| |
| // this is a check for double click on dataGridColumn |
| if (data==null) return; |
| var currentValue:String = String(data.@value); |
| var propertyName:String = data.@name; |
| var type:String = String(data.@type); |
| var something:*; |
| |
| if (propertyName in target) { |
| something = target[propertyName]; |
| |
| // if object set new target |
| if (!ObjectUtil.isSimple(something)) { |
| target = something; |
| radiate.dispatchTargetChangeEvent(something); |
| //InspectorUtils.dispatchTargetChangeEvent(something, this); |
| } |
| } |
| }*/ |
| /* |
| protected function propertiesGrid_itemEditEndHandler(oldValue:Object, newValue:Object, editor:DefaultGridItemEditor):void { |
| throw new Error("Is this used?"); |
| var instance:Object = editor.column.itemEditor; |
| if (instance==null) return; |
| var data:XML = editor.column.grid.selectedItem as XML; //event.itemRenderer.data as XML; |
| var currentValue:String = String(data[editor.column.dataField]); |
| var propertyName:String = data.@name; |
| var searchField:String = data.@search; |
| var isSearchField:Boolean = searchField=="" || searchField==null ? false : searchField as Boolean;; |
| var type:String = String(data.@type); |
| var styleAttribute:String = data.@style; |
| var isStyle:Boolean = styleAttribute=="" || styleAttribute==null ? false : styleAttribute as Boolean; |
| var newAssignedValue:*; |
| var isChanged:Boolean; |
| |
| if (isSearchField) { |
| propertyName = propertyName.replace(CUSTOM_ITEM_SORT_CHARACTER, ""); |
| isStyle = true; |
| } |
| |
| if (target) { |
| newAssignedValue = TypeUtils.getTypedValue(newValue, type) |
| |
| InspectorUtils.setTargetProperty(target, propertyName, newAssignedValue, type, isStyle); |
| |
| } |
| |
| callLater(maintainFocus); |
| }*/ |
| /* |
| private function maintainFocus():void { |
| //propertiesGrid.editedItemPosition = null; |
| }*/ |
| |
| /** |
| * 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; |
| |
| return; // DISABLE FOR NOW |
| if (filteredPropertiesCollection.length==1) { |
| item = filteredPropertiesCollection.getItemAt(0) as XML; |
| if (item && item.nodeName()=="metadata") { |
| item.@value = target is UIComponent ? UIComponent(target).getStyle(searchText) : ""; |
| filteredPropertiesCollection.itemUpdated(item, "@value"); |
| filteredPropertiesCollection.refresh(); |
| } |
| } |
| }
|
| |
| |
| /** |
| * |
| * */ |
| public function clear():void { |
| // on application getting this error: |
| //RangeError: Index '-1' specified is out of bounds.??? |
| /*allItems.enableAutoUpdate(); |
| Radiate.log.info("1Length:"+allItems.length); |
| allItems.refresh(); |
| Radiate.log.info("2Length:"+allItems.length); |
| allItems.sort = null; |
| Radiate.log.info("3Length:"+allItems.length);*/ |
| allItems.removeAll(); |
| allItems.refresh(); |
| |
| inheritingStylesList.removeAll(); |
| nonInheritingStylesList.removeAll(); |
| objectPropertiesList.removeAll(); |
| |
| filterInput.text = "";
|
| targetValueText.text = "";
|
| dataProviderProperties = new XMLListCollection();
|
| } |
| /* |
| protected function saveSessionHandler(event:GridItemEditorEvent):void {
|
| //trace("Save session"); |
| var item:XML = propertiesGrid.dataProvider.getItemAt(event.rowIndex) as XML; |
| var value:String = String(item.@value); |
| var property:String = String(item.@name); |
| |
| //trace("New Value= ", value); |
| Radiate.setProperty(target, property, value);
|
| } |
| |
| protected function startSessionHandler(event:GridItemEditorEvent):void { |
| //trace("Start session");
|
| }
|
| |
| protected function savingSessionHandler(event:GridItemEditorEvent):void |
| {
|
| //trace("Saving session");
|
| } |
| |
| protected function startingSessionHandler(event:GridItemEditorEvent):void
|
| {
|
| //trace("Starting session"); |
| var item:XML = propertiesGrid.dataProvider.getItemAt(event.rowIndex) as XML; |
| if (String(item.@access).indexOf("write")<0) { |
| // event.preventDefault(); |
| // NOTIFY OF READ ONLY |
| }
|
| }*/ |
| |
| protected function propertyChangeHandler(event:RadiateEvent):void
|
| {
|
| // radiate property change event |
| updateDataGridPropertyValue(event.changes); |
| //updateSubComponentsValue();
|
| } |
| |
| protected function targetValueText_keyUpHandler(event:KeyboardEvent):void { |
|
|
| if (event.keyCode==Keyboard.ENTER && !event.shiftKey) { |
| setTargetValue(); |
| event.preventDefault(); |
| } |
| else if (event.keyCode==Keyboard.ESCAPE) { |
| var item:XML = propertiesGrid.selectedItem as XML; |
| var value:String = String(item.@value); |
| targetValueText.text = value; |
| event.preventDefault(); |
| }
|
| } |
| |
| /** |
| * Prevents line breaks |
| * */ |
| protected function targetValueText_changingHandler(event:TextOperationEvent):void { |
| |
| // prevent line breaks |
| if(event.operation is SplitParagraphOperation) { |
| event.preventDefault(); |
| }
|
| } |
| |
| protected function colorChooser_changeHandler(event:Event):void { |
| setTargetValue(); |
| } |
| |
| /** |
| * |
| * */ |
| protected function propertiesGrid_selectionChangeHandler(event:GridSelectionEvent = null):void {
|
| updateSubComponentsValue(); |
| } |
| |
| protected function formatCombobox_changeHandler(event:IndexChangeEvent):void { |
| setTargetValue(); |
| } |
| |
| /** |
| * Update the property value in the datagrid when it changes |
| * without reloading all the properties. |
| * */ |
| public function updateDataGridPropertyValue(changes:Array):void { |
| var length:int = allItems.length; |
| var itemList:XMLList; |
| var propertyName:String; |
| |
| if (length>0 && changes.length>0) { |
| //itemList = allItems.source; |
| |
| for each (var node:XML in allItems) { |
| propertyName = node.@name; |
| |
| // TypeError: Error #1034: Type Coercion failed: |
| // cannot convert mx.states::AddItems@1132558c9 to mx.effects.effectClasses.PropertyChanges. |
| // for each (var change:PropertyChanges in changes) { |
| for each (var change:Object in changes) { |
| |
| if (change is mx.effects.effectClasses.PropertyChanges) { |
| var changeObject:Object = change.end; |
| |
| for (var property:String in changeObject) { |
| if (propertyName==property) { |
| //node.@value = changeObject[property] ? Object(changeObject[property]) : ""; |
| |
| // we probably cleared a style |
| if (changeObject[property]===undefined) { |
| setValueOnNode(node); |
| } |
| else { |
| setValueOnNode(node); |
| //node.@value = Object(changeObject[property]).toString(); |
| filteredPropertiesCollection.itemUpdated(node, "@value"); |
| filteredPropertiesCollection.refresh(); |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| |
| /** |
| * Get the value from the datagrid and |
| * show the correct sub component and |
| * set it's value. |
| * */ |
| public function updateSubComponentsValue():void { |
| var item:XML = propertiesGrid.selectedItem as XML; |
| var actualValue:*; |
| var isStyle:Boolean; |
| var type:String; |
| var enumeration:Array; |
| var format:String; |
| var propertyObject:MetaData; |
| var property:String; |
| var value:String; |
| var nodename:String; |
| |
| if (settingProperties) return; |
| |
| if (item) { |
| nodename = item.name(); |
| |
| if (nodename=="metadata") { |
| isStyle = true; |
| propertyObject = new StyleMetaData(item, target); |
| } |
| else if (nodename=="accessor") { |
| propertyObject = new AccessorMetaData(item, target); |
| } |
| else { |
| propertyObject = new MetaData(item, target); |
| } |
| |
| |
| |
| value = String(propertyObject.value); |
| property = propertyObject.name; |
| type = propertyObject.type; |
| format = propertyObject.format; |
| enumeration = propertyObject.enumeration; |
| |
| |
| if (type=="Boolean") { |
| currentState = BOOLEAN_STATE; |
| booleanEnabledRadioButton.selected = false; |
| booleanDisabledRadioButton.selected = false; |
| |
| if (value=="true") { |
| booleanEnabledRadioButton.selected = true; |
| } |
| else if (value=="false") { |
| booleanDisabledRadioButton.selected = true; |
| } |
| |
| booleanClearStyleButton.visible = isStyle; |
| } |
| else if (format=="Color") { |
| currentState = COLOR_STATE; |
| colorChooser.selectedColor = value; |
| targetValueText.text = value; |
| clearColorButton.visible = isStyle; |
| } |
| else if (enumeration && enumeration.length>0) { |
| currentState = FORMATS_STATE; |
| formatsCollection.source = enumeration; |
| formatCombobox.selectedItem = propertyObject.value; |
| targetValueText.text = value; |
| clearFormatButton.visible = isStyle; |
| } |
| else if (type=="Number") { |
| currentState = NUMBER_STATE; |
| numericStepper.value = propertyObject.value; |
| |
| if (!isNaN(propertyObject.minValue)) { |
| numericStepper.minimum = propertyObject.minValue; |
| } |
| else { |
| numericStepper.minimum = Number(int.MIN_VALUE); |
| } |
| if (!isNaN(propertyObject.maxValue)) { |
| numericStepper.maximum = propertyObject.maxValue; |
| } |
| else { |
| numericStepper.maximum = Number(int.MAX_VALUE); |
| } |
| |
| if (property.indexOf("lpha")!=-1) { |
| numericStepper.stepSize = .1; |
| |
| if (isNaN(propertyObject.minValue)) { |
| numericStepper.minimum = 0; |
| } |
| if (isNaN(propertyObject.maxValue)) { |
| numericStepper.maximum = 1; |
| } |
| } |
| else { |
| numericStepper.stepSize = 1; |
| } |
| |
| targetValueText.text = value; |
| booleanNumberStyleButton.visible = isStyle; |
| } |
| else { |
| actualValue = Radiate.getTypedValue(targetValueText.text, type); |
| currentState = TEXT_STATE; |
| targetValueText.text= propertyObject.value; |
| booleanTextStyleButton.visible = isStyle; |
| } |
| |
| |
| radiate.dispatchPropertySelectedEvent(property, propertyObject); |
| } |
| else { |
| currentState = NONE_STATE; |
| } |
| |
| } |
| |
| |
| public var settingProperties:Boolean; |
| |
| /** |
| * Set the property to the new value |
| * */ |
| public function setTargetValue(clearStyle:Boolean = false):void { |
| var item:XML = propertiesGrid.selectedItem as XML; |
| var actualValue:*; |
| var isStyle:int; |
| var styleIsColor:Boolean; |
| var valueSuccessfullyApplied:Boolean; |
| var propertyObject:MetaData; |
| var type:String; |
| var enumeration:Array; |
| var format:String; |
| var inherit:Boolean; |
| var property:String; |
| var value:String; |
| var nodename:String; |
| var access:String; |
| |
| if (item) { |
| nodename = item.name(); |
| |
| if (nodename=="metadata") { |
| isStyle = 1; |
| propertyObject = new StyleMetaData(item, target); |
| } |
| else if (nodename=="accessor") { |
| propertyObject = new AccessorMetaData(item, target); |
| access = AccessorMetaData(propertyObject).access; |
| } |
| else { |
| propertyObject = new MetaData(item, target); |
| } |
| |
| // since we try to capture values for history |
| // ReferenceError: Error #1077: Illegal read of write-only property cacheHeuristic on application. |
| if (access=="writeonly") { |
| return; |
| } |
| |
| value = String(propertyObject.value); |
| property = propertyObject.name; |
| type = propertyObject.type; |
| format = propertyObject.format; |
| enumeration = propertyObject.enumeration; |
| |
| /* |
| var type:Type = Type.forInstance(target); |
| var metadataItems:Array = type.metadata; |
| var b:Array = type.getMetadata("Style"); |
| var metadata:Metadata = Metadata(metadataItems[0]); |
| var hasFormat:Boolean = metadata.hasArgumentWithKey("type"); |
| var o:MetadataArgument = metadata.getArgument("type"); |
| var xc:XML = MetadataUtils.getFromObject(target);*/ |
| |
| // BEGIN // COPY CHANGES TO OTHER UPDATE FUNCTION |
| /*var value:String = String(item.@value); |
| var property:String = String(item.@name); |
| var args:XMLList = item.arg; |
| var metadata:Metadata = new Metadata(name); |
| var argument:MetadataArgument; |
| |
| for each (var arg:XML in args) { |
| argument = new MetadataArgument(arg.@key, arg.@value); |
| metadata.arguments.push(argument); |
| } |
| |
| var propertyType:String; |
| |
| if (isStyle==1 && metadata.hasArgumentWithKey("type")) { |
| propertyType = metadata.getArgument("type").value; |
| } |
| else { |
| propertyType = String(item.@type); |
| } |
| |
| var enumeration:Array; |
| |
| if (isStyle==1 && metadata.hasArgumentWithKey("enumeration")) { |
| enumeration = metadata.getArgument("enumeration").value.split(","); |
| } |
| |
| var format:String; |
| |
| if (isStyle==1 && metadata.hasArgumentWithKey("format")) { |
| format = metadata.getArgument("format").value; |
| }*/ |
| // END |
| |
| //var hasAttribute:Boolean = XML(item).attribute("style").length()>0; |
| //var valuX:String = String(XML(item).attribute("style")).toString(); |
| //var valuX2:String = String(item.@style).toString(); |
| |
| // this is not a reliable way to compare if the value has changed |
| // probably remove it since setProperty and setStyle will double check |
| // if value has really changed |
| //if (value!=targetValueText.text) { |
| |
| if (type=="Boolean") { |
| if (isStyle) { |
| actualValue = booleanGroup.selection==null ? undefined : booleanGroup.selection==booleanEnabledRadioButton; |
| } |
| else { |
| actualValue = booleanGroup.selection==booleanEnabledRadioButton; |
| } |
| } |
| // let SetAction convert 0xFF, #ff and red, ReD |
| else if (format=="Color") { |
| actualValue = colorChooser.selectedColor; |
| } |
| else if (type=="Number") { |
| actualValue = numericStepper.value; |
| |
| if (property.indexOf("lpha")!=-1) {//round down to two places |
| actualValue = int(actualValue*100)/100; |
| } |
| } |
| else if (type=="String" && enumeration && enumeration.length>0) { |
| actualValue = formatCombobox.selectedItem; |
| } |
| else { |
| actualValue = Radiate.getTypedValue(targetValueText.text, type); |
| } |
| |
| |
| settingProperties = true; |
| |
| if (isStyle) { |
| if (clearStyle) { |
| valueSuccessfullyApplied = Radiate.clearStyle(target, property); |
| } |
| else { |
| valueSuccessfullyApplied = Radiate.setStyle(target, property, actualValue); |
| } |
| } |
| else { |
| valueSuccessfullyApplied = Radiate.setProperty(target, property, actualValue); |
| } |
| } |
| |
| settingProperties = false; |
| } |
| |
| /** |
| * Set the property to the new value |
| * */ |
| public function getEditorType(item:XML):String { |
| var actualValue:*; |
| var isStyle:Boolean; |
| var type:String; |
| var enumeration:Array; |
| var format:String; |
| var propertyObject:MetaData; |
| var property:String; |
| var value:String; |
| var nodename:String; |
| |
| if (item) { |
| nodename = item.name(); |
| |
| if (nodename=="metadata") { |
| isStyle = true; |
| propertyObject = new StyleMetaData(item, target); |
| } |
| else if (nodename=="accessor") { |
| propertyObject = new AccessorMetaData(item, target); |
| } |
| else { |
| propertyObject = new MetaData(item, target); |
| } |
| |
| |
| |
| value = String(propertyObject.value); |
| property = propertyObject.name; |
| type = propertyObject.type; |
| format = propertyObject.format; |
| enumeration = propertyObject.enumeration; |
| |
| |
| if (type=="Boolean") { |
| return BOOLEAN_STATE; |
| } |
| else if (format=="Color") { |
| return COLOR_STATE; |
| } |
| else if (enumeration && enumeration.length>0) { |
| return FORMATS_STATE; |
| } |
| else if (type=="Number") { |
| return NUMBER_STATE; |
| } |
| else { |
| return TEXT_STATE; |
| } |
| } |
| |
| return NONE_STATE; |
| } |
| |
| protected function clearStyleButton_clickHandler(event:MouseEvent):void {
|
| setTargetValue(true);
|
| } |
| |
| /** |
| * 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); |
| } |
| }
|
| } |
| |
| /** |
| * Move from properties grid to search text input on up arrow key |
| * */ |
| protected function propertiesGrid_keyUpHandler(event:KeyboardEvent):void {
|
| /* |
| if (event.keyCode==Keyboard.UP) { |
| if (propertiesGrid.selectedIndex ==0 || |
| filteredPropertiesCollection.length==0) { |
| filterInput.setFocus(); |
| //filterInput.selectRange(filterInput.text.length,filterInput.text.length); |
| } |
| } |
| else if (event.keyCode==Keyboard.DOWN) { |
| if (propertiesGrid.selectedIndex==filteredPropertiesCollection.length-1) { |
| |
| if (!moveDownOnNextDownArrow) { |
| moveDownOnNextDownArrow = true; |
| return; |
| } |
| |
| moveDownOnNextDownArrow = false; |
| focusManager.setFocus(focusManager.getNextFocusManagerComponent()); |
| |
| //filterInput.selectRange(filterInput.text.length,filterInput.text.length); |
| } |
| }*/
|
| } |
| |
| /** |
| * |
| * */ |
| protected var moveDownOnNextDownArrow:Boolean; |
| |
| /** |
| * Updated when the boolean change happens |
| * */ |
| protected function booleanGroup_changeHandler(event:Event):void {
|
| setTargetValue();
|
| } |
| |
| /** |
| * |
| * */ |
| protected function numericStepper_changeHandler(event:Event):void {
|
| setTargetValue();
|
| } |
| |
| /** |
| * Format numeric stepper |
| * Trim down to 2 decimal places. |
| * */ |
| public function formatNumericStepper(value:Number):String { |
| |
| return String(int(value*100)/100); |
| } |
| |
| protected function changeStatesButton_clickHandler(event:MouseEvent):void {
|
| if (currentState!=PROPERTIES_STATE) { |
| currentState = PROPERTIES_STATE; |
| } |
| else { |
| currentState = NONE_STATE; |
| }
|
| } |
| |
| public function labelFunction(data:Object, column:GridColumn):String { |
| StringUtils.prettifyCamelCase(data.@name); |
| return ""; |
| } |
| |
| public function propertiesGridItemRendererFunction(item:Object, column:GridColumn):IFactory { |
| // Create a Class Factory variable |
| var rendererFactory:ClassFactory; |
| var type:Class; |
| var editorState:String = getEditorType(XML(item)); |
| |
| switch (editorState) { |
| case BOOLEAN_STATE: |
| type = BooleanRenderer; |
| break; |
| case COLOR_STATE: |
| type = ColorPickerRenderer; |
| break; |
| case FORMATS_STATE: |
| type = ComboBoxRenderer; |
| break; |
| case NUMBER_STATE: |
| type = NumberRenderer; |
| break; |
| case TEXT_STATE: |
| type = com.flexcapacitor.views.renderers.TextRenderer; |
| break; |
| default: |
| type = com.flexcapacitor.views.renderers.TextRenderer; |
| } |
| |
| rendererFactory = new ClassFactory(type); |
| //rendererFactory.properties = { MyBackgroundColor: varDefaultBackgroundColor, MyForegroundColor: varDefaultForegroundColor }; |
| |
| return rendererFactory; |
| } |
| |
| ]]> |
| </fx:Script> |
| |
| |
| <fx:Declarations> |
| |
| <s:NumberFormatter id="formatter" |
| useGrouping="false"/> |
| |
| <s:ArrayCollection id="filteredPropertiesCollection" |
| list="{dataProviderProperties}"/> |
| |
| <s:ArrayCollection id="formatsCollection"/> |
| |
| <fx:Array id="filterArray"> |
| <fx:String>accentColor</fx:String> |
| <fx:String>visible</fx:String> |
| </fx:Array> |
| |
| <!-- SORT BY NAME --> |
| <handlers:EventHandler eventName="creationComplete" > |
| <collections:SortCollection target="{filteredPropertiesCollection}" |
| fields="{['@name']}" /> |
| </handlers:EventHandler> |
| |
| <!-- FILTER BY NAME --> |
| <handlers:EventHandler eventName="change" |
| targets="{[filterInput,showAllItemsOnEmpty,caseSensitive,searchAtStart]}" |
| > |
| <collections:FilterCollection target="{filteredPropertiesCollection}" |
| source="{filterInput}" |
| sourcePropertyName="text" |
| fieldName="@name" |
| showAllItemsOnEmpty="{showAllItemsOnEmpty.selected}" |
| caseSensitive="{caseSensitive.selected}" |
| searchAtStart="{searchAtStart.selected}" |
| /> |
| </handlers:EventHandler> |
| |
| <s:RadioButtonGroup id="booleanGroup" change="booleanGroup_changeHandler(event)"/> |
| </fx:Declarations> |
| |
| <s:states> |
| <s:State name="none"/> |
| <s:State name="number"/> |
| <s:State name="boolean"/> |
| <s:State name="int"/> |
| <s:State name="text"/> |
| <s:State name="color"/> |
| <s:State name="formats"/> |
| <s:State name="properties"/> |
| <s:State name="dynamicInspector"/> |
| </s:states> |
| |
| |
| |
| <mx:VDividedBox id="verticalContainer" |
| width="100%" height="100%" |
| top="0" |
| left="8" |
| right="8" |
| bottom="4" |
| > |
| |
| <s:Group height="24" |
| minHeight="24" |
| maxHeight="60" |
| width="100%" |
| excludeFrom="properties" |
| > |
| |
| <c:SearchTextInput id="filterInput" |
| left="0" right="0" top="0" |
| width="100%" |
| minWidth="60" |
| prompt="Search" |
| styleName="inputStyles" |
| 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: {filteredPropertiesCollection.length}"/> |
| </s:HGroup> |
| </s:Group> |
| |
| <!-- PROPERTIES GRID --> |
| <c:DataGrid id="propertiesGrid" |
| borderAlpha="0.2" |
| height="100%" |
| width="100%" |
| minWidth="80" |
| minHeight="48" |
| rowHeight="26" |
| variableRowHeight="false" |
| dataProvider="{filteredPropertiesCollection}" |
| selectionChange="propertiesGrid_selectionChangeHandler(event)" |
| click="propertiesGrid_selectionChangeHandler()" |
| keyUp="propertiesGrid_keyUpHandler(event)" |
| excludeFrom="properties" |
| > |
| <!-- gridItemEditorSessionStart="startSessionHandler(event)" |
| gridItemEditorSessionSave="saveSessionHandler(event)" |
| gridItemEditorSessionSaving="savingSessionHandler(event)" |
| gridItemEditorSessionStarting="startingSessionHandler(event)"--> |
| <!--<s:layout> |
| <s:VerticalLayout rowHeight="22" /> |
| </s:layout>--> |
| <c:columns> |
| <s:ArrayCollection> |
| |
| <s:GridColumn dataField="@type" |
| width="14" |
| editable="false" |
| resizable="true" |
| headerText="PROPERTY"> |
| <s:itemRenderer> |
| <fx:Component> |
| <s:GridItemRenderer minHeight="14" > |
| <s:BitmapImage top="8" left="3" source="{Radii8LibraryAssets.propertyIcon}"/> |
| </s:GridItemRenderer> |
| </fx:Component> |
| </s:itemRenderer> |
| </s:GridColumn> |
| |
| <s:GridColumn dataField="@name" |
| minWidth="50" |
| editable="false" |
| resizable="true" |
| headerText="PROPERTY" > |
| <s:itemRenderer> |
| <fx:Component> |
| <s:GridItemRenderer minHeight="14"> |
| <s:Label id="labelDisplay" |
| verticalCenter="1" left="0" right="0" top="0" bottom="0" |
| fontSize="12" |
| paddingTop="3" |
| paddingBottom="3" |
| paddingLeft="3" |
| paddingRight="3" |
| textAlign="start" |
| verticalAlign="middle" |
| width="100%" |
| maxDisplayedLines="1" |
| showTruncationTip="true"/> |
| </s:GridItemRenderer> |
| </fx:Component> |
| </s:itemRenderer> |
| </s:GridColumn> |
| |
| <s:GridColumn dataField="@value" |
| minWidth="50" |
| editable="false" |
| resizable="true" |
| headerText="VALUE" |
| itemRenderer="com.flexcapacitor.views.renderers.PropertiesGridValuesRenderer"> |
| </s:GridColumn> |
| |
| <!--<s:GridColumn headerText="" |
| minWidth="30" |
| width="30" |
| editable="false" |
| labelFunction="{function(data:Object, column:GridColumn):String{return'...';}}"> |
| </s:GridColumn>--> |
| |
| |
| <!--<s:GridColumn width="50" |
| dataField="@type" editable="false" |
| headerText="type"/> |
| <s:GridColumn width="35" |
| dataField="@style" editable="false" |
| headerText="Style"/> |
| <s:GridColumn width="35" |
| dataField="@inheriting" editable="false" |
| headerText="Inheriting"/>--> |
| |
| </s:ArrayCollection> |
| </c:columns> |
| </c:DataGrid> |
| |
| |
| |
| <!-- FORM --> |
| <!-- PROPERTIES LIST --> |
| <c:DataGrid id="propertiesList" |
| borderAlpha="0" |
| height="100%" |
| width="100%" |
| minWidth="80" |
| minHeight="48" |
| rowHeight="26" |
| variableRowHeight="false" |
| selectionColor="#ffffff" |
| rollOverColor="#ffffff" |
| dataProvider="{filteredPropertiesCollection}" |
| includeIn="properties" |
| > |
| <c:columns> |
| <s:ArrayCollection> |
| |
| <s:GridColumn dataField="@name" |
| minWidth="50" |
| editable="false" |
| resizable="true" |
| headerText="PROPERTY"> |
| <s:itemRenderer> |
| <fx:Component> |
| <s:GridItemRenderer minHeight="14"> |
| <s:Label id="labelDisplay" |
| verticalCenter="1" left="0" right="0" top="0" bottom="0" |
| fontSize="12" |
| paddingTop="3" |
| paddingBottom="3" |
| paddingLeft="3" |
| paddingRight="12" |
| textAlign="right" |
| verticalAlign="middle" |
| width="100%" |
| maxDisplayedLines="1" |
| showTruncationTip="true"/> |
| </s:GridItemRenderer> |
| </fx:Component> |
| </s:itemRenderer> |
| </s:GridColumn> |
| |
| <s:GridColumn dataField="@value" |
| minWidth="50" |
| editable="false" |
| resizable="true" |
| headerText="VALUE" |
| itemRendererFunction="propertiesGridItemRendererFunction" |
| itemRenderer="com.flexcapacitor.views.renderers.ColorPickerRenderer" |
| > |
| <!-- labelFunction="labelFunction"--> |
| |
| </s:GridColumn> |
| <s:GridColumn minWidth="10" |
| editable="false" |
| resizable="false" |
| headerText="" |
| > |
| |
| </s:GridColumn> |
| |
| <!--<s:GridColumn headerText="" |
| minWidth="30" |
| width="30" |
| editable="false" |
| labelFunction="{function(data:Object, column:GridColumn):String{return'...';}}"> |
| </s:GridColumn>--> |
| |
| |
| <!--<s:GridColumn width="50" |
| dataField="@type" editable="false" |
| headerText="type"/> |
| <s:GridColumn width="35" |
| dataField="@style" editable="false" |
| headerText="Style"/> |
| <s:GridColumn width="35" |
| dataField="@inheriting" editable="false" |
| headerText="Inheriting"/>--> |
| |
| </s:ArrayCollection> |
| </c:columns> |
| </c:DataGrid> |
| |
| |
| <s:Group height="28" minHeight="28" width="100%" |
| clipAndEnableScrolling="true"> |
| |
| <!-- TEXT OPTION --> |
| <s:Group width="100%" |
| height="100%" |
| includeIn="text" |
| itemCreationPolicy="immediate" |
| > |
| <s:TextArea id="targetValueText" |
| width="100%" |
| height="100%" |
| borderAlpha="0.2" |
| skinClass="spark.skins.spark.TextAreaSkin" |
| keyUp="targetValueText_keyUpHandler(event)" |
| changing="targetValueText_changingHandler(event)" |
| > |
| </s:TextArea> |
| |
| <s:Button id="booleanTextStyleButton" |
| skinClass="com.flexcapacitor.skins.ClearButton" |
| click="clearStyleButton_clickHandler(event)" |
| right="0" |
| verticalCenter="0"/> |
| </s:Group> |
| |
| |
| <!-- COLOR OPTION --> |
| <s:Group width="100%" |
| height="24" |
| includeIn="color" |
| itemCreationPolicy="immediate" |
| > |
| <components:ColorChooser id="colorChooser" returnType="hexidecimalHash" |
| change="colorChooser_changeHandler(event)"/> |
| |
| <s:Button id="clearColorButton" |
| skinClass="com.flexcapacitor.skins.ClearButton" |
| click="clearStyleButton_clickHandler(event)" |
| right="0" |
| verticalCenter="0"/> |
| </s:Group> |
| |
| |
| <!-- CHOICES OPTION --> |
| <s:HGroup width="100%" |
| height="24" |
| includeIn="formats" |
| itemCreationPolicy="immediate" |
| > |
| <s:DropDownList id="formatCombobox" |
| width="100%" |
| change="formatCombobox_changeHandler(event)" |
| dataProvider="{formatsCollection}"/> |
| <s:Button id="clearFormatButton" |
| skinClass="com.flexcapacitor.skins.ClearButton" |
| click="clearStyleButton_clickHandler(event)" |
| right="0" |
| verticalCenter="0"/> |
| </s:HGroup> |
| |
| |
| <!-- NUMBERS --> |
| <s:HGroup width="100%" |
| height="24" |
| includeIn="number" |
| itemCreationPolicy="immediate" |
| > |
| <s:NumericStepper id="numericStepper" |
| width="100%" |
| valueFormatFunction="formatNumericStepper" |
| change="numericStepper_changeHandler(event)"/> |
| <s:Button id="booleanNumberStyleButton" |
| skinClass="com.flexcapacitor.skins.ClearButton" |
| click="clearStyleButton_clickHandler(event)" |
| right="0" |
| verticalCenter="0" |
| /> |
| </s:HGroup> |
| |
| |
| <!-- BOOLEAN OPTIONS --> |
| <s:HGroup width="100%" |
| height="24" |
| minHeight="24" |
| includeIn="boolean" |
| itemCreationPolicy="immediate" |
| verticalAlign="middle" |
| > |
| |
| <s:RadioButton id="booleanEnabledRadioButton" |
| label="True" |
| group="{booleanGroup}" |
| /> |
| <s:RadioButton id="booleanDisabledRadioButton" |
| label="False" |
| group="{booleanGroup}" |
| /> |
| |
| <s:Spacer width="100%"/> |
| |
| <s:Button id="booleanClearStyleButton" |
| skinClass="com.flexcapacitor.skins.ClearButton" |
| click="clearStyleButton_clickHandler(event)" |
| /> |
| </s:HGroup> |
| </s:Group> |
| |
| </mx:VDividedBox> |
| |
| </s:Group> |
