Component Development: Proof of concept; multi-platform demos

In my last blog post I showed the value of prudent class design with regard to platform development. Ina nutshell, our component has a base class that only contains basic functionality that is platform independent. The platform dependent parts are implemented in derived classes for the different platforms (and frameworks) – if needed.

In order to show how easy it is to use this components in a multi-platform use-case, I built two demo applications. One VCL Forms Application for Windows 32 and Windows 64 bit. Furthermore, I built a Firemonkey demo that will cover the very same platforms as VCL as well as the platforms that are supported exlusively by Firemonkey.

Let’ start with the VCL Forms Application. I can promise at this point the amount of coding we will have to do is thanks do the dataset usage of the component unbearable … it will only be about 10 lines of code.

After creating the app we drop the following components on the form and align them as shown in the screenshot.

• TFlxVclPexels  – the component that bridges to the Pexels API
• TClientDataset – stores the data retrieved from the web service API
• TDataSource – connects the data to the user interface
• TImage – displays the preview image
• TEdit – used to enter the search keyword
• two TButton – one to initiate the Fetch request, another to request the preview image from the webservice
• TDBGrid – to display the data and allow for selection of an image

We need to configure the Pexels component next:

Set the API key (available on request from Pexels.com) and assign the Dataset property. The component also has a default value for Keyword. For the demo you might fiddle around with the component during design-time and use other keywords. As a matter of fact the component may be used during design time. The component provides a “Fetch” action to request data during desing time and to populate the client dataset with field data. Thus, we can even set up the grid during design time. Hook up the datasource to the client dataset and the grid to the datasource.

As you can see we will only display some of the data provided by the API in the grid.

Finally, we need to provide the code for the buttons. It was no coincidence that I explained how to load images from the Web easily in VCL and FMX as this functionality is also wrapped in the component.

This will lead to two very short event methods:

procedure TForm1.btnFetchClick(Sender: TObject);
begin
  Pexels.Keyword := txtKeyword.Text;
  Pexels.Fetch;
end;

procedure TForm1.btnPreviewClick(Sender: TObject);
begin
  if cdsTest.Active then
  begin
    if cdsTest.RecordCount > 0 then
    begin
      Pexels.GetCurrentPicture;
      imgPreview.Picture.Assign(Pexels.Picture);
    end;
  end;
end;

The Fetch button assign the keyword entered in the edit box to the Pexels component and calls the Fetch method. Anything else will happen automatically as the request will either fail and an exception is being tossed or the client dataset will be populated with the data. Of course, you may catch any REST exception.

It will be a bit more complex for the Preview button. We check that actually a row is selected (there are about a thousand other possible ways to do this) and ask the Pexels API to deliver the picture for us. The picture is being stored in the Picture property of the component. If you wonder how big the image will be – the DefaultSize property (see above) determines the size. The size enumeration is designed according to the sizes provided by the API. 280 x 200 pixels in this case.

Believe it or not, this is all it will take for VCL. The app is complete and it will already provide some decent functionality to browse the Pexels catalog.

Considering that this is just a quick demo: Imagine we used a TDBAdvStringGrid and its helper methods from TMS Software – we could retrieve the images in a background thread and display them in the grid, could search, group and filter the results… without a single line of code!

So, we have 32-Bit and 64-Bit Windows covered…

Now to the FireMonkey part…

To be honest, it will not be that much of a difference. Especially as I was granted access to a new component set from TMS Software. Data Binding is a great concept. I love it – also in other frameworks as .NET.

However, as my component is written for VCL and VCL uses datasources, it would be neat to have something for that.

TMS Software offers the multi-platform FNC UI component set, which will offer a datasource adapter for Firemonkey (and any other platform it supports!) soon.

I can assure you that this component worked right out of the box. No hassle. You hook up the components like you are used from “good’ol’VCL” and can expect your data from the client dataset to be shown in the grid. So without any more fuss, this is the FMX form:

The layout is very much the same, except for one subtle difference. In addition to the client dataset and the datasource, we also need a data adapter that allows us to connect the grid to the data. It works a bit differently as TTMSFNCGridDatabaseAdapter takes both the reference to the grid and the reference to the datasource:

This will yield the exact same comfort that we are used to in VCL with regard to designing the grid columns during design time. Remember, not a single line of code so far.

Next we implement the button click events:

procedure TForm2.btnFetchClick(Sender: TObject);
begin
  Pexels.Keyword := txtKeyword.Text;
  Pexels.Fetch;
  cdsAdapter.Active := true;
end;

procedure TForm2.btnPreviewClick(Sender: TObject);
begin
  if cdsResults.Active then
  begin
    if cdsResults.RecordCount > 0 then
    begin
      Pexels.GetCurrentPicture;
      imgPreview.Bitmap.Assign(Pexels.Picture);
    end;
  end;
end;

There are only two tiny differences:

1. The adapter needs to be opened.
2. The property of the Image component in FireMonkey is named differently.

That’s it.

This is how it looks on Mac OSX.

Believe me, any other platform would work just as well. The design needs to be modified for the mobile platforms, of course. However, with Update 1 for Delphi Berlin being out and native component support, I might post about that rather sooner than later. Then, we also have excellent components from TMS Software in the mix that offer support for native iOS components on any Delphi version that allows deployment to iOS.

I hope this blog post shows the true power of prudent class design that makes development for multiple frameworks and multi-platform a bundle of joy to work with.

Hopefully, I will be able to offer the Pexels component on GetIt soon.