Está en la página 1de 14

750080M Fundamentos

de Programacin
paula.figueroa@correounivalle.edu.co

Contenido de la clase
1. Interfaces grficas de usuario (GUI)
2. Ventanas en Dr. Racket
3. Botones en Dr. Racket
4. Mensajes en Dr. Racket
5. Cuadros de Texto en Dr. Racket
6. Definiendo una ventana
7. Poner en accin un botn
8. Ejemplos

Interfaces grficas de usuario


(GUI)
Qu es una Interfaz?

Una interfaz es un medio de comunicacin, en este caso entre el


usuario del programa y el programador. Los usuarios que no tienen
experiencia en programacin no deben alterar el cdigo, por tanto se

crea para ellos una capa que permite recibir las entradas y llamar a
las funciones con los datos indicados.

Interfaces grficas de usuario


(GUI)
Cmo se construyen las Interfaces Grficas?
Para construir interfaces grficas en Dr. racket es necesario cargar el

paquete

de

enseanza

GUI.

El

programa

debe

constar

de

tres

partes

independientes:

vista: son aquellas funciones que se encargan de crear las ventanas

lgica: las funciones que resuelven el problema

controlador:

aquellas

funciones

que

se

encargan

de

conectar

la

informacin que se toma por medio de las interfaces, con las de la


lgica.

Interfaces grficas de usuario


(GUI)

El modelo anterior se llama: Vista-controlador. El archivo que tiene


un programa con interfaz grfica debe tener separadas cada una de las
partes.

Ventanas en Dr. Racket


Para hacer las ventanas, vamos a usar las funciones que provee el paquete
de enseanza GUI. Lo primero que tenemos que hacer es definir cuales
sern los componentes de una ventana. Veamos la siguiente ventana:

En esta ventana podemos encontrar: botones, cuadros de texto, etiquetas y


mensajes.
El paquete de enseanza provee funciones para crear todos los componentes
anteriores, y algunos ms, A continuacin se listan las ms importantes.
Note que la mayora de las funciones retornan un gui-item, que es uno de
los componentes de una ventana.

Botones en Dr. Racket


Para botones:
make-button : string (event% ->

true) ->

gui-item

;; crea una botn con un nombre (el string) y una funcin que
implementa la accin del botn.
El cdigo: (make-button aceptar accion-aceptar) crea un componente
de tipo botn con mensaje aceptar, su accin est dada por la funcin
accin-aceptar

Mensajes en Dr. Racket


;; make-message : string ->

gui-item

;; crean un componente de tipo mensaje. El mensaje est dado por


;; el string.
;; draw-message : gui-item[message%] string ->

true

;; Para to mostrar un mensaje en un componente de tipo mensaje


;; el mensaje borra el valor actual
; El cdigo
(make-message "Mi primera ventana") crea un componente de tipo mensaje que dice: Mi primera ventana
Si existe la siguiente declaracin:
(define mensaje1 (make-message "Mi primera ventana") )
El cdigo:
(draw-message mensaje1 El mensaje cambi) modifica el mensaje que haba en mensaje1 por El mensaje cambi

Cuadros de texto en Dr. Racket


Para cuadros de texto:
;; make-text : string ->

gui-item

;; Crea un componente de tipo campo de texto, en los campos de


;; texto se ingresan las entradas.
;; text-contents : gui-item[text%] ->

string

;; retorna un string que es lo que contiene un campo de texto

El cdigo:
(make-text Ingrese un Numero) crea un campo de texto con el mensaje Ingrese un Numero. suponga
la siguiente declaracin:
(define texto1 (make-text Ingrese un Numero) )
El cdigo:
(text-contents texto1) retorna lo que haya escrito en el campo de texto. El dato es de tipo string.

Ventanas en Dr. Racket


Para ventanas: las ventanas se crean usando una lista de listas de
componentes
; create-window : (listof (listof gui-item)) ->

true

;; crea una ventana, toma como entrada una lista de listas de


;; componentes de interfaz.
Ejemplo:
(create-window (list (list (make-message " Mi primera ventana"))
(list (make-button "Cerrar Ventana" cerrar))))

Ventanas en Dr. Racket


Crea la siguiente ventana:

Atencin: se asume que la funcin cerrar ya existe.

Poner accin a un botn


Cualquier funcin me sirve como accin de un botn? R/: NO. Las funciones que le dan accin a un botn
deben tener las siguientes caractersticas: Tienen una (solo una) entrada y retornan true. Veamos un
ejemplo:
; cerrarW1: evento -> true cierra la ventana W1
(define (cerrarW1 evento)
(hide-window W1))
Otro ejemplo;
; respuesta1: evento -> true
; toma lo que est escrito en un campo de texto Text1 y lo escribe en un mensaje Msg1
(define (respuesta1 e)
(draw-message Msg1 (string-append "Hola " (text-contents Text1))))
Cuando la accin del botn requiere clculos, u otro tipo de operaciones, la funcin que modela la accin
del botn debe hacer llamados a las funciones de la lgica.

Ejemplos
1. Ejemplo 1: Crear un botn con un mensaje

2. Ejemplo 2: al dar click en el botn aceptar se toma la entrada y

se la concatena con un mensaje. Hay dos posibles funciones de


respuesta: respuesta1 y respuesta2

Ejemplos
1. Ejemplo 3: Crea una ventana con un componente de tipo lista, la
ventana se ve as:

2. Ejemplo 4: Este ejemplo es ms complejo, tiene separada la vista, la


lgica y el controlador de un programa. Aunque la interfaz es
sencilla, esta funcin busca una entrada en una agenda de telfonos.
La informacin est almacenada en una lista. La definicin de datos y
la bsqueda son independientes de la ventana.