Version 0.86.0

[Farshad Mohajeri]

First build of uniGUI Beta version 0.86 is available for download. As discussed in another topic main theme of 0.86 is the long awaited client side event handling and scripting.

 

Major highlights of version 0.86:

 

1. Advanced IDE editor to add and edit JavaScript handlers for Ext JS controls
2. Directly fire Ajax requests from JS code.
3. Ability to access Ext JS controls from JS code using their Delphi names.
4. Ability to monitor Ajax calls on client side.
5. Send JS code or custom strings as response to an Ajax request.
6. Server side mouse and click event handlers added for additional uniGUI controls.
7. Extended client side mouse and click event handling support for Ext JS controls which don't generically support those events.

A brief tutorial for new features in 0.86.0 :

 

There are four new demos which demonstrate various aspects of client side event handling.

 

In Object Inspector there is a new property named ClientEvents which is published for many of the uniGUI controls. There are two sub properties here: ExtEvents and UniEvents. ExtEvents represents Ext JS generic events while UniEvents are event handlers added by uniGUI framework. When you double click on either of those properties, a property editor form is opened. On top side of editor form there is ComboBox which shows Ext JS objects that are attached to this control. For some controls there can be more than one Ext JS objects.

 

For instance, TUniForm owns two Ext JS objects. window and form. window is an Ext.window while form is an Ext.form.FormPanel object.

 

For each object there is a list of available events in a grid which is similar to Delphi's Object Inspector.

 

You can start editing JS by simply double clicking on event you want to add a handler.

 

For example after double clicking on Onmousemove below code is automatically inserted in editor:

 

function form.Onmousemove(sender, x, y)
{

} 

 

Lets write a simple JS handler for this event.

 

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 control. 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:

 

MainForm.UniButton1.setText('Caption');

UniForm2.UniButton3.setText('Caption');

 

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

 

UniFrame1.UniEdit1.setValue('Text');

 

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.

 

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

 

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

 

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;

 

 

This was a brief guide on how to use client side scripting features of uniGUI in version 0.86. We will cover more topics on client side scripting in other posts.

 

Changelog:

 

0.86.0.880

+----------------------------------------------------------------------------------------

- 0001073: UniCalendarPanel: OnDayClick in DayView bug

- 0000591: Cursor property for web

- 0001072: delete Form/Frame JS objects after destroy

- 0001069: Advanced IDE support for client side event scripting

- 0001070: Integration of Ext JS events in TUniControl and TUniComponent

- 0001071: Calling server side event handlers from client side ajax request

- 0001068: TUniChart moved to a separate package

- 0001065: TUniDBDateTimePicker: Bug when Dataset is closed.

- 0001062: Destroying UniControl doesn not destroy child UniFrames

- Four new demos: ClientEvents-1, ClientEvents-2, ClientEvents-3, ClientEvents-4

[taha_gh]

GOOD JOB

 

I download it for test

[cristianotestai]

0.86.0.880

+----------------------------------------------------------------------------------------

- 0001073: UniCalendarPanel: OnDayClick in DayView bug

- 0000591: Cursor property for web

- 0001072: delete Form/Frame JS objects after destroy

- 0001069: Advanced IDE support for client side event scripting

- 0001070: Integration of Ext JS events in TUniControl and TUniComponent

- 0001071: Calling server side event handlers from client side ajax request

- 0001068: TUniChart moved to a separate package

- 0001065: TUniDBDateTimePicker: Bug when Dataset is closed.

- 0001062: Destroying UniControl doesn not destroy child UniFrames

- Four new demos: ClientEvents-1, ClientEvents-2, ClientEvents-3, ClientEvents-4

 

Farshad, Fantastic!!

 

Beyond these excelent features, now i too have onclick event for unilabel and cursor change for UniLabels and UniImage components!!

Now, i'm near for presenting my demo project to future customers.

 

Tks again!!

[amrihuang]

How to add a css content in project?

[Farshad Mohajeri]

How to add a css content in project?

 

There is no way to add CSS in current version. uniGUI controls has their own CSS classes. What is your main purpose of adding additional CSS?

[amrihuang]

I will test textfield with OnBlur and OnFocus to change backgroundColor to replace OnExit & OnEnter event!

How can I achieve this purpose?

Many thanks.

[Farshad Mohajeri]

For form.TexField you can use el.dom property which is a standard HTML DOM object.

 

function OnBlur(sender)
{
 sender.el.dom.style.backgroundColor='#00ff00';
}

[amrihuang]

Many thanks.

How to dynamic add ClientEvents.ExtEvents in program?

I add in mainform's onCreate to set "ClientEvents.ExtEvents.Text"

but it doesn't work.

[cristianotestai]

For form.TexField you can use el.dom property which is a standard HTML DOM object.

 

function OnBlur(sender)
{
 sender.el.dom.style.backgroundColor='#00ff00';
}

 

Hi Farshad,

 

For the UniPanel, as I can have a rounded edge using HTML DOM object?

I am currently putting the css file:-moz-border-radius: 8px 8px 8px 8px;

 

How can I do this using "el.dom.style"?

I made some attempts in some events but without success.

 

Best Regards.

[Farshad Mohajeri]

Many thanks.

How to dynamic add ClientEvents.ExtEvents in program?

I add in mainform's onCreate to set "ClientEvents.ExtEvents.Text"

but it doesn't work.

 

What do you assign to Text property?

[Farshad Mohajeri]

Hi Farshad,

 

For the UniPanel, as I can have a rounded edge using HTML DOM object?

I am currently putting the css file:-moz-border-radius: 8px 8px 8px 8px;

 

How can I do this using "el.dom.style"?

I made some attempts in some events but without success.

 

Best Regards.

 

As far as I know you can't make rounded edges by modifying DOM object. In future I will add custom CSS support to some level.

[Farshad Mohajeri]

Many thanks.

How to dynamic add ClientEvents.ExtEvents in program?

I add in mainform's onCreate to set "ClientEvents.ExtEvents.Text"

but it doesn't work.

 

 

Correct syntax:

 

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
 UniEdit1.ClientEvents.ExtEvents.Values['Onmouseover']:='function Onmouseover(sender){ sender.el.dom.style.backgroundColor="#ff0000"; }';
 UniEdit1.ClientEvents.ExtEvents.Values['Onmouseout']:='function Onmouseout(sender){  sender.el.dom.style.backgroundColor="#00ff00"; }';
end;

[amrihuang]

It is ok for the correct syntax!so good.

for client event and ajax,,, will take more time to study!

thanks.

[Farshad Mohajeri]

Another useful example:

 

function OnKeypress(sender, e)
{
 var c=e.getCharCode();
 if (c>=48 && c<=57) 
  e.stopEvent();
}

 

Above filter avoids typing digits (0..9) in TUniEdit.

[cbillo]

how can I change to Next/Previous control using onkeypress or onkeydow event (of a form) instead of Tab and Shift Tab

 

Thanks in advance

[Farshad Mohajeri]

how can I change to Next/Previous control using onkeypress or onkeydow event (of a form) instead of Tab and Shift Tab

 

Thanks in advance

 

Form doesn't have keydown/press events.

[cbillo]

Form doesn't have keydown/press events.

 

any other way to do that (client side), please?

[Farshad Mohajeri]

any other way to do that (client side), please?

 

You can capture KeyDown in OnKeypress event of Edit controls and use focus() method to select next control.

 

However I don't recommend this. IMO,It is better to educate users to use standard Tab key to tab through controls.

[dionel1969]

A very good work. There are some things that I was waiting for, and I know some other people too.

 

Thank you for that, by now...

[Farshad Mohajeri]

A very good work. There are some things that I was waiting for, and I know some other people too.

 

Thank you for that, by now...

 

Thank you.

[Farshad Mohajeri]

how can I change to Next/Previous control using onkeypress or onkeydow event (of a form) instead of Tab and Shift Tab

 

Thanks in advance

 

hmm..kind of easier than I thought:

 

Add below to UniForm.Scripts:

 

function doNextPrev(sender, e)
{
  var c=null; 
  var a=e.getCharCode(); 
  if (a==40) {
 	c=sender.nextSibling();
 	while (c && !c.events['keypress'])  {
		c=c.nextSibling();
 	}
  } else if (a==38) {
 	c=sender.previousSibling();
 	while (c && !c.events['keypress'])  {
		c=c.previousSibling();
 	}
  }
  if (c) c.focus();
}

 

For each Editable Control add below to OnKeyPress client event:

 

function OnKeypress(sender, e)
{
  doNextPrev(sender, e);
}

 

 

Above code is not fully tested. Use at your own risk.

[cbillo]

You can capture KeyDown in OnKeypress event of Edit controls and use focus() method to select next control.

 

However I don't recommend this. IMO,It is better to educate users to use standard Tab key to tab through controls.

 

Thanks Farshad. I know Tab is the standard key to use, but my users just need to use numeric pad key and Return/Enter key are more productive than Tab key.

 

 

Congratulations for your great job with UniGUI.

[JasonReid]

Nice work Farshad. Thanks for moving the charts to a separate unit.

[thecrgrt]

Where is UniDBEdit.ClientEvent?

[Farshad Mohajeri]

Where is UniDBEdit.ClientEvent?

 

If it is not there then I have forgotten to publish it.