Programando con Rupert

Cuando la programación es una forma vida...

Month: mayo 2014 (page 1 of 2)

JQuery UI: Datepicker con idioma personalizado

En el artículo de Introducción a JQuery UI que escribí, vimos cómo aplicar un selector de fecha a un input de tipo texto. Pero en el bundle de JQuery UI no viene incorporado el idioma español. Así que si queremos utilizar el datepicker con un idioma en concreto, deberemos tener un código javascript por cada uno que necesitemos.

En este artículo voy a configurarlo para que aparezca según el idioma español. Para eso, voy a crear un fichero llamado datepicker-es.js, que tendrá el siguiente código:

Si no queréis que sea el idioma por defecto, sólo tenéis que eliminar/comentar la instrucción .setDefaults() .

De tal manera que si ahora referenciamos desde nuestra página a este fichero datepicker-es.js, y tenemos el siguiente código HTML…

Al ejecutar mostrará un selector parecido a este:

Con esto ya hemos visto cómo podemos aplicar un idioma personalizado a nuestro datepicker.

¡Hasta la próxima!

Rupert.

JQuery UI: Cuadro de Diálogo

En el artículo anterior escribí sobre algunos de los controles que nos aporta JQuery UI. En este artículo voy a escribir sobre una funcionalidad que, en mi opinión, es de las más importantes a la hora de trabajar con formularios: El cuadro de diálogo.

Mediante este cuadro de diáologo, no sólo podremos mostrar mensajes simples o preguntas de confirmación, si no que además podremos establecer formularios completos, con la ventaja que eso supone de cara al dinamismo de nuestra página.

Lo que voy a hacer en este tutorial es, basándome en el tutorial de Introducción a JQuery UI, añadir un mensaje de confirmación al botón de Insertar.

El código, tal y como había quedado en el tutorial anterior es el siguiente:

Teniendo en cuenta el código, comenzamos a trabajar con el cuadro de diálogo. La primera parte es diseñar el cuadro de diálogo en un div oculto, sin los botones del cuadro diálogo. En este ejemplo preguntaremos “¿Está seguro de que desea registrar el candidato?” Y un mensaje más pequeño. Los botones serán “” y “No“, aunque en esta primera parte no se incluyen.

Una vez tengamos el HTML, sólo queda el código JQuery. En una función Registrar, que se llama desde el evento “onclick” del botón, crearemos el cuadro de diálogo mediante el método .dialog().

Las opciones que hemos utilizado son las siguientes:

  • modal: Indica al cuadro de diálogo si tiene que bloquear la página para que no se pueda utilizar mientras el diálogo está abierto
  • title: Título de la ventana de diálogo
  • width: Anchura de la ventana de diálogo
  • resizable: Indica si el tamaño del cuadro de diálogo es alterable
  • show: Permite establecer un efecto y una duración a la hora de mostrar el cuadro de diálogo
  • hide: Permite establecer un efecto y una duración a la hora de mostrar el cuadro de diálogo
  • buttons: Establece una colección de botones indicando el texto y la función que ejecutarán.

Una vez que se han establecido esas opciones, si se ha de cerrar y abrir el diálogo de nuevo, se puede hacer mediante .dialog(“close”) y .dialog(“open”).

Con esto ya hemos visto la funcionalidad del cuadro de diálogo y el nivel de comunicación con el usuario que esto aporta a nuestras páginas.

¡Hasta la próxima!

Rupert.

Introducción a JQuery UI

Ya hemos visto algunas de las funcionalidades más importantes JQuery. En este artículo voy a exponer algunas de las peculiaridades del proyecto JQuery UI (User Interface). Para lo cual necesitaremos, además de la librería JQuery, un archivo .css con los estilos y la propia librería de JQueryUI.

Podemos descargar la librería JQueryUI de jqueryui.com

De tal manera que las cabeceras quedarían de esta manera:

JQuery UI

JQueryUI es un proyecto de JQuery cuyo objetivo es factilitarnos la vida a la hora de tener que trabajar con la interfaz de usuario. Como he dicho en algún artículo, uno de los problemas principales del Modelo Web “Clásico” es la poca comunicación con el usuario. Por lo tanto JQuery nos va a permitir crear cuadros de diálogo, barras de progreso, selectores de fecha…

Añadiendo JQuery UI a un formulario

Para este ejemplo vamos a tomar este formulario como base y lo vamos a ir modificando. Vamos a suponer un formulario en el cual podemos registrar un candidato para un puesto de trabajo.

Vamos a modificar lo siguiente en este formulario:

  • Añadiremos un tooltip al campo “Fecha de Nacimiento” para especificar el formato que queremos.
  • Añadiremos un selector de fecha al campo “Fecha de Nacimiento
  • Añadiremos un autocompletado al campo “Lenguajes
  • Añadiremos un slider al rango de “Sueldo solicitado

JQuery UI: Tooltip

El tooltip permite explicar el significado de un elemento cuando el usuario se sitúe en dicho elemento. Lo que vamos a hacer ahora es especificar un tooltip al campo “Fecha de Nacimiento“.

Para ello, es necesario especificar qué parte del documento HTML puede funcionar con tooltips:

$(document).tooltip();

A partir de aquí sólo es necesario establecer el atributo “title” en los elementos en los que queramos que aparezca el tooltip:

<input type=”text” name=”fnacimiento” id=”fnacimiento” title=”El formado de la fecha ha ser dd/MM/yy”>

El resultado sería, al pasar el ratón por encima del campo, algo parecido a esto:

JQuery UI: Datepicker

El datepicker permite establecer un selector de fecha en un campo de texto. En nuestro caso vamos a establecer un datepicker al campo “Fecha de Nacimiento“, indicándole el formato de la fecha que buscamos.

$(“#fnacimiento”).datepicker({
dateFormat: ‘dd/mm/yy’
});

Al situar el foco en el campo, aparecerá un selector de fecha:

JQuery UI: Autocomplete

El autocomplete permite que un campo sugiera opciones a la hora de escribir sobre él. El autocomplete admite una opción llamada “source” que recibe una colección de elementos en JSON. En este caso crearemos las opciones a mano, pero se podrían recuperar mediante AJAX.

var lenguajes=[
“Java”,
“PHP”,
“C# .NET”,
“C++”,
“Visual Basic”
];
$(“#lenguajes”).autocomplete({
source: lenguajes
});

Al empezar a escribir sobre el campo “lenguajes“, debería empezar a sugerirnos los Lenguajes que contengan el texto escrito

JQuery UI: Slider

Con el Slider podemos establecer valores numéricos mediante una barra. Puede tener un único valor o gestionar un rango. En nuestro caso vamos a gestionar un rango, el de los campos de Sueldo. Para ello, lo primero que hemos de hacer es crear un <div> en el lugar donde esté ubicado el slider.

<p>
<label>Sueldo Solicitado:</label>
Min:
<input type=”text” name=”sueldoMin” id=”sueldoMin”>
&nbsp;&nbsp;Max:
<input type=”text” name=”sueldoMax” id=”sueldoMax”>
<div id=”rango”></div>
</p>

Una vez tengamos el div correspondiente, se ha de establecer que será un rango y qué se debe hacer cuando se modifiquen los valores. En nuestro caso, cambiarán los valores de “sueldoMin” y “sueldoMax

$(“#rango”).slider({
range: true,
min:600,
max:3000,
values: [800,1200],
slide: function(event,ui){
$(“#sueldoMin”).val(ui.values[0]);
$(“#sueldoMax”).val(ui.values[1]);
}
});

Con esto ya hemos visto para qué nos puede servir JQuery UI. Como habéis podido comprobar, se trata de un proyecto orientado a la interfaz de usuario. El código completo sería este:

En la propia documentación de JQuery UI podréis ampliar lo que hemos visto aquí y ver más opciones de uso.

¡Hasta la próxima!

Rupert.

JQuery y AJAX

En los artículos anteriores escribí sobre la metodología AJAX y la manera que tenemos de implementarla por medio de Javascript. Pero como ya vimos, el trabajo de esta manera es tedioso.

En este artículo vermos algunos de los métodos de JQuery más importantes a la hora de recuperar datos por medio de AJAX.

Método $.ajax()

Este es el método más completo a la hora de realizar una petición por AJAX de cualquier tipo. Lo que hace este script es llamar a la página “detalleProducto.php” enviándole como parámetro un “id”. El resultado de la página se mete en un div llamado “fichaProducto“.

Algunos de los atributos más importantes de este método son:

  • url – URL a la que se llamará
  • type – Método HTTP de la petición
  • data – Parámetros de la petición. Independientemente del método HTTP se envían en formato QueryString (“par1=val1&par2=val2”)
  • beforeSend – Función donde se especifica qué hacer antes de enviar la petición. Por si se necesitan modificar cabeceras.
  • success – Función donde se especifica qué hacer si la respuesta del servidor ha sido positiva
  • error – Función donde se especifica qué hacer si la respuesta del servidor ha sido negativa
  • complete – Función donde se especifica qué hacer independientemente del resultado de la petición
  • dataType – Especifica el tipo de datos con el que se van a trabajar (XML, json…)

Métodos $.get() y $.post()

Estos métodos permiten realizar una llamado por GET o por POST. Este método es algo más limitado en cuanto a opciones que el anterior, ya que como parámetros, sólo se especifican la URL, los parámetros de la petición, el callback si la petición ha sido correcta y el tipo de dato a manejar. Este script hace exactamente lo mismo que el ejemplo anterior: llamar a la página “detalleProducto.php” enviándole como parámetro un “id“. El resultado de la página se mete en un div llamado “fichaProducto“.

Método .load()

Este método permite recuperar por AJAX el resultado JSON de una url. Los parámetros que acepta son la URL, los parámetros de la petición y el callback si la petición ha sido correcta. Este script llama a la url “/productos/listar” y los datos de productos que ha recibido los utiliza para incluirlos como elementos de un <ul>.

Con esto ya hemos visto algunos de los métodos más importantes de JQuery para realizar llamadas por AJAX.

¡Hasta la próxima!

Rupert.

Motor de AJAX – AJAX Parte II

En el artículo anterior expuse una introducción a lo que se va a conseguir si implantamos AJAX en nuestras aplicaciones. Resumiendo, lo que vamos a conseguir es combinar la funcionalidad del servidor con la potencia de JavaScript a la hora de modificar el documento HTML.

Lo que voy a hacer en este capítulo es explicar cómo crear el Motor AJAX por medio de JavaScript. Efectivamente, los frameworks actuales de Javascript como JQuery o Dojo, ya lo tienen implementado en sus funciones de AJAX, pero siempre está bien conocer “el interior” de estos métodos.

Para este artículo propondré dos ejemplos, uno de ellos cargará por medio de AJAX una página en una etiqueta div. El otro generará un desplegable dinámicamente según un XML devuelto desde el servidor.

IMPORTANTE: Para trabajar con AJAX, es necesario un servidor que acepte peticiones HTTP (Apache, Apache Tomcat, IIS…)

Cargar el contenido de una página

En este ejemplo vamos a tener una página principal con dos botones y una etiqueta <div>. Además tendremos otras dos páginas llamadas Contenido1.html y Contenido2.html que tendrán un contenido diferente. Al hacer click en uno de los botones el Motor AJAX solicitará la página de contenido correspondiente y la cargará en el div.

contenido1.html

Esta página únicamente contendrá un contenido HTML

contenido2.html

Esta página únicamente contendrá un contenido HTML diferente a contenido1.html

index.html

Esta página contendrá dos botones (“Cargar Contenido 1” y “Cargar Contenido 2“) y una capa <div>. Dependiendo del botón que se pulse, el Motor AJAX solicitará al servidor la página correspondiente y cargará la respuesta en la capa.

La parte HTML de la página tendría entonces este aspecto:

Como vemos, los dos botones llaman a una misma función que crearemos ahora en la sección de script. Crearemos una función llamada MotorAJAX que recibirá una url por parámetro.

Vamos a explicar el código que acabamos de escribir. Tenemos que tener en cuenta que el núcleo del Motor de AJAX es el objeto de tipo XMLHttpRequest que, dependiendo del navegador, se iniciará como un ActiveXObject.

Una vez creada la petición, se abre la petición mediante el método open(), pasándole la url, el método HTTP y se le indica si la llamada es asíncrona. Por último se envía la petición mediante el método send().

Al ser una tarea asíncrona, hemos de tener en cuenta que la respuesta la recogeremos por medio de un Callback, es decir, una función que se encargue de manejar la respuesta cuando llegue. Para ello, el objeto XMLHttpRequest pasará por cuatro estados (readyState):

  1. El objeto se ha abierto (open) pero no se ha enviado (send)
  2. El objeto se ha enviado (send)
  3. Se está procesando la petición
  4. Respuesta recibida

El que suele interesar tratar es el estado 4. Por eso, antes de abrir la petición establecemos el evento onreadystatechange.

Por último cargamos la propiedad responseText en la capa “contenido”.

Cargar datos de un XML

En este ejemplo no vamos a cargar el contenido de una página, si no que lo que vamos a hacer es leer datos de un XML. Tendremos por un lado un archivo xml con datos y por otro una página con una etiqueta <select>.

cargaXML.html

Esta página únicamente tendrá un desplegable que cargará los datos de lenguajes.xml por medio de AJAX, por lo que el código del Motor AJAX, será muy parecido al anterior. Con una diferencia, en vez de recuperar “responseText“, recuperaremos “responseXML

Con estos dos ejemplos ya hemos visto cómo funciona el motor de AJAX, aunque, como he dicho, los frameworks de Javascript existentes ya tienen este motor integrado, pero siempre nos dejarán acceder al objeto XMLHttpRequest, por lo que conocerlo nos facilitará mucho las cosas.

¡Hasta la próxima!

Rupert.

Entradas anteriores

© 2019 Programando con Rupert

Sé cambiar el Footer, pero me apetece decir que este tema es de Anders NorenParriba' ↑