algoritmo y estructura de datos i 2007 - i facultad de ingeniería y arquitectura ing. juan josé...
TRANSCRIPT
Algoritmo y Estructura de Datos I 2007 - I
Facultad de Ingeniería y Arquitectura
Ing. Juan José Montero Román.
Sesión 12 - Introducción a la Programación Visual
Introducción a la Programación Visual
La Interfaz Grafica de Usuario
La interfaz gráfica del usuario, o GUI, es el conjunto de elementos gráficos (ventanas, menús, botones, etc.) que permiten la interacción entre el usuario y la aplicación informática.GUI es un acrónimo del vocablo inglés Graphical User Interface. En el lenguaje Java podemos utilizar como Interfaz a las Clase Applet, Frame o Dialog.
Introducción a la Programación Visual
Diseño de la GUI
Consiste en crear una Interfaz y colocar sobre ella los componentes graficos. De tal manera que cumplen los requerimientos mínimos de entrada y salida de Datos. A cada componente le asignaremos un nombre. En java utilizamos los componentes AWT o Swing.
Introducción a la Programación Visual
El entorno Eclipse para programar en forma Visual
Como se sabe Eclipse es un IDE que nos permite desarrollar nuestros programas Java con gran facilidad. Para seguir haciéndolo en forma visual debemos descargar unas librerías adicionales que son:
•Eclipse Modeling Framework (EMF)•Graphical Editor Framework (GEF)•Visual Editor (VE)
Los cuales deben ser instalados (descomprimidos) en el mismo directorio donde se encuentra instalado el Eclipse. …(Visual Class )…
Introducción a la Programación Visual
paquete Abstract Windows Toolkit (AWT)
Es un paquete desarrollado por Sun Microsystem, que contiene clases que podemos usar para la programación visual. Dichas clases se clasifican en Componentes y Contenedores.
•Los Componentes son elementos gráficos que se pueden insertar en una ventana tales como botones, cajas de texto, áreas de texto, etiquetas, listas desplegables, cajas de selección, entre los principales.
•En cambio los contenedores como dice su nombre contienen a los componentes, y también a otros contenedores, como por ejemplo ventanas, paneles y cajas de dialogo.
Introducción a la Programación Visual
Componentes mas usados
Paleta AWT Controls
Uso
1Texto estático en la pantalla. Básicamente informativo.
2Caja de texto, permite capturar o mostrar datos. Todos los datos son capturados como String
3Caja de texto de múltiples líneas, permite capturar y mostrar datos.
4Botón que al hacer clic puede ejecutar un conjunto de instrucciones
5Lista desplegable que nos muestra opciones fijas de las cuales podemos seleccionar una.
6Casillas de selección, nos permiten seleccionar una o varias opciones.
7Muestra datos en forma de listado.
7
1
2
3
6
5
4
Introducción a la Programación Visual
Contenedores mas usados
Introducción a la Programación Visual
En la programación visual todos los componentes y contenedores tienen propiedades.
Las propiedades nos permiten cambiar el comportamiento o estado de los elementos visuales, tanto en el momento de diseñar nuestra aplicación, como al momento de ejecutarse, es decir mediante programación.
Los objetos tienen un nombre (propiedad field name).-Todos los componentes y contenedores deben tener un nombre para poder ser identificados a la hora de programar. (prefijos - identificar tipo de componentes)
Los objetos tienen una etiqueta (propiedad text / label / title).-La mayoría de componentes tienen una etiqueta que se muestra en forma visual.
Componente Prefijo Ejemplo
Button btnnombredelcomponente BtnSalir
TextField txtnombredelcomponente TxtNombres
TextArea txanombredelcomponente TxtAResultado
Label lblnombredelcomponente LblNombres
Choice chonombredelcomponente ChoEstadoCivil
List lstnombredelcomponente LstCiudades
CheckBox chxnombredelcomponente ChxHobbies
RadioButton rabnombredelcomponente RabSexo
Frame Frmnombredelcontenedor FrmVentana
Dialog Dlgnombredelcontenedor DlgCantidad
Applet Appnombredelcontenedor AppInicio
Introducción a la Programación Visual
Programación de la GUI
La programación de la GUI esta asociada a la programación d eventos de la GUI y consiste en asociar los métodos del programa con los componentes visuales.
En java hacemos uso de la Interfaces o Auditores para el manejo de eventos. La Interface mas utilizada es el ActionListener siendo los métodos mas utilizados el actionEvents(), actionPerformed(), mouseClicked(), etc.
Diseñe y construya la siguiente aplicación
Para definir que la interfaz sea Applet
debe en la Superclass colocar Applet si no lo encuentra busquela
haciendo click en Browse
Paleta
Explorador de paquetes
Ventana de la Composición Visual
Ventana del Editor
Visualización en miniatura
Label:Field name : LblNombreText : nombre
TextField:Field name : TxtNombre
Button:Field name : BtnAceptarText : Aceptar
Field name : BtnSalirText : Salir
TextArea:Field name : TxtASalida
{ System.out.println("saliendo ..."); System.exit(0);}
private Button getButton() {if (button == null) {
button = new Button();button.setBounds(33, 157, 76, 23);button.setLabel("AGREGAR");button.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent e) { System.out.println("HOLA !!!!");nom=textField.getText();
}});
}return button;
}
private Button getButton1() {if (button1 == null) {
button1 = new Button();button1.setBounds(110, 157, 78, 23);button1.setLabel("MOSTRAR");button1.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent e) { System.out.println("mostrando ....");textArea.append("Nombre es : " + nom);
}});
}return button1;
}
private Button getButton2() {if (button2 == null) {
button2 = new Button();button2.setSize(77, 23);button2.setLocation(187, 157);button2.setLabel("SALIR");button2.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent e) { System.out.println("saliendo ...");System.exit(0);
}});
}return button2;
}