Utilizaremos también la librería de Javascript Ext JS para poder manipular el árbol gráficamente de manera sencilla, utilizando drag and drop.

Lo primero que tendremos que hacer será añadir en la tabla de la base de datos de la entidad. Utilizando los nombres por defecto de Cake, serían los siguientes campos:

• parent_id: hace referencia al padre del elemento.
• lft: almacena el identificador del elemento de la izquierda en el mismo nivel.
• rght: almacena el identificador del elemento de la derecha en el mismo nivel.

Incluiremos también los campos id y nombre, en una entidad denominada, por ejemplo, Categoria.

El modelo lo haríamos de la siguiente manera:

Este comportamiento tiene funciones muy útiles para la manipulación del árbol. Las más utilizadas quizás sean las siguientes:

• children: devuelve los hijos de un nodo concreto, pudiendo seleccionar si deseamos obtener sólo los hijos directos o todos los hijos en el árbol.
• generatetreelist: función muy útil para obtener los elementos a introducir en un select de HTML.
• getpath: devuelve todo el path hasta el nodo especificado en un array.
• movedown y moveup: sirven para bajar o subir un nivel de un nodo del árbol.
• removefromtree: elimina un nodo del árbol sin perder la estructura, es decir, modificando el padre de sus hijos.
• reorder: reordena un nodo (arrastrando también a sus hijos) en función de los parámetros especificados.

Para realizar la manipulación visual del árbol de categorías crearemos las siguientes funciones en el controlador app/controllers/categorias_controller.php sería:

<?php

class CategoriasController extends AppController{

var $helpers = array( 'Javascript');

// Función para organizar las categorías
function organizar() {}

function getnodes() {
   Configure::write('debug', 0);
   // obtener el identificador del padre que se envío por POST vía Ajax
   $parent = intval($this->params['form']['node']);
   // encontrar los hijos directos del nodo anterior
   $nodes = $this->Categoria->children($parent, true, null, 'Categoria.lft ASC');

   $this->set(compact('nodes'));

   $this->render('getnodes', 'ajax');
}

function reorder()
{
   Configure::write('debug', 0);

   // delta es la diferencia en la posición (1 = nodo siguiente, -1 = nod anterior)
   $node = intval($this->params['form']['node']);
   $delta = intval($this->params['form']['delta']);

   if ($delta > 0) {
      $this->Categoria->movedown($node, abs($delta));
   } elseif ($delta < 0) {
      $this->Categoria->moveup($node, abs($delta));
   }

   exit('1');
}

function reparent()
{
   Configure::write('debug', 0);

   $node = intval($this->params['form']['node']);
   $parent = intval($this->params['form']['parent']);
   $position = intval($this->params['form']['position']);

   // guardamos el nuevo padre de la categoría
   $this->Categoria->id = $node;
   $this->Categoria->saveField('parent_id', $parent);

   // Si position == 0, nos movemos al inicio.
   // En otro caso, calculamos la distancia que nos moveremos ($delta).
   if ($position == 0) {
      $this->Categoria->moveup($node, true);
   } else {
      $count = $this->Categoria->childcount($parent, true);
      $delta = $count - $position - 1;
      if ($delta > 0) {
         $this->Categoria->moveup($node, $delta);
      }
   }

   exit('1');
}
}
?>

Sólo nos quedaría hacer las vistas. En este caso, necesitamos crear 2 vistas: organizar.ctp y getnodes.ctp.

// app/views/categorias/organizar.ctp

<?php echo $html->css('/js/ext-2.0.1/resources/css/ext-custom.css'); ?>
<?php echo $javascript->link('/js/ext-2.0.1/ext-custom.js'); ?>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '<?php echo $html->url('/js/ext-2.0.1/resources/images/default/s.gif') ?>';

Ext.onReady(function(){

   var getnodesUrl = '<?php echo $html->url('/categorias/getnodes') ?>';
   var reorderUrl = '<?php echo $html->url('/categorias/reorder') ?>';
   var reparentUrl = '<?php echo $html->url('/categorias/reparent') ?>';

   var Tree = Ext.tree;

   var tree = new Tree.TreePanel({
      el:'tree-div',
      autoScroll:true,
      animate:true,
      enableDD:true,
      containerScroll: true,
      rootVisible: true,
      loader: new Ext.tree.TreeLoader({
         dataUrl:getnodesUrl
      })
    });

   var root = new Tree.AsyncTreeNode({
      text:'Categorías',
      draggable:false,
      id:'root'
   });

   tree.setRootNode(root);
   tree.setHeight('auto');

   var oldPosition = null;
   var oldNextSibling = null;

   tree.on('startdrag', function(tree, node, event){
      oldPosition = node.parentNode.indexOf(node);
      oldNextSibling = node.nextSibling;
   });

   tree.on('movenode', function(tree, node, oldParent, newParent, position){

   if (oldParent == newParent){
      var url = reorderUrl;
      var params = {'node':node.id, 'delta':(position-oldPosition)};
   } else {
      var url = reparentUrl;
      var params = {'node':node.id, 'parent':newParent.id, 'position':position};
   }

tree.disable();

Ext.Ajax.request({
   url:url,
   params:params,
   success:function(response, request) {
      // if the first char of our response is zero, then we fail the operation,
      // otherwise we re-enable the tree
      if (response.responseText.charAt(0) != 1){
         request.failure();
      } else {
         tree.enable();
      }
   },
   failure:function() {
      // we move the node back to where it was beforehand and
      // we suspendEvents() so that we don't get stuck in a possible infinite loop
      tree.suspendEvents();
      oldParent.appendChild(node);
      if (oldNextSibling){
         oldParent.insertBefore(node, oldNextSibling);
      }
      tree.resumeEvents();
      tree.enable();
      alert("Oh no! Your changes could not be saved!");
   }
});
});

tree.render();
root.expand();
});
</script>

<div id="tree-div"></div>

Y la última vista:

<?php
// app/views/categorias/getnodes.ctp
$data = array();
foreach ($nodes as $node)
{   $data[] = array(      "text" => $node['Categoria']['nombre'],      "id" => $node['Categoria']['id']   );
}
echo $javascript->object($data);
?>

Ya sólo nos quedaría descargarnos la librería ExtJS y copiarla en la carpeta /app/webroot/js. En el ejemplo, se ha utilizado la versión 2.0.1.

Categoria

Podemos ver el ejemplo de funcionamiento aquí.

Un ejemplo muy claro para esta situación sería dos selects, uno con provincias y el otro con localidades, lo que queremos es que al cambiar de provincia varíe la lista de localidades y muestre las que están en la provincia seleccionada.

Lo haremos utilizando el ajaxHelper, para que no sea necesario la recarga de la página y quede más atractivo.

Lo primero que haremos será definir los modelos de provincias ,localidades y un tercer modelo en el que usaremos los selects, por ejemplo podría ser un modelo de cliente, en el que al insertar un nuevo cliente tendríamos que elegir la provincia y localidad a la que pertenece.

Modelos

Modelo de provincia.

/app/models/provincia.php

class Provincia extends AppModel
{
    var $name = 'Provincia';
}

Modelo de localidad.

/app/models/localidade.php

class Localidade extends AppModel
{
    var $name = 'localidade';
}

Modelo de cliente.

/app/models/cliente.php

class Cliente extends AppModel
{
    var $name = 'Cliente';
}

Controladores

Después de esto tendremos que definir los controladores.

Controlador de localidad.

/app/controllers/localidades_controller.php

class LocalidadesController extends AppController
{
	var $name = 'Localidades';
}

Controlador de provincia.

/app/controllers/provincias_controller.php

class ProvinciasController extends AppController
{
	var $name = 'Provincias';
}

Y por últino el controlador de clientes que será el que implementará la funcionalidad.

Controlador de cliente.

/app/controllers/clientes_controller.php

class ClientesController extends AppController
{
	var $name = 'Clientes';
	var $helpers = array('Ajax');
	var $uses = array('Cliente','Provincia','Localidade');

	function insertar()
	{
		$listadoProvincias = $this->Provincia->find('all', array('fields'=>array('id','nombre'),'order'=>'nombre ASC'));
		$this->set('provincias', Set::combine($listadoProvincias, "{n}.Provincia.id","{n}.Provincia.nombre"));
		$primera_provincia = $this->Provincia->find(null,null,'nombre ASC');
		$listadoLocalidades = $this->Localidade->find('all', array('fields'=>array('id','nombre'),'order'=>'nombre ASC','conditions'=>'Localidade.provincia_id='.$primera_provincia['Provincia']['id']));
		$this->set('localidades', Set::combine($listadoLocalidades, "{n}.Localidade.id","{n}.Localidade.nombre"));

		// RESTO DE LA FUNCIONALIDAD DE INSERCIÓN DE CLIENTES
	}

	function update_select()
	{
		if (!empty($this->data['Localidade']['provincia_id']))
		{
			$provincia_id = $this->data['Localidade']['provincia_id'];
			$localidades = $this->Localidade->find('all', array('fields'=>array('id','nombre'),'order'=>'nombre ASC','conditions'=>array('provincia_id'=>$provincia_id)));
		}
		else
		{
			$localidades = $this->Localidade->find('all', array('fields'=>array('id','nombre'),'order'=>'nombre ASC'));
		}
		$this->set('options', Set::combine($localidades, "{n}.Localidade.id","{n}.Localidade.nombre"));
		$this->render('/elements/update_select', 'ajax');
	}
}

Por un lado tenemos la función insertar, que será una función genérica de inserción de clientes. La parte que a nosotros nos interesa es en la que se inicializan las variables que después utilizaremos en los selects, estas deberán ser arrays en los que cada elemento tenda un identificador y su valor, para que el select pueda utilizarlos en la vista.

En la versión 1.1 de cakephp, esto se podía hacer mediante la función generateList del modelo, función que se ha eliminado en la 1.2.
Por ello ahora es necesario hacerlo en dos pasos, por un lado realizar la búsqueda con un findAll y después utilizar la función combine de la clase Set que genera un array con la estructura deseada, que será el que le pasemos a la vista.

$listadoProvincias = $this->Provincia->find('all', array('fields'=>array('id','nombre'),'order'=>'nombre ASC'));
$this->set('provincias', Set::combine($listadoProvincias, "{n}.Provincia.id","{n}.Provincia.nombre"));

La segunda función update_select, es a la que llamará el ajax para actualizar el listado de localidades a partir de un identificador de provincia.

Como se puede ver en el código, la función coge el identificador de provincia del select y envía a la vista los arrays actualizados de provincias y localidades.

Vistas

Localidades y provincias no tendrán vistas asociadas, ya que no hay ninguna operación en el controlador.

En clientes tendremos que crear la vista para la operación insertar del controlador, esta podría ser algo como esto:

/app/views/clientes/insertar.ctp

echo $form->create('Inscripcione',array('action'=>'insertar'));
echo $form->inputs(array('legend'=>'Actualizar Provincias',
		'Localidade.provincia_id' => array('label'=> 'Provincia','showEmpty'=>'false','id'=>'provincias'),
		'Alumno.localidade_id' => array('label'=> 'Localidad','showEmpty'=>'false','id'=>'localidades'),
			));
echo $form->end();

$options = array('url' => 'update_select','update' => 'localidades');
echo $ajax->observeField('provincias',$options);

La vista será muy sencilla, un formulario con dos selects, uno de localidades y otro de provincias y una llamada al ajaxHelper en la que se indica que cada vez que se modifique el valor del select provincias, se llame a la función update_select y actualice el select de localidades.

Este select se actualizará con los valores devueltos por la vista de update_select, que lo único que hace es imprimir todos los nombres de localidades devueltos por la función del controlador.

/app/views/elements/update_select.ctp
if(!empty($options)) {
  foreach($options as $k => $v) {
    echo "<option value='$k'>$v</option>";
  }
 }

En este enlace se puede ver un ejemplo de funcionamiento.

Utilizaremos para ello el Paginator Helper que viene implementado en esta nueva versión y que, como veremos, hace muchísimo más fácil esta tarea.

Empezamos con el controlador. Lo primero que tenemos que hacer es añadir dos variables:

como vemos en las opciones del array, le especificamos en la variable limit el número de elementos por página, en page la página en la que empezamos y en order la ordenación inicial. El componente RequestHandler no sería necesario si no introducimos el buscador.

El siguiente paso es crear una función de la manera siguiente:

Utilizaremos la sesión para guardar la cadena de búsqueda y no perderla cuando pulsemos en las cabeceras para la ordenación.

Y la vista sería ("admin_listar.ctp"):

Vemos aquí que es el propio Paginator Helper el que, con una simple llamada a la función sort, ya se encarga de hacer la ordenación de la columna alternando en cada click entre ascendente y descendente.

La función counter nos devuelve una cadena con la página en la que nos encontramos y el número total de páginas, en nuestro caso introducimos la cadena ' de ', entre ellas.

Y por último, las tres últimas funciones utilizadas, prev, numbers y next, nos muestran los enlaces a la página previa, a cada una de las páginas y a la página siguiente, respectivamente.

CakePHP 1.2 nos proporciona muchas más posibilidades y muchas otras opciones. Podemos obtener más información en la especificación de CakePHP 1.2 del Paginator Helper. Así como en la Bakery, en la que tenemos un artículo sobre la paginación básica y otro sobre la avanzada.