The Problem

This is our first lesson on Morfik internals. Let’s see something simple: we have a Container (with CanGrow=Scroll) on our form and we would like to make sure that after we add some content to the bottom of this Container the new content is in view. All we have to do is to scroll the the Container to the bottom - let’s do this with a JavaScript function for the fun of it (spoiler: this can be done in Morfik Pascal, too).

Implementation Notes

Before we go any further, let me remind you that by the time I write this Morfik is not out, so when 1.0 appears it has a chance that this will not work as advertised - although I will do my best to update these tips as soon as possible. Some additional notes: I use Morfik Pascal in the code samples and I always create the application in a new sub-folder and always keep source files separate since it is easier to handle them this way in a more-than-one-person project (version control, team work, etc.).

The Solution

We can create a very simple JavaScript function to scroll our Container to the bottom. Here is how:

• In our project root folder (where we have the *.MXP project file) let’s create a text file that we call JSExtensions.js.
• In this file we should write something like this:

function JSE_ScrollDivToBottom(h)
{
objDiv = h;
objDiv.scrollTop = objDiv.scrollHeight;
}

• Now in our form file (somewhere after the Implementation keyword and possible Uses clause), let’s include the following line:

function JSE_ScrollDivToBottom(h:TDOMHTMLControl); External 'JSExtensions';

• And here is how we can call the function (the Container is called ctrChat):

// Scroll in view
JSE_ScrollDivToBottom(ctrChat.DOMHandle);

• That’s it.

Now how can we do something similar in Morfik Pascal? Here it is:

Procedure Index.Button1Click(Event: TDOMEvent);
Begin
TDOMInput(TextEdit1.DOMHandle).scrollTop := TDOMInput(TextEdit1.DOMHandle).scrollHeight;
End;

Summary

What did we learn in this tip? Morfik client-side code can be extended with JavaScript. The easiest way is to create one or more text files in the project root folder and add the JavaScript code there. Such functions can be referenced in Morfik Pascal with the External function declaration. Morfik controls have a DOMHandle property that refers to the root element of the control and we can pass this to the JavaScript code for reference. For a Container, this root element is a DIV.

Now I am intrested in all the novel ideas you may come up with extending Morfik this way. Please post your thoughts and comments.