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

El funcionamiento es sencillo, al introducir una letra en un campo de entrada se buscarán en la base de datos las coincidencias con el texto que hemos insertado, mostrándolas como una lista y dándonos la opción de elegir entre todos los resultados.

Esta opción se usa habitualmente con los listados de paises, en nuestro ejemplo utilizaremos, como en el ejemplo de actualizar un select con ajax, las provincias españolas.

En este enlace se puede comprobar el funcionamiento.

Añadirlo en nuestro proyecto es realmente sencillo, supongamos que tenemos un modelo, cuyo controlador tiene una operación y una vista asociada, que será donde queremos utilizarlo.

Para ello en la vista, añadimos este trozo de código dentro de un formulario:

 echo $form->label('provincias','Provincias');
 echo $ajax->autoComplete('nombre','autocomplete');

Añadimos un label que tendrá el texto Provincias y un campo de entrada autocomplete, este recibe como parámetros, el nombre del campo y como segundo parámetro la url donde se encuentra la función a la que se va a llamar cuando se introduzca una letra, en nuestro caso, la vamos a añadir en el mismo controlador que estamos utilizando, si no fuese así la dirección sería ‘/nombre_del_controlador/función’.

En segundo lugar, creamos la función autocomplete, dentro del controlador utilizado añadimos el siguiente código:

  function autocomplete()
  {
 	$str = trim($this->data['Provincia']['nombre']);
	$str = str_replace("á","a",$str);
	$str = str_replace("é","e",$str);
	$str = str_replace("í","i",$str);
	$str = str_replace("ó","o",$str);
	$str = str_replace("ú","u",$str);
	$str = str_replace("Á","A",$str);
	$str = str_replace("É","E",$str);
	$str = str_replace("Í","I",$str);
	$str = str_replace("Ó","O",$str);
	$str = str_replace("Ú","U",$str);
	$str = str_replace("Ñ","ñ",$str);
	$condicion = "REPLACE (REPLACE( REPLACE( REPLACE( REPLACE( REPLACE ( Provincia.nombre,'á','a'), 'é','e'),'í','i'),'ó','o'),'ú','u'),'Ñ','ñ') LIKE "$str%"";
	$this->set('provincias', Set::combine($this->Provincia->findAll($condicion,array('Provincia.nombre','Provincia.id'),'Provincia.nombre'), "{n}.Provincia.id","{n}.Provincia.nombre"));
	$this->render('autocomplete','ajax');
 }

La función es muy sencilla, realiza la búsqueda en la base de datos de todas las provincias cuyo nombre coincida con el texto introducido, pasado en $this->data con el nombre que se indica en el primer parámetro de la función autocomplete utilizada en la vista, para eso se añade en la condición la opción LIKE cadena% de sql.

Todas las opciones que añadimos anteriormente sirven para ignorar los acentos, tanto en la cadena que introducimos como en los nombres de las provincias almacenadas en la base de datos, con esto al realizar la búsqueda funcionará aunque cometamos fallos ortográficos.

Crearemos una vista para esta función, con una única línea de código, que crea una lista con todas las entradas del array.

 echo $html->nestedList($provincias);

Y por último añadiremos al css que estemos utilizando, dos clases que modificarán el aspecto del listado que hemos creado:

  div.auto_complete {
 	position :absolute;
 	width :250px;
 	background-color :white;
 	border :1px solid #888;
 	margin :0px;
 	padding :0px;
  }

 div.auto_complete ul{
	list-style: none;
	margin: 0px;
 }

 li.selected{
	background-color: #ffb;
 }

Con esto ya tendremos un campo de texto en el que al añadir texto se generará un listado con todas las entradas de la base de datos que coincidan con el texto introducido.

En este post vamos a explicar cómo hacer esto, utilizando para ello el calendario DHTML Calendar desarrollado por Dynarch. Es un calendario con licencia GNU y que cubre perfectamente todas las funcionalidades que necesitamos.

Todos los ficheros necesarios para introducir el calendario en nuestra página web, junto con la estructura como se organizan en CakePHP 1.2, pueden descargarse calendario. Lo explicaremos paso a paso.

Lo primero que tenemos que hacer es descargarnos el calendario (podemos hacerlo directamente de la página web de Dynarch, o bien mediante el enlace del párrafo anterior) y descomprimirlo en la carpeta app/webroot/js. Necesitamos también otro fichero javascript, common.js, que también meteremos en esa carpeta. En el body, incluiremos estos ficheros escribiendo:

// Calendar includes
echo $javascript->link('jscalendar-1.0/calendar.js');
echo $javascript->link('jscalendar-1.0/lang/calendar-es.js');
echo $javascript->link('common.js');
// CSS Theme
echo $html->css('../js/jscalendar-1.0/skins/aqua/theme');

Necesitamos ahora implementar un helper para que nos sea mucho más fácil la utilización de este calendario. Lo descargamos del enlace anterior y lo metemos en la carpeta app/views/helpers. Si miramos el código de este helper vemos que tenemos dos funciones, picker y flat, que nos permiten hacer que este calendario aparezca al pulsar un botón o que esté siempre visible en nuestra página.

Ya sólo nos falta introducir este calendario en nuestras páginas.

En el controlador, importamos el helper:

var $helpers = array('DatePicker');

Y en la vista mostramos el calendario:

echo $datePicker->flat('fechaCalendarioFlat', array('id'=>'fechaCalendarioFlat'));
echo $datePicker->picker('fechaCalendarioPicker', array('id'=>'fechaCalendarioPicker'));

Podemos ver una demostración del funcionamiento del calendario en este enlace.

A partir del código proporcionado, podríamos añadir muchas funcionalidades. Por ejemplo, podremos editar el código del helper, para añadirle un observador de javascript al calendario tipo flat y que al pulsar en una fecha nos lleve a otra url, o podríamos hacer que ciertas fechas especiales se coloreen de manera distinta al resto.

NOTA: Tras el comentario de Hijal, hemos comprobado que la versión del helper enlazada en este post es para la versión 1.1 de CakePHP, para la versión 1.2 únicamente habría que modificar las funciones flat y picker, de la manera que se muestra a continuación:

function picker($fieldName, $options = array()) {
$this->_setup();
$htmlAttributes = $this->domId($options);
$divOptions['class'] = ‘date’;
$options['type'] = ‘text’;
$options['div']['class'] = ‘date’;
$options['after'] = $this->Html->link($this->Html->image(’../js/jscalendar-1.0/img.gif’), ‘#’, array(’onClick’=>”return showCalendar(’”.$htmlAttributes['id'].”‘, ‘”.$this->format.”‘); return false;”), null, false);
$output = $this->input($fieldName, $options);
return $output;
}

function flat($fieldName, $options = array()){
$this->_setup();
$htmlAttributes = $this->domId($options);
$divOptions['class'] = ‘date’;
$options['type'] = ‘hidden’;
$options['div']['class'] = ‘date’;
$hoder = ‘<div id=”‘.$htmlAttributes['id'].’_cal’.'”></div><script type=”text/javascript”>showFlatCalendar(”‘.$htmlAttributes['id'].’”, “‘.$htmlAttributes['id'].’_cal’.'”, “‘.$this->format.’”, function(cal, date){document.getElementById(\”.$htmlAttributes['id'].”.’\').value = date});</script>’;
$output = $this->input($fieldName, $options).$hoder;
return $output;
}

Estas dos funciones se encuentran ya modificadas en el fichero tar.gz que se adjunta en el post. Junto con otra modificación surgida tras el siguiente comentario en el foro http://cakephp.hospedaxes.com/dudas/topic/calendario-en-cakephp

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.