Blog

All Blog Posts | Next Post | Previous Post

TMS WEB Core v1.6 tips & tricks

Friday, January 15, 2021

We are pleased to share two more tips for using TMS WEB Core v1.6 Pesaro. The first tip is for how you could implement on the fly filtering on a TWebResponsiveGrid. The second tips concerns the dynamic creation and use of a TFrame.
Let's dive into the first tip right-away with showing filtering for the TWebResponsiveGrid.

Filtering in a responsive grid

TWebResponsiveGrid is a grid UI control that is responsive. This means that the number of columns will depend on the available window width in the browser. In this sample, we configured the TWebResponsiveGrid that about 200 pixels width is needed for a grid item and that the number of columns as such, will depend on how many items of width 200px fit in the browser window width. Each item of the TWebResponsiveGrid consists of a small snippet of HTML filled with data from a JSON HTTP GET request response. This JSON contains an array of JSON objects with information about cars. One such item is for example:

{
    "Brand": "BMW",
    "Model": "Z8",
    "Hp": 400,
    "Max speed": 250,
    "City": "Munchen",
    "Country": "Germany",
    "Type": "cabrio",
    "Picture": "bmw1.jpg",
    "Year": 2000,
    "Price": 95000,
    "Cylinders": 8
}

The HTML template for the item is set to:

'<b>(%Brand%) (%Model%)</b><br><i>(%Country%)</i>
<br><img src="https://download.tmssoftware.com/tmsweb/demos/tmsweb_responsivegrid/img/(%Picture%)">
<br>Year:<b>(%Year%)</b><br>Price:<b>(%Price%)€</b>';

As you can see, it will fetch Brand, Model, Country, Year, Picture and Price from the JSON.

When the JSON is loaded, all car items become visible in the responsive grid.

Now comes the code to filter which car items will be visible. We will let the filter apply in this case on the car brand and car model. That means that when a value typed in the filter matches either brand or model, the item will be displayed. The code to perform this filtering becomes:

var
  i: integer;
  f,s,a: string;
begin
  if edFilter.Text = '' then
  begin
    for I := 0 to carlist.Items.Count - 1 do
      carlist.Items[i].Visible := true;
  end
  else
  begin
    f := Uppercase(edFilter.Text);

    for i := 0 to carlist.Items.Count - 1 do
    begin
      s := carlist.Items[i].JSONElementValue['Brand'];
      a := carlist.Items[i].JSONElementValue['Model'];

      s := Uppercase(s);
      a := Uppercase(a);

      carlist.Items[i].Visible := (pos(f, s) > 0) or (pos(f, a) > 0);
    end;
  end;
end;

As you can see, we extract the car brand and model via the JSON object attached to the item and when there is a match, the item is visible otherwise not. When the filter changes, we first set all items as visible again, ensuring that any previous filtering operation is undone.
That's it. There is nothing more to it. The display work is all handled automatically by the TWebResponsiveGrid.

Dynamically creating, using and destroying a frame

In TMS WEB Core, you can use a TFrame just like you can in a Delphi VCL Windows application. You add your UI controls + UI control logic to the frame and you can use this frame on other forms in the VCL application. In TMS WEB Core, the concept is exactly the same. Here we created a frame with a common UI pattern: two listbox where items can be moved from left listbox to right listbox and vice versa. This UI and its code is added to a frame.

Now, to use this frame, we just need to add the unit of the frame to the uses list and the following code will from a single button click dynamically create the frame and destroy it:

procedure TForm1.btnFrameClick(Sender: TObject);
begin
  if Assigned(ListFrame) then
  begin
    ListFrame.Free;
    ListFrame := nil;
    btnFrame.Caption := 'Show frame';
  end
  else
  begin
    ListFrame := TListFrame.Create(Self);
    ListFrame.LoadFromForm;
    ListFrame.Parent := Self;
    ListFrame.LeftList.Items.Add('BMW');
    ListFrame.LeftList.Items.Add('Mercedes');
    ListFrame.LeftList.Items.Add('Porsche');
    ListFrame.LeftList.Items.Add('Audi');
    btnFrame.Caption := 'Hide frame';
  end;
end;

The only difference here with the VCL is that we need to call ListFrame.LoadFromForm. The reason for this is that in a TMS WEB Core application, there is no streaming happening from a DFM file. That would be an extra resource to be loaded & parsed and would not be a good idea from a performance perspective. So, the equivalent of loading the DFM is performed by calling ListFrame.LoadFromForm which actually initializes the frame fully in code.

As you can see, TMS WEB Core not only makes it extremely easy to do things like this in a web client application, but offers most of the concepts Delphi developers are used to from developing RAD component based Windows VCL applications to do away with as much as possible of the learning curve.

You can download the full source code of the two sample projects here to use with TMS WEB Core v1.6 Pesaro.

Note that these exact same projects will also be usable when we release very shortly the update of TMS WEB Core for Visual Studio Code with these latest framework & compiler updates!

Bruno Fierens

This blog post has not received any comments yet.