La librería jQuery es una librería javascript que simplifica el uso del código javascript en multitud de operaciones con los documentos HTML.

Una de las operaciones más potentes es la gestión del DOM (modelo de objetos del documento) para la selección y manipulación de cualquier elemento del documento HTML.

Para gestionar el DOM de un documento HTML en Velneo no tenemos más remedio que usar el Control Visor HTML que cargará el código HTML y la librería jQuery.


Para el diseño de este ejercicio nos basaremos en una petición del foro de Ramón Denuc en la que solicitaba cómo Obtener el contenido de un campo desde una web.

Hay que descargar la página web http://www.auto-data.net/es/?f=showCar&car_id=27369 y obtener la lista de valores que contiene una tabla de la página.


La librería jQuery necesita acceder al DOM de la página HTML, por lo tanto ésta debe estar bien construida para que sea posible navegar por los elementos del DOM.

También necesitamos conocer qué estamos buscando. En este caso viendo el código HTML de la página comprobamos que la lista de valores está contenida en un elemento table con el atributo class=carData. Por lo tanto, solo es necesario indicar a jQuery que obtenga el primer elemento table cuya clase CSS sea carData. Una vez tengamos la tabla seleccionada generamos un array JSON con las filas tr de la tabla. De cada fila tr obtendremos las columnas td correspondientes al nombre de la característica del vehículo y a su valor. El Visor HTML devolverá el array JSON al formualrio de Velneo a través del evento Link clicked y ya solo es necesario volcarlo a una tabla, en este caso una tabla en memoria.


Para la ejecución del ejercicio necesitamos:

oUna tabla en memoria PARSEO_HTML con 2 campos NAME y DATO. El primero contendrá el nombre de la característica del vehículo y el segundo su valor.

oUn formulario contenedor con los siguientes controles:

1.Control Listbox con una lista predeterminada de URL's de la forma http://www.auto-data.net/es/?f=showCar&car_id=xxxxx.

2.Control Visor HTML que ejecuta el parseo del código HTML descargado desde la URL seleccionada en el Listbox.
Este control no es visible porque solo lo utilizamos para generar el JSON con la lista de valores parseados desde el HTML.

3.Control Rejilla que muestra la tabla temporal una vez se han guardado los valores pasados en el JSON.


El funcionamiento es el siguiente:

oSeleccionamos una URL de la lista

oSe descarga el código HTML desde la URL seleccionada y se guarda en un fichero de la caché

oEl Visor HTML contiene una plantilla de código html/javascript que se encarga de:

1.mediante la librería jQuery, carga el código HTML desde la caché y parsea el elemento table cuyo atributo class=carData

2.con funciones de jQuery recorremos la tabla y generamos el array JSON con las parejas de características/valores

3.envia un evento Link clicked al formulario de Velneo pasando el JSON a través de la variable EVENT_PARAMS[1]

oUn manejador del formulario parsea el JSON recibido desde el Visor HTML y guarda las  parejas de características/valores en una tabla temporal

oSe muestran los datos en la Rejilla



Created with the Personal Edition of HelpNDoc: Free Web Help generator