Algoritmo y Estructura de Datos I 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 1 Texto estático en la pantalla. Básicamente informativo. 2 Caja de texto, permite capturar o mostrar datos. Todos los datos son capturados como String 3 Caja de texto de múltiples líneas, permite capturar y mostrar datos. 4 Botón que al hacer clic puede ejecutar un conjunto de instrucciones 5 Lista desplegable que nos muestra opciones fijas de las cuales podemos seleccionar una. 6 Casillas de selección, nos permiten seleccionar una o varias opciones. 7 Muestra datos en forma de listado.

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.

ComponentePrefijoEjemplo ButtonbtnnombredelcomponenteBtnSalir TextFieldtxtnombredelcomponenteTxtNombres TextAreatxanombredelcomponenteTxtAResultado LabellblnombredelcomponenteLblNombres ChoicechonombredelcomponenteChoEstadoCivil ListlstnombredelcomponenteLstCiudades CheckBoxchxnombredelcomponenteChxHobbies RadioButtonrabnombredelcomponenteRabSexo FrameFrmnombredelcontenedorFrmVentana DialogDlgnombredelcontenedorDlgCantidad AppletAppnombredelcontenedorAppInicio

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: LblNombre Text: nombre TextField: Field name: TxtNombre Button: Field name: BtnAceptar Text: Aceptar Field name: BtnSalir Text: 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; }