Utilizar scriptaculous en CakePHP

Los efectos de Scriptaculous son fáciles de implementar en CakePHP. En la página de descargas de Scriptaculous puedes descargar la última versión de las librerias.

Para implementarlo en CakePHP, primero tenemos que copiar las librerias necesarias (prototype.js, effects.js, scriptaculous.js) en el directorio /app/webroot/js

Una vez copiadas tenemos que cargarlas en la plantilla /app/views/layouts/default.ctp antes del tag </head>

if(isset($javascript)):
echo $javascript->link(’prototype.js’);
echo $javascript->link(’scriptaculous.js?load=effects’);
endif;

Nos aseguramos de que el charset es UTF-8, si no es así lo cambiamos.

print $html->charset(’UTF-8′);

Para probar el funcionamiento crea un nuevo controlador llamado things_controller.php con el siguiente contenido:

<?php
/**
* $Id: approot/controllers/things_controller.php
*/

class ThingsController extends AppController
{
var $name = ‘Things’;
var $helpers = array(’Html’, ‘Javascript’, ‘Ajax’);

// we’re not going to use a model for this example, but
// it would be easy to use a database thanks to cake
var $uses = null;

/**
* initial page load
*/
function index() {
// preload dynamic data

$this->set(’data1′, ‘content will update here’);
$this->set(’data2′, ‘here too’);

$this->render(’neat’);

}//index()

/**
* display content action
*
* @param int id of content to display
*/
function view($id) {

// content could come from a database, xml, etc.
$content = array(
array(’somebody is baking brownies’,
‘become a cake baker’,),
array(’knowledge is not enough’,
‘we must also apply - bruce lee’)
);

$this->set(’data1′, $content[$id][0]);
$this->set(’data2′, $content[$id][1]);

// use ajax layout
$this->render(’neat’, ‘ajax’);

}//view()

}//ThingsController
?>

Ahora creamos la vista:

<!– // approot/views/things/neat.ctp –>
<h1>Really neat stuff here</h1>
<?php
// update both divs
echo $ajax->link(’update divs’, ‘/things/view/0′,
array(’update’ => array(’dynamic1′, ‘dynamic2′))
);
echo ‘ | ‘;
// use an effect
echo $ajax->link(’blinders’, ‘/things/view/1′,
array(’update’ => array(’dynamic1′, ‘dynamic2′),
‘loading’ => ‘Effect.BlindDown(\’dynamic1\’)')
);
?>

<hr/>
<?php echo $ajax->div(’dynamic1′); ?>
<h2><span><?php echo $data1; ?></span></h2>
<?php echo $ajax->divEnd(’dynamic1′); ?>

<?php echo $ajax->div(’dynamic2′); ?>
<h3><span><?php echo $data2; ?></span></h3>
<?php echo $ajax->divEnd(’dynamic2′); ?>

Una vez guardados los ficheros podemos ver el resultado accediendo a la vista del controlador things en

http://localhost/things