We're excited and proud to announce the availability of the 3rd major release of TMS WEB Core v1.2 Padua. An enormous amount of work was done between the TMS WEB Core v1.1 Verona release and TMS WEB Core v1.2 Padua.

Tons of work was done on many levels: Object Pascal to JavaScript compiler improvements, new web frameworks & controls support, new UI components, improved IDE integration. There is in fact so much enhanced and added that it is too much to list here in detail. TMS WEB Core v1.2 has been 6 months in the works and we'd like to highlight the major new features here:

Latest pas2js compiler integration

With the newest version of the compiler, there is now support for for anonymous methods, class helpers, advanced records. Only two major features are in front of the compiler team to reach parity with the Delphi compiler being generics and attributes and work on generics has already started.

Electron target support


A new application type that can be choosen to create cross-platform desktop applications for Windows, macOS, Linux is available now in TMS WEB Core. Generating desktop applications with fantastic looking HTML/CSS based GUIs is as simple as choosing the Electron application type and use OO and RAD to create your application.

Support for Lazarus 2.x

TMS WEB Core can now also be used & installed from Lazarus v2.0.2

3D chart, math chart, objects and scenes support


Creating 3D business charts, math charts, render 3D scenes with objects and models is thanks for several components wrapping WebGL/ThreeJS easier than ever. Several samples are included that show this incredible web technology.

Camera control component & QR code + barcode decoder component

Now it is possible to directly control the device camera(s) from your web application and take pictures, record video and even scan QR and barcodes.

File picker for local file retrieval

The new file picker & file upload control allow for easy access to local files. Loading text files, images files, binary files from the local file system takes just a few lines of code.

Responsive grid panel

A new control, the TWebResponsiveGridPanel is available and with this new control, it is easy to create responsive UIs from the Delphi IDE form designer. It allows to set layouts depending on screen sizes. As a TWebResponsiveGridPanel can also be used inside another TWebResponsiveGridPanel, really complex responsive behaviours can be defined at design-time.

Audio capture component

Recording & storing audio from the webbrowser is possible thanks to a new component added for this. A dictaphone demo applications is added that demonstrates this.

TWebTreeview & TWebAccordion component


Two new pure HTML element based controls that offer a treeview and accordion UI control are added. The TWebTreeView has a component interface as similar as possible to the standard VCL TTreeView.

IndexedDB access classes and TWebIndexedDBClientDataSet component

Applications can now also take advantage of the browser built-in IndexedDB for temporary or permanent storage. A Pascal class is added to use the IndexedDB database and an even easier to use TWebIndexedDBClientDataSet is available now to hook up DB-aware controls to the IndexedDB tables.

Syntax highlighting editor control added


A new memo control with syntax highlighting is now also part of TMS WEB Core. With this memo, it is now possible to edit Object Pascal code (or code in other programming languages) with a syntax highlighting editor. This component takes advantage of the popular open source ACE web syntax highlighting editor.

Easier browser target selection with the TMS browser selector toolbar for the Delphi IDE


From a new IDE toolbar, the browser in which you want to run the TMS WEB Core application from the IDE can be selected

Grid checkbox cell & column support

The TWebStringGrid and TWebDBGrid got new capabilities such as adding checkboxes to cells, mixing DB-bound and non-DB bound columns, sorting, DB indicator ...

Child order control for relative control rendering

Creating page layouts with relative control usage is now also better under control with the ChildOrder property for UI controls that controls the relative positioning order of the control on the page or within parent elements.

Wrapper component for DIV and SPAN

Parts of a UI design can now be mapped easier onto HTML DIV or SPAN elements in a HTML template

Other than these highlights, there are numerous smaller improvements and extensions. We are already curious to learn how all the new capabilities will be used in your powerful web client applications!

Note that from now till June 30, 2019, we also have several promotional actions to get started with TMS WEB Core v1.2 in combination with TMS FNC Cloud Pack, TMS FNC Cloud Studio, with a TMS BIZ backend or jump to our highest level, the TMS ALL-ACCESS level.

Meanwhile, our Mille Migla RADical web race continues and after leaving Padua, we are heading to Ferrara now.


The improvements and features for the next version TMS WEB Core v1.3 Ferrara are being defined now and promise to be yet another big step forward in easy OO RAD based web development for Delphi developers. We are equally eager to learn from you what you'd like to see in TMS WEB Core v1.3 Ferrara. Get in touch and let's discuss!

In a regular web client application, it is normal that there is no direct access to the local file system. If that would be possible, it would obviously be a huge security breach. This is possible though in an Electron desktop cross platform application for Windows, Linux, macOS but we'll cover that in a follow-up article. Working with local files from a regular web application requires consent/interaction from the user. To get access to a local file, the user needs to take action and select the local file he wants to share with the web client application running in the browser. The web client application can invoke a file download that will then be persisted on the local file system.

Opening local files

Both save and load operations can be easily done for text files or binary files. A text file is loaded simply as string while a binary file can be opened as a JavaScript byte array buffer or a base64 encoded string.

To do this with TMS WEB Core, you can use a TWebFilePicker on the form and implement the OnChange event. The OnChange event is triggered when the user has selected a file (or multiple files when WebFilePicker.MultiFile = true).

From this event handler, we can access the selected files via the WebFilePicker.Files collection. This returns objects holding the filename, the mimetype, file size and file modified date. The file can be programmatically loaded by calling File.GetFileAsText, File.GetFileAsBase64, File.GetFileAsArrayBuffer. The browser will then asynchronously load the local file and it will be returned by the TWebFilePicker component via the events OnGetFileAsText, OnGetFileAsBase64, OnGetFileAsArrayBuffer.

Example: load a text file:

procedure TForm1.WebFilePicker1Change(Sender: TObject);
begin
  WebFilePicker1.Files[0].GetFileAsText;
end;

procedure TForm1.WebFilePicker1GetFileAsText(Sender: TObject;
  AFileIndex: Integer; AText: string);
begin
  WebMemo1.Lines.Text := AText;
end;

procedure TForm1.WebFilePicker1Change(Sender: TObject);
begin
  WebFilePicker1.Files[0].GetFileAsBase64;
end;

procedure TForm1.WebFilePicker1GetFileAsBase64(Sender: TObject;
  AFileIndex: Integer; ABase64: string);
var
  imgbase64: string;
begin
  imgbase64 := 'data:image/png;base64,' + ABase64;
  WebImageControl1.URL := imgbase64;
end;

Application.DownloadTextFile(AText: string; AFileName: string);

Application.DownloadBinaryFile(Data: TJSUInt8Array; AFileName: string);

procedure TForm3.WebButton1Click(Sender: TObject);
begin
  Application.DownloadTextFile(WebRichEdit1.Text, 'myfile.html');
end;

In the previous blog article, we showed how the TWebFilePicker or TWebFileUpload component in TMS WEB Core are the intermediates to get read access to local files and how the Application.Download* methods can be used to write data back to the local file system. These mechanisms are required because the web application runs in the secure browser sandbox.

For Electron apps, which are native desktop executable applications running on Windows, macOS64 or Linux, this is different and via Electron direct local file access is possible. From a TMS WEB Core application we have enabled a couple of easy to use methods to access such local files.

Read and write text files

To make it easy, the TElectronStringList class is available where the TElectronStringList.SaveToFile() / TElectronStringList.LoadFromFile() methods will directly read or write text files on the local device filesystem.

As such, it is possible to load a TWebRichEdit from a local HTML file directly via:

var
  LEsl: TElectronStringList;

begin
  LEsl := TElectronStringList.Create;
  try
    LEsl.LoadFromFile('myappmyhtmlfile.html');
    WebRichEdit1.Lines.Assign(LEsl);
  finally
    LEsl.Free;
  end;
end;

var
  LEsl: TElectronStringList;

begin
  If ElectronOpenDialog1.Execute then
  begin
    LEsl := TElectronStringList.Create;
    try
      LEsl.LoadFromFile(ElectronOpenDialog1.FileName);
      WebRichEdit1.Lines.Assign(LEsl);
    finally
      LEsl.Free;
    end;
  end;
end;

var
  LEbs: TElectronBinaryDataStream;

begin
  ElectronOpenDialog1.Filters := 'Image files|*.jpg;*.jpeg';
  If ElectronOpenDialog1.Execute then
  begin
    LEbs := TElectronBinaryDataStream.Create;
    try
      LEbs.LoadFromFile(ElectronOpenDialog1.FileName);

      WebImageControl.URL := 'data:image/jpeg;base64,' + LEbs.Base64;
    finally
      LEbs.Free;
    end;
  end;
end;

TMS XData 4.5 has been released with two major new features: parameter binding and Swagger UI.

SwaggerUI is a great new addition, just by setting two simple properties:

XDataModule1.SwaggerOptions.Enabled := True;
XDataModule1.SwaggerUIOptions.Enabled := True;

  procedure Process(
    [FromPath] PathA: Integer; 
    [FromQuery] QueryA: string;
    BodyA, BodyB: string;
    [FromQuery] QueryB: Boolean;
    [FromPath] PathB: string;
  ): double;

POST /tms/xdata/MyService/Process/5/value?QueryA=queryvalue&QueryB=true HTTP/1.1
 
{
  "BodyA": "one",
  "BodyB": "two"
}

The class TApplication has been part of Delphi since its inception. TMS Web Core tries to make as little changes to your development as possible. Thus, it provides its own method helper class to TApplication to provide additional functionality that will help you to control and react to events in your web application.

TApplication = class(TControl)
  private
  
  public
    //
    function CreateNewForm(AInstanceClass: TFormClass): TCustomForm; overload;
    function CreateNewForm(AInstanceClass: TFormClass; AElementID: string): TCustomForm; overload;
    procedure CreateForm(AInstanceClass: TFormClass; var AReference); overload;
    procedure CreateForm(AInstanceClass: TFormClass; AElementID: string; var AReference); overload;
    procedure CreateForm(AInstanceClass: TFormClass; AElementID: string; var AReference; AProc: TFormCreatedProc); overload;
    procedure CreateForm(AInstanceClass: TDataModuleClass; var AReference); overload;
    procedure CreateForm(AInstanceClass: TFormClass; AElement: TJSHTMLElement; var AReference); overload;
    property ActiveForm: TCustomForm read FActiveForm;
    property MainForm: TCustomForm read FMainForm;
   
  end;

procedure TForm1.ShowSettings;
var
  LFrm : TFrmSettings;
  // called after form is closed
  procedure AfterShowModal(AValue: TModalResult);
  begin
    // evaluate AValue and get values from form ...
  end;
  // will be called after form has been created
  procedure AfterCreate(AForm: TObject);
  begin
    // pass values to form referenced in AForm ...
  end;
begin
  LFrm := TFrmSettings.CreateNew( @AfterCreate );
  LFrm.ShowModal( @AfterShowModal )
end;

LActiveForm := Application.ActiveForm; 

LMainForm := Application.MainForm;

Creating a second form is easy and has been shown in the last post. However, sometimes we might not want to take the other form to take up the whole screen but make it a pop-up window instead.

As it’s an amazing framework from TMS Software (disclaimer: this statement might be biased), making a new form to display as a pop-up is really easy:

begin
  LFrm := TFrmSettings.CreateNew( @AfterCreate );
  
  // LFrm als Pop-Up festlegen
  LFrm.Popup := true;
  
  // Transparenz definieren
  LFrm.PopupOpacity := 0.2;
  
  LFrm.ShowModal( @AfterShowModal )
end;

Well, actually I didn't forget it. I was just not blog about it.

But since we got a very positive feedback in the last post about new features in TMS XData 4.5, I decided to show you an extra thing, somewhat related to the parameter binding feature: it's the new EnableKeyAsSegment property.

Basically it controls how the endpoint URL for entities will look like. Let's take the SQLiteConsoleServer demo as an example. It automatically publishes all tables in the database without a single line of code, as Aurelius entities. If you run the demo and navigate to the swaggerui address you will see the available endpoints. In the screeshot below we can see the ones for Album entity:



Now let's see what happens when we set EnableKeyAsSegment property to True:

  XDataServer1.EnableKeyAsSegment := True;

Over the years, increasingly new web APIs have given web developers access to areas of the operating system that were originally only accessible from native applications. This is also the case with the microphone and camera that is attached to a desktop computer or integrated in laptops, tablets and smartphones.

As the main vision and mission of TMS WEB Core is to bring OO RAD component based development for web client applications, it is expected that TMS WEB Core also brings easy to use components for using your device microphone or cameras (yes that is plural as it is possible to select between front and back cameras on a mobile device for example) from a TMS WEB Core application.

Security / privacy

An important first remark to make is that before a web client application can access a microphone or camera, user authorization is required. So, clearly, no web client application can secretly in the back listen to your conversations or watch what you are doing! Together with this authorization is also the requirement that the web application comes from a HTTPS URL so there is a reliable identification of the author or company hosting the application possible. So, when your TMS WEB Core application runs from a HTTPS domain and you want to access a microphone or camera, the user will see a prompt to allow this access:



Microphone

To use the microphone, we have introduced the non-visual component TWebMediaCapture. This component can be used to capture audio via the microphone when TWebMediaCapture.Capture is set to mctAudio. The standard recording mode is mrmManual. This means that recording is started by calling WebMediaCapture.Start and the recording is stopped by calling WebMediaCapture.Stop. After the recording is stopped, the data that was recorded is asynchronously returned via the event OnStopCapture that has the event signature:

TMediaCaptureCloseEvent = procedure(Sender: TObject; ABinary: TJSUint8Array; ABase: string) of object;

procedure TForm1.WebImageControl1Click(Sender: TObject);
begin
  if not FRecording then
  begin
    WebMediaCapture1.Start;
    FRecording := True;
    WebImageControl1.URL := GetStopImage;
  end
  else
  begin
    WebMediaCapture1.Stop;
    FRecording := False;
    WebImageControl1.URL := GetRecordImage;
  end;
end;

procedure TForm1.WebMediaCapture1StopCapture(Sender: TObject;
  ABinary: TJSUint8Array; ABase: string);
begin
  if WebIndexedDbClientDataset1.RecordCount > 0 then
    WebIndexedDbClientDataset1.RecNo := 1;

  WebIndexedDbClientDataset1.Insert;
  WebIndexedDbClientDataset1.FieldByName('descr').AsString := WebEdit1.Text;
  WebIndexedDbClientDataset1.FieldByName('time').AsDateTime := Now;
  WebIndexedDbClientDataset1.FieldByName('base').AsString := ABase;
  WebIndexedDbClientDataset1.Post;
  WebEdit1.Text := 'SoundClip ' + IntToStr(WebIndexedDbClientDataset1.RecordCount + 1);
end;

property WebCamera.SnapShotAsBase64: string;
property WebCamera.SnapShotAsImageData: TJSImageData;
property WebCamera.SnapShotAsUint8Array: TJSUint8Array;

WebImageControl1.URL := WebCamera1.SnapShotAsBase64;

for i := 0 to WebCamera.CameraDevices.Count - 1 do
begin
  WebListBox1.Items.Add(WebCamera.CameraDevices[i].Name);
end;

In TMS WEB Core v1.2 Padua, several new features have been added to the TWebDBGrid. This is a DB-aware grid for TMS WEB Core web client applications. Note that TMS WEB Core features a databinding model that is similar to the VCL databinding. There is the concept of a TDataSet, TDataSource and for a DB-aware TWebDBGrid, databinding is done by setting TWebDBGrid.DataSource := yourDataSource.

So, what is new in TWebDBGrid in TMS WEB Core v1.2:

• A new DB row indicator is added. This row indicator not only shows the active record but also the dataset state.
• New column types: cdCheck, cdLink, cdExternalLink, cdRadio, cdImage other than the default cdText type
• Column sorting and sort direction indication in the column header

procedure TForm1.WebClientDataSet1PictureGetText(Sender: TField;
  var Text: string; DisplayText: Boolean);
begin
  Text := 'http://www.tmssoftware.biz/tmsweb/demos/TMSWEB_ResponsiveGrid/img/' + StringReplace(Sender.AsString, '.jpg', '_96.jpg', [rfReplaceAll]);
end;

procedure TForm1.WebClientDataSet1URLGetText(Sender: TField; var Text: string;
  DisplayText: Boolean);
begin
  Text := 'https://' + Sender.AsString;
end;

procedure TForm1.WebDBGrid1FixedCellClick(Sender: TObject; ACol, ARow: Integer);
var
  LIndex: string;
  desc: boolean;
  opt: TIndexOptions;
begin
  if ACol = 0 then
    Exit;

  Lindex := 'By'+ WebDBGrid1.Columns[ACol - 1].DataField;

  // toggle sort order when the same column is clicked
  desc := SameText(webclientdataset1.ActiveIndex, LIndex);

  if desc then
    LIndex := LIndex + 'Desc';

  opt := [];

  if desc then
    opt := opt + [siDescending];

  // clear any previous indexes and add the new index to sort
  webclientdataset1.Indexes.Clear;
  webclientdataset1.Indexes.Add(LIndex, WebDBGrid1.Columns[ACol - 1].DataField, opt);
  webclientdataset1.ActiveIndex := LIndex;

  // set the sort indicator in the grid column header
  if ixDescending in webclientdataset1.Indexes.Find(Lindex).Options then
    WebDBGrid1.Columns[ACol - 1].SortIndicator := siDescending
  else
    WebDBGrid1.Columns[ACol - 1].SortIndicator := siAscending;

  // force the grid to update
  WebDataSource1.DataSet :=  WebClientDataSet1;
end;

Not so long ago, I posted about how to convert an image into a Base64 string. Today, I will show you that using TMS Web Core, this is even easier.

If we look into the source code of TMS Web Core, we find that the custom image control adds a public property called Base64Image of type string. That means, we can read the Base64 string of an image using that property. However, this is a read-only property. You cannot assign a Base64-string to it in order to assign image data. I will show a different approach how to work with Base64-strings for images in one of my next posts.

  TCustomImageControl = class(TCustomControl)
    // ...
  public  
    // ...
    property Base64Image: string read GetBase64Img;
  end;

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  WebImage.URL :=
    'https://images.pexels.com/photos/' +
    '2355519/pexels-photo-2355519.jpeg';
  WebMemo.Lines.Text := WebImage.Base64Image;
end;

One of the big new features in TMS WEB Core v1.2 Padua is the built-in support for 3D graphics. This is accomplished by providing Object Pascal components and classes that wrap the powerful ThreeJS / WebGL libraries for rendering 3D graphics in the browser. This technology is meanwhile supported on every mainstream browser, including on mobile devices.

As always, the goal of TMS WEB Core is to offer OO RAD Component based we development, so, integrating 3D graphics in your TMS WEB Core web client applications becomes a piece of cake. So, let's immediately jump to writing the code as an inspiration to get you started exploring the wonderful 3D web world.

When interfacing with an existing JavaScript libraries is done from a TMS WEB Core application, we have made it equally easy to setup the link references to these libraries. In case of 3D we will need the ThreeJS library. So, from the project context menu in the Delphi IDE select "Manage JavaScript Libraries" and from there check to use ThreeJS.



Next, put a TWebThreeJSChart on the form and you can start defining series for your chart. Since climate change is a bit a "hot" topic (pun intended) in the last years everywhere, for our sample we got the idea to render the average month temperatures in Belgium (where our main TMS office is located) for the past 3 years. We got the data from a website that lists the temperature measurements since 1833. You can find the data here.

The series we want to display are a series with all months of the year and a series for years. A series is of the type TThreeJsChartSeries and is created with the X and Y axis labels via:

var
  aSeries: TThreeJsChartSeries;

begin
  aSeries := TThreeJsChartSeries.Create(
   TJSArray.New('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'), 
   TJSArray.New('2017', '2018', '2019'));
end;

  aSeries.addLegendRow('Jan', TJSArray.New(1.1, 6.0, 3.0));

procedure TForm1.InitChart(AType: TThreeJSChartType);
var
  aSeries: TThreeJsChartSeries;
begin
  aSeries := TThreeJsChartSeries.Create(
    TJSArray.New('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'),
    TJSArray.New('2017', '2018', '2019')
  );

  aSeries.addLegendRow('Jan', TJSArray.New(1.1, 6.0, 3.0));
  aSeries.addLegendRow('Feb', TJSArray.New(6.1, 0.8, 7.0));
  aSeries.addLegendRow('Mar', TJSArray.New(9.6, 5.4, 8.5));
  aSeries.addLegendRow('Apr', TJSArray.New(8.8, 13.0, 11.0));
  aSeries.addLegendRow('May', TJSArray.New(15.5, 16.3, 12.0));
  aSeries.addLegendRow('Jun', TJSArray.New(19.2, 18.1, 0));
  aSeries.addLegendRow('Jul', TJSArray.New(18.3, 22.0, 0));
  aSeries.addLegendRow('Aug', TJSArray.New(18.1, 19.4, 0));
  aSeries.addLegendRow('Sep', TJSArray.New(14.1, 15.4, 0));
  aSeries.addLegendRow('Oct', TJSArray.New(13.3, 12.6, 0));
  aSeries.addLegendRow('Nov', TJSArray.New(6.6, 7.4, 0));
  aSeries.addLegendRow('Dec', TJSArray.New(4.4, 5.8, 0));

  aSeries.valueAxisMarkMaximum := 30;
  aSeries.valueAxisMarkStep := 5;
  aSeries.ChartType := AType;
  aSeries.valueFormatFloat := '#,##0°C';
  aSeries.Title := 'Average month'#13#10'temperatures Belgium';
  aSeries.ValueAxisTitle := 'Temp';
  aSeries.LegendAxisTitle := 'Months';
  aSeries.CategoryAxisTitle := 'Year';

  WebThreeJsChart1.Series := aSeries;
  WebThreeJsChart1.clearChart;
  WebThreeJsChart1.createChart;
end;

procedure TForm1.WebFormResize(Sender: TObject);
begin
  if WebThreeJsChart1.Width < Width then
  begin
    WebThreeJsChart1.Left := (Width - WebThreeJsChart1.Width) div 2;
  end;
end;

Web Development still feels “new” to a lot of Delphi developers as Delphi is known for desktop and database application development. Most developers also feel overwhelmed where to start.

I just noticed that Packt Publishing Limited offers several of their PDF books for free to get you started on a certain subject and Web Development is one of them. So, if you are thinking to look deeper into Web Frameworks and Delphi using TMS Web Core, the following books might prove to become an affordable, valuable resource. Offered for free are:

Thinking in HTML by Aravind Shenoy




Thinking in CSS by Aravind Shenoy




Thinking in JavaScript by Aravind Shenoy




Practical Web Development by Paul Wellens




AngularJS Essentials by Rodrigo Branas




What You Need to Know about NodeJS by Bruno Joseph Dmello

Ate too much candy?

FNC for the web!

PDF for the web!

procedure TPDFLibBMILogic.GeneratePDF;
var
  fn: string;
  o: TTMSFNCPDFIOExportObjectArray;
  r: TTMSFNCPDFIOExportRectArray;
  ms: TMemoryStream;
begin
  {$IFDEF ANDROID}
  fn := TPath.GetSharedDocumentsPath + PathDelim + 'BMI.pdf';
  {$ENDIF}
  {$IFDEF MACOS}
  fn := TPath.GetDocumentsPath + PathDelim + 'BMI.pdf';
  {$ENDIF}
  {$IFNDEF ANDROID}
  {$IFNDEF MACOS}
  fn := 'BMI.pdf';
  {$ENDIF}
  {$ENDIF}
  p.Options.Header := 'BMI Report for ' + FName;
  SetLength(o, 2);
  o[0] := FGauge;
  o[1] := FGrid;
  SetLength(r, 2);
  r[0] := RectF(50, 180, 50 + FGauge.Width, 180 + FGauge.Height);
  r[1] := RectF(50 + FGauge.Width + 50, 180, 50 + FGauge.Width + 50 + FGrid.Width, 180 + FGrid.Height);
  ms := TMemoryStream.Create;
  try
    p.Save(ms, o, r);
    ms.SaveToFile(fn);
    {$IFNDEF WEBLIB}
    TTMSFNCUtils.OpenFile(fn);
    {$ENDIF}
  finally
    ms.Free;
  end;
end;

Play with the demo yourself!

How to integrate a JavaScript component into TMS WEB Core

Getting started

• Download Froala Editor
• Add the required CSS and JS files to the project folder
• Embed a link in the project's HTML file

<link href="css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/froala_editor.pkgd.min.js"></script>

Setup the Froala Editor

• Declare an external function so we can use Object Pascal to create the Editor Object
• Create an object that links the Froala Editor events with the WEB Core event handlers
• Initialize the Froala Editor

var
  FEvents: TJSObject;
  FFroalaEditor: TJSObject;
  function froalaEditor(s: string; jsObject: TJSObject): TJSObject; overload; external name 'new FroalaEditor';

begin
    FEvents := new([
     'contentChanged', @HandleChanged,
     'initialized', @HandleLoaded,
     'focus', @HandleStartEdit,
     'blur', @HandleEndEdit
     ]);

    FFroalaEditor := froalaEditor('div#' + ElementID,	new([
      'toolbarInline', false,
      'events', FEvents
      ]));
end;

Two modes

  WebLabel1.EventStopPropagation := [];
  WebFroalaEditor1.Visible := False;
  WebFroalaEditor1.InlineEditing := True;
  WebFroalaEditor1.Editor := WebLabel1;

Live demo and source code

• The "Component Library Source" folder: Build and install the package file "TMSWEBFroalaEditor"
• The "Core Source" folder:
  • Option 1: Copy the PAS file to the "Core Source" subfolder of the TMS WEB Core install folder
  • Option 2: Add the path of the folder to the TMS WEB library path. (in the Delphi IDE: Tools>Options>TMS WEB>Library Path)

FNC

One Codebase

We want your feedback!

BETA

• TTMSFNCPDFLib: Non-visual component for creating rich content PDF documents.
  • HTML formatted text support
  • Drawing primitives such as lines, rectangles, ellipses and custom paths
  • Support for horizontal and vertical linear gradients
  • Separate Fill and Stroke implementation
  • URL support
  • Unicode character support
  • Cross platform
  • Support for images drawing with optional stretching, aspect ratio
  • Text flow in multiple columns
  • Overflow detection and calculation
  • Numerous predefined page sizes
  • Optional page header and footer


• TTMSFNCGraphicsPDFIO: Non-visual component based on TTMSFNCPDFLib to export UI controls such as TTMSFNCGrid, TTMSFNCPlanner, TTMSFNCChart as well as the complete dashboard controls set and many more.

Where do I find the BETA?

The FNC framework helps you to develop framework-independent, cross-platform applications. It has been conceived by tmssoftware.com a couple of years ago and has recently added the web as one of its platforms fascilitating TMS Web Core.

FNC really helps you to use the same source code for Windows, MacOS, iOS, Android, Linux and Raspberry Pi. Further, you can use the same components in the frameworks that give you access to these platforms: VCL, FMX and LCL.

A lot of functionality is exposed using non-visual components as well. However, I recently found a true gem of a class in its TMSFNCUtils.pas unit. The unit, of course, is available as VCL.TMSFNCUtils.pas, FMX.TMSFNCUtils.pas, and LCL.TMSFNCUtils.pas which means it can be used in any framework.

The unit contains one significant class called TTMSFNCUtils that offers a plethora of functionality that is usually tedious to implement and repetitive.

Today, we will focus on two different aspects in this blog post, and I will post more functionality in the coming weeks.

Display attributes

As blogged a couple of days ago, getting information about your display is very important so that you can scale your images correctly.TTMSFNCUtils gives you two very useful methods to get the relevant information about your forms and components quickly. Knowing what DPI your display uses is only half the work as you also need to know what DPI a certain component was designed for:

type
 TTMSFNCUtils = class
  public  
    class function IsHighDPIScale: Boolean;
    class function GetDPIScale({%H-}AOwner: TComponent = nil): Single;
 end;

LIsHighDPI := TTMSFNCUtils.IsHighDPIScale;

type
 TTMSFNCUtils = class
  public
 
    class function GetDocumentsPath: String;
    class function GetAppPath: String;
 end;

LMyDocPath := TTMSFNCUtils.GetDocumentsPath;
 LAppPath   := TTMSFNCUtils.GetAppPath;

Without a doubt, Bootstrap is one of the most popular CSS libraries for web applications. Using Bootstrap, you can easily create a consistent and modern looking web application. Since its inception, TMS WEB Core is designed to be totally open with respect to using a CSS library like Bootstrap or any other CSS library.

Basically, using HTML templates for your form files, you have the full HTML/CSS power to your disposition but also when building forms via the Delphi form designer there is help to use and integrate CSS.

Every TMS WEB Core UI control has at least the ElementClassName property from where you can set CSS classname(s) for the main HTML elements in the control. Where multiple HTML elements are used in UI controls, often multiple Element*ClassName properties exist. The Eleent*ClassName property editor in the IDE is smart, as it provides automatically lookup of possible CSS class names. This lookup is based on CSS libraries you might have added manually or via a library to your application.



But, back to Bootstrap! Given this is such a popular & powerful library, we've gone an extra step from TMS WEB Core v1.2.4.0 facilitating the ease of use to use it from the IDE and also to allow runtime Bootstrap theme selection.. To get started with Bootstrap in your project, select from the project context menu in the Project Manager under "Managing JavaScript Libraries" jQuery 3.3.1 (since Bootstrap 4 uses jQuery) and Bootstrap 4.3.1.



Now, at form level you have a new property TWebForm.CSSLibrary = (cssNone, cssBootstrap). Default this is cssNone but when you set it to cssBootstrap, this is picked up by UI control when these are added to the form so these new UI controls get optimally preset for Bootstrap.

To illustrate this, when we add a new checkbox to a form with CSSLibrary = cssNone, this becomes:



Now, when we set the form.CSSLibrary to cssBootstrap and add a checkbox, you can notice that a number of the TWebCheckBox properties got preset for optimal rendering with Bootstrap.

WebCheckBox.ElementButtonClassName = 'custom-control-input'
WebCheckBox.ElementClassName = 'custom-control custom-checkbox'
WebCheckBox.ElementFont = efCSS
WebCheckBox.ElementLabelClassName = 'custom-control-label'

WebPanel.ElementBodyClassName = 'card-body'
WebPanel.ElementClassName = 'card'

begin
  MessageDlg('Do you like the new Bootstrap capabilities?',mtInformation, [mbYes, mbNo]);
end;

procedure TForm3.WebListControl1ItemClick(Sender: TObject;
  AListItem: TListItem);
begin
  WebListcontrol1.ItemIndex := AListItem.Index;

  if WebListcontrol1.ItemIndex = 0 then
    Application.RemoveCSS('themecss')
  else
    Application.InsertCSS('themecss',AListItem.Text+'/theme.css');
end;

Intro

• TTMSFNCPDFLib: Non-visual component for creating rich content PDF documents.
  • HTML formatted text support
  • Drawing primitives such as lines, rectangles, ellipses and custom paths
  • Support for horizontal and vertical linear gradients
  • Separate Fill and Stroke implementation
  • URL support
  • Unicode character support
  • Cross platform
  • Support for images drawing with optional stretching, aspect ratio
  • Text flow in multiple columns
  • Overflow detection and calculation
  • Numerous predefined page sizes
  • Optional page header and footer


• TTMSFNCGraphicsPDFIO: Non-visual component based on TTMSFNCPDFLib to export UI controls such as TTMSFNCGrid, TTMSFNCPlanner, TTMSFNCChart as well as the complete dashboard controls set and many more.

Separate Product

• JSON reading, writing and parsing functionality
• Base64 and URL encoding and decoding
• Component persistence
• Undo/Redo Manager
• Verification of numeric, alphanumeric character sets
• Message, file open and save dialogs
• Easy access to application and documents folder
• Open files and URLs
• Bitmap container for storing JPEG, PNG, ICO, GIF and many more image formats with optional automatic URL downloading mechanism

Coming Up!

In the last post, I looked at methods to help you get information about connected displays and determine the path name for common folders. Let’s look at something very valuable when you want to convert binary data into a string: Base64 encoding.This is somewhat tricky if you have to consider all the different platforms and frameworks. FNC makes it very easy!

Again, the class TTMSFNCUtils offers awesome methods to get results quickly:

class function FileToBase64(const AFile: TTMSFNCUtilsFile): string;
   
class function Decode64(const AValue: string; 
                        const AURL: Boolean = False): string;
class function Encode64(const AValue: string; 
                        const AURL: Boolean = False): string; overload;
class function Encode64(const AValue: TBytes; 
                        const AURL: Boolean = False): string; overload;  

LBase64String := TTMSFNCUtils.FileToBase64( 'mydata.bin' );

LMyBase64String := TTMSFNCUtils.Encode64( 'testtest', false );
LMyTestString   := TTMSFNCUtils.Decode64( LMyBase64String, false );