Cobol en español

CONTROLES

Este es el momento de empezar a colocar los objetos en nuestra pantalla. Esta misión de diseño no es la mas importante, pero si va a ser la mas atractiva para nuestro usuario o cliente, que va a querer que la información se presente de manera clara y ordenada, por eso nada mejor que utilizar la utilidad del Grid, para que los controles se alineen con mayor facilidad en la pantalla.

Los controles que vamos a utilizar en esta pantalla son:

Label: Serán lo que siempre poníamos con DISPLAY. Con ellas pondremos todos los nombres de los campos que vamos a introducir, Código, Nombre, Domicilio, Población, etc .... Podéis ponerlo donde queráis, sin dejaros ninguno o ponerlo como yo lo he hecho en el ejemplo.
Group Box: Son las cajas que facilitan la agrupación de controles, aunque en esta versión solo sirven para eso, para decorar, clarifica aún más la información.
Picture Edit: Son las cajas donde vamos a aceptar los datos, es decir lo que sustituye a los ACCEPT. Sin duda lo mas importante y el mas utilizado.
Radio Button: Botones de opción para elegir entre varios, por eso he añadido el campo género.
Combo Box: Caja de opciones, lo he utilizado para señalar el tipo de contacto.
Bitmap Button: Son los botones que harán los procesos.

Una vez los tengaís colocados, es el momento de asignarles un nombre, ese nombre es importante y hará referencia al control. Los nombres si debemos de darlos igual, para que luego en la programación no haya problemas.

LABEL

A los Label con el nombre del campo se le puede dejar el nombre que se le asigne PowerCobol. Mejor veamos esta imagen que corresponde al Label de Código.

Estilo de un Label

Así es como deben de ir todos los Labels, solo cambiando el Text, que hará referencia a cada uno de nuestros campos.

PICTURE EDIT

En los Picture Edit, donde introduciremos los campos, su nombre será el mismo que el nombre del campo del registro pero con un guión enmedio.

Por ejemplo el Picture Edit del Código se llamará AGE-COD. Veamos otra imagen.

Estilo de un Picture Edit

Aquí fijaros que algo muy importante es PICTURE String, que nos indicará como se mostrará el dato una vez introducido. Por eso he elegido éste control y no el Edit normal. En este caso PIC ZZZ9B.

Además debéis de pulsar sobre el botón Event y aseguraros que las casillas estén así:

Eventos del control

Con ésta ventana le indicamos cuando se efectuará el evento Return, es decir cuando el campo se dará por aceptado. La primera casilla indica que lo hará al pulsar ENTER (activada). La segunda que lo hará cuando el foco esté en otro control (desactivada). La tercera indica que se producirá cuando se rellene todo el campo con su longitud (activada).

Con esto conseguimos que los Picture Edit, funcionen igual que los ACCEPT tradicionales.

A continuación pongo los valores de todos los estilos de los Picture Edit:

Campo	Nombre	Picture String
Código	AGE-COD	ZZZ9B
Nombre	AGE-NOM	X(30)
Domicilio	AGE-DOM	X(30)
Población	AGE-POB	X(20)
Código Postal	AGE-POS	9(5)B
Provincia	AGE-PRO	X(15)
Teléfono	AGE-TEL	X(20)
Teléfono Móvil	AGE-MOV	X(20)
e-mail	AGE-MAI	X(30)
Página Web	AGE-WEB	X(40)

OTROS

Para el Género creamos dos Radio Button, al que identifica al hombre lo llamamos AGE-GEH y el que identifica mujer lo llamamos AGE-GEM. Uno de los dos debe de llevar activa la casilla de Check en su estilo, que nos indica cual estará seleccionado por defecto.

Para el Tipo creamos un ComboBox y lo llamamos AGE-TIP. Tendremos en cuenta de marcar la casilla Dropdown List, dentro del estilo del Combo Box.

Los Group Box, como os dije antes son aclaratorios y solo tienen diseño, así que podéis ponerlos como en el ejemplo agrupando campos mas o menos comunes. ICONOS

Para simular el hueco donde van los iconos, he dibujado un rectángulo (Rectangle) al que le he dado el color de fondo azul marino. Y luego encima he colocado todos los iconos y label de los iconos.

Vamos a incluir en nuestro proyecto todos los iconos que os habéis bajado y que forman parte de la aplicación. Van a ser recursos y por lo tanto van a formar parte de nuestro proyecto, recordad lo que os comenté en el capítulo anterior sobre como tratar las imágenes.

Por lo tanto abrimos nuestro menú Project, nos vamos a Edit y pulsmos sobre Add. Una vez allí en tipo de archivos marcamos Bitmap (*.bmp) y vamos añadiendo uno a auno. Ya sabeis que cada vez que se añade uno debeis de darle un nombre de recurso. Veamos los que hay que añadir.

Imagen	Nombre recurso
borrar.bmp	icoborrar
consul.bmp	icoconsul
fin.bmp	icofin
grabar.bmp	icograbar
inicio.bmp	icoinicio.bmp
listar.bmp	icolistar
mail	icomail
mas.bmp	icomas
menos.bmp	icomenos
ok.bmp	icook
salir.bmp	icosalir

Ahora es momento para ir colocando los Bitmap Button e ir asignando sus nombres. Primero creamos los cuatro referentes a la busqueda de registros y los llamamos: INICIO, MENOS, MAS y FIN, asignándoles los recursos apropiados de icoinicio, icomenos, icomas e icofin. Para asignar el nombre del recurso hay que pinchar sobre Image en la caja de estilo de cada uno de los Bitmap Button: Lo haremos igual con todos.

Caja de imagen

A continuación colocamos el icono de borrar al que llamamos BORRAR. Luego Ok, al que llamamos OK. Después listar, al que llammos LISTAR. Seguido de e-mail al que llamamos EMAIL. Luego Grabar (GRABAR), consulta (CONSULTA) y salir (SALIR).

Ahora solo nos quedan los nombres de los Botones que se colocan también con label. Los cuatro primeros, los de las flechas de busqueda, los podemos poner juntos y con el nombre que se le asigne. Pero para los demás lo deberán llevar y será el siguiente, cada uno irá debajo del botón:

texto de Label	Nombre label
Borrar	L-BORRAR
Ok	L-CANCELAR
Listar	L-LISTAR
e-mail	L-EMAIL
Grabar	L-GRABAR
Consulta	L-CONSULTA
Salir	L-SALIR

PRINT

Ahora colocomas el control Print en un lugar de la pantalla que no nos estorbe, este tipo de controles no se ven en tiempo de ejecución, pero es necesario que estén integrados en nuestra ventana, para poder asignarle los valores. Una vez colocado, por ejemplo en la esquina superior derecha nos vamos a su cuadro de estilo y ponemos como nombre PRINT1 y como Title, FICHA DE LA AGENDA. Lo demás lo podéis dejar por defecto.

DDE

Vamos a colocar también un DDE, que es un control que nos sirve para conectar con otras aplicaciones externas y que utilizaremos para enviar e-mail. Igual que el anterior no se ve en tiempo de ejecución, pero tenemos que darle propiedades, que serán muy simples. Tenéis que abrir su caja de estilo y simplemente poner en ItenName, DDE1.

ITEM ORDER

Llegados a este punto solo quedar explicar una pequeña cosa. Todos los componentes que hemos ido poniendo llevan un orden y en algunos casos pudiera suceder que unos no se vean, simplemente porque se han quedado debajo, bien, eso se soluciona, sacando el menu pop-up sobre cualquier punto de la pantalla y dirigiendonos a la opción que pone Item Order. Ahí debéis de llevar todo lo que se debe de quedar debajo, es decir los Group Box y el Rectangle a una posición mas alta que lo que va a contener.

También debeis de tener en cuenta en marcar los tabuladores sobre los campos de nuestro fichero y no sobre lo demás, además en el mismo orden en que los hemos colocado. Una muestra de como debe quedar se muestra en ésta imagen.

Item Order

Los que tienen el triángulo en negro, son los controles sobre los que nos moveremos al pulsar la tecla TAB. Se ponen con Set Tab y se quitar con Reset Tab. Dejad solo los que hacen referencia a los Picture Edit.

CONCLUSION

Llegados aquí os hago una pregunta: ¿Vamos bien ?. Es que no es fácil explicar en la distancia y sobre papel y no quisiera que os perdierais o se quedara algo sin explicar con claridad. Si una vez leido todo lo aquí expuesto, probáis a compilar y ejecutar y algo no funciona, me lo comunicais y lo modifico al instante.