diapos de topicos

INSTITUTO TECNOLOGICO DE TUXTEPEC

TOPICOS SELECTOS DE PROGRAMACION

UNIDAD 4

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).

TEMAS

INTRODUCCIÓN

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)

In

terf

az

Gra

fica

de U

suari

o (

GU

I)

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.



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.


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).


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.

4.1 CREACIÓN DE INTERFAZ GRAFICA PARA USUARIOS

http://es.wikipedia.org/wiki/Archivo:Multiple_icon_selection.png

4.1 Creación de interfaz grafica para usuarios

El Interfaz audioclipEl interfaz AudioClip define 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 AppletStubMediante el interfaz AppletStub, se puede

comunicar un applet y el navegador (o el visor de applets). Normalmente, no se suele utilizar este interfaz.


Salida de consolaAunque 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.


La interfaz ActionListenerEsta interfaz define el método ationperformaed ( ) que se

invoca cuando se da un evento de acción. Su forma general es la siguiente:

void actionPerformed (ActionEvent ae)

La interfaz AdjustmentListenerEsta interfaz define el método 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 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:


Void componentResized( componentEvent ce)Void componentMoved( componentEvent ce)Void componentShown( componentEvent ce)Void componentHidden( componentEvent ce)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.


La interfaz ContainerListenerEsta 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(ContainerEvent ce)

Void componentRemoved(ContainerEvent ce)


La interfaz focusListenerEsta 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:

Void focusGained ( focusEvent fe )Void focusLost (focusEvent fe)

La interfaz intemListenerEsta interfaz define el método itemStatechanged ( )

que se invoca cuando cambia el estado de un elemento. Su forma general es la siguiente:

Void itemStateChanged (ItemEvent ie)


La interfaz KeyListenerEsta 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:Void keyPreesed (keyEvent ke)Void keyReleased (keyEvent ke)Void keyTyped (keyEvent ke)


La interfaz MouseListenerEsta 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:

Void mouseClicked (mouseEvent me)Void mouseEntered (mouseEvent me)Void mouseExited (mouseEvent me)Void mousePressed (mouseEvent me)Void mouseReleased(mouseEvent me)


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 TextListenerEsta 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:

Void texChanged (TextEvent te)

interfaces de auditor que mas se utilizan

interface descripción

actionListener Define un método para recibir eventos de acción.

AdjustmentListener

Define un método para recibir eventos de ajuste.

ComponentListener

Define 4 métodos para reconocer cuando se oculta, se mueve, se cambia de tamaño o se muestra un componente.

containerListener Define 2 métodos para reconocer cuando se añade o se elimina un componente de un contenedor.

FocusListener Define 2 métodos para reconocer cuando gana o pierde un componente el foco del teclado.

ItemListener Define un método para reconocer cuando cambia el estado de un elemento.

KeyListener Define 3 métodos para reconocer cuando se presiona , se libera o se golpea una tecla.

MouseListener Define 5 métodos para reconocer cuando se presiona o se libera el ratón, se hace click con el, o este se mete en un componente o sale de el.

MouseMotionListener Define 2 métodos para reconocer cuando se arrastra o se mueve el ratón.

TextListener Define un método para reconocer cuando cambia un valor de texto.

WindowsListener Define 7 métodos para reconocer cuando una ventana se activa, se cierra, se desactiva, se minimiza, se maximiza, se abre o se sale de ella.

interfaces de auditor que mas se utilizan

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 (dinamic binding) 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.


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 Independent code). 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


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.oPara compilar la librería dinámica puede utilizarse

un makefile como este:CC=gccCFLAGS=-Wall –ggdb –fPICLDFLAGS=-fPIC –sharedLibfich.so: fich1.o fich2.o$(CC) $(LDFLAGS) –o$@$ˆEn este caso, la librería tiene como extensión .so

que significa shared object.


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):


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:$ ./apli1Apli1:error in loading shared libraries: libfich.so: cannot

open shared object file: No such file or directoryNormalmente, 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.

4.1.2 Aplicaciones GUI

Aplicación GUIEntendemos como aplicación GUI

(Graphic User Interface) a toda aquella que tiene interfaz gráfica Windows, compuesta básicamente por los objetos transacciones, work panels, procedimientos y reportes, generadas con los generadores GeneXus Visual Basic, Visual Fox, Java y .Net.


Aplicación WebUna aplicación Full Web tiene una

interfaz HTML (HyperText Markup Language) y se ejecuta dentro de un browser. Este tipo de aplicaciones se desarrolla bá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


Reingeniería de la aplicaciónLa 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”.

4.2 COMPUTACIÓN

GRAFICA

http://es.wikipedia.org/wiki/Archivo:Blender_2.45_screenshot.jpg

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.


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.


Interfaces Gráficas de Usuario (GUI: Graphical User Interface)

Gráficos estadísticos Cartografía Medicina Diseño 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 métodos 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).


Para crear un Área de Dibujo se utiliza la función:

drawing_area = gtk.Drawing Area() 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:

Trabajos con gráficosEl 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.


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.


LíneasLas líneas se dibujan con el método 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 Primitivas de Dibujo

ArcosEl arco esta encajado en un rectángulo

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 rectángulo cuya esquina superior viene dada por top,left y cuya anchura y altura son width y heingth.


RectángulosLos métodos drawRest () y fillRect () dibujan un rectángulo 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 rectángulo está en la posición top left. Las dimensiones del rectángulo las especifican width y heigth.


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, int hiegth, int xDiam, int yDiam)void fillRoundRect (int top, int left, int width, int hiegth, int xDiam, int yDiam)


Elipses y CírculosPara dibujar un elipse se utilice el método drawOvall(), y para un elipse rellena, el método fillOvall(). Tiene el siguiente formato:

void drawOval(int top, int width, int height)

void fillOval(int top, int width, int height)


PolígonosTambién se pueden dibujar figuras

con formas arbitrarias utilizando los métodos

drawPolygon() y fülPoIygon(), que tienen el siguiente formato:

void drawPolygon(int x[ ], int y[ ], int numPoints)

void fillPolygon(int x[ ], int y[ ], int numPoints)


Los vértices del polígono están especificados por las parejas de coordenadas que

vienen en los arrays x 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


Establecer El Modo De PintarEl 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(),


Trabajar con colorJava 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.


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(int read, int green, int blue)Color(int rgbValue)Color(float red, float green, float

blue)


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:

int nuevoRojo=(0xff000000 | (0xc0<<16) | (0x00<<8)10x00);

Color rojoOscuro=newColor(nuevoRojo);


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.


Métodos De La Clase ColorLa clase Color define varios

métodos para manipular los colores:

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


Fuentes de InformaciónLibro Java 2 cuarta edicion Mc Graw

Hillhttp://es.wikipedia.org/wiki/Computaci

%C3%B3n_gr%C3%A1ficahttp://es.wikipedia.org/wiki/Interfaz_gr

%C3%A1fica_de_usuario

Presentaron:

Armas Vázquez EdgardoBarrionuevo Trujillo Ana Daniela

Duran Yescas Alina LisseteEspinoza Gómez Esmeralda

Juan Valdez Julio Cesar Pestañas Vargas Alfredo

Ramón Castro Nidia LisseteVázquez Alonso Guadalupe

Grupo “A” 3° Semestre

Por su

atencion

…

diapos de topicos

Technology