Using External JavaScript Libraries with EWB
By Erick Engelke
August 15, 2024
The built-in features of EWB are quite powerful, but often you need to add functionality of external JavaScript library for reasons like:
-
payment card processing
-
advanced graphing
-
animation
-
advnced controls
-
etc
Actually, much of the functionality of my Nice libraries is based on external JavaScript libraries. They can be very helpful.
There are a few things to know
-
including the library at run-time
-
interfacing with the library once loaded
-
setting up the output area
-
sometimes you need to add CSS
Step One: including the library
Typically you will have a URL for the JavaScript librray. You can either reference it on the Internet (and hope it stays up always) or copy it to a local location.
There are two ways to do this, both involve TScript. If you want, place a TScript on your form and fill out the detils. Note: you will not be able to access the JS library until the OnLoad event is called, signalling the library has loaded.
Or if you want to do it with code, add a private TScript variable to the Form’s privatae area, and add the following code to the OnShow event for the form:
... myscript = TScript.Create( self ); myscript.OnLoad := scriptIsLoaded; // next line loads the JavaScript myscript.URL := 'blah.js'; ...
Step Two: Interfacing with the Library
First of all, you need to add webdom to your uses statement for the unit where you interface.
Most libraries will either declare a global variable contianing data and mehtods, or one or more function you call which returns a variable with data and methods.
In either case, you will need to create an EWB class that looks like the object stucture.
Note:
-
This can be hard, because the full structure is not always well defined in the documention.
-
It can also be messy, because JavaScript authors can be haphazard and use something as a string, boolean, integer, or whole other object using the same name but in different cases.
-
In traditional Pascal or C, one could handle that with a union in the class definition, but such is not available in EWB. So you may have to use variants in those rare cases.
-
Also, note that JavaScript is case sensitive, but Pascal generally is not. But when you define a TExternalObject class or an external variable, the case used at the time of the definition is preserved!
You will need to use a class derived from TExternalObject for your external class defintion. They differ from normal classes in that:
-
case is preserved
-
variables in the class are marked as properties
-
properties have read and/or write attributes
-
the names of variables and methods are not mangled if you compress/encrypt the source
type
myclass = class( TExternalObject )
public
property data : string read write;
procedure showit;
end;
///
var
sampleclass : myclass;
///
external function LibraryAccess : myclass;
...
sampleclaass := LibraryAccess;Step Three: Output
Often libraries will want a DIV to output things.
The easiest way to do that is to declare a THTMLLable and add the specified DIV in the content area.
Step Four: Adding CSS
Some libraries ask you to add CSS. This is a bit complicated to do.
If you have a subscription to my Nice libraries, this is achieved by defining:
uses nicebase;and then calling the function addlocalcss;
procedure addlocalcss( form : TForm; path : string ; onsuccess : TNotifyEvent; onfail : TNotifyEvent) ;