GRAPHAPP Manual Simple
¿QUE ES? Una librería de fácil uso implementada en C Para permitir  La creación de ventana,  Manejo de controles de windows Manejo de eventos con el mouse y el teclado Creacion de dibujos en ventanas Los programas se ven mucho mas agradables con esta herramienta
TERMINOLOGIA WINDOWS Los sistemas operativos gráficos manejan una cierta terminología basica Es importante entenderla Window/Ventana Label/Etiqueta RadioButton Checkbutton TextBox ListBox Button/Commandbutton ComboBox
TEMAS A TRATAR Tipos de Datos que ofrece Como crear una ventana Como añadir un area de dibujo Dibujando Añadir controles Manejando eventos Programas estructurados vs. Graphapp
TIPOS DE DATOS Las interfaces usualmente proveen nuevos tipos de datos Usualmente traen funciones tambien para poder trabajar con esos tipos de datos La graphapp, entre otros, provee los tipos point : representa un punto en una pantalla rect : un rectangulo  drawing : un area de dibujo window : una ventana  label : una etiqueta de texto button : un boton de comando(commandbutton) field y textbox: areas de ingreso de texto No olvidar : Si se desea usar estos tipos de datos Se debe declarar una variable del mismo: point p; o label lx;
CREANDO VENTANAS Se debe crear una variable de tipo window Luego, se usa la funcion window newwindow(string nombre, rect r, int tipo); Para crear realmente la ventana No olvide mostrar la ventana con void show(window w); E indicar que se van a atrapar eventos con el mouse y el teclado con void mainloop(); main() {  window w;  rect r; r =  rect(0,0,170,100 ); w =newwindow(“Prueba",r,  StandardWindow);  show(w);  mainloop();  }
DIBUJAR: TIPOS  Y FUNCIONES COMUNES Ahora, añadamos un dibujito a la ventana Para dibujar (entre otros) se usan los tipos de datos drawing, point, rect  Y las funciones void setcolour(Color C); drawing newdrawing(rect r, drawfn  fn );  void drawpoint(point p);  void drawline(point p1, point p2);  void drawrect(rect r);  void fillrect(rect r);  void drawellipse(rect r);  void fillellipse(rect r);
DIBUJAR: EJEMPLO Primero deberiamos crear un area de dibujo Declaramos una variable de tipo drawing La creamos con newdrawing Luego hacemos en dibujo en dicha area Usamos point, rect, etc Hagamos un rectangulo de color azul con borde rojo en un area de dibujo de color gris
VENTANA: CODIGO main(){ window w; drawing d1, d2; rect rw, rd; rw = rect(0,0,315,210); w =newwindow("Prueba",rw,  StandardWindow); rd = rect(5,5,150,190); d1 = newdrawing(rd,  DibujaRectangulo); setbackground(d1, LightGray); show(w); mainloop(); } void DibujaRectangulo(drawing da){ rect r; drawto(da); r = rect(10,10, 50, 50); setcolour(Blue); fillrect(r); setcolour(Red); drawrect(r); }
DIBUJANDO Dibuje en un area de dibujo una carita feliz En otra area de dibujo una casita simple con un sol a un lado
CONTROLES Un control es un objeto que permite trabajar mejor en el ambiente grafico La ventana en si es un control El resto de controles son los que revisamos al inicio Etiqueta o label Botones, cajas de texto, menues, checkbox, etc. Podemos añadir controles a una ventana para hacer programas mas interesantes
EJEMPLO: AÑADIR BOTONES Queremos hace un programa que muestre dos botones Al dar click en un boton, mostrara un saludo Al dar click en el otro mostrara una despedida El mensaje se mostrara en una etiqueta(label)
EVENTOS El manejo de un ambiente grafico Exige el manejo de eventos Los eventos son acciones que el usuario puede hacer sobre un control Sobre una ventana Se puede hacer click, o arrastrar el mouse, o levantar el mouse, o escribir en el teclado, etc. Sobre un boton Solo se puede dar click Etc. El manejo de eventos es cuando al crear un control Se permite indicar que hacer cuando cierto evento se de
EVENTOS Y FUNCIONES CALLBACK Cuando se crea un boton, por ejemplo Se usa la funcion newbutton Su prototipo es button newbutton(string texto, rect r, actionfn fn); Recibe una cadena, para colocar texto visible en el boton Un rectangulo, que indica el tamaño del boton Una funcion, que indica que hacer cuando se de click sobre el boton Esa funcion debe ser de prototipo  void NombreFuncion( button b); Y la debe escribir Ud.
SALUDOS: SOLO SALUDO void Saludar(button b); label l; main(){ window w; rect rw, rb; button b1; rw = rect(0,0,315,210); w =newwindow("Prueba",rw, StandardWindow); rb = rect(5, 10, 100, 50); b1 = newbutton("Saludar", rb, Saludar); rb = rect(110, 100, 100, 50); l = newlabel("", rb, AlignRight); show(w); mainloop(); } void Saludar(button b){ settext(l, "Hola!!"); }
EJERCICIO Escriba un programa que muestre 4 botones Si se da click en el primero se dibuja un rectangulo Si se da click sobre el segundo se dibuja un triangulo Si se da click sobre el tercero, se borra el area de dibujo Si se da click sobre el cuarto, se cierra la ventana
void DibujaRectangulo(button b); void DibujaTriangulo(button b); void Salir(button b); void Limpiar(button b); drawing d; main(){ window w; rect rw, rb, rd; button b1, b2, b3, b4; rw = rect(0,0,315,210); w =newwindow("Prueba",rw, StandardWindow); rb = rect(5, 10, 100, 20); b1 = newbutton("Rectangulo", rb,  DibujaRectangulo); //Cree el resto de botones d = newdrawing(rd, NULL); setbackground(d, LightGrey); show(w); mainloop(); } void DibujaRectangulo(button b){ rect r; clear(d); drawto(d); r = rect(10,10, 50, 50); setcolour(Blue); fillrect(r); setcolour(Red); drawrect(r); } //Implemente el resto de funciones

GRAPHAPP

  • 1.
  • 2.
    ¿QUE ES? Unalibrería de fácil uso implementada en C Para permitir La creación de ventana, Manejo de controles de windows Manejo de eventos con el mouse y el teclado Creacion de dibujos en ventanas Los programas se ven mucho mas agradables con esta herramienta
  • 3.
    TERMINOLOGIA WINDOWS Lossistemas operativos gráficos manejan una cierta terminología basica Es importante entenderla Window/Ventana Label/Etiqueta RadioButton Checkbutton TextBox ListBox Button/Commandbutton ComboBox
  • 4.
    TEMAS A TRATARTipos de Datos que ofrece Como crear una ventana Como añadir un area de dibujo Dibujando Añadir controles Manejando eventos Programas estructurados vs. Graphapp
  • 5.
    TIPOS DE DATOSLas interfaces usualmente proveen nuevos tipos de datos Usualmente traen funciones tambien para poder trabajar con esos tipos de datos La graphapp, entre otros, provee los tipos point : representa un punto en una pantalla rect : un rectangulo drawing : un area de dibujo window : una ventana label : una etiqueta de texto button : un boton de comando(commandbutton) field y textbox: areas de ingreso de texto No olvidar : Si se desea usar estos tipos de datos Se debe declarar una variable del mismo: point p; o label lx;
  • 6.
    CREANDO VENTANAS Sedebe crear una variable de tipo window Luego, se usa la funcion window newwindow(string nombre, rect r, int tipo); Para crear realmente la ventana No olvide mostrar la ventana con void show(window w); E indicar que se van a atrapar eventos con el mouse y el teclado con void mainloop(); main() { window w; rect r; r = rect(0,0,170,100 ); w =newwindow(“Prueba",r, StandardWindow); show(w); mainloop(); }
  • 7.
    DIBUJAR: TIPOS Y FUNCIONES COMUNES Ahora, añadamos un dibujito a la ventana Para dibujar (entre otros) se usan los tipos de datos drawing, point, rect Y las funciones void setcolour(Color C); drawing newdrawing(rect r, drawfn fn ); void drawpoint(point p); void drawline(point p1, point p2); void drawrect(rect r); void fillrect(rect r); void drawellipse(rect r); void fillellipse(rect r);
  • 8.
    DIBUJAR: EJEMPLO Primerodeberiamos crear un area de dibujo Declaramos una variable de tipo drawing La creamos con newdrawing Luego hacemos en dibujo en dicha area Usamos point, rect, etc Hagamos un rectangulo de color azul con borde rojo en un area de dibujo de color gris
  • 9.
    VENTANA: CODIGO main(){window w; drawing d1, d2; rect rw, rd; rw = rect(0,0,315,210); w =newwindow("Prueba",rw, StandardWindow); rd = rect(5,5,150,190); d1 = newdrawing(rd, DibujaRectangulo); setbackground(d1, LightGray); show(w); mainloop(); } void DibujaRectangulo(drawing da){ rect r; drawto(da); r = rect(10,10, 50, 50); setcolour(Blue); fillrect(r); setcolour(Red); drawrect(r); }
  • 10.
    DIBUJANDO Dibuje enun area de dibujo una carita feliz En otra area de dibujo una casita simple con un sol a un lado
  • 11.
    CONTROLES Un controles un objeto que permite trabajar mejor en el ambiente grafico La ventana en si es un control El resto de controles son los que revisamos al inicio Etiqueta o label Botones, cajas de texto, menues, checkbox, etc. Podemos añadir controles a una ventana para hacer programas mas interesantes
  • 12.
    EJEMPLO: AÑADIR BOTONESQueremos hace un programa que muestre dos botones Al dar click en un boton, mostrara un saludo Al dar click en el otro mostrara una despedida El mensaje se mostrara en una etiqueta(label)
  • 13.
    EVENTOS El manejode un ambiente grafico Exige el manejo de eventos Los eventos son acciones que el usuario puede hacer sobre un control Sobre una ventana Se puede hacer click, o arrastrar el mouse, o levantar el mouse, o escribir en el teclado, etc. Sobre un boton Solo se puede dar click Etc. El manejo de eventos es cuando al crear un control Se permite indicar que hacer cuando cierto evento se de
  • 14.
    EVENTOS Y FUNCIONESCALLBACK Cuando se crea un boton, por ejemplo Se usa la funcion newbutton Su prototipo es button newbutton(string texto, rect r, actionfn fn); Recibe una cadena, para colocar texto visible en el boton Un rectangulo, que indica el tamaño del boton Una funcion, que indica que hacer cuando se de click sobre el boton Esa funcion debe ser de prototipo void NombreFuncion( button b); Y la debe escribir Ud.
  • 15.
    SALUDOS: SOLO SALUDOvoid Saludar(button b); label l; main(){ window w; rect rw, rb; button b1; rw = rect(0,0,315,210); w =newwindow("Prueba",rw, StandardWindow); rb = rect(5, 10, 100, 50); b1 = newbutton("Saludar", rb, Saludar); rb = rect(110, 100, 100, 50); l = newlabel("", rb, AlignRight); show(w); mainloop(); } void Saludar(button b){ settext(l, "Hola!!"); }
  • 16.
    EJERCICIO Escriba unprograma que muestre 4 botones Si se da click en el primero se dibuja un rectangulo Si se da click sobre el segundo se dibuja un triangulo Si se da click sobre el tercero, se borra el area de dibujo Si se da click sobre el cuarto, se cierra la ventana
  • 17.
    void DibujaRectangulo(button b);void DibujaTriangulo(button b); void Salir(button b); void Limpiar(button b); drawing d; main(){ window w; rect rw, rb, rd; button b1, b2, b3, b4; rw = rect(0,0,315,210); w =newwindow("Prueba",rw, StandardWindow); rb = rect(5, 10, 100, 20); b1 = newbutton("Rectangulo", rb, DibujaRectangulo); //Cree el resto de botones d = newdrawing(rd, NULL); setbackground(d, LightGrey); show(w); mainloop(); } void DibujaRectangulo(button b){ rect r; clear(d); drawto(d); r = rect(10,10, 50, 50); setcolour(Blue); fillrect(r); setcolour(Red); drawrect(r); } //Implemente el resto de funciones