Las funcionalidades de la librería jQueryUI
09/05/2018

Las funcionalidades de la librería jQueryUI

Desarrollo de apps

Cuando decidimos construir una aplicación móvil sin tener que recurrir a lenguajes nativos varias alternativas se nos presentan delante de nosotros, pero sin duda la más habitual es optar por los lenguajes web: son fáciles de aprender y aun así logran tener la suficiente profundidad como para crear productos complejos y obtener resultados para todo tipo de perfiles. Una de las opciones para los estilos y efectos que tenemos para elegir es jQueryUI, una librería JavaScript muy usada y que hoy vamos a ver algunas demos muy chulas para poder implementar en nuestro código. Como nota, en este post vamos a tratar aspectos un poco técnicos ya que hablaremos del código propuesto en la documentación.

Efectos útiles con jQueryUI para nuestras aplicaciones

Antes de ponernos a trabajar con jquery debemos comprender como añadir esta librería a nuestro proyecto. Al igual que ocurre con bootstrap, tenemos dos opciones para ello: descargar y hacer referencia a la copia local, o referenciarla en su versión online. Dado que los ejemplos hacen uso de la segunda alternativa, voy a explicar cómo hacerlo. Recordemos que jQuery no deja de ser un script JavaScript alojado en algún lado del servidor, local o remoto, por lo que vamos a seguir las mismas pautas para añadirla. Si hacemos memoria se trata de usar la etiqueta script de HTML dentro del head del siguiente modo:

<head>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

Únicamente añadiendo esto en nuestro fichero html será suficiente para activar jquery y poder hacer uso de las siguientes demos que os voy a mostrar. Empezaremos con resizable, un cuadro para escribir texto el cual podremos redimensionar a nuestro antojo. Este tipo de cuadros son muy comunes en formularios en los que necesitamos que el usuario ponga algún tipo de valoración. Los podemos encontrar en páginas web o aplicaciones móviles y son muy útiles. Para hacer uso de ello, debemos inicializar un id y hacer referencia a la función con el mismo nombre, dentro del head en una etiqueta script del siguiente modo:

<script>

  $( function() {

    $( "#resizable" ).resizable();

  } );

  </script>

El identificador es la palabra que va justo después del símbolo almohadilla. Seguidamente, en el body del documento html debemos crear un contenedor al cual asignaremos el id mencionado.

<div id="resizable" class="ui-widget-content">

  <h3 class="ui-widget-header">Resizable</h3>

</div>

En este enlace podréis ver el resultado final.

Antes de seguir, hagamos algunas observaciones. Podemos comprobar que, efectivamente, es sencillo de implementar, y es que debemos recordar que las librerías están para hacernos la vida más sencilla. Podríamos conseguir el mismo efecto creando desde cero el código JavaScript, pero una vez tenemos conocimiento del lenguaje, yo os recomiendo que busquéis frameworks, librerías u otras herramientas que aceleren el desarrollo de un producto, ya que en el mundo real, fuera de las prácticas, el cliente desea obtener resultados cuanto antes, ya sea un tercero o vosotros mismos, de modo que, habiendo herramientas bien documentadas, no les tengáis miedo.

Bien, dicho esto, sigamos con la siguiente demo, selectable. En este caso tenemos un trozo de código que nos va a servir para mostrar visualmente una selección de elementos realizada por el usuario. Esto nos puede ir muy bien si pretendemos mostrar, por ejemplo, algún tipo de oferta para nuestro cliente y que esté limitado a escoger solo una.  Una vez más, vamos a introducir el código en el head, dentro de una etiqueta script, declarando un id para luego referenciarlo en la estructura html. ¿Dónde? Antes hemos usado un contenedor div, esta vez necesitamos un listado de elementos, y la etiqueta para las listas es ol/ul, junto a sus elementos, li. Podéis ver el código en el siguiente enlace, y esta vez añadimos el complemento de definir unos estilos visuales con la etiqueta style. Esto nos demuestra que no estamos limitados a los parámetros que ofrece jQueryUI, si no que es totalmente personalizable.

Y ya que hablamos de listados, y anteriormente de formularios, hay otro elemento clave que le va a dar opciones de selección al usuario: los radio buttons y los checkbox. Examinemos primero el código en este enlace. Observaremos que hay una ligera diferencia con lo visto anteriormente en el post, y es que resulta que ahora no definimos un identificador con el símbolo de almohadilla. Esto es así ya que usaremos el elemento “input” original de nuestro HTML, el cual no se puede aplicar estilos directamente. Digamos que es algo que escapa nuestro control y debemos confíar en jQuery. Pero el resultado es muy bueno, dando un aspecto mucho más bonito que dejar sin estilos los input.

Evidentemente hay muchas más posibilidades con esta librería, y desde luego investigar la documentación de la API sería trabajo para un artículo entero, más que un post. Pero lo que más me interesaba mostraros es que JavaScript puede extenderse mucho más allá que utilizar lógica compleja y ser un gran aliado para realizar interfaces más llamativas y preparadas para interactuar con el usuario. Os animo a todos a probar todas las demos y tratar de implementarlas en vuestros proyectos web, ya sea en el curso como por pura diversión!

Curso relacionado: Curso Superior de Desarrollo de Aplicaciones para Móviles

Comparte en:

Grado Superior de Desarrollo de Aplicaciones informáticas en la Salle de Barcelona. Trabaja actualmente como desarrollador de aplicaciones para móviles, especialidad en videojuegos.

El auge de la tecnología beacon en las apps
25/03/2020
Jordi Mula

El auge de la tecnología beacon en las apps

El posicionamiento, la ubicación y la geolocalización son elementos cada vez más integrados en el desarrollo de aplicaciones. La geolocalización en exterior es un ...

¿Qué debe aportar el cliente para desarrollar una app?
27/02/2020
Jordi Mula

¿Qué debe aportar el cliente para desarrollar una app?

En muchas ocasiones el cliente por desconocimiento no sabe qué datos o elementos debe proporcionarnos para poder generar ese plan de asesoramiento inicial, vamos a ve...

Que es una game jam y que se puede esperar de una sesión
13/02/2020
Jordi Mula

Que es una game jam y que se puede esperar de una sesión

El mes pasado fue la Global Game Jam, y con motivo de este evento internacional que se da lugar en diferentes países y en diferentes sedes, vamos a hablar un poco sob...