Client-side Scripting

<< Click to Display Table of Contents >>

Navigation:  Developer's Guide >

Client-side Scripting

One of the advanced features of uniGUI is the ability to write JavaScript handlers for client-side events, i.e. it allows adding JS code for Ext JS events for uniGUI controls. Ext JS is a complete JavaScript framework with a rich set of components. Ext JS has its own object hierarchy. Like Delphi objects, each Ext JS component derives from a parent object. While JavaScript is not directly an object oriented language like Object Pascal, there are several means in JavaScript to allow developers create object hierarchies with object oriented language characteristics such as inheritance. For example, in JavaScript, member visibility is not the same as in Object Pascal. So-called private properties and methods are still visible in child classes and are accessible from object instances.

 

After this short introduction to Ext JS, let's see what the requirements for client-side scripting in uniGUI are. The first requirement is a fair knowledge of the JavaScript language. JavaScript is one of the C-like language variants which has a syntax very similar to C and Java. Another prerequisite is to become familiar with Sencha Ext JS library API. You can still write client-side code with little knowledge of JavaScript and Ext JS API. Let's show a simple example:

 

Place a TUniButton on your MainForm.

 

Place a TUniButton on MainForm

Place a TUniButton on MainForm

 

In Object Inspector, choose the ExtEvents property which is a sub-property of the ClientEvents property. Double click on ExtEvents which will open a new window.

 

In Object Inspector double click on  ExtEvents

In Object Inspector double click on  ExtEvents

 

The new window is the uniGUI JavaScript event editor. On the left side, you will see all available Ext JS events that associated with TUniButton. On the top left corner, you will see Ext.button.Button which is the Ext JS component used in the TUniButton uniGUI control. If you double click on each of those events, a new event handler will open in the editor. You can start typing your custom JavaScript code to perform any desired task you want to do on the client.

 

To access UniButton1, you must use a special syntax. Any uniGUI object is accessible using the owner's name and its name (<owner name>.<object name>). The names must be the same defined in Delphi (but case sensitive). In our example, we have the object UniButton1 owned by MainForm; the correct syntax to access it client-side is MainForm.UniButton1.

 

Once you have access to your object, you can use all Ext JS methods available for the Ext.button.Button component. So, while UniButton1 is an instance of the server-side TUniButton class,  MainForm.UniButton1 is an instance of the client-side Ext.button.Button Ext JS component.

 

setText() method of Ext.button.Button class

setText() method of Ext.button.Button class

 

The picture above shows the JavaScript setText() method for the Ext.button.Button class. This method can be called at runtime to change the caption of the button.

 

In JavaScript editor choose 'click' event and double click.

In JavaScript editor choose 'click' event and double click.

 

As demonstrated above, the setText() method can used to change the caption of button. Again, let's emphasize that JavaScript is case-sensitive and control names must be typed with the exact case they were declared in Delphi.

 

Run the application and click on the button

Run the application and click on the button