Interaction between js/jQuery objects and CGJQ components

[Jorge Sousa]

A brief expalanation on how jQuery Objects work and how our comps core works with them.

And how the interaction between jQuery Objects and IWCGJQ is done.

It's important that we could explain.

jQuery objects work all the same way

1- They have options , an js object, with set of properties to setup the plugin.

2- An js initialization code where the options are applied to the jQ object,

This init code is executed in the jQuery onReady, that is immediately after the DOM loading, before the document OnLoad.
like

$function({ // onReady
$("#IWCGJQDIALOG1").dialog({title:"MyTitle"}); // This is equivalent to code IWCGJQDialog1.JQDialogOptions.Title:= 'MyTitile'; in Delphi
}

3 – Most of them jQuery have methods, called the "Client API" of the plugin, to perform client actions, like closing a dialog, fi.
Our components always implement the Client API, and its correspondency is on JQOptions classes, like
IWCGJQDialog1.JQDialogOptions.Close , .MoveToTop etc…

For instance, for Dialog, the methods available in

http://jqueryui.com/demos/dialog/#method-option

Tab Methods

are all available in our

IWCGJQDialog1.JQDialogOptions (TIWCGJQDialogOptions) class

When the methtod IWCGJQDialog.JQDialogOptions.Close is called in Delphi
it will generate the script

$("#IWJQDIALOG1").dialog("close")

If this method is called in response to an Ajax Event
The javascript will be added to the ajax XML to be executed when back to browser.

If is in a rendering stage or in a submit event
it will add the script to browser document onLoad

4- There is a kind of jQ plugin methods, called "setters"

For jqDialog is

.dalog("option","optionname",optionvalue)

that allows to change the options, and like component properties in Delphi, they perform internal actions to effectivate the change.

In our suite components, in the Option Classes, like JQDialogOptions,
when the properties are changed in an ajax event
also generate the setter script, if available for the plugin,

For instance, if in ajax event, if we add to code:

IWCGJQDialog1.JQGDialogOptions.Title:= 'Some Other Title';

it will generate the script

$("#IWCGJQDIALOG1").("option","title","Some Other Title")

to be executed when the ajax request back to server.

But, and this is IMPORTANT, there are some options that are simply ignored by the jQ plugin, because for that option, the plugin does not support the change.

And there are some plugins, we use a few, that have only a simple API or no API at all, incliuding the setter methods.
Our hope, is to be able to increase the contribuition and support for these awesome jQuery plugin developers that we are working with, and somehow promoting as well, in order to contribute for to the improvement of the plugins themeselves.

cgdevtools