tru3n0

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

Hoy he tenido que desarrollar un módulo para Drupal utilizando xajax, después de un rato investigando por fin he conseguido hacerlo funcionar, os explicó aquí cómo hacerlo y lo dejo anotado para futuros módulos.

Es bastante sencillo, primero tenemos que descargar la versión estable de xajax y descomprimirla en el directorio del plugin.

1. Incluímos la clase de xajax en el fichero .module y declaramos las funciones que vayamos a utilizar.

require_once(‘xajax/xajax.inc.php’ );

function myfunction()
{
//código
}

2. Módificamos o añadimos el hook_menu(), con esta función podemos modificar el header de la página y así poder incluir la llamada al javascript:

function nombre_modulo_menu() {
// inicializamos xajax
$xajax = new xajax(‘/index.php’);

// registramos las funciones
$xajax->registerFunction(“myfunction”);

// incluimos el javascript en el header drupal_set_html_head($xajax->getJavascript(‘modules/nombre_modulo/xajax’));

$xajax->processRequests();
}

3. Llamamos a la función desde el contenido del módulo.

Ejemplo:

Llamada a la función desde un bloque generado por el módulo:

function nombre_modulo_block($op=’list’, $delta=0) {
if ($op == “list”) {
$block[0]["info"] = t(“Bloque xajax”);
return $block;
}
else if ($op == ‘view’) {
// contenido del bloque
$block_content = ‘<script>xajax_myfunction();</script>
// set up the block
$block['subject'] = ‘Bloque xajax’;
$block['content'] = $block_content;
return $block;
}