Connecting to data

As Delphi developers we are used to frameworks and components to take the chore out of using databases. Ever since Delphi 1, database handling was abstracted by the TDataSet & TDataSource. Wouldn't it be nice (and mainly productive as this is what is important after all) if this exact abstraction model allowed us to create web applications consuming data? Exactly that goal is what we wanted to achieve with TMS WEB Core, only technically under the hood things are RADically different from the implementation of Delphi 1 like datasets and datasources. So, with TMS WEB Core, you have your DB-aware edit, label, combobox, datepicker etc... and these can be hooked up to a datasource and a datafield can be specified. The dataset though is in this case a wrapper component that will under the hood do its work getting data or updating data via the use of REST HTTP calls to microservices exposed on a data server. As our TMS XData product already provided exactly that: exposing your databases via REST HTTP calls, we extended it to have a web XData client component so you can from Delphi, create a web application against an XData client and hook up your DB-aware components to an XData dataset, pretty much the same way as you can for VCL or FMX native client applications.

For the sake of demo purposes, we have created a first sample app with a web client dataset. This web client dataset gets its data in JSON format from a server via a HTTP REST call. This allows to view and edit the data in the web client dataset but won't do updates server side so that it isn't possible to 'fiddle' with the data and break the sample this way.

Here you can see a form editing contact info with several DB-aware controls, including a DBnavigator.

When the dataset is connected to the server, the DB-aware controls display and can edit the data.

For viewing data, TMS WEB Core comes with following built-in components: TWebClientConnection, TWebClientDataSet, TWebDataSource.

Drop the components on the form and assign the WebClientConnection instance to WebClientDataSet.Connection and assign the WebClientDataSet to WebDataSource.

The data will be retrieved via a HTTP GET request in JSON format. To fill the client dataset, it is expected that the JSON consists of a JSON array or a JSON array under a specific node in the JSON HTTP response. Specify the URL where the HTTP GET retrieves the JSON data via WebClientConnection.URI. When the JSON array is under a specific node, specify this with WebClientConnection.DataNode: string;

As JSON as such does not come with meta-data, it will be needed to setup the DB fields expected in the JSON array. Add these as new fields to the dataset via the “Fields Editor” or select “Fetch fields” from the design-time editor of the WebClientDataSet:

When a WebClientConnection is assigned to the WebClientDataSet and an URL is specified, the IDE will perform a HTTP request and interpret the retrieved JSON and add the DB fields found.

For example, for this sample JSON data at URL: https://jsonplaceholder.typicode.com/posts

the result is:

After this, we can simply choose from the dataset fields editor “Add all fields” and all fields available in the JSON data will be available for our DB-aware controls:

After setting WebClientConnection.Active = true, the WebClientConnection performs a HTTP GET request on the URL to fetch the JSON data. This is an asynchronous process. When this is ready, the OnAfterConnect event is triggered. When this event is triggered, all data was loaded into the connected WebClientDataSet and the data is ready for use. When WebClientConnection.AutoOpenDataSet = true, the WebClientConnection will automatically open the dataset after this, making it ready to put data in connected DB-aware controls. A typical flow to connect to data, fetch it and then using the dataset directly from code is:

procedure TForm1.WebButton1Click(Sender: TObject);
begin
  // start the asynchronous process to perform a HTTP GET request to retrieve the data
  WebClientConnection1.Active := true;
end;

procedure TForm1.WebClientConnection1AfterConnect(Sender: TObject);
begin
  // Data was retrieved in OnAfterConnect, dataset was automatically opened by the
  // WebClientConnection and ready for use
  WebClientDataSet1.First;

  while not WebClientDataSet1.Eof do
  begin
    WebListbox1.Items.Add(WebClientDataSet1.FieldByName('email').AsString);
    WebClientDataSet1.Next;
  end;
end;

Connecting to a TMS XData based server is one possible way to hook up to databases. Please refer to the TMS XData documentation for information how you can connect to TMS XData exposed databases from a TMS WEB Core application. You can implement your own interfaces to a database server via REST HTTP calls and overtime we plan to create and offer connectors to such server as Embarcadero RAD server, Google Cloud datastore and several others...