Applets y Aplicaciones gráficas en Java

Applets y Aplicaciones grficas en JavaLo bsico ...

M.C. Yal Galicia Hdez.

1

Applets v.s. Aplicacionesp

Las principales diferencias entre las aplicaciones y los applets son:n

n

Las aplicaciones Java son programas (requieren de un main() ) que se ejecutan localmente usando el interprete de java Los applets Java se pueden ejecutar remotamente usando un navegador Web (Netscape, Explorer, etc.), incrustando una referencia al applet en una pgina Web utilizando una etiqueta HTML especial , el navegador baja el applet y lo ejecuta en el sistema local. Tambin puede utilizarse el appletviewer.M.C. Yal Galicia Hdez. 2

Applets v.s. Aplicaciones ...n

n

Las aplicaciones y los applets tiene distinto conjunto de restricciones que sealan como pueden operar dentro de un contexto de seguridad (por ejemplo: El acceso al sistema de archivos, ejecucin de programas en el sistema local, etc.) Los applets no requieren el mtodo main(), ya que su ciclo de vida es diferente al de una aplicacin.


3

El JFCp

p

Para disear aplicaciones que utilicen interfaces grficas (ventanas, etiquetas, cajas de texto, botones, barras de desplazamiento, etc.), java proporciona una biblioteca de clases denominada JFC (Java Foundation Classes) Bajo JFC se agrupan las APIs (Interfaces para programacin de aplicaciones)n n n

Swing AWT Java 2D (grficos 2D de alta calidad)


4

AWT v.s. Swingp

p

Abstract Window Toolkit (AWT). Librerias bsicas n Se intent Write Once, Run Anywhere en multiplataformas. Pero terminaba en write once, debug everywhere. Pintar en una ventana =swing n Swing no remplaza a AWT, solo lo mejora en el look and feel, es decir, la apariencia en pantalla y funcionamiento, que van a tener los Componentes Swing de ese ejecutable. n El Look-and-Feel es la apariecia que se proporciona a los diferentes Componentes: botones, cajas de texto, cajas de seleccin, listas, etcM.C. Yal Galicia Hdez. 5

AWT y Swing


6 6

SwingLos componentes Swing son implementados completamente en el lenguaje Java. p La caractersticas look and feel permite crear GUIs que pueden ser vistas de igual forma en diferentes plataformas o asumir el look and feel de la plataforma del SO (como Microsoft Windows, Solaris or Linux).pM.C. Yal Galicia Hdez. 7

AWT v.s. Swing


8 8

Aplicaciones grficasUn vistazo


9

Aplicacin grficap p

Una aplicacin que muestra una interfaz grfica cuando se ejecuta, no es ms que un objeto de una clase derivada de Jframe. Los componentes ms comunes derivados de la clase JComponet son: (paquete javax.swing):n n n n n n n n n

Etiquetas: JLabel Botones: JButton Cajas de texto de una lnea: JTextField Cajas de Texto de varias lneas: JTextArea Casilla de verificacin: JCheckBox Botones de opcin: JRadioButton Listas: JList Barras de desplazamiento: JScrollBar Cuadros de dialogo estndar: JOptionPaneM.C. Yal Galicia Hdez.

10

Contenedoresp p

Los contenedores son componentes Swing utilizados para ubicar otros componentes: Ejemplo de contenedores n Contenedores de nivel superios:Jframe (Marcos), JDialog (Cuadros de Dialogo) y JApplet (Applet) p Cada uno de estos contenedores define un componente llamado panel, que a su vez puede contener otros paneles, creando una jerarqua de paneles. p La clase para crear paneles es JPanel.pM.C. Yal Galicia Hdez. 11

JFrame Marco o Formulariop

Algunos de los mtodos ms importantes n setTitle: Sirve para cambiar el texto que aparece en la barra de ttulo n setResizable: Admite un boolean (true o false) y determina si el usuario va a poder o no cambiar el tamao del marco n setVisible: Recibe como parmetro un valor boolean, si es true muestra el Frame n setDefaultCloseOperation: Establece la operacin que se ejecutar por default cuando el usuario cierre el frame. Si recibe como parmetro marco.EXIT_ON_CLOSE cerrar el marco antes de terminar. n setIconImage: Admite un objeto de tipo Image y lo utiliza como icono cuando se minimiza o iconiza la ventana M.C. Yal Galicia Hdez. 12

Jerarqua de herenciaObject Compone nt Container JComponen t JPanel

Window Frame JFrame

13

Componentes


14 14

Informacin dentro de marcosp

p

Cuando se disea un Frame, se van aadiendo componentes a la lmina de contenido (panel de contenido), empleando un cdigo similar al siguiente: Container panelRaiz = marco.getContentPane(); Component c = ; panelRaiz.add(c); A partir del JDK 5.0, el panel de contenido es implcito y podemos utilizar simplemente: Component c = ; add(c);M.C. Yal Galicia Hdez. 15

Paneles y distribuciones (Layouts)n n

n

n

Cmo se distribuyen los componentes dentro de un contenedor?. Todos los contenedores en java tienen en su interior una clase, de nombre genrico "layout", que es la encargada de organizar los componentes dentro del contenedor. Por ejemplo, el administrador FlowLayout se encarga de hacer que los botones se organicen en una lnea (o diferentes hileras). El GridLayout los coloca en forma de matriz, etc. Cuando el usuario modifica el tamao del contenedor, el administrador de disposiciones reorganiza automticamente los componentes para ocupar el espacio disponible.M.C. Yal Galicia Hdez. 16

Administradores de distribucinn

n

Swing proporciona 5 administradores de distribuciones o disposiciones p FlowLayout (default para JPanel) p BorderLayout (default para JFrame) p GridLayout p CardLayout p GridBagLayout Para establer un administrador de distribucin especfico para un contenedor dado, se debe crear una instancia del administrador de distribucin pasado como parmetro al mtodo setLayout(), para ese contenedor. Public MiFrame( ) { setLayout(new FlowLayout()); . M.C. Yal Galicia Hdez. 17 }

Administradores (Layouts)Distribucin FlowLayout BorderLayout GridLayout BoxLayout GridBagLayout Descripcin Es la predeterminada para Jpanel. Coloca los componentes secuencialmente (de izquierda a Es el predeterminado que se agregaron derecha) en el orden para paneles de contenido de objetos JFrame. Ordena los componentes en 5 OrdenaNORTH, SOUTH, EAST, WEST Y CENTER reas: los componentes en filas y columnas Ordena los componentes en forma horizontal a lo largo del eje x, o en forma vertical a lo largo del Es el ms poderoso y complejo. Es similar al eje y. GridLayout solo que ms flexible. Los componentes pueden variar de tamao (pueden ocupar varias filas y columnas) y pueden agregarse en cuaquier orden


18

Administradores de distribucin...n

Despus de que el administrador de distribucin est definido, se puede empezar a agregar componentesp

p

El orden de agregacin es significativo y depende del administrador de diseo que este activo Leer la informacin para cada administrador Esta clase es la ms simple de los diseos y es la distribucin por default para el JPanel Los componentes son agregados al panel uno por uno, de izquierda a derecha, fila por fila (si un componente no cabe en una fila se pasa a la siguiente) Cuenta con Yal Galicia Hdez. M.C. una alineacin (el valor por default 19 es fila centrada)

n

La clase FlowLayout (distribucin de flujo)p p

p


Para crear distribuciones con una alineacin diferentes se deben agregar las variables de clase como argumento:p p

FlowLayout.RIGHT FlowLayout.LEFT

n

Para agregar espacios horizontales o verticales entre componentes se debe agregar argumentos enteros al constructor de diseo.

setLayout(new FlowLayout(FlowLayout.LEFT, 30, 10)); p EL ejemplo agrega espacios de hasta 30 puntos horizontales y 10 verticalesM.C. Yal Galicia Hdez. 20

Administrador de disposicin Nullp

p

p

Si en lugar de especificar una instancia de alguna distribucin, establecemos Null, entonces nosotros podemos colocar el componente en un lugar deseado y especfico con un posicin X, Y en un plano cartesiano Ejemplo: miPanel.setLayout(null) A partir de ah, para cada componente se debe especificar su posicin y M.C. Yal Galicia Hdez. tamao

0,0 Y

X

21 21

EventosManejo de eventos


22

Eventosp

Un evento es generado en respuesta a cualquier cosa que pueda ocurrir durante el ciclo de vida de un applet o una aplicacinn n n

p p

Mientras el programa se ejecuta una gran cantidad de eventos se estn generando Es comn querer interceptar algunos eventos en los cuales se esta interesado, por ejemplo cuando el usuario da clic en algn lugar especfico dentro del applet, para responder de alguna formaM.C. Yal Galicia Hdez. 23

Movimientos del mouse Cada clic o presin de alguna tecla Cada acceso a ventanas

Eventos ...p

Los eventos con los cuales se puede tratar son:n

n

n

n

n

Clics del ratn: ratn abajo (botn aprimido), ratn arriba (soltar el botn) o clic simple Movimientos del ratn: posicin y arrastres del ratn Pulsaciones de teclas: oprimir una tecla, soltar una tecla, pusaciones sencillas Eventos de interaccin del usuario: clics en botones, mover barras de dezplazamiento, abrir mens, etc. Eventos de ventanas: abrir, cerrar o salir de ventanas.M.C. Yal Galicia Hdez. 24

Manejo de eventosp p

p

Para el manejo de eventos Java debe contar con una interfaz listener (oyente) . El oyente representa cierto conjunto de eventos (un oyente para el ratn, otro para teclas, etc.) y es el responsable de hacer algo como respuesta a ese evento especfico. El receptor del evento y el oyente estn unidos por medio del registro del oyente.n

El applet solo recibir aquellos eventos que tenga registrado el oyenteM.C. Yal Galicia Hdez. 25

Como manejar eventos1. Se debe decidir en que eventos estamos interesados y asignar esos eventos a oyentes n Diferentes oyente son contenidos en el paquete java.awt.event 2. Construir el cdigo para el oyente y el cdigo para procesar el evento 3. Registrar el oyente con el applet


26

Escuchas y eventos


27 27

Object EventObje ct AWTEvent

ActionEve nt AdjustmentEven t ItemEvent TextEvent ComponentEve nt ContainerEvent FocusEve nt PaintEven t WindowEvent InputEven t MouseEve nt MouseWheelEventM.C. Yal Galicia Hdez.

KeyEvent

2828

Interfaz EventListener

Interfaz ActionListener Interfaz AdustmentListen er Interfaz ContainerListene r interfaz FocusListener Interfaz ItemListener Interfaz KeyListener Interfaz MouseListenerInterfaz MouseMotionListe ner

Interfaz TextListener

WindowListener Interfaz M.C. Yal Galicia Hdez. ComponentListe ner

29 29

Manejo de eventos ...p

Primero entonces veamos algunas interfaces oyentes y los eventos del ratn y teclado relacionadosn

Interfaz de oyente: MouseListenerp p

Eventos: ratn abajo, ratn arriba, ratn entra, ratn sale, clics del ratn Definicin de los mtodos Public void mousePressed(MouseEvent e) Public void mousereleased(MouseEvent e) Public void mouseEntered(MouseEvent e) Public Galicia Hdez. M.C. Yal void mouseExited(MouseEvent30 e) Public void mouseClicked(MouseEvent

Manejo de eventos ...n

n

Interfaz de oyente: MouseMotionListener p Eventos: movimiento del ratn, arrastre del ratn p Definicin de los mtodos: Public void mouseMoved(MouseMotionEvent e) Public void mouseDragged(MouseMotionEvent e) Interfaz del oyente: KeyListener p Eventos: tecla abajo, tecla arriba, pulsacin sencilla p Definicin de los mtodos: Public void keyReleased(KeyEvent e) M.C. Yal Galicia keyPressed(KeyEvent e) 31 Public void Hdez. Public void keyTyped(KeyEvent e)


Despus de conocer algunos oyentes y seleccionar cuales manipularn nuestros eventos, procedemos a crear el applet que ser su propio oyenten

Para crear un applet que sea tambin un oyente, se debe modificar para que implemente la interfaz de oyente apropiada, siguiendo estos pasos: p Importar java.awt.event.* p Agregar la palabra implements a la definicin de la clase seguida de la interfaz de oyente en la que estamos interesados p Sopreponer (o invalidar) los mtodos de la interfaz p Agregar el cdigo adecuado al mtodo apropiadoM.C. Yal Galicia Hdez. 32


p

Un ejemplo que usa las interfaces MouseListener y KeyListener import java.awt.event.*; import java.applet.*; public class MiApplet extends Applet implements MouseListener, KeyListener { Public void mousePressed(MouseEvent e) { } Public void mouseReleased(MouseEvent e ) { } Public void mouseEntered(MouseEvent e) { } Public void mouseExited(MouseEvent e) { } Public void mouseClicked(MouseEvent e){ } } El ltimo paso es registrar el oyente con el objeto que recibir el mtodo, para que queden encadenadosM.C. Yal Galicia Hdez. 33


Se debe utilizar mtodos especiales para registrar oyentesn

n n

Estos mtodos son definidos en la clase Component (superclase de Applet) Para cada tipo de oyente hay un mtodo de registro Para los tres tipos de oyentes que comentamos sus mtodos son: p addMouseListener(this) p addMouseMotionListener(this) p addKeyListener(this)

p

El registro del oyente se realiza por lo general en el mtodo init() del appletM.C. Yal Galicia Hdez. 34

Ejemplo eventosimport java.awt.*; import java.applet.*; import java.awt.event.*;

public class DibujosEventos extends Applet implements MouseListener, MouseMotionListener { private int x,y;

public void init(){ //registro de oyentes de evento addMouseListener(this); addMouseMotionListener(this); } public void paint(Graphics g) { }M.C. Yal Galicia Hdez. 35

Ejemplo ...//sobreposicin de mtodos abstractos public void mouseMoved(MouseEvent e) { } public void mouseClicked(MouseEvent e) { } public void mouseEntered(MouseEvent e) { } public void mouseExited(MouseEvent e) { } public void mouseReleased(MouseEvent e) { }

//escribimos cdigo para los eventos que nos interesan public void mousePressed(MouseEvent e) { this.x = e.getX(); this.y = e.getY(); }


36

Ejemplo ...public void mouseDragged(MouseEvent e) { Graphics g = getGraphics(); //Dibuja una lnea del ltimo punto al actual g.drawLine(this.x, this.y, e.getX(), e.getY()); this.x = e.getX(); this.y = e.getY(); }

} // fin de la clase


37

Ejemplo eventos Mouse


38

Ms sobre Eventosp

Como ya hemos visto, toda clase que implementa una interfaz de oyente debe implementar todos sus mtodos.n

Por ejemplo la interfaz WindowListener que tiene 7 mtodos, debe implementar esos 7 mtodos.

p

Para simplificar esta tarea, todas las interfaces de oyente de AWT que tienen ms de un mtodo, cuentan con una clase adaptadora asociada que implementa todos los mtodos de la interfaz, pero no hace nada con ellos.


39

Interfaces y adaptadoresOyentes ActionListener AdjustmenListener

Adaptadores

Componente AbstractButton, JComboBox, JScrollBar Timer JTextField,

FocusListener ItemListener KeyListener MouseListener MouseMotionListener MouseWheelListener WindowListener WindowsStateListener WindowFocusListener

FocusAdapter

Componet AbstractButton, JComboBox Component Component Component Component

KeyAdapter MouseAdapter MouseMotionAdapter

WindowAdapter

Window Window Window


40

Ejemplo

addMouseListener(new MouseAdapter(){ public void mouseClicked(MouseEvent e2){ label.setText(e2.getX()+,"+e2.getY()); } }); que usando el adaptador MouseAdapter ya no tengo que sobreponer tod


41

Cuadros de dilogoUna forma simple de leer datos


42

Cuadros de dilogop

Como leer valores?n

n

n

n

Podemos leer valores directamente del teclado (consola) usando la clase Scanner que provee Java, o bien a travs de cajas de texto; sin embargo, una forma muy til es usando las clases predefinidas por Java para cuadros de dilogo. Los cuadros de dilogo son ventanas que por lo general se utilizan para desplegar mensajes importantes para el usuario de una aplicacin. Java 2 incluye la clase JOptionPane que permite desplegar fcilmente un cuadro de dilogo que contiene informacin y donde tambin se puede introducir valores. Los mtodos ms importantes de JOptionPane son: p showMessageDialog - Para despliegue de mensajes p showInputDialog - para lectura de valores43

Ejemplo en consola

import javax.swing.JOptionPane; //importa la clase JOptionPane

public class Suma { public static void main(String args[] ) { String s1, s2; //para almacenar lo ledo int n1, n2, suma; //nmeros convertidos //Lee datos como cadenas s1 = JOptionPane.showInputDialog( Introduce primer dato ); s2 = JOptionPane.showInputDialog( Introduce segundo dato ); //convierte a valores enteros 1er. Parmetro: usualmente Null n1 = Integer.parseInt(s1); 2do. Parmetro: mensaje n2 = Integer.parseInt(s2); //Suma los nmeros suma = n1 + n2; //despliega resultados JOptionPane.showMessageDialog( null, La suma es + suma, Resultado, JOptionPane.PLAIN_MESSAGE); System.exit( 0 ); //termina programa } //fin main 3er. Parmetro: ttulo de la ventana } //fin clase Suma 4to. Parmetro: Tipo de mensaje


44

Salida


45

Tipo de mensaje showMessageDialogTipo de dilogo de mensaje JOptionPane.ERROR_MESSAGE JOptionPane.INFORMATION_MESSAGE Icono Descripcin Despliega un dilogo que indica un error en la aplicacin del usuario Despliega un dilogo con un mensaje de informacin sobre la aplicacin para el usuario Despliega un dilogo que advierte al usuario acerca de un problema potencial Despliega un dilogo que coloca una pregunta para el usuario de la aplicacin. Por lo general, requiere una respuesta tal como hacer clic en el botn S o No Sin Icono Despliega un dilogo que simplemente contienen un mensaje sin cono

JOptionPane.WARNING_MESSAGE

JOptionPane.QUESTION_MESSAGE

JOptionPane.PLAIN_MESSAGE

46

El Abstract Windowing ToolkitLo bsico para crear interfaces de usuario


47

El AWTp

p

El AWT (Abstrac Windowing Toolkit) fue creado para proporcionar soporte grfico a los applets (como ya vimos); y proveer un conjunto de clases y mtodos que permiten crear aplicaciones GUI (Graphical User Interface). El AWT proporciona:n

n

Un conjunto completo de componentes de interfaz de usuario (UI) y otros componentes, incluyendo ventanas, mens, botones, casillas de verificacin, cajas de texto, barras de desplazamiento y listas. Soporte a contenedores de UI, los cuales pueden contener otros contenedores de UI.M.C. Yal Galicia Hdez. 48

El AWT ...n n

Un sistema de eventos para administrar sistemas y eventos del usuario como partes del AWT. Mecanismos para emplear componentes que permitan el diseo del UI independientemente de la plataforma.

p

La idea bsica detrs del AWT, es que un programa Java grfico, es un conjunto de componentes anidados, iniciando por una ventana exterior y profundizando hasta el ms pequeo componente UI.n

n

Los componentes pueden incluir elementos visibles en la pantalla, como: mens, botones, etc. M.C. Yal Galicia Hdez. Y tambin puede incluir contenedores (containers) 49

El AWT ...p

El anidamiento de componentes dentro de contenedores crea una jerarqua de componentes, desde el botn ms interno de un applet hasta la ventana general de la pantalla.n

La jerarqua de componentes determina la distribucin de elementos en la pantalla, el orden en que se dibujan y la manera como los eventos se mueven. Contenedoresp

p

Los componentes ms importantes son:n

p

Su forma ms comn es el Panel, el cual representa un contenedor que podra desplegarse en la pantalla. Otro contenedor es la ventana (Window), la cual M.C. Yal Galicia 50 permite crear unHdez. marco estndar (Frame) para las aplicaciones.

El AWT ...n

Lienzosp

Es una superficie simple de dibujo. Aunque puede dibujarse en los paneles (como lo hemos hecho hasta ahora), los lienzos son ms adecuados para imgenes y operaciones grficas. Incluyen botones, listas, mens, casillas de verificacin, campos de texto, etc. Incluyen ventanas, cuadros, barras de mens y cuadros de dilogo. Estos componentes se usan en aplicaciones y no en applets (el navegador porporciona la ventana principal)51

n

Componentes UIp

n

Componentes de construccin de ventanasp

p

Las clases dentro del paquete java.awt estn M.C. Yal Galicia Hdez. escritas y organizadas para reflejar esta

El AWT ...n

A continuacin se muestra parte de la jerarqua de clases del AWT Component

Canvas

Container

TextComponent

Button

Panel

Window Frame Dialog

TextField

Applet


52

El AWT ...p

El AWT tambin incluye un conjunto de administradores de diseo que determinan como se distribuyen los diferentes componentes cuando se despliegan en la pantalla y la proporcin entre los distintos tamaos de cada uno.n

Los administradores de diseo ayudan a crear diseos de UI que son dinmicamente distribuidos.


53

Componentes bsicos de UIp

A continuacin veremos lo bsico para crear y usar etiquetas, casillas de verificacin, botones de opcin, mens de opcin y campos de texto.n

El procedimieto para crear estos componentes, es bsicamente el mismo:p p

Crearlo Aadirlo al applet o al panel que lo contendr, en el punto en que debe ser desplegado en la pantalla.

p

El mtodo add( ) agrega un componente

Public void init ( ) { Button b = new Button ( Ok ); add ( b ); }


54

Componentes bsicos de UI ...p

Las clases (incluidas en el paquete java.awt) de los componentes UI son:n n n n n n n n n

Botones: Button Casillas de verificacin: Checkbox Caja de texto: TextArea Etiquetas: Label Lista: List Mens de opcin: Choice Sliders y scrolls bar: Scrollbar Mens: Menu, MenuItem, Checkbox.MenuItem Campos de texto: TextFieldM.C. Yal Galicia Hdez. 55

Componentes bsicos de UI ...p

La mayora de estas clases tiene los mtodos siguientes:n n

getLabel: Devuelve una cadena que contiene la etiqueta del componente setLabel: cambia el texto de la etiqueta del componente

p

Algunos componente (casilla de verificacin, opciones, etc.) requieren los mtodos:n n

getState: Devuelve true o false, dependiendo de el componete esta seleccionado o no SetState (boolena): cambia el estado del componenteM.C. Yal Galicia Hdez. 56

Ejemplo de botonesp

Cdigo para crear algunos botones sencillos import java.awt.*; import java. Applet.*; public class ButtonTest extends Applet { public void init( ) { add(new Button(Regresar)); add(new Button(Ejecutar)); add(new Button(Adelantar)); add(new Button(Detener)); } }


57

Applet botones


58

Ejemplo de Mens de opcinn

n

Los mens de opcin descendentes (Pop-up menus), son listas de elementos de los cuales puede seleccionar un elemento. Al hacer su seleccin, el men despliega esa opcin en la pantalla.public class ChoiceTest extends Applet { public void init( ) { Choice c = new Choice( ); c.add(Alta); c.add(Baja); c.add(Modificacin); add( c ); } }M.C. Yal Galicia Hdez. 59

Applet men PopUp


60

Paneles y distribuciones (layouts)n n

n

n

Cmo se distribuyen los botones dentro de la ventana?. Todos los contenedores en java tienen en su interior una clase, de nombre genrico "layout", que es la encargada de distribuir los botones dentro del contenedor. Por ejemplo, la clase FlowLayout se encarga de hacer que los botones vayan todos seguidos de izquierda a derecha, como sera el caso de tu barra de herramientas del navegador. El GridLayout los coloca en forma de matriz, etc, etc. Hdez. M.C. Yal Galicia 61

Administradores de distribucinn

n

El AWT proporciona 5 administradores de distribuciones p FlowLayout p GridLayout p BorderLayout p CardLayout p GridBagLayout Para crear un administrador de distribucin para un panel dado, crea una instancia del administrador de diseo y despus utiliza el mtodo setLayout(), para ese panel.

Public void init ( ) { setLayout ( new FlowLayout ); de agregar componentes M.C. Yal Galicia Hdez. }

// poner antes62


Despus de que el administrador de distribucin est definido, se puede empezar a agregar componentesp

p

El orden de agregacin es significativo y depende del administrador de diseo que este activo Leer la informacin para cada administrador Esta clase es la ms simple de los diseos y es la distribucin por default para el panel Los componentes son agregados al panel uno por uno, de izquierda a derecha, fila por fila (si un componente no cabe en una fila se pasa a la siguiente) Cuenta con Yal Galicia Hdez. M.C. una alineacin (el valor por default 63 es fila centrada)

n

La clase FlowLayout (distribucin de flujo)p p

p


Para crear distribuciones con una alineacin diferentes se deben agregar las variables de clase como argumento:p p

FlowLayout.RIGHT FlowLayout.LEFT

n

Para agregar espacios horizontales o verticales entre componentes se debe agregar argumentos enteros al constructor de diseo.

setLayout(new FlowLayout(FlowLayout.LEFT, 30, 10)); p EL ejemplo agrega espacios de hasta 30 puntos horizontales y 10 verticalesM.C. Yal Galicia Hdez. 64

Ejemplo de FlowLayout


65

Administradores de distribucin...p

La clase GridLayout (distribucin de cuadrcula)n n n

n n

Proporciona ms control sobre la colocacin de los componentes en el panel Divide el rea de desplegado de panel en filas y columnas, que es necesario especificar. Cada componente que agrege al panel es colocado en una celda de la cuadrcula, iniciando desde la celda superior izquierda y avanzando de izquierda a derecha. Ejemplo: setLayout(new GridLayout(3,2)); Para agregar espacios:p

setLayout(new GridLayout(3,3, 10, 30));


66

Ejemplo GridLayout


67

Administradores de distribucin...p

La clase BorderLayout n Los componentes se agregan indicando su posicin como una direccin geogrfica (North, South, West y East, Center). n Los componentes alrededor de los lmites son cololados con ms espacio del que necesitan.El componente en el centro (si es que lo hay) ocupa el espacio de sobra. n El diseo de bordes se crea: p setLayout(new BorderLayout(10, 10)); //agrega espacios entre // componentes p Los componentes individuales se agregan con el mtodo add( ), que en este caso tiene dos argumentos: Add(North,Hdez. M.C. Yal Galicia new Buuton(Regresar, 68 50));

Ejemplo BorderLayout


69


La clase GridBagLayout (distribucin de cuadrcula global) nEste diseo le permite controlar el espacio de cada celda individual en la cuadrcula, las proporciones entre filas y columnas y la colocacin de los componentes dentro de cada celda de la cuadrcula. nPara lograr este diseo, en realidad, se requieren dos clases: nGridBagLayout: Habilita la administracin del diseo en general nGridBagConstraints: Define las propiedades de cada componente en la M.C. Yal Galicia 70 cuadrcula Hdez. nColocacin, Dimensin,

Administradores de distribuciones...n n

La relacin entre la cuadrcula global, las propiedades y cada componente, definen el diseo en conjunto. En general, la distribucin involucra:p

Creacin de un objeto GridBagLayout y su definicin como administrador actual de diseo Creacin de una nueva instancia de GridBagConstraints.

p

Definir las restricciones y propiedades de los componentes Button b = new Button(Adelante); constraints.gridx = 0; //Coord. X celda del componente constraints.gridy = 0; //Coord. Y celda del componenteM.C. Yal Galicia Hdez.p

71

Administradores de distribucin...

constraints.gridWidth = 1; // columnas que ocupa el componente constraints.gridHeight = 1; //renglones que ocupa el componente constraints.weightx =30; //Porcentaje del tamao total del ancho constraints.weighty =30; //Porcentaje del tamao total del largo constraints.fill = GridBagConstraints.NONE; constraints.fill = GridBagConstraints.CENTER; p Informar al administrador de diseo sobre los componentes y sus restriccionesp

Agregar el componente al panel

n

La parte ms tediosa es el proceso de definir restricciones para los componentes, ya que se debe hacer para cada M.C. Yal Galicia Hdez. 72 componente.p

Es muy recomendable hacer el diseo de la cuadrcula

Ejemplo de cuadrcula0,0 Nombre: 20% 1,0 Contrase 20% 2,0 20% a: Ok 2,1 90% 0,1 1,1

10%


73

El cdigoimport java.awt.*; import java.applet.*;

public class EjemplosUI extends Applet { void Construye(GridBagConstraints gbc,int gx,int gy,int gw,int gh,int wx,int wy) { gbc.gridx = gx; gbc.gridx = gy; gbc.gridwidth = gw; gbc.gridheight = gh; gbc.weightx = wx; gbc.weighty = wy; }


74

El cdigo ...

public void init() { GridBagLayout gb = new GridBagLayout(); GridBagConstraints c = new GridBagConstraints(); setLayout(gb); //Etiqueta para el nombre Construye(c, 0, 0, 1, 1, 10, 40); //ocupa el 10% del ancho y 40 de largo c.fill = GridBagConstraints.NONE; c.anchor = GridBagConstraints.EAST; Label etiq1 = new Label("Nombre:", Label.LEFT); gb.setConstraints(etiq1, c); add(etiq1);M.C. Yal Galicia Hdez. 75

El cdigo ...//Campo Texto para escribir el nombre Construye(c, 0,1, 1, 1, 90, 0); // 90% de ancho y largo de arriba c.fill = GridBagConstraints.HORIZONTAL; TextField txtNombre = new TextField(); gb.setConstraints(txtNombre, c); add(txtNombre); //Etiqueta para la contrasea Construye(c, 1, 0, 1, 1, 0, 40);//ya no hace falta definir ancho, 40%

largo

c.fill = GridBagConstraints.NONE; c.anchor = GridBagConstraints.EAST; Label etiq2 = new Label("Contrasea:", Label.LEFT); gb.setConstraints(etiq2, c); add(etiq2);M.C. Yal Galicia Hdez. 76

El cdigo ...//Campo Texto para escribir la contrasea Construye(c, 1, 1, 1, 1, 0, 0); c.fill = GridBagConstraints.HORIZONTAL; TextField txtPass= new TextField(); gb.setConstraints(txtPass, c); add(txtPass); //Botn OK Construye(c, 2,0, 2, 1 ,0, 20); //solo hace fakta definir largo c.fill = GridBagConstraints.NONE; c.anchor = GridBagConstraints.CENTER; Button bok= new Button("Ok"); gb.setConstraints(bok, c); add(bok); } }


77

Ejemplo GridBagLayout


78

Eventos UIn

n

Hasta ahora nuestro applet es torpe, puesto que ninguno de nuestros componentes UI pueden hacer algo al ser presionados o teclear informacin. Para lograr que hagan algo, se debe agregar cdigo para manipilar eventosp

Al igual que para los eventos de teclado y ratn que vimos antes

n

Para los componentes AWT, los eventos tienen un nivel ms alto.p

por ejemplo, los botones utilizan eventos de accin que son disparados cuando se oprimen. No se tiene uno que preocupar por los eventos de ratn abajo o arriba. El componente lo maneja todo.M.C. Yal Galicia Hdez. 79

Eventos UI ...Cada clase de evento tiene una interfaz auditora correspondiente con un conjunto de mtodos a implementar p A continuacin se muestran los eventos, las clases auditoras de eventos que los manejan y los mtodos que los tratanpn

Evento: Accinp p

Interfaz de auditor: ActionListener Definicin de los mtodos:M.C. Yal Galicia Hdez. 80

Eventos UI ...n

Evento: Seleccionar listap p

Interfaz de auditor: ItemListener Definicin de los mtodos: Public void itemStateChange(ActionEvent e)

n

Evento: Deseleccionar lista, Obtener el focop p

Interfaz de auditor: FocusListener Definicin de los mtodos: Public void focusGained(FocusEvent e)

n

Evento: Perder el focop p

Interfaz de auditor: FocusListener Definicin de los mtodos: Public void focusLost(FocusEvent e)


81

Eventos UI ...n

Evento: Texto cambiadop p

Interfaz de auditor: TextListener Definicin de los mtodos: Public void TextValueChanged(TextEvent e)

n

Evento: Agregar componentep p

Interfaz de auditor: ContainerListener Definicin de los mtodos: Public void ComponentAdded(ContainerListener e)

n

Evento: Eliminar componentep p

Interfaz de auditor: ContainerListener Definicin de los mtodos: Public void ComponentRemoved(ContainerListener e)


82

Eventos UI ...p

Adems de esto, es necesario tambin, registrar los auditores UI.n

Los mtodos son:p p p

addActionListener() addItemListener() addFocusListener

n

n

Como antes, el mtodo init( ) es el mejor lugar para poner estos mtodos Los auditores de componente se tienen que registrar con cada componente especfico que recibir ese evento.M.C. Yal Galicia Hdez. 83

Eventos UI ...n

Por ejemplo, para registrar un evento de accin de un botnp

Llamar al mtodo AddActionListener() en ese objeto botn

Public void init( ) { Button Okb = new Button(Ok); OKButtonAction ok = new OKButtonAction(); OKButton.addActionListener(ok); //Botn OK Button Cancelb = new Button(Ok); OKButtonAction cancel = new OKButtonAction(); Cancelb.addActionListener(cancel); //botn cancel add(Okb); add(Cancelb); }M.C. Yal Galicia Hdez. 84

Ejemplo de eventosimport java.awt.*; import java.applet.*;

public class TestEventos extends Applet { Button rojo, verde, azul, blanco, negro;

public void init() { setBackground(Color.white); setLayout(new FlowLayout(FlowLayout.CENTER, 10, 10)); ManejadorBoton mb; rojo = new Button("Rojo"); mb = new ManejadorBoton(this, Color.red); rojo.addActionListener(mb); add(rojo); azul = new Button("Azul"); mb = new ManejadorBoton(this, Color.blue);M.C. Yal Galicia Hdez.

85

Ejemplo eventos ...

}

}

azul.addActionListener(mb); add(azul); verde= new Button("Verde"); mb = new ManejadorBoton(this, Color.green); verde.addActionListener(mb); add(verde); blanco= new Button("Blanco"); mb = new ManejadorBoton(this, Color.white); blanco.addActionListener(mb); add(blanco); negro= new Button("negro"); mb = new ManejadorBoton(this, Color.black); negro.addActionListener(mb); add(negro);


86

Ejemplo de eventos ...import java.awt.*; import java.applet.*; import java.awt.event.*;

public class ManejadorBoton implements ActionListener { Color ElColor; TestEventos t;

ManejadorBoton(TestEventos a, Color c) { t = a; ElColor = c; } public void actionPerformed(ActionEvent e) { t.setBackground(ElColor); t.repaint(); }M.C. Yal Galicia Hdez. 87

}

Ejemplo manejo de eventos


88

AppletsIntroduccin


89

Creacin de appletsp

Todos los applets heredan de la clase JApplet, que es parte del paquete java.applet. n Para crear un applet se debe crear una subclase de la clase JApplet. n La clase JApplet proporciona el comportamiento que el applet necesita para funcionar dentro de un navegador compatible con Java. n En un applet se puedep p

p

dibujar en la pantalla crear ventanas, barras de mens, botones, casillas de verificacin, etc. Entradas del usuario como clics del ratn o pulsacionesGalicia Hdez. M.C. Yal del teclado

90

Creacin de applets ...p

La clase del applet principal, la que dispara su ejecucin, siempre tendr la forma:

import java.awt.*; import java.applet.*;

public class EjemploApplet extends Applet { public void init() { } public void paint(Graphics g) { g.drawString(Hola Mundo!!", 50, 60 ); } }M.C. Yal Galicia Hdez. 91


Los applets tiene 5 mtodos principales, los cuales son utilizados para ejecutar las actividades bsicas que realizan durante su ciclo de vida:n

Inicializacin (mtodo init()): Ocurre cuando se carga o recarga un applet por primera vez (es similar al mtodo main( ) en las aplicaciones). Este proceso puede incluir:p p p

Lectura y asignacin de algn parmetro al applet Creacin de cualquier objeto auxiliar Configuracin de un estado inicial o carga de M.C. 92 imgenes Yal tipos de letra. y Galicia Hdez.


Para proporcionar algn comportamiento de inicializacin al applet se debe sobreponer el mtodo init( ) en su clase applet .... }

public void init ( ) {

n

Inicio o Arranque: El inicio es diferente de la inicializacin porque puede realizarse varias veces durante el ciclo de vida de un applet, mientras que la inicializacin sucede una sola vez.p

Para proporcionar este comportamiento se sobrepone el mtodo start(). start ( ) { .... }

public void


93

Creacin de applets ...n

Detencin: La detencin ocurre cuando el usuario abandona la pgina que contiene un applet en ejecucin. Se puede detener, tambin llamando al mtodo stop( ). p Si se sobrepone el mtodo stop(), puede detener la ejecucin de los subprocesos (hilos) y volverlos a arrancar si el applet se visualiza nuevamente

public void

stop ( ) {

....

}

n

Destruccin: La destruccin habilita al applet a terminar correctamente antes de que sea liberado p Detener y eliminar subprocesos en ejecucin p Cerrar cualquier conexin abierta, etc.M.C. Yal Galicia Hdez. 94


Este mtodo no es necesario sobreponer a menos que se tenga algo especfico que liberar destroy ( ) { .... }

public void

n

Dibujar: Es la forma en que el applet genera algo en la pantalla, ya sea texto, una lnea, un fondo a color o una imagen. Este mtodo puede usarse todas las veces que se quiera durante el ciclo de vida del applet. p El mtodo paint() tiene esta apariencia

public void paint ( Graphics g ) { se debe importar java . awt . Graphics ; .... } M.C. Yal Galicia Hdez.

//

95

Applet sencilloimport java.awt.*; //Graphics, Font, Color import java.applet.*;

public class HelloAgainApplet extends Applet { private Font f; public void init( ) { f = new Font("Arial", Font.BOLD, 36); } //Aqui es donde se hace el trabajo del applet public void paint(Graphics g) { g.setFont(f); g.setColor(Color.red); g.drawString("Hola otra vez!!", 15, 40 ); } }


96

Y ahora?p

El siguiente paso, despus de compilar nuestra clase normalmente como cualquier otro programa en Java es crear una pgina Web que contenga el applet utilizando lenguaje HTML.n

n

Para incluir un applet en una pgina Web se utiliza la etiqueta , la cual carga y ejecuta el applet indicado. A continuacin se muestra un ejemplo de una pgina HTML sencilla con el applet incluido.


97

Pgina HTML sencilla M.C. Yal Galicia Hdez.

98

Ejecutando ...p

Para probar el resultado, abrir el archivo HTML (HelloAgainApplet.html) con algn navegador o con el appletviewer.


99

La clase Graphicsp

Esta clase provee mtodos que permiten dibujar lneas, figuras, caracteres e imgenes en la pantalla dentro de un applet.n

n n

No se tiene que crear una instancia de esta clase para dibujar algo, esto se hace automticamente al invocar el mtodo paint( ). La clase Graphics es parte del paquete java.awt. Para dibujar un objeto en la pantalla, se debe llamar a alguno de los mtodos disponibles en la clase Graphicsp

Todos los mtodos tiene argumentos que representan puntos finales, esquinas o ubicacin inicial del objeto como valores en el sistema de coordenadas M.C. 100 del applet.Yal Galicia Hdez.

Sistema de coordenadasn

n n

n

El sistema de coordenadas en java tiene el origen (0,0) en la esquina superior izquierda Los valores positivos de x estn a derecha Los valores positivos de y estn hacia abajo +x 0,0 Todos los valores de pixeles son positivos

+yM.C. Yal Galicia Hdez. 101

Clase Graphics ...p

La clase Graphics proporciona un conjunto de grficos sencillos integrados para dibujo que incluye:n n n

n

Lneas: drawLine(xini, yini, xfin, yfin) Rectngulos simples: drawRect(x,y, ancho, largo) y fillRect(x,y, ancho, largo) Rectngulos con esquinas redondeadas: drawRoundRect(x,y,ancho,largo, ancho_esquina, largo_esquina) y fillRoundRect(x,y,ancho,largo, ancho_esquina, largo_esquina) Polgonos (conjunto de lneas rectas que van del primer punto, al segundo, del segundo al tercero, ect.M.C. Yal Galicia Hdez. 102

n

Clase Graphics ...n

Polgonos: drawPolygon( ) y fillPolygon ( )p

Ejemplo: public void paint(Graphics g) { int xs[] = {39, 94, 97, 142, 53, 58, 26}; int ys[] = {33, 74, 36, 70, 108, 80, 106}; int pts = xs.length; Polygon poly = new Polygon(xs, ys, pts); g.drawPolygon(poly); }

n n

Polgonos abiertos: drawPolyline( ) igual que Polygon Ovalos (crculos o elipses)p

fillOval(x,y, largo, ancho), drawOval(x,y, largo, ancho)M.C. Yal Galicia Hdez. 103

n

Arcos: drawArc(x,y, largo, ancho, ngulo, grados)

Ejemplo de grficoimport java.awt.*; import java.applet.*; public class Lampara extends Applet { public void paint(Graphics g){ g.fillRect(1,250, 290, 290); //Plataforma de la lmpara g.drawLine(125, 250, 125, 160); //La base de la lmpara g.drawLine(175, 250, 175, 160); g.drawArc(85, 157, 130, 50, -65, 312); //Cubierta lmpara g.drawArc(85, 87, 130, 50, 62, 58); g.drawLine(85, 177, 119, 89); //Lados de la cubierta g.drawLine(215, 177, 181, 89); g.fillArc(78, 120, 40, 40, 63, -174); //manchas g.fillOval(120, 96, 40, 40); g.fillArc(173, 100, 40, 40, 110, 180); M.C. Yal Galicia Hdez. 104 } }

Ejecucin del applet


105

Ms de Graphicsp

Mtodos para copiar reas rectangulares a otra rean

copyArea(x_org,y_org, ancho, largo, x_dest, y_dest) clearRect(x,y, ancho, largo) G.clearRect(0, 0, size().width, size().heigth);M.C. Yal Galicia Hdez. 106

p

Borrar un rea rectangularn

p

Borrar un applet por completon

Objetos Fontp

Para dibujar texto en la pantalla, primero debemos crear una instancia de la clase Font con los siguientes parmetros:n n n n

Fuente: TimesRoman, Courier, Helvetica, etc. Estilo de fuente: Font.PLAIN, Font.BOLD, Font.ITALIC Tamao

Ejemplo: Font f = new Font(TimesRoman, Font.PLAIN, 24);


107

Objetos Colorp p

Para dibujar un objeto en un color particular se debe crear una instancia de la clase Color para representarlo. Los colores estndar son: n Color.white n Color.black n Color.lightGray n Color.gray n Color.darkGray n Color.red n Color.green n Color.blue n Color.yellow n Color.magenta n Color.cyan n Color.pink n Color.orangeM.C. Yal Galicia Hdez. 108

Color ...p

p

p

Para crear un color particular, hay que utilizar la combinacin RGB de colores primarios (Red, Green, Blue) en distintas intensidades que van del 0 al 255. n Formato: Color c = new Color(rojo, verde, azul) n Ejem: Color c = new color(0, 195, 210); Para establecer el color de un objeto se utiliza el mtodo setColor( ) n g.setColor(Color.green); Para establecer el color de fondo del applet n setBackground(new Color (0, 140, 150)); //RGB n setBackground(Color.lightGray);


109

Un ejemplo de coloresimport java.awt.*; import java.applet.*; public class Colores extends Applet { public void paint(Graphics g){ int rval, gval, bval; for(int j=30; j < (size().height -25); j+= 30) for (int i=5; i < (size().width -25); i += 30) { rval = (int) Math.floor(Math.random() * 256); gval = (int) Math.floor(Math.random() * 256); bval = (int) Math.floor(Math.random() * 256); g.setColor(new Color(rval, gval, bval)); g.fillRect(i,j, 25, 25); g.setColor(Color.black); g.drawRect(i-1, j-1, 25, 25); } } }


110

Ejemplo Colores


111

Ms sobre appletsLo bsico en animacin e hilos ...


112

Animacinp

La animacin esta relacionada con ttulos bailando o cambiando de colores, figuras girando o en movimiento y otros efectos.n

Estos tipos de animacin requieren solo unos cuantos mtodos para implementarse en Java, pero son la base para cualquier applet Java que actualice la pantalla dinmicamente (animaciones, cambios de datos en tablas, etc.)

p

La animacin en Java se logra al incluir clases, interfaces y sobreponer algunos mtodos del AWT.


113

Creando animacionesp

La animacin involucra dos psos bsicos:n

n

La construccin de un cuadro de animacin (consiste en definir variables para que las use paint() y crear los objetos que necesitar.) Pedirle a Java que lo dibuje (invocar al mtodo repaint(), que es un disparador que hace que Java llame a paint() y el cuadro se dibuje)

p

Estos pasos se repiten para crear la ilusin de movimienton

Si se realizan de forma repetida y con velocidad suficiente, se lograr el efecto de animacin dentro del appletM.C. Yal Galicia Hdez. 114

Creando animaciones ...p

Donde se hace el trabajo de modificar el cuadro para una animacin ?n

n

Esto no se hace en el mtodo paint() que simplemente pone puntos en la pantalla. Paint() es responsable slo del cuadro actual de la animacin El trabajo de modificar el cuadro para una animacin se debe realizar en otro lugar de la definicin de nuestro applet.

p

Para los Applets Java de animacin y de otro tipo que en realidad se ejecutan, se necesitar hacer uso de start() y de stop() para iniciar la ejecucin y detenerla.M.C. Yal Galicia Hdez. 115

Mtodo start() y stop()p

El mtodo start() pone en funcionamiento la ejecucin del applet.n n

Se puede hacer que todo el trabajo del applet se realice dentro de ese mtodo O se puede llamar a mtodos de otros objetos para hacerlo.

p

p

Por lo general start() se utiliza para crear e iniciar la ejecucin de un subproceso de forma que el applet pueda ejecutarse en su propio tiempo. Stop() suspende la ejecucin del appletM.C. Yal Galicia Hdez. 116

Un subproceso ?p

p

Los subprocesos son un elemento importante para lograr la combinacin de la animacin. Un subproceso, hilo, hebra o thread (como gustes llamarle ;-)) es un flujo simple de control secuencial dentro de un proceso.n

n

Cada hilo tiene una ruta de ejecucin separada, con su propio inicio, flujo de programa, punto de ejecucin actual y terminacin. Los subprocesos permiten a un programa ejecutar varias tareas concurrentemente (al mismo tiempo).M.C. Yal Galicia Hdez. 117

Subprocesos ...p

En general, cualquier cosa que realices en un programa Java que se ejecute continuamente y ocupe mucho tiempo de procesamiento, debe ejecutarse en su propio subproceso.n

La animacin es una de esas cosas

p

Para lograr la animacin, podemos utilizar el mtodo start() para iniciar un subproceso, y despus redefinir el mtodo run() del subproceso, para hacer todo el procedimiento de animacin.


118

Applets con subprocesosp

p

Crear applets con subprocesos es relativamente fcil. Adems, el cdigo que se usa, puede reusarse en otros applets la mayora de las veces. Hay 5 modificaciones que se necesitan hacer para crear un applet que utilice subprocesos.1.

Cambiar la firma de nuestro applet para implementar la interfaz Runnable

Public class MiApplet extends Applet implements Runnable { ... }M.C. Yal Galicia Hdez. 119

Applets con subprocesos ...2.

Crear una variable de instancia de la clase Thead (incluida en java.lang), para almacenar el subproceso de este applet.p

Thead runner;

4.

Redefinir el mtodo start() que no haga nada mas que crear un subproceso e iniciar la ejecucin

Public void start() { if (runner == null) { runner = new Thread(this); runner.start( ); } }


120

Applets con subprocesos ...4.

Redefinir el mtodo stop() para detener el subproceso

Public void stop( ) { if (runner != null) { runner.stop( ); runner = null; } }

6.

Crear un mtodo run(), que redefine la versin predefinida de run( ) del Runnable, que contenga el cdigo actual que controle el applet.

public void run( ) { ... }


121

Documents

Applets y Aplicaciones gráficas en Java