Skip to content

Getting started

From the Delphi IDE, choose File, New, Other and pick from the wizard either a TMS Web Application or TMS Web Console application:

When you created a new project, it is shown in the project manager:

The project consists of a project source file and one or more form files similar to how VCL Windows applications and FMX cross platform applications work. Other than the project source file (.DPR file), there is a project HTML file. This HTML file contains the body HTML for your application and this can include references to CSS and/or JavaScript files. For each form, there is a .PAS file, a .DFM file and a .HTML file. The .PAS file contains the user interface logic for the form and its controls. The purpose of the .DFM file is to persist the component settings and the HTML file serves as the HTML container in which the form controls will be hosted or that contains the HTML elements to which the Delphi control class instances will be mapped.

The project context menu in the IDE also shows a number of extra items:

From this context menu, the output path (where HTML, JS, CSS are generated) can be opened via Windows Explorer. It is also possible to add a new web form or data module directly from this context menu and finally, the JavaScript Library Manager can be started. For details about the JavaScript Library Manager, see the paragraph specifically about that.

Technically, a TMS WEB Core application is at design-time in Delphi a VCL Windows application. This is for the technical reason to make use of the Delphi IDE form designer to create the web client application. The TMS WEB Core Delphi IDE plugin takes care to compile the project with all its form files with the pas2js compiler to a JavaScript (.JS) file and deploy it to a web server.

The default project source is:

This looks very much the same as a standard VCL application. When the project is compiled to a JavaScript application, it can be automatically launched in the browser from the IDE. This is done via a browser launcher application (TMSWEBRunner.exe) that is configured in the IDE under Tools, Options, TMS Web, Web Runner. By default, the JavaScript application is launched in the browser that is set in the operating system as default browser. If you want to launch the application in a different browser, this can be set at project level via Project, Options, TMS Web, Browser. To get the browser start the web client application, by default TMS WEB Core ships with a lightweight debug webserver and this is configured at install time to operate at port 8000. The web server is specified under Tools, Options, TMS Web, Web Server. See the paragraph on “Configuring TMS WEB Core settings” for more information on how to specify the web server to be used.

The default project HTML file contains:

This is a HTML file specifying the HTML5 DOCTYPE. As you can see, by default, there is only one reference in the HTML file and that is to $(ProjectName).js. The TMS WEB Core IDE plugin will in this case compile the application to Project1.js and in the deployed HTML file, this reference will as such be:

<script type="text/javascript" src="Project1.js"></script>

From the HTML file, you can see that the application is launched by

<script type="text/javascript">
    rtl.run();
  </script>

When the form file in the web project is open, the IDE tool palette offers all components / controls that have been designed & registered for use with TMS WEB Core:

Just like with VCL applications, drag the controls on the form and add the UI logic code to the form file.

As you can see, with each form file comes a HTML file, unit1.html in this case. This is the HTML container in which the web form will be embedded. This HTML file will be loaded in to the browser document BODY when the web application launches the form. The HTML file can be directly edited from the IDE in its embedded HTML editor but it can also be edited by any web editor or by a separate web designer using his own tools.

This is an empty HTML file. When adding UI controls to the form file, at runtime the HTML elements of which these controls are composed will be dynamically added to the HTML BODY.

Configuring TMS WEB Core settings

The configuration of TMS WEB Core can be found in the Delphi IDE under Tools, Options,TMS WEB:

The settings are:

Web Compiler: this points to the location where the Pascal to Javascript compiler (pas2js) is located.

Library path: this is the path the Pascal to Javascript compiler uses. Note that 3rd party controls can separately register paths and this does not affect the general library path.

Open Output path in Explorer: this is the default path the compiler uses to generate the resulting project Javascript (.JS) file. The default is under the project source folder \TMSWeb\Debug or \TMSWeb\Release

URL: this is the URL with which the web application can be launched via the browser. If another web server than the default TMS webserver is used, the URL can be modified here.

Single JS file: Default a single Javascript for the entire web application is generated. If this is turned off, it will be needed to specify each generated .js file reference (for each unit there is a .js file in this case) in the project HTML file.

ECMA Script: This sets the JavaScript standards level for which to generate the compiled application.

Installation directory: this holds the path where TMS WEB Core is installed. Relative to this path, the compiler searches for source files & resources.

Web Runner: this is a the path to the application that is used to start the selected browser for running the web application

Web Server: this is the path where the webserver that is used and that will be launched is located.

Web Server Params: can contain extra command-line parameters to launch the web server

Web Server Visibility: configures whether the web server is hidden when launched or remains visible.

Wait for Web Server: when true, the IDE will wait until the webserver is effectively running before launching the browser to open the web application URL.

Browser: specifies if the preferred browser to launch to debug the web application.

Debug Manager: this specifies the debug tool that is used to communicate between the IDE and the browser. Via this debug manager it is possible to relaunch a web application in the same browser tab when a new version is compiled instead of launching the application in a new browser window or new browser tab.

Under the list of settings, you can find a list of installed 3rd party components for TMS WEB Cor and you can check or uncheck what 3rd party component paths will be used to compile the web client application.

Configuring TMS WEB Core project settings

From the project context menu in the IDE project manager, a new pane is added to configure the options of the TMS WEB Core application:

This contains the project specific settings. By default, the TMS WEB Core general settings defined in the IDE are applied when a new project is created.

TMS Web Source Paths: optional project specific source library paths.

Open Output Path in Explorer: optional custom output path. When nothing is specified, the default output path is the folder TMSWeb\Debug or TMSWeb\Release under the project source folder

Browser: sets the browser to launch to run the application. When nothing is specified, this is the default operating system browser.

Debug Information: when true, the JavaScript debug map file is generated. This option is set by default for the Debug mode of the application.

Directives: Sets the compiler directives to use for compiling the application

ECMA Script: sets the JavaScript standards level to compile for

HTML file: sets optionally a different HTML file to launch the web application

Optimization: defines whether to compile with or without compiler optimization. When optimization is enabled (default), unused Pascal code does not get compiled to JavaScript, reducing the size of the generated JavaScript file significantly.

Single Tab in Browser: when enabled and in Debug mode, when compiling a new version of an already running web application in the browser, will result in relaunching the web application in the same browser tab as the already running application instead of opening it in a new tab.

Web Server: optionally specifies a project specific web server to use

Web Server Visibility: configures whether the web server is hidden when launched or remains visible.

Wait for Web Server: when true, the IDE will wait until the webserver is effectively running before launching the browser to open the web application URL.

Browser: specifies if the preferred browser to launch to debug the web application.

Debug Manager: this specifies the debug tool that is used to communicate between the IDE and the browser. Via this debug manager it is possible to relaunch a web application in the same browser tab when a new version is compiled instead of launching the application in a new browser window or new browser tab.

Under the list of settings, you can find a list of installed 3rd party components for TMS WEB Core and you can check or uncheck what 3rd party component paths will be used to compile the web client application.

Configuring TMS WEB Core project settings

From the project context menu in the IDE project manager, a new pane is added to configure the options of the TMS WEB Core application:

This contains the project specific settings. By default, the TMS WEB Core general settings defined in the IDE are applied when a new project is created.

TMS Web Source Paths: optional project specific source library paths.

Open Output Path in Explorer: optional custom output path. When nothing is specified, the default output path is the folder TMSWeb\Debug or TMSWeb\Release under the project source folder;

Browser: sets the browser to launch to run the application. When nothing is specified, this is the default operating system browser.

Debug Information: when true, the JavaScript debug map file is generated. This option is set by default for the Debug mode of the application.

Directives: Sets the compiler directives to use for compiling the application

ECMA Script: sets the JavaScript standards level to compile for

HTML file: sets optionally a different HTML file to launch the web application

Optimization: defines whether to compile with or without compiler optimization. When optimization is enabled (default), unused Pascal code does not get compiled to JavaScript, reducing the size of the generated JavaScript file significantly.

Single Tab in Browser: when enabled and in Debug mode, when compiling a new version of an already running web application in the browser, will result in relaunching the web application in the same browser tab as the already running application instead of opening it in a new tab.

Web Server: optionally specifies a project specific web server to use

Web Server Visibility: configures whether the web server is hidden when launched or remains visible.

Wait for Web Server: when true, the IDE will wait until the webserver is effectively running before launching the browser to open the web application URL.

Automatic versioning

If the project name is project1.dproj, the default application JavaScript file will be project1.js and is referenced in the HTML project file as

<script type="text/javascript" src="Project1.js"></script>
In some situations, the browser might have cached this project1.js file and the browser / web server communication fails to inform an updated project1.js should be downloaded instead of using the cached version.

To overcome this potential issue, TMS WEB Core features automatic project versioning. With this automatic versioning, each time a project is build, a new version number is generated and referenced in the HTML file, making each each project version unique and avoiding the use of a cached version when it was not expected.

Enabling automatic versioning in the project is easy. Go to project options. Set the initial version to X.Y.Z and set Auto-increment version to True

Each time a build is done, the Z-value increases. In this screenshot, you see the result after 2 builds when the initial version was set to 1.0.0:

Installation for Lazarus

Installing the design-time components and the design-time integration is done through installing the package tmswebcorepkgliblaz.lpk. This package has the dependency to the design-time integratrion package tmswebcorepkgdelaz.lpk that will also be automatically installed. So, the steps to take is by opening and installing the package tmswebcorepkgliblaz.lpk

Open Tools, Environment where you can see as the last item in the list TMS WEB Core where you can find all paths that need to be set:

After verifying the settings, you are ready to create your first TMS WEB Core project. Go to Project, New project

For a first basic application, leave the options unchecked and proceed to create the application.