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:

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:

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

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).


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:

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!


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:


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

Using layout page

To effectively work with layouts, follow these procedures:

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.