TMS WEB Core v1.0 Brescia tips & tricks part 3

Lots of enthusiast Delphi developers already got started exploring TMS WEB Core web application development and some even successfully building their first web applications for customers. There are literally tons of little tips and tricks for creating polished first-class web applications. So, we thought it was about time to share two new tips!

Facilitating credential persistence in the browser

To capture user credentials, we commonly use a TWebEdit for the username and another TWebEdit for the password with PasswordChar set to *.
This can be sufficient to get the username and password to let a user login, but let’s polish this somewhat more to todays’ standards where we are used to the browser recognizing login and offering to persist the credentials for reuse later.

To do this in a TMS WEB Core application is straightforward. All we need to do is set the WebEdit.AutoCompletion to acUserName for the username edit box and WebEdit.AutoCompletion to acCurrentPassword for the password. This is sufficient to have most browsers recognize the login fields and offering to persist.

For the sample app we created for this, we added some more pizzazz by adding Bootstrap and a Google Material design icon to a login button. To add support for this, select “Manage JavaScript Libraries” from the project context menu in the IDE and check Bootstrap and Google Material design.

Once this is selected, we can set the Bootstrap classname ‘form-control’ to WebEdit.ElementClassName and we set ‘btn btn-primary’ to WebButton.ElementClassName.
We can use the Google Material icon for a lock in the button caption, by setting the caption to:

<i class="material-icons">lock</i>Login

In the Chrome browser, this looks like:

In the Safari browser on iOS the login is recognized and iOS proposes to autocomplete the entry coupled to its Touch ID technology or Face ID on newer devices:

 

Persisting values in localstorage

There are various ways to store data with the browser. Cookies and session data offer this capability as well as local storage or for more extensive use something like IndexedDB.
For this tip, we show persisting the content of a TWebMemo control in local storage. This way, we can at any time persist the memo content and when the user would leave the application and return later to it, the memo content would be the same as where he left off.

To do this, we implement the TWebMemo.OnExit event and use the TLocalStorage class to persist:

uses
  WebLib.Storage;

procedure TForm2.WebMemo1Exit(Sender: TObject);
var
  cs: TLocalStorage;
begin
  cs := TLocalStorage.Create;
  try
    cs.SetValue('memo', WebMemo1.Lines.Text);
  finally
    cs.Free;
  end;
end;

To load the TWebMemo with data where the user left off, we add following code to the Form’s OnShow event:

procedure TForm2.WebFormShow(Sender: TObject);
var
  cs: TLocalStorage;
begin
  cs := TLocalStorage.Create;
  try
    WebMemo1.Lines.Text := cs.GetValue('memo');
  finally
    cs.Free;
  end;
end;

Interested in fast RAD component based web client application development with Delphi? Get started today: TMS WEB Core, TMS FNC UI web-enabled controls, web-enabled TMS XData, the first parts under the TMS RADical WEB umbrella are all available separately now or as part of the TMS-ALL-ACCESS subscription!

Read More

Read More

Reminder to self: check if David Nottage published source code the Firebase application analytics

I need to check the outcome of this comment at [WayBack] Google analytics is no more avaliable for analytic Apps and send to firebase when you want to track a new App. How to do with firebase analytics? there … – Xavi P. – Google+: I’m working on an implementation. It’ll be an extension of what I did with Firebase Cloud Messaging: [WayBack] Adding Firebase Cloud Messaging to your mobile apps – part 1 – Delphi Worlds However, my implementation may or may not become a part of a commercial solution that includes other Firebase services, including Firebase Database, using the Android and iOS SDKs –jeroen
Read More

What’s New and Updated in GetIt for November 2018

The GetIt Package Manager is your source for RAD Studio, Delphi, and C++Builder add-ins and packages built right into your favorite IDE. Here’s a look at what was new and updated during the month of October 2018 along with the most popular downloads. Find a new favorite for November today!

Want your Package, Library, Trial, or Open Source Project in GetIt? Just fill out this form.

New and Updated

The following components are new to GetIt this month, or were recently updated to a newer version.

 

Delphi Console – Delphi Console is a Delphi implementation of the well-known C# class: System.Console. With this in hand you can easily use all the functions of the console window. For example: Console.WriteLine.

[GitHub]

 

Eigen – C++ template library for linear algebra: matrices, vectors, numerical solvers, and related algorithms.

[More info]

 

Trial – FMX Skeez – An animated list view component for Delphi FireMonkey. The package includes derived components: filesystem browser, picture list viewer and audio file list viewer.

[More info]

 

Trial – ImageEn – A native image library for Delphi and C++ Builder. It includes a complete suite of components to handle all aspects of image and editing, analysis and display. 

[More info]

 

Trial – nrComm Lib – Helps with wide range of device communication tasks and industrial issues. It contains ready solutions for RS232, modbus, GSM, HID and etc.

[More info]

 

Trial – Clever Internet Suite – A Delphi and C++Builder library for Internet communication protocols. It provides support for HTTP, FTP, SMTP, POP, IMAP, SFTP (SSH), DKIM, OAUTH, SOAP, WebDAV, complete client and server solutions for supported protocols, digital signatures and encryption.

[More info]

GetIt Top and Trending

Here are the top 10 most popular downloads from October, and any from the top 30 that are increasing in popularity.

1

    JEDI Code Library: The JEDI Code Library (JCL) consists of a set of thoroughly tested and fully documented utility functions and non-visual classes which can be instantly reused in your Delphi and C++ Builder projects.

2

    JEDI Visual Component Library: JVCL is a library of over 600 Delphi visual and non-visual Delphi/C++Builder components.

3

    Icons8: Single icon pack with 64,800 free icons. Each icon is in 5 flat styles.

4

    CnWizards: CnPack IDE Wizards (CnWizards) is an extremely popular, well established and comprehensive free open source plug-in toolset for Delphi/C++ Builder/RAD Studio to help improve development efficiency by proving a large number of useful add-ons and wizards to enhance the Delphi/C++ Builder/RAD Studio IDE.

5

    Aqua Light Slate 2 VCL Style: Free to use VCL Style

6

    CodeSite Express: Live Local and Remote Application Logging

7

    Abbrevia: Abbrevia is a compression toolkit for Delphi and C++Builder.
Supported on platforms: Windows, Android, macOS, and iOS.

8

    AsyncPro for VCL: Async Professional is a comprehensive communications toolkit for Embarcadero Delphi and C++Builder. Supported on platforms: Win32, Win64

9📈

    FortesReport Community Edition: The FortesReport is a powerful report generator available as a package of components for Delphi. In FortesReport, the reports are composed of bands that have specific functions in the print stream. You define groupings, sub-levels and totals simply by hierarchical relationship between bands. Moreover, the FortesReport has a rich palette of components for text, charts, formulas, bar codes, filters and layout.

10

    Glossy 2 VCL Style: Free to use VCL Style

15📈

    EhLib: EhLib is a Delphi and C++Builder library of visual and non-visual components. Most advanced component is DBGridEh, component to operate tabular data in DataSet. Library includes more than 30 components in total.

20📈

    SysTools for VCL: Utility routines and classes for Delphi and C++Builder. It includes bar codes, sorting, money routines, logging, high precision math…Supported on platforms: Windows

28📈

    Clever Internet Suite: Clever Internet Suite is a Delphi and C++Builder library for Internet communication protocols. It provides support for HTTP, FTP, SMTP, POP, IMAP, SFTP (SSH), DKIM, OAUTH, SOAP, WebDAV, complete client and server solutions for supported protocols, digital signatures and encryption.

30📈

    TFrameStand: TFrameStand is a component to ease use of FMX frames in your application. Take advantage of TFrameStand functionalities to build stunning visual transitions and improve the visual continuity of your UI. Supported on platforms: Win32, Win64, Android, OS X. Open source by Andrea Magni.

Read More

Read More

The Web vNext

I have been reading a lot about Web development lately, and pondering the future of web development.  For the longest time I shied away from Web development, largely because it was so laborious and frustrating. I dabbled a bit back when people were using COM objects with VBScript on the server and Javascript on the client in classic ASP pages. Even back then, companies were making software look like Windows applications within the browser (IE).  By today’s standards, those applications look dated, but today’s web SPAs function in a similar manner, although great progress has been made in standardizing browsers, abstracting out their idiosyncrasies using frameworks, and handling variable display sizes.  My current experience is that it’s still harder and more time consuming to develop a good web application, and they are still not as rich as a Windows app IMHO. That begs the question as to why people are writing applications for the web anyway.  For eCommerce sites, I get it, but for other line of business applications why not throw off the shackles of HTML/CSS and embrace a new UI framework altogether?  Now I know what you’re thinking…..this guy has lost it and wants to re-invent the web which a lot of smart people have worked on for years to make Web 2.0 a reality.  Before you call the white coats, read on… When a user goes to a web site for any commercial activity they should be ensuring the website has a valid SSL certificate from a trusted authority.  The Internet is a dangerous place these days where web sites may be trying to attack your computer.  We download content from such sites into our sand boxed browser. This is not that much different than downloading a signed application.  We use signed applications all the time now, when using applications on our phones, tablets and desktops from the “app stores”.  The only difference is whether the store owner i.e.: Apple, has reviewed the application testing for malware.  Open source software such as Tortoise Git is often signed as well to ensure users trust that the application they are getting is from the advertised source and is safe to use.  I think it’s safe to say that most people would trust a signed application. With that premise in hand, why aren’t we all writing signed Desktop apps using REST back ends?  Or if we really want to leverage single source cross platform applications, why not use WASM with a UI framework that allows an application to be written in languages that are typically used for native desktop, and mobile devices such as C#, Delphi, or C++? The performance of even Javascript is pretty decent.  Many games have been ported to the browser using Javascript transpilers or EmScripten.  WASM allows developers to take this one step closer to the metal (CPU) and skip the run-time parsing and execution of Javascript.  Blazor is a project that does just that, within the confines of HTML/CSS, but also shows the possibility of using WASM with a different presentation framework such as Uno, or Ooui.  Obviously I’m not the only one thinking that a different presentation layer might be overdue in the web space. One of the advantages of Blazor is to eliminate some of the third party dependencies, making the development stack more reliable, and to use the same technology and tools throughout.  Of course you can learn and use Javascript throughout the entire stack now, or a Javascript transpiler, but without WASM using your development language of choice is not possible. I would like to see Object Pascal support the entire development stack.  Preferably the same language dialect and core libraries.  Perhaps something similar to Blazor, or maybe FMX targeting the web with WebGL.  All we need is to be able to capture the compiler IR and feed it into the WASM LLVM back end (okay there might be a little more to it than that).  The web is a huge horizontal market that is ripe for disruption and with the right moves, Delphi could grab a chunk of that segment, making the product relevant again. What do you think is the future of Javascript on the web?  Will it be dethroned at some point by WASM? Is the future of the Web HTML/CSS, a different UI layer, or perhaps a mix depending on the type of web app?  Should I dust off the Delphi .NET compiler to generate MSIL to feed the Mono WASM run-time, or do we need a way to get the current compilers to output LLVM IR? Maybe it’s just time to call the white coats as pondering all the options can drive you crazy…
Read More

TMS WEB Core: a bridge to the future!

Intro

While working in the TMS Labs this week, we had a fruitful discussion on how we could interact with a desktop or mobile environment, where the browser that hosts a TMS WEB Core application, runs on. We already had some experience creating a JavaScript bridge between a TWebBrowser and Google Maps (http://www.tmssoftware.com/site/webgmaps.asp) and figured out this could be useful for TMS WEB Core as well. We wanted to give the user the capability of hosting its TMS WEB Core application in a native desktop or mobile application that offers access to all of the operating system functionality and make it accessible via the browser.

Finding an entry point

We created a TTMSFNCWebCoreClientBrowser class that acts as the communication and viewing component for a TMS WEB Core application. To setup the communication, we needed an entry point. In JavaScript, a global variable can be defined and that was just the entry point we were looking for. In TMS WEB Core, during the creation of TApplication, we also injected a global variable “TMSWEBCoreClientBrowser”, that is initialized with a string “unknown”. This variable is filled in, when the TTMSFNCWebCoreClientBrowser establishes a conection to the TMS WEB Core application.

  if ExecuteJavascript('document.readyState', true) = 'complete' then
  begin
    if ExecuteJavascript('window.TMSWEBCoreClientIdentifier', true) = 'unknown' then
      FInitialized := True;
  end;

Handshake

After the initialization is complete, the TTMSFNCWebCoreClientBrowser instance performs a handshake. This is being done by executing JavaScript. The HandshakeScript is dynamically being added during the initialization of the TMS WEB Core Application and initializes the TMSWEBCoreClientIdentifier global variable.

initialization
begin
  HandShakeScript := TJSHTMLScriptElement(document.createElement('script'));
  HandShakeScript.id := 'HandShakeScript';
  HandShakeScript.type_ := 'text/javascript';
  HandShakeScript.innerHTML :=
  'var TMSWEBCoreClientIdentifier = "unknown";'+#13#10+
  'function HandShake(cid){'+#13#10+
  '  TMSWEBCoreClientIdentifier = cid;'+#13#10+
  '}';
  document.body.appendChild(HandShakeScript);

  Application := TApplication.Create(nil);
end;

The handshake script is being called from the TTMSFNCWebCoreClientBrowser instance after the initialization is complete.

procedure TTMSFNCCustomWebCoreClientBrowser.PerformHandshake;
var
  c: string;
begin
  {$IFDEF MSWINDOWS}
  c := 'windows';
  {$ENDIF}
  {$IFDEF MACOS}
  {$IFDEF IOS}
  c := 'ios';
  {$ENDIF}
  {$IFNDEF IOS}
  c := 'macos';
  {$ENDIF}
  {$ENDIF}
  {$IFDEF ANDROID}
  c := 'android';
  {$ENDIF}
  ExecuteJavascript('HandShake("'+c+'");');
end;

Sending and receiving messages

When the handshake is complete, the client can send and receive messages. The communication format is a JSON string that is automatically URL encoded and parsed to a JSON object. A sample sending from the client to the TMS WEB Core application:

procedure TForm1.ClientSendButtonClick(Sender: TObject);
var
  c: TJSONObject;
begin
  c := TJSONObject.Create;
  c.AddPair('Message From Client', 'Hello World !');
  w.Send(c);
  c.Free;
end;

And of course, sending back from a TMS WEB Core Application to the client:

procedure TForm1.WebButton1Click(Sender: TObject);
var
  o: TJSONObject;
  js: TJSON;
  s: string;
begin
  js := TJSON.Create;
  s := '{"Message From TMS WEB Core Application":"'Hello World !"}';
  o := js.parse(s);
  w.Send(o);
  o.Free;
end;

The future

This technology opens up a lot of possibilities for the future. You can send and receive messages with plain text, as well as small binary data encoded inside a JSON string between the client and the TMS WEB Core Application. The client application can then interact with the operating system, such as opening files, and other operating system specific functionality. The code runs on FMX (Windows, macOS, iOS, Android) and VCL (Windows) and is coming to TMS WEB Core in the near future!

Read More

Read More