TMS FNC UI Controls, a set of framework neutral controls

Introduction

As your customers use an ever increasing number of devices & operating systems, it is a daily challenge for us, software developers to make our software available for the myriad of target platforms in use. Fortunately, as Pascal developers, we already have a huge benefit that Delphi meanwhile targets 4 platforms: Windows, Mac OSX, iOS and Android. Add Lazarus to that, and Pascal developers can also target Linux and its derivatives such as Raspbian and many more. The 3 main frameworks we have available to create our software for these platforms are: VCL, FMX and LCL. The framework to use will be determined by the target and the IDE used. That implies that the controls that can be used are also typically determined by this choice and might limit your abilities when some controls or control features are not available for one of these frameworks. Addressing that limitation is exactly one of the primary goals of the TMS FNC UI Controls. It offers you a set of powerful & feature-rich UI controls that you can use in Delphi's VCL framework, FMX framework and Lazarus LCL framework. It allows to create Win32, Win64, Mac OS-X, iOS, Android, Linux, Raspbian, ... applications with a single codebase and a single learning curve.

Concept

FNC controls enable you to write and use 100% identical Pascal code, be it in a VCL app, FMX app or LCL app. The FNC components methods, properties and events are therefore 100% identical regardless of the framework being used. As an example, the following code creates a new event in our FNC Planner control:

var
  plIt: TTMSFNCPlannerItem;
begin
  plIt := TMSFNCPlanner1.Items.Add;
  plIt.StartTime := Date + EncodeTime(8,30,0,0);
  plIt.EndTime := Date + EncodeTime(11,0,0,0);
  plIt.Title := 'New event';
  plIt.Text := 'Content';
end;

uses 
{$IFDEF VCL}
  VCL.TMSFNCPlannerBase, VCL.TMSFNCPlannerData, VCL.TMSFNCPlanner, VCL.TMSFNCCustomControl;
{$ENDIF}

{$IFDEF FMX}
  FMX.TMSFNCPlannerBase, FMX.TMSFNCPlannerData, FMX.TMSFNCPlanner, FMX.TMSFNCCustomControl;
{$ENDIF}

{$IFDEF LCL}
 LCLTMSFNCPlannerBase,  LCLTMSFNCPlannerData, LCLTMSFNCPlanner, LCLTMSFNCCustomControl;    
{$ENDIF}

{$IFDEF VCL}
{$R *.dfm}
{$ENDIF}

{$IFDEF FMX}
{$R *.fmx}
{$ENDIF}

{$IFDEF LCL}
{$R *.lfm}
{$ENDIF}

var
  gr: TTMSFNCGraphics;
begin
  gr := TTMSFNCGraphics.Create(PaintBox1.Canvas);

  gr.Fill.Color := gcYellow;
  gr.Stroke.Color := gcGray;

  gr.DrawRectangle(0,0,100,20);

  gr.Font.Color := gcRed;
  gr.DrawText(2,0,100,20,'Hello world',false)
  gr.Free;
end;

begin
  TMSFNCGrid1.FixedRows := 2;
  TMSFNCGrid1.ColumnCount := 7;
  TMSFNCGrid1.MergeCells(1,0,2,1);
  TMSFNCGrid1.MergeCells(3,0,2,1);
  TMSFNCGrid1.MergeCells(5,0,2,1);

  TMSFNCGrid1.Cells[1,0] := 'Monday';
  TMSFNCGrid1.HorzAlignments[1,0] := gtaCenter;
  TMSFNCGrid1.Cells[1,1] := 'AM';
  TMSFNCGrid1.Cells[2,1] := 'PM';

  TMSFNCGrid1.Cells[3,0] := 'Tuesday';
  TMSFNCGrid1.HorzAlignments[3,0] := gtaCenter;
  TMSFNCGrid1.Cells[3,1] := 'AM';
  TMSFNCGrid1.Cells[4,1] := 'PM';

  TMSFNCGrid1.Cells[5,0] := 'Wednesday';
  TMSFNCGrid1.HorzAlignments[5,0] := gtaCenter;
  TMSFNCGrid1.Cells[5,1] := 'AM';
  TMSFNCGrid1.Cells[6,1] := 'PM';
  TMSFNCGrid1.AutoNumberCol(0);

  TMSFNCGrid1.AddCheckBox(1,2,false);
  TMSFNCGrid1.AddRadioButton(1,3,1);

  TMSFNCGrid1.AddProgressBar(3,2,50);
  TMSFNCGrid1.Cells[3,3] := 'Hello world';

  TMSFNCGrid1.AddBitmapFile(5,2,'e:	mscalendar.png');
  TMSFNCGrid1.AddBitmapFile(5,3,'e:	msmail.png');

  TMSFNCGrid1.Cells[1,4] := 'Red';
  TMSFNCGrid1.Colors[1,4] := gcRed;
  TMSFNCGrid1.Cells[3,4] := 'Yellow';
  TMSFNCGrid1.Colors[3,4] := gcYellow;
  TMSFNCGrid1.Cells[5,4] := 'Lime';
  TMSFNCGrid1.Colors[5,4] := gcLime;

  TMSFNCGrid1.FontNames[1,4] := 'Courier New';
  TMSFNCGrid1.FontStyles[3,4] := [fsBold];
  TMSFNCGrid1.FontSizes[5,4] := 12;

  TMSFNCGrid1.AddNode(2,2);
end;

  TMSFNCGrid1.LoadFromCSV('e:	mscars.csv');
  TMSFNCGrid1.Options.Filtering.DropDown := true;

begin
  TMSFNCRichEditor1.AddText('Dear Mr. NAME');
  TMSFNCRichEditor1.AddLineBreak;
  TMSFNCRichEditor1.AddText('CC: EMAIL');
  TMSFNCRichEditor1.SelStart := 9;
  TMSFNCRichEditor1.SelLength := 4;
  TMSFNCRichEditor1.SetSelectionMergeField('NAME');

  TMSFNCRichEditor1.SelStart := 21;
  TMSFNCRichEditor1.SelLength := 5;
  TMSFNCRichEditor1.SetSelectionMergeField('EMAIL');
end;

var
  sl: TStringList;
begin
  sl := TStringList.Create;

  try
    sl.Add('NAME=Elon Musk');
    sl.Add('EMAIL=elon@tesla.com');
    TMSFNCRichEditor1.Merge(sl);
  finally
    sl.Free;
  end;

  TMSFNCRichEditorRTFIO1.Save('e:	msmerge.rtf');

  TMSFNCRichEditor1.UnMerge;
end;

var
  tn,cn: TTMSFNCTreeViewNode;
begin
  TMSFNCTreeView1.BeginUpdate;

  TMSFNCTreeView1.Columns.Clear;
  TMSFNCTreeView1.Nodes.Clear;

  TMSFNCTreeView1.Columns.Add.Text := 'Country';
  TMSFNCTreeView1.Columns.Add.Text := 'Capital';

  tn := TMSFNCTreeView1.AddNode(nil);
  tn.Text[0] := 'Europe';

  cn := TMSFNCTreeView1.AddNode(tn);
  cn.Text[0] := 'Germany';
  cn.Text[1] := 'Berlin';

  cn := TMSFNCTreeView1.AddNode(tn);
  cn.Text[0] := 'France';
  cn.Text[1] := 'Paris';

  cn := TMSFNCTreeView1.AddNode(tn);
  cn.Text[0] := 'United Kingdom';
  cn.Text[1] := 'London';

  tn := TMSFNCTreeView1.AddNode(nil);
  tn.Text[0] := 'Asia';

  cn := TMSFNCTreeView1.AddNode(tn);
  cn.Text[0] := 'Japan';
  cn.Text[1] := 'Tokyo';

  cn := TMSFNCTreeView1.AddNode(tn);
  cn.Text[0] := 'China';
  cn.Text[1] := 'Peking';

  TMSFNCTreeView1.EndUpdate;
end;

begin
  TMSFNCTreeView1.Columns.Clear;
  TMSFNCTreeView1.Columns.Add;
  TMSFNCTreeView1.Columns[0].Text := 'Large treeview';
end;

procedure TForm1.TMSFNCTreeView1GetNumberOfNodes(Sender: TObject;
  ANode: TTMSFNCTreeViewVirtualNode; var ANumberOfNodes: Integer);
begin
    if ANode.Level = -1 then
    ANumberOfNodes := 100
  else  
  if ANode.Level = 0 then
    ANumberOfNodes := 100
  else  
  if ANode.Level = 1 then
    ANumberOfNodes := 100;
end;

procedure TForm1.TMSFNCTreeView1GetNodeText(Sender: TObject;
  ANode: TTMSFNCTreeViewVirtualNode; AColumn: Integer;
  AMode: TTMSFNCTreeViewNodeTextMode; var AText: string);
begin
  if ANode.Level = 0 then
    AText := 'Root node '+inttostr(ANode.Index)
  else
  if ANode.Level = 1 then
    AText := 'Child node '+inttostr(ANode.Index)
  else
  if ANode.Level = 2 then
    AText := 'Subchild node '+inttostr(ANode.Index);
end;

Back in 2013, I wrote a blog on persisting application settings in the cloud like Google Chrome for example does. The solution presented at that time was using the DropBox cloud service. The technique was quite simple. Persist settings in an INI file and automatically store and retrieve this INI file from a DropBox account.

Now, 3 years later, I wanted to revisit this technique and present a new solution that is more flexible and fine-grained and can be used from apps on Windows, Mac OSX, iOS, Android and Linux. The new technique will use the TMS structured data cloud storage service myCloudData.net.

As a brief introduction to myCloudData, think of it as configurable tables in the cloud, accessible with a REST API and using OAUTH 2 for authentication & authorization. If you want to learn more about myCloudData.net, check its API doc or another blog article written about it.

Time to get down to the nitty gritties! As an example, a VCL app was created with a left and right aligned panel and inbetween a memo. The user can customize the left panel and right panel width with a splitter control and by right-clicking the panel, the panel color can be changed. Further, there is a checkbox for both panels to toggle the visibility of the panel. This is a typical and basic skeleton of what many user configurable apps could be.



We'll now use the myCloudData.net service to store not only how the user configures this left and right panel, but also the last form's size and position on the screen. Whenever the user restarts the app, it will bring back the app as he originally left it on whatever machine the user starts this app. He will always find it back as he left it.
We'll drop a TAdvmyCloudData component on the form and in the form's constructor, we'll initialize it with the application key & secret obtained to use the myCloudData.net service. Further, this component is initialized to persist its application token & secret and finally, the call to AdvmyCloudData.Connect will test validity of possible existing tokens or will perform a new authentication & authorization when no valid tokens are found.

procedure TmCDDemo.FormCreate(Sender: TObject);
begin
  FConnected := false;
  AdvMyCloudData1.App.Key := MYCLOUDDATAKEY;
  AdvMyCloudData1.App.Secret := MYCLOUDDATASECRET;
  AdvMyCloudData1.App.CallBackPort := 8888;
  AdvMyCloudData1.App.CallBackURL := 'http://127.0.0.1:8888';

  AdvMyCloudData1.PersistTokens.Location := plIniFile;
  AdvMyCloudData1.PersistTokens.Key := '.myCloudData.ini';
  AdvMyCloudData1.PersistTokens.Section := 'tokens';
  AdvMyCloudData1.Connect;
end;

procedure TmCDDemo.ReadSettings;
var
  table: TMyCloudDataTable;

begin
  table := AdvMyCloudData1.TableByName('SETTINGS');

  if not Assigned(table) then
  begin
    table := AdvMyCloudData1.CreateTable('SETTINGS');
    table.MetaData.Add('PNLVISL', ftBoolean);
    table.MetaData.Add('PNLVISR', ftBoolean);
    table.MetaData.Add('PNLWL', ftInteger);
    table.MetaData.Add('PNLWR', ftInteger);
    table.MetaData.Add('PNLCLRL', ftInteger);
    table.MetaData.Add('PNLCLRR', ftInteger);
    table.MetaData.Add('FORMW', ftInteger);
    table.MetaData.Add('FORMH', ftInteger);
    table.MetaData.Add('FORML', ftInteger);
    table.MetaData.Add('FORMT', ftInteger);
    table.SetMetaData;
  end
  else
  begin
    table.Query;
    if table.Entities.Count > 0 then
    begin
      Self.Left := table.Entities[0].Value['FORML'];
      Self.Top := table.Entities[0].Value['FORMT'];
      Self.Width := table.Entities[0].Value['FORMW'];
      Self.Height := table.Entities[0].Value['FORMH'];
      LeftPanel.Visible := table.Entities[0].Value['PNLVISL'];
      RightPanel.Visible := table.Entities[0].Value['PNLVISR'];
      LeftPanel.Width := table.Entities[0].Value['PNLWL'];
      RightPanel.Width := table.Entities[0].Value['PNLWR'];
      LeftPanel.Color := TColor(table.Entities[0].Value['PNLCLRL']);
      RightPanel.Color := TColor(table.Entities[0].Value['PNLCLRR']);

      LeftCheckBox.Checked := LeftPanel.Visible;
      RightCheckBox.Checked := RightPanel.Visible;
    end;
  end;
end;

procedure TmCDDemo.FormClose(Sender: TObject; var Action: TCloseAction);
begin
  if FConnected then
    WriteSettings;
end;

procedure TmCDDemo.WriteSettings;
var
  table: TMyCloudDataTable;
  entity: TMyCloudDataEntity;
  ins: boolean;
begin
  table := AdvMyCloudData1.TableByName('SETTINGS');

  table.Query;

  ins := table.Entities.Count = 0;

  if not ins then
    entity := table.Entities[0]
  else
    entity := table.Entities.Add;

  entity.Value['FORML'] := Self.Left;
  entity.Value['FORMT'] := Self.Top;
  entity.Value['FORMW'] := Self.Width;
  entity.Value['FORMH'] := Self.Height;
  entity.Value['PNLVISL'] := LeftPanel.Visible;
  entity.Value['PNLVISR'] := RightPanel.Visible;
  entity.Value['PNLWL'] := LeftPanel.Width;
  entity.Value['PNLCLRL'] := integer(LeftPanel.Color);
  entity.Value['PNLWR'] := RightPanel.Width;
  entity.Value['PNLCLRR'] := integer(RightPanel.Color);

  if not ins then
    entity.Update
  else
    entity.Insert;
end;

When building HTTP Servers with TMS Business frameworks - more specifically Rest/JSON servers with TMS XData - you can use the builtin authentication and authorization mechanism to protect server resources/requests. Such mechanism is actually implemented in our lower-level framework TMS Sparkle and can be used for any types of HTTP server, not only XData. This blog post will show you how to use authorization and authentication using JSON Web Tokens.

JSON Web Token (JWT)

From Wikipedia: "JSON Web Token (JWT) is a JSON-based open standard (RFC 7519) for passing claims between parties in web application environment". That doesn't say much if we have never heard about it before. There is plenty of information out there to read more in details about JWT, so here I'm going directly to the point in a very summarized practical way.

A JWT is a string with this format:

aaaaaaaaaaa.bbbbbbbbbb.cccccccccc

It's just three sections in string separated by dots. Each section is a text encoded using base64-url:

(base64url-encoded header).(base64url-encoded claims).(base64url-encoded signature)

So a real JWT looks like this:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoidG1zdXNlciIsImlzcyI6IlRNUyBYRGF0YSBTZXJ2ZXIiLCJhZG1pbiI6dHJ1ZX0.
pb-4JAajpYxTsDTqWtgyIgpoqCQH8wlHl4RoTki8kpQ

If we decode each part of the JWT separately (remember, we have three parts separated by dots), this is what we would have from part one (spaces and returns added to make it more readable). It's the header:

{
  "alg":"HS256", 
  "typ":"JWT"
}

And this is part two decoded, which is the payload or claims set:

{
  "name":"tmsuser",
  "iss":"TMS XData Server",
  "admin":true
}

Finally the third part is the signature. It makes no sense to decode it here since it's just a bunch of bytes that represent the hash of three things: the header, the payload, and the secret that only the generator of the JWT knows.

The payload is the JSON object that "matters", it's the actual content that end-user applications will read to perform actions. The header contains meta information of the token, mostly the hashing algorithm used to generate the signature, also present in the token. So, we could say that a JWT is just an alternative way to represent a JSON object, but with a signature attached to it.

What does it has to do with authentication and authorization? Well, you can think of the JWT as a "session" or "context" for an user accessing your server. The JSON object in the payload will contain arbitrary information that you are going to put in there, like permissions, user name, etc. This token will be generated by your server upon some event (for example, an user "login"), and then the client will resend the token to the server whenever he wants to perform any operation. This would be the basic workflow:

Since only the server has the secret, there is no way the client can change the payload, adding false information to it - for example, change the user name or permissions. When the server receives the modified JWT, the signature will not match and the token will be rejected by the server.

For more detailed information on JSON Web Tokens (JWT) you can refer to https://jwt.io, the Wikipedia article or just the official specification. It's also worth mentioning that for handling JWT internally, either to create or validate the tokens, TMS XData uses under the hood the open source Delphi JOSE and JWT library.

JWT Authentication with TMS XData

Enough of theory, the next steps will show you how to implement authentication/authorization using JWT in TMS XData. This is just a suggestion of implementation, and it's up to you to define with more details how your system will work. In this example we will create a login service, add the middleware and use XData server-side events to implement authorization.

User Login and JWT Generation

We're going to create a service operation to allow users to perform login. Our service contract will look like this:

  [ServiceContract]
  ILoginService = interface(IInvokable)
  ['{BAD477A2-86EC-45B9-A1B1-C896C58DD5E0}']
    function Login(const UserName, Password: string): string;
  end;

Users will send user name and password, and receive the token. Delphi applications can invoke this method using the TXDataClient, or invoke it using regular HTTP, performing a POST request passing user name and password parameters in the body request in JSON format. Nevertheless, be aware that you should always use a secure connection (HTTPS) in your server to protect such requests.

The implementation of such service operation would be something like this:

uses {...}, Bcl.Jose.Core.JWT, Bcl.Jose.Core.Builder;
 
function TLoginService.Login(const UserName, Password: string): string;
var
  JWT: TJWT;
  Role: string;
  IsAdmin: Boolean;
begin
  { check if UserName and Password are valid, retrieve User data from database, 
   add relevant claims to JWT and return it. In this example, we will only
   add two claims: Role and IsAdmin.  }
  
  // Now that application specific logic is finished, generate the token 
  JWT := TJWT.Create(TJWTClaims);
  try
    JWT.Claims.SetClaimOfType<string>('role', Role);
    JWT.Claims.SetClaimOfType<string>('isadmin', IsAdmin);
    JWT.Claims.Issuer := 'XData Server';
    Result := TJOSE.SHA256CompactToken('secret', JWT);
  finally
    JWT.Free;
  end;
end;

Now, users can simply login to the server by performing a request like this (some headers removed):

POST /loginservice/login HTTP/1.1
content-type: application/json
 
{
  "UserName": "tmsuser",
  "Password": "tmsuser"
}

And the response will be a JSON object containing the JSON Web Token (some headers removed and JWT modified for better readibility):

HTTP/1.1 200 OK
Content-Type: application/json
 
{
    "value": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6InRtc3VzZXIiLCJpc3MiOiJYRGF0YSBTZXJ2ZXIifQ.CAxxa3aizZheG3VXmBoXtfdg3N5jN9tNAZHEV7R-W4Q"
}

For further requests, clients just need to add that token in the request using the authorization header by indicating it's a bearer token. For example:

GET /customers?$orderby=Name HTTP/1.1
content-type: application/json
authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6InRtc3VzZXIiLCJpc3MiOiJYRGF0YSBTZXJ2ZXIifQ.CAxxa3aizZheG3VXmBoXtfdg3N5jN9tNAZHEV7R-W4Q

Adding TJwtMiddleware to process tokens in requests

The second step is to add the TJwtMiddleware to our XData server module. It's done just once, before starting up the server with the module. All we need to inform is the secret our middleware will use to validate the signature of the received tokens:

uses {...}, Sparkle.Middleware.Jwt;
 
{...}
  Module.AddMiddleware(TJwtMiddleware.Create('secret'));

That's it. What this will do? It will automatically check for the token in the authorization header. If it does exist and signature is valid, it will create the IUserIdentity interface, set its Claims based on the claims in the JWT, and set such interface to the User property of THttpRequest object. Regardless if the token exists or not and the User property is set or not, the middleware will forward the processing of the request to your server anyway. It's up to you to check if user is present in the request and perform the correct actions. The only situation where the middleware will return immediately is if the token is present and is invalid (bad format or wrong signature). In this case it will return an error to the client immediately and your server code will not be executed.

Authorizing the requests

Finally, in your application code, all you have to do is check for such User property and take actions based on it. For example, suppose you have a service operation DoSomething that runs some arbitrary code. You don't want to allow anonymous requests (not authenticated) to execute that operation. And you will also only execute it if authenticated user is an administrator. This is how you would implement it:

uses {...}, Sparkle.Security, XData.Sys.Exceptions;
 
procedure TMyService.DoSomething;
var
  User: IUserIdentity;
begin
  User := TXDataOperationContext.Current.Request.User;
  if User = nil then
    raise EXDataHttpUnauthorized.Create('User not authenticated');
  if not (User.Claims.Exists('isadmin') and User.Claims['isadmin'].AsBoolean) then
    raise EXDataHttpForbidden.Create('Not enough privileges');
  
  // if code reachs here, user is authenticated and is administrador
  // execute the action
end;

Server-side events

The above code is valid for service operations. But you can also use server-side events to protect the entity sets published by XData. For example, you can use the OnEntityDeleting event to not allow non-admin users to delete resources. The event handler implementation would be pretty much the same as the code above (Module refers to a TXDataServerModule object):

  Module.Events.OnEntityDeleting.Subscribe(procedure(Args: TEntityDeletingArgs)
    var User: IUserIdentity;
    begin
      User := TXDataOperationContext.Current.Request.User;
      if User = nil then
        raise EXDataHttpUnauthorized.Create('User not authenticated');
      if not (User.Claims.Exists('isadmin') and User.Claims['isadmin'].AsBoolean) then
        raise EXDataHttpForbidden.Create('Not enough privileges');
    end
  );

That applies to all entities published by the server. Of course, if you want to restrict the code to some entities, you can check the Args.Entity property to verify the class of object being deleted and perform actions accordingly.

Finally, another nice example for authorization and server-side events. Suppose that every entity in your application has a property named "Protected" which means only admin users can see those entities. You can use a code similar to the one above to refuse requests that try to modify, create or retrieve a protected entity if the requesting user is not admin.

But what about complex queries that return multiple entities? In this case you can use the OnEntityList event, which will provide you with the Aurelius criteria (TCriteria) that will be used to retrieve the entities. You can then modify such criteria depending on user permissions:

  Module.Events.OnEntityList.Subscribe(procedure(Args: TEntityListArgs)
    var 
      User: IUserIdentity;
      IsAdmin: Boolean;
    begin
      User := Args.Handler.Request.User;
      IsAdmin := (User <> nil) and User.Claims.Exists('isadmin') and User.Claims['isadmin'].AsBoolean;
      if not IsAdmin then
        Args.Criteria.Add(TLinq.EqualsTo('Protected', false));
    end
  );

The code above simply checks if the requesting user has elevated privileges. If it does not, then it adds an extra condition to the criteria (whatever the criteria is) which filters only the entities that are not protected. So non-admin users will not see the protected entities in the server response.

Some weeks ago, we released the TMS FNC UI Pack, a set of Framework Neutral Components (FNC), i.e. UI controls that can be used from VCL Windows applications, FireMonkey (FMX) Windows, Mac OS-X, iOS, Android applications and LCL framework based Lazarus applications for Windows, Linux, Mac OS-X,..
The TMS FNC UI Pack contains highly complex & feature-rich components such as grid, planner, rich editor, treeview, toolbars. To create such complex components that work under 3 frameworks and a myriad of operating systems is not a trivial excercise and requires intricate knowledge about the VCL, FMX and LCL frameworks as well as the operating systems the controls need to work under.
To help ourselves and the users of the TMS FNC UI Pack, we have introduced several abstractions that facilitate creating framework neutral components and this is what we want to cover in this brief introduction to developing FNC custom controls.

FNC custom control basics

The structure of the FNC custom control we want to present is this of a classic UI control. The control is responsible for painting itself and interacts with keyboard and/or mouse. The control has several properties to control its appearance and behavior. If we look at this concept from the perspective of implementing this for 3 different frameworks, the biggest challenges faced are:

1) abstractions in the code for dealing with graphics: especially VCL and FMX are quite different in this respect, so abstraction is welcome.
2) abstractions in keyboard and mouse handling: also here there are differences, although subtle, between VCL, FMX and LCL.
3) abstractions in types: types such as font, color, rectangles, points are different in FMX and VCL.

So, we'll cover what is included in FNC to facilitate dealing with this.

Unit organisation

Perhaps the biggest stumbling block is unit organisation. As it is desirable to create components that can be installed in the IDE, (which means for Delphi for both the VCL and FireMonkey framework simultanously) we'll need units for VCL and units for FireMonkey. Although we can use the same class name, the class hierarchy for the VCL control and the FMX control will be different. The VCL FNC control will descend from the VCL TCustomControl and the FMX FNC control will descend from the FMX TControl. In Lazarus, the FNC control will descend from the LCL TCustomControl. In a nutshell, to solve this, we create 3 units for a component that will be nearly identical and we provide a conversion step to allow you to write the code in one unit and automatically generate the other units for the other frameworks. For this example, in total, we'll have 6 units: 3 units with the code for the control for the 3 supported frameworks and 3 units for the component registration in the IDE:

// Units for the VCL variant of the FNC control
VCL.TMSFNCCust.pas
VCL.TMSFNCCustReg.pas

// Units for the FMX variant of the FNC control
FMX.TMSFNCCust.pas
FMX.TMSFNCCustReg.pas

// Units for the LCL variant of the FNC control
LCLTMSFNCCust.pas
LCLTMSFNCCustReg.pas

uses
  Classes, Types, FMX.TMSFNCCustomControl, FMX.TMSFNCGraphics, FMX.TMSFNCTypes;

uses
  Classes, Types, LCLTMSFNCCustomControl, LCLTMSFNCGraphics, LCLTMSFNCTypes;

  TControlValue = 0..100;

  TTMSFNCCustomControlSample = class(TTMSFNCCustomControl)
  private
    FLineColor: TTMSFNCGraphicsColor;
    FFont: TTMSFNCGraphicsFont;
    FValue: TControlValue;
  protected
    procedure Draw({%H-}AGraphics: TTMSFNCGraphics; {%H-}ARect: TRectF); override;
  public
    constructor Create(AOwner: TComponent); override;
    destructor Destroy; override;
  published
    property Stroke;
    property Fill;
    property Font: TTMSFNCGraphicsFont read FFont write SetFont;
    property LineColor: TTMSFNCGraphicsColor read FLineColor write SetLineColor default gcRed;
    property Value: TControlValue read FValue write SetValue default 0;
  end;

{ TTMSFNCCustomControlSample }

constructor TTMSFNCCustomControlSample.Create(AOwner: TComponent);
begin
  inherited;
  Stroke.Color := gcBlack;
  FLineColor := gcRed;
  FFont := TTMSFNCGraphicsFont.Create;
  FFont.OnChanged := {$IFDEF LCL}@{$ENDIF}FontChanged;
  Width := 100;
  Height := 100; 
end;

destructor TTMSFNCCustomControlSample.Destroy;
begin
  FFont.Free;
  inherited;
end;

procedure TTMSFNCCustomControlSample.Draw(AGraphics: TTMSFNCGraphics;
  ARect: TRectF);
var
  angle: double;
  lf,tf: TPointF;
  w: single;
begin
  inherited;

  angle := Value/High(Value)*2*PI;

  w := Min(ARect.Right - ARect.Left, ARect.Bottom - ARect.Top) / 2;

  lf.X := (ARect.Right - ARect.Left)/2;
  lf.Y := (ARect.Bottom - ARect.Top)/2;

  tf.X := lf.X + Cos(angle) * w;
  tf.Y := lf.Y - Sin(angle) * w;

  AGraphics.Stroke.Color := LineColor;

  AGraphics.DrawLine(lf,tf);

  AGraphics.Font.Assign(Font);
  AGraphics.DrawText(ARect, InttoStr(Value),false, gtaCenter, gtaCenter);
end;

  TTMSFNCCustomControlSample = class(TTMSFNCCustomControl)
  protected
    procedure HandleKeyDown(var {%H-}Key: Word; {%H-}Shift: TShiftState); override;
    procedure HandleMouseDown({%H-}Button: TMouseButton; {%H-}Shift: TShiftState; {%H-}X, {%H-}Y: Single); override;
  end;

procedure TTMSFNCCustomControlSample.HandleKeyDown(var Key: Word;
  Shift: TShiftState);
begin
  inherited;

  if Key = KEY_DOWN then
  begin
    if Value > Low(Value) then
      Value := Value - 1;
  end;

  if Key = KEY_UP then
  begin
    if Value < High(Value) then
      Value := Value + 1;
  end;
end;

procedure TTMSFNCCustomControlSample.HandleMouseDown(Button: TTMSFNCMouseButton;
  Shift: TShiftState; X, Y: Single);
var
  angle: single;
  dx,dy: single;

begin
  inherited;

  if AllowFocus then
    SetFocus;

  dx := x - (Width/2);
  dy := - y + (Height/2);

  if dx = 0 then
    angle := sign(dy) * PI / 2
  else
    angle := ArcTan(dy/dx);

  if dx < 0 then
    angle := PI + angle;

  if angle < 0 then
    angle := angle + 2 * PI;

  Value := Round((angle / 2 / PI) * High(Value));
end;

powershell -command "(gc VCL.TMSFNCCust.pas) -replace 'VCL.TMS','LCLTMS' |Out-file LCLTMSFNCCust.pas -Encoding utf8"
powershell -command "(gc VCL.TMSFNCCust.pas) -replace 'VCL.TMS','FMX.TMS' |Out-file FMX.TMSFNCCust.pas -Encoding utf8"

Since 1995, the year tmssoftware.com started focussing on offering components & tools for developers, it was time for a fifth major overhaul of our website. Since the beginning of this year, a lot work went into this overhaul behind the scenes for this overhaul. Some of the main goals of this website overhaul we set at the beginning of this project were:

• Improved product discoverability
• Graphically evolve into a more modern style, influenced by Apple, Google material design, Windows 10 style
• Improved organisation of products by technologies and overview of product structure
• Find sufficient differentiating and recognizable style elements
• Move to responsive design for optimal UX for mobile, tablet, desktop
• Improved readability of information with more space, more contrast, more consistent and better structure of product pages
• Make the site more consistent with common web practices

  -  
It's with a lot of enthusiasm that we'd like to announce today that TMS software teams up with Malcolm Groves' new Code-Partners company. With this partnership, Code Partners becomes our exclusive representative for Australia, Japan and East-Asia. Code Partners will offer a full scale of services to assist you with your needs for application development and in relationship to TMS software products specifically, this includes:

• help you choosing the TMS components and tools for your tasks at hand
• offer expert-level consulting for integrating our components in your applications with a direct line to our R&D team
• handle selling of our products in the Australia, Japan and East-Asia region
• offer training on our components and tools
• make extra information, insights, tips & tricks available on TMS components online via blog, videos, webinars,..

• a win for our customers
• a win for Code Partners
• a win for us

I remember my first day at tmssoftware. Some guys behind their computer, busy toggling on their keyboard, all focused on that screen.
The first job Bruno gave me: here is our website, can you put all our products in a database, together with supported IDE's, frameworks, Windows versions. OK, not the nicest job... but afterwards I understood Bruno just wanted me to learn as fast as possible the entire product range. And yes, our product range is quite large.

The second job was to go through all product demo projects ... here we go again, this kept me busy for a few weeks. After this 'product' introduction, I finally was ready to take the challenge to enter the world of 'support'.

Now 8 years later, support is a daily routine, most of our customers know me, and more than that, most of the emails in the info@tmssoftware.com inbox are starting with 'hi Nancy'.

What also keeps fascinating me in this Delphi world is how everything evolves so incredibly fast. 8 years ago we were not even talking about FireMonkey, cross-platform development, components for accessing cloud services, testing on multiple devices like iPad, Android, Linux, Raspbian, ... It also seems like the Delphi world has a small group of real die-hard fans , always the same people you see in the Delphi Google communities, on forums, at conferences, ... Or is it just my imagination?

Beside all these new products we released over the 8 years, we also moved to a new office this year and last month we had a major redesign of our website (thanks again for all the positive comment we received!).

Can you imagine how curious I am about what new technologies, new challenges, new products, new exciting things I would write about in a similar blog post after another 8 years at tmssoftware?!

After these 8 years I can say I'm still glad to help our customers as good as I can and as fast as I can.

---
Kind regards,
Nancy Lescouhier
TMS software team

We're pleased and honoured to announce that Roman Yankovsky joins the TMS family and the excellent static code analysis tool FixInsight is from now on available as TMS FixInsight product. Roman Yankovsky is the architect and developer of the highly respected FixInsight tool for Delphi. We're proud and excited that the high expertise and talent of Roman is now part of the TMS family! First of all, some details about what FixInsight can do for you:

FixInsight is an IDE plugin from where you can start a static code analysis or you can configure FixInsight to run as part of the build process. This code analysis helps you identify all potential issues in the code and coding convention compliance. This let's you trace bugs before you or your customers do. At this time, FixInsight has 29 specific code warnings, like for example a warning about objects created in the Try block or destructors without override directive... It has 10 code convention warnings and 2 code optimization hints.



FixInsight is all about watching over the quality of the code from early on in the development process and by that reducing the number of bugs and reduce support.

With FixInsight being part of the TMS family now, we'll work together with Roman and we look forward to bring future versions of TMS FixInsight that make it even more feature-rich than today. We of course also welcome & look forward to all feedback, comments, needs from you about FixInsight.

FixInsight is available in two editions: TMS FixInsight Personal and TMS FixInsight Pro. The difference between the two is that TMS FixInsight Pro comes with a command-line tool to integrate running TMS FixInsight from various automation / build processes.
Discover FixInsight now by loading the trial version from here

In the past couple of months, TMS software formed a partnership with the company Cyberens with the goal to jointly develop cryptography solutions for Delphi, C++, C users. With this partnership, Bernard Roussely and Marion Candau from Cyberens bring in the high expertise in cryptography algorithms with the expertise of TMS software to bring this in intuitive and easy to use classes for Delphi and C++Builder users. Bernard Roussely and Marion Candau have years of experience with cryptography, developed cryptography based solutions for various high-profile security projects in companies and governments and have completed all the administrative work to satisfy EU export control requirements.

The first result coming forth out of this partnership is the TMS Cryptography Pack. This is a bundle of advanced and up-to-date cryptography algorithms such as AES, SPECK, SALSA20, ECIES encryption, SHA2 and SHA3 hash generation, RSA, EdDSA signing ...



You can discover the TMS Cryptography Pack here and download a fully functional trial version for Delphi XE2 to Delphi 10.1 Berlin.

We're excited to work together with Bernard Roussely & Marion Candau to build out a strong line of cryptography based solutions for software developers in the coming years and we're eager to learn about your needs, comments, wishes in this area.

It's almost three months since we released the first version of the TMS FNC UI Pack, a set of Framework Neutral Components (FNC), and have meanwhile released 2 major updates which include the TTMSFNCTabSet/TTMSFNCPageControl (v1.1), the recently introduced TTMSFNCListBox/TTMSFNCCheckedListBox and significant improvements / new features to the TTMSFNCTreeView such as filtering, sorting, keyboard lookup, clipboard support, ... (v1.2).

As already explained in previous blog posts (http://www.tmssoftware.com/site/blog.asp?post=335 and http://tmssoftware.com/site/blog.asp?post=346), the TMS FNC UI Pack is a set of UI controls that can be used from VCL Windows applications, FireMonkey (FMX) Windows, Mac OS-X, iOS, Android applications and LCL framework based Lazarus applications for Windows, Linux, Mac OS-X, ... . The TMS FNC UI Pack contains highly complex & feature-rich components such as grid, planner, rich editor, treeview, toolbars. So, with a single set of controls, you have the freedom of choice to use Delphi, C++Builder or the free Lazarus to create applications for a myriad of operating systems, you have a single learning curve to these components and as demonstrated here, you can use a single source to create apps for multiple targets.

This blog post will cover the TTMSFNCCheckedListBox, which is one of the new components that are added in the latest release (v1.2) of the TMS FNC UI Pack, show how to use myCloudData.net to store data and demonstrate how easy it is to switch between FMX, VCL and LCL with one shared source code. myCloudData is an easy to use & flexible service to make use of structured storage in the cloud from Windows, web, mobile or IoT apps and is offered by tmssoftware.com. myCloudData is OAUTH/JSON REST based and our TMS Cloud Pack includes a component to access the service and thus your data seamlessly.

A single shared source

  TTODOListLogic = class
  private
    FTable: TMyCloudDataTable;
    FListBox: TTMSFNCCheckedListBox;
    FMyCloudDataAccess: TMyCloudDataAccess;
    FOnConnected: TNotifyEvent;
    FBitmapContainer: TTMSFNCBitmapContainer;
  protected
    procedure DoConnected(Sender: TObject);
  public
    destructor Destroy; override;
    procedure InitListBox(AListBox: TTMSFNCCheckedListBox);
    procedure InitMyCloudData;
    procedure Refresh;
    procedure InitializeTable;
    procedure AddNewItem(AText: string; ADate: TDateTime; APriority: TPriority);
    procedure DeleteItem;
    procedure Connect;
    procedure DoBeforeDrawItem(Sender: TObject; AGraphics: TTMSFNCGraphics; ARect: TRectF; AItem: TTMSFNCListBoxItem; var AAllow: Boolean; var ADefaultDraw: Boolean);
    procedure DoItemCheckChanged(Sender: TObject; AItem: TTMSFNCCheckedListBoxItem);
    procedure DoItemCompare(Sender: TObject; Item1, Item2: TTMSFNCListBoxItem; var ACompareResult: Integer);
    property OnConnected: TNotifyEvent read FOnConnected write FOnConnected;
    property BitmapContainer: TTMSFNCBitmapContainer read FBitmapContainer write FBitmapContainer;
  end;

uses
  Classes, SysUtils, DB
  {$IFDEF VCL}
  ,VCL.TMSFNCListBox, VCL.TMSFNCCheckedListBox, CloudMyCloudData, CloudBase, VCL.TMSFNCUtils,
  CloudCustomMyCloudData, VCL.TMSFNCGraphics, VCL.Dialogs, VCL.TMSFNCTypes, Types, VCL.TMSFNCBitmapContainer;
  {$ENDIF}

  {$IFDEF FMX}
  ,FMX.TMSFNCListBox, FMX.TMSFNCCheckedListBox, FMX.TMSCloudMyCloudData, FMX.TMSCloudBase,
  FMX.TMSFNCUtils, FMX.TMSCloudCustomMyCloudData, FMX.TMSFNCGraphics, FMX.TMSFNCTypes, FMX.Dialogs, Types, FMX.TMSFNCBitmapContainer;
  {$ENDIF}

  {$IFDEF LCL}
  ,LCLTMSFNCListBox, LCLTMSFNCCheckedListBox, LCLTMSCloudMyCloudData, LCLTMSCloudBase,
  LCLTMSFNCUtils, LCLTMSCloudCustomMyCloudData, LCLTMSFNCGraphics, Dialogs, LCLTMSFNCTypes, LCLTMSFNCBitmapContainer;
  {$ENDIF}

myCloudData

procedure TTODOListLogic.InitMyCloudData;
begin
  FMyCloudDataAccess := TMyCloudDataAccess.Create(nil);
  FMyCloudDataAccess.PersistTokens.Location := plIniFile;
  {$IFDEF FMX}
  FMyCloudDataAccess.PersistTokens.Key := TTMSFNCUtils.GetDocumentsPath + PthDel + 'myclouddatafmx.ini';
  FMyCloudDataAccess.OnConnected := DoConnected;
  {$ENDIF}
  {$IFDEF VCL}
  FMyCloudDataAccess.PersistTokens.Key := TTMSFNCUtils.GetDocumentsPath + PthDel + 'myclouddatavcl.ini';
  FMyCloudDataAccess.OnConnected := DoConnected;
  {$ENDIF}
  {$IFDEF LCL}
  FMyCloudDataAccess.PersistTokens.Key := TTMSFNCUtils.GetDocumentsPath + PthDel + 'myclouddatalcl.ini';
  FMyCloudDataAccess.OnConnected := @DoConnected;
  {$ENDIF}
  FMyCloudDataAccess.PersistTokens.Section := 'tokens';
  FMyCloudDataAccess.App.Key := MYCLOUDDATAKEY;
  FMyCloudDataAccess.App.Secret := MYCLOUDDATASECRET;
  FMyCloudDataAccess.App.CallBackPort := 8888;
  FMyCloudDataAccess.App.CallBackURL := 'http://127.0.0.1:8888';
end;

type
  {$IFDEF VCL}
  TMyCloudDataAccess = class(TAdvMyCloudData);
  {$ENDIF}

  {$IFDEF FMX}
  TMyCloudDataAccess = class(TTMSFMXCloudMyCloudData);
  {$ENDIF}

  {$IFDEF LCL}
  TMyCloudDataAccess = class(TTMSLCLCloudMyCloudData);
  {$ENDIF}

procedure TTODOListForm.DoConnected(Sender: TObject);
begin
  Panel1.Enabled := True;
  Panel2.Enabled := True;
  TMSFNCToolBarButton2.Enabled := False;
  TMSFNCCheckedListBox1.Enabled := True;
  TMSFNCToolBarButton4.Enabled := True;
  TMSFNCToolBarButton5.Enabled := True;
  TMSFNCToolBarButton6.Enabled := True;
  TMSFNCToolBarItemPicker1.Enabled := True;
  FTODOListLogic.InitializeTable;
  FTODOListLogic.Refresh;
end;

procedure TTODOListForm.FormCreate(Sender: TObject);
begin
  FTODOListLogic := TTODOListLogic.Create;
  FTODOListLogic.InitListBox(TMSFNCCheckedListBox1);
  FTODOListLogic.InitMyCloudData;
  {$IFDEF LCL}
  FTODOListLogic.OnConnected := @DoConnected;
  {$ELSE}
  FTODOListLogic.OnConnected := DoConnected;
  {$ENDIF}
  TMSFNCCheckedListBox1.BitmapContainer := TMSFNCBitmapContainer1;
  TMSFNCToolBarItemPicker1.BitmapContainer := TMSFNCBitmapContainer1;
  TMSFNCToolBarItemPicker1.Bitmaps.Clear;
  TMSFNCToolBarItemPicker1.Bitmaps.AddBitmapName('low');
  TMSFNCToolBarItemPicker1.DisabledBitmaps.Assign(TMSFNCToolBarItemPicker1.Bitmaps);
  TMSFNCToolBarButton2.DisabledBitmaps.Assign(TMSFNCToolBarButton2.Bitmaps);
  TMSFNCToolBarButton4.DisabledBitmaps.Assign(TMSFNCToolBarButton4.Bitmaps);
  TMSFNCToolBarButton5.DisabledBitmaps.Assign(TMSFNCToolBarButton5.Bitmaps);
  TMSFNCToolBarButton6.DisabledBitmaps.Assign(TMSFNCToolBarButton6.Bitmaps);

  dt := TMyDateTimePicker.Create(Self);
  {$IFDEF FMX}
  dt.Position.X := 5;
  dt.Position.Y := 40;
  {$ELSE}
  dt.Left := 5;
  dt.Top := 40;
  {$ENDIF}
  dt.Date := Now;
  dt.Parent := Panel1;
  dt.Width := 105;
end;

procedure TTODOListForm.FormDestroy(Sender: TObject);
begin
  FTODOListLogic.Free;
end;

procedure TTODOListForm.TMSFNCCheckedListBox1ItemSelected(Sender: TObject;
  AItem: TTMSFNCListBoxItem);
begin
  TMSFNCToolBarButton6.Enabled := True;
end;

procedure TTODOListForm.TMSFNCToolBarButton1Click(Sender: TObject);
begin
  FTODOListLogic.Refresh;
end;

procedure TTODOListForm.TMSFNCToolBarButton2Click(Sender: TObject);
begin
  FTODOListLogic.Connect;
end;

procedure TTODOListForm.TMSFNCToolBarButton3Click(Sender: TObject);
begin
  FTODOListLogic.DeleteItem;
end;

procedure TTODOListForm.TMSFNCToolBarButton4Click(Sender: TObject);
begin
  FTODOListLogic.AddNewItem(Edit1.Text, dt.Date, TPriority(TMSFNCToolBarItemPicker1.SelectedItemIndex));
end;

procedure TTODOListForm.TMSFNCToolBarItemPicker1ItemSelected(Sender: TObject;
  AItemIndex: Integer);
begin
  TMSFNCToolBarItemPicker1.Bitmaps.Clear;
  TMSFNCToolBarItemPicker1.Bitmaps.AddBitmapName(TMSFNCBitmapContainer1.Items[AItemIndex].Name);
  TMSFNCToolBarItemPicker1.DisabledBitmaps.Assign(TMSFNCToolBarItemPicker1.Bitmaps);
end;

This isn't the first funny Windows 10 behavior I encounter that makes a developer scratch his head but I thought to share this particular one.

As it happens, here at TMS software, we quite often deal with grid related code, be it with our VCL TAdvStringGrid or FMX TTMSFMXGrid or FNC TTMSFNCGrid and when doing some testing code for our grid, why not create a new Delphi project Grid.dproj. To my surprise, compiling & running this app from the Delphi 10.1 Berlin IDE shows a funny black notification window for a moment on startup. The notification changes randomly and always informs about some shortcut keys.
My initial thought was that our grid code somehow erratically triggered something in the new Win 10 toast notification code in the Delphi 10.1 Berlin VCL. But no, even after removing our grid component, the notification kept coming. The app reduced to its minimum of an empty form with a single label shows the notification on startup.


Form at design time


Form at runtime

Then we created a new application, called Project1.dproj and surprise,... no such shortcut notification. Next logical step .. compare the grid.dproj file and the project1.dproj file to see if there was some difference in the .dproj file that could trigger this behavior. But no, no suspicious differences found.
Next we suspected a virus and therefore tested the app source on a different Windows 10 machine and the magic notification popped up again.

At that point, Google is your friend and after a quite long search, it leaded to suspect the XBox games Grid and Grid2 where Windows shows a notification of shortcuts for games. Searching the XBox store indeed reveals such game Grid and Grid2.



And yes, renaming the Delphi project to grid2.dproj will also make the notification appear for grid2.exe but not so with grid3.dproj or any other combination.

Being still intrigued by this Windows behavior, we thought that Windows 10 had perhaps some registry key that contains apps for which to show these notifications on startup, but nowhere grid.exe or grid2.exe could be found in the registry. That leaves us with the assumption that somewhere hidden in the Windows 10 source code, there must be a hardcoded reference to grid.exe and grid2.exe.
Conclusion in a nutshell: do not ship Delphi apps named grid.exe or grid2.exe to your customer if you want to avoid your customer asking questions about a weird notification coming up. :)

Delphi Cookbook 2ed by Daniele Teti is finally available. It is a best seller for PacktPub in its category, you can find more information about the book on its author blog.

I am honored to be the reviewer of the second edition. It was an exciting adventure to take a look behind the curtains of book publishing. And I have to say that Daniel did a great job.

Like any cookbook, this book is a collection of recipes. It is exactly what a "cookbook" should be. Recipes are very different - from the use of VCL styles to the drawing on a FMX ListView component, and from examples of functional programming in Delphi to importing a Java-library interface in Android. Over 60 recipes, according to the cover :)

Personally for me, the most interesting part of this book is not the essence of the recipes themselves, but the fact that the author uses all Delphi innovations when it's possible. This was very interesting to watch. Delphi has been developing very quick in recent years, and we are not always aware of how much is new in the recent versions.

I therefore recommend Delphi Cookbook primarily for those who still works with older versions of Delphi and wants to take a closer look at the innovations. Although those who work with the latest version will definetely find something to expand their horizons too. And it particularly useful as a reference book.

PacktPub was so kind to offer 50% discount on the ebook for FixInsight customers. If you order a FixInsight license in July you will get a discount coupon for the book on PacktPub website.

Since 1995, the year Delphi was born, TMS software has been creating components and tools for developers for 21 years now and in all these years, our offerings have grown significantly. From the beginning, we have focused on VCL UI controls but soon controls for IntraWeb and .NET were added. As soon as Embarcadero introduced the cross-platform FireMonkey (FMX) framework, we started to create UI controls for this framework as well. Around the same time, a product line to help you with your business logic, the TMS Business Subscription set of products was created. Then the explosion of cloud services came and we jumped on that bandwagon with our series of cloud components to make it dead-easy to connect & consume these cloud services. Recently, our newest line of UI controls, the FNC (Framework Neutral Components) was launched where the focus is on offering you one set of components, one learning-curve and the freedom to use the controls (simultaneously or not with a single source base) for VCL Windows applications, FMX cross platform applications with Delphi or C++Builder or take a different route with the free Lazarus IDE/FPC compiler and the LCL framework to target Windows, Linux, macOS, ...

We have long lost count of the number of components we have on offer and we have been wrestling a lot with trying to present our products as logically structured, easy to find and to discover as possible. With the introduction of our new website v5.0 end of May this year, a strong focus was on organisation per technology/framework with color coding of technologies for easy recognition. In the product popup accessible from the top menu, the organisation is more semantically, grouping by themes like grids, charts, cloud, ...

But long on our todolist was also a system to tag our components and make tag based search possible this way. Well, today, I'm happy to introduce our tag based search on our website. Our tag based search is not replacing regular text based search or navigation mechanisms per technology/framework or theme. It is just one more way, one more tool to help you find what you are looking for.

Note that from now on, our products display their tags at the bottom of the product page and tag based search can be started from clicking on these tags but is also possible from the product popup or regular search started from the top right corner.

To see the tag search in action, here is a sample where a search for a treeview control is done. The word treeview can be typed or picked from the tag list. The search returns the different products, nicely color coded per technology in what products we offer a treeview control:



We hope this additional tool on our website will help you finding what you need faster. As time evolves and with your feedback, we'll further fine-tune & extend the tags. Let us know what you think about it and how you like it!

We're excited to present the newest edition of the TMS Component Pack v8.3, our pack of over 400 VCL UI controls to make powerful, feature-rich Windows applications with Delphi & C++Builder.

The TMS Component Pack first version dates back from 1998 when our customers started asking for a bundle of our grid component and growing number of additional VCL UI controls developed by then.

TMS Component Pack is as such 18 years in the making and it's a relentless job to keep fine-tuning existing controls to changing needs, changing UI requirements, new UI paradigms & themes, new feature requests and add create brand new controls. Both surprising and exciting is that during all these 18 years, almost on a weekly basis, new ideas come in from you and from our team for component features and new components. A lot of our customers using TMS Component Pack UI controls are as passionate as our team about getting exactly the right look & feel, behavior and capabilities from the controls.

With this new version v8.3 we have added the usual list of new features, improvements and fixes. You can always consult this list here. One especially bigger extension was drag & drop support, sorting & filtering in our supercharged multicolumn treeview control. But in this blog, I wanted to draw your attention to new controls added in this release.

First of all, there is the new TAdvSearchList / TAdvSearchEdit.

The design of this component is inspired by new paradigms in search controls featured mostly on websites. Websites like Amazon, AliExpress, Google, Facebook, Booking.com, Trivago, ... all help the user in search by filtered suggestion lists as you type. TAdvSearchList is the basis for such list and offers a multicolumn list with optional categorized items, pictures, text and description with items, a place to show a number of search results and various criteria to find a match from first character, anywhere in a word, in text only or text and description etc...

Where the list control can be easily hooked up to a separat edit control and perform its search & filtering, the TAdvSearchEdit has the list embedded in a dropdown and it features additional optional buttons for directly filtering per categories when categories are used. It can as such be configured as a simple list to more complex and attractive looking lookup lists like this example:



Second new control added as is TAdvResponsiveList (preview).

The TAdvResponsiveList is a VCL UI control inspired by responsive design techniques and bringing this paradigm to Windows controls.As is the case with browsers, where we want to offer the best experience regardless of the browser client area size, Windows applications can also benefit from adapting the control's look & feel and behavior to the control's size to ensure the experience with your application is optimal regardless of the size of the screen of the user or regardless of a user running your application in a small window just in a corner of his desktop.



In a nutshell, TAdvResponsiveList offers a variable number of conditions that can be set for rendering its content depending on the size of the control. This can range from the number of columns depending on the width, the number or rows depending on the height, the absolute or relative size of cells when the control is resizing etc... As each cell offers rendering of HTML formatted text and this HTML formatted text can be the result of a template and in the conditions, variable templates can be set depending on the condition, i.e. size of the control. This way, more or less detail can be shown in the control item depending on its size.
But the sheer flexibility of this control becomes apparent when TAdvResponsiveList instances can be used as a child control in a TAdvResponsiveList and both parent and child can have their set of conditions. Or when you can create your own control descending from TAdvResponsiveList that can have fully custom drawn items.
A first developers guide to TAdvResponsiveList is available now. With TMS Component Pack 8.3, you can explore and start using the control from today in your applications. It is for now still marked as being in preview as this is all new to VCL application developers and we're eager to learn about your thoughts, comments, feedback, ideas & suggestions for next iterations of TAdvResponsiveList.

We're pleased that in the month September we have again the chance to meet our customers, to show our products, to meet new developers who wishes to learn about our components & tools, ... on several upcoming events in Europe.

Bruno Fierens has also been invited as speaker, Bruno will talk about the challenges of creating cross-framework Pascal components. He will bring a session that discusses the differences between Pascal UI frameworks, how to build UI controls that can be used in the different UI frameworks and an introduction to the complex TMS FNC UI Controls that we have released so far. We will also show a sneak preview of a few brand new FNC UI controls that are currently in development.
An overview of the events:

SDN event - 2 September

Delphi Congrès 2016 - 15 September

Delphi-Tage 2016 - 17 September

Pascal Delphi Festival 2016 - 20 September

We're pleased to inform TMS FNC UI Pack beta v1.5 is available now for all TMS ALL-ACCESS customers. In this beta version we've added no less than 10 NEW components! With TMS FNC UI Pack you only need to use 1 UI control set to master application development in VCL, FMX + LCL and target 5+ different operating systems.

What's new in the TMS FNC UI Pack beta release:

• New: TTMSFNCGridDatabaseAdapter: adapter to connect the TTMSFNCGrid to any database
• New: TTMSFNCToolBarPopup: popup version of the TTMSFNCToolBar
• New: TTMSFNCRichEditorEditToolBarPopup & TTMSFNCRichEditorFormatToolBarPopup: popup version of the rich editor format and edit toolbar
• New: TTMSFNCScrollBar: fully configurable scrollbar
• New: TTMSFNCResponsiveList: responsive design list control
• New: TTMSFNCSearchList: multi-column list with optional categorized items, pictures and text
• New: TTMSFNCSearchEdit: editable version of the TTMSFNCSearchList
• New: TTMSFNCHint: application / form wide HTML formatted hints
• New: TTMSFNCURLBitmapContainer: bitmap container with the ability to download images from an URL
• Comes with several new demos that demonstrate various features of the 10 new components we have added in this beta version.

We're eager to hear your experiences with the beta version!

In TMS VCL Cloud Pack v3.7, new components TAdvmyCloudDataConnection and TAdvmyCloudDataDataSet have been added. With these 2 components, access to structured data on the cloud via the myCloudData service becomes easier than ever.

TAdvmyCloudDataConnection
TAdvmyCloudDataConnection is a non-visual component that manages access to myCloudData. It works as the intermediator for the authentication and authorization to access myCloudData for one or multiple TAdvmyCloudDataDataSet instances. This means that via the TAdvmyCloudDataConnection at least a one-time authentication and authorization is done with myCloudData to obtain the access token and the TAdvmyCloudDataDataSet can then work through TAdvmyCloudDataConnection to use this access token. To let the TAdvmyCloudDataDataSet use the connection is as simple as assigning the TAdvmyCloudDataConnection instance to TAdvmyCloudDataDataSet.Connection, just like we are used to assign a TADOConnection to a TADOTable for example.

TAdvmyCloudDataDataSet
TAdvmyCloudDataDataSet is a wrapper as a dataset of a table in the myCloudData service. When a connection is provided, set either the name of the table via the Table property or the unique ID of the table via the TableID property. When a connection has been made (i.e. access token was obtained), setting the property TAdvmyCloudDataDataSet.Active to true will fetch the table data from the myCloudData table and present it as a TDataSet through a TDataSource to any DB-aware component in VCL or via LiveBindings in FireMonkey applications. Note that this approach works both at run-time and design-time, so we can work with the cloud data at design-time to configure our DB-aware controls connected to it.

Dataset filter
An easy way is provided to perform basic dataset filtering. The TAdvmyCloudDataDataSet has a filter property which is presented as a collection of filter conditions. The filter condition consists of a field name, filter value, a filter condition logical operator and a filter comparison operator. The filter condition can be easily set at design-time where the dataset field can be picked and the values set.

From here we can work with the cloud data in much the same way from our code on the dataset as Delphi developers have been doing all the time with datasets, i.e. insert, delete, update records.

Rich metadata
But with the updated myCloudData service, there is much more than this possible as myCloudData now offers rich metadata for its structured data. This rich metadata can be programmatically accessed, created and updated but also easily configured via the myCloudData web interface. We'll cover this in a follow-up blog focused on how we can benefit from this rich metadata, but here you can already glance over the web interface you can access from your myCloudData account:

You can explore all this with a free myCloudData account. Create a new table via this account and you can use our TAdvmyCloudDataDataSetDemo application included in TMS VCL Cloud Pack to explore this.

Stay tuned for more!

We released earlier this week a major update of the TMS FMX Cloud Pack. This new version adds a lot of new components covering seamless access to all kinds of interesting cloud services. Among the new services covered, two services from Microsoft stand out and open up new ways to enrich our Delphi applications with cool features. In this blog, I wanted to present the Microsoft Computer Vision and Microsoft Bing speech service. Our new components TTMSFMXCloudMSComputerVision and TTMSFMXCloudMSBingSpeech offer instant and dead-easy access to these services. Powered with these components, the idea came up to create a small iPhone app that let's vision impaired people take a picture of their environment or a document and have the Microsoft services analyze the picture taken and let Microsoft Bing speech read the result.

So, roll up your sleeves and in 15 minutes you can assemble this cool iPhone app powered with Delphi 10.1 Berlin and the TMS FMX Cloud Pack!
To get started, the code is added to allow taking pictures from the iPhone. This is a snippet of code that comes right from the Delphi docs. From a button's OnClick event, the camera is started:

  if TPlatformServices.Current.SupportsPlatformService(IFMXCameraService,
    Service) then
  begin
    Params.Editable := True;
    // Specifies whether to save a picture to device Photo Library
    Params.NeedSaveToAlbum := false;
    Params.RequiredResolution := TSize.Create(640, 640);
    Params.OnDidFinishTaking := DoDidFinish;
    Service.TakePhoto(Button1, Params);
  end

procedure TForm1.FormShow(Sender: TObject);
begin
  TMSFMXCloudMSBingSpeech1.App.Key := MSBingSpeechAppkey;
  TMSFMXCLoudMSComputerVision1.App.Key := MSComputerVisionAppkey;
end;

So, a TTask is used to start this analysis with the call TMSFMXCLoudMSComputerVision1.ProcessFile(s, cv). A TTask is used to avoid that the UI is locked during this analysis, after-all, the image must be submitted to Microsoft, processed and the result returned and parsed, so this can take 1 or 2 seconds. Depending on the analysis type, the result is captured as text in a memo control. After this, we connect to the Bing speech service.

procedure TForm1.DoDidFinish(Image: TBitmap);
var
  aTask: ITask;
  s: string;
  cv: TMSComputerVisionType;
begin
  CaptureImage.Bitmap.Assign(Image);

  // take local copy of the file for processing
  s := TPath.GetDocumentsPath + PathDelim + 'photo.jpg';
  Image.SaveToFile(s);

  // asynchronously start image analysis
  aTask := TTask.Create (procedure ()
    var
      i: integer;
    begin
      if btnAn0.IsChecked then
        cv := ctAnalysis;
      if btnAn1.IsChecked then
        cv := ctOCR;

      if TMSFMXCLoudMSComputerVision1.ProcessFile(s, cv) then
      begin
        Description := '';

        if cv = ctAnalysis then
        begin
          // concatenate the image description returned from Microsoft Computer Vision API
          for I := 0 to TMSFMXCLoudMSComputerVision1.Analysis.Descriptions.Count - 1 do
          begin
            Description := Description + TMSFMXCLoudMSComputerVision1.Analysis.Descriptions[I] + #13#10;
          end;
        end
        else
        begin
          Description := TMSFMXCLoudMSComputerVision1.OCR.Text.Text;
        end;

        // update UI in main UI thread
        TThread.Queue(TThread.CurrentThread,
          procedure ()
          begin
            if Assigned(AnalysisResult) then
              AnalysisResult.Lines.Text := Description;
          end
          );
        TMSFMXCloudMSBingSpeech1.Connect;
      end
      else
      begin
        // update UI in main UI thread
        TThread.Queue(TThread.CurrentThread,
          procedure ()
          begin
            AnalysisResult.Lines.Add('Sorry, could not process image.');
          end
          );
      end;
    end
    );

  aTask.Start;
end;

procedure TForm1.TMSFMXCloudMSBingSpeech1Connected(Sender: TObject);
var
  st: TMemoryStream;
  s: string;
begin
  st := TMemoryStream.Create;
  s := AnalysisResult.Lines.Text;
  try
    TMSFMXCloudMSBingSpeech1.Synthesize(s, st);
    TMSFMXCloudMSBingSpeech1.PlaySound(st);
  finally
    st.Free;
  end;
end;

We're happy to announce that TMS Aurelius, our highly regarded ORM (Object Relational Mapping) framework for Delphi, has now a Free Edition.

And the best part is that TMS Aurelius Free Edition has all the features that are available in the paid registered license. Not only that, but it also allows you to use it in commercial applications. So in the sense of features and usage, there is absolutely no difference in what you can use and what you can do with it compared with paid version.

The only differences are that Free Edition is only available for Delphi 10.1 Berlin, in binary format. The paid license is available for earlier versions of Delphi, comes with full source code and, of course, includes what we consider the biggest "feature" of all: it gives you high priority to our top-notch and fast support.

You can register for downloading TMS Aurelius Free Edition right now! The linked page also includes the FAQ and full table comparing the free and paid version. We hope you enjoy it!

The myCloudData.net service offers easy to use structured cloud data storage. The foundation of the service is of course a REST API. But meanwhile, we added several components for Delphi users to consume this service with an absolute minimum amount of effort. The first step was to create the component TAdvmyCloudData that is part of the TMS VCL Cloud Pack, TMS FMX Cloud Pack, TMS LCL Cloud Pack (and soon also in TMS .NET Cloud Pack). The TAdvmyCloudData component enables using object oriented programming techniques for using the myCloudData.net service. In a second step, we introduced the TAdvmyCloudDataDataSet and TAdvmyCloudDataDataConnection. With these components, controls can be bound directly to the data in the cloud, be it via DB-aware controls or livebindings.

But now, we are excited to introduce the next level of automation: bound DB forms auto generated with the help of rich metadata. Two new components are available for this: TAdvmyCloudDataFormPanel and TAdvmyCloudDataFormBox. These components are similar but the TAdvmyCloudDataFormBox offers a possible scrolling area when this is needed and a header from where editing in the DB form can be started, stopped or cancelled.

When the TAdvmyCloudDataFormPanel or TAdvmyCloudDataFormBox is connected to a TAdvmyCloudDataSet via a TDataSource, it retrieves the DB field information exposed by the TDBField type in the dataset but in addition, it retrieves the rich metadata that myCloudData.net offers. The meta data that can be set include: label, min/max values, edit mask, field lookup relation, typed values, visible, enabled ...

In this screenshot, you can see how the integer field STATUS is defined as a typed field. For typed fields, the DB form will use a combobox and this combobox will automatically map the integer data value for the selected displayed value.


The best experience is offered for the default mapping of DB field types to TMS Component Pack controls. TMS Component Pack includes a DB-aware Date+Time input control (i.e. combined date and time entry in a single control), a DB-aware combobox with a separate display and value list with binding to the value part, edit controls with built-in features to limit what can be entered etc...

The default mapping to TMS controls as such is:

boolean field: TDBCheckBox
string field: TDBAdvEdit or TDBAdvMaskEdit
integer field: TDBAdvSpinEdit
floating point field: TDBAdvSpinEdit
typed field: TAdvDBFormComboBox or TDBRadioGroup
blob picture field: TDBAdvGDIPPicture
blob rich text field: TDBRichEdit
date field: TAdvDBDateTimePicker
time field: TAdvDBDateTimePicker
date/time field: TAdvDBDateTimePicker
lookup field: TDBLookupComboBox
disabled field: TDBAdvLabel

Note that via TAdvmyCloudDataFormPanel.Layouter there is access to the class mapper and thus, a custom mapping of a field type to a different control can be done.

This is not all, not only does the metadata control how the DB form is rendered, there are also many parameters that control the behavior of the layout engine for the DB form. This includes control widths, what control types to use for what DB field types, number of columns to use, position of control labels, how to render DB field descriptions, padding, spacing, margins, fonts, what to do with readonly fields and more ...



It can also be used to change layouting on the fly. In the demo, this technique is used to let the layout switch between DB field descriptions rendered as extra labels or rendered as hints for the DB control hints:

begin
  AdvmyCloudDataDataSet1.DisableControls;

  AdvmyCloudDataFormPanel1.Layout.BeginUpdate;

  if ckDescr.Checked then
  begin
    AdvmyCloudDataFormPanel1.Layout.Descriptions.Kind := dkHint;
    ckDescr.Caption := 'Description as label';
  end
  else
  begin
    AdvmyCloudDataFormPanel1.Layout.Descriptions.Kind := dkLabel;
    ckDescr.Caption := 'Description as hint';
  end;

  AdvmyCloudDataFormPanel1.Layout.EndUpdate;

  AdvmyCloudDataDataSet1.EnableControls;
end;