Hasta ahora hemos trabajado en consola,

con aplicaciones muy poco agradables a la

vista
En la actualidad la mayora de los programas
hacen uso del modo grafico, ventanas, uso
del mouse, etc.
Nosotros revisaremos una librera que nos
permitir construir aplicaciones graficas:
GraphApp
Trabaja bajo varios sistemas operativos: Windows, Linux,
Macintosh
Permite dibujar lneas, rectngulos, crculos, etc
Nos permitir crear aplicaciones bajo Windows, con
botones, cajas de texto, etc.

Ventana

Antes de empezar a
conocer cada una de las
funciones de una librera,
debemos comprender la
abstraccion utilizada
para crear esta librera
Para la librera grafica, las
reas de trabajo se
dividen en:
Ventana (Window)
rea de Dibujo (Drawing)

En la pantalla pueden
crearse ventanas, y
En cada ventana puede
crearse una rea de
dibujo.

rea de Dibujo

Todo lo que se desee

aadir o dibujar deber
tener:
Un punto de inicio
Ancho
Alto

El sistema de coordenadas asume que el punto inicial(0,0)

esta ubicado en la esquina superior izquierda
La unidad de medida de los ejes x y y es el pxel
Los valores en x avanza de izq. a der.
Los valores en y avanzan de abajo hacia arriba

Un ejemplo sencillo, es escribir Hola

Mundo en la ventana grafica

#include <graphapp.h>
void main()
{
gprintf("Hello world\n");
}

Se usa para imprimir

texto en la ventana
actual. Tiene la misma
forma de uso que printf

#include

point a; declara un punto(x,y)

point pt(int coordx, int coordy)
<graphapp.h>

void main()
{
point a = pt(10,10);
point b = pt(10,40);
point c = pt(50,40);
drawline(a, b);
drawline(b, c);
drawline(c, a);
}

void drawline(point p1, int

coordy)
Permite dibujar una lnea entre
los puntos p1 y p2

Las libreras usualmente, contienen funciones, pero

tambin pueden contener nuevos tipos de datos.
GraphApp ofrece para dibujar:
point, nos permite trabajar un puntos en un area(x,y)
point p1;
rects, nos permite trabajar con rectngulos. Todos los
rectngulos tendrn coordenadas de inicio, ancho y
alto
rect r;

Como le asigno datos?

Asignar a p1, las coordenadas 3,4
p1 = pt(3,4);
Asignar a r, las coordenadas (10,10), el ancho 80 y el
alto 10
rectangle r = rect(10,10,80,10);

Entre las funciones mas populares que ofrece GraphApp para

dibujar:

void drawpoint(point p);

dibuja el punto p

void drawline(point p1, point p2);

dibuja la linea entre p1 y p2

void drawrect(rect r);

dibuja un rectangulo r(el contorno)

void fillrect(rect r);

rellena el rectangulo r con el color actual

void drawarc(rect r,int ang_ ini, int

ang_ fin);

dibuja un arco, cuyo centro es el centro

de r, desde ang_ini hasta ang_fin

void fillarc(rect r, int ang_ ini, int ang_ fin); rellena una rco con el color actual
void drawellipse(rect r);
void fillellipse(rect r);

dibuja una elipse centrada en el centro de

r, y limitada por los lados de r
rellena una elipse con el color actual

void setcolour(rgb c);

#include <graphapp.h>
void main()
{
rect r = rect(10,10,80,10);
setcolour(Red);
drawrect(r);
setcolour(Blue);
fillrect(rect(10,40,80,10));
}

Permite cambiar el
color actual, por el
especificado por c
Los colores posibles
son:
Transparent ,Black ,White
,Blue ,Yellow ,Green
,Magenta ,Red ,Cyan
,Grey ,Gray ,LightGrey
,LightGray ,DarkGrey
,DarkGray ,DarkBlue
,DarkGreen ,DarkRed
,LightBlue ,LightGreen
,LightRed ,Pink ,Brown
,Orange ,Purple ,Lime

window newwindow(string titulo,rect

r,int flag);
crea una nueva ventana con un titulo,
encerrada en el rectngulo r, con pero no
la muestra aun

void main()
{
window w;
w = newwindow(A Window", rect(0,0,170,100),StandardWindow);
show(w);
mainloop();
}

void show(window w);

muestra la ventana w en la
pantalla
void mainloop();
Siempre va al final de un
programa que use ventanas

La ventana se va a redibujar, cuando

se maximice, cuando se le cambie de
tamao, etc.
Si se desea especificar que alguna
tarea deba realizarse cuando la
ventana se redibuja

void setredraw(control c, drawfn fn);

donde c, es un control (botn, caja de texto,
combo, etc.) y
fn es un procedimiento que recibe dos
parmetros, la ventana sobre la que se va a
trabajar, y el rectngulo de dicha ventana. Este
representa a la tarea que se va a ejecutar
cuando la ventana se dibuje

#include <graphapp.h>
void DibujarEnVentana(window w, rect winrect);
void main(){
window w;
w = newwindow("Rectangles", rect(0,0,170,100),
StandardWindow);
/*
* Cuando se dibuje la ventana, se ejeutara
*
la tarea Dibujar en Ventana
*/
setredraw(w, DibujarEnVentana);
show(w);
mainloop();
}
void DibujarEnVentana(window w, rect winrect){
rect r = rect(10,10,80,10);
setcolour(Red);
drawrect(r);
setcolour(Blue);
fillrect(rect(10,40,80,10));
}

Cada vez que la

ventana se redibuje,
se ejecutara el
procedimiento
DibujarEnVentana

Dibujos:

Especifique puntos con pt(x,y)

Especifique rectngulos con rect(x,y,ancho,alto)
Puede dibujar formas geomtricas con drawline,
drawrect, fillrect etc.
Puede cambiar el color de sus dibujo con
setcolour(Green)

Ventanas:

Cree ventanas con newwindow.

Ejemplo:
newwindow("Name", rect(0,0,400,300),
StandardWindow)
Asigne una tarea al momento en que se dibuja
una ventana usando: setredraw(w, fn)
Muestre su ventana con show(w)
Termine su programa principal con mainloop()

En una ventana se puede dibujar, pero tambin se puede

crear una rea de dibujo dentro de la ventana, y dibujar
all
Un rea de dibujo es un rea en la ventana donde se
pueden dibujar grficos, o colocar imgenes
Para esto se usa el nuevo tipo de dato drawing:
drawing d
Para crear una nueva rea de dibujo se utiliza la funcin:
newdrawings
drawing newdrawing(rect r, drawfn fn);

Donde r es el rectngulo que define la nueva

rea de dibujo y
fn es un procedimiento que debe ser creado
por

el cliente. Especifica que tarea ejecutar

cuando se cree la nueva area de dibujo
Este procedimiento debe recibir la nueva
rea de dibujo y el rectngulo de dicha rea

Hay muchas mas funciones, para trabajar

con rectngulos y puntos, revisemos las
mas importantes
Todo objeto esta encerrado en un rectngulo. Para
encontrar el rectngulo de un objeto r = getrect(obj)
Para crear un rectngulo justo en el centro de otro r =
insetr(r,1)
Encontrar el punto medio entre dos puntos p =
midpt(p1,p2)
Centrar un rectngulo en otro con r = rcenter(z,r)

#include "graphapp.h"
void DibujarEnAD(drawing d, rect r);
void main(){
window w;
drawing d;
rect r;
w = newwindow("Rectangles", rect(50,50,150,200),
StandardWindow);
setbackground(w, LightGrey);
r = rect(10,10,100,100);
d = newdrawing(r, DibujarEnAD);
show(w);
mainloop();
}
void DibujarEnAD(drawing d, rect r){
setcolour(Red);
drawrect(r);
setcolour(Blue);
fillrect(rect(10,40,80,10));
}

Se desea crear un ventana con

nombre Mi Dibujo.
El color de fondo de dicha
ventana debe ser gris.
En un rea de dibujo de 100 x
100, cuyo fondo debe ser rojo,
se desea dibujar un circulo de
color azul.
En las diagonales del rea de
dibujo se debe dibujar dos
lneas de color verde.

#include "graphapp.h"
void DibujarEnAD(drawing d, rect r);
void main(){
window w;
drawing d;
rect r;
w = newwindow("Rectangles", rect(50,50,150,200),StandardWindow);
Cambiar color del fondo de la
setbackground(w, LightGrey);
r = rect(10,10,100,100);
ventana w
d = newdrawing(r, DibujarEnAD);
show(w);
Se crea y dibuja en la nueva rea
mainloop();

de dibujo d, de tamao dado por r

Insetr(r,4) crea un rectngulo dentro
void DibujarEnAD(drawing d, rect r){
de r, con 4 pxeles de espacio de
setcolour(Red);
fillrect(r);
separacin
fillellipse rellena la elipse dentro de
setcolour(Blue);
fillellipse(insetr(r,4));
este acceder
nuevo rectngulo
Para
a las coordenadas
setcolour(Green);
x y y de un rectngulo r se usa
drawline(pt(r.x,r.y),
r.x y r.y
pt(r.x+r.width,r.y+r.height));
drawline(pt(r.x,r.y+r.height),
Para acceder al ancho y alto
pt(r.x+r.width,r.y));
r.width y r.height
}
}

Hemos visto que hay ocasiones en las que se

condiciona la ejecucin de una tarea.
En el caso de la ventana, dijimos que si se deseaba
ejecutar una tarea cuando se dibuje una ventana
se usaba setredraw
En el evento de redibujar ventana, se debe ejecutar esa
tarea

Existen muchos eventos, un evento popular es

hacer click con el mouse sobre alguna ventana
Otro evento es arrastrar el mouse, u aplastar una
tecla del teclado
La librera graphapp permite a travs de funciones,
asociar tareas a estos eventos
Cuando el evento se dispare, es decir, se de, se
ejecutara dicha tarea

Al trabajar con el mouse, se pueden disparar varios eventos

mousedown, se refiere a cuando se aplasta un

botn del mouse pero aun no se suelta.
mousedrag, se refiere a cuando se mueve el
puntero del mouse mientras se tiene un botn
aplastado.
mousemove, cuando se pasa el puntero del
mouse por una zona
mouseup, cuando se suelta el botn del mouse.
mouserpeat, cuando se mantiene aplastado un
cierto tiempo, un botn del mouse.

Dibuje una ventana con un rea de dibujo. En esa rea se

dibujara usando el mouse:

Al usar el botn izquierdo, se dibujara con Rojo

Al usar el botn derecho, se dibujara con Azul

Para asignar una tarea a los eventos al

usar el mouse, existen respectivamente:

void
void
void
void
void

setmousedown(control c, mousefn fn);

setmousemove(control c, mousefn fn);
setmousedrag(control c, mousefn fn);
setmouseup(control c, mousefn fn);
setmouserepeat(control c, mousefn fn);

Donde c es cualquier ventana o rea de

dibujo o control y
fn es la funcin que representa la tarea
que se va a ejecutar cuando se dispare el
evento.
Debe ser un procedimiento y recibe el dibujo
sobre el que se trabaja, el botn que se
aplasto y el punto en el que se dio el
evento.

#include "graphapp.h"
void DibujarPunto(drawing d, int buttons, point p);
void main()
{
window w;
drawing d;
w = newwindow("Dots", rect(50,50,200,200), StandardWindow);
d = newdrawing(rect(10,10,180,180), NULL);
setbackground(w, LightGrey);
Cuando se aplasta
setmousedown(d, DibujarPunto);
setmousedrag(d, DibujarPunto);
show(w);
mainloop();

un botn del
mouse, ejecute DibujarPunto

Cuando se arrastre el puntero del

mouse, ejecute DibujarPunto

}
void DibujarPunto(drawing d, int buttons, point p){
if (buttons & LeftButton)
setcolour(Red);
Si se aplasto el botn Izquierdo,
else if (buttons & MiddleButton)
cambie a color Rojo
setcolour(Green);
else if (buttons & RightButton)
setcolour(Blue);
drawpoint(p);
Dibuje el punto
}

Al trabajar con el teclado, tambin se pueden disparar

eventos:
Aplastar una tecla de un carcter ASCII(keydown).
Aplastar una tecla no ASCII(las teclas para flechas, o las
teclas funcionales).

Para poder asignar tareas a cada uno de estos eventos

graphapp tiene a disposicin las siguientes funciones:
void setkeydown(control c, keyfn fn);
void setkeyaction(control c, keyfn fn);

Donde c es cualquier ventana, rea de dibujo o control

sobre la cual se esta trabajando y
fn es el procedimiento que representa la tarea que debe
ejecutarse cuando se dispare el evento.
Este procedimiento debe recibir un control y el entero que
representa la tecla aplastada.

Dibuje un rea de dibujo dentro de una ventana.

Sense cada carcter que se teclea y lo dibuje en la
area de dibujo

Para poder resolver este ejercicio, debemos

aumentar nuestros conocimientos de ciertas
libreras
En una ventana se puede dibujar texto usando
int drawstr(point p,string s);
Cuando se aplaste una tecla, sabremos el codigo
ascii de la misma, este habra que convertirlo a texto
Podemos usar la funcin CharToString(char c) de la
librera strlib
Para poder dibujar las letras tecleadas una tras otra,
debemos mover la coord en x, pero cuanto?
Lo ideal seria, moverla dependiendo del ancho de la
ultima letra dibujada
Esto se puede saber con
int strwidth(font f, string s);

#include <graphapp.h>
#include <genlib.h>
#include <strlib.h>

Pactual es un dato global, valido

en todas las funcines del programa

void Dibujar(drawing d, int key);

point pactual;
main(){
window w,w2;
drawing d;
w = newwindow("Press a Key", rect(50,50,200,200),
StandardWindow);
d = newdrawing(rect(10,10,180,180), NULL);
pactual = pt(0,0);
setbackground(w, LightGrey);
setkeydown(d, Dibujar);
}

show(w);
mainloop();

void Dibujar(drawing d, int key){

string s;
int w;
s = CharToString(key);

Cada vez que se digite una tecla,

se ejecutara el procedimiento
Dibujar

Se cambia el cdigo ascii, a una

cadena
Tomamos el ancho de esta letra,
usando la fuente actual
(currentfont())

w = strwidth(currentfont(),s);
if (pactual.x + w >= getwidth(d)){
pactual.x = 0;
pactual.y = pactual.y +getheight(currentfont());
}
drawstr(pactual,s);
Se dibuja la letra
pactual.x = pactual.x+w;

en el punto actual
usando drawstr

Los controles en Windows, son todos

aquellos objetos que nos permiten
controlar nuestra ambiente de
trabajo:
Cajas de texto, permiten ingreso de informacin
Botones, para confirmacin o ejecucin de procesos
Checkboxes, pequeas cajas, que permiten elegir
una o mas opciones
Radiobuttons, permiten elegir entre varias, una sola
opcin
Mens, nos muestran las opciones mas generales
que ofrece una aplicacin
Entre otros existen muchos mas controles
Para graphapp, una ventana, y un rea de dibujo,
representan controles tambin

Cada control para graphapp es un nuevo

tipo de dato
label, para declarar una nueva etiqueta, texto que el
usuario no podra editar:
label l;
checkbox, para declarar una nueva cajita en la que se
puede elegir o no una opcin
checkbox ch;
field, para declarar un rea en la que se puede escribir
solo una lnea de texto
field fl;
textbox, para declarar un rea de texto, mas de una lnea
textbox tx;
button, para declarar un botn
button bt;
radiobutton, para declarar una opcin que puede ser
elegida entre otras
radiobutton r;

funciones para aadir controles a una ventana

label newlabel(string text, rect r, int alignment);
Crea una etiqueta con texto text, dentro del rectngulo r
checkbox newcheckbox(string text, rect r, actionfn fn);
Crea una checkbox detro de r, y junto a este, un texto
fn representa la tarea que debe ejecutarse cuando se de click
sobre la caja de texto
button newbutton(string text, rect r, actionfn fn);
Crea un botn con un texto, dentro de r
fn representa la tarea que debe ejecutarse cuando se de click
sobre el boton
radiobutton newradiobutton (char *text, rect r, actionfn fn);
Crea un radiobutton dentro del rectngulo r, y junto un texto text
fn representa la tarea que debe ejrcutarse cuando se de click
sobre el radiobutton
Las siguientes crean reas de escritura, en un rectangulo r,y con
un texto inicial text
field newfield (string text, rect r);
textbox newtextbox (string text, rect r);
textbox newtextarea (string text, rect r);

Para checkbox y radiobutton

Este tipo de controles sirven para elegir opciones,
podemos saber si estan elegidos(ischecked), podemos
elegirlos(check), o cambiar de opinion(uncheck)
int ischecked(checkbox c);
int ischecked(radiobutton r);
void check(checkbox c);
void check(radiobutton r);
void uncheck(checkbox c);
void uncheck(radiobutton r);

Para checkbox, radiobutton, textbox, field, label y

button
Estos controles van acompaados de algun texto, este
puede ser modificado, o consultado
void settext(control c, string newtext);
string gettext(control c);

Crear la siguiente ventana

Al elegir una opcin, debe mostrarse en la parte
superior de la ventana
Al dar click sobre el botn quit, el programa debe
terminar

#include <graphapp.h>
#include <genlib.h>
#include <strlib.h>
void MostrarEleccion(checkbox c);
void Salir(void);
label l;
main()
{
window w;
checkbox c1, c2;
button b;
w = newwindow("Pizza", rect(0,0,200,200), StandardWindow);
c1 = newcheckbox(Jamon", rect(10,50,160,25), MostrarEleccion);
c2 = newcheckbox(Hongos", rect(10,90,160,25), MostrarEleccion);
b = newbutton("Quit", rect(10,170,80,30), Salir);
l = newlabel("",rect(0,0,100,50),AlignTop);
show(w);
Cuando se
mainloop();
}
void MostrarEleccion(checkbox c){
if (ischecked(c)){
settext(l,Concat("Desea ", gettext(c)));
}
else{
settext(l,Concat("Ya no desea ", gettext(c)));
}
}
void Salir(button b){
exitapp();
}

de click sobre c2 y c1 se
ejecutara el procedimiento
MostrarEleccion

Se cambia el texto del label l,

para que muestre la nueva
eleccin

Termina la aplicacin Grafica