Mi primer programa gráfico en Gambas

El entorno gráfico

Las prácticas anteriores mostraban aplicaciones de consola, que nos recuerda a los viejos tiempos de otros sistemas operativos o la forma de trabajar de los hackers informáticos. En realidad, hacer ese tipo de programas no demuestra el potencial de Gambas, puesto que son realmente simples e igualmente fáciles de realizar en otros lenguajes o cualquier vieja versión de BASIC.

Mi primer programa gráfico

Es mejor hacer el programa “Hola Mundo” para el entorno gráfico que inunda los escritorios de los ordenadores actuales. Para ello empezaremos igual que antes, arrancando Gambas y creando un Nuevo proyecto siguiendo exactamente los mismos pasos.

Hacemos clic en la opción Nuevo proyecto. El proyecto está formado por una serie de archivos que en Gambas están SIEMPRE situados dentro de un único directorio. En él puede haber, a gusto del desarrollador, distintos subdirectorios y organizar todo como se desee, pero cualquier gráfico, dato y código que forme parte de la aplicación estará dentro de él.

Aparece la ventana con los distintos tipos de proyectos a crear.

• Marcamos la opción Aplicación gráfica QT. Hacemos clic en el botón Siguiente.

• Seleccionamos el directorio donde se guardarán todos los ficheros necesarios para el proyecto. El sitio ideal sería dentro de nuestra carpeta Documentos. Creamos un directorio llamado BASIC y dentro de él otro directorio llamado 2MGRAFICO en el que se creará un directorio para cada uno de los proyectos que vamos a hacer. Así crearemos el directorio 2MGRAFICO y tendremosDocumentos/BASIC/2MGRAFICO. Tras esto hacemos clic en el botón Siguiente.

• Le damos el nombre "01PrimerProyGraf" y el título "Proyecto gráfico para escribir Hola Mundo" al proyecto, como pone en la imagen. Después hacemos clic en OK.

• 
  En última instancia, se muestra la pantalla que confirma la creación del proyecto. Una vez confirmados estos datos, ya no podremos efectuar cambios en nuestro proyecto, como es el nombre, directorio, etc. Hacemos clic en el botón OK.

Al acabar el proceso aparecerá de nuevo la ventana de proyecto, pero en esta ocasión tendrá una rama más en el árbol: Formularios.

Un formulario es el área donde se diseña la interfaz gráfica de la aplicación, es decir, donde se insertan objetos como botones, cuadros de texto, listas, casillas de verificación, etc. Los formularios se corresponderán con las ventanas que la aplicación mostrará.

Y recordemos para qué servían las otras ramas:

• Classes y Modules, que son para distintos tipos de archivos de código fuente.
• Data, cuyo nombre indica su finalidad, almacenar ahí los archivos de datos que la aplicación requiera.

• Hacemos clic con el botón derecho del ratón sobre el árbol del proyecto.
• Elegimos en el menú contextual: Nuevo→Formulario.

• Por simplicidad, en este caso no cambiaremos el nombre.

• Pulsamos en el botón OK.
• Hacemos clic con el botón derecho del ratón sobre el nuevo formulario y marcamos la opción Clase de inicio.
• Aparecerá en pantalla la ventana del formulario y un panel con sus propiedades.

• Vamos a mostrar algunos elementos que nos van a hacer falta. Accedemos al menú Vista→Caja de herramientas, o pulsamos directamente la tecla F6. Con esto mostraremos la caja de herramientas que contiene los elementos que podremos añadir a nuestro formulario.

Vamos a añadir ahora elementos a nuestro formulario. Nos fijamos en la Caja de herramientas. Entre los múltiples iconos que hay en ella podemos distinguir el icono del botón .

• Hacemos clic en el icono del botón .
• Dibujamos en el formulario un botón, arrastrando con el ratón y el botón izquierdo pulsado, para dar la forma que queramos.

Gambas escribe el texto Button1 sobre el botón, pero como ese texto no es demasiado intuitivo lo mejor es cambiarlo.

• Para ello hay que pinchar en el botón y después, en la ventana de propiedades, hacer un clic en la línea donde pone Text. Ahora se puede escribir el nuevo texto, por ejemplo “Púlsame”.

• Volvemos al formulario y hacemos doble clic en el botón. Se nos abrirá un documento para que podamos escribir el código fuente que queramos.

• Escribimos el código siguiente:

Con este código lo que hacemos es que cuando el usuario pulse el botón, aparezca una ventana con el mensaje "Hola mundo".

• Ejecutamos el programa. Pulsamos en el botón con el símbolo del Play , que está en la pantalla del proyecto.
• Se mostrará el formulario que hemos creado.

• Si hacemos clic en el botón “Púlsame”, se visualizará el texto “Hola Mundo”.

• Guardamos los cambios del proyecto.
• Cambia el texto a mostrar para que ponga tu nombre y apellidos.
• Comprueba que se muestra el texto correctamente.
• Guardar los cambios del proyecto.

Ahora vamos a añadir un nuevo botón para poder salir del programa.

• Hacemos clic en el icono del botón.
• Dibujamos en el formulario un nuevo botón.
• En la ventana de propiedades, hacemos un clic en la línea donde pone Text y escribimos el texto “Salir”.

• Volvemos al formulario y hacemos doble clic en el nuevo botón. Se nos abrirá un documento para que podamos escribir el código fuente que queramos. Escribimos el código siguiente debajo del anterior: