En gambas3, tenemos un control llamado WebView (se muestra cuando tengamos activado el componente gb.qt4.webkit), que nos permite mostrar páginas web.
Por ejemplo:
WebView1.Url ="https://www.gambas-es.org/"
nos muestra la página web del foro de gambas en español:
Además de mostrar páginas web, también es capaz de ejecutar javascript.
Aprovechando esto, podemos crear programas que usen librerias javascript escritas y gambas3.
Ejemplo:
En el siguiente programa vamos a realizar una gráficas en el control WebViw, usando para ellos la librerías de javascript Chart.js ( http://www.chartjs.org/ ) y Chart.js.legent ( https://github.com/bebraw/Chart.js.legend )
Gambas3 va a generar los datos (el resultado una consulta a una base de dato Sqlite3) e insertarlos y una pagina web que mostraremos en el control WebView. La página web procesa los datos con la librería de Chart.js y Chart.js.legent , y finalmente los muestra.
La vista del proyecto seria la siguiente:
Librerias de javascript
Como veis se han añadido todos los archivos javascript de la libreria (los .js) para que no sea necesario estar conectado a internet cuando se muestre la página web.
Plantilla: barra.html
Tenemos el archivo "barra.html", que lo usamos como plantilla, y es el que cargaremos en el WebView. Este archivo tiene unos campos "#meses","#datos1","#titulo1", "#datos2", "#titulo2", "#datos3", "#titulo3" que el programa se encarga de sustituir con los datos de la consulta.
Por otro lado también tenemos el archivo "datos" que es una base de datos SQLite3, que nos sirve para hacer la consulta sobre ella y obtener los datos.
Inicialmente el programa realiza una copia de las librerías, base de datos y plantilla al directorio del usuario: User.home & "/.ChartJS/trabajo2". Luego se conecta a la base de datos y realiza la consulta, modificando la plantilla "barra.html" y finalmente muestra los datos.
A continuación, el código fuente de gambas:
Codigo del programa en gambas3
Fmain
-
-
ModuleComun:
-
-
Código de la plantilla "barra.html"
-
-
Captura de pantalla ejecutándose el programa:
Enlace de Descarga del ejemplo completo: alojado en box.com
Fuentes:
http://jsbsan.blogspot.com.es/2014/02/usando-javascript-en-gambas3-creacion.html
Otro ejemplo realizado por Shordi en www.gambas-es.org: Ejemplo De Gráficos De Tarta, Donut Y Barras Utilizando La Librería JsChart A Partir De Una Tabla O Consulta.
http://www.gambas-es.org/viewtopic.php?f=5&t=3665&start=0
https://github.com/nnnick/Chart.js
https://github.com/bebraw/Chart.js.legend/
No hay comentarios:
Publicar un comentario