TWebElementActionList

Description

A TWebElementActionList should not be confused with a Delphi TActionList. The purpose of a TWebElementActionList is to easily hookup events to HTML elements typically available in a form template but not limited to these. Binding to event handlers of HTML elements is based on the HTML element ID, a query selector or a Pascal control class. TWebElementActionList is a list of TWebElementAction items where each such item represents the bridge between HTML elements and the action perform when an event occurs on these HTML elements.

If there is for example a HTML BUTTON element in the HTML template with ID “btn”, it is possible to define the UI logic that should be executed when the button is clicked by adding a TWebElementAction item, setting the ID for the button, the event to heClick and then write the OnExecute event for the TWebElementAction. This OnExecute event will be triggered when the button is clicked. Note that multiple TWebElementAction items can be bound for different events to the same HTML element or elements.

Properties for TWebElementActionList

Property	Description
Actions	Collection of actions that specifiy for what HTML element event an action OnExecute or actionlist OnExecute needs to be triggered

Events for TWebElementActionList

Property	Description
OnExecute	Event triggered when the HTML element or elements event specified by the TWebElementAction happens. The event passes the action, the HTML element triggering the action and the JavaScript event object.
OnUpdate	Event triggered for each HTML element(s) set by TargetControl or TargetID or TargetSelector. The event passes the action, the HTML element triggerting the action, the JavaScript event object and the HTML element that is the target of the action.

Properties for TWebElementAction

Property	Description
Control	Sets the Pascal control to bind a specific event to
CustomEvent	Sets the event type as string to bind to in case the event type is not in the list of standard events
Enabled	When true, the OnExecute event will be triggered when the bound event on the element is happening.
Event	Specifies what specific HTML event will trigger the action OnExecute event. The predefined event types are: heClick: click on the HTML element heDblClick: double-click on the HTML element heKeypress: keypress on HTML element heKeydown: key down on HTML element heKeyup: key up on HTML element heMouseDown: mouse down on HTML element heMouseMove: mouse move on HTML element heMouseUp: mouse up on HTML element heMouseEnter: mouse enter on HTML element heMouseLeave: mouse leave on HTML element heBlur: focus leave from HTML element heFocus: focus enter on HTML element heChange: value change on HTML element heSelect: selection on OPTION HTML element heInvalid: invalid input on HTML element heCustom: custom event (set by CustomEvent property) heNone: no element event is bound heTouchStart: touch start event on HTML element heTouchMove: touch move event on HTML element heTouchEnd: touch end event on HTML element heTouchCancel: touch cancel event on HTML element heWheel: mouse wheel event on HTML element
ID	Sets the HTML element ID for the element to bind the action to
Name	Name of the item instance
PreventDefault	When true, the default HTML event handler for the element will not be executed. For example, a key event will not have effect on the element.
Selector	Sets the query selector for possibly multiple HTML elements to bind with the TWebElementAction. For example, specifying ‘INPUT’ will select all HTML INPUT elements in the document to bind the action to. How selectors can be used to do sophisticated selection of HTML elements can be found here:
https://www.w3schools.com/cssref/css_selectors.asp
StopPropagation	When true, the event on the HTML element doesn’t propagate to its container element. For example, a mouse down event is propagated to the container element when not handled by the first HTML element that gets it.
Tag	Integer value
TargetAction	Action to perform when the event is happening on the target elements. actNone: no action performed on target elements actSetHidden: set target elements display attribute as hidden actRemoveHidden: remove target elements display attribute as hidden actToggleHidden: toggle target elements display attribute actSetReadOnly: set target elements readonly attribute actRemoveReadOnly: remove target elements readonly attribute actToggleReadOnly: toggle target elements readonly attribute actSetDisabled: set target elements disabled attribute actRemoveDisabled: remove target elements disabled attribute actToggleDisabled: toggle target elements disabled attribute actClear: clears the value of the target elements actAddClass: add a class TargetClassAdd to the target elements actAddRemoveClass: add a class TargetClassAdd to the target elements and remove class TargetClassRemove from the target elements actRemoveClass: remove class TargetClassRemove from the target elements
TargetClassAdd	CSS class to add to the target element
TargetClassRemove	CSS class to remove from the target element
TargetControl	The Pascal control affected by the TWebElementAction when its event occurs
TargetID	ID of the HTML event affected by the TWebElementAction when its event occurs
TargetSelector	Sets the query selector for possibly multiple HTML elements that an action will have effect on.

Methods for TWebElementAction

Method	Description
Bind	Binds the action class to the HTML element(s) specified by Control or ID or Selector. The TWebElementActionList will already implicitly perform binding upon creation of the class. Bind only needs to be called in case a TWebElementAction is created at runtime
UnBind	Unbinds the action class from the HTML element(s) specified by Control and/or ID and/or Selector. This normally implicitely happens when the TWebElementActionList is destroyed

Events for TWebElementAction

Event	Description
OnExecute	Event triggered when the HTML element or elements event specified by the TWebElementAction happens
OnUpdate	Event triggered for each HTML element(s) set by TargetControl or TargetID or TargetSelector

Example

For a HTML template that contains an entry form, we can easily add a TWebElementAction to clear the entered fields when the Clear button is clicked. The Clear button has the ID “btnclear”, so a new TWebElementAction object is added to the list and the event is set to heClick. As the button click should result in clearing HTML input elements, set WebElementAction.TargetAction to actClear. Finally set TargetSelector to ‘input.forminput, textarea.forminput, select.forminput’ to get all elements in a form, i.e. that have class set to forminput.

Code

var
  wa: TWebElementAction;

begin
  wa := TWebElementActionList.Actions.Add;
  wa.ID := ‘btnclear’;
  wa.Event := heClick;
  wa.TargetAction := actClear;
  wa.TargetSelector := ‘Input.forminput, textarea.forminput,
select.forminput’;
end;