Xojo Documentation 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.

WebObject

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.

Properties

Name

The name of the control.

Page

The web page containing the control.

Parent

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

WebControl

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.

Events

Close

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

ContextualMenuAction

Called when a contextual menu item has been selected.

DoubleClick

Called when the user double-clicks on the control.

GotFocus, LostFocus

Called when the control gets or loses focus.

Hidden

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

KeyPressed

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.

Open

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.

Resized

Called after the control size changes.

Shown

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

Properties

ContextualMenu

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

Enabled

Enable or disable the control.

Height, Left, Top, Width

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

HelpTag

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.

Style

Assign a Style to change the appearance of the control.

Visible

Determines the visibility of the control.

Methods

Close

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

PresentContextualMenu

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

SetFocus

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