Concept : Understanding the Property Editor
Contents |
[edit] Description
The Property Editor allows you to change the values of the properties on items selected either in the Solution Explorer, Solution Detail, or Design Editor. The properties for an item are organized in categories (tabs) along the top of the Property Editor.
When you select an item in the Solution Explorer, Solution Detail, or Design Editor, the interface in the Property Editor changes to display the relevant properties for that item. In the upper left corner of the Property Editor, the icon for the type of item selected and the name of the item selected appear together. Property names appear in the left column of the Property Editor, and the interface for changing the property values appear in the right.
The following two figures show the properties for a class (top figure) and a field (bottom figure). Some properties apply to more than one type of item. If you do not understand a property's purpose, click the property name. This invokes a separate property documentation window.
[edit] Editing Properties
There are various interface types used for editing properties in the Property Editor, such as, Comboboxes, sites, Checkboxes, TextEdit boxes, Dialog boxes.
- Combo box A combo box lets you choose from a fixed list of definitions for the property. For example, in the figure below, for Access Modifier, you can choose from Public, Protected, Private, and Internal.
- Site A site can be displayed as a combo box and dialog box (or text edit box). Use the combo box to select the Type for the site (see below). For all types except Data and Expression, use the ellipsis button [...] to display a dialog box (also known as a chooser). The dialog box lets you choose the specific item for the property. For Data and Expression, a text box replaces the ellipsis button. Type the data value or expression directly into the text box. To clear a site, click the clear button.
- Check Box Checkboxes let your turn a property on or off (true or false). When the check box is selected, the property is on (true). When the check box is cleared, the property is off (false). In the example below, Is Collection is turned on (true).
- Text Box Some properties, such as Name (shown below), have a Text box. Type the exact value for the property in the text box.
- Dialog Box When you must select an object or setting from a dialog box, an ellipsis button is available for the property. Click the ellipsis button to display the property. For example, the dialog box for the Enumeration property is shown below.
[edit] Understanding the Adapter Tab
The Adapter tab presents a different interface than the rest of the Property Editor, and provides wizard-like functionality. While there are still two property columns (left and right), the items in the columns in the Adapter tab take up more display room and invoke different functionality than do the columns in the other tabs in the Property Editor.
[edit] Understanding the Adapter Type (Left) Column
On the Adapter tab, the left column is sub-divided into an alphabetized list (in bold) of adapter types. The types that appear in the left-hand column (depending on the control you have selected in the Design Editor) include:
- Connections
- Forms
- Functions
Each adapter type in turn displays a list of property names. Below each property name, the icon for the adapter type appears next to the adapter assigned by default (if any) to the control. For your convenience, many of the properties have default settings that assign a system-provided adapter to the control.
For example, for the List control (shown in the image below), the Connection Adapter type (labeled Connections) contains two properties (Element, Selection) Each of these properties displays the adapter assigned by default with the properties (ListElementAdapter and ListAdapter, respectively). The List control also displays a list of properties providing access to function adapters under the Functions type header.
Note If you have not bound the control to a member of your class, neither the Element property nor the Functions category appear.
[edit] Understanding the Property Value (Right) Column
At the top of the right-hand column, a documentation link appears next to the Property field. This link dynamically updates with name of the property you currently have selected in the left-hand column. The rest of the column also dynamically updates according to the property you select in the left-hand column.
[edit] Connections
With a property in the Connections section of the left-hand column selected, in the right-hand column, you can:
- Assign a connection adapter to the control.
- Add a connection to the class to which the control is bound.
Note The properties and default adapters that enable adding a connection only appear in the Connections section after you bind the control to a member of your class.
For example, in the image above, the Selection property is selected. Because the Selection property provides access to a connection adapter, the right-hand column provides access to connection adapters in the Connection Adapter field. Clicking the ellipsis button [...] invokes the Choose ConnectionAdapter dialog that allows you to change the adapter assigned to the control by default. If you do assign a different adapter, and then decide you want to revert to the default, you can do so by clicking the Set Default Adapter button. You can also set the property to <not set> by clicking the Clear button . You can reset the default value again by clicking the Set Default Adapter button.
For a connection adapter that facilitates adding a connection to the class to which the control is bound (for example, a ListAdapter—which allows you to add the ListConnection), the Connection field also appears. Clicking the Add button adds a connection that implements the adapter type you assigned to the control.
Note For adapters that faciliate adding connections to a class other than that to which the control is bound (for example, the ListElementAdapter—which allows you to add ListElementConnection), the Connection field is not visible in the right-hand column. For such adapters, you must add such a connection directly to a class, or by binding a control.
[edit] Opening a Connection for Editing
You can also open a connection for editing directly from the right-hand column by clicking the edit button (the first button after the Connection field).
[edit] Forms
With a property in the Forms section of the left-hand column selected, in the right-hand column, you can assign a form adapter to the control. The Forms section appears when you have selected a control such as the FormList control or the DynamicForm control in the Design Editor. By default, the Form Adapter field setting in the right column is <not set>. You can assign an adapter to the control by clicking the ellipsis button [,,,] next to the Form Adapter field.
Note Unlike the Connection Adapter field, the Form Adapter field does not display a Set Default Adapter button. This is because there are system-provided form adapters assigned by default to the control.
In the image below, a FormList control has been selected. This causes the Forms section of the left-hand column to be visible. The Element Form property within this category is selected. The Form Adapter field has previously been set to the RowEditDetail adapter (a custom adapter).
[edit] Functions
With a property in the Functions section of the left-hand column selected, in the right-hand column, you can:
- Assign (Bind) a function adapter to the control
- Add a function to the class to which the control is bound (or update a previously existing function's signature to match the requirements of a particular function adapter)
- Assign (bind) the same adapter to the function so user interactions with the control cause the proper function to fire
Or - You can do all three at once by selecting a property and prior to doing any of the three options individually, clicking the Add button. Doing so adds a function that implements the correct signature to your class, and binds the control to the function (assigns the default adapter to both the control and the function).
For example, in the image below, the Drag-Drop property is selected. Because the Drag-Drop property provides access to a function adapter, the right-hand column provides access to function adapters in the Function Adapter field. Clicking the ellipsis button [...] invokes the Choose FunctionAdapter dialog that allows you to change the adapter assigned to the control by default. If you do assign a different adapter, and then decide you want to revert to the default, you can do so by clicking the Set Default Adapter button . You can also set the property to <not set> by clicking the clear button . You can reset the default value again by clicking the Set Default Adapter button.
Note Although there are default adapters for each of the properties in the Functions category in the left-hand column, currently the properties display <not set> by default. Clicking the Set Default Adapter button assigns the default adapter to the control.
[edit] Setting the Current Function
With a property in the Functions section of the left-hand column selected, in the right-hand column, under the Function Adapter field, there is a Current Function field. If you have yet to assign a function adapter to any function in your class, this field displays a value of <not set>. To set the Current Function field, you can either:
- Click the Add button which adds a system-provided function (with the proper signature) called onDragDrop to your class.
- Select a function from the list of all functions in the current class (just below). If you have not assigned the Drag-Drop function adapter to the function you select, the Bind button on the far right enables you to do so. Because the Drag-Drop function adapter requires a function using the drag-drop functionality to have a certain function signature, if the function you select and Bind lacks the proper argument(s), you are given the option of adding the proper signature when you bind the function. This is true even if you have already assigned the Drag-Drop function adapter to the function. After clicking Bind, you are presented with a dialog that informs you the function signature is not compatible with the Drag-Drop function adapter, and asks if you would like to correct that. If you answer in the affirmative, the proper arguments are added to your function's signature.
[edit] See Also
Overview : Building a Bungee-powered Application
Introduction to Bungee Builder
Understanding the Design Editor
Adding an Adapter
Using Function Adapters