Creating an edit-box in Smart Pascal

Under HTML5 there is a special property that you can add to any suitable tag, such as the DIV tag, to make the content editable. In other words you are no longer bound to the restrictions of text-fields and memo-fields as was the case earlier.

Since the Smart Pascal RTL (VJL, visual javascript library) is architected to create, maintain and keep track of controls in the DOM (document object model) – with a 1:1 mapping of functionality, adding support for editable elements is fairly straight forward. But you need to know you way around HTML5 and JavaScript.

Setting up the target

All components and controls in Smart Pascal has a method called StyleTagObject(), this method is called at the beginning of the constructor (after the element has been created and a handle-reference is obtained) so the user, which is you and me, can set properties and values before the html element is finalized and made visible.

Note: You can set properties and attributes at any time, but it makes sense to alter the different values before the component becomes visible. This is why I added StyleTagObject() to the construction sequence.

Turning an element editable is very easy. Simply override the StyleTagObject() method as such:

procedure TMyControl.StyleTagObject;
Begin
  inherited;
  w3system.w3_setAttrib(handle,'contenteditable',True);
end;

In this case we alter the html-element property “contenteditable” to true, which depending on the element, turns the object into a text-editor. Since TW3CustomControl is set to create a DIV element by default (this can be altered easily as well) the result is something that looks like a normal memo editor in Delphi. But without any scrollbars of course.

You may also want to add a call to setFocus() in the mouseDown events if you are building a composite control (e.g an editor, scrollbars and other stuff inside a custom control).

And that’s how easy it is to play with the DOM and create an editable custom HTML5 control!