DelphiFan Magazine

Top Menu

Main Menu

CODE SAMPLESDELPHI
››UniGui. Unique hybrid of Delphi and JS

UniGui. Unique hybrid of Delphi and JS

By admin
January 26, 2021
775
0
Share:

Today I stumbled upon an interesting feature in UniGui – to handle component events using JavaScript, and specifically using functions from the ExtJS library. Let’s look at a simple example. Let’s open the UniGui project in Delphi and add 2 UniButton1 and UniEdit1 elements to the form

Now, in the object inspector, find ExtEvents

Next, click 2 times on the empty field next to the click event, and the system itself will give us the code

function click(sender, e, eOpts)
{
}
Further, it remains for us only to supplement it
function click(sender, e, eOpts)
{
MainForm.UniEdit1.setValue(‘myValue’);
}
And that’s the most interesting thing !!! Pay attention to the design
 MainForm.UniEdit1.setValue(‘myValue’);
After all, its first part, MainForm.UniEdit1, is like pure Delphi code, but its last part setValue (‘myValue’) is a method from the ExtJS library for the Ext.form.field.Text component, but what kind of component is this? This is Delphi Uniedit1. Generally speaking, all this code is in javascript, but for the convenience of dolphins, the names of the elements, the structure are selected in such a way as to best correspond to the Delphi spirit.

Thus, how to access a particular element through JS from Delphi?

Select the element on which we will work (for example, the UniButton1 button in our example)

Open Object Inspector in Delphi

Find ClientEvents, then ExtEvents

Next, select the event that we will process, for example click, then click 2 times on the empty field next to it – a function template will appear, for example, for the click event

function click(sender, e, eOpts)
{
}
Further, if we, for example, want to process UniEdit1, then close ExtEvents for the button and open it for UniEdit.
Now let’s see what kind of element we have according to the classification of the ExtJS library, you can see it in the upper left corner
Further, you can get into the library API for this element and select one or another property or method, depending on the task.
Next, let’s return to ExtEvents for the button and write, for example, such a handler
function click(sender, e, eOpts)
{
MainForm.UniEdit1.setValue(‘myValue’);
}
The entire chain before the method / property declaration is written as in Delphi MainForm.UniEdit1, the second part .setValue (‘myValue’) is written as in the JS library API. Generally speaking, this whole construct is JS, or rather its ExtJS framework, so it is important that case is respected. Since Delphi is a case-insensitive language, it is easy to make mistakes.
!!!!!! Important note. JS is a case sensitive language, so it is important that the case matches what is written in Delphi. I.e,
Right
MainForm.UniEdit1.setValue (‘myValue’); // <<<< Exactly the same as what is written in Delphi
Wrong
mainform.UniEdit1.setValue (‘myValue’); // <<< Register error
Mainform.uniEdit1.setValue (‘myValue’); // <<< Register error
Tagsdelphigridjsunigui
Previous Article

How to transform a blob field into ...

Next Article

UniGUI Add CAPTCHA to the WEB project

admin

Related articles More from author

Leave a reply

You may interested

Follow Us on Instagram

© Copyright Delphifan Forum. All rights reserved.