TAP 01 - Eventos e Interfaz Grafica de Usuario Parte I

Tpicos Avanzados de Programacin
Eventos - Interfaz Grfica de Usuario
Programacin orientada a eventos Un evento es un objeto que representa un cambio en un componente, este es generalmente producido por el usuario al realizar alguna operacin, por ejemplo, escribir en un campo de texto o hacer click sobre un botn. En evento es una accin iniciada por el usuario. Ejemplo de eventos son: presionar un botn, cambiar un texto, etc.
M.C. Daniel Benito Romn Ocampo
Pag. 1/80
Un paradigma de programacin orientado a eventos es aquel en el que la estructura y ejecucin del programa dependen de los sucesos (eventos) que ocurran en el sistema o que ellos mismos provoquen.
Pag. 2/80
El programador debe definir los eventos a los cuales el programa reaccionar y las acciones que seguir al presentarse cada uno, esto se conoce como manejador de eventos.
Existen mltiples eventos y dependen del sistema operativo y del lenguaje de programacin utilizado. Al ejecutarse un programa as programado, se iniciar con el cdigo correspondiente a su ejecucin y luego el programa esperar a que ocurra un evento. Al ocurrir este, se ejecutar el cdigo correspondiente al evento que se realiz.
Pag. 3/80
Interfaz Grfica de Usuario (IGU) La Interfaz Grfica de Usuario, es una forma de facilitar la interaccin del usuario con la computadora a travs de la utilizacin de un conjunto de imgenes y objetos pictricos (iconos, ventanas, etc.).
La interfaz de usuario es el vnculo entre el usuario y el programa de computadora. Una interfaz es un conjunto de comandos o menes a travs de los cuales el usuario se comunica con el programa. 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 menes, 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.
GUI (Graphical User Interface), Pronunciado: GOO-ee.
GUI es un acrnimo del vocablo ingls Graphical User Interface
Figure.- Un ejemplo de una Interfaz Grfica de Usuario en Windows XP.
Pag. 4/80
Antecedentes: La primera interfaz grfica de usuario, fue desarrollada por XEROX, en EU., en los aos 70s. Despus, Apple Macintosh la comercializo en sus computadoras personales, en 1984. La primera version popular se distribuyo con el sistema operativo windows. 1970: Creacin de la primera GUI. El centro de investigacin (Palo Alto Research Center) de Xerox Corporations dise la primera GUI. 1980: Inicia la comercializacion. La Apple Corporations inici a comercializar la GUI, en sus computadoras Macintosh. 1994: La GUI se vuelve popular. Microsoft Windows, inicia a comercializar la GUI, y el sistema Windows se vuelve muy popular.
Figure.- La primera interfaz Grafica de Usuario disponible en una computadora Apple's Mac OS X
Pag. 5/80
Ejemplos de Sistemas que soportan GUIs:
Sistemas Oprativos: Mac OS Microsoft Windows NEXTSTEP X Window System Linux
Kits de Herramientas: Motif (CDE) Qt (KDE) GTK+ (GNOME) MFC (Win32) JFC
Pag. 6/80
Componentes de una GUI: Una Interfaz Grafica de Usuario, tal como Microsoft Windows o Apple Macintosh, contienen los siguienetes elementos basicos:
Puntero (pointer):
Un smbolo que aparece en la pantalla de la PC, permitiendo posicionarlo en cualquier parte de la pantalla, y poder seleccionar algun objeto visual.
Dispositivo Apuntador (pointing device):
Un Dispositivo tal como un mouse (raton) o bola giratoria (trackball) que permite seleccionar un objeto disponible en la pantalla.
Pag. 7/80
Iconos (icons)
Son pequeas figuras que representan comandos o acciones, archivos o ventanas.
Escritorio (Desktop)
El area sobre la pantalla donde se agrupan los iconos. Se denomina escritorio, porque, los iconos representan los objetos reales que se colocan un escritorio de trabajo.
Pag. 8/80
Ventanas (Windows)
Las ventanas permiten dividir la pantalla en diferentes areas. En cada venta, es posible ejecutar un diferente programa o mostrar un archivo diferente. Las ventanas se pueden mover en cualquier parte de la pantalla, y se puede modificar su forma y tamao.
Mens (Menus)
Los mens son los componentes mas utilizados en una IGU, permiten ejecutar comandos u ordenes, seleccionando una opcion del men.
Pag. 9/80
Barras de desplazamiento
Son componentes utilizadas en las ventanas para poder visualizar toda la informacin que se desea mostrar, como por ejemplo, en una imagen que supera el tamao de la ventana, las barras de desplazamiento ayudarn a ver la informacin que no resulta visible para el usuario, stas barras pueden estar de manera vertical u orizontal.
Controles deslizantes Un control deslizante le permite ajustar una configuracin en un intervalo de valores. Tiene la siguiente apariencia:
Pag. 10/80
Botones de opcin Los botones de opcin permiten realizar una seleccin entre dos o ms opciones. Normalmente aparecen en cuadros de dilogo. En la siguiente imagen se muestran dos botones de opcin. La opcin "Color" est seleccionada.
Casillas Las casillas le permiten seleccionar una o varias opciones independientes. A diferencia de los botones de opcin, que le limitan a una eleccin, las casillas le permiten seleccionar varias opciones al mismo tiempo.
Pag. 11/80
Cuadros de texto
Un cuadro de texto le permite escribir informacin, por ejemplo, un trmino de bsqueda o una
contrasea. En la siguiente imagen se muestra un cuadro de dilogo que contiene un cuadro de texto.
Los cuadros de texto que requieren que escriba una contrasea normalmente ocultan la contrasea mientras la escribe, por si alguien estuviera mirando la pantalla.
Los cuadros de texto para contraseas normalmente ocultan la contrasea.
Pag. 12/80
Listas desplegables Las listas desplegables son similares a los mens. En lugar de hacer clic en un comando, se selecciona una opcin. Cuando se cierra, la lista desplegable solo muestra la opcin seleccionada actualmente. Las dems opciones disponibles se ocultan hasta que haga clic en el control, tal y como se muestra a continuacin:
Cuadros de lista Un cuadro de lista muestra una lista de opciones que puede seleccionar. A diferencia de una lista desplegable, algunas de las opciones o todas ellas estn visibles sin que sea necesario abrir la lista.
Pag. 13/80
La mobilidad de Informacin: Adems de los componentes visuales, la Interface Grafica de Usario, permite mover datos de una aplicacin a otra. Una verdadera GUI incluye formatos estndar para representar texto y graficos (.doc, .txt .rtf,gif, tif, jpg).
Aplicaciones de GUI: Existen un gran nmero de aplicaciones que incorporan una GUI, a continuacin se presentan algunas de stas:
Interfaz Grafica de Usuario utilizada en el paquete matematico MATLAB:
Figure.- IGU: Matlab
Pag. 14/80
Aplicaciones de GUI:
Figure.- IGU: Matlab
Figure.- IGU: Navegador IE
Pag. 15/80
Aplicaciones de GUI:
Figure.- Interfaz Grafica de usuario en un sistema de Unix.
Figure.- Reproductor de musica iTunes.
Pag. 16/80
Deteccin de Eventos La programacin orientada a eventos permite interactuar con el usuario en cualquier momento de la ejecucin del programa. Esto se consigue debido a que los programas creados bajo esta arquitectura se componen por un bucle exterior permanente encargado de recoger los eventos, y distintos procesos (objetos, mtodos o segmentos de cdigo) que se encargan de tratarlos. Habitualmente, este bucle externo permanece oculto al programador que simplemente se encarga de tratar los eventos, aunque en algunos lenguajes ser necesaria su construccin. Ejemplo de segmento de programa orientado a eventos en pseudo lenguaje:
While (true) { Switch (event) { case mousse_button_down: case mouse_click: case keypressed: case Else: } }
Control del flujo del Programa La programacin orientada a eventos supone una complicacin aadida con respecto a otros paradigmas de programacin, debido a que el flujo de ejecucin del software escapa al control del programador. En cierta manera podramos decir que en la programacin clsica el flujo estaba en poder del programador y era este quien decida el orden de ejecucin de los procesos, mientras que en programacin orientada a eventos, es el usuario el que controla el flujo y decide.
Pag. 17/80
Ejemplo de tipos de Eventos En Java podemos distinguir dos clases de eventos: Eventos generales o simples: Son eventos producidos por una accin general. Por ejemplo, pulsar una tecla, mover el ratn, etc. En la tabla siguiente se muestran los eventos estndar para el teclado y el ratn:
EVNTOS ESTNDAR PARA TECLADO Y RATN ID del evento

KEY_PRESS KEY_RELEASE KEY_ACTION KEY_ACTION_RELEASE MOUSE_DOWN MOUSE_UP MOUSE_MOVE MOUSE_ENTER MOUSE_EXIT MOUSE_DRAG
Mtodo
keyDown(Event,int) keyUp(Event,int) keyDown(Event,int) keyUp(Event,int) mouseDown(Event,int,int) mouseUp(Event,int,int) mouseMove(Event,int,int) mouseEnter(Event,int,int) mouseExit(Event,int,int) mouseDrag(Event,int,int)
Descripcin
Pulsar una tecla Soltar una tecla Pulsar una tecla de funcin Soltar una tecla de funcin Pulsar el ratn Movimiento hacia arriba del ratn Movimiento del ratn Movimiento de entrada del ratn Movimiento de salida del ratn Arrastrar el ratn
Pag. 18/80
Eventos especficos: Son los eventos que se utilizan con ms frecuencia en JAVA. Imagine, por ejemplo, un caso en el que tengamos varios botones. Si cada botn, al ser pulsado, no generase un evento nico cmo reconoceramos el botn que ha sido pulsado? Por esta razn, existen los llamados eventos especficos, en el sentido de que contienen ms informacin que los eventos generales sobre el componente que ha generado el evento. Los eventos generados por componentes aparecen en la siguiente tabla:
EVENTOS GENERADOS POR COMPONENTES Componente Button Check Box Choice Component Component Component Component Component Component Component Component Component Component Component ID del evento ACTION_EVENT ACTION_EVENT ACTION_EVENT GOT_FOCUS KEY_ACTION KEY_ACTION_RELEASE KEY_PRESS KEY_RELEASE LOST_FOCUS MOUSE_ENTER MOUSE_EXIT MOUSE_DOWN MOUSE_UP MOUSE_MOVE Descripcin El usuario ha hecho click. El usuario ha pulsado una casilla de activacin. El usuario ha seleccionado un elemento. Obtiene el foco de entrada. El usuario ha pulsado una tecla de funcin. El usuario ha soltado una tecla de funcin. El usuario ha pulsado una tecla. El usuario ha soltado una tecla. Se ha perdido el foco de entrada. El ratn ha entrado en un componente. El ratn ha salido de un componente. Se ha pulsado un botn del ratn. Se ha soltado un botn del ratn. El usuario ha movido el ratn.
Pag. 19/80
Componente Component List List List Menu Item ScrollBar ScrollBar ScrollBar ScrollBar ScrollBar TestField Window Window Window Window
ID del evento MOUSE_DRAG ACTION_EVENT LIST_SELECT LIST_DESELECT ACTION_EVENT SCROLL_LINE_UP SCROLL_LINE_DOWN SCROLL_PAGE_UP
Descripcin
Se arrastr el ratn. El usuario ha hecho doble click sobre una lista de elementos. El usuario ha seleccionado un elemento de la lista. El usuario ha anulado la seleccin de un elemento de la lista. Se ha seleccionado un elemento del men. El usuario ha solicitado un desplazamiento ascendente de una lnea. El usuario ha solicitado un desplazamiento escendente de una lnea. El usuario ha solicitado un des plazamiento ascendente de una pgina. El usuario ha solicitado un desplazamiento escendente de una pgina. El usuario ha solicitado un cambio absoluto. Se ha pulsado la tecla "Return". La ventana se ha destruido. La ventana se ha transformado en icono. El icono se ha transformado en ventana. Se ha movido la ventana.
SCROLL_PAGE_DOWN SCROLL_ABSOLUTE ACTION_EVENT WINDOW_DESTROY WINDOW_ICONIFY WINDOW_DEICONIFY WINDOW_MOVED
Pag. 20/80
ACTIVIDAD No.1
Elaborar un ejemplo en papel de una Interfaz Grafica de Usuario (GUI), una pantalla de su posible proyecto de investigacin. Utilizar el mximo nmero de componentes.
Pag. 21/80
Oracle Technology Network

http://docs.oracle.com/javase/
Pag. 22/80
SDK
SDK (The software development kit) El Kit de desarrollo de software (SDK), es un conjunto de herramientas que permiten compilar y ejecutar programas. Java SDK edicin Estandard (JDK) Los Componentes del J2SE 2 SDK, son los siguientes: J2SE 2
Development Tools Runtime Environment Additional Libraries
J2SE 2 SDK Samples

Demo Applets and Applications Source Code (JAVA API)
J2SE 2 API Documentation
Pag. 23/80
JAVA 2 Platform Standard Edition 5.0 Development Kit (JDK 5.0):
Pag. 24/80
Java Platform Standard Edition 7 Documentation

http://docs.oracle.com/javase/7/docs/
Pag. 25/80
Estructura de directorio del JAVA SDK: Cuando se instala el Java 2 SDK, produce, la siguienete estructura de directorio ( arbol de directorios):
Pag. 26/80
JAVA SDK edicin Empresarial:
Pag. 27/80
Platform Services
http://enterprise.sourceforge.net/java_2_enterprise_edition.htm
Pag. 28/80
Enterprise Application Model

http://enterprise.sourceforge.net/java_2_enterprise_edition.htm
Pag. 29/80
Definicin de la API Una API (del ingls Application Programming Interface - Interfaz de Programacin de Aplicaciones) - Es un conjunto de rutinas (subprogramas o librerias, clases), protocolos y herramientas para construir aplicaciones de software (ver siguiente figura).
Figure: API de Java 2 Edicion Estandard
La API, 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, de igual manera son abstractas: El software que proporciona una determinada API, generalmente se le denomina: Implementacin de la API.
Pag. 30/80
Una muy buena herramienta API, facilita, el desarrollo de un programa, proporcionando todos los bloques para su construccin. El programador integra los bloques necesarios para su aplicacin de software. Las APIs la usan los programadores pero son de gran utilidad para los usuarios finales. Aunque las APIs, son diseadas para que las empleen los programadores. Estas, tambien son de gran utilidad, para los usuarios finales, debido a que grantizan que todos los programas que hacen uso de la misma API, tendrn Interfaces similares. La mayoria de los sistemas operativos, tales como Microsoft Windows, proporcionan una API. Ejemplos de APIs: Microsoft Win32 API SUN J2SE APIs API for SCSI device interfacing The Carbon APIs for the Macintosh OS Common Object Request Broker Architecture (CORBA)
Pag. 31/80
Un API para varias Aplicaciones:
Especificacin de la API de JAVA 2 version Estandar:
Pag. 32/80
WEB:
http://docs.oracle.com/javase/6/docs/api/
Pag. 33/80
Especificacin de la API de JAVA 2 version Estandar:
Pag. 34/80
Especificacin de la API de JAVA 7 version Estandar
http://docs.oracle.com/javase/7/docs/api/index.html
Pag. 35/80
Ejemplo de una especificacin de la API de JAVA: La Especificacin de la clase Button Componente utilizado para incorporar botones (componente GUIs) en el desarrollo de aplicaciones de software.
Pag. 36/80
Ejemplo de una especificacin de la API de JAVA: continuacin Mtodos de la clase Button:
Pag. 37/80
Que es un Applet? Un Applet, es un programa en JAVA que se ejecuta dentro de un navegador (browser), como por ejemplo Netscape Navigator, o Internet Explorer.
Un Applet se integra en una pgina en formato HTML y es automticamente cargado sobre la computadora cliente (Local o Remota) o computadora del usuario, el cual lo ejecuta de forma automtica.
Figure: Un Applet se ejecuta en todos los ambientes de S.O.
Pasos de Ejecucion de un Applet :
1. El navegador busca y localiza el URL. 2. El navegador carga el documento de HTML. 3. El navegador carga las clases de applet. 4. El navegador ejecuta el applet.
Pag. 38/80
URL (Uniform Resource locutor) El Localizador Uniforme de Recurso (URL), es un forma de localizar direcciones (o documentos) y otros servicios en internet. Est diseado para identificar mejor al recurso al cual se ingresa. Las partes que componen al URL son : El protocolo o servicio. El nombre del dominio (nombre del servidor o direccin IP) La va de acceso (camino o ruta dentro de la computadora, donde se localiza el documento o archivo que se desea consulta. http://developers.sun.com/dev/evangcentral/totallytech/ Protocolo: http Dominio: developers.sun.com Va de acceso: dev/evangcentral/totallytech/ ftp://www.pcwebopedia.com/stuff.exe (protocolo FTP) http://www.pcwebopedia.com/index.html (protocolo HTTP)
Pag. 39/80
Creacin de Applets Para crear un applet es necesario crear una subclase de la clase Applet, que est en el paquete java.applet. Dicha clase permite, no slo habilitar el applet sino incluir elementos de la IU, manejar eventos de teclado y ratn y dibujar en pantalla. public class miclase extends java.applet.Applet { ... }
Mtodos Principales init

Se activa cuando el applet es cargado (o recargado). Se utiliza para la creacin de objetos, inicializacin de estado, cargado de imgenes o fuentes y en la seleccin de parmetros. public void init() { ... }
start
Se activa despus de que el applet es inicializado o si ste fue detenido (por ejemplo cuando se cambia de pgina y despus se vuelve a la misma). public void start() { ... }
Pag. 40/80
stop
Se activa cuando se deja la pgina que contiene un applet en ejecucin. Por defecto el applet contina ejecutndose (en background), consumiendo por ello recursos. Modificando este mtodo podemos hacer que ste suspenda la ejecucin y que la reinicie si el applet es visualizado de nuevo. public void stop() { ... }
destroy
Se utiliza para eliminar el applet (por ejemplo para liberar recursos, como pueden serlo los applets que pueda haber creado). Se activa cuando finaliza el browser o cuando se recarga el applet. public void destroy() { ... }
paint
Los applets utilizan este mtodo para dibujar en la pantalla (texto, lneas, colores, fondo o imgenes, etc). Se activa cuando se inicializa el applet, cuando el browser es cubierto por otra ventana y vuelto a mostrar, o cuando se mueve. public void paint(Graphics g) { ... }
Pag. 41/80
update
Esta es la funcin que realmente se llama cuando se necesita una actualizacin de la pantalla. La clase Applet simplemente limpia el rea y llama al mtodo paint(). Esta funcionalidad es suficiente para la mayora de los casos; aunque, de cualquier forma, las clases derivadas pueden sustituir esta funcionalidad para sus propsitos especiales. Es decir, en las situaciones detalladas anteriormente que daan la zona de exposicin del applet, el sistema llama al mtodo paint(), pero en realidad la llamada la realiza al mtodo update(), cuyo comportamiento establecido en la clase Component es llamar al mtodo paint(), tras haber rellenado la zona del applet con su color de fondo por defecto.
repaint
Llamando a este mtodo se podr forzar la actualizacin de un applet, la llamada a update(). Pero hay que tener cierto cuidado, porque AWT posee cierta inteligencia (combinacin casi siempre nefasta), de forma que si se llama a update() mediante repaint() con una frecuencia muy corta, AWT ignorar las llamadas a update() que estime oportuno, pues considera a esta funcin como un bien escaso.
destroy
Se utiliza para eliminar el applet (por ejemplo para liberar recursos, como pueden ser los applets que pueda haber creado). Se activa cuando finaliza el browser o cuando se recarga el applet. public void destroy() { ... }
Pag. 42/80
Proceso de ejecucin de un Applet:
Pag. 43/80
Jerarqua Parcial del AWT (Abstract Window Toolkit)
class java.awt.Component

class java.awt.Button class java.awt.Canvas class java.awt.Checkbox class java.awt.Choice class java.awt.Container
class java.awt.Panel
class java.applet.Applet class java.awt.Dialog
class java.awt.Window
class java.awt.FileDialog
class java.awt.Frame (implements java.awt.MenuContainer)
class java.awt.Label class java.awt.List class java.awt.Scrollbar class java.awt.TextComponent

class java.awt.TextArea class java.awt.TextField
Pag. 44/80
El siguiente esquema presenta el lugar que ocupa la clase Applet dentro de la cadena jerrquica del conjunto de clases de Java.
Pag. 45/80
El Applet ms Trivial:
import java.applet.Applet; public class TrivialApplet extends Applet { }

Despus de realizar la compilacin y ejecucin, obtendremos como salida:
Programa No. 1
import java.awt.*; import java.applet.*; public class Prg01 extends Applet { public void paint(Graphics g) {
g.drawString("Hello World", 20, 20);
} }
Pag. 46/80
Ejercicio No. 1
Programa No. 2
Realizar un Applet para el desarrollo de su GUI (Punto de Venta).
Como en el programa antenior, pero modificando los argumentos utilizados en el mtodo drawString(): Se modidifica la cadena enviada y tambien su posicin. import java.awt.*; import java.applet.*; public class Prg02 extends Applet { public void paint(Graphics g) {
g.drawString("ZAPATARIA 3 HERMANOS", 30, 50);
} }
Pag. 47/80
Despus de ejecutar el programa, vemos lo siguiente:
Pag. 48/80
La Fuente ( Font ) La Clase Font permite crear diferentes tipos de fuentes. Cada Fuente contiene: Nombre de la Fuente ( TimesRoman, Helvetica, Courier) Estilo de la Fuente (PLAIN, BOLD, ITALIA) Tamao de la Fuente (10, 15, 20, 25) Constructor: Font(String name, int style, int size)
Pasos para su utilizacin: Definir o declara el objeto: Font miTipo; Crear e Inicializar el Objeto: miTipo = new Font ( TimesRoman, Font.ITALIC, 25 ); Para habilitar la fuente, que se utilizar posteriormente con el mtodo drawString, utilizamos: g.setFont ( miTipo ); Algunos Metodos: getName() getStyle()
getSize()
Pag. 49/80
Programa No. 3
import java.awt.Graphics; import java.awt.Font;
public class Prg03 extends java.applet.Applet

{ Font miTipo = new Font("TimesRoman", Font.ITALIC, 25);
public void paint(Graphics g)

{ g.setFont( miTipo ); g.drawString("Venta de Zapatos", 15, 50); } }
Pag. 50/80
Ejercicio No. 2
Programa No. 4
Integrar a su GUI (Punto de Venta) un Titulo, utilizando fuente y posicin especifica (centrar en la pantalla).
Ahora, podemos agregar color a la fuente, utilizando la clase color, y sus contantes de color: Color.WHITE Color.BLACK Color.GRAY Color.RED Color.BLUE Color.PINK Color.ORANGE Color.GREEN Para establecer el color del pincel: Utilizado para pintar cualquier objeto o dibujo. Se utiliza el mtodo setColor(), este es un mtodo de la clase Graphics.
Pag. 51/80
java.lang.Object
| +--java.awt.Graphics
setColor(Color c)
Sets this graphics context's current color to the specified color.
Ejemplo: setColor (Color.GREEN);
Ejercicio No. 3
Programa No. 5
Integrar a su GUI (Punto de Venta) una cadena (texto), utilizando fuente con color y posicin especifica (centrar en la pantalla).
Pag. 52/80
import import import import
java.awt.Graphics; java.awt.Font; java.awt.Color; java.applet.Applet;
public class FuenteColor extends Applet { Font Fuente = new Font("TimesRoman",Font.BOLD,25); public void paint(Graphics g) { g.setFont(Fuente); g.setColor(Color.RED); g.drawString("Sistema de ventas",15,50); g.setFont(Fuente); g.setColor(Color.GREEN); g.drawString("Sistema de ventas",15,70); g.setFont(Fuente); g.setColor(Color.YELLOW); g.drawString("Sistema de ventas",15,90); } }
Pag. 53/80
La siguiente figura muestra algunos componentes que se pueden integrar en el diseo de una Interfaz Grafica de Usuario. La mayora de los componentes se localizan dentro del paquete de clases AWT.
Pag. 54/80
Arbol jerrquico de los componentes para la Interfaz de usuario:
Pag. 55/80
AWT and Swing Hierarchy
Pag. 56/80
Java Swing Classes
Pag. 57/80
JAVA SWING
Swing es una de las mejoras principales que ha experimentado el JDK, y representa la nueva generacin de AWT. Lo que da a Swing su importancia es el poder que ofrece para desarrollar interfaces grficas de usuario (GUI) para applets y aplicaciones. La cantidad y calidad de los controles GUI que ofrece Swing no tiene rival en ningn otro juego de herramientas GUI. El paso de AWT a Swing es muy sencillo y no hay que descartar nada de lo que se haya hecho con el AWT. Afortunadamente, los programadores de Swing han tenido compasin y, en la mayora de los casos es suficiente con aadir una "J" al componente AWT para que se convierta en un componente Swing. Es muy importante entender y asimilar el hecho de que Swing es una extensin del AWT, y no un sustituto encaminado a reemplazarlo. Aunque esto sea verdad en algunos casos en que los componentes de Swing se corresponden a componentes del AWT; por ejemplo, el JButton de Swing puede considerarse como un sustituto del Button del AWT, y una vez que se usen los botones de Swing se puede tomar la decisin de no volver a utilizar jams un botn de AWT, pero, la funcionalidad bsica de Swing descansa sobre el AWT. Pgina para consultar las clases: AWT: http://docs.oracle.com/javase/7/docs/api/java/awt/Component.html#setS ize(java.awt.Dimension) SWING: http://docs.oracle.com/javase/7/docs/api/allclasses-noframe.html
Pag. 58/80
Botones:
Un botn es un control o componente GUI, que se utiliza para ejecutar algn comando(s) o emitir algn evento.
Representacin parcial de la Jerarquia de clases del AWT: clase Button.

Localizar la clase Button, dentro de la Jerarqua de clases de Java.
Figure: Jerarqua parcial de Clases AWT
Pag. 59/80
Pag. 60/80
Botones (Button - JButton ) :

Un botn es un control o componente GUI, que se utiliza para ejecutar algn comando(s) o emitir algn evento.
Uso ms comn de los botones: Botn OK para confirmar acciones. Botn Cancel para cancelar acciones. Botn Exit para finalizar o cerrar programas.
Creacin de un Botn:
En Java, para crear un botn, utilizamos la clase Button. Caractersticas de la clase Button: Se crean utilizando la clase Button : o JButton () - crea un botn vaci sin etiqueta. o JButton(String) - crea un botn con una etiqueta(String) Los botones tienen una etiqueta para distinguirlos. Realizan una accin cuando se oprimen.
Pag. 61/80
Programa para crear 4 botones :
Programa No. 6
import java.applet.Applet; import java.awt.*; public class Botones extends Applet { public Button botonUno, botonDos, botonTres, btnplay; public void init() { botonUno = new Button("Uno"); botonDos = new Button("Dos"); botonTres = new Button("Tres"); btnplay = new Button("Play"); add(botonUno); add(botonDos); add(botonTres); add(btnplay); } }
Pag. 62/80
Para iniciar la entrada en Swing, qu mejor que implementar de nuevo otra versin del saludo inicial, pero con los componentes Swing.
Programa No. 7
import javax.swing.*; public class Prg07 extends JFrame { public static void main( String argv[] ) { new Prg07(); } Prg07() { super("Zapateria Lolita"); setLayout(null); JLabel Etiqueta = new JLabel("Venta de calzado"); Etiqueta.setBounds(50,50,100,20); add(Etiqueta); setSize( 400,300); setVisible( true ); } }
Pag. 63/80
Programa No. 8
import java.awt.*; import javax.swing.*; public class Prg08 { public static void main(String[] args) {
JFrame frame = new JFrame("Zapateria 3 Hermanos");
frame.setLayout(new FlowLayout()); frame.add(new JButton("Uno")); frame.add(new JButton("Dos")); frame.add(new JButton("Tres")); frame.add(new JButton("Salir")); frame.setLocation(400, 100); frame.pack(); frame.setVisible(true); } }
Figure: Resultado de la ejecucion del Applet desde el entorno de Eclipse
Pag. 64/80
Ejercicio No. 4
Programa No. 9
Realizar una IGU (Proyecto punto de venta) con un mnimo de 4 botones.
Etiquetas ( Label ) Las etiquetas son cadenas de texto que pueden usarse para etiquetar otros componentes de la Interfaz de Usuario. La ventaja que tienen las etiquetas sobre una cadena de texto ordinaria son: Las etiquetas se adaptan al diseo del panel creado. Las etiquetas se alinean con facilidad dentro de un panel. Evitan volver a pintar cada ves que el panel se redibuja. Formas de uso: Existen tres formas de crear una etiqueta: Label ( ) Crea una etiqueta vaca, alineada a la izquierda. Label ( String ) Crea una etiqueta con la cadena de texto dada, tambin, alineada a la izquierda. Label ( String, int ) Crea una etiqueta con la cadena de texto y alineacin dada.
Pag. 65/80
La alineacin puede tomar tres valores: 0 = Label.LEFT - Para una alineacin a la izquierda 1 = Label.CENTER - Para una alineacin al centro 2 = Label.RIGHT - Para una alineacin a la derecha Ejemplo: Label ( mi Etiqueta, Label.CENTER );
Etiquetas ( Label )
Programa No. 10
import java.awt.*; import java.applet.*; public class Prg10 extends Applet { Label lblSisventas; public void init() {
lblSisventas = new Label("Sistema de ventas");
add(lblSisventas); } }
Pag. 66/80
Etiquetas ( JLabel ) Las etiquetas son cadenas de texto que pueden usarse para etiquetar otros componentes de la Interfaz de Usuario. La ventaja que tienen las etiquetas sobre una cadena de texto ordinaria son: Las etiquetas se adaptan al diseo del panel creado. Las etiquetas se alinean con facilidad dentro de un panel. Evitan volver a pintar cada vez que el panel se redibuja. Formas de uso: JLabel () Crea un caso de JLabel sin la imagen y con un cordn vaco para el ttulo. JLabel(Icon image) Crea un caso de JLabel con la imagen especificada. JLabel(Icon image, int horizontalAlignment) Crea un caso de JLabel con la imagen especificada y la alineacin horizontal. JLabel(String text) Crea un caso de JLabel con el texto especificado. JLabel(String text, Icon icon, int horizontalAlignment), Crea un caso de JLabel con el texto especificado, imagen, y la alineacin horizontal. JLabel(String text, int horizontalAlignment) Crea un caso de JLabel con el texto especificado y la alineacin horizontal.
Pag. 67/80
Programa No. 11 import javax.swing.*; public class Prg11 extends JFrame { public static void main( String argv[] ) { new Prg11(); } Prg11() { setLayout(null); JLabel etiq1= new JLabel(" Etiqueta 1"); etiq1.setBounds(50,50,100,50); add( etiq1 ); JLabel etiq2= new JLabel(" Etiqueta 2"); etiq2.setBounds(160,50,100,50); add(etiq2); JLabel etiq3= new JLabel(" Etiquetas 3"); etiq3.setBounds(270,50,100,50); add(etiq3); setSize( 400,300); setTitle(" JEtiquetas "); setVisible( true ); } }
Pag. 68/80
Ejercicio No. 5
Programa No. 12
Integrar a su GUI (Punto de Venta) un mnimo de 5 etiquetas, especificar su posicin (x,y). setBounds (10, 30, 300, 20);
Campos de Texto:
Los campos de texto le permiten al usuario introducir texto o entradas del teclado. Creacin de campos de texto: TextField ( ) Crea un campo de texto de 0 caracteres de amplitud. TextField (int) Crea un campo de texto vaco de N caracteres de amplitud. TextField(String) Crea un campo de texto de 0 caracteres de amplitud, e inicindolo con una cadena. TextField (String, int) Crea un campo de texto de N caracteres de amplitud e inicindolo con una cadena.
Pag. 69/80
Programa para la creacin de campos de texto:
Programa No. 13
import java.awt.*; import java.applet.*; public class Prg13 extends Applet { TextField txtNombre, txtNoControl; public void init() {
txtNombre = new TextField("escribir algo aqui", 25);
txtNoControl = new TextField(8); add(txtNombre); add(txtNoControl); } }

Resulta al Ejecutar el applet de campo de Texto:
Pag. 70/80
Integracin de la Etiqueta y el campo de Texto:
Campos de Texto (JTextField):

Los campos de texto le permiten al usuario introducir texto o entradas del teclado. Creacin de campos de texto: JTextField() Estructuras un nuevo TextField. JTextField(Document doc, String text, int columns) Estructuras un nuevo JTextField que usa el modelo de almacenamiento de texto dado y el nmero dado de columnas. JTextField(int columns) Estructuras un nuevos TextField vacos con el nmero especificado de columnas. JTextField(String text) Estructuras que un nuevo TextField inicializ con el texto especificado. JTextField(String text, int columns) Estructuras que un nuevo TextField inicializ con el texto especificado y columnas.
Pag. 71/80
Programa No. 14
import javax.swing.*; public class Prg14 extends JFrame { public static void main( String argv[] ) { new Prg14(); } Prg14() { super("JCampos de Texto"); setLayout(null); JTextField C= new JTextField(" CAMPO 1"); C.setBounds(50,50,100,50); add(C); JTextField C2= new JTextField(" CAMPO 2"); C2.setBounds(160,50,100,50); add(C2); JTextField C3= new JTextField(" CAMPO 3"); C3.setBounds(270,50,100,50); add(C3); setSize( 400,300); setVisible( true ); } }
Pag. 72/80
Ejercicio No. 6
Programa No. 15
Realizar una IGU (Proyecto de ventas) conun mnimo de 5 campos de texto, especificar su posicin (x,y).
Pag. 73/80
Casillas de verificacin ( CheckBox ) Las casillas de verificacin se utilizan para indicar caractersticas opcionales de alguna accin. Estas, suelen tomar dos estados: Activada o Desactivada. Se utilizan de dos maneras: Exclusivas: Significa que dentro de una serie solo, solo una casilla de verificacin es elegida. Generales (No Exclusivas): Significa que dada una serie de casillas de verificacin, es posible seleccionar una o ms casillas de verificacin.
java.lang.Object
java.awt.Component
java.awt.Checkbox
Constructores: Checkbox() Creates a check box with an empty string for its label. Checkbox(String label) Creates a check box with the specified label. Checkbox(String label,boolean state) Creates a check box with the specified label and sets the specified state. Checkbox(String label,boolean state,CheckboxGroup group) Constructs a Checkbox with the specified label, set to the specified state, and in the specified check box group. Checkbox(String label, CheckboxGroup group, boolean state)
Pag. 74/80
Casillas de verificacin:
Programa No. 16
import java.awt.*; import java.applet.*; public class Prg16 extends Applet {
Checkbox escolaridadPri, escolaridadSec, escolaridadPre, escolaridadPro;
public void init() { escolaridadPri = escolaridadSec = escolaridadPre = escolaridadPro =
new new new new
Checkbox("Primaria", null, true); Checkbox("Secundaria"); Checkbox("Preparatoria"); Checkbox("Profesional");
add(escolaridadPri); add(escolaridadSec); add(escolaridadPre); add(escolaridadPro); } }
Pag. 75/80
Casillas de verificacin ( JCheckBox ): Una aplicacin de una Casilla de Verificacion--un artculo que puede seleccionarse o deselecciona, y qu despliegues su estado al usuario. Por convencin, cualquier nmero de cajas del cheque en un grupo puede ser seleccionado. Se utilizan de dos maneras: Exclusivas: Significa que dentro de una serie solo, solo una casilla de verificacin es elegida. Generales (No Exclusivas): Significa que dada una serie de casillas de verificacin, es posible seleccionar una o ms casillas de verificacin. java.lang.Object java.awt.Component java.awt.Container javax.swing.JComponent javax.swing.AbstractButton javax.swing.JToggleButton javax.swing.JCheckBox Constructores:
JCheckBox()
Creates an initially unselected check box button with no text, no icon.

JCheckBox(Action a)
Creates a check box where properties are taken from the Action supplied.
JCheckBox(Icon icon)
Creates an initially unselected check box with an icon.

JCheckBox(Icon icon, boolean selected)
Creates a check box with an icon and specifies whether or not it is initially selected.
JCheckBox(String text)
Creates an initially unselected check box with text.
Pag. 76/80
JCheckBox(String text, boolean selected)
Creates a check box with text and specifies whether or not it is initially selected.
JCheckBox(String text, Icon icon)
Creates an initially unselected check box with the specified text and icon.
JCheckBox(String text, Icon icon, boolean selected)
Creates a check box with text and icon, and specifies whether or not it is initially selected.
Programa No. 17
import javax.swing.*; public class Prg17 extends JFrame { public static void main( String argv[] ) { new Prg17(); } Prg17() { setLayout(null); JCheckBox cb= new JCheckBox(" CAJA 1"); cb.setBounds(50,50,100,50); add(cb); JCheckBox cb2= new JCheckBox(" CAJA 2"); cb2.setBounds(160,50,100,50); add(cb2); JCheckBox cb3= new JCheckBox(" CAJA 3"); cb3.setBounds(270,50,100,50); add(cb3); setSize( 400,300); setTitle(" JEtiquetas "); setVisible( true ); } }
Pag. 77/80
Ejercicio No. 7
Programa No. 18
Realizar una GUI (Proyecto Punto de venta), con un conjunto de 5 casillas de verificacin exclusivas.
Pag. 78/80
Programa No. 19
Casillas de verificacin, para seleccionar uno ms pasatiempos: import java.awt.*; import java.applet.*; public class CajaSeleccin extends Applet {
Checkbox pasatiempoCine, pasatiempoTV, pasatiempoCompras, pasatiempoFutbol;
public void init() { pasatiempoCine = new Checkbox("Cine", null, true); pasatiempoTV = new Checkbox("Televisin"); pasatiempoCompras = new Checkbox("Compras"); pasatiempoFutbol = new Checkbox("Futbol"); add(pasatiempoCine); add(pasatiempoTV); add(pasatiempoCompras); add(pasatiempoFutbol); } }
Pag. 79/80
Ejercicio No. 8
Programa No. 20
Revisin del proyecto integrador. (Con una interfaz conteniendo todos los componentes vistos en las actividades pasadas.)
Pag. 80/80

TAP 01 - Eventos e Interfaz Grafica de Usuario Parte I

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TAP 01 - Eventos e Interfaz Grafica de Usuario Parte I

Uploaded by

Copyright:

Available Formats

Tpicos Avanzados de Programacin

Eventos - Interfaz Grfica de Usuario

M.C. Daniel Benito Romn Ocampo

Tpicos Avanzados de Programacin

Eventos - Interfaz Grfica de Usuario

M.C. Daniel Benito Romn Ocampo

Tpicos Avanzados de Programacin

Eventos - Interfaz Grfica de Usuario

M.C. Daniel Benito Romn Ocampo

Tpicos Avanzados de Programacin

Eventos - Interfaz Grfica de Usuario

GUI es un acrnimo del vocablo ingls Graphical User Interface

Figure.- Un ejemplo de una Interfaz Grfica de Usuario en Windows XP.

M.C. Daniel Benito Romn Ocampo

Tpicos Avanzados de Programacin

Eventos - Interfaz Grfica de Usuario

M.C. Daniel Benito Romn Ocampo

Tpicos Avanzados de Programacin

Eventos - Interfaz Grfica de Usuario

Ejemplos de Sistemas que soportan GUIs:

Sistemas Oprativos: Mac OS Microsoft Windows NEXTSTEP X Window System Linux

M.C. Daniel Benito Romn Ocampo

Tpicos Avanzados de Programacin

Eventos - Interfaz Grfica de Usuario

Dispositivo Apuntador (pointing device):

M.C. Daniel Benito Romn Ocampo

Tpicos Avanzados de Programacin

Eventos - Interfaz Grfica de Usuario

Son pequeas figuras que representan comandos o acciones, archivos o ventanas.

M.C. Daniel Benito Romn Ocampo

Tpicos Avanzados de Programacin

Eventos - Interfaz Grfica de Usuario

M.C. Daniel Benito Romn Ocampo

Tpicos Avanzados de Programacin

Eventos - Interfaz Grfica de Usuario

M.C. Daniel Benito Romn Ocampo

Tpicos Avanzados de Programacin

Eventos - Interfaz Grfica de Usuario

M.C. Daniel Benito Romn Ocampo

Tpicos Avanzados de Programacin

Eventos - Interfaz Grfica de Usuario

Los cuadros de texto para contraseas normalmente ocultan la contrasea.

M.C. Daniel Benito Romn Ocampo

Tpicos Avanzados de Programacin

Eventos - Interfaz Grfica de Usuario

M.C. Daniel Benito Romn Ocampo

Tpicos Avanzados de Programacin

Eventos - Interfaz Grfica de Usuario

Interfaz Grafica de Usuario utilizada en el paquete matematico MATLAB:

Figure.- IGU: Matlab

M.C. Daniel Benito Romn Ocampo

Tpicos Avanzados de Programacin

Eventos - Interfaz Grfica de Usuario

Figure.- IGU: Matlab

Figure.- IGU: Navegador IE

M.C. Daniel Benito Romn Ocampo

Tpicos Avanzados de Programacin

Eventos - Interfaz Grfica de Usuario

Figure.- Interfaz Grafica de usuario en un sistema de Unix.

Figure.- Reproductor de musica iTunes.

M.C. Daniel Benito Romn Ocampo

Tpicos Avanzados de Programacin

Eventos - Interfaz Grfica de Usuario

M.C. Daniel Benito Romn Ocampo