Diferencia entre revisiones de «JQuery UI en Kumbiaphp Spirit»

De KumbiaPHP Framework Wiki
 
(No se muestran 10 ediciones intermedias de otro usuario)
Línea 1: Línea 1:
 +
{{cleanupbox
 +
|image=[[Archivo:Information_icon4.png|45px]]
 +
|texto ='''Este Artículo cumple con todos los quererimientos de los Kumbieros.'''<br />
 +
}}
 +
 
== JQuery UI ==
 
== JQuery UI ==
  
Línea 8: Línea 13:
 
== Descargando Jquery UI ==
 
== 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)
+
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. 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 con el tema Flick y el UI Core."
+
"Para este tutorial incluiremos un Datapicker del UI Core."
  
 
En los archivos descargados encontramos 3 directorios:
 
En los archivos descargados encontramos 3 directorios:
Línea 17: Línea 22:
 
     * development-bundle (Demos y librerias necesarias para implementar)
 
     * development-bundle (Demos y librerias necesarias para implementar)
 
     * css (Themes)
 
     * css (Themes)
−
 
  
 
== Subiendo Jquery UI a Kumbiaphp ==
 
== Subiendo Jquery UI a Kumbiaphp ==
 
En nuestra App de kumbiaphp debemos subir los archivos necesarios para ejecutar el datapicker
 
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/ui a -> miapp/public/javascript
Línea 26: Línea 32:
 
     * Si por alguna razon no tenemos JQuery en nuestra app de Kumbia debemos subir esta libreria a
 
     * Si por alguna razon no tenemos JQuery en nuestra app de Kumbia debemos subir esta libreria a
 
  -> miapp/public/javascript
 
  -> miapp/public/javascript
−
 
−
 
  
 
== Incluyendo librerias de JQuery UI a Kumbiaphp ==
 
== Incluyendo librerias de JQuery UI a Kumbiaphp ==
Línea 38: Línea 42:
  
 
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'''.
 
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/
  
 
<source lang=php>
 
<source lang=php>
Línea 57: Línea 65:
  
  
−
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
+
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
  
 
<source lang=javascript>
 
<source lang=javascript>
Línea 94: Línea 102:
 
== Usando el Partial anterior ==
 
== Usando el Partial anterior ==
  
−
En una vista que tengamos podemos usar el partial anterior de esta forma
+
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:
 
<source lang=php line>
 
<source lang=php line>
 +
<?php
 
echo "<span class='label'>Date:</span>";
 
echo "<span class='label'>Date:</span>";
 
echo text_field_tag('name: user.fnac','id: datepicker');
 
echo text_field_tag('name: user.fnac','id: datepicker');
Línea 104: Línea 113:
 
//finalmente incluimos el partial
 
//finalmente incluimos el partial
 
View::partial('datapicker_alter');
 
View::partial('datapicker_alter');
 +
?>
 
</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:
Línea 127: Línea 139:
  
 
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.
 
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.
 +
 +
== Descarga ==
 +
 +
Descarga: [http://dl.dropbox.com/u/2807704/kumbiaPHP/v1_b1/app_calendario_jquery.zip app_calendario_jquery] para el '''core''' de la version 1.0 Spirit del '''beta1'''.
 +
 +
Esta practica ha sido probada en un Windows XP con XAMPP-1.7.1 como en Linux con LAMPP-1.7.1
  
 
[[Categoría:Tutoriales KumbiaPHP]]
 
[[Categoría:Tutoriales KumbiaPHP]]
 
[[Categoría:Partials]]
 
[[Categoría:Partials]]
 
[[Categoría:jQuery]]
 
[[Categoría:jQuery]]

Revisión actual del 19:31 7 ago 2010

{{#if:Information icon4.png |}}

{{#if:

|}}
Information icon4.pngEste Artículo cumple con todos los quererimientos de los Kumbieros.
 {{{imageright}}}



JQuery UI[editar]

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[editar]

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[editar]

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[editar]

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[editar]

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[editar]

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)

?>

Datapicker-jqueryui.jpg

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.

Descarga[editar]

Descarga: app_calendario_jquery para el core de la version 1.0 Spirit del beta1.

Esta practica ha sido probada en un Windows XP con XAMPP-1.7.1 como en Linux con LAMPP-1.7.1

Obtenido de «https://wiki.kumbiaphp.com/index.php?title=JQuery_UI_en_Kumbiaphp_Spirit&oldid=2901»