1. INSTITUTO TECNOLOGICO DE TUXTEPEC TOPICOS SELECTOS DE PROGRAMACION UNIDAD 4

2. TEMAS Unidad 4 Interfaz Grafica de Usuario (GUI) 4.1 Creación de interfaz grafica para usuarios 4.1.1 Librería de Interfaz grafica (API’S) 4.1.2 Aplicaciones GUI. 4.2 Computación Grafica 4.2.1 Área de dibujo 4.2.2 Primitivas de dibujo (Línea, arco, circulo, colores, rellenos, imágenes).

3. INTRODUCCIÓN

4. La interfaz gráfica de usuario, conocida también como GUI (del inglés graphical user interface) es un programa informático que actúa de interfaz de usuario, utilizando un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz. Su principal uso, consiste en proporcionar un entorno visual sencillo para permitir la comunicación con el sistema operativo de una máquina o computador. Interfaz Grafica de Usuario (GUI)

5. Interfaz Grafica de Usuario (GUI)

6. Interfaz Grafica de Usuario (GUI)

7. Interfaz Grafica de Usuario (GUI)

8. Interfaz Grafica de Usuario (GUI) Es también un conjunto de formas y métodos que posibilitan la interacción de un sistema con los usuarios utilizando formas gráficas e imágenes. Con formas gráficas se refiere a botones, íconos, ventanas, fuentes, etc. los cuales representan funciones, acciones e información.

9. Interfaz Grafica de Usuario (GUI) Surge como evolución de la línea de comandos de los primeros sistemas operativos y es pieza fundamental en un entorno gráfico. Como ejemplo de interfaz GUI podemos citar el escritorio o desktop del sistema operativo Windows y el entorno X-Window de Linux. El desarrollo de los entornos gráficos, que permitieron que las personas pudieran acceder a un PC sin tener que pasar por el tortuoso proceso de tener que aprender a manejar un entorno bajo línea de comandos.

10. Interfaz Grafica de Usuario (GUI) La interfaz gráfica de usuario es lo que tú y yo vemos cuando ejecutamos un programa en algún sistema operativo e interfaz gráfica, es decir, son las ventanas y los botones, los iconos, etc. En java, muchos applets y aplicaciones pueden desarrollarse explotando esta propiedad, esto se hace dentro del ambiente integrado de desarrollo de java cuando hemos abierto un archivo .java para la elaboración de algún proyecto (en concreto, me refiero a jbuilder).

11. Interfaz Grafica de Usuario (GUI) Ahí, facilmente, seleccionando la pestaña inferior design, creamos la interfaz arrastrando los botones y demás componentes de las barras de objetos que se encuentran en la parte superior del ambiente jbuilder.

12. 4.1 Creación de interfaz grafica para usuarios

13. 4.1 Creación de interfaz grafica para usuarios El Interfaz audioclip El interfaz AudioClipdefine los siguientes métodos: play ( ) (reproduce un clip desde el principio), stop ( ) (detiene la reproducción del clip), y loop ( ) (reproduce un fichero continuamente).Después de cargar un clip utilizando getAudioClip (), estos métodos se pueden usar para oírlo. La interfaz AppletStub Mediante el interfazAppletStub, se puede comunicar un applet y el navegador (o el visor de applets). Normalmente, no se suele utilizar este interfaz.

14. 4.1 Creación de interfaz grafica para usuarios Salida de consola Aunque la salida a la ventana de un applet debe ser realizada atreves de métodos AWT, tal como drawstring (), se puede utilizar en el applet, la salida de la consola, sobre todo para depurar. En un applet, cuando se llama a un método como System.out.println ( ), la salida no se envía a la ventana de applet, sino que aparece bien en la sesión de consola en la que está el visor de applets, o bien en la consola java que está disponible en algunos navegadores. Se recomienda utilizar la salida a la consola únicamente para depurar y seguir asi los principios básicos de diseño que esperan la mayoría de los usuarios de interfaces graficas.

15. 4.1 Creación de interfaz grafica para usuarios La interfaz ActionListener Esta interfaz define el método ationperformaed ( ) que se invoca cuando se da un evento de acción. Su forma general es la siguiente: voidactionPerformed (ActionEventae) La interfaz AdjustmentListener Esta interfaz define el método adjustmentValueChanged ( ) que se invoca cuando se produce un evento de ajuste. Su forma general es la siguiente: VoidadjustmentValueChanged(AdjustmentEventae) La interfaz ComponentListener Esta interfaz define cuatro métodos que se invocan cuando a un componente se le cambia el tamaño, se mueve, se muestra o se oculta. Sus formas generales son las siguientes:

16. 4.1 Creación de interfaz grafica para usuarios Void componentResized( componentEventce) Void componentMoved( componentEventce) Void componentShown( componentEventce) Void componentHidden( componentEventce) Nota: el AWT procesa los eventos de cambio de tamaño y de movimiento. Los métodos componentResized ( ) y componentMoved ( ) solo se proporcionan como aviso.

17. 4.1 Creación de interfaz grafica para usuarios La interfaz ContainerListener Esta interfaz tiene dos métodos. Cuando se añade un componente a un contenedor, se invoca a componentRemoved ( ). Sus formas generales son las siguientes: Void componentAdded(ContainerEventce) Void componentRemoved(ContainerEventce)

18. 4.1 Creación de interfaz grafica para usuarios La interfaz focusListener Esta interfaz define dos métodos. Cuando un componente obtiene el foco del teclado, se invoca FocusGained ( ). Cuando un componente pierde el foco del teclado, se llama a focusLost ( ).sus formas generales son las siguientes: VoidfocusGained ( focusEvent fe ) VoidfocusLost (focusEvent fe) La interfaz intemListener Esta interfaz define el método itemStatechanged ( ) que se invoca cuando cambia el estado de un elemento. Su forma general es la siguiente: VoiditemStateChanged (ItemEventie)

19. 4.1 Creación de interfaz grafica para usuarios La interfaz KeyListener Esta interfaz define tres métodos.los métodos keyPressed ( ) y keyRelased( ) se invocan cuando se presiona y se libera una tecla,respectivamente.el método keyTyped ( ) se invoca cuando se introduce un carácter. Por ejemplo, si un usuario presiona y libera la tecla A, se generan tres eventos en este orden: tecla presionada, carácter introducido, tecla liberada. Si un usuario presiona y libera la tecla INICIO, se generan dos eventos en este orden: tecla presionada, tecla liberada. Las formas generales de estos eventos son los siguientes: VoidkeyPreesed (keyEventke) VoidkeyReleased (keyEventke) VoidkeyTyped (keyEventke)

20. 4.1 Creación de interfaz grafica para usuarios La interfaz MouseListener Esta interfaz define cinco métodos. Si se presiona y se libera el raton en el mismo punto, se invoca a mouseClicked ( ). Cuando el raton se introduce en un componente, se llama al método mouseEntered ( ). Cuando el raton sale del componente se llama a mouseExited ( ). Los métodos mousePressed ( ) se invocan cuando se presiona y se libera el ratón, respectivamente. Las formas generales de estos métodos son las siguientes: VoidmouseClicked (mouseEvent me) VoidmouseEntered (mouseEvent me) VoidmouseExited (mouseEvent me) VoidmousePressed (mouseEvent me) VoidmouseReleased(mouseEvent me)

21. 4.1 Creación de interfaz grafica para usuarios La interfaz MouseMotionListener( ) y mouseReleased Esta interfaz define dos métodos. Al método mousedragged ( ) se le llama tantas veces como se arrastre al ratón. Al método mouseMoved ( ) se le llama tantas veces como se mueva el ratón. Sus formas generales son las siguientes: Void mousedragged(mouseEvent ) Void mouseMoved ( MouseEvent me) La interfaz TextListener Esta interfaz define el método textChanged ( ) que se invoca cuando hay un cambio en una area de texto o en campo de texto. Su forma general es la siguiente: VoidtexChanged (TextEvent te)

22. interfaces de auditor que mas se utilizan

23. interfaces de auditor que mas se utilizan

24. 4.1.1 Librería de interfaz grafica para usuarios La utilización de objetos dinámicos supone dejar pendiente en el montaje de la aplicación el enlace de dichos objetos. Cuando la aplicación esta en ejecución, y solo entonces, se produce el enlace (dinamicbinding) con los objetos contenidos en la librería. La creación de librerías dinámicas corre a cargo del enlazador o montador (en nuestro caso el ld) aunque también es posible indicar al compilador las opciones necesarias para el montaje y de ese modo, será el quien se encargue de pasárselas al montador.

25. 4.1.1 Librería de interfaz grafica para usuarios creación de una librería dinamica. Cuando se crea un objeto dinámico es necesario que dicho código objeto sea independiente de la posición, para conseguir este tipo de código debe especificarse al compilador la opción –fPIC (Position Independentcode). Dicho flag debe indicarse tanto en la compilación como en el montaje de la librería. $gcc –fPIC –c-o fich1.o fich1.c $gcc –fPIC –c –o fich2.o fich2.c

26. 4.1.1 Librería de interfaz grafica para usuarios Para montar los objetos es necesario además indicar la opción –shared para que el resultado sea un fichero objeto ‘compartible’. $gcc –shared –fPIC –o libfich.so fich1.o fich2.o Para compilar la librería dinámica puede utilizarse un makefile como este: CC=gcc CFLAGS=-Wall –ggdb –fPIC LDFLAGS=-fPIC –shared Libfich.so: fich1.o fich2.o $(CC) $(LDFLAGS) –o$@$ˆ En este caso, la librería tiene como extensión .so que significa sharedobject.

27. 4.1.1 Librería de interfaz grafica para usuarios uso de una librería dinámica. Para utilizar esta librería desde un programa no hay que hacer nada adicional; es exactamente igual que en el caso de la librería estática. Al hacer uso de una librería, el compilador busca primero una versión dinámica (.so), si no la encuentra entonces busca la versión estática. Si se tienen las dos versiones de una librería y se quiere utilizar la versión estática debe indicarse al montador el flag –static. Cuando un programa utiliza librerías dinámicas, el a sistema necesita localizarlas en tiempo de ejecución (al contrario que con las librerías estáticas). Los lugares donde un programa busca las librerías dinámicas son los siguientes (en este orden):

28. 4.1.1 Librería de interfaz grafica para usuarios En los directorios de la variable LD_LIBRARY_PATH. En el fichero Id.so.cache. En los directorios /usr/lib y /lib. En los directorios contenidos en el fichero Id.so.conf. Si el programa no encuentra la librería que necesita imprimirá un mensaje de error con el siguiente aspecto: $ ./apli1 Apli1:error in loading shared libraries: libfich.so: cannot open shared object file: No such file or directory Normalmente, lo mas adecuado, es utilizar la variable de entorno LD_LIBRARY_PATH para indicar en que directorios debe buscar: $ export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/home/user/dir_lib De este modo deberá funcionar correctamente.

29. 4.1.2 Aplicaciones GUI Aplicación GUI Entendemos como aplicación GUI (GraphicUser Interface) a toda aquella que tiene interfaz gráfica Windows, compuesta básicamente por los objetos transacciones, workpanels, procedimientos y reportes, generadas con los generadores GeneXus Visual Basic, Visual Fox, Java y .Net.

30. 4.1.2 Aplicaciones GUI Aplicación Web Unaaplicación Full Web tieneunainterfaz HTML (HyperText Markup Language) y se ejecutadentro de un browser. Este tipo de aplicaciones se desarrollabásicamente con los objetos Web de GeneXus: web panels y web transactions. Se generan con cualquiera de los generadores Web: Visual Basic, Java, .Net y C/SQL

31. 4.1.2 Aplicaciones GUI Reingeniería de la aplicación La premisa fundamental para convertir un aplicación WIN a WEB es que los ambientes implicados (gráfico, html) son diferentes y por lo tanto la conversión implicará algo mas que la mera conversión de los objetos. Deberá programarse con “estilo web”.

32. 4.2 Computación Grafica

33. 4.2 Computación Grafica La computación gráfica o gráficos por ordenador es el campo de la informática visual, donde se utilizan computadoras tanto para generar imágenes visuales sintéticamente como integrar o cambiar la información visual y espacial probada del mundo real.

34. 4.2 Computación Grafica Aplicaciones de la Computación Gráfica Actualmente existen muchas aplicaciones, en diversos campos de la ingeniería e investigación científica, que demandan una gran cantidad de recursos computacionales. La Computación Gráfica cubre áreas muy diversas, que abarcan desde la visualización científica o ingeniería hasta el arte y el tratamiento fotográfico.

35. 4.2 Computación Grafica Interfaces Gráficas de Usuario (GUI: GraphicalUser Interface) Gráficos estadísticos Cartografía Medicina Diseño Asistido por Computadora (CAD: Computer-AidedDesign) Multimedios (educativos) Entretenimiento (juegos) Arte

36. 4.2.1 Área de Dibujo El control DrawingArea (Área de Dibujo) proporciona un lienzo en el que poder dibujar de forma sencilla haciendo uso de los métodos de la clase gtk.gdk.Drawable (“dibujable”). Un control DrawingAreaen realidad encapsula un elemento del tipo gtk.gdk.Window (ventana), que es una subclase de gtk.gdk.Drawable (al igual que gtk.gdk.Pixmap).

37. 4.2.1 Área de Dibujo Para crear un Área de Dibujo se utiliza la función: drawing_area = gtk.DrawingArea() Los elementos Drawing Area (Área de Dibujo) se crean inicialmente con un tamaño de (0,0), por lo que es necesario usar el siguiente método para poder hacer visible el Área de Dibujo (drawing_area) asignándole un ancho y una altura distintas de cero:

38. 4.2.1 Área de Dibujo Trabajos con gráficos El AWT tiene una amplia variedad de métodos gráficos. Todos los gráficos se dibujan en una ventana, que puede ser la ventana principal en un applet, una ventana hija de un applet, o una ventana de aplicación independiente. El origen (0,0) de cada ventana está en la esquina superior izquierda. Las coordenadas vienen en pixeles. Todas las salidas sobre una ventana tienen lugar a través de un contexto grafico.

39. 4.2.1 Área de Dibujo Contexto grafico esta encapsulado en la clase Graphics y se obtiene de dos maneras: Se pasa a un applet cuando se llama a alguno de sus métodos, como paint () o update (). Es devuelto por el método getGraphics () de component.

43. 4.2.2 Primitivas de Dibujo Para dibujar un rectángulo redondeado e usan los métodos drawRoundRect() o fillRoundRect(), que tienen el siguiente formato: void drawRoundRect (int top, int left, int width, inthiegth, intxDiam, intyDiam) void fillRoundRect (int top, int left, int width, inthiegth, intxDiam, intyDiam)

46. 4.2.2 Primitivas de Dibujo Los vértices del polígono están especificados por las parejas de coordenadas que vienen en los arraysx e y. El número de puntos definidos por x e y está especificado en numPoints. Estos métodos tienen formas alternativas en las que el polígono está especificado por un objeto Polygon. El siguiente applet dibuja un polígono con forma de reloj

47. 4.2.2 Primitivas de Dibujo Establecer El Modo De Pintar El modo de pintar determina cómo se dibujan los objetos en una ventana. Por defecto, cada nueva salida que se realiza a una ventana se superpone al contenido de lo que hubiese en la anterior. Sin embargo, es posible tener sobre la ventana nuevos objetos en modo XOR utilizando el método setXORMode(),

48. 4.2.2 Primitivas de Dibujo Trabajar con color Java trabaja con el color mediante una forma independiente del dispositivo, y portátil. El sistema de color del AWT permite especificar cualquier color. Para ello se buscar el color que mas se ajuste al solicitado, teniendo en cuenta las limitaciones del hardware de visualización(monitor, etc.)en el que se está ejecutando el programa o el applet. De ésta manera, el código no tiene que preocuparse de cómo trata cada dispositivo gráfico de colores.

49. 4.2.2 Primitivas de Dibujo El color se encapsula en la clase Color. Color define varias constantes(por ej. Color.black)para espeficar un conjunto de colores comunes.También puede crear sus propios colores utilizando uno de los constructores de color.Las formas que más se utilizan son las sigs: Color(intread, intgreen, intblue) Color(intrgbValue) Color(float red, floatgreen, floatblue)

50. 4.2.2 Primitivas de Dibujo El primer constructor toma tres enteros que especifican el color como una mezcla de rojo, verde y azul. Esos valores deben estar entre 0 y 255, como en el sig. Ej. newColor(255,100,100); El segundo constructor de color toma un solo entero que ya contiene la mezcla del rojo, verde y azul. En este entero, el rojo esta entre los bits 16 y 23, el verde entre el 8 y el 15, y el azul entre los bits 0 y 7. Ej. De Constructor: intnuevoRojo=(0xff000000 | (0xc0<<16) | (0x00<<8)10x00); Color rojoOscuro=newColor(nuevoRojo);

51. 4.2.2 Primitivas de Dibujo El ultimo constructor, color(float,float,float), toma tres valores flotantes(entre 0.0 y 1.0)que especifican la mezcla del rojo,verde y azul. Una vez que se ha creado el color, lo podemos utilizar para establecer el color del frente y/o el de fondo utilizando los métodos setForeground() y setBackground(). También se puede seleccionar el color creado como el color de dibujo actual.

52. 4.2.2 Primitivas de Dibujo Métodos De La Clase Color La clase Color define varios métodos para manipular los colores: Uso Del Matriz (Hue), La Saturacion(saturation), Y El Brillo(brightness)

54. http://es.wikipedia.org/wiki/Computaci%C3%B3n_gr%C3%A1fica

56. Por su atencion …