The value of Cursor is one of the available cursors for the browser, in the IDE you have a drop-down list to select a valid value for this property, which can be one of the following:

crPointer - The cursor is a pointer that indicates a link.

crCrossHair - A simple crosshair (e.g., short line segments resembling a "+" sign).

crText - Indicates text that may be selected. Often rendered as an I-bar.

crWait - Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.

crDefault - The platform-dependent default cursor. Often rendered as an arrow.

crHelp - Help is available for the object under the cursor. Often rendered as a question mark or a balloon.

crEResize - Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.

crNEResize - Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.

crNResize - Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.

crNWResize - Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.

crWResize - Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.

crSWResize - Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.

crSResize - Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.

crSEResize - Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.

crAuto - The UA determines the cursor to display based on the current context.

Use the Height property to read or change the height of the control.

Use the Hint property to provide a string of help text, either as a Help Hint or as help text on a particular location such as a status bar.

A Help Hint is a box containing help text that appears for a control when the user moves the mouse pointer over the control and pauses momentarily.

To set up Help Hints:

Specify the Hint property of each control for which a Help Hint should appear.

Set the ShowHint property of each appropriate control to true, or set the ParentShowHint property of all controls to true and set the ShowHint property of the form to true.

This function returns the attribute for the hint that can be included in any tag. The attribute's name is "title". If the hint is defined and can be shown a is string with the attribute, otherwise an empty string.

This property must match with the ActiveLayer property of the parent control for the component to be shown. It allows you to create stacked interfaces and then switch the active stack by changing ActiveLayer.

If parent control does not implement ActiveLayer, you do not have to worry about this property.

If the control is contained in another control, the Left and Top properties are relative to the parent control. If the control is contained directly by the form, the property values are relative to the form. For forms, the value of the Left property is always 0.

The Top property, like the Left property, is the position of the control relative to its container. Thus, if a control is contained in a Panel, the Left and Top properties are relative to the panel. If the control is contained directly by the form, it is relative to the form. For forms, the value of the Top property is always 0

Use the Width property to read or change the width of the control.

If true, the control should adjust to the selected layout. This property can be used by a Layout component to render the component it contains.

In the current implementation, is only used in a few controls. The goal is to replicate the Align model present in VCL for Windows in VCL for PHP.

For example, Label uses it to align the text to show. If you are a component developer, you can implement this property and use it to change the alignment of information.

This is an array property you can use to specify, for tag based controls, some extra attributes to be included in the tag generation.

This property can be used by component developers to generate code that adjusts to the size of the parent cell/div/etc. It's useful for templated forms.

Use Caption to specify the text string that labels the control.

Caption property which is defined in the Control class. If used by the control, is in sync with the Name when the control is first dropped on the designer. The usage of this property depends on the component, for example, Caption for Button components is the text inside the button while for Page components, is the title of the HTML document.

Note: Controls that display text use either the Caption property or the Text property to specify the text value. Which property is used depends on the type of control. In general, Caption is used for text that appears as a window title or label, while Text is used for text that appears as the content of a control.

Color property, defined in Control class, usually define the main color for the component, it's responsability of the component developer to use the property to generate the appropiate code and reflect the color setting. This property follows the HTML/CSS color specification, for example: #FF0000 -> red color or can also be "red"

If a control's ParentColor property is true, then changing the Color property of the control's parent automatically changes the Color property of the control. When the value of the Color property is changed, the control's ParentColor property is automatically set to false.

Valid settings are:

csAcceptsControls - Indicates to the IDE this control accepts children controls inside.

csImageContent - Indicates to the IDE the content dumped by this component is image binary data.

csSlowRedraw - Indicates to the IDE this component uses javascript and needs more time to get repainted.

csVerySlowRedraw - Indicates to the IDE this component uses javascript and needs a lot more time to get repainted.

csRenderOwner - Indicates to the IDE to render the Owner along with the control.

csDesignEncoding - Indicates to the IDE to use a different encoding for the HTML produced by the component.

csRenderAlso - Indicates to the IDE to also render components of a specific class.

csTopOffset - Indicates to the IDE to capture the control image from different coordinates.

csLeftOffset - Indicates to the IDE to capture the control image from different coordinates.

csTemplateOutput - Indicates this component produces output valid for a template

This is a property a component developer can use to simplify the design of controls. The goal is that this property is only used at design-time. For example, Label control uses it to allow you set a background color which will only be visible at design-time, so you can freely set the Font color and still see the contents.

Use this property to specify if the control must be wrapped by a div or not. The usage of this property is leave to the component developer discretion.

Use Enabled to change the availability of the control to the user. To disable a control, set Enabled to false. Disabled controls appear dimmed. If Enabled is false, the control ignores mouse, keyboard, and timer events.

To re-enable a control, set Enabled to true. The control is no longer dimmed, and the user can use the control.

Disabled controls must not react to user interaction and must show a different color or aspect to specify that to the user. Do not confuse this with ReadOnly properties, as ReadOnly controls may allow the user to copy information. Disabled controls do not allow any operations with it.

This property is an object property, so you can individually set specific attributes for it, for example, Font->Color.

In the IDE, this property shows a list of all properties of Font class so you can set them individually

Checks the Style property also, as that property also influences the aspect of the Control.

You can use this property to specify the control should not be shown on the browser, but the code for it will be generated, this is useful if you want to use javascript code to make the control visible.

If true, control will be generated into a div tag and won't visible when the application is executed. You will need to use Javascript events to show it.

This is useful for creating hover areas. For example, on a Panel containing controls, if IsLayer is true, you can write javascript code on the OnMouseOver javascript event of a Button to show that layer so you get a nice effect.

Returns assigned javascript events as attributes for the tag. This function is useful to get the tags to assign javascript events to the right code.

There should be one hidden field for each component that can forward JS events to the PHP script. It is the responsiblity of the component to add this field.

Use the Parent property to get or set the parent of this control. The parent of a control is the control that contains the control. For example, if an application includes three radio buttons in a group box, the group box is the parent of the three radio buttons, and the radio buttons are the child controls of the group box.

To serve as a parent, a control must be an instance of a descendant of FocusControl.

When creating a new control at runtime, assign a Parent property value for the new control. Usually, this is a form, panel, group box, or some control that is designed to contain another. Changing the parent of a control moves the control on the browser so that it is displayed within the new parent. When the parent control moves, the child moves with the parent.

To have a control use the same color as its parent control, set ParentColor to true. If ParentColor is false, the control uses its own Color property.

Set ParentColor to true for all controls in order to ensure that all the controls on a form have a uniform appearance. For example, if ParentColor is true for all controls in a form, changing the background color of the form to gray causes all the controls on the form to also have a gray background.

When the value of a control's Color property changes, ParentColor becomes false automatically.

To have a control use the same font as its parent control, set ParentFont to true. If ParentFont is false, the control uses its own Font property.

Many controls default ParentFont to true so that all the controls in a form or other container present a uniform appearance. When the value of a control's Font property changes, ParentFont becomes false automatically.

When ParentFont is true for a form, the form uses the default font.

Use ParentShowHint to ensure that all the controls on a form either uniformly show their Help Hints or uniformly do not show them.

If ParentShowHint is true, the control uses the ShowHint property value of its parent. If ParentShowHint is false, the control uses the value of its own ShowHint property.

To provide Help Hints for only selected controls on a form, set the ShowHint property to true for those controls that should have Help Hints. ParentShowHint becomes false automatically.

Note: Enable or disable all Help Hints for the entire application using the ShowHint property of the application object.

Assign a value to PopupMenu to make a pop-up menu appear when the user selects the control and clicks the right mouse button.

The value for this property must be a PopupMenu component. If you are working on the IDE you will get a drop-down on the Object Inspector with valid values for it.

The Help Hint is the value of the Hint property, which is displayed in a box just beneath the control. Use ShowHint to determine whether a Help Hint appears for the control.

To enable Help Hint for a particular control, the application ShowHint property must be true and either:

the controls own ShowHint property must be true, or

the controls ParentShowHint property must be true and its parent's ShowHint property must be true.

For example, imagine a check box within a group box. If the ShowHint property of the group box is true and the ParentShowHint property of the check box is true, but the ShowHint property of the check box is false, the check box still displays its Help Hint.

Changing the ShowHint value automatically sets the ParentShowHint property to false. Also checks the Hint property, which specifies the text to be shown.

CSS style to be used when rendering the component, the style must be included in a .css file referenced by the Page component. You can use OnShowHeader to write the code to include the stylesheet or use the StyleSheet component. Using the StyleSheet component you will be able to see the style rendered in design-time, and this property will be shown as a drop-down with the styles available in the linked stylesheet

Return the normalized CSS style without the starting dot if any.

This property determines if the control is visible at run-time or not. Use it to hide this control when generating the page. Note: The behaviour can be different than in VCL for Windows. Since the control uses javascript to get rendered, you might not be able to access it using javascript as the code won't be generated.

If you want to get a control code on the browser but not being visible, you should use javascript to hide the control.

The wrapper is used to notify the PHP script that an event occured. The script then may fire an event itself (for example OnClick of a button).

A control can be shown if it has no parent and its Visible property is true.

If it has a parent:

-if parent has Layer handling properties, checks Visible property if Parent can be shown and Layer matches with the Activelayer.

-else, checks the visible property and if the parent can be shown.

This method iterates through all the children list, dumping all of them to the output using the show method.

Inherit and fill this method with the code your control must generate. This is one of the main methods in the VCL for PHP as it is responsible for generating the code for the controls. When developing components, you should override this method and write your component code here.

Dumps Javascript events. This method is called by the Page component to dump in the <head> section of the document all the javascript functions containing the code the user has written. Control class dumps the standard HTML javascript events. You can override it to dump yours.

Don't forget to call the parent:: method if you want the standard ones to get dumped.

Shows control contents. You can use this method to show the contents of the control, optionally, by setting $return_contents to true. You can get the contents of the control returned instead of having it dumped to the output.

This method also checks if the global var has $output_enabled. You can globally disable output of controls by setting that var to false.

This method is also responsible to call beforeshow and aftershow events

You don't need to call this method, is called by Control to update all properties that have a Parent relative.

These include ShowHint, Color and Font.

This event is fired when the user click an element, other than the active element of the document, or use the keyboard to move focus from the active element to another element. Also can be fired if the script invokes the setActive method on an element, when the element is not the active element.

Is fired if the user right-click to display the shortcut menu and select Copy or presses CTRL+C.

Is fired if the user right-click to display the shortcut menu and select Cut or presses CTRL+X.

This event is fired when the user click an element, other than the active element of the document, or use the keyboard to move focus from the active element to another element. Also can be fired if the script invokes the setActive method on an element, when the element is not the active element.

To invoke this event, press the ENTER key or click an object when it has focus or double-click an object. The onbeforeeditfocus event differs from the onfocus event. The onbeforeeditfocus event fires before an object enters a UI-activated state, whereas the onfocus event fires when an object has focus.

Is fired if the user right-click to display the shortcut menu and select Paste or presses CTRL+V.

The onblur event fires on the original object before the onfocus or onclick event fires on the object that is receiving focus. Where applicable, the onblur event fires after the onchange event.

Use the focus events to determine when to prepare an object to receive or validate input from the user.

This event is fired when the contents are committed and not while the value is changing. For example, on a text box, this event is not fired while the user is typing, but rather when the user commits the change by leaving the text box that has focus. In addition, this event is executed before the code specified by onblur when the control is also losing the focus.

If the user clicks the left mouse button, the onclick event for an object occurs only if the mouse pointer is over the object and an onmousedown and an onmouseup event occur in that order. For example, if the user clicks the mouse on the object but moves the mouse pointer away from the object before releasing, no onclick event occurs.

This event fires before the element is selected, so inspecting the selection object gives no information about the element to be selected.

Is fired if the user right-click to display the shortcut menu and select Copy or presses CTRL+C.

Is fired if the user right-click to display the shortcut menu and select Cut or presses CTRL+X.

The order of events leading to the ondblclick event is onmousedown, onmouseup, onclick, onmouseup, and then ondblclick.

This event is fired when the user click an element, other than the active element of the document, or use the keyboard to move focus from the active element to another element. Also can be fired if the script invokes the setActive method on an element, when the element is not the active element.

This event fires on the source object after the ondragstart event. The ondrag event fires throughout the drag operation, whether the selection being dragged is over the drag source, a valid target, or an invalid target.

You can handle the ondragenter event on the source or on the target object. Of the target events, it is the first to fire during a drag operation.

The ondragover event fires on the target object after the ondragenter event has fired.

The ondragstart event is the first to fire when the user starts to drag the mouse.

The ondrop event fires before the ondragleave and ondragend events.

When one object loses activation and another object becomes the activeElement, the onfocus event fires on the object becoming the activeElement only after the onblur event fires on the object losing activation. Use the focus events to determine when to prepare an object to receive input from the user.

This event is specifically fired when the key is pressed down and is repeated multiple times until the key is released.

This event can be used to detect key presses of standard keys, if you need to process other keys (like cursor keys), use jsOnKeyDown.

This event is fired whenever a key pressed is released, both for keypress and keydown events.

Use this event to detect when the mouse is pressed on an element, you can use the button property of the event to determine which mouse button is clicked.

The event fires only if the mouse pointer is outside the boundaries of the object and the user moves the mouse pointer inside the boundaries of the object.

The event fires only if the mouse pointer is inside the boundaries of the object and the user moves the mouse pointer outside the boundaries of the object.

If the user presses a mouse button, use the button property to determine which button was pressed.

When the user moves the mouse over an object, one onmouseover event occurs, followed by one or more onmousemove events as the user moves the mouse pointer within the object. One onmouseout event occurs when the user moves the mouse pointer out of the object.

The event occurs when the user moves the mouse pointer into the object, and it does not repeat unless the user moves the mouse pointer out of the object and then back into it.

When any mouse button stops from being pressed over an element, this event is fired, you can use the button property to determine which mouse button is clicked.

The onpropertychange event fires when properties of an object, expando, or style sub-object change. To retrieve the name of the changed property, use the event object's propertyName property.

You can use the readyState property to query the current state of the element when the onreadystatechange event fires.

The onresize event fires for block and inline objects with layout, even if document or CSS (cascading style sheets) property values are changed.

Only content editable objects can be included in a control selection.

Only content editable objects can be included in a control selection.

The object at the beginning of the selection fires the event.