Bayesean Blog - Desktop, Mobile and IOT Developer Blog


Make Your Delphi App POP using Javascript!

Posted on 31st Mar 2018 in CSS


Makeyourapppop44.png

This is a Delphi application that includes the use of JavaScript (JS)…

 So how does this all work?

This would be a VCL or FMX compiled application that makes use of one or more JavaScript libraries that are viewed in a live or offline Web-browser. In essence the Web-browser Delphi component acts as a container for the viewing of a JavaScript library.

Web-browsers have taken leaps and bounds in the last few years that are becoming synergistic driven by the major Web-browser developers. These web-browsers have the built-in JavaScript engine which is based on the ECMAScript specification. It has been recognised that JavaScript is a rapidly growing high level scripting language.

 So why create a Delphi compiled app with JavaScript rendered in a web-browser?

With the consumer market demanding simplistic but quality applications,  open- source VCL or FMX components that meet this criteria tend to be limited or non- existent in areas such as Graphing , Mapping , PDF viewing , Tables and in many more areas of requirement such as Dashboards etc. Whilst the Premium paid- for Component options are of great quality, not every developer can justify the purchase of these components. This is where the open-source JavaScript library comes into play.

What are the Open-Source JavaScript (JS) libraries?

This community is far larger than Delphi and most sophisticated projects are normally committed to by large businesses making these projects sophisticated and professional in design.

There are normally many options to choose from within a segment. As an added positive, JavaScript is lightweight in design as the scripting engine is already in the web-browser component.  You do not necessary need to be a JavaScript developer to make use of open source libraries. Normally they are easy to work with and googling normally brings up a ton of support information on how to use the specific library that you wish to use.

I’m always amazed by the limited scripting code required in writing the JavaScript file or code, and this is due to the JavaScript engine built in to the Web-browser which then does most of the heavy lifting asynchronously and largely does this independent of your application processes.

Quick quality results can be gained and it tends to work easily without threading in a mobile app. It also helps to keep the App size smaller. For little work input, you will suddenly find that your App will have features that you thought could not be created and it will make your app POP!

So what are the requirements? 

Option 1

A HTML page that calls an external CSS library such as bootstrap 4 including a JavaScript library JS form. These forms are lightweight in structure and can be easily deployed with your App.

Refer to a previous Blog - Dashboard example which demonstrates this option.

 

Option 2

Call an inline responsive CSS written html script as string text and add the JavaScript as script directly as a string into a Delphi unit. This method will eliminate the need to deploy HTML, CSS and JS forms but requires more developer writing time.

I tend to use Option 1 for Mobile Apps’ as it keeps the size of the App smaller and the files are only called when required.

To use JavaScript dynamically the Web browser has the function Call ‘Eval’ that can implement JavaScript script directly into the browser.

This function is handy especially if it requires live changing data or if it needs to execute parsed Database data to the JS library in the html.

If the requirement is for a callback function i.e. action live JS data back to Delphi, then Scriptgate offers this functionality with a small installable library component and can be downloaded through the GETIT installer.

What is the Development Time to market?

I find that it takes 20% of the time to develop a Delphi App and spend 80% of the time to complete the last 20% of the app. JavaScript can speed up your development time with immediate results and help to reduce the time it takes to bring your App to market.

So what is the downside to this?

Not much actually …

Web-browser Cross-origin resource sharing (CORS) is a mechanism that is designed to ensure that JavaScript cannot interact with your local file system.

Whilst this is a great Security feature, it does make it almost impossible to integrate a callback to your local Delphi Application.

Fortunately Scriptgate (found in the  Gettit Manager) has created a really quality wrapper that has come up with a method to override the CORS issue in offline Web-Browsers. This excellent library provides Call-back functions to enable Javascript data to be extracted from the browser. This makes the browser dynamically interactive with the Delphi components and now data can be processed bio-directionally.

For those hard core Delphi sceptics, this may feel that it is not a native application. Yes you would be right; however what is wrong with making use of a JavaScript which is essentially a great scripting language which is growing year on year.

I will be writing a series of Blogs on demonstrating how to integrate Javascript in to a Delphi Application using a browser component starting with  a large JavaScript open-source PDF Viewer library. 

Happy JS Coding…


Randy E      Commented   3 years ago Reply

Hi Good day it not easier to use javascript to create this.

Admin      Replied    Moderator   3 years agoReply


Hi Randy Yes, I agree that Javascript is a good option. Using just CSS would ensure that all browser would always function even if JavaScript was not enabled in the browser.

Add a Comment

9+5

Recent News

Delphi Delimited String to Fields
Delphi A Professional VCL DBGrid Part Four
Delphi A Professional VCL DBGrid Part Three
Delphi A Professional VCL DBGrid Part Two
Delphi A Professional VCL DBGrid Part One
Delphi VCL Buttons in DBGrid
Two Helper Apps for Delphi LibUSB
Delphi Libusb Library Introduction

Categories

Bootstrap 4
Delphi VCL
Delphi FMX
Ajax
Bootstrap 3
CSS
XE4>Delphi > XE4
Delphi < XE4
PHP

Archives

August 2019

Delphi Delimited String to Fields

June 2019

Delphi A Professional VCL DBGrid Part Four

May 2019

Delphi A Professional VCL DBGrid Part Three

April 2019

Delphi A Professional VCL DBGrid Part Two

March 2019

Delphi A Professional VCL DBGrid Part One

November 2018

Delphi VCL Buttons in DBGrid

October 2018

Two Helper Apps for Delphi LibUSB

September 2018

Delphi Libusb Library Introduction

August 2018

Delphi Object directly to a Json string in a REST Client
Delphi using Environment Variables in your App

July 2018

Delphi FMX Leaflet Plotter using OSM Maps

June 2018

C2PAS32 Convertor Application
C to Delphi Open Source Convertors Shootout
Delphi command-line programs with DOSCommand

May 2018

Delphi PDF Embedded viewer with PDF.js

March 2018

Delphi FMX - Changing TCharacter to TCharHelper
Make Your Delphi App POP using Javascript!

January 2018

Delphi FMX Dashboard using Chart.JS
Delphi FMX Form Docking

December 2017

PHP Slim REST Server & Delphi Auth Part 5

November 2017

Delphi FMX REST Client App Part 4

October 2017

Delphi VCL REST Pricing Client App Part 3

September 2017

Delphi REST VCL Client Basic Auth Part 2B

August 2017

Delphi REST Client Part 2A
PHP PDO REST Server Part 1

July 2017

PHP REST Server and Delphi Client Intro

June 2017

Delphi SQLite Encryptor-Decryptor Tool
Updating Applications Manifest using Delphi

May 2017

Create a Visual IP Address Geolocation with PHP

March 2017

PHP Downloader using Countdown timer
PHP File Downloader from a Inbox Selection

February 2017

Javascript Image-File Uploader with ThumbViewer

January 2017

Morris Charts and PHP-PDO

December 2016

CSS to create a functional Toggle Button