Programación en Gambas

El componente PictureBox

En esta aplicación introduciremos el componente PictureBox, el cual es un espacio capaz de visualizar imágenes. Lo usaremos allí donde tengamos que mostrar una imagen al usuario de nuestra aplicación.

Para mostrar su uso modificaremos el programa de nuestro post anterior, en el que cambiábamos el color de fondo de la ventana al pasar el ratón por encima de unas etiquetas, para que en lugar de eso muestre la imagen del actor de cine que se corresponde con el nombre de la etiqueta.

 Su icono en la caja de herramientas es el que se muestra:

Su propiedad más importantes es Picture, la cual especifica qué imagen deberá mostrarse.

Si el programa debe mostrar una imagen estática durante toda la ejecución del mismo, es decir, si la imagen no va a cambiar, entonces podemos establecer la propiedad Picutre cómodamente en tiempo de diseño haciendo click sobre nuestro PictureBox para seleccionarlo y clicando en la propiedad Picture del panel de propiedades. Allí deberemos indicar la imagen que deberá mostrarse, la cual deberá estar accesible en nuestro ordenador, preferentemente en la carpeta de nuestro proyecto.

Si por el contrario, como en la aplicación que nos ocupa, la imagen a mostrar cambia durante la ejecución del programa debido a la interacción del usuario, deberemos establecer la propiedad Picture, de forma dinámica desde nuestro código.

Para indicar mediante código que un elemento PictureBox muestre una imagen llamada "imagen.jpg" debe escribirse:

PictureBox1.Picture = Picture["imagen.jpg"]

Esto es cierto sólo en el supuesto de que nuestra imagen esté en la carpeta de nuestro proyecto actual, en otro caso el nombre deberá contener también la ruta del archivo.

Visto esto, sólo queda programar los eventos de entrada (Enter) y salida (Leave) de cada etiqueta para que se visualice o se oculte la imagen correspondiente.

Así, por ejemplo, si el puntero de nuestro ratón está sobre la etiqueta Marlon Brando y desplazamos el ratón hasta salir de ella, se disparará evento Leave de dicha etiqueta, lo que debería desencadenar que la imagen actualmente visible de Marlon Brando desapareciera. Esto lo programamos del siguiente modo: en el diseño hacemos clic con el botón derecho del ratón sobre la etiqueta (label) lblMarlonBrando, elegimos Evento > Leave, y escribimos:

PUBLIC SUB lblMarlonBrando_Leave()

  PictureBox1.hide()

END

Es decir, usamos el método hide() del objeto PictureBox para ocultar la imagen.

Para el caso en el que el cursor entre en esta misma etiqueta, procedemos del mismo modo para programar el evento Enter.

PUBLIC SUB lblMarlonBrando_Enter()

  PictureBox1.show()

  PictureBox1.Picture = Picture["Marlon-Brando.jpg"]

END

En este caso, lo primero será hacer visible el PictureBox usando el método show() para visualizarlo y a continuación establecemos la propiedad Picture para que la imagen a mostrar sea la del actor correspondiente.

El código completo de la aplicación sería:

' Gambas class file

' PictureBox

PUBLIC SUB _new()

END

PUBLIC SUB Form_Open()

END

PUBLIC SUB lblAlPacino_Enter()

  PictureBox1.show()

  PictureBox1.Picture = Picture["Al_Pacino.jpg"]

END

PUBLIC SUB lblMarlonBrando_Enter()

  PictureBox1.show()

  PictureBox1.Picture = Picture["Marlon-Brando.jpg"]

END

PUBLIC SUB lblBruceWillis_Enter()

  PictureBox1.show()

  PictureBox1.Picture = Picture["Bruce_Willis.jpg"]

END

PUBLIC SUB lblDeNiro_Enter()

  PictureBox1.show()

  PictureBox1.Picture = Picture["De_Niro.jpg"]

END

PUBLIC SUB lblAlPacino_Leave()

  PictureBox1.hide()

END

PUBLIC SUB lblMarlonBrando_Leave()

  PictureBox1.hide()

END

PUBLIC SUB lblBruceWillis_Leave()

  PictureBox1.hide()

END

PUBLIC SUB lblDeNiro_Leave()

  PictureBox1.hide()

END

PUBLIC SUB btnSalir_Click()

  QUIT

END

Programación en Gambas

Los eventos Enter y  Leave

En esta aplicación que proponemos profundizaremos un poco más en el estudio de los eventos en Gambas.

Hasta ahora, nuestro trabajo con eventos se había limitado a los clics sobre los botones. Aunque de hecho este evento es el más frecuente, no es ni mucho menos el único.

En programación, se considera evento a toda interacción del usuario con con el sistema: pulsar una tecla en el teclado, maximizar una ventana, mover el ratón, pasar el ratón por encima de un componente, etc. Cada elemento, incluso el propio formulario, tiene sus propios eventos.

En el post de hoy trabajaremos con dos eventos del elemento label. Haremos una sencilla aplicación que permita cambiar el color de fondo de nuestra ventana al color mostrado en una etiqueta al pasar el cursor del ratón por encima de ella.

Los eventos que tendremos que programar serán: Enter y Leave de cada una de las etiquetas que muestre nuestro formulario, cuyo aspecto será el de la imagen.

Los elementos de que constará serán 3 Labels, un TextLabel para mostrar el texto largo que se muestra y un botón para salir.

Para programar el evento de entrada en una etiqueta, deberemos hacer clic con el botón derecho sobre la etiqueta en cuestión durante el diseño y elegir Evento > Enter.

El código a escribir para cambiar el fondo a color amarillo, por ejemplo, sería:

El evento Leave (Salir), deberemos programarlo para que cuando el cursor salga de la etiqueta nos devuelva el color del fondo de la ventana al definido por defecto:

De este modo, el fondo estará amarillo, sólo mientras permanezcamos con el cursor en el interior de la etiqueta.

El código completo de la aplicación sería:

' Gambas class file

' Evento Enter

PUBLIC SUB _new()

END

PUBLIC SUB Form_Open()

END

PUBLIC SUB lblRojo_Enter()

    FMain.Background = Color.Red

END

PUBLIC SUB lblRojo_Leave()

    FMain.Background = Color.Background

END

PUBLIC SUB lblVerde_Enter()

    FMain.Background = Color.Green

END

PUBLIC SUB lblVerde_Leave()

    FMain.Background = Color.Background

END

PUBLIC SUB lblAmarillo_Enter()

    FMain.Background = Color.Yellow

END

PUBLIC SUB lblAmarillo_Leave()

    FMain.Background = Color.Background

END

PUBLIC SUB btnSalir_Click()

  QUIT

END

Programación en Gambas (7)

En esta segunda aplicación gráfica crearemos un formulario con una etiqueta y cuatro botones dispuestos como en la imagen. Al hacer clic sobre alguno de los botones, el color de fondo de la ventana cambiará automáticamente al indicado en el botón pulsado.

En la fase de diseño, colocaremos los elementos tal como se indicó en el post anterior.

En la fase de redacción del código, habremos de programar la acción de cada botón. Para ello hacemos clic en alguno de ellos y en la ventana que se nos abre escribimos la siguiente línea:

FMain.Bacground = Color.Red

Con ello indicamos que queremos asignar a la propiedad Background del objeto FMain el color rojo.

Programación en Gambas (6)

Primera aplicación visual

Hasta ahora, todos nuestros programas habían sido bajo consola; es decir la salida y la entrada de datos se producía a través de la línea de comandos, o terminal (pantalla negra con texto).

Esto ha estado bien en el comienzo porque nos va a permitir separar lo que ha sido el desarrollo del código de lo que es el diseño gráfico. Pero es momento ahora de comenzar a utilizar la programación visual de Gambas para crear aplicaciones gráficas, como son la práctica totalidad de las aplicaciones en nuestros días.

Para ello comenzaremos igual que hicimos en nuestro primer ejercicio, pero tras crear un Nuevo proyecto elegiremos Aplicación gráfica en lugar de Aplicación de consola.

Llamémosle a este nuevo proyecto holamundo2, para distinguirlo del que hicimos con este mismo nombre bajo consola.

Al abrirse el IDE, vemos que en el árbol de directorios de la izquierda aparece una carpeta nueva llamada Formularios. Los formularios son contenedores de objetos como botones, etiquetas, cajas de texto, etc. Hacen la función de ventana de nuestra aplicación.

Al hacer doble clic sobre FMain, se nos despliega nuestro formulario principal. Pero será necesario que hagamos los siguientes cambios en nuestro IDE: si tenemos activa la consola la cerraremos pulsando F11, para ganar espacio, haremos visible la caja de herramientas que es donde se encuentran los diferentes objetos que podemos colocar en el formulario.

Ahora estamos preparados para empezar a crear nuestra primera aplicación gráfica.

Podemos dividir en trabajo en dos partes claramente diferenciadas, la fase de diseño gráfico y la redacción del código.

Fase de Diseño gráfico

En primer lugar colocaremos una etiqueta en la parte superior de nuestro formulario a modo de título. Para ello utilizaremos el objeto denominado label, representado por una A mayúsculas en la caja de herramientas.

Haremos clic en él y a continuación nos iremos al formulario y haciendo clic en un lugar arrastramos el ratón hasta el tamaño deseado.

Es costumbre en programación renombrar nuestros objetos de modo que su nombre nos recuerde su función en el programa. Para ello, teniendo seleccionado nuestro label, nos iremos a la caja de propiedades y buscaremos la propiedad Name; allí cambiaremos el nombre por defecto label1 a lblTitulo, donde además, con las tres primeras letras indicamos que el objeto en cuestión es un label.

Del mismo modo, estableceremos la propiedad Text de esta etiqueta con la frase: "Mi primera aplicación gráfica".

A continuación insertaremos un botón haciendo clic en el objeto de la imagen:

y lo colocaremos bajo el label:

A este botón le cambiaremos el nombre por defecto button1 a btnSaludar y sustituiremos el texto original por el de Saludar:

Cambiaremos también su color de fondo picando en su propiedad Background en los puntos suspensivos. En la ventana que se abra elegimos la pestaña Libre y escogemos un color verde.

Del mismo modo añadiremos otro botón que llamaremos btnSalir, con el texto Salir y color de fondo rojo y otro label al que llamaremos lblMensaje y en el que dejaremos su propiedad texto vacía.

El conjunto acabado debe verse así:

Hasta aquí la fase de diseño.


Fase de redacción del código

Queremos que al pulsar en el botón salir, la aplicación se cierre. Para ello, hacemos doble clic sobre el botón rojo. Se nos abrirá la vista de código y en el sitio donde nos sitúa el ratón escribimos quit, que es como en Gambas indicamos que se abandone el programa.

Programemos ahora el comportamiento del botón verde. Como al pulsar el botón verde queremos que el label central muestre el mensaje: ¡Hola Mundo!, actuaremos del siguiente modo.

Hacemos doble clic en el botón verde y en la vista de código, justo donde se nos ubica el cursor escribimos:

lblMensaje.Text = "¡Hola Mundo!"

lblMensaje es el nombre del objeto al que queremos modificar una propiedad, Text es la propiedad de ese objeto que queremos modificar y el resto de la frase es el valor que queremos asignar a esa propiedad.

Con esto nuestro pequeño programa está acabado y podemos ejecutarlo pulsando F5 y minimizando nuestro IDE para poderlo ver en el escritorio.

Programación en Gambas (5)

Instrucción IF … THEN … ELSE

La instrucción If … Then … Else, sirve para indicar qué tiene que hacer el programa si se cumple una condición y, si es el caso, también qué debe hacer si esa condición no se cumple.

La sintaxis de esta instrucción sería:

IF condición THEN
     Instrucción 1
     Instrucción 2

     Instrucción 3

          ...

ELSE
     Instrucción 1
     Instrucción 2

     Instrucción 3

          ...

ENDIF

Cuando se encuentra una instrucción If … Then … Else, el programa comprueba si se cumple la condición tras la palabra If. Si dicha condición es verdadera, se ejecutarán todas las instrucciones que se encuentren a continuación the Then. Si la condición no se cumple el programa ejecutará todas las instrucciones situadas después de Else hasta el Endif.

La palabra Else es opcional y puede no existir si no necesitamos que se haga nada en caso de que la condición no se cumpla.

La instrucción If … Then … Else, puede ser más compleja de lo aquí explicado e incluso admiten ser anidadas unas dentro de otras, pero no profundizaremos de momento más en ellas.

Veamos algunos ejemplos. El siguiente programa evalúa la edad de una persona y como resultado de ello muestra por pantalla las frases: “Usted es mayor de edad” o “Usted es menor de edad” dependiendo de si la edad introducida por el usuario es mayor o igual a 18 o menor respectivamente.

Programación en Gambas (4)

Bucle FOR / NEXT

Mediante la pareja de instrucciones FOR / NEXT puede hacerse que el programa ejecute un número definido de veces las instrucciones que se encuentran entre estas dos palabras.

Veamos un ejemplo de uso.

El programa anterior imprime en pantalla la frase: "Listado de números del 1 al 20:", y a continuación imprime los primeros 20 números.

Colocando punto y coma doble al final de la línea de PRINT obtenemos esta otra forma de impresión en horizontal más ordenada.

Programación en Gambas (3)

Entrada de datos desde el teclado

En los ejemplos vistos hasta ahora hemos manejado variables a las que les asignábamos valores desde dentro del código.

Habitualmente los valores vendrán desde el exterior porque será el usuario el que los asigne. Para ello, Gabmas cuenta con la instrucción INPUT.

Veamos un ejemplo de uso. Supongamos que queremos que una variable llamada Edad, guarde la edad del usuario. Bastaría escribir:

INPUT Edad

Cuando la ejecución del programa llega a la instrucción INPUT, se para y espera a que el usuario introduzca algún dato. Al pulsar Enter, el valor tecleado queda asignado a la variable que acompaña a la instrucción.

Resulta siempre necesario escribir en pantalla la información que se espera del usuario.


Ejemplo

El siguiente programa muestra un ejemplo de uso de la instrucción INPUT. Se pregunta al usuario su año de nacimiento y se le muestra en pantalla su edad aproximada.

Problema propuesto

Diseña un programa en el que se le pregunte al usuario su nombre y su edad actual y se le conteste en pantalla con la frase: "Sr. ......, en el año 2050, usted tendrá .... años"

Programación en Gambas (2)

Trabajo con variables

Tras nuestro primer holamundo, vamos a dar algún paso más empezando a trabajar con variables.

Una variable es un espacio reservado en la memoria de nuestro ordenador para guardar datos.

El nombre de la variable lo elige el programador libremente. Aunque es recomendable que dicho nombre indique para qué se usa esa variable. Así, deberíamos huir de nombres como a, b, c, etc., y usar aquellos del tipo: edad, nombre, fecha_nacimiento, que nos indica el significado del número que van a guardar dentro.

Estos datos pueden ser de diferentes tipos: números enteros, números decimales, valores booleanos, caracteres, etc.

En Gambas antes de usar una variable hay que declararla especificando el tipo de datos que va a soportar. Ejemplo, podemos declarar una variable de tipo entero a la que llamaremos Contador, del siguiente modo:

DIM Contador AS Integer

Otro tipo de dato muy empleado es el que admite caracteres, sean estos letras o números. Así, si tuviéramos que declarar una variable con el nombre Apellido para guardar el apellido de una persona, la declararíamos de este modo:

DIM Apellido AS String

Las declaraciones de variables hay que hacerlas al principio del módulo o la clase.

Aunque existen más tipos de variables, las iremos viendo poco a poco más adelante.

Asignación de valores a las variables

Para asignar un valor a una variable utilizamos el signo "=". Ejemplo:

Numero = 7

Apellido = "García"

En  los ejemplos anteriores la variable Numero ha sido cargada con el valor 7 y la variable Apellido con el valor "García".

Como vemos, las expresiones tipo String, o de cadena de caracteres, han de ir siempre encerradas entre comillas dobles; de lo contrario Gambas las intentará interpretar como nombres de variables y nos dará error.

Ejemplo

Como ejemplo de lo aprendido crearemos un sencillo programa que realice la suma de dos números enteros y la muestre por pantalla. Para ello crearemos un nuevo proyecto llamado variables. En él declararemos tres variables de tipo entero que denominaremos Num1, Num2 y Suma.

El programa quedaría como se indica:

Las declaraciones de las tres variables anteriores pueden hacerse simultáneamente en una misma línea de código con la expresión:

DIM Num1, Num2, Suma AS Integer

Con lo que el código quedaría más compacto.

Programación en Gambas (1)

¿Qué es Gambas?

Gambas es un lenguaje de programación libre derivado de BASIC e inspirado en Java. De ahí que el término Gambas signifique Gambas Almost Means BASic. Como se ve es un acrónimo recursivo ya que en la propia definición del acrónimo se hace referencia al mismo.

Es un lenguaje orientado a objetos e interpretado desarrollado en sus orígenes por el francés
Benoît Minisini.

El hecho de que en español el término gambas se refiera a ese marisco que todos conocemos es simplemente una casualidad ya que el autor no sabía una palabra de español. Sin embargo, una gamba azul acabó siendo el logotipo de su lenguaje de programación.

Instalación y primer programa

Para los usuarios de Guadalinex Edu (versión de Linux en los ordenadores de los alumnos de Andalucía, España), Gambas puede encontrarse instalado en Aplicaciones > Programación, junto con otros programas como Scratch. Si no fuese así hemos de acudir al Centro de software de Guadalinex Edu, que encontraremos al final del mismo menú Aplicaciones.

Una vez allí seleccionamos Herramientas para desarrolladores y en la ventana de búsquedas colocamos "Gambas".

Una vez descargado e instalado, accedemos a él a través de Aplicaciones > Herramientas de programación > Gambas2.

Al abrise, aparece la ventana de la figura, en la que debemos elegir Aplicación de consola para nuestro primer programa y hacemos clic en siguiente:

Nos situamos en nuestra carpeta personal y mediante el icono que se muestra en la imagen creamos una carpeta llamada "gambas" donde iremos guardando todos nuestros proyectos.

Una vez creada pulsamos en siguiente:

Damos un nombre y un título a nuestro nuevo proyecto:

y se nos abre el IDE  (o entorno integrado de desarrollo) de Gambas.

En el panel izquierdo, nos aparece la estructura de nuestro proyecto "holamundo". Consta de tres carpetas: Módulos, Clases y Datos.

Hacemos doble clic en el archivo MMain que se encuentra en la carpeta Módulos.

Esta acción nos muestra en el panel derecho el contenido de este módulo. Podemos ver una primera línea en color gris tras un apóstrofe. Es un comentario. Después las líneas de principio y de fin de la subrutina Main(). Todos los programas en Gambas deben llevar esta subrutina principal, la ejecución de todo programa empieza por el código que se haya incluido en ella.

Nuestro primer programa será el popular Hola mundo, consistente en presentar en pantalla dicha frase.

Para imprimir por consola, en gambas se emplea el comando PRINT seguido de la expresión a escribir entre comillas dobles. Así que escribimos la línea antes del comando END y clicamos en Ejecutar.

Para poder ver el resultado hemos de hacer visible la consola mediante F11 o haciendo clic en el icono que se indica en la imagen.

La herramienta clonado en la restauración de imágenes con GIMP

La herramienta "clonado" nos permite dibujar con un pincel en una parte de una imagen un clon obtenido de otra parte de esa imagen u otra cualquiera.

La mayor utilidad de esta herramienta es la restauración de imágenes dañadas. Para entender el mecanismo de uso de la misma proponemos una sencilla actividad en la que practicaremos sobre el famoso fresco del Ecce Homo de Borja.

Partimos de la pareja de imágenes dada y clonaremos en el dibujo dañado (derecha), partes del dibujo original (izquierda).

Primeramente hemos de elegir un tamaño adecuado de pincel, por ejemplo de 20 y un borde difuso para el mismo.

A continuación buscamos en la imagen original el punto donde iniciar el clonado, por ejemplo en el ojo más alto. Manteniendo pulsada la tecla Ctrl hacemos clic izquierdo en el lugar mencionado, con lo que habremos fijado la zona a copiar. A continuación buscamos en la imagen a restaurar el lugar donde calcar la selección tomada. Par ello, hacemos clic con el ratón en la imagen dañada sobre el ojo correspondiente y, sin soltarlo, empezamos a deslizar suavemente el ratón.

Mientras movemos el ratón vemos cómo estamos transfiriendo la imagen de la izquierda sobre la de la derecha. El resultado se va viendo en la imagen inferior.

Este simple ejercicio nos deja bastante claro el mecanismo de funcionamiento de esta poderosa herramienta. Ahora podemos afrontar una restauración en serio.

A diferencia del ejemplo anterior, al restaurar una foto vieja, no disponemos de original alguno, por lo que tendremos que tomar partes de la misma foto para ocultar sus desperfectos. Os propongo la restauración de la siguiente fotografía.