Most Recent Post | Index List
Tuesday, November 20, 2018Lots 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.
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 property Caption:
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:
To load the TWebMemo with data where the user left off, we add following code to the Form's OnShow event:
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;
procedure TForm2.WebFormShow(Sender: TObject); var cs: TLocalStorage; begin cs := TLocalStorage.Create; try WebMemo1.Lines.Text := cs.GetValue('memo'); finally cs.Free; end; end;
Visit our other tips & tricks blog articles here:
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!
This blog post has received 3 comments.
Most Recent Post | Index List