Print this Page
Concept : Understanding the Property Editor

Page Status: Beta
Jump to: navigation, search
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

To edit a property, you must first locate the property. The Property Editor contains several tabs. Because the Builder machinery is context sensitive, not all the tabs are visible at once. The tabs that appear under different contexts include:

There are various types of UI elements provided for you to edit 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, Internal, Internal Protected, and Internal Private.

  • 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 General Tab

The General tab provides access to properties generally available to all items of that type (and often across types). These properties are also general in that they are not easily categorized within the other tabs. For instance, when you select almost any type in the Builder, you can find the Name property on the General tab. On the other hand, the Access Modifier property appears on the General tab only of the Model portion of a solution (solutions, projects, classes, fields and functions).

[edit] Understanding the Behavior Tab

The Behavior tab exists to provide you access to those properties that affect the behavior of a datatype or a control. For instance, if a control has the ability to provide drag and drop functionality, you can find the properties associated with this behavior on the behavior tab. If you have a field of your class that is also a collection, you find the property affecting the sort behavior (Sort Ascending) of the collection on the Behavior tab.

[edit] Understanding the Boolean Tab

The Boolean tab only appears in select contexts, such as when you add a MultiColumnList control, then use the Column Settings property to Populate the control with columns. When you select a column name within the Edit Columns dialog, the bottom of the dialog displays another version of the Property Editor which includes the Boolean tab.

Properties on the Boolean tab help you to display data within columns that are based on booleans.

[edit] Understanding the Default Tab

The Default tab enables you to set default values for certain controls, such as the TextEdit control. The properties exposed on the Default tab with the TextEdit control, for instance, allow you to determine whether the default value of the field to which the control is bound get displayed to the end user prior to the end user adding data to the control.

[edit] Understanding the Function Tab

The Function tab only appears in select contexts, such as when you add a MultiColumnList control, then use the Column Settings property to Populate the control with columns. When you select a column name within the Edit Columns dialog, the bottom of the dialog displays another version of the Property Editor which includes the Function tab.

Properties on the Function tab help you to display a function Button within the control and then to set the properties (such as Parameters) associated with the Button.

[edit] Understanding the Interface Tab

The Interface tab presents a different UI 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 Interface 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 Interface Type (Left) Column

On the Interface tab, the left column is sub-divided into an alphabetized list (in bold) of interface types. The types that appear in the left-hand column (depending on the control you have selected in the Design Editor) include:

  • Adapters
  • Forms
  • Functions

Each interface type in turn displays a list of property names. Below each property name, the icon for the interface type appears next to the interface assigned by default (if any) to the control. For your convenience, many of the properties have default settings that assign a system-provided interface to the control.

For example, for the List control (shown in the image below), the Adapter Interface type (labeled Adapters) contains two properties (Element, Selection) Each of these properties displays the interface assigned by default with the properties (ListElementInterface and ListInterface, respectively). The List control also displays a list of properties providing access to function interfaces 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] Adapters

With a property in the Adapters section of the left-hand column selected, in the right-hand column, you can:

  • Assign an adapter interface to the control.
  • Add an adapter to the class to which the control is bound.

    Note The properties and default interfaces that enable adding an adapter only appear in the Adapters 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 an adapter interface, the right-hand column provides access to adapter interfaces in the Adapter Interface field. Clicking the ellipsis button [...] invokes the Choose AdapterInterface dialog that allows you to change the interface assigned to the control by default. If you do assign a different interface, and then decide you want to revert to the default, you can do so by clicking the Set Default Interface 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 Interface button.

For an adapter interface that facilitates adding an adapter to the class to which the control is bound (for example, a ListInterface—which allows you to add the ListAdapter), the Adapter field also appears. Clicking the Add button adds an adapter that implements the interface type you assigned to the control.

Note For interfaces that faciliate adding adapters to a class other than that to which the control is bound (for example, the ListElementInterface—which allows you to add ListElementAdapter), the Adapter field is not visible in the right-hand column. For such interfaces, you must add such an adapter directly to a class, or by binding a control.

[edit] Opening an Adapter for Editing

You can also open an adapter for editing directly from the right-hand column by clicking the edit button (the first button after the Adapter 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 interface 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 Interface field setting in the right column is <not set>. You can assign an interface to the control by clicking the ellipsis button [,,,] next to the Form Interface field. 

Note Unlike the Adapter Interface field, the Form Interface field does not display a Set Default Interface button. This is because there are system-provided form interfaces 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 Interface field has previously been set to the RowDetail interface.

[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 interface 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 interface)
  • Assign (bind) the same interface 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. 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 interface 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 interface, the right-hand column provides access to function interfaces in the Function Interface field. Clicking the ellipsis button [...] invokes the Choose FunctionInterface dialog that allows you to change the interface assigned to the control by default. If you do assign a different interface, and then decide you want to revert to the default, you can do so by clicking the Set Default Interface 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 Interface button.

Note Although there are default interfaces 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 Interface button assigns the default interface 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 Interface field, there is a Current Function field. If you have yet to assign a function interface 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 interface to the function you select, the Bind button on the far right enables you to do so. Because the Drag-Drop function interface 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 interface 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 interface, 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] Understanding the Layout Tab

The Layout tab appears when you select a form or a control. The properties that you access through this tab provide you the ability to apply geometry management to your application interface, and to affect the height, width, max height, etc. of a control or a form.

[edit] Understanding the License Tab

The License tab appears when you select a solution, projects, or classwithin the Solution Explorer. The Lincense tab provides access to the properties that let you determine the license under which you want your application pieces to be made available to others within the Share.

[edit] Understanding the Notes Tab

The Notes tab appears whenever you select any solution, projects, interface, class, field, functions, form, or adapter. While developing, when you select the Notes tab for any type, you can add any notes you would like, either for your own edification (for example, as a "to do" list), or to aid other developers in your DesignGroups, or those who may import your code from the Share.

You can add formating to your notes by adding any HTML you want directly within the Notes.

You view the notes for any of the areas mentioned above by right-clicking on (for example) a class and choosing View Notes from the right-click menu. When you import a project from the share, any notes for that project get auto-displayed when you select the project in the Solution Explorer. 

[edit] Understanding the Numerics Tab

The Numerics tab appears when you select controls that can display numerical data to your end users. The Numerics tab provides access to properties that enable you to instruct the control how to display numbers to your end user, for example, how many digits should appear to the right of the decimal point in a float or a double.

[edit] Understanding the Object Edit Tab

The Object Edit tab only appears in select contexts, such as when you add a MultiColumnList control, then use the Column Settings property to Populate the control with columns. When you select a column name within the Edit Columns dialog, the bottom of the dialog displays another version of the Property Editor which includes the Object Edit tab.

The Object Edit tab provides properties that enable you to specify how to display forms representing the object to which the control is bound.

[edit] Understanding the Popup Tab

The Popup tab appears only when you invoke the DialogProperties window (by clicking the ellipsis button [...] on the Advanced property for the Open Dialog statement.

The properties on the Popup tab enable you to set popup dialog attributes.

[edit] Understanding the String Tab

The String tab only appears in select contexts, such as when you add a MultiColumnList control, then use the Column Settings property to Populate the control with columns. When you select a column name within the Edit Columns dialog, the bottom of the dialog displays another version of the Property Editor which includes the String tab.

The String tab provides properties that affect how strings are handled or displayed to the end user.

[edit] Understanding the Style Tab

The Style Tab provides access to properties that allow you to apply formatting and other styles to appropriate areas of your application, such as forms and controls. The Style tab is also available when you select projects in the Solution Explorer. In this case, the property available there (Default Style Sheet) allows you to assign a specific style sheet to all forms in the entire project.

[edit] See Also

Overview : Building a Bungee-powered Application
Introduction to Bungee Builder
Understanding the Design Editor
Adding an Interface
Using Function Interfaces

[edit] Tags

Retrieved from "http://docs.bungeeconnect.com/wiki/index.php/Concept_:_Understanding_the_Property_Editor"
    Copyright © 2005 - 2008 Bungee Labs. All rights reserved.