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, Eventsand 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:
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 properties
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.
Specialinput
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,
whichhandler 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)