Diferencia entre revisiones de «JQuery UI en Kumbiaphp Spirit»

De KumbiaPHP Framework Wiki
(JQuery UI en Kumbiaphp Spirit)
 
 
(No se muestran 24 ediciones intermedias de 6 usuarios)
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 37: Línea 41:
 
Por defecto Kumbiaphp trae un template llamado default.phtml si no hemos creado uno nosotro usaremos este para trabajar.
 
Por defecto Kumbiaphp trae un template llamado default.phtml si no hemos creado uno nosotro usaremos este para trabajar.
  
−
<source lang=php line>
+
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>
 
<head>
 
<head>
 
<?php
 
<?php
−
echo stylesheet_link_tag('themes/flicks/ui.all');
+
        /* 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 stylesheet_link_tags();
 
   
 
   
−
echo javascript_include_tag('jquery-1.3.2');
+
echo javascript_include_tag('jquery/jquery-1.4.2.min');
−
echo javascript_include_tag('ui/ui.core');
+
echo javascript_include_tag('jquery/ui/jquery.ui.core');
−
echo javascript_include_tag('ui/ui.datepicker');
+
echo javascript_include_tag('jquery/ui/jquery.ui.datepicker');
 
   
 
   
 
?>   
 
?>   
Línea 54: 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 63: Línea 74:
 
//Aqui damos los parametros que requiera el componente  
 
//Aqui damos los parametros que requiera el componente  
 
altFormat: 'DD, d MM, yy', //el formato
 
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 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
 
changeMonth: true, //afirmamos que se pueda cambiar de mes
 
changeYear: true}); //afirmamos que se pueda cambiar de año
 
changeYear: true}); //afirmamos que se pueda cambiar de año
Línea 71: 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 81: Línea 113:
 
//finalmente incluimos el partial
 
//finalmente incluimos el partial
 
View::partial('datapicker_alter');
 
View::partial('datapicker_alter');
 +
?>
 +
</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:
 +
<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, 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)
 +
 +
?>
 
</source>
 
</source>
  
 
[[Archivo: Datapicker-jqueryui.jpg]]
 
[[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.
+
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:Partials]]
 +
[[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»