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!

Comments are closed.