Friday, 29 July 2011 14:49

Client side scripting with uniGUI

Written by

One of the exciting new features in version 0.86 is ability to write client side JavaScript event handlers from within Delphi IDE.  Each uniGUI control is attached to an Ext JS control. In some cases there are more than one Ext JS controls for a uniGUI control. For example a TUniForm is a combination of an ext.Window and an ext.form.FormPanel.

 

Below image shows uniGUI event editor. All available events are listed in right panel. You can create an empty event handler by double clicking on event.

Now you can easily write a proper handler for mousemove event. In below example mouse coordinates are shown inside a TUniEdit control.

function form.Onmousemove(sender, x, y)
{
   MainForm.UniEdit1.setValue(x + ':' + y);
}

As you can see, you can easily refer to screen objects using their Delphi names. In above code, UniEdit1 is an Ext.form.TextField object. You can refer to Ext JS API docs for a list of available functions for all Ext JS objects.

On client side, Forms and Frames are global JS objects. Individual Controls are defined as sub-properties of Forms and Frames.

For controls residing inside a Form you must access them as child objects of that Form:

 

function form.Onmousemove(sender, x, y)
{
   MainForm.UniEdit1.setValue(x + ':' + y);
}
MainForm.UniButton1.setText('Caption');
UniForm2.UniButton3.setText('Caption');

For controls residing inside a Frame you must access them as child objects of that Frame:

[code language="js"]
UniFrame1.UniEdit1.setValue('Text');
[/code]

Please note that JavaScript is a case-sensitive language so object JS names should be same as those declared in Delphi:

Delphi name: UniEdit1
Correct JS name: UniEdit1
Incorrect JS names: uniEdit1 Uniedit1

Another advanced feature is ability to call server side event handlers from JS code. It enables developers to write fully customized server side Ajax event handlers

Example:

In a TUniButton control add below code to client side OnClick event.

[code language="js"]
function OnClick(sender, e)
{
ajaxRequest(sender, 'MyEvent', [ 'param0=A', 'param1=B' ]);
}
[/code]

In Object Inspector add a Delphi event handler for UniButton OnAjaxEvent event:

[code language="delphi"]
procedure TMainForm.UniButton1AjaxEvent(Sender: TComponent; EventName: string;
Params: TStrings);
begin
if EventName='MyEvent' then
begin
UniButton1.Caption:=Params.Values['param0'] + Params.Values['param1'];
end;
end;
[/code]

All these features enable developers to handle some of the events on client side and only call server side handlers when it is needed.  This will highly improve user experience and overall application performance. One good example is our Google Maps Demo which is a balanced mixture of client side scripts and server event handlers.

Read 14026 times Last modified on Friday, 03 June 2016 05:30