Diferencia entre revisiones de «JQuery UI en Kumbiaphp Spirit»

De KumbiaPHP Framework Wiki
Línea 121: Línea 121:
  
 
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.
 
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]]

Revisión del 23:20 15 oct 2009

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

   * 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.

<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>

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 $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, 'datepicker: busqueda_fecha'); 
?>

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.