-
Notifications
You must be signed in to change notification settings - Fork 3
13 The Property Inspector
View this tutorial's changes on GitHub.
If you're working with the tutorial repo, open a Git Shell in the CoreEditor-HelloWorld-Example-as folder and run the following command:
git checkout -f step-13
Otherwise, follow the instructions below.
In this tutorial we are going to explain what the Property Inspector is, and how you can utilise it to do a lot of the heavy lifting involved with editing properties on items.
The Property Inspector is a UI component and can be found in the CoreUI framework. It’s not dependant on the CoreEditor Application in any way. It has a ‘dataProvider’ property to which you can assign any value. The property inspector uses introspection to find any properties on its dataProvider that have been marked with the [Inspectable] metadata tag. For each property it finds, it adds a row to its display with the left column showing the name of the property, and the right column showing the value.
The property inspector allows the user to click one of these rows, and edit the property with an Item Editor. We’ll talk more about these later.
So how does this PropertyInspector class get used in the CoreEditor Application? The CoreEditor_Extensions project contributes a PropertiesPanelContext class. You can open this panel by selecting Window->Properties. This Context’s View uses an instance of the PropertyInspector component to do most of the work.
The PropertiesPanelContext monitors the CoreEditor.contextManager for changes to the current context. Specifically it is looking for IInspectableContexts which extends ISelectionContext. Each time the selection changes on an IInspectableContext, it will set the PropertyInspector’s dataProvider property to the first item in the selection.
To see this working, we are going to update our HelloWorldContext to be an IInspectableContext. You’ll notice that we’ve removed the code previously responsible for checking when a new string is selected, as we’re now going to let the PropertyInspector do this for us.
We will simply populat the selection ArrayCollection with a new business object, which we will create now. Add the following class to your project:
package helloWorld.entities
{
public class ExampleObject
{
[Inspectable]
public var propertyA :String = "This is property A";
[Inspectable]
public var propertyB :Number = 12345;
[Inspectable ( editor="ColorPicker" )]
public var propertyC :uint = 0xFFFFFF;
[Inspectable]
public var propertyD :Boolean = false;
public function ExampleObject ()
{
}
}
}Now update your HelloWorldContext class with the following code:
package helloWorld.contexts
{
import flash.display.DisplayObject;
import core.appEx.core.contexts.IInspectableContext;
import core.appEx.core.contexts.IVisualContext;
import core.data.ArrayCollection;
import helloWorld.entities.ExampleObject;
import helloWorld.ui.views.HelloWorldView;
public class HelloWorldContext implements IVisualContext, IInspectableContext
{
private var _view :HelloWorldView;
private var _selection :ArrayCollection;
public function HelloWorldContext()
{
_view = new HelloWorldView();
_selection = new ArrayCollection();
_selection.addItem( new ExampleObject() );
}
public function get view():DisplayObject
{
return _view;
}
public function dispose():void
{
}
public function get selection():ArrayCollection { return _selection; }
}
}If you run the application now, and make sure you have both the Windows->Properties and Window->Hello World panels open. You should immediately see your example object being inspected in the Properties panel. You’ll notice that even if you switch to another non-inspectable context (such as the properties panel itself), the property inspector continues to show your example object. This is because the Properties Panel uses a feature of the ContextManager to ‘fall back’ the the most recently compatible context type it is looking for (remember getLatestContextOfType() ?).
By default, the PropertyInspector component will auto-select a type of item editor that is appropriate for the type of the property being edited. Here is a list of all the default item editors, and the data types with which they are associated:
core.ui.components.TextInput String
core.ui.components.CheckBox Boolean
core.ui.components.NumericStepper
core.ui.components.NumberInput Number, int, uint
core.ui.components.ColorPickerItemEditor
You’ll notice that there are a few editors in there that don’t get used by default to edit a certain data type. If you want to use these editors to edit a particular property then you will need to manually specify this in the metadata, e.g.
[Inspectable( editor="ColorPicker" )]
public var propertyC :uint = 0xFFFFFF;The ‘editor’ parameter is the id of the item editor registered with the PropertyInspector that you wish to use. You will also need to manually specify the editor for any custom item editors you add yourself (more on this in the next tutorial).
You can specify more key/value pairs in the metadata if you wish. For example
[Inspectable( editor="DropDownMenu", dataProvider="[String A,String B,StringC]" )]
public var propertyA :String = "This is property A";When the PropertyInspector creates the Item Editor, it parses any additional metadata key/values and passes them on to the editor. So in this example, when the PropertyInspector creates a DropDownMenu editor for ‘propertyA’ above, it will loop through all the additional metdata key/value pairs you have specified to see if the editor has any properties with the same name. The DropDownMenu control has a ‘dataProvider’ property, so this will be set to value specified in the metadata. The PropertyInsepector will try to smartly figure what data type you are expressing in the metadata, in this example it determines it is an array by spotting the [] at the start and end).
You can also specify a tooltip in the metadata like this
[Inspectable(toolTip="This is a tooltip for this property on this object")]This tooltip will be shown when you mouse-over a property field on the PropertyInspector.
One final thing to note. The PropertiesPanel will also make use of a context’s operationManager if it is an IOperationManagerContext. And changes made by the item editors will be wrapped up into an Operation and added to the context’s operationManager, ensuring that any changes made with the PropertiesPanel are undo-able.