Components

From HTML5 Builder
Jump to: navigation, search

You can think of components as building blocks to create your web applications quickly.

A component is a PHP class that:

  • Provides a feature. A component can wrap anything, from a one-line snippet of HTML code to a complete PHP library. For example, there are components to access databases, components to display and work with images, components to access mobile hardware features
  • Interacts with other components. Components maintain different kinds of relationships. For example, a component can be visually inside another component. The properties of some components can also point to other components.
  • Inherits from the Component class. The RPCL defines an inheritance tree that allow components to share certain features. For example, all components are AJAX-friendly.

To add components to your webpages, drag them from the Tool Palette into the Designer.

Each compoponent consist of properties, methods and events. Using these, you can set up your components to fit your needs, and interact with them, both server-side (PHP) and client-side (JavaScript).

Features

Properties

They are component’s attributes. Use them to configure your component’s behavior or aspect according to your needs. For example, a component might have a property called BackgroundColor for you to setup the background color the component should be rendered with.

To edit the properties of a component during design time, use the Object Inspector. It writes property definitions to a resource file that is loaded by your PHP script upon execution, separating that way the initilization data from the logic of your application.

Note: The Object Inspector has special editors to make it easier to edit certain types of properties, like colors or item trees.

You can also set property values from PHP like this:

$ComponentName->PropertyName = NewValue;

// Most times, the component will be inside a top-level container, like a [[Page]], so you will use the following syntax instead:
$TopLevelContainer->ComponentName->PropertyName = NewValue;

Certain properties wrap complex features, so a value is not enough for theme. These superproperties provide several subproperties, properties grouped together inside the superproperties. For example, the Layout superproperty has several subproperties: Cols, Rows, Type

Methods

They are actions you can get components to perform, so you can interact with them. For example, a component for email management could have a send() method, and by calling that method you would send an email.

Events

Component events let you define how to react to certain situations that can happen along the life of a component.

Interaction

Client-side Interaction

You can access the different HTML elements that are part of a component and their features (properties, methods and events) from the client using their id. The id of the main HTML element will be usually the server-side Name of the component, and any other elements will generally use the name as the prefix. Knowing the id, you can access the components through a jQuery selector: $("#id").

The selector will provide you with jQuery methods to interact with the element, different from those defined in the DOM; to access the object as defined in the DOM, use jQuery’s get() method: $("#id").get().

For example, if you want to work with an Edit with “MyEdit” as Name, you would reference it as $("#MyEdit"). Then you could get its value using that selector and a method provided by jQuery, or getting the DOM object and accessing the property directly:

// Using jQuery’s val() method. editContent = $("#MyEdit").val(); // Using jQuery to get() the DOM object (HTMLInputElement), // and accessing its ‘value’ property. editContent = $("#MyEdit").get().value;

Aspects

Visibility

Components might or might not have a visual representation on the final webpage.

Non-Visual Components

Components without a visual representation are represented on the Designer by an icon you can interact with. Examples of non-visual components are Database or Geolocation.

Controls

Components with a visual representation are called controls, and they all inherit from the Control class. They are displayed on the Designer as they would look on the final webpage, and you can resize them and move them around. Examples of controls are Button or Canvas.

Relationships

There are different ways components can be related to each other.

Ownership

Every component, when created, is associated to a another component, its owner. The owned component has a property pointing to its owner, while the owner component has a property listing its owned components (in a Collection). That way, you can easily access one component from another, just by navigating the tree of components. Most components cannot own other components; those that can are called containers.

When you create a component, there are two ways you can set its owner:

  • Pass the owner to the owned component constructor:
$myComponent = new MyComponent($ownerComponent);
  • Create an ownerless component and insert it into the owner later:
$myComponent = new MyComponent();
$ownerComponent->insertComponent($myComponent);

Both the owner and the owned are available through public properties, so you can get them easily:

// Get the owner:
$owner = $myComponent->owner;

// Get a Collection of owned components:
$owned = $myComponent->components;

// Iterate through the owned components:
reset($owned->items);
while ( list($name, $component) = each($owned->items) )
{
  // $name holds the name of an owned component.
  // $component points to the component itself.
}

Parenthood

While ownership is common to all components, parenthood is specific to controls, visual components that inherit from Control class. When a control is a child of another control (the parent), the former is visually inside the later. Also, children inherit parent’s visibility, so if your parent control is not visible, neither will be its children.

To create a parent-child relation, just set child’s Parent public property to the parent control:

$childComponent->Parent = $parentComponent;

See Also

Personal tools