algoritmo y estructura de datos i 2007 - i facultad de ingeniería y arquitectura ing. juan josé...
TRANSCRIPT
![Page 1: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/1.jpg)
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
![Page 2: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/2.jpg)
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.
![Page 3: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/3.jpg)
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.
![Page 4: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/4.jpg)
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 )…
![Page 5: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/5.jpg)
![Page 6: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/6.jpg)
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.
![Page 7: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/7.jpg)
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.
![Page 8: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/8.jpg)
7
1
2
3
6
5
4
![Page 9: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/9.jpg)
Introducción a la Programación Visual
Contenedores mas usados
![Page 10: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/10.jpg)
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.
![Page 11: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/11.jpg)
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
![Page 12: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/12.jpg)
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.
![Page 13: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/13.jpg)
Diseñe y construya la siguiente aplicación
![Page 14: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/14.jpg)
![Page 15: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/15.jpg)
Para definir que la interfaz sea Applet
debe en la Superclass colocar Applet si no lo encuentra busquela
haciendo click en Browse
![Page 16: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/16.jpg)
Paleta
Explorador de paquetes
Ventana de la Composición Visual
Ventana del Editor
Visualización en miniatura
![Page 17: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/17.jpg)
![Page 18: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/18.jpg)
Label:Field name : LblNombreText : nombre
TextField:Field name : TxtNombre
Button:Field name : BtnAceptarText : Aceptar
Field name : BtnSalirText : Salir
TextArea:Field name : TxtASalida
![Page 19: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/19.jpg)
{ System.out.println("saliendo ..."); System.exit(0);}
![Page 20: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/20.jpg)
![Page 21: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/21.jpg)
![Page 22: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/22.jpg)
![Page 23: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/23.jpg)
![Page 24: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/24.jpg)
![Page 25: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/25.jpg)
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;
}
![Page 26: Algoritmo y Estructura de Datos I 2007 - I Facultad de Ingeniería y Arquitectura Ing. Juan José Montero Román. jmonteror@usmp.edu.pe Sesión 12 - Introducción](https://reader034.vdocuments.site/reader034/viewer/2022051616/5535a15b55034617668b4620/html5/thumbnails/26.jpg)
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;
}