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.