Informática. Programación. Práctica 4 de GAMBAS

Gambas: Controles. Casillas de verificación y botones de

opción Duración aproximada: 1 1/2 sesión

Objetivos

Utilizar los controles básicos de opción y verificación de Gambas.

Fuentes de información http://www.gambas-es.org

Libro “GAMBAS, programación visual con Software Libre”, de la editorial EDIT LIN EDITORIAL S.L., cuyos autores son Daniel

Campos Fernández y José Luis Redrejo.

Libro “Fundamentos de programación”, de la editorial Univ. Politécnica de Valencia, cuyos autores son Mª Alpuente Fresnedo y otros.

Contenidos

1. Controles gráficos

Gambas aporta una serie de controles básicos para desarrollar una interfaz gráfica. Vamos a seguir viendo

alguno de los más utilizados.

1.1. Casilla de verificación (CheckBox)

Muestra un texto determinado por la propiedad Text, junto con una caja donde el usuario puede pulsar para

marcar o desmarcar la opción.

Se suele emplear para opciones de configuración que sólo disponen de dos posibles valores: 'Activado o

Desactivado', 'Si o No', 'Verdadero o Falso'.

Propiedades principales:

Propiedades Descripción

Value Indica si el usuario ha marcado o no el

CheckBox. Si está marcado la propiedad tiene el

valor TRUE. En caso contrario, tiene el valor

FALSE.

Change Informa de cada cambio.

1.2. Botón de opción (RadioButton)

Es similar a CheckBox, pero tiene la particularidad de que todos los RadioButton existentes, hijos de un mismo contenedor, están internamente

agrupados, y en cada momento sólo puede haber uno activado. Cuando el usuario activa uno de ellos, e! resto se desactiva, por lo que se

emplea para seleccionar una opción que excluye a otras dentro de un menú de opciones.

Propiedades principales:

Propiedades Descripción

Value Indica si el usuario ha marcado o no el

RadioButton. Si está marcado la propiedad tiene

el valor TRUE. En caso contrario, tiene el valor

FALSE.

Text Etiqueta de texto del botón.

Ejercicio

Vamos a implementar en entorno gráfico el programa para convertir de grados Centígrados a Kelvin y viceversa.

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/BASIC/2MGRAFICO. Tras esto hacemos clic en el botón Siguiente.

Le damos el nombre "04CelsiusKelvin" y el título "Proyecto grafico de conversion entre grados celsius y kelvin" al proyecto.

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.

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, el panel con sus propiedades y la caja de herramientas. Si no aparece la caja de

herramientas deberemos mostrarla accediendo al menú Vista→Caja de herramientas, o pulsando directamente la tecla F6. Con esto

mostraremos la caja de herramientas que contiene los elementos que podremos añadir a nuestro formulario.

Podemos modificar el tamaño de nuestro formulario de la misma manera que modificamos el tamaño de cualquier ventana. Nos

situamos en la esquina inferior derecha del formulario y lo redimensionamos hasta que quede más o menos como el de la imagen.

Vamos a añadir ahora elementos a nuestro formulario. Nos fijamos en la Caja de herramientas:

1. Dibujamos 1 caja de texto . En la ventana de Propiedades cambiaremos las propiedades:

Name. Llamaremos a la caja “tbOrigen”.

Text. Borraremos el texto de la propiedad.

2. Añadimos 1 etiqueta y la situamos a la izquierda de la caja de texto. Cambiamos la propiedad:

Text. Contendrá el texto “Uds. origen”.

3. Dibujamos 1 caja de texto . Cambiamos las propiedades:

Name. Llamamos a la caja “tbResultado”.

Text. Borramos el texto de la propiedad.

4. Añadimos 1 etiqueta y la situamos a la izquierda de la caja de

texto. Cambiamos la propiedad:

Text. Ponemos el texto “Resultado”.

5. Dibujamos 2 botones de tipo RadioButton . Cambiamos las

propiedades:

Name. Ponemos los nombres “rbtnCelsius”, “rbtnKelvin”, respectivamente.

Text. Escribimos “Celsius” y “Kelvin” según corresponda.

Value. En el botón “rbtnKelvin” establecemos valor TRUE. En el botón “rbtnCelsius” establecemos valor FALSE.

6. Dibujamos 1 botón de tipo Button . Cambiamos las propiedades:

Name. Ponemos el nombre “btnConvertir”.

Text. Escribimos “Convertir”.

6. Dibujamos 1 botón de tipo Button . Cambiamos las propiedades:

Name. Ponemos el nombre “btnSalir”.

Text. Escribimos “Salir”.

Ya tenemos la interfaz de nuestro conversor, pero no hace nada. Tenemos que escribir el código para que convierta los datos.

Antes de continuar guardamos los cambios del proyecto.

Contenidos

2. Eventos

Recordaremos por última vez que los eventos son acciones que suceden y que podemos tratar en nuestro programa. Un evento es, por ejemplo,

cuando el usuario hace clic sobre uno de nuestros botones. Este es el evento más característico, pero hay muchos más. Otros eventos habituales

se producen cuando el usuario pase el ratón por encima de un cuadro de texto, o cuando escribe una letra, o cuando cierre una ventana o incluso

el programa.

Podemos asociar un trozo de código a cada uno de esos eventos con lo que conseguimos responder a la acción (evento) que ha generado el

usuario.

Al pulsar con doble clic sobre un control de nuestro formulario se genera, automáticamente, el encabezado del código correspondiente al

evento por defecto (el más característico) del control seleccionado. Además, pulsando con el botón derecho se puede seleccionar la lista de

eventos disponibles para un control.

Ejercicio

Vamos a controlar el evento clic del ratón sobre los botones. Además, vamos a comprobar el valor de los botones RadioButton, para convertir

de Celsius a Kelvin o viceversa.

Volvemos al formulario y hacemos doble clic en el botón de Convertir. Se nos abrirá un documento para que podamos escribir el

código fuente que queramos.

Podemos reutilizar el código de la práctica de modo texto “15GradosKelvin”, teniendo en cuenta que ahora leemos los datos de

las cajas de texto. A continuación puede ver cómo quedaba el código en modo texto, utilízalo de guía, pero ten en cuenta que

debes modificarlo.

'Las constantes siempre van al principio de todo

'Utilizamos una constante de tipo real para la conversión

PUBLIC CONST cKelvin AS Float = 273.15

PUBLIC SUB Main()

'--------------------------------------------------

DIM sGradosC AS String

DIM vGradosC AS Variant

DIM fGradosC AS Float

DIM fGradosK AS Float

'--------------------------------------------------

'Leer los grados centígrados

PRINT "Introduzca los grados centígrados: "

LINE INPUT sGradosC

'--------------------------------------------------

'Asignamos la cadena de entrada a una variable tipo Variant que puede

'contener cualquier tipo de dato

vGradosC = Val(sGradosC)

'--------------------------------------------------

'Comprobamos si la cadena introducida es un número real o entero

IF (IsFloat(vGradosC) = TRUE) OR (IsInteger(vGradosC) = TRUE) THEN

'Convertimos la cadena de entrada a número real

fGradosC = Cfloat(vGradosC)

'--------------------------------------------------

'Comprobamos si el número introducido está por debajo del límite inferior permitido

IF (fGradosC < -cKelvin) THEN

PRINT "El valor mínimo posible es " & -cKelvin

'Finalizamos la ejecución del programa. No tiene sentido seguir

QUIT

PRINT "Esto ya no se ejecutará"

ENDIF

'--------------------------------------------------

'Utilizamos la constante para convertir a grados Kelvin

fGradosK = fGradosC + cKelvin

PRINT fGradosC & " grados C equivalen a " & fGradosK & " grados K"

'--------------------------------------------------

ELSE

'La cadena introducida no es válida

PRINT "La cadena: " & sGradosC & " no es un número"

ENDIF

'--------------------------------------------------

END

Sin embargo, nuestro programa debe permitir pasar en un sentido u otro, es decir, de grados Celsius a Kelvin y viceversa.

Sugerencias:

o Define 2 constantes de tipo float para el factor de conversión, una para Celsius y otra para Kelvin. Recuerda que la constante ha

de definirse al principio de todo el programa.

o Añadie una instrucción condicional simple para comprobar qué botón está seleccionado.

o IF (rbtnKelvin.Value = TRUE) THEN → pasar a grados Kelvin

o ELSE → pasar a grados centígrados

o Efectua la conversión: num = num + constante

Comprueba que se realiza la conversión.

Guarda los cambios del proyecto.

Recordemos que 0 ºK = -273,15 ºC

Si pasamos de grados Celsius a Kelvin → mínimo -273,15 ºC Si pasamos de grados Kelvin a Celsius → mínimo 0 ºK

Ejercicio

Ahora deberás completar el funcionamiento del conversor.

Ve al botón “Salir” y haz doble clic.

Escribe el siguiente código:

Ejecuta el programa.

Comprueba que funciona el control de errores de número (que sea como mínimo -273,15 o 0 dependiendo de la conversión). Pasa de

grados centígrados a Kelvin y viceversa.

Guardar los cambios.

Ejercicio

Aún no ha terminado tu trabajo.

¿Qué ocurre si nos ponemos en la caja de texto del resultado y escribimos? Sorprendentemente, Gambas nos deja escribir y modificar el campo,

lo que es incorrecto. Nosotros podemos variar los operandos, pero no el resultado.

¿Cómo se soluciona este problema? Basta con modificar la propiedad “Enable” del control de la caja de texto para deshabilitar dicho control.

Vamos a la caja de texto “tbResultado”. Cambiamos las propiedades:

o Enable. Ponemos al valor “False”.

o Foreground. Cambiamos el color de la letra para que resalte, ya que el gris queda muy apagado. Elegimos un color rojo claro.

Probamos de nuevo el conversor. ¿Es posible escribir en la caja de texto del resultado?

Guardamos los cambios.

Otro de los errores que encontramos es si en lugar de un número escribimos en cualquiera de los operandos un texto. Al ejecutar la operación

nos aparecerá un mensaje de error al hacer clic en el botón de Suma.

Pero este error ya sabes solucionarlo.

Vamos a bloquear la caja de texto de forma que sólo permita la entrada de números, el punto decimal, la pulsación de las teclas Supr

(borrado), BackSpace (borrado hacia atrás), el tabulador para pasar el foco a otro control y los cursores a la izquierda y derecha.

Vamos a la caja de texto tbOrigen.

Hacemos clic con el botón derecho y elegimos el evento Keypress (de esta manera cuando el usuario aprete una tecla estando en esta

caja de texto capturaremos le evento y podremos decidir si la tecla pulsada queremos que aparezca o no).

Escribimos el siguiente código:

En donde el programa realiza lo siguiente:

Se teclea un carácter

Se escribe en la caja de texto SI y SOLO SI se cumple que:

o La tecla pulsada está entre 48 y 57 (códigos internos de teclado para las cifras del 0 al 9)

o Es la tecla de retroceso (borrado a la izquierda)

o Es la tecla de borrado (Supr)

o Es el tabulador

o Es el cursor izquierdo o derecho

o En otro caso no se escribe nada. Para ello llama a STOP EVENT cuando el código de la teda pulsada no es ninguno de los

deseados.

Ejecuta el programa.

Comprueba que en la caja de texto no se escribe nada que no sea un número.

Ahora la comprobación de errores en “PUBLIC SUB btnConvertir_Click()” carece de sentido, ya que controlamos que el usuario sólo

pueda introducir números en la caja de texto.

Contenidos

3. Personalizar colores

Gambas permite personalizar los colores de los controles, así como los formularios.

Recordemos que hay 2 propiedades para cambiar los colores: Backgound y Foreground.

Propiedades Descripción

Background Color de fondo.

Foreground Color de primer plano, es decir, el color de la

letra.

Ejercicio

Ya para acabar con esta unidad, vamos a practicar con los colores.

1. Ve al formulario y cambia la propiedad:

Background. Establece el color de fondo que quieras.

2. Ve a las cajas de texto. Cambia las propiedades:

Background. Establece el color de fondo que quieras.

Foreground. Establece el color de letra que quieras.

Guarda los cambios.

Guarda y entrega el archivo Form1.class en el que debe aparecer todo el código que has escrito para los distintos botones. Este archivo

lo encontrarás en Documentos/BASIC/2MGRAFICO/04CelsiusKelvin/

Sugerencias

Sería interesante que te guardaras en una memoria USB todo el contenido de la carpeta BASIC de tus documentos, para evitar que cualquier

problema con el ordenador te haga perder tus ejercicios.