overview-component

Home / Component

Component

One of the most powerful feature on the Elements framework is its components.

Components is basically an user interface object that most users can interact with. Each component have its own specific set of events, methods, and properties. As a developer, you can write script on each component's events to determine the logic of your program.

By default, Elements provide its basic set of components, however you can extend Elements with your own components.

---

Using Components

During design time, you can create components by using the \<component> tag on the corresponding page interface. Each component must have class and name attribute. The class attribute identifies what kind of component is to be loaded, while name is used for identifying the component during scripting.

The most common way to create a component during design time is:

<component class="componentclass" name="identifier">
</component>

The componentclass is the class name of the component to be created, for example if your want to use a button component, then you should set button as the componentclass. If you use your own custom component, you should set the componentclass to its registered class name.

Most component have design properties, and those properties are commonly written as follow:

<component class="componentclass" name="identifier">
  <propertyname value="propertyvalue" />
</component>

However, some components might implement the way it sets the design properties differently.

Additionally, you can also create components during run time, to achieve this, please read the $com scripting object reference.

---

Component Indexing

As you already know, each component must have a name attribute as identifier during scripting. However, in Elements, you can use component indexing to make many components with a same name, on certain cases, this is very useful feature.

To enable component indexing, add an index attribute on each component to be created. For example:

<component class="button" name="cmdmany" index="0">
  <text value="Click Me!" />
</component>
<component class="button" name="cmdmany" index="1">
  <text value="Click Me!" />
</component>
<component class="button" name="cmdmany" index="2">
  <text value="Click Me!" />
</component>

Index should be a positive integer. With indexing you will only have to write a single event handler function for all the component that shares the same name. The index value will be automatically passed to that event handler during runtime.