CURSO: PROGRAMACIN LGICA

CATEDRTICO: ING. SAL PREZ VEGA

VISUAL PROLOG + GUI

MARZO 2015

Facultad de Ingeniera de Sistemas y Electrnica

Ing. Sal Prez Vega

Contenido
CURSO: PROGRAMACIN LGICA ................................................................................ 1
1.
OBJETIVOS......................................................................................................... 3
2.
INTRODUCCION ............................................................................................... 3
3.
CREANDO LA APLICACIN ........................................................................... 4
4.
DISEAR LA VENTANA PRINCIPAL ............................................................ 6
5.
INSERTAR CODIGO EN EL PROGRAMA ...................................................... 8
6.
EJECUTAR LA APLICACIN Y ELIMINAR COMPONENTES
ADICIONALES ........................................................................................................... 12
7.
Ejercicio propuesto ............................................................................................. 15

Facultad de Ingeniera de Sistemas y Electrnica

Ing. Sal Prez Vega

1. OBJETIVOS

2. INTRODUCCION

Los objetivos de esta gua son:

Inducir al alumno en la programacin

visual.

Conocer los elementos necesarios para

crear una aplicacin en Visual Prolog.

Introducir cdigo nuevo y trabajar

directamente con el experto de Visual
Prolog.

Disear una aplicacin nueva

representar una calculadora.

que

Las aplicaciones realizadas bajo un entorno

visual nos da la facilidad de crear programas
orientados a eventos bajo un sistema
operativo Windows.
Como la mayora de los lenguajes visuales,
Visual Prolog dispone de creacin de
programas en forma visual con lo cual el
programador se preocupar solamente de
especificar las tareas que llevara a cabo la
aplicacin en cuestin, ya que el cdigo es
generado automticamente 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 cdigo 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 gua se pretende entregar las
herramientas necesarias para construir una
aplicacin sencilla en Visual Prolog, y as
inicializar al alumno en el mundo de la
programacin Visual.

Facultad de Ingeniera de Sistemas y Electrnica

Ing. Sal Prez Vega

3. CREANDO LA APLICACIN
Cuando desarrollamos cualquier aplicacin 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 opcin New Project del men Project.

El dialogo que aparece nos permite configurar el mtodo de desarrollo de la aplicacin en
curso de una forma muy sencilla.

Facultad de Ingeniera de Sistemas y Electrnica

Ing. Sal Prez Vega

Figura: Aspecto de creacin de ejemplo Calculadora

En el cuadro de arriba se ven diferentes pestaas que pertenecen al dialogo de creacin de la
aplicacin, la configuracin de ellas van directamente ligadas a como queremos representar
nuestro programa.
A continuacin se explican cada uno de los cuadros de la Figura de arriba.
3.1 Pestaa General
En esta pestaa se identifican el nombre del proyecto y el directorio en el cual va a
estar situada nuestra aplicacin.
En el caso de nuestro ejemplo el nombre del proyecto ser CalculadoraUTP y el
directorio base ser un directorio nuevo y vaco, es recomendable tener cada
proyecto con cada directorio distinto.
3.2 Pestaa Target
En esta pestaa se configura el tipo de plataforma donde se ejecutar el programa,
el tipo de estrategia de interfaz de usuario que se utilizar, la aplicacin que se
pretende generar por ejemplo un archivo exe o una dll y por ltimo seleccionar el
lenguaje de programacin que se utilizara para generar el programa principal.
Para todos nuestros ejemplos las opciones siempre sern las mismas, es decir, el
tipo de plataforma deber ser Windows32, UI Strategy ser de modo VPI de lo
contrario el mtodo de programacin no ser ni visual ni orientado a eventos y se
comportara como una aplicacin realizada para DOS, en Target Type
seleccionaremos exe ya que es de este tipo la aplicacin que vamos a generar y
en Main Program el lenguaje utilizado ser Prolog.
3.3 Pestaa VPI Options
En esta pestaa 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 aplicacin es de

modo MDI o no, para nuestro ejemplo no vamos a utilizar el modo MDI ya que
la dificultad la tenemos al momento de agregar objetos a nuestra aplicacin

Facultad de Ingeniera de Sistemas y Electrnica

Ing. Sal Prez Vega

como botones, cuadros de edicin, botones de seleccin, 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 aplicacin
van a ser visto en modo tridimensional.
Toolbar and Help Line: determina si la aplicacin tendr una barra de
herramientas y una lnea 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 programacin Visual y no escribir ni leer como si
fuera por DOS.

3.4 Pestaa User Info

Aqu se especifican datos como por ejemplo el nombre de la compaa, el nombre
del autor, la versin de nuestra aplicacin y una breve descripcin de nuestro
programa.
Las pestaas restantes Other Options y Help Maker se deben dejar tal como estn, ya que son
especificaciones para construir aplicaciones mas avanzadas como por ejemplo conectividad con
base de datos, cambiar el generador de cdigo, etc.
Terminados estos pasos presionamos el botn Create momento en que nuestra aplicacin 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 aplicacin.
En la parte derecha aparecen los botones que
nos permiten editar y eliminar componentes que
fueron anteriormente aadidos, as como
tambin acceder a la ventana del cdigo experto
que nos permite insertar cdigo fcilmente a
nuestra aplicacin.
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
debern ser borrados ya que vern afectado el
normal funcionamiento de la aplicacin.

4. DISEAR LA VENTANA PRINCIPAL

Una vez terminados todos los pasos anteriores, lo que nos interesa es comenzar a disear 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 fcil y rpida ser realizando los siguientes pasos:

Facultad de Ingeniera de Sistemas y Electrnica

Ing. Sal Prez Vega

Dirigirse al botn situado en la parte izquierda

llamado Window que nos mostrara todas las
ventanas actuales que existen en el programa,
cmo 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
diseo de nuestras ventanas.

CONTROLS nos proporciona

un conjunto de controles que
podemos pegar en la ventana

LAYOUT provee herramientas

para colocar los elementos dentro
de la ventana

La ventana principal de nuestra aplicacin tendr el siguiente aspecto tras haber pegado los
controles adecuados, despus de la figura de abajo se especifican los nombres con que fueron
identificados para luego ocuparlos en el cdigo principal.
Los controles que son identificados son aquellos que nos permitirn interactuar al usuario con el
sistema y no aquellos que solamente cumplan con la funcin de proporcionar informacin como por
ejemplo una etiqueta esttica.

Facultad de Ingeniera de Sistemas y Electrnica

Ing. Sal Prez Vega

Edit Control

Static Text
Push Button

Group Box

La identificacin 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 Multiplicacin idc_multiplicacion
El Push Button Divisin idc_division
El Push Button Salir idc_salir

El nombre de los controles es importante ya que los identifica en el cdigo para poder
diferenciarlos.

5. INSERTAR CODIGO EN EL PROGRAMA

Al momento de la creacin de un programa Visual Prolog crea 2 archivos (como se dijo
anteriormente), cada uno de los cuales contiene cdigo que sirve para le ejecucin de un programa
en particular, el cdigo que se insertara deber hacerse con mucho cuidado ya que suceder que
la aplicacin no correr y darse cuenta donde esta el error es algo realmente difcil de encontrar.

Facultad de Ingeniera de Sistemas y Electrnica

Ing. Sal Prez Vega

Para insertar cdigo nos dirigimos al Experto de

Visual Prolog, el cual nos proporciona las
herramientas para no perdernos en la edicin,
modificacin e insercin de cdigo.

Para ellos presionamos el botn Code

Expert situado en la parte derecha de la
imagen del lado izquierdo.

Lo primero que vamos a hacer ser habilitar el botn Suma para que una vez ingresados los dos
nmeros en los casilleros de edicin aparezca el resultado en el Edit Control idc_resultado.
Pasos:
Una vez presionado el botn Code Expert
aparece un dialogo llamado Dialogo Experto que
nos permite agregar el cdigo que queramos en
la posicin que determinemos.

Cmo el botn 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 botn presionamos el botn
Add Clause.

Facultad de Ingeniera de Sistemas y Electrnica

Ing. Sal Prez Vega

Despus de presionado el botn Add

Clause este cambia a ser llamado Edit
Clause y lo presionamos para poder
ingresar cdigo al evento del botn
Sumar.

Nos enva directamente al evento del botn idc_suma :

%BEGIN Task Window, idc_suma _CtlInfo
task_win_eh(_Win,e_Control(idc_suma,_CtrlType,_CtrlWin,_CtlInfo),0):-!,
%Aqu es dnde ingresaremos cdigo para habilitar el botn 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 botn 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 clculos correctamente y alguna clusula falla debido a un mal ingreso de los datos por
parte del usuario, por tanto el Prolog buscar la siguiente clusula para satisfacer que en este caso
es la que visualiza un pequeo 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 clusula, sin embargo si se realiza con
varias como va ser el caso de Dividir hay que eliminar el primer corte para permitir la bsqueda de
nuevas soluciones a travs del proceso de backtracking.
El cdigo a ingresar para que el botn 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),
Nro2=win_GetText(Nro2_Texto),
str_int(Nro1,Numero1), %pasar Nro1 de string a entero llamado Numero1

10

Facultad de Ingeniera de Sistemas y Electrnica

Ing. Sal Prez Vega

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 explicacin de las instrucciones de arriba son las siguientes:

win_GetCtlHandle(_Win,idc_numero1), esta instruccin 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 edicin

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 an no se entiende que es un manejador, hay que aclarar que cada ventana o control tiene un
nmero que lo identifica dentro del sistema, ese nmero se denomina manejador (handler) de la
ventana o control.
Quedar como ejercicio los botones de resta y multiplicacin, completar la codificacin. Para el
botn de divisin ser necesario controlar y validar una divisin entre cero.
El proceso de edicin del cdigo es exactamente igual que los botones anteriores en la primera
parte, por lo tanto iremos directamente a la edicin de los eventos:
%BEGIN Task Window, idc_division _CtlInfo
task_win_eh(_Win,e_Control(idc_division,_CtrlType,_CtrlWin,_CtlInfo),0):-!,
%Punto para agregar cdigo
!.
%END Task Window, idc_division _CtlInfo
En el caso de la divisin hay que controlar cuando el segundo numero es cero, para ello
preguntamos en cada situacin, si el numero es distinto de cero, se realiza la operacin de lo
contrario se obviaran los clculos siguientes a la condicin.
El cdigo para el botn divisin 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, %Condicin si Numero2 es distinto de cero
Divide=Numero1/Numero2,
str_real(Divide_Texto,Divide), %Transforma se Real a String
win_SetText(Resultado,Divide_Texto),

11

Facultad de Ingeniera de Sistemas y Electrnica

Ing. Sal Prez Vega

!.
%END Task Window, idc_division _CtlInfo
Todas las instrucciones anteriores son las mismas que las anteriores por lo tanto no necesitan una
nueva explicacin.
La reutilizacin de variables se puede hacer sin ninguna preocupacin, ya que no se confunden los
nuevos valores con los antiguos.
Por ltimo (en la etapa de insercin de cdigo) queda implementar el botn Salir que como su
nombre lo dice nos permitir salir y cerrar por completo la aplicacin que esta siendo ejecutada.
El proceso de edicin de la clusula perteneciente al botn Salir es similar a la de los botones
Sumar y Dividir, por lo que se mostrara a continuacin solamente el cdigo editado :
%BEGIN Task Window, idc_salir _CtlInfo
task_win_eh(_Win,e_Control(idc_salir,_CtrlType,_CtrlWin,_CtlInfo),0):-!,
%Punto para agregar cdigo al botn Salir
!.
%END Task Window, idc_salir _CtlInfo
Las instrucciones para cerrar la aplicacin es la siguiente:
win_Destroy(_Win), que recibe como parmetro el indicador de la ventana que esta siendo
ejecutada. Por lo tanto el evento del botn 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

6. EJECUTAR LA APLICACIN Y ELIMINAR COMPONENTES

ADICIONALES
Lo primero que vamos a hacer ser eliminar los componentes que no son necesarios en la
ejecucin de la aplicacin que estamos tratando, ya que son temas mas avanzados que sern
utilizados mas adelante en otras guas.
Eliminacin de men emergente
Para la eliminacin de los mens emergentes que no estn siendo utilizados se realizan los
siguientes pasos:

12

Facultad de Ingeniera de Sistemas y Electrnica

Ing. Sal Prez Vega

 Nos dirigimos al botn 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
cdigo
introducido
automticamente por el sistema, para ello
presionamos el botn 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
Clusula asignada por el sistema, ya que la
tendremos que ir eliminando una por una.

Por ejemplo el elemento llamado id_file_exit

posee cdigo ya que se habilitan los botones
llamados Edit Clause y Delete Clause.

Precisamente
para
borrar
el
cdigo
perteneciente al submen presionamos el
botn 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:

13

Lo que queda es eliminar cada uno de los

submens situados en la parte central.

Para eliminarlos presionamos solamente

el botn 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.

Facultad de Ingeniera de Sistemas y Electrnica

Ing. Sal Prez Vega

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

o simplemente presionamos la tecla F9.

As el aspecto de nuestra aplicacin en modo usuario es de la siguiente manera:

Ejecutar el archivo EXE.

14

Facultad de Ingeniera de Sistemas y Electrnica

Ing. Sal Prez Vega

7.

Ejercicio propuesto:

realizar otro proyecto GUI que pueda generar el siguiente

formulario.

15

Facultad de Ingeniera de Sistemas y Electrnica

Ing. Sal Prez Vega