guiprolog

13
EL ENTORNO DE PROGRAMACIÓN EN VISUAL PROLOG 1 Facultad de Ingeniería del Software Ing. Saúl Pérez Vega OBJETIVOS INTRODUCCION Los objetivos de esta guía son: Inducir al alumno en la programación visual. Conocer los elementos necesarios para crear una aplicación en Visual Prolog. Introducir código nuevo y trabajar directamente con el experto de Visual Prolog. Diseñar una aplicación nueva que representará una calculadora. Las aplicaciones realizadas bajo un entorno visual nos da la facilidad de crear programas orientados a eventos bajo un sistema operativo Windows. Como la mayoría de los lenguajes visuales, Visual Prolog dispone de creación de programas en forma visual con lo cual el programador se preocupará solamente de especificar las tareas que llevara a cabo la aplicación en cuestión, ya que el código es generado automáticamente por el Experto del entorno de desarrollo. En las aplicaciones Windows las operaciones son producidas mediante eventos como por ejemplo, pulsar una tecla, mover el mouse, etc. Para cada evento debe existir un manejador, que contiene el código que se ha de ejecutar tras producirse un suceso al que se encuentra vinculado, si el programador no define un manejador propio para un evento cualquiera, dicho evento es tratado por defecto por el sistema. En esta guía se pretende entregar las herramientas necesarias para construir una aplicación sencilla en Visual Prolog, y así inicializar al alumno en el mundo de la programación Visual.

Upload: sistemaspv

Post on 27-Oct-2015

102 views

Category:

Documents


2 download

DESCRIPTION

Programacion de Interfaz de usuario

TRANSCRIPT

Page 1: GUIprolog

EL ENTORNO DE PROGRAMACIÓN EN VISUAL PROLOG

1 Facultad de Ingeniería del Software Ing. Saúl Pérez Vega

OBJETIVOS INTRODUCCION Los objetivos de esta guía son:

Inducir al alumno en la programación visual.

Conocer los elementos necesarios para crear una aplicación en Visual Prolog.

Introducir código nuevo y trabajar directamente con el experto de Visual Prolog.

Diseñar una aplicación nueva que representará una calculadora.

Las aplicaciones realizadas bajo un entorno visual nos da la facilidad de crear programas orientados a eventos bajo un sistema operativo Windows. Como la mayoría de los lenguajes visuales, Visual Prolog dispone de creación de programas en forma visual con lo cual el programador se preocupará solamente de especificar las tareas que llevara a cabo la aplicación en cuestión, ya que el código es generado automáticamente por el Experto del entorno de desarrollo. En las aplicaciones Windows las operaciones son producidas mediante eventos como por ejemplo, pulsar una tecla, mover el mouse, etc. Para cada evento debe existir un manejador, que contiene el código que se ha de ejecutar tras producirse un suceso al que se encuentra vinculado, si el programador no define un manejador propio para un evento cualquiera, dicho evento es tratado por defecto por el sistema. En esta guía se pretende entregar las herramientas necesarias para construir una aplicación sencilla en Visual Prolog, y así inicializar al alumno en el mundo de la programación Visual.

Page 2: GUIprolog

EL ENTORNO DE PROGRAMACIÓN EN VISUAL PROLOG

2 Facultad de Ingeniería del Software Ing. Saúl Pérez Vega

CREAR UNA APLICACIÓN DESDE CERO

Cuando desarrollamos cualquier aplicación en Visual Prolog el proceso de generar los archivos que van a componer nuestros programas se realiza siempre de la misma forma. Para ejecutar Visual Prolog, nos dirigimos al menú inicio, una vez dentro realizamos lo siguiente :

Presionamos la opción New Project del menú Project.

El dialogo que aparece nos permite configurar el método de desarrollo de la aplicación en curso de una forma muy sencilla.

Page 3: GUIprolog

EL ENTORNO DE PROGRAMACIÓN EN VISUAL PROLOG

3 Facultad de Ingeniería del Software Ing. Saúl Pérez Vega

Figura: Aspecto de creación de ejemplo Calculadora En el cuadro de arriba se ven diferentes pestañas que pertenecen al dialogo de creación de la aplicación, la configuración de ellas van directamente ligadas a como queremos representar nuestro programa. A continuación se explican cada uno de los cuadros de la Figura de arriba.

1. Pestaña General

En esta pestaña se identifican el nombre del proyecto y el directorio en el cual va a estar situada nuestra aplicación. En el caso de nuestro ejemplo el nombre del proyecto será CalculadoraUTP y el directorio base será un directorio nuevo y vacío, es recomendable tener cada proyecto con cada directorio distinto.

2. Pestaña Target

En esta pestaña se configura el tipo de plataforma donde se ejecutará el programa, el tipo de estrategia de interfaz de usuario que se utilizará, la aplicación que se pretende generar por ejemplo un archivo exe o una dll y por último seleccionar el lenguaje de programación que se utilizara para generar el programa principal. Para todos nuestros ejemplos las opciones siempre serán las mismas, es decir, el tipo de plataforma deberá ser Windows32, UI Strategy será de modo VPI de lo contrario el método de programación no será ni visual ni orientado a eventos y se comportara como una aplicación realizada para DOS, en Target Type seleccionaremos exe ya que es de este tipo la aplicación que vamos a generar y en Main Program el lenguaje utilizado será Prolog.

3. Pestaña VPI Options

En esta pestaña se especifican si se incluyen o no ciertas opciones que son propias de la interfaz VPI, por ejemplo:

MDI MODE: especifica si la ventana principal de nuestra aplicación es de modo MDI o no, para nuestro ejemplo no vamos a utilizar el modo MDI ya que

Page 4: GUIprolog

EL ENTORNO DE PROGRAMACIÓN EN VISUAL PROLOG

4 Facultad de Ingeniería del Software Ing. Saúl Pérez Vega

la dificultad la tenemos al momento de agregar objetos a nuestra aplicación como botones, cuadros de edición, botones de selección, etc., en cambio una ventana en modo normal puede contener cualquier tipo de elementos.

3D Look for Controls: determina si los objetos que va a usar nuestra aplicación van a ser visto en modo tridimensional.

Toolbar and Help Line: determina si la aplicación tendrá una barra de herramientas y una línea de ayuda en la parte superior de la ventana.

Message Windows: especifica si se incluirá o no el cuadro de mensaje, nosotros no lo vamos a ocupar ya que lo que interesa es ocupar al cien por ciento las cualidades de la programación Visual y no escribir ni leer como si fuera por DOS.

4. Pestaña User Info

Aquí se especifican datos como por ejemplo el nombre de la compañía, el nombre del autor, la versión de nuestra aplicación y una breve descripción de nuestro programa.

Las pestañas restantes Other Options y Help Maker se deben dejar tal como están, ya que son especificaciones para construir aplicaciones mas avanzadas como por ejemplo conectividad con base de datos, cambiar el generador de código, etc. Terminados estos pasos presionamos el botón Create momento en que nuestra aplicación ha sido creada exitosamente, de inmediato deberá aparecer el siguiente dialogo:

En la parte izquierda de la figura se pueden apreciar los botones que nos permiten crear nuevos componentes para nuestra aplicación. En la parte derecha aparecen los botones que nos permiten editar y eliminar componentes que fueron anteriormente añadidos, así como también acceder a la ventana del código experto que nos permite insertar código fácilmente a nuestra aplicación. En la parte central aparecen dos archivos uno que siempre será VPItools.pro y otro llamado con el nombre del proyecto (en este caso Calculadora.pro), estos dos archivos nunca deberán ser borrados ya que verán afectado el normal funcionamiento de la aplicación.

1. DISEÑAR LA VENTANA PRINCIPAL Una vez terminados todos los pasos anteriores, lo que nos interesa es comenzar a diseñar nuestro programa, para eso vamos a utilizar la Task Windows como ventana única (esta ventana es creada por defecto y siempre estará presente en todos los programas), los pasos para poder construir de forma fácil y rápida será realizando los siguientes pasos:

Page 5: GUIprolog

EL ENTORNO DE PROGRAMACIÓN EN VISUAL PROLOG

5 Facultad de Ingeniería del Software Ing. Saúl Pérez Vega

Dirigirse al botón situado en la parte izquierda llamado Window que nos mostrara todas las ventanas actuales que existen en el programa, cómo no se ha creado ninguna ventana aparece siempre la ventana principal o Task Window que es sobre la cual vamos a trabajar:

Dar doble clic sobre el elemento Task Window en la parte central de la figura, de inmediato aparece la ventana principal, para trabajar sobre ella.

Aparece la Ventana principal con un panel y una serie de componentes que podemos utilizar en el diseño de nuestras ventanas.

La ventana principal de nuestra aplicación tendrá el siguiente aspecto tras haber pegado los controles adecuados, después de la figura de abajo se especifican los nombres con que fueron identificados para luego ocuparlos en el código principal. Los controles que son identificados son aquellos que nos permitirán interactuar al usuario con el sistema y no aquellos que solamente cumplan con la función de proporcionar información como por ejemplo una etiqueta estática.

CONTROLS nos proporciona un conjunto de controles que podemos pegar en la ventana

LAYOUT provee herramientas para colocar los elementos dentro de la ventana

Page 6: GUIprolog

EL ENTORNO DE PROGRAMACIÓN EN VISUAL PROLOG

6 Facultad de Ingeniería del Software Ing. Saúl Pérez Vega

La identificación de cada uno de los controles es la siguiente:

El primer Group Box será llamado idc_ingreso_de_datos

El segundo Group Box será llamado idc_resultados_obtenidos

El primer Edit Control será llamado idc_numero1

El segundo Edit Control idc_numero2

El Edit Control que tendrá el resultado idc_resultado

El Push Button Suma idc_suma

El Push Button Resta idc_resta

El Push Button Multiplicación idc_multiplicacion

El Push Button División idc_division

El Push Button Salir idc_salir El nombre de los controles es importante ya que los identifica en el código para poder diferenciarlos.

2. INSERTAR CODIGO EN EL PROGRAMA

Al momento de la creación de un programa Visual Prolog crea 2 archivos (como se dijo anteriormente), cada uno de los cuales contiene código que sirve para le ejecución de un programa en particular, el código que se insertara deberá hacerse con mucho cuidado ya que sucederá que la aplicación no correrá y darse cuenta donde esta el error es algo realmente difícil de encontrar.

Push Button

Edit Control

Group Box

Static Text

Page 7: GUIprolog

EL ENTORNO DE PROGRAMACIÓN EN VISUAL PROLOG

7 Facultad de Ingeniería del Software Ing. Saúl Pérez Vega

Para insertar código nos dirigimos al Experto de Visual Prolog, el cual nos proporciona las herramientas para no perdernos en la edición, modificación e inserción de código.

Para ellos presionamos el botón Code Expert situado en la parte derecha de la imagen del lado izquierdo.

Lo primero que vamos a hacer será habilitar el botón Suma para que una vez ingresados los dos números en los casilleros de edición aparezca el resultado en el Edit Control idc_resultado. Pasos:

Una vez presionado el botón Code Expert aparece un dialogo llamado Dialogo Experto que nos permite agregar el código que queramos en la posición que determinemos.

Cómo el botón Suma es un Control nos dirigimos al elemento Control del cuadro de lista Event Type situado en la parte inferior izquierda de la figura adyacente.

En la lista Event Or Item aparece el elemento idc_suma, que es cual nos interesa.

Para editar el evento que llevara al presionar el botón presionamos el botón Add Clause.

Page 8: GUIprolog

EL ENTORNO DE PROGRAMACIÓN EN VISUAL PROLOG

8 Facultad de Ingeniería del Software Ing. Saúl Pérez Vega

Después de presionado el botón Add Clause este cambia a ser llamado Edit Clause y lo presionamos para poder ingresar código al evento del botón Sumar.

Nos envía directamente al evento del botón idc_suma :

%BEGIN Task Window, idc_suma _CtlInfo task_win_eh(_Win,e_Control(idc_suma,_CtrlType,_CtrlWin,_CtlInfo),0):-!, %Aquí es dónde ingresaremos código para habilitar el botón sumar. !. %END Task Window, idc_suma _CtlInfo

La cabecera del evento ha sido generada por el sistema y el objeto e_Control(idc_suma,_CtrlType,_CtrlWin,_CtrlInfo) nos informa de que ha sido el botón el que ha producido el evento. Este evento se va a tratar de dos maneras, si la primera falla es porque el programa no puede hacer los cálculos correctamente y alguna cláusula falla debido a un mal ingreso de los datos por parte del usuario, por tanto el Prolog buscará la siguiente cláusula para satisfacer que en este caso es la que visualiza un pequeño dialogo de error. Se puede observar que hay dos cortes llamado Cut (!), uno al principio y otro al final. Esto debe dejarse así si el manejo de eventos se realiza con una sola cláusula, sin embargo si se realiza con varias como va ser el caso de Dividir hay que eliminar el primer corte para permitir la búsqueda de nuevas soluciones a través del proceso de backtracking. El código a ingresar para que el botón Suma haga lo que nosotros realmente queremos es el siguiente:

%BEGIN Task Window, idc_suma _CtlInfo task_win_eh(_Win,e_Control(idc_suma,_CtrlType,_CtrlWin,_CtlInfo),0):-!, Nro1_Texto=win_GetCtlHandle(_Win,idc_numero1), Nro2_Texto=win_GetCtlHandle(_Win,idc_numero2), Resultado=win_GetCtlHandle(_Win,idc_resultado), Nro1=win_GetText(Nro1_Texto),

Page 9: GUIprolog

EL ENTORNO DE PROGRAMACIÓN EN VISUAL PROLOG

9 Facultad de Ingeniería del Software Ing. Saúl Pérez Vega

Nro2=win_GetText(Nro2_Texto), str_int(Nro1,Numero1), %pasar Nro1 de string a entero llamado Numero1 str_int(Nro2,Numero2), %pasar Nro2 de string a entero llamado Numero2 Suma=Numero1+Numero2, str_int(Suma_Texto,Suma), %pasar Suma de entero a string llamado Suma _Texto win_SetText(Resultado,Suma_Texto), !. %END Task Window, idc_suma _CtlInfo

La explicación de las instrucciones de arriba son las siguientes:

win_GetCtlHandle(_Win,idc_numero1), esta instrucción permite obtener el manejador del

control llamado idc_numero1, para así poder leer lo que tiene el cuadro de mensaje.

win_GetText(Nro1_Texto), permite obtener lo que esta escrito en el cuadro de edición

que tiene como manejador Nro1_Texto y lo almacena en una variable distinta.

win_SetText(Resultado,Suma_Texto), permite escribir en el cuadro de texto que tiene

como manejador Resultado, lo que está almacenado en la variable Suma_Texto que tiene que ser string para poder mostrarla.

Si aún no se entiende que es un manejador, hay que aclarar que cada ventana o control tiene un número que lo identifica dentro del sistema, ese número se denomina manejador (handler) de la ventana o control. Quedará como ejercicio los botones de resta y multiplicación, completar la codificación. Para el botón de división será necesario controlar y validar una división entre cero. El proceso de edición del código es exactamente igual que los botones anteriores en la primera parte, por lo tanto iremos directamente a la edición de los eventos:

%BEGIN Task Window, idc_division _CtlInfo task_win_eh(_Win,e_Control(idc_division,_CtrlType,_CtrlWin,_CtlInfo),0):-!, %Punto para agregar código !. %END Task Window, idc_division _CtlInfo

En el caso de la división hay que controlar cuando el segundo numero es cero, para ello preguntamos en cada situación, si el numero es distinto de cero, se realiza la operación de lo contrario se obviaran los cálculos siguientes a la condición. El código para el botón división debiera ser el siguiente:

%BEGIN Task Window, idc_division _CtlInfo task_win_eh(_Win,e_Control(idc_division,_CtrlType,_CtrlWin,_CtlInfo),0):-!, Nro1_Texto=win_GetCtlHandle(_Win,idc_numero1), Nro2_Texto=win_GetCtlHandle(_Win,idc_numero2), Resultado=win_GetCtlHandle(_Win,idc_resultado), Nro1=win_GetText(Nro1_Texto), Nro2=win_GetText(Nro2_Texto), str_int(Nro1,Numero1), str_int(Nro2,Numero2), Numero2<>0, %Condición si Numero2 es distinto de cero

Page 10: GUIprolog

EL ENTORNO DE PROGRAMACIÓN EN VISUAL PROLOG

10 Facultad de Ingeniería del Software Ing. Saúl Pérez Vega

Divide=Numero1/Numero2, str_real(Divide_Texto,Divide), %Transforma se Real a String win_SetText(Resultado,Divide_Texto), !. %END Task Window, idc_division _CtlInfo

Todas las instrucciones anteriores son las mismas que las anteriores por lo tanto no necesitan una nueva explicación. La reutilización de variables se puede hacer sin ninguna preocupación, ya que no se confunden los nuevos valores con los antiguos. Por último (en la etapa de inserción de código) queda implementar el botón Salir que como su nombre lo dice nos permitirá salir y cerrar por completo la aplicación que esta siendo ejecutada. El proceso de edición de la cláusula perteneciente al botón Salir es similar a la de los botones Sumar y Dividir, por lo que se mostrara a continuación solamente el código editado :

%BEGIN Task Window, idc_salir _CtlInfo task_win_eh(_Win,e_Control(idc_salir,_CtrlType,_CtrlWin,_CtlInfo),0):-!, %Punto para agregar código al botón Salir !. %END Task Window, idc_salir _CtlInfo

Las instrucciones para cerrar la aplicación es la siguiente: win_Destroy(_Win), que recibe como parámetro el indicador de la ventana que esta siendo ejecutada. Por lo tanto el evento del botón Salir queda de la siguiente manera:

%BEGIN Task Window, idc_salir _CtlInfo task_win_eh(_Win,e_Control(idc_salir,_CtrlType,_CtrlWin,_CtlInfo),0):-!, win_Destroy(_Win), !. %END Task Window, idc_salir _CtlInfo

3. EJECUTAR LA APLICACIÓN Y ELIMINAR COMPONENTES ADICIONALES Lo primero que vamos a hacer será eliminar los componentes que no son necesarios en la ejecución de la aplicación que estamos tratando, ya que son temas mas avanzados que serán utilizados mas adelante en otras guías. Eliminación de menú emergente Para la eliminación de los menús emergentes que no están siendo utilizados se realizan los siguientes pasos:

Page 11: GUIprolog

EL ENTORNO DE PROGRAMACIÓN EN VISUAL PROLOG

11 Facultad de Ingeniería del Software Ing. Saúl Pérez Vega

Nos dirigimos al botón menú situado en la parte izquierda de la pantalla.

Aparece un elemento llamado Task Menú en el centro del Experto.

Para borrar el menú tenemos que ir eliminando los submenú y el código introducido automáticamente por el sistema, para ello presionamos el botón Code Expert.

Aparece la figura situada en la parte izquierda de la pantalla, lo primero es dirigirnos al Event Type, llamado Menú.

En la parte central aparece una lista de elementos que pertenecen al menú principal, lo que nos interesa son aquellos que tienen Cláusula asignada por el sistema, ya que la tendremos que ir eliminando una por una.

Por ejemplo el elemento llamado id_file_exit posee código ya que se habilitan los botones llamados Edit Clause y Delete Clause.

Precisamente para borrar el código perteneciente al submenú presionamos el botón Delete Clause.

Terminado el paso anterior nos queda eliminar por completo los submenú para ello hacemos doble clic en el elemento del experto llamado Task Menú, teniendo que aparecer la siguiente ventana:

Lo que queda es eliminar cada uno de los submenús situados en la parte central.

Para eliminarlos presionamos solamente el botón Del, situado en la parte izquierda de la pantalla.

Se hace lo mismo con cada uno de los tres elementos situados en la parte central.

Page 12: GUIprolog

EL ENTORNO DE PROGRAMACIÓN EN VISUAL PROLOG

12 Facultad de Ingeniería del Software Ing. Saúl Pérez Vega

Terminados correctamente con los pasos anteriores estamos en condiciones de ejecutar nuestra aplicación, para ello nos dirigimos a la barra de herramientas y presionamos el botón Run

o simplemente presionamos la tecla F9. Así el aspecto de nuestra aplicación en modo usuario es de la siguiente manera:

Ejecutar el archivo EXE.

Page 13: GUIprolog

EL ENTORNO DE PROGRAMACIÓN EN VISUAL PROLOG

13 Facultad de Ingeniería del Software Ing. Saúl Pérez Vega

Ejercicio propuesto: realizar otro proyecto GUI que pueda generar el siguiente formulario.