Edición de «JQuery UI en Kumbiaphp Spirit»

== JQuery UI ==

[http://jqueryui.com/ JQuery UI] es un set de interacciones y widgets personalizables escritos en base a la librería jQuery. se puede usar para construir aplicaciones web altamente interactivas; Agregando JQuery UI a nuestras app realizadas con Kumbiaphp podremos brindar una interfaz agradable, facil de manejar y con unos cuantos efectos asombrosos gracias a sus componentes. Veamos como podemos darle uso en Kumbiaphp.

Podemos ver [http://jqueryui.com/demos/ demos] y [http://jqueryui.com/themeroller/ temas] disponibles para descargar. Adicionalmente se dispone de una herramienta online para crear temas y descargarlos se llama jQuery UI ThemeRoller Developer Tool. Su uso es intuitivo asi que no explicare mucho sobre eso.


== Descargando Jquery UI ==

Primero que todo debemos descargar Jquery UI. Para ello vamos a su [http://jqueryui.com/download seccion de descargas] Y personalizamos la descarga segun las necesidades de nuestra APP. ya sea que necesitemos un acordeon, un widwled tabs o un datapicker necesitamos incluir en la descarga el UI Core. Y seleccionar el tema que acompañara nuestra descarga. (Actualmente esta disponible la version (1.7.2)

"Para este tutorial incluiremos un Datapicker con el tema Flick y el UI Core."

En los archivos descargados encontramos 3 directorios:

    * js (libreria Jquery)
    * development-bundle (Demos y librerias necesarias para implementar)
    * css (Themes)


== Subiendo Jquery UI a Kumbiaphp ==
En nuestra App de kumbiaphp debemos subir los archivos necesarios para ejecutar el datapicker

    * Subir el directorio development-bundle/ui a -> miapp/public/javascript
    * Subir el directorio development-bundle/themes a-> miapp/public/css
    * Si por alguna razon no tenemos JQuery en nuestra app de Kumbia debemos subir esta libreria a
 -> miapp/public/javascript



== Incluyendo librerias de JQuery UI a Kumbiaphp ==

Existen varias formas de agregar las librerias de Jquery UI a nuestra app; Una de ellas es usando el helper javascript_include_tag(); en nuestro template.

Si lo hacemos asi debemos trabajar en el template que se encuentra en miapp/views/templates/mitemplate.phtml o uno que nosotros hallamos creado.

Por defecto Kumbiaphp trae un template llamado default.phtml si no hemos creado uno nosotro usaremos este para trabajar.

<source lang=php line>
<head>
<?php 	
	echo stylesheet_link_tag('themes/flicks/ui.all');
	echo stylesheet_link_tags();
 
	echo javascript_include_tag('jquery-1.3.2');
	echo javascript_include_tag('ui/ui.core');
	echo javascript_include_tag('ui/ui.datepicker');
 
?>  
</head>
</source>

== Partial para el Datepicker ==


En el directorio miapp/views/partials crearemos un archivo con extencion .pthml por ejemplo datapicker_alter.phtml en el que incluiremos la llamada al componente que hemos subido de JQuery UI

<source lang=javascript>
<script type="text/javascript">
	$(function() {
//donde datepicker es el ID del input que se asociara al componente datapicker
		$("#datepicker").datepicker({
//Aqui damos los parametros que requiera el componente 
			altFormat: 'DD, d MM, yy', //el formato
			changeMonth: true, //afirmamos que se pueda cambiar de mes
			changeYear: true}); //afirmamos que se pueda cambiar de año
	});
</script>
</source>


Otra versión del partial para que acepte el id del datapicker como parámetro.

<source lang=javascript>
<script type="text/javascript">
	$(function() {
		//donde datepicker es el ID del input que se asociara al componente datapicker
		$("#<?php echo $datepicker; ?>").datepicker({
//			Aqui damos los parametros que requiera el componente - Añadida traducción al español.
			dateFormat: 'dd-mm-yy',
			firstDay: 1,
			monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
			monthNamesShort: ['En','Feb','Mar','Abr','May','Jun','Jul','Ag','Sep','Oct','Nov','Dic'],
			dayNamesMin: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
			changeMonth: true, //afirmamos que se pueda cambiar de mes
			changeYear: true}); //afirmamos que se pueda cambiar de año
	});
</script>
</source>

== Usando el Partial anterior ==

En una vista que tengamos podemos usar el partial anterior de esta forma
<source lang=php line>
echo "<span class='label'>Date:</span>";
echo text_field_tag('name: user.fnac','id: datepicker');
//con el id datepicker asociamos el componente nombrado en el partial. Si queremos 
//usar otro datepicker en el mismo formulario debemos colocar un id diferente en 
//el form y el mismo en el partial
 
//finalmente incluimos el partial
View::partial('datapicker_alter');
</source>

Y ahora usando el partial con parámetro y escrito de la forma correcta usando los helpers de kumbia:
<source lang=php line>
<?php
// Definimos el campo
echo text_field_tag('busqueda.fecha');

/**
*  Incluimos el partial con el parametro.
*  
*  NOTA Advertencia: El id del campo generado por el tag text_field_tag reemplazá el . por una _ con lo que debemos prestar atención al nombre del campo. 
**/
echo View::partial('datapicker_alter', false, 'datepicker: busqueda_fecha'); 
?>
</source>

[[Archivo: Datapicker-jqueryui.jpg]]

Como podemos ver es muy facil tener una aplicacion con componetes dinamicos agradables, rapidos y personalizables. Del mismo modo que se agrego este datapicker se ouede hacer con los otros componentes que incluye JQuery UI. Solo es cuestion de subirlos a los directorios indicados, incluirlos apropiadamente en nuestros templates, crear un partial e incluirlo en la vista que lo requiera.
[[Categoría:jQuery]]