TTMSFNCWXContainer

The TTMSFNCWXContainer is a component to create your own HTML elements and integrate JavaScript libraries into your applications.

Adding links

To integrate external libraries, you'll need to add a link to the required JavaScript, Stylesheet or other data. To do that you'll need to add Link to the Links collection. It's Important to now that when you want to call or initialize a JS Library that you wait until the control is initialized. To do this you can call the JS code with an ExecuteJavaScript within the OnControlInitialized Event. This event triggers when the control is fully initialized.

Properties

Property name	Description
Async	When set to true the script will be fetched in parallel to parsing and will be evaluated as soon as it is available.
Charset	Sets the required charset (e.g. UTF-8).
Content	Set the inline content when the kind is mlkStyle.
Defer	When set to true the Script will be executed after the document has been parsed.
Enabled	If Set to true, the link will be added to the document.
Kind	Set what kind of link you want to add: mlkLink, mlkScript, mlkStyle.
Rel	Set the relationship between the current document and the linked document/resource. (e.g. 'stylesheet' for CSS)
Type	Specifies the media type of the linked document/resource/script.
URL	Set the link to the required document/resource/script.

Adding Containers

To create HTML objects, all you need to do is add a container to the ElementContainers collection. Here you add the HTML, CSS, JavaScript and Actions. With these actions you can use HTML events to trigger Pascal code.

Properties

Property name	Description
Actions	Collection of Action items which lets you asign Pascal events to HTML elements.
HTML	Set the HTML of this container
HTMLElementClassName	Set the name of the class for the outer HTML Element.
HTMLElementID	Set the ID of the outer HTML Element.
Margins	Set the margins for this container.
Position	Set the position of the container within the component.
Script	Set the script for this HTML Element.
Style	Set the style for this HTML Element.
UseDefaultStyle	toggling this enables the default style of the container.
Visible	Toggling this hides or shows the container.

Adding Actions

To allow the HTML Elements to interact with Delphi you can use Actions. With these actions you can listen to various events from HTMLElements and assign delphi procedures that have to be executed when these events trigger.

Properties

Property name	Description
CustomEvent	Set the eventname when using a Custom Event
Enabled	Toggle this to disable/enable the Action
Event	Set the HTML Event to listen to
EventReturnValue	Set the value that has to be returned to Delphi code
HTMLElementID	Set the id of the HTML Element to which the action has to listen.
Name	Set the name of the action
Tag	Set the tag of this action

Events

You have the OnExecute event. This event triggers when the HTML Event to which the action is listening has been triggered. This event returns a TTMSFNCCustomWebControlEventData Object. This object contains the Event, EventName, ID, and the customData (most of the time the EventReturnData). This CustomData is a JSON string.

ExecuteJavaScript

The TTMSFNCWXContainer component has a ExecuteJavaScript procedure. You can use this procedure to call JavaScript functions and pass parameters to them. The JavaScript string can only be 1 line. This example will show a alert.

TMSFNCWXContainer1.ExecuteJavaScript('alert("test")');

JavaScript Bridge

This bridge is used to trigger the actions in the ElementContainers. But you can access this bridge through JavaScript as well. You can call the JS function callback(). This function requires an EventName and the data you want to send.

This code adds an eventlistener and sends back the data from this event to the Pascal side.

function InitCarousel() {
  $('#carouselExampleCaptions').on('slide.bs.carousel', function (data) {
    CallBack('CarouselSlide', data);
  });
}

In Delphi you can use the OnCustomEvent from the TTMSFNCWXContainer to listen to these events. This OnCustomEvent is the same as the OnExecute from the Actions collection.