Primeramente deberemos de iniciar nuestro programa, para eso dar click en el Menú Inicio – Programas – IBM CODE y VisualAge RPG 6.0 – VisualAge RPG – Diseñador GUI, algo así:
Una vez dado click comenzara a cargar el programa mostrándonos una ventana de bienvenida, teniendo así:
Una vez que se cierre la ventana de bienvenida nos mostrara la ventana de trabajo de Visual Age, teniendo así:
Ahora comenzaremos a darle un nombre a nuestra ventana con lienzo, para eso damos click derecho en la ventana de lienzo, y elegimos Propiedades, teniendo así:
Una vez dado click nos mostrara la ventana 1 en la cual en Nombre de pieza pondremos el nombre de nuestra ventana de lienzo (en nuestro caso FRMAPP01) y en Titulo pondremos Ejercicio de Aplicación, teniendo como la ventana 2.
Una vez terminado de definir lo de la ventana 2 dar click al botón Aceptar, teniendo así:
Ahora definir el sgte diseño:
Una vez definido el diseño daremos doble click al componente Texto Estático, al hacerlo tendremos como la ventana 1 en la cual en Texto definiremos Suma de dos Números, teniendo como la ventana 2:
Ahora si deseamos dar un formato al Texto Estático damos click a la pestaña Font, teniendo como la ventana 3 en la cual daremos click al botón Cambiar Font, al hacerlo nos mostrara una ventana donde especificaremos el formato deseado, teniendo como la ventana 4:
Una vez terminado de definir lo de la ventana 4 dar click al botón OK, volveremos a la ventana 3 en la cual darás click al botón Aceptar, la ventana de lienzo estará así:
Ahora daremos doble click al componente Texto Estático que está encerrado en el recuadro rojo, al hacerlo tendremos como la ventana 1 en la cual en Texto definiremos Ingrese Num1, teniendo como la ventana 2:
Una vez definido lo anterior dar click al botón Aceptar. Ahora daremos doble click al Texto Estático, al hacerlo tendremos como la ventana 1 en la cual en Texto definiremos Ingrese Num2, teniendo como la ventana 2:
Una vez definido lo anterior dar click al botón Aceptar. Ahora daremos doble click al componente Texto Estático, al hacerlo tendremos como la ventana 1 en la cual en Texto definiremos Resultado Operación, teniendo como la ventana 2:
Ahora si deseamos dar un formato al Texto Estático damos click a la pestaña Font, teniendo como la ventana 3 en la cual daremos click al botón Cambiar Font, al hacerlo nos mostrara una ventana donde especificaremos el formato deseado, teniendo como la ventana 4:
Una vez terminado de definir lo de la ventana 4 dar click al botón OK, volveremos a la ventana 3 en la cual darás click al botón Aceptar.
Ahora daremos doble click al componente Texto Estático, al hacerlo tendremos como la ventana 1 en la cual en Texto definiremos La suma es:, teniendo como la ventana 2:
Una vez definido lo anterior dar click al botón Aceptar, teniendo nuestro lienzo así:
Ahora daremos doble click al componente Texto estático que está encerrado en el recuadro verde, al hacerlo nos mostrara la ventana 1 en la cual en Nombre de pieza pondremos LBLSUMA teniendo como la ventana 2.
Como en este Texto estático se va a mostrar un resultado numérico, lo que debemos de hacer es definir el tipo de dato y longitud a mostrar, para eso damos click a la pestaña Datos y tendremos como la ventana 3, para nuestro caso definiremos que este Texto Estático tenga una longitud de 5 y cuyo Tipo sea Numérico, teniendo como la ventana 4.
Una vez definido todo en la ventana 4 dar click al botón Aceptar, teniendo nuestro lienzo así:
Ahora damos doble click al componente Campo de Entrada que está encerrado en el recuadro azul, al hacerlo tendremos como la ventana 1, seguidamente en Nombre de pieza definir como nombre TXTNUM1 y en Texto de sugerencia definir Ingrese Primer Numero, así como la ventana 2:
Como en este Campo de Entrada se va a ingresar un dato numérico, lo que debemos de hacer es definir el tipo de dato y longitud a ingresar, para eso damos click a la pestaña Datos y tendremos como la ventana 3, para nuestro caso definiremos que este Texto caja tenga una longitud de 3 y cuyo Tipo sea Numérico, teniendo como la ventana 4:
Una vez definido todo en la ventana 4 dar click al botón Aceptar, teniendo nuestro lienzo así:
Ahora damos doble click al componente Pulsador que está en el lado izquierdo del lienzo, al hacerlo tendremos como la ventana 1, seguidamente en Nombre de pieza definir como nombre BTNLIMP y en Etiqueta definir &Limpiar, teniendo como la ventana 2:
Una vez definido todo en la ventana 2 dar click al botón Aceptar, teniendo nuestro lienzo así:
Ahora damos doble click al componente Pulsador que está en el lado derecho del lienzo, al hacerlo tendremos como la ventana 1, seguidamente en Nombre de pieza definir como nombre BTNCALC y en Etiqueta definir &Calcular, teniendo como la ventana 2:
Una vez definido todo en la ventana 2 dar click al botón Aceptar, teniendo nuestro lienzo así:
Ahora para poder ver el código fuente de nuestra aplicación solo bastara dando click en el menú Proyecto y click en Editar código fuente, teniendo así:
Una vez dado click nos mostrara el Editor de código del Visual Age, teniendo así:
A continuación vamos a definir 2 variables de tipo entero, las cuales almacenaran los dos números que ingresare en cada caja de texto, para esto debajo de la Hoja Hla Hoja D (Recuerda que en la Hoja D
Una vez definida la hoja presionar la tecla de función F4, al hacerlo nos mostrara la ventana de Definición, teniendo así:
Ahora mediante esta ventana definiremos lo sgte:
· Nombre de Entidad: En este caso es el Nombre de nuestra variable, constante o estructura de datos.
· Tipo de definición: Aquí defines si es variable, constante o estructura de datos.
· A/Longitud: Aquí defines la longitud de la variable, constante o estructura de datos.
· Tipo de datos interno: Aquí defines si la variable, constante es de tipo Numérico o Alfanumérico.
· Posiciones decimales: Aquí defines la posición de decimales (Solo para campos numéricos).
En nuestro caso defino una variable de tipo entero sin parte decimal de longitud 3 llamado NUM1, teniendo así:
Una vez definido lo anterior dar click al botón Aceptar, teniendo en nuestro editor de código así:
Ahora procederemos a insertar una nueva línea, para eso ubicarte en la primera posición de la línea en la cual se declaro la primera variable y digitar la letra I (Recuerda que este mandato me permite crear una nueva línea), teniendo así:
Una vez definido el mandato a nivel de línea presionar la tecla ENTER, teniendo así:
Ahora definiremos nuestra segunda variable, para eso definimos la Hoja D (Recuerda que en la Hoja D
Una vez definida la hoja presionar la tecla de función F4, al hacerlo nos mostrara la ventana de Definición, teniendo así:
Ahora definiremos una variable de tipo entero sin parte decimal de longitud 3 llamada NUM2, teniendo así:
Una vez definido lo anterior dar click al botón Aceptar, teniendo en nuestro editor de código así:
Una vez definida nuestras dos variables a utilizar procederemos a cerrar nuestro editor de código, para esto daremos click al botón Cerrar (X), al hacerlo nos mostrara el sgte mensaje el cual nos indicara si deseamos guardar los cambios realizados, teniendo así:
Como deseamos guardar lo que hemos hecho daremos click al botón Yes, al hacerlo se cerrar dicha ventana y se guardara todo cambio efectuado.
Una vez dado click nos volverá a aparecer en editor de código con la diferencia que se creara en evento PRESS del botón BTNLIMP, teniendo así:
La programación para este botón es el sgte:
Explicación línea por línea:
· Línea 00037: Aquí inicia el evento PRESS del Pulsador o Botón llamado BTNLIMP, el cual está asociado a la ventana de lienzo llamada FRMAPP01. BEGACT indica el inicio del evento.
· Línea 00038: Aquí lo que se hace es limpiar el contenido de la caja de entrada llamada TXTNUM1 mediante el atributo TEXT de la ventana de lienzo FRMAPP01. El *ZEROS limpia campos numéricos.
· Línea 00039: Aquí lo que se hace es limpiar el contenido de la caja de entrada llamada TXTNUM2 mediante el atributo TEXT de la ventana de lienzo FRMAPP01. El *ZEROS limpia campos numéricos.
· Línea 00040: Aquí lo que se hace es limpiar el contenido del Texto Estático llamado LBLSUMA mediante el atributo LABEL de la ventana de lienzo FRMAPP01. El *ZEROS limpia campos numéricos.
· Línea 00041: Aquí lo que se hace es enfocar el cursor en la caja de entrada llamada TXTNUM1 mediante el atributo FOCUS de la ventana de lienzo FRMAPP01. Si se iguala a 1 que se enfoque, si se iguala a 0 que no se enfoque.
Una vez explicado cada línea cerraremos el editor de código, al hacerlo nos mostrara una ventana en la cual nos preguntara si deseamos guardar los cambios efectuados, teniendo así:
Como deseamos guardar lo que hemos hecho daremos click al botón Yes, al hacerlo se cerrar dicha ventana y se guardara todo cambio efectuado.
Ahora comenzaremos a programar nuestro Pulsador Calcular, el evento en el cual programaremos será el evento PRESS, para eso seleccionaremos el botón Calcular, damos click derecho, seleccionamos Eventos y finalmente elegimos PRESS, teniendo así:
Una vez dado click nos volverá a aparecer en editor de código con la diferencia que se creara en evento PRESS del botón BTNCALC, teniendo así:
La programación para este botón es el sgte:
Explicación línea por línea:
· Línea 00055: Aquí inicia el evento PRESS del Pulsador o Botón llamado BTNCALC, el cual está asociado a la ventana de lienzo llamada FRMAPP01. BEGACT indica el inicio del evento.
· Línea 00056: Aquí lo que se hace es capturar el contenido de la caja de entrada llamada TXTNUM1 mediante el atributo TEXT de la ventana de lienzo FRMAPP01, una vez capturado lo almaceno en la variable llamada NUM1.
· Línea 00057: Aquí lo que se hace es capturar el contenido de la caja de entrada llamada TXTNUM2 mediante el atributo TEXT de la ventana de lienzo FRMAPP01, una vez capturado lo almaceno en la variable llamada NUM2.
· Línea 00058 y Línea 00059: Aquí lo que se hace es asignar o mostrar la suma de las variables NUM1 y NUM2, esto se mostrara en el Texto Estático llamado LBLSUMA mediante el atributo LABEL de la ventana de lienzo FRMAPP01.
· Línea 00060: Aquí finaliza el evento PRESS del Pulsador o Botón llamado BTNCALC.
Como deseamos guardar lo que hemos hecho daremos click al botón Yes, al hacerlo se cerrar dicha ventana y se guardara todo cambio efectuado.
Ahora procederemos a crear una nueva carpeta llamada Proyectos Visual Age que estará creada en mi caso en la unidad D, teniendo así:
Una vez creada dicha carpeta daremos click al botón que se encuentra dentro del recuadro llamado Construir la versión Windows del proyecto, teniendo así:
A la hora que des click nos mostrara una ventana en la cual nos pedirá guardar, teniendo así:
Ahora dar click al botón Guardar, al hacerlo nos mostrara la sgte ventana:
Ahora daremos click al botón Buscar, al hacerlo nos mostrara la sgte ventana:
Ahora buscaremos la carpeta Proyectos Visual Age que creamos anteriormente, teniendo así:
Una vez elegida la carpeta dar click al botón Aceptar, teniendo así:
Ahora definir los sgtes parámetros:
Una vez terminado de definir todos los parámetros anteriores dar click al botón Aceptar, al hacerlo comenzara a construirse el Proyecto, teniendo así:
Ahora para ejecutar nuestro programa dar click al botón que se encuentra en el recuadro llamado Ejecutar el proyecto, teniendo así:
A la hora que des click se ejecutara nuestro programa en la cual ingresaremos dos números y al dar click al botón Calcular nos mostrara la suma de dichos números, teniendo así:
Si te fijaste cuando se ejecuto nuestro programa tanto en las cajas de texto como en los textos estáticos se muestran con ceros a la izquierda, esto no se ve muy apreciable verdad???.
Ahora procederemos a quitar esos ceros, para eso cerrar el programa que se ejecuto, para eso damos doble click al primer Campo de Entrada y seguir las sgtes pantallas en orden:
Una vez definido todos los pasos anteriores dar click al botón Aceptar, tendremos así:
Ahora damos doble click al segundo Campo de Entrada y seguir las sgtes pantallas en orden:
Una vez definido todo los pasos anteriores dar click al botón Aceptar. Ahora dar doble click al componente Texto Estático que muestra el resultado y seguir las sgtes pantallas:
Una vez definido todo los pasos anteriores dar click al botón Aceptar. Ahora para poder guardar todo cambio realizado y volver a construir el proyecto, dar click al botón Construir la versión Windows del proyecto, teniendo así:
A la hora que des click nos mostrara una ventana en la cual nos preguntara si deseamos guardar los cambios realizados, teniendo así:
Ahora dar click al botón Guardar, al hacerlo se construirá nuevamente nuestro proyecto, teniendo así:
Ahora dar click al botón OK. Para ejecutar el programa dar click al botón Ejecutar el Proyecto, teniendo así:
A la hora que des click nos cargara nuevamente nuestro programa con la diferencia que no se anteponen los ceros, teniendo así:
Ahora al dar click al botón Limpiar se limpiara todos los controles, teniendo así:
Objetivos del ejercicio:
· Conocer el entorno y lenguaje de lenguaje Visual Age For RPG.
· Creación y ejecución de un proyecto hecho en Visual Age For RPG.
· Conocer los componentes básicos como en Pulsador, Campo de entrada y Texto estático.
Con este último paso concluimos este manual.
Muy buen ejemplo nosotros tambien desarrollamos con VisualAge Rpg
ResponderEliminarHola !!!
ResponderEliminarNecesito VisualAge para RPG para poder realizar prácticas de un libro vintage. No consigo encontrar el programa por ninguna parte. ¿Alguien podría ayudarme por favor?