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.