Diferencia entre revisiones de «JQuery UI en Kumbiaphp Spirit»
| Línea 110: | Línea 110: | ||
?> | ?> | ||
</source> | </source> | ||
| + | |||
| + | En esta practica no indicamos un Controller y un Modelo, pero es de saberse que el Controller siempre tiene que existir, de haberse olvidado crear el archivo del controller el mismo Framework advertira en una pagina de aviso e indicara el codigo que se debe crear para ello (home_controller), un Modelo no es necesario para este ejercicio en vista de que no hacemos ningun uso hacia una base de datos para este caso. | ||
Y ahora usando el partial con parámetro y escrito de la forma correcta usando los helpers de kumbia: | Y ahora usando el partial con parámetro y escrito de la forma correcta usando los helpers de kumbia: | ||
Revisión del 19:35 12 jun 2010
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. Para la fecha y para esta practica hemos descargado la version de jquery-ui 1.8.2, el paquete a descargar se llama jquery-ui-1.8.2.custom.zip, descomprime su contenido en otra carpeta y posterior a esto pasaremos los archivos a donde deben estar en KumbiaPHP Framework para su correcto funcionamiento.
"Para este tutorial incluiremos un Datapicker del 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.
Vamos a crear una carpeta llamada jquery en miapp/public/javascript para colocar de forma ordenada los archivos .js de jquery quedando de esta forma:
miapp/public/javascript/jquery/
<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, quedando algo asi miapp/views/partials/datapicker_alter.phtml
<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. Para esta practica crea en la carpeta /views/ una carpeta llamada "home" y una vista llamada index.phtml, quedando de esta forma: miapp/views/home/index.phtml y coloca el siguiente codigo en esta vista:
<?php
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');
?>En esta practica no indicamos un Controller y un Modelo, pero es de saberse que el Controller siempre tiene que existir, de haberse olvidado crear el archivo del controller el mismo Framework advertira en una pagina de aviso e indicara el codigo que se debe crear para ello (home_controller), un Modelo no es necesario para este ejercicio en vista de que no hacemos ningun uso hacia una base de datos para este caso.
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.
