Categorías
Tutoriales

Tu primera aplicación gráfica con Gambas

En esta breve introducción al entorno de desarrollo integrado (IDE) de Gambas, vamos a crear una aplicación gráfica que permitirá introducirte a la programación de una forma muy simple. La idea es hacer una aplicación que solo contenga un botón, y que al hacer clic  te salude con un mensaje.

Puedes lanzar el entorno de desarrollo yendo al menú “Aplicaciones > Desarrollo > Gambas”.Lanzar GambasLo primero que observaras es una pantalla de bienvenida, que permite seleccionar los proyectos que quieres seguir trabajando, pero un nuestro caso seleccionamos “Nuevo proyecto…”.Primera ejecucion Gambas

Como puedes ver, con gambas podemos hacer aplicaciones gráficas, de línea de comando, aplicaciones que trabajen con base de datos, y hasta aplicaciones WEB. Para este tutorial seleccionamos “Graphical Application”.

Opciones de proyecos Gambas

En la siguiente pantalla nos pedirá seleccionar una carpeta donde guardar el proyecto. Nota que si haces clic derecho en una carpeta puedes ver opciones, como por ejemplo crear un nuevo directorio en caso que sea necesario.

Seleccionar destino proyecto Gambas

En la siguiente pantalla, nos pide un “Nombre del proyecto” que primero solo se vera reflejando en el directorio donde se guardará el proyecto, y un “Título del proyecto”, que será el nombre amigable del proyecto, y por ejemplo se verá en los títulos de las ventanas.

Seleccional Nombre proyecto Gambas

Al completar estos datos y aceptar, finalmente veras el entorno de programación de la siguiente manera.

Proyecto gambas vacio

En el panel izquierdo, observaras todos los archivos que componen el proyecto. Como es una aplicación grafica, por ahora solo veras un formulario “FMain”, que al hacer doble clic se abrirá para trabajar en él.

Formulario Gambas

Ahora en la parte inferior del panel derecho, puedes observar todos los controles disponibles para hacer aplicaciones gráficas. Puedes buscar el control “Button” y el control “TextLabel” y arrastrarlos al medio del formulario para incorporarlos.

Formulario Gambas con Controles

En la parte superior del panel derecho, puedes ver y modificar las propiedades de los controles. Para que la aplicación sea intuitiva seleccionamos el botón, y en este panel modificamos la propiedad “Text” llamándolo “Cliqueame”.Formulario Gambas con nombreEn principio este es todo el diseño que necesitamos. Ahora nos toca programar.. ¿Sera difícil?. Veamos…

Si queremos ejecutar cierta tarea cuando se hace clic el este botón, debemos programar sobre ese evento. Puedes hacer clic derecho sobre el botón del formulario y seleccionar la opción “Evento > Click”, pero en la practica, haciendo doble clic sobre el botón, obtienes el mismo resultado.

Seleccionar Evento Control GambasDe esta forma abrirás la “clase” asociada al formulario, con la función que se ejecutara cuando ocurre este evento.Class Gambas con evento ClicPara esta aplicación tan simple, lo único que queremos hacer es que cuando haga clic sobre el boton, salude al usuario con un mensaje. Esto los hacemos modificando la propiedad “Text” del control “TextLabel” que introducimos junto con el botón.

Para hacer eso, solo debemos escribir el nombre de control que queremos modificar (En nuestro caso “TextLabel1”), seguido a un punto “.” y a continuación el nombre de la propiedad que queremos acceder o modificar. En nuestro caso, quedara así.Class Gambas con evento implementado…y esto es todo. ¿No me crees? Puedes presionar la tecla F5 y se ejecutará tu primer aplicación en Gambas. Luego haz clic en el botón. ¿Funciona?Ejemplo gambas funcionando

¡¡Felicitaciones!! Acabas de hacer tu primera aplicación gráfica en Gambas.

Tarea:

Como abras notado, es muy importante el nombre de los controles. Para acceder a las propiedades de cualquier control o implementar cualquiera de sus eventos, debe referirse con el nombre de éste. En una aplicación mas compleja ¿Que pasa si tenemos 10 botones y 10 etiquetas? ¿Accederás a cada uno de ellos como Button1 a Button10?

Probablemente no sepas que tarea debería hacer cada botón. Por eso es importante asignarle nombres adecuados a los controles para poder referirse a ellos con mayor facilidad.

El nombre de de los controles es también una propiedad intrínseca de ellos, y puedes modificarlo en el panel superior derecho.

Intenta llama al botón “btnSaludar”, y al TextLabel “lblSaludo”. Luego ingresa a la clase del formulario haciendo clic en la pestaña “FMain.class” ¿No es mucho mas entendible el código ahora?