Cómo crear un incrementador de números - Parte gráfica

En este capítulo vamos a personalizar la interfaz gráfica de un programa de incremento de valores. Consistirá en un campo de texto con valores numéricos que se irá incrementando al pulsar la tecla ENTER . Adicionalmente, le añadiremos un botón para que sea capaz de hacer lo mismo con el clic del mouse. Así practicas más funcionalidades.

El programa debe quedar algo parecido a esto. Los estilos que le apliques de colores y fuentes, siempre son libres. Hazlo a tu gusto.

Estilo general del programa

Vamos a cambiar el título de la ventana que aparece por defecto como "SHEET1". Lo puedes ver en la barra de título de la ventana del programa.

Para editar el estilo general del programa lo haremos haciendo click derecho sobre un elemento vacío. El fondo de la ventana nos sirve.

Para editar solo el título, haremos click en "Title".

Para editar más estilos a parte del título, le daremos a la opción "Style".

Aquí hay varias opciones. Las iré explicando con más detalle a medida que las utilicemos.

En Sheet name pondremos el título de la ventana. De momento, solo estamos trabajando con una ventana, de modo que no vamos a apreciar nada si lo cambiamos.

Para cambiar el título del programa, te tienes que fijar en Title.

En Icon name podemos seleccionar algunos tipos de icono básicos, de ventana de programa, de alerta, de error, de información...

En Cursor name seleccionaremos el aspecto que va a tener en la ventana el cursor.

En la sección Window seleccionaremos el tipo de ventana.

Con la sección Frame seleccionaremos el tipo de marco. Yo lo voy a dejar en Thin. También tenemos otros dos estilos, que es thick y Sizable que permitirá al usuario cambiar el tamaño de la ventana.

Con las opciones de la sección Style, podremos habilitar o deshabilitar los botones como el de maximizar o minimizar.

La opción 3D, le añade un pequeño relieve al marco de la ventana si está activado.

Finalmente, me ha quedado así:

Los estilos de botón de PowerCOBOL

Lo siguiente que vamos a hacer, es editar el estilo del botón. De ahora en adelante, no explicaré más como acceder al estilo de los elementos, siempre es lo mismo. Click derecho sobre el elemento y pulsamos la opción "Style...".

La opción Item name es el más importante en cualquier elemento de PowerCOBOL. Este es el nombre que vamos a necesitar para hacer referencia a cada elemento en el código COBOL. Por lo tanto, pon nombres identificativos y sin caracteres raros ni acentos, sigue las normas de nomenclatura de variables COBOL que te mostré en este curso. No utilices palabras reservadas del lenguaje COBOL.

Esta opción está algo limitada en número de caracteres, por lo tanto, aunque quisiera poner de nombre de elemento "BOTON-INCREMENTO", no voy a poder, no cabe. Por lo tanto, dejo "BTN-INCREMENTO", que ya llena el límite de caracteres, que son 14.

Las variables las solíamos escribir con mayúsculas y minúsculas, además de no utilizar normalmente guiones. En este caso, es importante usarlos, ya que estos nombres solo se pueden poner todo en mayúsculas.

La opción Text es la que tienes que modificar para que cambie el texto que aparece en el botón.

Las opciones Basic style nos permiten hacer el elemento visible o invisible, habilitado o deshabilitado y elemento por defecto con la opción Default. Esto quiere decir que al iniciar el programa, el foco se coloca ahí.

Por cierto, cada vez que cambies un "Item name", te va a preguntar si quieres reemplazar el nombre anterior de la hoja de procedimientos de eventos. Siempre haz click en "Yes" para hacerlo efectivo.

Haz el mismo procedimiento con el campo de texto.

También, vamos a editar el contenido del campo de texto. Deja marcada la opción "ReadOnly" para que el usuario no pueda cambiar el valor del campo de texto. Además, dejaremos el contador a 0. Ajusta el tamaño como prefieras.

Además, en el botón "ExStyle", he deshabilitado la opción "Select" para que no se señale el texto del campo por defecto al iniciar el programa. Ya expliqué como hacer esto.

Finalmente, le cambio un poco el aspecto visual al botón. El programa queda así:

Si quieres cambiar el color de fondo, solo tienes que seleccionar con el click el fondo de la ventana y seleccionar un color de la paleta.

Si no te convence ninguno de los que hay, puedes crearte tu propia paleta. Le daremos al botón Palette... y se abrirá una ventana llamada Color box. Si quieres añadir alguno, haz click en el botón Add.... Si haces click en el botón Define Custom Colors >>, te dejará seleccionar cualquier color RGB o HSL.

Dejo el capítulo aquí. Ahora que ya tenemos el diseño gráfico listo, es el momento de empezar a escribir la lógica del programa. Esto será en el siguiente capítulo. Vamos a aprovechar el evento "RETURN" para crear un campo numérico que se vaya incrementando de 100 en 100 cada vez que se active con la tecla ENTER. Además, que cuando llegue a 1000, que borre el incremento y que vuelva a empezar.

Todo esto, en realidad ya lo sabes hacer. Solo tienes que aprender a adaptarlo a PowerCOBOL.

Solo una cosa más, debes abrir los tres eventos que modificamos con los DISPLAY en el capítulo anterior y dejarlos con las tres líneas de las divisiones, es decir, como estaban al principio. Esto para tener todos los eventos limpios y que no te confundas con la práctica del siguiente capítulo.