Your first TMS WEB Core application

Let's create step by step a first TMS WEB Core application. After creating a new TMS WEB Core project an opening the Delphi IDE form designed for the web form, let's add a TWebButton, TWebEdit and TWebListBox:

and opening the Delphi IDE form designed for the web form, let’s add a TWebButton, TWebEdit and TWebListBox:

Now, let's add a WebButton event handler for OnClick:

When running this project, the result we see in the browser is:

When you have compiled the application in debug mode, the output folder contains the following files:

The file project1.js contains the Javascript compiled application. The file project1.html is the general project HTML file. The unit1.html is the HTML that is specific to form1 which is the default form in the project here. An interesting file is the project1.js.map file. This is the file that facilitates debugging directly using the Delphi language from the browser. When compiling in release mode, this file is not generated. When one would want to deploy the application to a web server, all that is needed to do is put the files project1.html / project1.js and unit1.html in a folder on a web server

Your first TMS WEB Core progressive web application

It is also possible to automatically create a progressive web application (PWA) from the IDE wizard. A progressive web application is a web application designed to adapt itself to online/offline situations, to various device types and most importantly, to let itself install similar to a native application on the desktop and start from a desktop icon. More information about progressive web applications can be found here: https://developers.google.com/web/progressive-web-apps/
To create a new progressive web application from TMS WEB Core, select the icon “TMS Web PWA Application” from the wizard:

At first sight, it looks like this generates the template for a regular TMS WEB Core web application. However, two important additional files are generated: the manifest file, the JavaScript serviceworker file and application icons in different sizes:

The manifest file is the file that contains the name, description, icons and general information of your progressive web application. This manifest must be conform to the standard: https://developers.google.com/web/fundamentals/web-app-manifest/ When it is available, it allows the browser to identify the application as progressive web application and offer to install the application from the desktop.

In a TMS WEB Core, the manifest is automatically linked from the project main HTML file via: <link rel=manifest href="Manifest.json"/>

The serviceworker is registered and invoked as well from the main HTML script

<script type="text/javascript">
  if ("serviceWorker" in navigator)
  {
    navigator.serviceWorker.register("ServiceWorker.js").then(
      function(ARegistration)
      {}).catch(
        function(AErr)
        {
          console.log("TMS WEB Core service worker registration failed", AErr);
        });
  }
</script>

While the default generated serviceworker.js contains all functionality to automatically cache your entire TMS WEB Core application for offline use, it can be further customized by editing this file in JavaScript.

The manifest file content can be customized directly from the project options:

When the progressive web application is launched from the browser via its URL, browsers supporting progressive web applications (Safare on iOS, Chrome on Android), will show a dialog upon launching to offer the possibility to add the application icons to the home screen:

When a progressive web application is used, the Application singleton object returns the online/offline state of the application and will also trigger an event when the online/offline state changes.

Check the property

Applications.IsOnline: boolean

to check whether the application is online or offline. Or attach an event handler to:

Application.OnOnlineChange: TApplicationOnlineChangeEvent

with

TOnlineStatus = (osOnline, osOffline);

TApplicationOnlineChangeEvent = procedure(Sender: TObject; AStatus:
TOnlineStatus) of object;

This event handler will be triggered when the internet connection availability changes on the device where the application is run.

Your first TMS WEB Core Electron Application

TMS WEB Core allow to create cross platform Electron applications. These are packaged web applications that can be deployed as executable code for Windows, macOS and Linux. You can learn about the exciting Electron framework at: https://electronjs.org/ It is the Electron framework that offers a large API to take advantage of operating system features such as application menu, notifications, local file access, … Your TMS WEB Core application gets compiled to JavaScript and it is the Electron packager that turns the compiled result into an executable for the 3 operating systems: Windows, macOS, Linux. TMS WEB Core integrates all these steps for you from the IDE for Windows & Linux. For macOS, the packager needs to be run separately from a macOS operating system. To create a new Electron application from TMS WEB Core, select the “TMS Web Electron Application” from the wizard:

It generates a project that is similar to a TMS Web PWA Application, but instead of the manifest and serviceworker files, it has generated a main javascript file, a package file and 3 icons for the different platforms:

For Electron application development with TMS WEB Core, a whole range of components is available that let you take advantage of the Electron APIs for interfacing with the operating system. This is covered in the chapter specifically about Electron.

Your first TMS WEB Miletus Application

Miletus technology enables software developers to create desktop applications with TMS WEB Core. Similary to Electron it provides access to the local file system, shell dialogs, clipboard and much more. Different from Electron, its deployment has a very small footprint.

To create a new Miletus application, select the "TMS Web Miletus Application" from the wizard:

It generates a project similar to a TMS Web Application, with an extra icon file and different configurations to select from:

The icon file can be changed through the project options:

You can now develop your application like you would normally do with a TMS Web Application.