Inicializamos el plugin:

$().ready(function(){
$("#tags").autocomplete('buscar_tags.php',
{ multiple: true,
autoFill: true,
selectFirst: true,
formatItem: formatItem,
formatResult: formatResult } );
});

function formatItem(row) {
return row[0] + ” (” + row[1] + “)”;
}

function formatResult(row) {
return row[0];
}

En donde:  multiple = true permite ingresar más de un valor autocompletado,  autoFill: completa la palabara para poder seleccionarla presionando enter o tab,  selectFirst hace que la primera sugerencia sea seleccionada si no se presiona enter o tab o se selecciona algo utilizando el puntero, formatItem es una función que permite formatear como se muestra cada item mientras que formatResult es una función que permite formatear cómo se muestra una vez seleccionado un ítem.
Otras posibilidades son:

• max: limitar la cantidad máxima de ítems
• minChars: mínima cantidad de caracteres que debe escribir el usuario para que se active el autocompletar
• etc

Cuando implementemos el código de buscar_tags.php, obtendremos en el parmámetro q del querystring el valor ingresado por el usuario. Por ejemplo, si el usuario ingresa “foo” se generará un request de tipo:  buscar_tags.php?q=foo&limit=10, donde limit tendrá el valor de la opción “max”.  EL script buscar_tags.php deberá retoranar el resultado un ítem por renglón. Para el ejemplo de formatItem anterior podría ser:

foreach($resultados as $resultado) {
echo $resultado[0], "|", $resultado[1], "\n";
}


1. CakePHP. Carga de archivos
Utilizando los consejos publicados en este post, implementaremos la lógica PHP para subir archivos al servidor. El siguiente método toma el nombre del directorio en el servidor al cual se quieren subir los archivos, el array de archivos del formulario y un identificador opcional en caso que se desee crear un subdirectorio en donde guardar el archivo.

/**
* uploads files to the server
* @params:
*		$folder 	= the folder to upload the files e.g. 'img/files'
*		$formdata 	= the array containing the form files
*		$itemId 	= id of the item (optional) will create a new sub folder
* @return:
*		will return an array with the success of each file upload
*/
function uploadFiles($folder, $formdata, $itemId = null) {
// setup dir names absolute and relative
$folder_url = WWW_ROOT.$folder;
$rel_url = $folder;

// create the folder if it does not exist
if(!is_dir($folder_url)) {
mkdir($folder_url);
}

// if itemId is set create an item folder
if($itemId) {
// set new absolute folder
$folder_url = WWW_ROOT.$folder.'/'.$itemId;
// set new relative folder
$rel_url = $folder.'/'.$itemId;
// create directory
if(!is_dir($folder_url)) {
mkdir($folder_url);
}
}

// list of permitted file types, this is only images but documents can be added
$permitted = array('image/gif','image/jpeg','image/pjpeg','image/png');

// loop through and deal with the files
foreach($formdata as $file) {
// replace spaces with underscores
$filename = str_replace(' ', '_', $file['name']);
// assume filetype is false
$typeOK = false;
// check filetype is ok
foreach($permitted as $type) {
if($type == $file['type']) {
$typeOK = true;
break;
}
}

// if file type ok upload the file
if($typeOK) {
// switch based on error code
switch($file['error']) {
case 0:
// check filename already exists
if(!file_exists($folder_url.'/'.$filename)) {
// create full filename
$full_url = $folder_url.'/'.$filename;
$url = $rel_url.'/'.$filename;
// upload the file
$success = move_uploaded_file($file['tmp_name'], $url);
} else {
// create unique filename and upload file
ini_set('date.timezone', 'Europe/London');
$now = date('Y-m-d-His');
$full_url = $folder_url.'/'.$now.$filename;
$url = $rel_url.'/'.$now.$filename;
$success = move_uploaded_file($file['tmp_name'], $url);
}
// if upload was successful
if($success) {
// save the url of the file
$result['urls'][] = $url;
} else {
$result['errors'][] = "Error uploaded $filename. Please try again.";
}
break;
case 3:
// an error occured
$result['errors'][] = "Error uploading $filename. Please try again.";
break;
default:
// an error occured
$result['errors'][] = "System error uploading $filename. Contact webmaster.";
break;
}
} elseif($file['error'] == 4) {
// no file was selected for upload
$result['nofiles'][] = "No file Selected";
} else {
// unacceptable file type
$result['errors'][] = "$filename cannot be uploaded. Acceptable file types: gif, jpg, png.";
}
}
return $result;
}

Dado que lo voy a usar en varios controllers, lo agregué al AppController. Un ejemplo de cómo usarlo sería el siguiente:

En la vista: <?php echo $form->file(‘File.image’); ?>
En el controller:


$fileOK = $this->uploadFiles('files', $this->data['File']);
// si el archivo fue subido correctamente
if(array_key_exists('urls', $fileOK)) {
// guardar la url en la informacion del from
$this->data['Post']['image_url'] = $fileOK['urls'][0];
}


2. jQuery

Para el frontend, usamos el plugin AjaxUpload de jQuery, disponible aquí. Les recomiendo que vean los ejemplos disponibles desde esa misma página. Una vez descargado, (requerden que también necesitan jQuery), lo guardamos en la carpeta app/webroot/js. Para poder utilizarlo, no olviden incluirlo en la vista: <?php $this->addScript($javascript->link(‘ajaxupload’)); ?>

Un ejemplo de código javascript para inicializar AjaxUpload es el siguiente:

$(document).ready(function(){
 new AjaxUpload('#att_file', {
  action: 'controller/action',
  name: 'data[Attachment][path]',
  autoSubmit: true,
  onComplete : function(file, response){
    alert('Carga Filanizada');
  },
  onChange: function(){
  }
 });
});//document ready

Debemos setear el action para que apuente al controllador y acción correspondiente.

AjaxUpload permite utilizar cualquier elemento como botón para abrir el cuadro de dialogo de seleccionar archivos. Por ejemplo, podríamos usar un div:

<div id='att_file'>Cargar Archivos</div>

AjaxUpload utiliza un iframe oculto para cargar el archivo, por lo que no es una técnica AJAX propiamente dicha, aunque logra una experiencia de uso similar.

Podríamos utlizar los eventos onChange y onComplete para mostrar un mensaje de Loading. Si es necesario adjuntar más datos para ser enviados por el formulario, se puede utilizar la propiedad data.

Con esto tenemos todos los elementos necesarios para tener carga de archivos AJAX utilizando CakePHP.

Imágen extraida del sitio web de prettyCheckboxes

En este post vamos a enfocarnos en los radio buttons y checkboxes, o “botones de opcion” y “casillas de verificación”… como nos guste llamarles.

He probado con varios plugins de jQuery, e incluso personalizarlos bastante, pero considero que prettyCheckboxes es uno de los más sencillos de utilizar. Para incluirlo en tu diseño solo tienes que:

1.- Importar jQuery (por supuesto) y el archivo prettyCheckboxes.js que podrás descargar de este sitio (allí encontraras ejemplos y una explicación mas detallada)

2.- Inicializar prettyCheckboxes (para todos los checkbox y radio buttons de la página):

    $(document).ready(function(){
        $('input[type=checkbox],input[type=radio]').prettyCheckboxes();
    });

O inicializarlo solo para algunos elementos de tus formularios:

    $(document).ready(function(){
        $('input.myCheckbox').prettyCheckboxes();
    });

Y eso es todo, ahora solo falta personalizar las imágenes (que descargas de la página de prettyCheckboxes para que se vean según tu diseño.

jQuery también dispone de una muy buena grilla, llamada FlexiGrid. Brinda todo lo que esperamos: resize de columnas, ordernar cada columna, puede cargar los datos por ajax usando XML o JSON, paginado, buscador, etc. Admás tiene un diseño muy atractivo y es muy liviana, que es uno de sus objetivos principales y lo que lo diferencia de Ext Grid.

Pueden ver algunos demos en esta dirección.

Es algo más complejo jQuery treeView, pero también bastante más versátil.

El código jQuery a utilizar es el siguiente:


$(".stripeMe tr").mouseover(function() {


$(this).addClass("over");

}).mouseout(function() {


$(this).removeClass("over");

});
$(".stripeMe tr:even").addClass("alt");

Las tablas a las que quieran agreagar el efecto deben tener la clase “stripMe”. Si quieren tener una fila encabezado de la tabla a la cual no se le aplique el efecto, deben utilizar thead y tfoot para el footer.

Los estilos a utilizar para pintar las filas son: alt y over . Como ven en el código, a las filas impares se le aplica el esitlo “alt” mientras que el estilo “over” es utilizado para destacar las filas cuando el mouse pasa sobre ellas.

Para leer más acerca de esta técnica, pueden visitar este sitio

Para crear el árbol, se arma la estructura utilizando listas html y luego se invoca a $(“#id_ul”).treeview(); y listo!

Ejemplo:

$(document).ready(function() {

$(“#arbol”).treeview();

});

<ul id="arbol">
	<li><a href="?1">Item 1</a>
		<ul>
			<li><a href="?1.0">Item 1.0</a>

				<ul>
					<li><a href="?1.0.0">Item 1.0.0</a></li>
				</ul>
			</li>

		</ul>
	</li>
	<li><a href="?2">Item 2</a>
		<ul>
			<li><span>Item 2.0</span>
				<ul>
					<li><a href="?2.0.0">Item 2.0.0</a>

						<ul>
							<li><a href="?2.0.0.0">Item 2.0.0.0</a></li>
							<li><a href="?2.0.0.1">Item 2.0.0.1</a></li>
						</ul>
					</li>
				</ul>
			</li>

		</ul>

	</li>

 </ul>

Para más información: jQuery treeView

    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
        d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
    $.plot($("#placeholder"), [ d1, d2 ]);

Le falta soportar gráficos de torta, pero podemos utilizar la modificación de Flot que se encuentra aquí.

Hasta la próxima!

• mejor de performance: Event handling 103, CSS selectors: 13%, .offset: 21%, .css: 25%
• Se agregó al core el plugin Dimensions

Si aún no han probado jQuery, les recomiendo que lo prueben. Pueden conseguirlo en aquí.