We are always looking to find new and interesting ideas to show the power of our components. As such we have decided to do another Summer DIY project as we think this is a fun way to learn to use our components in real life applications. 2 years ago we created a navigation application using TMS FNC Maps and TMS WEB Core.

This summer we introduce you to TMS WEBLab, an application that let's you create and test HTML, CSS & JavaScript snippets in a cross-platform Delphi FMX application. With this project, you can not only build this application for Windows, but also for Linux & macOS.

As a bonus, you can use this application to experiment and try different HTML fragments, CSS styles & JavaScript snippets to implement in your own form templates for TMS WEB Core projects. 

In this blog post, we will guide you through the basics to start building your own application in no time.

Building the basic application

To build your own application you'll need the latest versions of both TMS FNC UI Pack and TMS FNC WX Pack as we use components from both packs. Getting started you'll need the TTMSFNCMemo and the TTMSFNCWXContainer. the memo will be used to show the code, whilst the container will be used to render the live preview of your code.

Step 1: UI

First of all, you'll have to drop 3 TTMSFNCMemo's (for HTML, JS & CSS respectively), 1 button and 1 TTMSFNCWXContainer on the form.

You can also use multiple sources in one memo, but as this will complicate things more than needed for this application, we used 3 different ones. 

TTMSFNCMemo

We then configure every memo with the following settings:

Set the Language to HTML/JS/CSS for each of the memos.
In Options set UseCustomCodeCompletion to false, this let's us use an internal Code completion API which is really extensive for HTML, CSS and JavaScript. 
For this, we will also need to set the LibraryLocation to llOnline. The only downside to this is, that you'll need a working internet connection to use the application to the fullest. Otherwise you'll not get the full code completion experience.

TTMSFNCWXContainer

First, we'll need to add a Container to the ElementContainers collection. Then set the UseDefaultStyle property of this container to false. 

You can now style everything further to your liking, but these are the elementary steps to get you up and running. 

Step 2: Linking the memo with the container

Subscribe to the OnClick event of the button and use the following code:

TMSFNCWXContainer1.ElementContainers[0].HTML.Text := HTMLMemo.Text;
TMSFNCWXContainer1.ElementContainers[0].Style.Text := CSSMemo.Text;
TMSFNCWXContainer1.ElementContainers[0].Script.Text := JSMemo.Text;

This code will copy the all of your typed code to the ElementContainer. 

You'll notice that when you run your code now, that HTML and CSS are executed but the JavaScript is not. This is because the browser doesn't allow the execution of JavaScript which are loaded in afterwards. We can work around this by adding the following code: 

  TMSFNCWXContainer1.ReInitialize;

And that's it! These are the basic's to enable you to build your own playground.

Extending with links

Given the large amount of JavaScript libraries that are readily available, it would be handy that we can incorporate these in our playground. 

In our example we simply dropped a regular memo at the bottom in which you can paste all the links like this: 

From there we wrote a AddLinks procedure which accepts a TStrings parameter.

procedure TForm1.AddLinks(ALinks: TStrings);
var
  i: Integer;
begin
  TMSFNCWXContainer1.Links.Clear;

  for i := 0 to ALinks.Count -1 do
  begin
    if TRegEx.IsMatch(ALinks[i], '[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&\/=]*\.js$)') then
    begin
      TMSFNCWXContainer1.Links.AddScript(ALinks[i])
    end
    else if TRegEx.IsMatch(ALinks[I], '[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&\/=]*\.css$)') then
    begin
       TMSFNCWXContainer1.Links.AddStyleSheetLink(ALinks[i])
    end
    else if TRegEx.IsMatch(ALinks[I], '[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&\/=]*)') then
    begin
       TMSFNCWXContainer1.Links.AddLink(ALinks[i])
    end;

  end;
end;

Here we iterate through the ALinks property and check for each item if it is a valid link and if it is a Script, StyleSheet or other kind of link. we then call the AddScript, AddStyleSheetLink, AddLink respectively on the links property of our container.

We can now simply call this procedure and pass the lines property from our memo like this in the run:

AddLinks(Memo1.Lines);

More information

Want to know more about all the cool things you can do with these components? You can find a lot of information in the following blogposts

TTMSFNCMemo

• Bring the power of the Visual Studio Code editor to your applications
• Powerful new memo component for Delphi
• Switching between sources and more in the latest TTMSFNCMemo update

TTMSFNCWXContainer

• Adding HTML, CSS & JavaScript to your native applications with TTMSFNCWXContainer

Download

To start experimenting, download the source code here. If you don't have TMS FNC UI Pack or TMS FNC WX Pack but still want to experiment with the application, you can get the executable here.

Ready?

Want to try out the latest versions of these components? Go ahead and download TMS FNC UI Pack and TMS FNC WX Pack or go straight ahead and get yourself the TMS FNC Component Studio which contains every pack/tool in the FNC Framework like TMS FNC Maps and TMS FNC Cloud Pack!

For a limited time, we're offering an exclusive 20% discount on TMS FNC Component Studio with the action code SUMMER23. Don't miss this opportunity to streamline your application development and enhance your user interfaces with our versatile components. But hurry, this offer is only valid until August 15, 2023!

Already a licensed user of a separate FNC product? We've got you covered too! Existing users looking to upgrade to the full TMS FNC Component Studio bundle can reach out to sales@tmssoftware.com to request a personalized best upgrade offer.