Web Control Hierarchy

From Xojo Documentation

The built-in controls have an inheritance hierarchy. The base class is called WebObject and it contains several common events, properties and methods. WebControl subclasses WebObject and adds additional events, properties and methods. The web controls you add to a page all subclass WebObject.

Web Control Hierarchy

Below is a list of some of the common events, properties and methods that are available for UI controls.


This is the base class for all web controls.

These are the commonly used properties for WebObject. Refer to WebObject in the Language Reference for the complete list.



The name of the control.


The web page containing the control.


The parent container of the control, if applicable. This may be Nil.


The primary base class for all web controls.

Below is a list of commonly used events, properties and methods. Refer to WebControl in the Language Reference for the complete list.



The control is being closed because the page is being closed.


Called when a contextual menu item has been selected.


Called when the user double-clicks on the control.

GotFocus, LostFocus

Called when the control gets or loses focus.


The control is about to be hidden because the page is being closed.


Called when a key is pressed while the control has focus. The Details parameters provides information about the key (Key Event).

MouseDown, MouseDrag, MouseExit, MouseMove, MouseUp

Called when the specific mouse action has occurred.


Called when the control has been created but before it has been displayed. Unlike with desktop projects, you should instead use the Shown event to initialize controls.


Called after the control size changes.


Called after the control has been shown in the browser. Use this event to initialize controls instead of Open.



Assign a WebMenuItem to display the menu when the user contextual-clicks on the page.


Enable or disable the control.

Height, Left, Top, Width

Get or sets the control size and position on the page.


Set to the text you want displayed in a tooltip when the mouse is hovered over the control.

HorizontalCenter, VerticalCenter

Specifies that the control should remain centered horizontally or vertically within the page.

LockBottom, LockHorizontal, LockLeft, LockRight, LockTop, LockVertical

Specifies the control’s position in relation to the web browser edges. These properties can be specified using the Locking control in the Inspector. Click the appropriate lock icon to set LockBottom, LockLeft, LockRight and LockTop. To set LockHorizontal or LockVertical unlock both the vertical or horizontal locks.


Assign a Style to change the appearance of the control.


Determines the visibility of the control.



Removes a control that was created dynamically at run-time. Has no effect on controls created in the Layout Editor.


Allows you to manually display the contextual menu assigned to the ContextualMenu property.


Sets focus to the control.

Key Event

The KeyEvent module contains names of keys that are returned in the KeyPressed event handler for web controls. You can compare the value in the Details parameter with the properties in KeyEvent to check for specific keys.

For example, this code in a KeyPressed event checks the type of key that was pressed:

Select Case details.KeyCode
Case details.KeyArrowDown
MsgBox("Down arrow")
Case details.KeyArrowLeft
MsgBox("Left arrow")
Case details.KeyArrowRight
MsgBox("Right arrow")
Case details.KeyArrowUp
MsgBox("Up arrow")
End Select

See Also

UserGuide:Web UI, UserGuide:Web Pages topics