Today, we released TMS WEB Core v2.2, another milestone in our endeavor to make web client application development for Object Pascal developers as seamless, efficient & productive as possible.
v2.2 introduces again numerous new features and enhancements to make the developer experience better and richer. Let's immediately jump to the details!
As experienced TMS WEB Core developers will be aware of, TMS WEB Core generates web client applications with an SPA (Single Page Application) architecture similar to the architecture of Angular, Vue, React, ... While the name could be misunderstood as offering applications with a single form, this is absolutely not correct. SPA means that the app is started from a single URL and while executing, the app continues to run from this start URL. This brings a couple of disadvantages, for example that it is not possible to share an URL with other users that open the application on a specific form. Routing brings a solution for this. This means a hash is added to the URL when a new form is opened and when using the URL with hash, the application is automatically opened on the form linked to the hash. While in previous versions of TMS WEB Core, it was already possible to add application level code to have this capability, with v2.2 an automatic mechanism is built-in. Two new demos demonstrate how it can be used. There is very little to do to take advantage of this. First, add in the initialization section of form units
view plain text
RegisterClass(TMyForm);
and in the project main code, add:
view plain text
if not Application.Route then
Application.CreateForm(TMainForm, MainForm);
The code in the project source ensures that when the URL uses a hash (something like #formclass), the application will automatically open the form mentioned instead of the main form.
When a form class is registered, this means that when this form is opened, the hash #formclass will be automatically added to the application URL.
Using this technique also enables that the browser back & forward button can be used to navigate between forms.
We invite you to look at two new demo apps under Demo\Basics\AdminRouting and Demo\Basics\Routing that demonstrate this.
If you rather take advantage of the Google infrastructure to manage your data in the backend instead of deploying your own REST API backend with database, you'll find that using Firebase is now a lot easier. At design-time in the IDE, you can see the tables in your Firebase project and manipulate its metadata. This automatically configures the TWebFirestoreClientDataSet that you can bind to DB-aware controls. This way, you have a nearly codeless solution to work with data in the backend, including for multitenant scenarios.
Our grid got extended with support to add custom drawn cells. This works through adding a canvas to a cell with grid.AddCanvas(Column,Row). Once added, you can at any time access this canvas and perform drawing on it with VCL-like code for a TCanvas.
The code to achieve this becomes:
view plain text
var
ACanvas: TCanvas;
pt: array of TPoint;
begin
WebStringGrid1.AddCanvas(1,1);
WebStringGrid1.AddCanvas(2,1);
WebStringGrid1.AddCanvas(3,1);
ACanvas := TCanvas.Create( webstringgrid1.GetCanvas(1,1));
try
setLength(pt,3);
pt[0].X := 32;
pt[0].Y := 4;
pt[1].X := 4;
pt[1].Y := 60;
pt[2].X := 60;
pt[2].Y := 60;
ACanvas.Brush.Color := clLime;
ACanvas.Pen.Color := clSilver;
ACanvas.Polygon(pt);
finally
ACanvas.Free;
end;
end;
Now, you can use any other control as inplace editor for a grid cell. This is achieved via:
- implement OnGetCellEditor and return as editor type geCustom. For example, to edit column 2 with a custom inplace editor, use:
view plain text
procedure TForm1.WebStringGrid1GetCellEditor(Sender: TObject; ACol,
ARow: Integer; var AEditor: TGridCellEditor);
begin
if (ACol = 2) and (ARow >= WebStringGrid1.FixedRows) then
begin
AEditor := geCustom;
WebStringGrid1.EditControl := MyEditControl;
end;
end;
- in addition, two event handlers allow to transfer the cell data to the inplace editor and vice versa. This becomes something like:
view plain text
procedure TForm1.WebStringGrid1GetEditControlValue(Sender: TObject; ACol,
ARow: Integer; AControl: TControl; var Value: string);
begin
Value := (AControl as TMyEditControl).Text;
end;
procedure TForm1.WebStringGrid1SetEditControlValue(Sender: TObject; ACol,
ARow: Integer; AControl: TControl; const Value: string);
begin
(AControl as TMyEditControl).Text := Value;
end;
With this technique, a TWebDropDpownControl using a TWebCalendar is used to create a date picker edit control in the grid:
TWebXLSX is a component that allows the creation of an Excel .XLSX file directly from the browser and from there, have it downloaded to the client machine. Now TWebXLSX was extended with support to bind this to a TWebDBGrid or TWebDBTableControl to automatically export the data it contains to an Excel XLSX file from the browser.
The new TWebRTC component enables peer to peer serverless communication over audio, video or desktop sharing via the WebRTC standard protocol. There is only a web socket server needed to establish the connection (there is a sample socket server included that we built with TMS FNC WebSocket). Once connected, you can communicate via the browser without relying on a server and as such also without any possible costs involved with such server (like OpenTok or Jitsi for example).
TWebRTC again adheres the principles of offering an easy to RAD component based approach to add this functionality to web client applications fast & easily. You can explore this new capability with a new demo that is included.
TElementAction now has 3 new actions : actAddClass, actAddRemoveClass, actRemoveClass and new properties TargetClassAdd, TargetClassRemove. With these new actions and definitons for CSS class to add or remove, it is now possible to setup a TElementAction to change CSS classes for target elements upon a specific JavaScript event for the element. This enables a codeless approach to change state or appearance of HTML elements upon clicking or hovering other HTML elements.
The TWebGoogleChart component was extended to allow customization of the look of the X-axis and Y-axis.
For tracking the loading of content in a TWebBrowserControl, the new OnLoad event can now be used.
The TWebHTMLContainer was extended with a new method LoadFromURL() to allow to load content in this container from external data at an URL.
Also, for interfacing with services implementing an OAUTH2 flow, the TApplication class now has the HandleOAuth property to allow you to select whether TApplication handles this flow or whether you want to handle this in a custom way with application level code.
The TWebButton control now has properties Cancel / ModalResult added. This makes it now possible to build dialogs where OK or Cancel buttons can react on ESC or RETURN key to cancel or close such dialogs.
TWebClientConnection that is used to hookup a TWebClientDataSet to data at some specific URL could previously only load JSON data into a TWebClientDataSet. Now it has been extended to also allow filling a TWebClientDataSet with data in CSV format.
As you can see, a lot of effort went into this new major release of TMS WEB Core. This was done with one major goal in mind: make your life as Object Pascal easier to create web client applications. For Object Pascal developers new to web client development, you can download the fully functional trial version of TMS WEB Core and explore how it can make you productive to embrace the world of web applications!
© Copyright 2000-2023 COGITO SOFTWARE CO.,LTD. All rights reserved
