Base HTML element.

Unit: SmartCL.Components.pas

Hierarchy

TObject

TW3TagObj

Properties
InnerHtml
InnerText
ObjectReady
TagId
Protected Methods
FinalizeObject
InitializeObject
StyleTagObject
Methods
BeginUpdate
EndUpdate

Properties

TW3TagObj.InnerHtml

Specify content of element in html format. All html specific tags within property value will be processed by browser.

property InnerHTML: String read getInnerHTML write setInnerHTML;

Example:

W3Panel1.InnerHTML:= 'Hello <b>World</b>';

Display result:

Remarks:

This property is different than InnerText property of same class.

TW3TagObj.InnerText

Specify content of element. If value contain any html or script code they will be ignored.

property InnerText: String read getInnerText write setInnerText;

Example:

W3Panel1.InnerHTML:= 'Hello <b>World</b>';

Display result:

Hello <b>World</b>

TW3TagObj.ObjectReady

Determine if object (element) is fully initialized.

property ObjectReady: Boolean read FObjReady;

Remarks:

Value of this property is set to True at the end of TW3TagObj constructor, after InitializeObject and StyleTagObject methods are processed.

TW3TagObj.TagId

Contains unique id of the visual element as it exists in the DOM. The value of this property is set inside the TW3TagObj constructor. It can be freely altered.

property TagId: String read FTagId write FTagId;

Under the HTML standard all elements may have an ID property. This ID is used to uniquely identify that particular element so that scripts can access it. The RTL generates an ID for you, because under object pascal we really dont use identifiers as such when working with elements. In our model the classes creates the elements directly by talking to the DOM, and as such we have direct access to the element throughout its entire life-cycle.

HTML for a TW3Panel control may look like this, here with the id "OBJ5" automatically assigned:

<div id="OBJ5" class="TW3Panel" style="visibility: visible; display: inline-block; position: absolute; overflow: hidden; left: 16px; top: 56px; width: 200px;height: 80px;"></div>

Notes

It is common for JavaScript developers to use the ID property exclusively when working with elements. However, under object pascal this breaks two fundamental principles:

• Hardcoding and presupposition should be avoided
• Avoid searches, keep a direct reference if possible

When JavaScript developers search for elements purely by ID, the runtime has to look-up and perform a query (hence the library "jquery" was born). This is understandable considering that HTML is after all text based and traditional JavaScript programming have no other option but to reference elements by their id.

But object pascal has a completely different model. As mentioned, in our model classes are responsible for creating elements directly by talking to the DOM. And in doing so, the object you get back will always have a direct reference to the element it represents. So we have no need for identifiers, because we intimately know the element already in the constructor.

This direct reference is exposed as TW3TagObj.Handle.

Compatability

We recognize that there may be situations where you indeed have to use external libraries, perhaps to interface with a customer's existing codebase, and in these situations knowing the ID of an element is important.

Mistaken approaches to CSS and styling

We have seen people using the Id property to add or alter the styles of visual elements. But you should avoid using the ID for that. It comes with a heavy speed penalty and also there is ample tools and standard classes in the RTL to help you.

If you know CSS well you can use the TW3TagObj.Handle property to modify styles:

varMyLabel.Handle.style["color"]:= "#FFCCAA";

If you want to do it properly, alter the application stylesheet.

Let's demonstrate by registering a nice fading, blinking animation for buttons-frames (here for webkit as an example):

@-webkit-keyframes anim_blink_border {  
from { -webkit-box-shadow: 0px 0px 0px 0px; }   
50% { -webkit-box-shadow: 0px 0px 12px 4px #4e88bf; }  to 
    { -webkit-box-shadow: 0px 0px 0px 0px; }} 

With an animation defined, lets go ahead and connect that to a permanent rule. Rules can be added, removed, toggled and attached to visual elements easily and you can even attach several rules to the same visual element.

#blinking_border {-webkit-animation-name: anim_blink_border;
-webkit-animation-duration: 1.0s;
-webkit-animation-iteration-count: infinite;}

With a rule now in place and the stylesheet saved, you can apply this effect to a button with 1 line of code:

MyButton.CSSClasses.add("#blinking_border");

And remove the rule again just as easily:

MyButton.CSSClasses.removeByName("#blinking_border");

Please see CSS styling and TW3StyleSheet for more information about styling.

Protected Methods

TW3TagObj.FinalizeObject

Destroy child components.

procedure FinalizeObject; virtual;

Called inside destructor, before Handle is released.

It is recommended to override this method rather than overriding destructor in descendant classes.

TW3TagObj.InitializeObject

Init object.

procedure InitializeObject; virtual;

This method is called inside TW3TagObj constructor after tag is created and style is applied.

It is recommended to override this method rather than overriding destructor in descendant classes.

TW3TagObj.StyleTagObject

Place for setting initial styles of element.

procedure StyleTagObject; virtual;

This method is called inside constructor. Descendant classes should override this method to init css style attributes.

Example:

procedure TW3MyControl.StyleTagObject;
begin  
  inherited;  

  Handle.style['line-height']:= '50px';
end;

Methods

TW3TagObj.BeginUpdate

Start postponing updates of element.

procedure BeginUpdate;

Increase update count (private field FUpdating) which leads to postponing methods such as Refresh and similar methods. Every BeginUpdate method must be paired with EndUpdate method.

TW3TagObj.EndUpdate

End postponing updates of element.

procedure EndUpdate; virtual;

Decrease update count (private field FUpdating) previously increased by counterpart BeginUpdate method. When update count is set again to 0, AfterUpdate protected virtual method is called.