INSTITUTO TECNOLOGICO DE TAPACHULA

INTERFAZ GRFICA DE USUARIO (GUI)

UNIDAD 2
ROXANA LOPEZ HERNANDEZ

08 DE MARZO 2012

INTERFAZ GRFICA DE USUARIO (GUI).

2.1 CREACIN DE INTERFAZ GRFICA PARA USUARIOS.
INTERFAZ DE USUARIO La creacin de las interfaces de usuario ha sido un rea del desarrollo de software que ha evolucionado dramticamente a partir de la dcada de los setentas. La interfaz de usuario es el vnculo entre el usuario y el programa de computadora. Una interfaz es un conjunto de comandos o mens a travs de los cuales el usuario se comunica con el programa, [Myers, 1996b]. Esta es una de las partes ms importantes de cualquier programa ya que determina que tan fcilmente es posible que el programa haga lo que el usuario quiere hacer. Un programa muy poderoso con una interfaz pobremente elaborada tiene poco valor para un usuario no experto. La elaboracin de una interfaz de usuario, bien diseada, exige una gran dedicacin pues generalmente las interfaces son grandes, complejas y difciles de implementar, depurar y modificar. Hoy en da las interfaces de manipulacin directa (tambin llamadas interfaces grficas de usuario, GUI por sus siglas en ingls) son prcticamente universales. Las interfaces que utilizan ventanas, conos y mens se han convertido en estndar en los materiales computacionales ([Shneiderman, 1998]). La interfaz representa el punto de encuentro entre el usuario y la computadora. En esta interaccin, el usuario juzga la utilidad de la interfaz; el hardware y el software se convierten en simples herramientas sobre los cuales fue construida la interfaz. La definicin de interfaz en si misma es un tanto arbitraria, aunque esto depende de la naturaleza de la tarea que se tiene enfrente. Existen muchos tipos de software para la creacin de interfaces de usuario [Myers, 1996b]. El sistema de ventanas permite la divisin de la pantalla en diferentes regiones rectangulares, llamadas ``ventanas''. El sistema de ventanas Windows para Unix divide la funcionalidad de la ventana en dos capas: el sistema de ventanas, el cual es la interfaz funcional, y el administrador de ventanas. El sistema de ventanas provee de procedimientos que permiten a la aplicacin el dibujar figuras en la pantalla y sirve como medio de entrada de las acciones del usuario. El administrador de ventanas le permite al usuario final el mover las ventanas por la pantalla, y es el responsable de desplegar las lneas de ttulo, bordes e conos alrededor de las ventanas. La parte central de un sistema de ventanas es el conjunto de herramientas (toolkit), el cual contiene los objetos grficos (widgets) ms empleados tales como mens, botones, barras de scroll, y campos para entrada de texto. El toolkit generalmente se conecta a los programas de aplicacin a travs de una serie de procedimientos definidos por el programador. La funcin de estos procedimientos es el decidir la forma en que se comportarn los objetos grficos. Ejemplos de toolkits son el Motif/X11 y los widgets definidos en los toolboxes para Windows y Macintosh.

Se ha investigado mucho sobre los toolkits, produciendo algunos como Garnet, Amulet, InterViews, Tcl/Tk, Java y las bibliotecas de objetos grficos de QT. Los toolkits virtuales le permiten a una aplicacin el que esta sea escrita una sola vez y que se pueda ejecutar en diferentes sistemas operativos, como Windows, MacOS o Unix. Otro nombre para estos toolkits es de ``sistemas de desarrollo multiplataforma''. Como se ha mencionado, para el diseo de la interfaz de usuario del generador automtico de mallas se utilizarn las redes de Petri. Uno de los objetivos principales de este trabajo de tesis es el de contar con un programa generador automtico de mallas, el cual debe de tener un desempeo altamente eficiente sin importar la plataforma computacional en la que se ejecute. Para lograr ese objetivo se utilizaron nicamente lenguajes de programacin que cuentan con compiladores o interpretes para las arquitecturas de computacin ms populares, como son plataformas UNIX, Windows 95/98/NT y MacOS. Para la implementacin de los algoritmos de optimizacin se eligi al lenguaje C. Este lenguaje de programacin cuenta con compiladores para distintas plataformas. El lenguaje C es un lenguaje procedural de propsito general con una sintaxis compacta y con caractersticas de ejecucin muy eficientes, adems de ser un lenguaje altamente porttil. Otra gran ventaja es el hecho de que se cuentan con herramientas de depuracin muy poderosas, lo que facilita la deteccin de errores. Durante la primera fase del proyecto se realiz un prototipo del generador, cuya interfaz grfica fue realizada con el Tool Command Language / Tool Kit (Tcl/Tk), el cual es un lenguaje de programacin de alto nivel, el cual funciona a base de scripts, y permite la elaboracin de objetos grficos de una manera muy sencilla. Este es un lenguaje multiplataforma, por lo que es ideal para la implementacin del generador de mallas en la etapa de pruebas. Tcl/Tk es un lenguaje interpretado, y debido a que este proyecto requiere de una gran cantidad de operaciones de graficacin, se anticipa que este prototipo ser algo lento, pero cumplir ampliamente con la funcin de realizar pruebas y modificaciones rpidamente. La interfaz grfica fue elaborada con las bibliotecas de objetos de QT. Estas son unas bibliotecas elaboradas en C++, por lo que la integracin con las funciones de optimizacin hechas en C ser natural. QT es un conjunto de herramientas multiplataforma que es soportado por la mayora de las plataformas UNIX y Windows. Los elementos grficos son implementados de una manera sencilla y se tiene un control muy amplio en cuanto a desempeo y presentacin de estos.

2.1.1

LIBRERA DE INTERFAZ GRFICA (APIS).

INTERFAZ GRFICA DE USUARIO Interfaz grfica de usuario (GUI) es un mtodo para facilitar la interaccin del usuario con el ordenador o la computadora a travs de la utilizacin de un conjunto de imgenes y objetos pictricos (iconos, ventanas...) adems de texto. Surge como evolucin de la lnea de comandos de los primeros sistemas operativos y es pieza fundamental en un entorno grfico. GUI es un acrnimo del vocablo ingls Graphical User Interface Douglas Engelbart, adems de inventor del ratn de ordenador, desarrollo la primera interfaz grfica en los aos 1960 en EE.UU. en los laboratorios de XEROX. Fue introducida posteriormente al pblico en las computadoras Apple Macintosh en 1984, y a las masas hasta 1993 con la primera versin popular del sistema operativo Windows 3.0. PROGRAMACION DE INTERFACES GRAFICAS DE USUARIO (DESDE ABAJO) Programacin de GUIs desde abajo De todo lo que me ha llamado la atencin a lo largo de los aos ha sido la programacin grfica y las interfaces de usuario. Hasta no hace mucho, la programacin de sistemas operativos y todo lo que tenia que ver con estos era algo reservado para los grandes catedrticos (La catedral) de la programacin y estaba relegado a las universidades. Su cdigo esta libre para ser visto por todos y hoy cualquiera puede tomar el cdigo de los *NIX libres y hacer el propio suyo empezando desde cero. Ya es propiedad de los mercaderes del basar. Primera mirada: Una GUI se basa en un concepto muy simple. Percibir eventos, procesarlos y actuar en consecuencia. Este mecanismo tan simple, repetido muchas veces por segundo es lo que hace la mayor parte de la magia de las GUIs. Podemos dividir el proceso en tres partes fundamentales: 1. 2. 3. Toma de eventos (GETEVENT) Procesamiento (HANDLEVENT) Actualizacin (FLUSH)

Esto, encerado en un ciclo LOOP (WHILE, DO... WHILE, etc.) controlado por una variable (a uno la variable mantiene el ciclo, a cero lo termina) es el corazn del sistema. El ciclo debe ser continuo y sin interrupciones (no debe haber ninguna funcin que se congele en otro ciclo interno (aunque puede haber excepciones, ya veremos mas adelante)

La fase 1 (GETEVENT) se encarga de leer los dispositivos de entrada y definir los eventos que se generaron como la pulsacin del ratn, su movimiento, la pulsacin de una tecla, etc. Bsicamente existen dos tipos de eventos: 1. Eventos externos: Se generan por una entrada del usuario (teclado, ratn, otros perifricos) 2. Eventos internos: Son generados por partes internas al mecanismo de la GUI (repintado de un rea especfica, finalizacin de un temporizador, movimiento de ventanas, etc. La fase 2 (HANDLEVENT) se encarga de leer estos eventos e interpretarlos generando ms eventos o cambiando estados internos de variable de los distintos componentes que componen la GUI (ventanas, cajas de texto, mens, botones, etc.) Por ejemplo, cuando se detecta que se a presionado sobre un botn, se cambia una variable interna que indica que, ese boto, esta presionado. La Fase 3 se encarga de actualizar visualmente el aspecto de la interfaz para que concuerde con los nuevos estados (si es que hubo cambios) tomados por los componentes durante la fase anterior. Esta ltima fase puede ser muy simple o directamente no existir. En este ltimo caso es la fase 2 la que se encarga de hacer la actualizacin a medida que detecta los cambios en los objetos (cajas, botones, ventanas, etc.) que componen la interfaz. El programa con interfaz grfica no es como los programas de consola comunes, se base en detectar los eventos que se generan dentro de la interfaz por lo que su cdigo no esta condensado en ninguna funcin en especial. Es un conglomerado de pequeos trozos de cdigo intercomunicndose entre si para lograr el objetivo deseado. El cdigo se encarga de levantar la interfaz grfica, e iniciar el ciclo anteriormente tratado. Cuando el ciclo termine, termina el programa. El cdigo propio del programa se ejecuta como respuesta a los eventos que se generan en la GUI, pero no por iniciativa propia (a lo sumo como respuesta a un evento peridico emitido cada cierto tiempo).

Resumiendo, nuestro programa hara, bsicamente tres acciones: 1. 2. Iniciar la interfaz grfica y crear los elementos de esta (cajas, botones, ventanas, etc.) Entrar al ciclo principal del que no retornara hasta que el programa termine.

3. Destruir lo que se creo anteriormente (de esto se debera encargar la GUI, nosotros solo deberamos pedicelo con alguna funcin) El cdigo propio de nuestro programa se ejecutara pasndole un puntero a una funcin al componente que genere el evento. Por ejemplo, para detectar la pulsacin de un botn, al crearlo,

este debera permitirnos pasarle la direccin de la funcin que ser llamada cuando se detecte que se pulso. Es la GUI la que debe conducir la ejecucin del programa y no nuestros algoritmos. Estos solo deben estar enfocados en resolver el/los problemas para lo que esta hacho el programa que estemos realizando.

API
Una API (del ingles Application Programming Interface - Interfaz de Programacin de Aplicaciones, interfaz de programacin de la aplicacin) es un conjunto de especificaciones de comunicacin entre componentes software. Representa un mtodo para conseguir abstraccin en la programacin, generalmente (aunque no necesariamente) entre los niveles o capas inferiores y los superiores del software. Uno de los principales propsitos de una API consiste en proporcionar un conjunto de funciones de uso general, por ejemplo, para dibujar ventanas o iconos en la pantalla. De esta forma, los programadores se benefician de las ventajas de la API haciendo uso de su funcionalidad, evitndose el trabajo de programar todo desde el principio. Las APIs asimismo son abstractas: el software que proporciona una cierta API generalmente es llamado la implementacin de esa API. Por ejemplo, se puede ver la tarea de escribir "Hola Mundo" sobre la pantalla en diferentes niveles de abstraccin: Haciendo todo el trabajo desde el principio: 1. 2. Traza, sobre papel milimetrado, la forma de las letras (y espacio) "H,o,l,a, ,M,u,n,d,o". Crea una matriz de cuadrados negros y blancos que se asemeje a la sucesin de letras.

3. Mediante instrucciones en ensamblador, escribe la informacin de la matriz en la memoria intermedia ("buffer") de pantalla. 4. Mediante la instruccin adecuada, haz que la tarjeta grfica realice el volcado de esa informacin sobre la pantalla. Por medio de un sistema operativo para hacer parte del trabajo: 1. 2. 3. Carga una fuente tipogrfica proporcionada por el sistema operativo. Haz que el sistema operativo borre la pantalla. Haz que el sistema operativo dibuje el texto "Hola Mundo" usando la fuente cargada.

Usando una aplicacin (que a su vez usa el sistema operativo) para realizar la mayor parte del trabajo: 1. Escribe un documento HTML con las palabras "Hola Mundo" para que un navegador Web como Mozilla o Internet Explorer pueda representarlo en el monitor. Como se puede ver, la primera opcin requiere ms pasos, cada uno de los cuales es mucho ms complicado que los pasos de las opciones siguientes. Adems, no resulta nada prctico usar el primer planteamiento para representar una gran cantidad de informacin, como un artculo enciclopdico sobre la pantalla, mientras que el segundo enfoque simplifica la tarea eliminando un paso y haciendo el resto ms sencillos y la tercera forma simplemente requiere escribir "Hola Mundo". Sin embargo, las APIs de alto nivel generalmente pierden flexibilidad; por ejemplo, resulta mucho ms difcil en un navegador web hacer girar texto alrededor de un punto con un contorno parpadeante que programarlo a bajo nivel. Al elegir usar una API se debe llegar a un cierto equilibrio entre su potencia y simplicidad y su prdida de flexibilidad. Ejemplos de APIs: Microsoft Win32 API SUN J2EE APIs API for SCSI device interfacing The Carbon APIs for the Macintosh OS Common Object Request Broker Architecture (CORBA)

2.1.2

APLICACIONES GUI.

El Standard Widget Toolkit (SWT) ha sido creado por IBM como reemplazo de la Java Abstract Windowing Toolkit (AWT) y Swing. De manera ms precisa, el SWT es un conjunto de widgets para desarrolladores Java que ofrece una API portable y una integracin muy ligada con la interfaz grfica de usuario nativa al sistema operativo de cada plataforma. As, cada plataforma debe adaptar el SWT para los grficos nativos suyos. Esto parece que entra en contradiccin con la filosofa de Java de ser independiente de la plataforma, pero ofrece ventajas en la unicidad del aspecto del GUI diseado sea cual sea la plataforma sobre la que se ejecute. Hasta el momento los entornos a los que se ha portado SWT son Windows, Linux GTK, Linux Motif, Solaris Motif, AIX Motif, HPUX Motif, Photon QNX, y Mac OS X.

Los grficos en Java han tenido una larga y exitosa evolucin: empez con el bsico AWT, vindose ampliado por el potente paquete Swing. Actualmente se est empezando a imponer SWT. Describamos brevemente la evolucin de cada uno de ellos: AWT (Abstract Windowing Toolkit) fue el primer acercamiento de Java al desarrollo de interfaces grficas (GUI). Permite mostrar ventanas con controles variados como cajas de texto y botones. Las GUIs con AWT son fciles de desarrollar, y usan los controles propios del sistema operativo en el que se programa, por ejemplo, en Windows aparecer una ventana de texto tpica de Windows, en Mac, una ventana con sus respectivas caractersticas, etc. Pero algunos sistema operativos difieren de otros en el conjunto de controles, por lo que Sun solo implement los controles comunes a los sistemas operativos a los que se dirige Java, que por lo general, es un conjunto reducido y simple respecto de los realmente disponibles. Swing fue introducido posteriormente motivado por la creciente demanda de los desarrolladores de tener una implementacin no nativa, esto es, independiente de la plataforma, de controles de ms alto nivel como rboles, tablas y texto. Con esto se gana en funcionalidad, pero con el inconveniente de hacer las aplicaciones Java con Swing demasiado especficas de Java. Sun aadi una emulacin look and feel para aproximar el aspecto de las aplicaciones swing al sistema operativo sobre las que se ejecuta, pero no abarca las nuevas versiones de los sistemas operativos (Windows Me, 2000 en adelante, por ejemplo). Adems, al estar implementado sobre Java y no de forma nativa en el sistema operativo, los tiempos de respuesta de las interfaces Swing son sensiblemente ms lentas que las nativas. SWT (Standard Widget Toolkit) ofrece un conjunto de elementos que hacen uso directo de los controles nativos a travs de la Interfaz Nativa de Java (JNI). Si los controles no estn ofrecidos por el sistema operativo, SWT crea los suyos propios segn las necesidades. Esto significa que se necesita cdigo nativo para poder funcionar en cada sistema operativo, pero IBM ha sido capaz de adaptar SWT a un buen nmero de sistemas. Es muy destacable la importancia de SWT porque es el entorno grfico de desarrollo que viene con Eclipse y debe ser utilizado en los plug-ins desarrollados para el mismo. Eclipse es una herramienta de desarrollo altamente potente, libre distribucin, cdigo abierto y adaptable a cualquier lenguaje de programacin. Para saber ms sobre Eclipse vistese su pgina www.eclipse.org. SWT se compone esencialmente de tres elementos: 1. En el nivel inferior se encuentra una librera nativa que interacciona directamente con el sistema operativo. Es la denominada JNI, la Java Native Interface. Al ser la parte ms dependiente de la plataforma, debe ser portada en funcin de la misma. 2. Por encima de la anterior capa est la clase Display, la interfaz por la que el SWT se comunica con la interfaz grfica. 3. El nivel superior lo forma la clase Shell, representa el tipo de ventana de ms alto nivel y que es donde se alojan los widgets, controles o componentes. El shell es la parte de la interfaz que

est directamente controlada por el sistema de ventanas del sistema operativo. La clase Shell es hija de la clase Display, en cuyo caso es la ventana o marco principal a partir de la cual se construye el resto de la interfaz, o bien hija de otro shell, siendo el ejemplo ms comn las ventanas de dilogo. Para mostrar lo anterior, estudiemos el siguiente ejemplo "Hola mundo": import org.eclipse.swt.widgets.*; public class HelloWorld { public static void main(String[] args) { Display display = new Display(); Shell shell = new Shell(display); shell.setText("Hola Mundo"); shell.setSize(200, 100); shell.open(); while (!shell.isDisposed()) { if (!display.readAndDispatch()) display.sleep(); } display.dispose(); } } Conforme a lo explicado anteriormente, identificamos en el cdigo las siguientes partes: Display display = new Display(); Representa la pantalla y su conexin con el sistema gestor de ventanas del sistema operativo en el que nos encontramos. El objeto display contendr a su vez una lista de objetos shell. Shell shell = new Shell(display); shell.open(); El shell equivale a una ventana abierta sobre la pantalla. Es la clase raz de los componentes y controles. Prestemos atencin al siguiente fragmento: while (!shell.isDisposed()) { if (!display.readAndDispatch()) display.sleep(); }

Es el denominado bucle de eventos. Ha de ser programado explcitamente y su funcin es detectar y ejecutar eventos. Es la forma en que liberamos la CPU para otros menesteres ajenos a la interfaz grfica cuando no se han producido eventos a los que dedicar ciclos de proceso para atender. Por ltimo observamos que los recursos del sistema han de ser liberados por el programador: display.dispose(); La liberacin del objeto display conlleva la finalizacin de todos los shells hijos contenidos.

2.2 COMPUTACIN GRFICA.

2.2.1 REA DE DIBUJO.
Paintbrush
El Paintbrush es un programa para crear dibujos sencillos, en el que se puede utilizar el mouse (preferiblemente) o el teclado para dibujar. Para iniciar el Paintbrush, abra el grupo de accesorios y toque el icono del Paintbrush, aparecer el siguiente cuadro:

rea de dibujo

Cuadro de herramientas

En el cuadro del Paintbrush podemos identificar cuatro elementos: 1. 2. 3. 4. El rea de dibujo es el rea utilizada para el diseo de los dibujos. La caja o cuadro de herramientas contiene las herramientas que se pueden utilizar dentro del Paintbrush para crear o modificar dibujos. La paleta de colores contiene los colores disponibles, en monitores monocromticos solo se dispone de tonalidades de grises. El cuadro ancho de lnea contiene los diferentes anchos de lneas disponibles para dibujar.

Para crear un dibujo siga estos pasos:

1.

Seleccione el color para el segundo y primer plano.

Toque aqu para seleccionar el color del primer plano. Toque en esta posicin, con el botn derecho y despus seleccione el color que desea para el segundo plano (borde de las lneas, cuadros o crculos). 2. Seleccione el ancho de lnea deseado.

Toque cualquier grueso de lnea para seleccionar el ancho. La flecha indica el ancho seleccionado. 3. Seleccione una herramientas. herramienta del cuadro de

4.

Disee el dibujo.

5.

Si lo desea, puede introducir texto tocando en el cuadro de herramientas, el cuadro titulado ABC. Podr cambiar la fuente eligiendo del men Texto, la opcin Fuentes, tambin podr modificar el tamao de la fuente con esta misma opcin. Aparecer el cuadro de dilogo de la derecha.

6.

Puede utilizar la opcin de Deshacer del men Edicin para eliminar la ltima accin ejecutada. Para copiar, presione el cuadro derecho de las tijeras, en el cuadro de herramientas y seleccione lo que desea copiar, posteriormente, presione cualquier botn del mouse y con la tecla CTRL toque en la parte en que desea copiar. Para cortar o borrar seleccione el objeto a cortar y elija del men Edicin, la opcin Cortar. Para mover, seleccione el objeto a mover y arrstrelo a la posicin deseada.

7.

Slvelo o grbelo, eligiendo del men Archivo, la opcin Guardar o Guardar como. El archivo ser grabado en formato .BMP, pero si lo prefiere, puede cambiar dicho formato.

8.

Puede imprimir el dibujo seleccionando la opcin Imprimir del men Archivo. Aparecer el siguiente cuadro de dilogo:

Podr agregar este dibujo a un documento de Word o una hoja de Excel.