JQuery UI en Kumbiaphp Spirit
Sumario
JQuery UI
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 demos y 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 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
No es necesario que copies la carpeta development-bundle, sino las subcarpetas que se mencionan, estas son las carpetas ui y themes. En la descarga de la web de jquery-ui en la carpeta js hay dos archivos estos son: jquery-1.4.2.min.js y jquery-ui-1.8.2.custom.min.js copialos en donde se indica.
* 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.
Algo a comentar, el paquete de jQuery-ui tiene dentro de la carpeta themes (miapp/public/css/themes) dos carpetas que son base y ui-lightness, puedes usar el archivo ui.all.js de la carpeta base o de la carpeta ui-lightness.
<head>
<?php
/* El theme que coloquen en la siguiente linea dependera de cual hayan elegido al bajar el plugin*/
echo stylesheet_link_tag('themes/base/ui.all');
echo stylesheet_link_tags();
echo javascript_include_tag('jquery/jquery-1.4.2.min');
echo javascript_include_tag('jquery/ui/jquery.ui.core');
echo javascript_include_tag('jquery/ui/jquery.ui.datepicker');
?>
</head>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
<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>
Otra versión del partial para que acepte el id del datapicker como parámetro.
<script type="text/javascript">
$(function() {
//donde datepicker es el ID del input que se asociara al componente datapicker
$("<?php echo join(',',$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>Usando el Partial anterior
En una vista que tengamos podemos usar el partial anterior de esta forma
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');Y ahora usando el partial con parámetro y escrito de la forma correcta usando los helpers de kumbia:
<?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, array('datepicker' => array('#infobasica_fechanac', '#field2')));
// con el array('#infobasica_fechanac', '#field2') estamos enviando dos id de dos campos diferentes que requieren usar del datepicker (Mejora realizada por cachi)
?>
Como podemos ver es muy fácil tener una aplicación con componetes dinámicos agradables, rápidos y personalizables. Del mismo modo que se agrego este datapicker se puede hacer con los otros componentes que incluye JQuery UI. Solo es cuestión de subirlos a los directorios indicados, incluirlos apropiadamente en nuestros templates, crear un partial e incluirlo en la vista que lo requiera.
