INSTITUTO TECNOLOGICO DE TUXTEPEC

TOPICOS SELECTOS DE PROGRAMACION UNIDAD 4

TEM A S Unidad 4 Interfaz Grafica de Usuario (GUI)

4.1 Creacin de interfaz grafica para usuarios 4.1.1 Librera de Interfaz grafica (APIS) 4.1.2 p u ta ci n G ra fi 4 . 2 C o m Aplicaciones GUI. ca 4 . 2 . 1 re a d e d i u j b o 4 . 2 . 2 Pri i va s d e d i u j ( L e a , m ti b o n a rco , ci l , co l re s, re l e n o s, rcu o o l i g e n e s). m

INTRODUCCIN

Interfaz Grafica de Usuario (GUI)

La

interfaz grfica de usuario, conocida tambin como GUI (del ingls graphical user interface) es un programa informtico que acta de interfaz de usuario, utilizando un conjunto de imgenes y objetos grficos para representar la informacin y acciones disponibles en la interfaz. Su principal uso, consiste en proporcionar un entorno visual sencillo para permitir la

Interfaz Grafica de Usuario (GUI

Interfaz Grafica de Usuario (GUI

Interfaz Grafica de Usuario (GUI

I te rfa z G ra fi d e U su a ri ( G U I n ca o )
Es

tambin un conjunto de formas y mtodos que posibilitan la interaccin de un sistema con los usuarios utilizando formas grficas e imgenes. Con formas grficas se refiere a botones, conos, ventanas, fuentes, etc. los cuales representan funciones, acciones e informacin.

Interfaz Grafica de Usuario (GUI)

Surge

como evolucin de la lnea de comandos de los primeros sistemas operativos y es pieza fundamental en un entorno grfico. 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 grficos, que permitieron que las personas pudieran acceder a un PC sin tener

Interfaz Grafica de Usuario (GUI)

La interfaz grfica de usuario es lo que t y yo vemos cuando ejecutamos un programa en algn sistema operativo e interfaz grfica, 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 elaboracin de

Interfaz Grafica de Usuario (GUI)

Ah, facilmente, seleccionando la pestaa inferior design, creamos la interfaz arrastrando los botones y dems componentes de las barras de objetos que se encuentran en la parte superior del ambiente jbuilder.

4.1 CREACIN DE INTERFAZ GRAFICA PARA USUARIOS

4.1 Creacin de interfaz grafica para usuarios Interfaz audioclip El interfaz AudioClip define los siguientes mtodos: play ( ) (reproduce un clip desde el principio), stop ( ) (detiene la reproduccin del clip), y loop ( ) (reproduce un fichero continuamente). Despus de cargar un clip utilizando getAudioClip (), estos mtodos se pueden usar para orlo.

El

4.1 Creacin de interfaz grafica para usuarios

de consola Aunque la salida a la ventana de un appletdebe ser realizada atreves de mtodos 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 mtodo como System.out.println ( ), la salida no se enva a la ventana de applet, sino que aparece bien en la sesin 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
Salida

4.1 Creacin de interfaz grafica para usuarios

interfaz ActionListener Esta interfaz define el mtodo ationperformaed ( ) que se invoca cuando se da un evento de accin. Su forma general es la siguiente: void actionPerformed (ActionEvent ae)

La

interfaz AdjustmentListener Esta interfaz define el mtodo adjustmentValueChanged ( ) que se invoca cuando se produce un evento de ajuste. Su forma general es la siguiente: Void adjustmentValueChanged(AdjustmentEvent ae) La interfaz ComponentListener Esta interfaz define cuatro mtodos que se invocan

La

4.1 Creacin de interfaz grafica para usuarios

Void

componentResized( componentEve nt ce) Void componentMoved( componentEvent ce) Void componentShown( componentEvent ce) Void componentHidden( componentEven t ce)

4.1 Creacin de interfaz grafica para usuarios interfaz ContainerListener Esta interfaz tiene dos mtodos. Cuando se aade un componente a un contenedor, se invoca a componentRemoved ( ). Sus formas generales son las siguientes:

La

Void componentAdded(ContainerEvent ce) Void componentRemoved(ContainerEvent ce)

4.1 Creacin de interfaz grafica para usuarios

interfaz focusListener Esta interfaz define dos mtodos. 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: Void focusGained ( focusEvent fe ) Void focusLost (focusEvent fe) La interfaz intemListener Esta interfaz define el mtodo itemStatechanged ( ) que se invoca cuando cambia el estado de un elemento. Su forma general es la siguiente:
La

4.1 Creacin de interfaz grafica para usuarios

interfaz KeyListener Esta interfaz define tres mtodos.los mtodos keyPressed ( ) y keyRelased ( ) se invocan cuando se presiona y se libera una tecla,respectivamente.el mtodo keyTyped ( ) se invoca cuando se introduce un carcter. Por ejemplo, si un usuario presiona y libera la tecla A, se generan tres eventos en este orden: tecla presionada, carcter introducido, tecla liberada. Si un usuario presiona y libera la tecla INICIO, se generan dos eventos en este orden: tecla presionada, tecla liberada.

La

Las formas generales de estos eventos son los siguientes:

4.1 Creacin de interfaz grafica para usuarios

interfaz MouseListener Esta interfaz define cinco mtodos. 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 mtodo mouseEntered ( ). Cuando el raton sale del componente se llama a mouseExited ( ). Los mtodos mousePressed ( ) se invocan cuando se presiona y se libera el ratn, respectivamente. Las formas generales de estos mtodos son las siguientes: Void mouseClicked (mouseEvent me)
La

4.1 Creacin de interfaz grafica para usuarios

interfaz MouseMotionListener( ) y mouseReleased Esta interfaz define dos mtodos. Al mtodo mousedragged ( ) se le llama tantas veces como se arrastre al ratn. Al mtodo mouseMoved ( ) se le llama tantas veces como se mueva el ratn. Sus formas generales son las siguientes: Void mousedragged(mouseEvent ) Void mouseMoved ( MouseEvent me) La interfaz TextListener Esta interfaz define el mtodo textChanged ( ) que se invoca cuando hay un cambio en una area de texto o en campo de texto. Su forma general es la siguiente:
La

interfaces de auditor que mas se utilizan

interface actionListener descripcin Define un mtodo para recibir eventos de accin. AdjustmentListene Define un mtodo para recibir eventos de r ajuste. ComponentListene Define 4 mtodospara reconocer cuando se r oculta, se mueve, se cambia de tamao o se muestra un componente. containerListener Define 2 mtodos para reconocer cuando se aade o se elimina un componente de un contenedor. FocusListener Define 2 mtodos para reconocer cuando gana o pierde un componente el foco del teclado. ItemListener Define un mtodo para reconocer cuando cambia el estado de un elemento.

interfaces de auditor que mas se utilizan

KeyListener MouseListener MouseMotionListener TextListener WindowsListener Define 3 mtodos para reconocer cuando se presiona , se libera o se golpeamtodos para reconocer Define 5 una tecla.

cuando se presiona o se libera el ratn, se hace click conreconocer Define 2 mtodos para el, o este se mete se arrastra o se mueve el cuando en un componente o sale de el. ratn. un mtodo para reconocer Define cuando cambia un valor de texto. Define 7 mtodos para reconocer cuando una ventana se activa, se cierra, se desactiva, se minimiza, se maximiza, se abre o se sale de ella.

4.1.1 Librera de interfaz grafica para usuarios

La

utilizacin de objetos dinmicos supone dejar pendiente en el montaje de la aplicacin el enlace de dichos objetos. Cuando la aplicacin esta en ejecucin, y solo entonces, se produce el enlace (dinamic binding) con los objetos contenidos en la librera. La creacin de libreras dinmicas corre a cargo del enlazador o montador (en nuestro caso el ld) aunque tambin es posible indicar

4.1.1 Librera de interfaz grafica para usuarios

creacin

de una librera dinamica.

Cuando se crea un objeto dinmico es necesario que dicho cdigo objeto sea independiente de la posicin, para conseguir este tipo de cdigo debe especificarse al compilador la opcin fPIC (Position Independent code). Dicho flag debe indicarse tanto en la compilacin como en el montaje de la

4.1.1 Librera de interfaz grafica para usuarios

Para montar los objetos es necesario adems indicar la opcin shared para que el resultado sea un fichero objeto compartible. $gcc shared fPIC o libfich.so fich1.o fich2.o Para compilar la librera dinmica puede utilizarse un makefile como este: CC=gcc CFLAGS=-Wall ggdb fPIC LDFLAGS=-fPIC shared Libfich.so: fich1.o fich2.o

4.1.1 Librera de interfaz grafica para usuarios

de una librera dinmica. Para utilizar esta librera desde un programa no hay que hacer nada adicional; es exactamente igual que en el caso de la librera esttica. Al hacer uso de una librera, el compilador busca primero una versin dinmica (.so), si no la encuentra entonces busca la versin esttica. Si se tienen las dos versiones de una librera y se quiere utilizar la versin esttica debe indicarse al montador el flag static. Cuando un programa utiliza libreras dinmicas, el a sistema necesita
uso

4.1.1 Librera 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 librera 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

4.1.2 Aplicaciones GUI Aplicacin GUI Entendemos como aplicacin GUI (Graphic User Interface) a toda aquella que tiene interfaz grfica Windows, compuesta bsicamente por los objetos transacciones, work panels, procedimientos y reportes, generadas con los generadores GeneXus Visual Basic, Visual Fox, Java y .Net.

4.1.2 Aplicaciones GUI Aplicacin Web Una aplicacin Full Web tiene una interfaz HTML (HyperText Markup Language) y se ejecuta dentro de un browser. Este tipo de aplicaciones se desarrolla bsicamente con los objetos Web de GeneXus: web panels y web transactions. Se generan con cualquiera de los generadores Web: Visual Basic,

4.1.2 Aplicaciones GUI Reingeniera de la aplicacin La premisa fundamental para convertir un aplicacin WIN a WEB es que los ambientes implicados (grfico, html) son diferentes y por lo tanto la conversin implicar algo mas que la mera conversin de los objetos. Deber programarse con estilo web.

IN TAC PU A OM FIC 2 C RA 4. G

4.2 Computacin Grafica

La

computacin grfica o grficos por ordenador es el campo de la informtica visual, donde se utilizan computadoras tanto para generar imgenes visuales sintticamente como integrar o cambiar la informacin visual y espacial probada del mundo real.

4.2 Computacin Grafica de la Computacin Grfica Actualmente existen muchas aplicaciones, en diversos campos de la ingeniera e investigacin cientfica, que demandan una gran cantidad de recursos computacionales. La Computacin Grfica cubre reas muy diversas, que abarcan desde la visualizacin cientfica o ingeniera hasta el arte y el tratamiento fotogrfico.
Aplicaciones

4.2 Computacin Grafica

Interfaces

Grficas de Usuario (GUI: Graphical User Interface) Grficos estadsticos Cartografa Medicina Diseo Asistido por Computadora (CAD: Computer-Aided Design) Multimedios (educativos) Entretenimiento (juegos) Arte

4.2.1 rea de Dibujo

El

control Drawing Area (rea de Dibujo) proporciona un lienzo en el que poder dibujar de forma sencilla haciendo uso de los mtodos de la clase gtk.gdk.Drawable (dibujable). Un control Drawing Area en realidad encapsula un elemento del tipo gtk.gdk.Window (ventana), que es una subclase de gtk.gdk.Drawable (al igual que gtk.gdk.Pixmap).

4.2.1 rea de Dibujo

Para

crear un rea de Dibujo se utiliza la funcin: drawing_area = gtk.Drawing Area() elementos Drawing Area (rea de Dibujo) se crean inicialmente con un tamao de (0,0), por lo que es necesario usar el siguiente mtodo para poder hacer visible el rea de Dibujo (drawing_area) asignndole un ancho y una altura

Los

4 . 2 . 1 re a d e D i u j b o Trabajos con grficos El AWT tiene una amplia variedad de mtodos grficos. Todos los grficos se dibujan en una ventana, que puede ser la ventana principal en un applet, una ventana hija de un applet, o una ventana de aplicacin 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 travs de un contexto grafico.

4 . 2 . 1 re a d e D i u j b o 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 mtodos, como paint () o update (). Es devuelto por el mtodo getGraphics () de component.

4 . 2 . 2 Pri i va s d e D i u j m ti b o qLneas Las lneas se dibujan con el mtodo drawLine (), que tiene el siguiente formato: void drawLine (int start X, int start Y, int end X, int end Y) drawLine () dibuja una linea con el color con el cursor de dibujo, que comienza en start X, start Y y termina en end X, end Y .

4 . 2 . 2 Pri i va s d e m ti D i uj b o qArcos El arco esta encajado en un rectngulo cuya esquina superior izquierda viene dada por top,left y cuya anchura y altura son width y heingth.

El arco se dibuja desde starAngle hasta el angulo SweepAngle.

La Elipse se dibuja dentro de un

4 . 2 . 2 Pri i va s d e D i u j m ti b o
qRectngulos Los mtodos drawRest () y fillRect () dibujan un rectngulo solo con el borde o relleno respectivamente tiene el siguiente formato: void dawRest (int top, int left, int width, int hiegth) void fillRect (int top, int left, int width, int hiegth) la esquina superior izquierda del rectngulo est en la posicin top left.

4 . 2 . 2 Pri i va s d e D i u j m ti b o Para dibujar un rectngulo redondeado e usan los mtodos drawRoundRect() o fillRoundRect(), que tienen el siguiente formato: void drawRoundRect (int top, int left, int width, int hiegth, int xDiam, int yDiam) void fillRoundRect (int top, int left, int width, int hiegth, int xDiam, int yDiam)

4 . 2 . 2 Pri i va s d e m ti D i uj b o
qElipses y Crculos Para dibujar un elipse se utilice el mtodo drawOvall(), y para un elipse rellena, el mtodo fillOvall(). Tiene el siguiente formato: void drawOval(int top, int width, int height) void fillOval(int top, int width, int height)

4 . 2 . 2 Pri i va s d e m ti D i uj b o
qPolgonos Tambin se pueden dibujar figuras con formas arbitrarias utilizando los mtodos drawPolygon() y flPoIygon(), que tienen el siguiente formato: void drawPolygon(int x[ ], int y[ ], int numPoints) void fillPolygon(int x[ ], int y[ ], int numPoints)

4 . 2 . 2 Pri i va s d e D i u j m ti b o Los vrtices del polgono estn especificados por las parejas de coordenadas que vienen en los arrays x e y. El nmero de puntos definidos por x e y est especificado en numPoints. Estos mtodos tienen formas alternativas en las que el polgono est especificado por un objeto Polygon.

4 . 2 . 2 Pri i va s d e m ti D i uj b o
Establecer El Modo De Pintar El modo de pintar determina cmo 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 mtodo setXORMode(),

4 . 2 . 2 Pri i va s d e m ti D i uj b o

Trabajar con color Java trabaja con el color mediante una forma independiente del dispositivo, y porttil. 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 visualizacin(monitor, etc.)en el que se est ejecutando el programa o el applet. De sta manera, el cdigo no tiene que

4 . 2 . 2 Pri i va s d e D i u j m ti b o color se encapsula en la clase Color. Color define varias constantes(por ej. Color.black)para espeficar un conjunto de colores comunes.Tambin puede crear sus propios colores utilizando uno de los constructores de color.Las formas que ms se utilizan son las sigs: Color(int read, int green, int blue)

El

4 . 2 . 2 Pri i va s d e D i u j m ti b o 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
El

4 . 2 . 2 Pri i va s d e D i u j m ti b o
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 mtodos setForeground() y setBackground(). Tambin se puede seleccionar el

4 . 2 . 2 Pri i va s d e D i u j m ti b o

Mtodos De La Clase Color La clase Color define varios mtodos para manipular los colores:
Uso

Del Matriz (Hue), La Saturacion(saturation), Y El Brillo(brightness)

Fuentes de Informacin

Libro Java 2 cuarta edicion Mc Graw Hill http://es.wikipedia.org/wiki/Computaci %C3%B3n_gr%C3%A1fica http://es.wikipedia.org/wiki/Interfaz_gr %C3%A1fica_de_usuario

Presentaron:

Armas Vzquez Edgardo Barrionuevo Trujillo Ana Daniela Duran Yescas Alina Lissete Espinoza Gmez Esmeralda Juan Valdez Julio Cesar Pestaas Vargas Alfredo Ramn Castro Nidia Lissete Vzquez Alonso Guadalupe

Grupo A 3 Semestre

su on r ci Po en at