• 1
  • 2
  • 3
  • 4
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 8104 times Last modified on Friday, 03 June 2016 05:30

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.

Lastest Blog Posts

  • Voyager is here! +

    Yes, uniGUI Voyager is here. Actually, it has been here for a while! Voyager is the nickname for uniGUI version Read More
  • uniGUI comes out of beta +

    It was almost seven years ago since my first blog posted in this site. Yes, uniGUI has been in beta Read More
  • uniGUI Trial Edition updated to build 1393 +

    We are happy to announce that a new build for Trial Edition of uniGUI is available. It contains many bug Read More
  • uniGUI Trial Edition updated to build 1384 +

    We are happy to announce that a new build for Trial Edition of uniGUI is available. It contains many bug Read More
  • uniGUI Release Candidate is here! +

    We are happy to announce that uniGUI has switch from beta to RC stage. Finally, we have a Release Candidate Read More
  • uniGUI Trial edition upgraded to version 0.99.96 build 1346 +

    We are happy to announce that a new build for Trial Edition of uniGUI is available. It contains many bug Read More
  • Trial edition is upgraded to version 0.99.96 build 1321 +

    We are happy to announce that a new version for Trial Edition of uniGUI is available. This new version contains Read More
  • uniGUI Trial Edition updated to build 1308 +

    We have updated trial edition to the most recent version. This update will fix an issue which prevented trial editions Read More
  • Version 0.99.95 is available +

    We are glad to announce that version 0.99.95 is available for all uniGUI editions. Trial edition can be downloaded from Read More
  • Welcome to Our New Website +

    Finally our new site is online! It adopts a modern responsive design which makes it compatible will all desktop and Read More
  • 1
  • 2
  • 3
  • 4
  • 5