User's guide to the Component Inspector


Index


What is it?

    The Component inspector is an important part of Xelfi visual programming system. Its purpose is given mainly by its name. With Component Inspector one can inspect and set properties, events and layout properties (shortly some attributes of the component).

    Component Inspector (CI) consist of three pages and selection choice (combo box). Pages are called Properties, Events and Layout. User can switch between these pages by clicking tab controls in the below part of the CI. Selection choice contains all components of the inspected form or all menu items of the inspected menu, depending on what is inspected ("inspectable objects" are contents of form editor and menu editor, e.g. forms and menus).

    Note: Layout page is activated only under special circumstances, see Layout page paragraph for details.


The Component Inspector's window

    There can be only one Component Inspector's window at a time in the Xelfi system. The window can be showed or hidden, depending on user's choice. It is possible to show/hide inspector's window using the Xelfi toolbar or using the Xelfi menu Window/Component Inspector. Position and visibility of the Component Inspector window can be saved at the Xelfi exit and restored at next startup.


Viewing component's attributes

    If you want to view component's attributes (it doesn't matter if they're properties, events or layout properties...), you will have to select specified component.
    There are two possible ways:

    • use selection choice to select component
    • select component in the form editor or in the menu editor

    Note that there's a possibility to view more than one component at a time using multiple selection.


Editing component's attributes

    Again, editing procedure is exactly the same for properties, events and layout properties. To edit some of the component's attributes, perform these steps:

    • choose attribute you want to edit
    • click mouse on box which contains chosen property's value. The box should now switch to edit mode and change its appearance to some input control. Type of input control tightly depends on type of the specified attribute.
    • enter new value using input control
    • pres Enter key to commit changes (or Esc key to abandon them)

    Note: Editing remains exactly the same when multiple components are selected. A change to property value will be made to all selected components.


Selection choice

    • Purpose
      Selection choice provides a way how to select components and start their inspecting in CI. Choice shows names (names are values of special property Name) and class types of the components on the form or in the menu.
    • Using
      Using selection choice is easy. Open choice (by clicking the mouse on the left side arrow) and choose component or menu item which you want to inspect. The CI will fill itself with attributes of newly selected component.

    Note: Selecting new component in selection choice will not change selected page.

    Note: Another way how to select a component is to select it in the inspectable windows (form editor or menu editor).

    • Multiple selections
      • How it works
        Important feature of the Component Inspector is that it is able to inspect not only one, but many selected components at a time. How this is possible? The Component Inspector will choose a set of properties common to all selected components and show them. But what about values? When the value of specific property is the same in all selected components, the Component inspector will show this value in its normal shape. If this is not the case, the Component Inspector will show special reserved value "<multiple>", which means that there are different values.
      • How can I select multiple components
        You can select it using the Form Editor's selection feature. See the Form Editor's user's guide for more info. But beware! The Menu Editor has no such feature.
      • Selection choice and multiple selections
        As mentioned above, selection choice can select only one component at a time. There's no way to select multiple components using th selection choice. When multiple selection occurs, selection choice will show you blank item, meaning that it cannot show more than one component at a time.


Properties page

    On the properties page you can view, inspect and set properties of the component.

    Properties are one kind of the components' attributes.
    They can affect:

    • look of the component (for example Button's properties like Label (button's caption) or Font (font in which is caption written))
    • component's behavior (Button's property Enabled, which says whether is button enabled to the user or not).

    Types of the properties

    There are several types of the properties. Understanding them is important for good work with CI. So let's explain them!

    • String properties
      Values of these properties are strings. String properties can be edited using textfield (edit line). Edit line will appear when you enter edit mode of string property. Examples of such properties are button's Width or Label.
      Note that there are some special string properties.
      • Property Name is compulsory for every component. It specifies the name of the component which will be used in automatic code generation as a name of the instance variable for this component.
      • Properties X, Y, Width, Height are compulsory for every visual component. It makes sense, because you will need to know where to find them of the form.
    • Boolean propertiesEditing boolean property
      Boolean properties can have two states - true / false. You can set them using checkbox which is shown in the CI in edit mode. Good examples can be properties Enabled, ParentFont etc.
    • Set-of properties
      User can choose value of this type of property from a set of predefined fixed values. In edit mode, the CI will respond with choice (combo box) filled with names of values in the predefined fined set. Open the choice and choose new property value by clicking on proper item. Label's Alignment property could be good example.
      Note: There's a special set-of property called Layout. Only containers can have this property. Layout property shows name of layout manager, which is currently attached to the container. Remember that Absolute positioning is also layout manager (but it does layout nothing).
    • Char properties
      Value should be single char. Editing is nearly identical as in the case of String properties. The only difference is that user is not allowed to enter more or less than single char. This type of doesn't occur very often, example can be Echo Char property of the TextField component.
    • Special input properties
      Some of the properties cannot be easily set with only one input control. They usually need more input controls to define their value. For example Font or Color property. Font cannot be represented by single value, on the contrary it has size, color, style....
      We call these properties Special input. Their value is often the composite of simpler properties. When switched into edit mode, the CI will show you button with three points. It indicates that setting of such property needs to be done using some so called "special input dialog". Special input dialogs can be very variable depending on type of the special property. You will easily imagine that Font's special dialog will differ from Color's one.


Events page

    Events page shows events that can be created as a reaction after some action on the component. The easiest example could be Button's event called OnClick, which handler is called when button is pressed. Left side of the CI has events names. The name of each event should start with the word "On". On the contrary, right side shows event handler method names. Handler method is a method which is called in response to the incoming event.

    Event values

    Event values (= event handler method names) are always strings. That's why thay belong to the String properties and as such they are also edited. You can type event handler method name to the edit line.
    Note: Value [none] means that no event handler method is attached to the specified event.

    Automatic event naming

    It could be real pain to create proper event handler names. You can make Xelfi create the name for you automatically. How to accomplish this? Simply :-) Double click on the box with the event name (left side - not event handler name!) and proper name will be generated. The name is generated using the template component's property Name value + event name.
    Example should make it cleaner: Generated event handler name for component with name "button1" and event name "OnClick" will be "button1OnClick".

    Event code generation

    Generally said, every modification of event handler method name will affect source code in some way. We can divide modifications into three basic types:

    • Assigning event handler
      Suppose that specified event handler doesn't exists yet (its name is set to "[none]"). You can assign new event handler method by typing its name into edit line (or use automatic event naming). Source code for event method header will be generated and added to the container's source code.
    • Renaming existing event handler
      Enter edit mode and here you can retype event handler name using edit line. Event method header in source code will be modified to suit new event handler name. You can even watch this change directly in editor window (when you scroll to the proper area of source code).
    • Removing event handler
      Again enter edit mode and delete existing event handler name. Box containing event handler name should change its content to "[none]".
      Note: Event handler method code will not be deleted. It could contain useful code, so you have to delete it manually.


Layout properties page

    Layouts are one of the things in which is Xelfi system starring. You can find layouts probably in no other IDE product. Layouts in Xelfi system allows you to build visually not only absolute-positioned forms like other IDE products, but also layouted, resize-enabled forms. For more explanations what Layouts are and how it works see Form editor documentation.

    How layout page works and when is disabled

    • Layout page works simply. Layout page shows layout properties of the components which are layouted in the parent container.
    • Layout page is disabled for components which have no parent container or for components which are not visible. For example form itself has no parent container, so it cannot be layouted. Menu, on the contrary, has parent container, but also has fixed position below the caption of the form, so it also cannot be layouted.

    Using layout page

    To effectively work with layouts, follow these procedures:

    • Make whole form selected and set form's Layout property to the layout manager which you want to use.
    • Add components which should be layouted to the form.
    • Select the component which you want to be layouted in some way.
    • Choose Layout tab in the tab control.
    • Inspect and edit layout properties in the exactly same way like in properties page.
    • Watch your changes immediatelly on the form.

    Note: For simple layout managers (like Absolute positioning or Flow layout) are no properties available. So don't worry when you will see layout page blank.


Table of possible actions and their meanings

    User action What does it mean
    Mouse clicked on the attribute name (left side) Enter editing of attribute value. Does nothing when already in edit mode.
    Mouse clicked on the attribute value (right side) Enter editing of attribute value when not in edit mode.
    Enter key pressed Finish edit mode and save attribute changes. Works only in edit mode.
    Esc key pressed Escape edit mode and abandon changes. Works only in edit mode.
    Up/Down key arrow pressed Switches previous/next attribute to edit mode.
    Mouse clicked on page tab Clicked page is selected, if possible (for Layout page)
    Choosing component's name in selection choice Starts inspecting of chosen component
    Mouse clicks on vertical scrollbar Scrolling the content
    Mouse double-clicked on attribute's name (left side) Automatically generate event handler method name. Works only on Events page.