$Content?>
In the era of Web 2.0 any website should be interactive and dynamic. jQuery, MooTools, Sencha JS have are just some powerful tools which can enhance website when it's loaded into the browser.
Agile Toolkit is packed with useful JavaScript features.
Some of the Agile Toolkit featuresTerm progressive enhancement means that web page is functional even without JavaScript support. Presence of JavaScript support in the browser enhances and improves behavior of the page. Below are two form examples with identical source code and functionality, one will have JavaScript enhancement widget disabled. $form=$page->add('Form'); $form->js_widget=false; // turn JS off $form->addField('line','name')->validateNotNull(); $form->addSubmit('Greeting'); if($form->isSubmitted()){ $result='Hello, '.$form->get('name'); $form->js()->univ()->alert($result)->execute(); $this->api->redirect('../greeted', array('text'=>$result)); } /?> $form=$page->add('Form'); $form->addField('line','name')->validateNotNull(); $form->addSubmit('Greeting'); if($form->isSubmitted()){ $result='Hello, '.$form->get('name'); $form->js()->univ()->alert($result)->execute(); $this->api->redirect('../greeted', array('text'=>$result)); } /?>
To breach the gap between Server-side language and Browser-side language Agile Toolkit is using dynamic catch-all class methods. Calling js() method on any view will return an initialized jQuery_Chain class. Any subsequent calls to that class are converted into jQuery calls and is included with the page.
$page->add('Alex')->setAttr('width',50)->align('left') ->js('click')->animate(array('width'=>'100')); /?> To demonstrate use of this technique, we will need a simple View object. Alex is a View which is displayed as an image of a pink elephant. Alex has no specific code to support JavaScript or jQuery. Code below could be used on any View. To see this code in action, click on the elephant located at the start of this section.
$page->add('Alex')->setAttr('width',50)->align('left') ->js('click')->animate(array('width'=>'100')); /?> Who is Alex?Alex is a Pink Elephant. /?>
$left=$page->add('Alex')->align('left'); $right=$page->add('Alex'); $left->js('click',$right->js()->animate(array('padding-right'=>'+=20px'))); $right->js('click',$left->js()->animate(array('padding-left'=>'+=20px'))); /?> jQuery_Chain looks carefully at arguments which are passed to it. While strings are properly escaped and boolean and arrays are properly converted into JavaScript datatypes, Objects receive a special treatment. Including any other jQuery_Chain will also be reflected as a JavaScript chain. (This principle can be used to copy value from one field to another).
If you pass any other view into jQuery Chain it will be transformed into appropriate jQuery selector. More about jQuery Chains.
$left=$page->add('Alex')->align('left'); $right=$page->add('Alex'); $left->js('click',$right->js()->animate(array('padding-right'=>'+=20px'))); $right->js('click',$left->js()->animate(array('padding-left'=>'+=20px'))); /?>