https://wiki.kumbiaphp.com/api.php?action=feedcontributions&user=200.42.99.13&feedformat=atomKumbiaPHP Framework Wiki - Contribuciones del usuario [es]2024-03-28T21:40:05ZContribuciones del usuarioMediaWiki 1.34.1https://wiki.kumbiaphp.com/index.php?title=JQuery_UI_en_Kumbiaphp_Spirit&diff=2123JQuery UI en Kumbiaphp Spirit2009-10-15T21:20:34Z<p>200.42.99.13: </p>
<hr />
<div>== JQuery UI ==<br />
<br />
[http://jqueryui.com/ 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.<br />
<br />
Podemos ver [http://jqueryui.com/demos/ demos] y [http://jqueryui.com/themeroller/ 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.<br />
<br />
<br />
== Descargando Jquery UI ==<br />
<br />
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)<br />
<br />
"Para este tutorial incluiremos un Datapicker con el tema Flick y el UI Core."<br />
<br />
En los archivos descargados encontramos 3 directorios:<br />
<br />
* js (libreria Jquery)<br />
* development-bundle (Demos y librerias necesarias para implementar)<br />
* css (Themes)<br />
<br />
<br />
== Subiendo Jquery UI a Kumbiaphp ==<br />
En nuestra App de kumbiaphp debemos subir los archivos necesarios para ejecutar el datapicker<br />
<br />
* Subir el directorio development-bundle/ui a -> miapp/public/javascript<br />
* Subir el directorio development-bundle/themes a-> miapp/public/css<br />
* Si por alguna razon no tenemos JQuery en nuestra app de Kumbia debemos subir esta libreria a<br />
-> miapp/public/javascript<br />
<br />
<br />
<br />
== Incluyendo librerias de JQuery UI a Kumbiaphp ==<br />
<br />
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.<br />
<br />
Si lo hacemos asi debemos trabajar en el template que se encuentra en miapp/views/templates/mitemplate.phtml o uno que nosotros hallamos creado.<br />
<br />
Por defecto Kumbiaphp trae un template llamado default.phtml si no hemos creado uno nosotro usaremos este para trabajar.<br />
<br />
<source lang=php line><br />
<head><br />
<?php <br />
echo stylesheet_link_tag('themes/flicks/ui.all');<br />
echo stylesheet_link_tags();<br />
<br />
echo javascript_include_tag('jquery-1.3.2');<br />
echo javascript_include_tag('ui/ui.core');<br />
echo javascript_include_tag('ui/ui.datepicker');<br />
<br />
?> <br />
</head><br />
</source><br />
<br />
== Partial para el Datepicker ==<br />
<br />
<br />
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<br />
<br />
<source lang=javascript><br />
<script type="text/javascript"><br />
$(function() {<br />
//donde datepicker es el ID del input que se asociara al componente datapicker<br />
$("#datepicker").datepicker({<br />
//Aqui damos los parametros que requiera el componente <br />
altFormat: 'DD, d MM, yy', //el formato<br />
changeMonth: true, //afirmamos que se pueda cambiar de mes<br />
changeYear: true}); //afirmamos que se pueda cambiar de año<br />
});<br />
</script><br />
</source><br />
<br />
<br />
Otra versión del partial para que acepte el id del datapicker como parámetro.<br />
<br />
<source lang=javascript><br />
<script type="text/javascript"><br />
$(function() {<br />
//donde datepicker es el ID del input que se asociara al componente datapicker<br />
$("#<?php echo $datepicker; ?>").datepicker({<br />
// Aqui damos los parametros que requiera el componente - Añadida traducción al español.<br />
dateFormat: 'dd-mm-yy',<br />
firstDay: 1,<br />
monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],<br />
monthNamesShort: ['En','Feb','Mar','Abr','May','Jun','Jul','Ag','Sep','Oct','Nov','Dic'],<br />
dayNamesMin: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],<br />
changeMonth: true, //afirmamos que se pueda cambiar de mes<br />
changeYear: true}); //afirmamos que se pueda cambiar de año<br />
});<br />
</script><br />
</source><br />
<br />
== Usando el Partial anterior ==<br />
<br />
En una vista que tengamos podemos usar el partial anterior de esta forma<br />
<source lang=php line><br />
echo "<span class='label'>Date:</span>";<br />
echo text_field_tag('name: user.fnac','id: datepicker');<br />
//con el id datepicker asociamos el componente nombrado en el partial. Si queremos <br />
//usar otro datepicker en el mismo formulario debemos colocar un id diferente en <br />
//el form y el mismo en el partial<br />
<br />
//finalmente incluimos el partial<br />
View::partial('datapicker_alter');<br />
</source><br />
<br />
Y ahora usando el partial con parámetro y escrito de la forma correcta usando los helpers de kumbia:<br />
<source lang=php line><br />
<?php<br />
// Definimos el campo<br />
echo text_field_tag('busqueda.fecha');<br />
<br />
/**<br />
* Incluimos el partial con el parametro.<br />
* <br />
* 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. <br />
**/<br />
echo View::partial('datapicker_alter', false, 'datepicker: busqueda_fecha'); <br />
?><br />
</source><br />
<br />
[[Archivo: Datapicker-jqueryui.jpg]]<br />
<br />
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.<br />
[[Categoría:jQuery]]</div>200.42.99.13https://wiki.kumbiaphp.com/index.php?title=Categor%C3%ADa:Extensions&diff=1304Categoría:Extensions2009-08-20T18:34:58Z<p>200.42.99.13: Página creada con ' Categoría:Tutoriales KumbiaPHP'</p>
<hr />
<div><br />
<br />
[[Categoría:Tutoriales KumbiaPHP]]</div>200.42.99.13https://wiki.kumbiaphp.com/index.php?title=Partials&diff=1303Partials2009-08-20T18:33:44Z<p>200.42.99.13: Blanqueada la página</p>
<hr />
<div></div>200.42.99.13https://wiki.kumbiaphp.com/index.php?title=Categor%C3%ADa:Partials&diff=1302Categoría:Partials2009-08-20T18:33:22Z<p>200.42.99.13: </p>
<hr />
<div>lugar donde se iran agregando Partials<br />
<br />
[[Categoría:Tutoriales KumbiaPHP]]</div>200.42.99.13https://wiki.kumbiaphp.com/index.php?title=Categor%C3%ADa:Partials&diff=1300Categoría:Partials2009-08-20T18:31:21Z<p>200.42.99.13: Página creada con 'lugar donde se iran agregando Partials'</p>
<hr />
<div>lugar donde se iran agregando Partials</div>200.42.99.13https://wiki.kumbiaphp.com/index.php?title=Partials&diff=1298Partials2009-08-20T18:28:58Z<p>200.42.99.13: </p>
<hr />
<div>Categoria <br />
Partials<br />
<br />
<br />
[[Categoría:Tutoriales KumbiaPHP]]</div>200.42.99.13https://wiki.kumbiaphp.com/index.php?title=Partials&diff=1292Partials2009-08-20T18:13:54Z<p>200.42.99.13: Blanqueada la página</p>
<hr />
<div></div>200.42.99.13https://wiki.kumbiaphp.com/index.php?title=Partials&diff=1289Partials2009-08-20T18:10:34Z<p>200.42.99.13: Página creada con 'prueba Categoría:Tutoriales KumbiaPHP'</p>
<hr />
<div>prueba<br />
<br />
<br />
<br />
[[Categoría:Tutoriales KumbiaPHP]]</div>200.42.99.13