INTERFACES GRÁFICAS. Algoritmia y Programación

Documentos relacionados
Aplicaciones gráficas en Java Librería Swing

Construir una Interfaz Gráfica

OBJETOS CONTENEDORES JPANEL Y JSCROLLPANEL

Interfaces gráficas. Jose Jesus García Rueda

Programación de sistemas

LABORATORIO Nº 9 TABLAS DINÁMICAS

Elaboración de Documentos en Procesadores de Textos

Computación Aplicada. Universidad de Las Américas. Aula virtual de Computación Aplicada. Módulo de Excel 2013 LIBRO 4

USO DEL OBJETO JTABLE

EXCEL 2010 CUADERNILLO N 2

Componentes Swing. Las clases cuyo nombre comienza por J forman parte de Swing. Todas las demás están incluidas en AWT (Abstract Window Toolkit)

Creación de Formularios y Consultas

Crear gráficos en Excel Un gráfico es la representación gráfica de los datos de una hoja de cálculo y facilita su interpretación.

Java Avanzado Facultad de Ingeniería. Escuela de computación.

TABLAS WORD La tercer opción es usar el vínculo Dibujar Tabla, aquí se dimensiona la tabla dibujándola con el mouse

Agenda. Contenedores y componentes

Fundamentos de Word. Identificar los elementos de la interfaz de usuario que puede usar para realizar las tareas básicas.

Microsoft Windows Seven. Windows Seven. Elementos de la pantalla principal Iconos del escritorio o Equipo o Papelera de Reciclaje Barra de tareas

INSTALACION Y PRUEBA DEL PLUGIN WindowBuilder para trabajar Swing en Eclipse

Java y Eclipse Desarrolle una aplicación con Java y Eclipse

EXCEL I UNIDAD 1 EMPEZANDO A TRABAJAR CON EXCEL (SEMANA 1)

Trabajando con GUI en Java Componente java.swing

NATIONAL SOFT HOTELES GUÍA DE CONFIGURACIÓN DEL FORMATO DE FACTURAS

GUÍA DE LABORATORIO 5 ARREGLOS DE UNA DIMENSIÓN

Introducción a Swing. Taller de Programación 2016

Manual de Access. RGA Training & Solutions

Agentes con Interfaz Gráfica.

Conocimientos previos

MANUAL DE USUARIO MODULO DE ACTIVOS FIJOS

Guía para cambio y solicitud de contraseña de acceso a los Sistemas Académicos Institucionales

Al entrar en Excel nos aparecerá la siguiente ventana:

Profesor(a): Ing. Miriam Cerón Brito

Fundamentos de PowerPoint

Novell. Novell Teaming 1.0. novdocx (es) 6 April 2007 EXPLORAR EL PORTLET DE BIENVENIDA DESPLAZARSE CON NOVELL TEAMING NAVIGATOR.

RELACIONES DE TABLAS Definición de las relaciones de tablas

Fundamentos de Excel

Figura 17 Barra de iconos

Área Académica: Licenciatura en Derecho. Profesor: Lic. Virginia Argüelles Pascual

Tablas. Contenido TECNOLOGÍA WORD

USO DE LOS OBJETOS JLABEL, JTEXTFIELD Y JBUTTON

MICROSOFT EXCEL 2007

MANUAL DE USUARIO PARA OPERADORES SISTEMA DE GESTIÓN DOCUMENTARIO DE LA UNT

Registro Nacional de Reservas Territoriales RENARET. Manual del visor

Manejo de Filas, Columnas, Celdas y Rangos

Georreferenciar en Google Earth (Paso a Paso)

Fundamentos de Ordenadores. Depurar programas usando Nemiver

Desarrollando aplicaciones mediante componentes

TECNOLOGÍA E INFORMÁTICA

MANUAL DE USUARIO PARA LA DECLARACIÓN INFORMATIVA SOBRE EL ISR DIFERIDO EN CONSOLIDACION FISCAL 19-A Versión 2.0.0

Centro de Profesorado Luisa Revuelta (Córdoba) TEMA 3. El ENTORNO DE TRABAJO, MANEJO DE DIAPOSTIVAS

9.1. Insertar filas en una hoja

Operaciones básicas con hojas de cálculo

Elementos esenciales de Word

Introducción Mic i ro r s o of o t t W or o d r

Interfaces gráficas de usuario

Solicitudes MINECO. Configuración del equipo para Firma y Registro de Solicitud IMV

Unidad 5. Tablas. La celda que se encuentra en la fila 1 columna 2 tiene el siguiente contenido: 2º Celda

Tips de Componentes UI Java Swing con Netbeans

TUTORIAL PARA CONSTRUIR EL DIAGRAMA DE FASES DE UNA SUSTANCIA

En Microsoft Office Word 2007 se puede insertar una tabla eligiendo un diseño entre varias tablas con formato previo

Computación Aplicada. Universidad de Las Américas. Aula virtual de Computación Aplicada. Módulo de Excel 2013 LIBRO 11

INSTITUTO ELECTORAL DEL ESTADO DE MÉXICO SECRETARÍA EJECUTIVA UNIDAD DE INFORMÁTICA Y ESTADÍSTICA

Control de Accesos SisMod

Entorno de trabajo de Excel 2010

Microsoft Excel. Manejo de Software para Microcomputadoras

Crear una tabla dinámica

INSTITUCIÓN EDUCATIVA JOSÉ EUSEBIO CARO ÁREA DE TECNOLOGÍA E INFORMÁTICA 2016 DOCENTE JESÚS EDUARDO MADROÑERO RUALES GRADO OCTAVO TEMA

CREAR FORMULARIOS. Crear un formulario en el modo Vista Diseño

TEMA 4: Insertar Tabla e Imágenes Prediseñadas

Curso de iniciación a las TIC en Educación Permanente CEP de Castilleja (Sevilla) (octubre/noviembre 2009) Calc. Eva Sánchez-Barbudo Vargas

Escuela Normal Superior Río de Oro (Cesar)

CREAR GRÁFICOS Y UTILIZAR FORMATOS PARA LA PRESENTACIÓN DE INFORMES. Unidad N 3. Crear gráficos y utilizar formatos, para la presentación de informes.

Centro de Bachillerato Tecnológico. Manual de prácticas. Visual Basic 6.0. Nivel Básico. Industrial y de servicios No. 231.

El proceso para crear una presentación en Microsoft PowerPoint incluye lo siguiente:

2.1 Elementos gráficos en Java.

Examen en Línea. Plataforma Universidad de Pamplona Enero Universidad de Pamplona - Plataforma 1

Tablas en vista hoja de datos

INSTITUCION EDUCATIVA MANUEL ANGEL ANACHURY AREA: TECNOLOGIA E INFORMATICA

MÓDULO 4: PLANTA DE PERSONAL

CONSTRUCCIÓN DE GRÁFICOS CON EXCEL

Manual Operacional AGENDA - SIDRA

PASOS PARA CREAR FUNCIONES CON VBA

PROGRAMACION EN VISUAL BASIC

15 DE JUNIO DE 2015 TUTORIAL DE WORD 2013 TABLAS

Animación y transición - Últimos retoques. Imprimiendo transparencias o diapositivas

1

Usando Recupera Tu Vida! con Outlook 2007 Guía de Configuración del Usuario

Manual de operación del usuario

Organización de la información en disco: archivos y carpetas

Pasos para cambiar la orientación de la página

Manual Gestión de Ambientes

SUBMÓDULO DE DISTRIBUCIÓN DE PLANTA DE PERSONAL

La versión del sistema de la consola del JAVA recomendado es la Esta aplicación opera en cualquier Sistema Operativo Windows.

Manual de Usuario Webmail Horde

Capítulo 7. Introducción a las Interfaces Gráficas de usuario. Continuar

Manual Power Point. RGA Training & Solutions

Herramientas Google Aplicadas a Educación. Primera parte

Modulo I. Primeros Pasos en Writer

GESTIÓN DEL CORREO. Buscar y marcar mensajes. Buscar mensajes: Revisar leídos y no leídos

Transcripción:

Algoritmia y Programación

CONTENIDO GUI s (Graphic User Interfaces) Qué son? Componentes Layouts Eventos Editor Componentes Layouts Eventos Slide 2

Qué son? Una interfaz gráfica de usuario (GUI) presenta un modo amigable al usuario para interactuar con un programa u@algoritmia:~$ mkdir documentos u@algoritmia:~$ cd documentos u@algoritmia:~/documentos$ Slide 3

Qué son? Una interfaz gráfica de usuario (GUI) presenta un modo amigable al usuario para interactuar con un programa Slide 4

Componentes Las GUI s se crean a partir de componentes, éstos permiten que el usuario interactúe mediante el ratón, el teclado y otras formas de entrada Slide 5

Componentes JFrame : Es la ventana sobre la que se construye la GUI. JLabel : Etiquetas para mostrar mensajes o indicaciones al usuario. JButton : Se asocia a una operación que realizará el usuario. JTextField : Puede permitir tanto la entrada como la salida de datos. JPanel : Sirve como contenedor para: JLabel, JButton y JTextField. JFrame JLabel JTextField JButton JTextArea JPanel (3 botones) Slide 6

Componentes Ejercicio: Qué componentes identifica en la siguiente interfaz gráfica? Slide 7

Componentes Ejercicio: Qué componentes identifica en la siguiente interfaz gráfica? JFrame JButton JTextField JPanel (16 botones) Slide 8

Componentes Ejercicio: Qué componentes identifica en la siguiente interfaz gráfica? Slide 9

Componentes Ejercicio: Qué componentes identifica en la siguiente interfaz gráfica? JFrame JButton JLabel JLabel JPanel (3 botones) Slide 10

Componentes Las GUI s se crean a partir de componentes, éstos permiten que el usuario interactúe mediante el ratón, el teclado y otras formas de entrada Slide 11

Componentes JTabbedPane : Permite distribuir varios JPanel en pestañas JRadioButton : Botón de selección para información excluyente JCheckBox : Casilla de selección JSpinner : Componente para especificar un número (dos botones) JComboBox : Componente para desplegar una lista de opciones JMenu JMenuBar JTabbedPane JComboBox JSpinner JCheckBox JRadioButton Slide 12

Componentes Ejercicio: Qué componentes identifica en la siguiente interfaz gráfica? Slide 13

Componentes Ejercicio: Qué componentes identifica en la siguiente interfaz gráfica? JFrame JLabel JLabel JTextField JSpinner JRadioButton JCheckBox JButton JLabel Slide 14

Componentes Ejercicio: Qué componentes identifica en la siguiente interfaz gráfica? JPanel (2 elementos) JPanel (4 elementos) JPanel (2 elementos) JPanel (3 elementos) Slide 15

Componentes y sus métodos De acuerdo al tipo de componente es posible realizar operaciones de lectura de su contenido o modificación de su contenido Slide 16

Componentes y sus métodos Es conveniente para la lectura o modificación de contenido, identificar cada componente por medio de un nombre único Slide 17

JLabel Método void settext(string) void seticon( Icon) Propósito Establece el texto a mostrar en la etiqueta. Establece la imagen mostrada por el botón cuando no está seleccionado o pulsado. import javax.swing.icon; import javax.swing.imageicon; Icon icono = new ImageIcon(getClass().getResource( rutaicono"))); Slide 18

JButton Método void settext(string) String gettext() void seticon( Icon) Propósito Establece el texto a mostrar en el botón. Obtiene el texto mostrado por el botón. Establece la imagen mostrada por el botón cuando no está seleccionado o pulsado. Slide 19

JTextField Método void settext(string) String gettext() Propósito Establece el texto a mostrar en el campo de texto. Obtiene el texto mostrado por el campo de texto. Slide 20

Layouts Los gestores de distribución (Layouts) permiten ordenar los componentes de una interfaz de distintas formas Slide 21

Layouts Los gestores de distribución (Layouts) permiten ordenar los componentes de una interfaz de distintas formas En el diseño de flujo a medida que se añaden componentes se ubican de izquierda a derecha Diseño de flujo (FlowLayout) Slide 22

Layouts Los gestores de distribución (Layouts) permiten ordenar los componentes de una interfaz de distintas formas En el diseño de rejilla se especifican el número de columnas y filas en que se divide un panel para ubicar componentes Los componentes que se agregan se ubican de izquierda a derecha y de arriba hacia abajo Diseño de rejilla (GridLayout) Slide 23

Layouts Los gestores de distribución (Layouts) permiten ordenar los componentes de una interfaz de distintas formas El diseño de borde permite ubicar componentes en las direcciones: norte, centro, sur, este y oeste de una interfaz gráfica NORTH EAST CENTER CENTER SOUTH WEST Diseño de borde (BorderLayout) Slide 24

Layouts Los gestores de distribución (Layouts) permiten ordenar los componentes de una interfaz de distintas formas En una interfaz es posible combinar paneles con distintos tipos de gestores de distribución Diseño de borde y Diseño de rejilla Slide 25

Layouts Ejemplo: La gráfica muestra el empleo de gestores de distribución JFrame (Diseño de flujo) JPanel (Diseño de rejilla) JPanel (Diseño de rejilla) JPanel (Diseño de rejilla) JPanel (Diseño de rejilla) Slide 26

Layouts Ejemplo: La gráfica muestra el empleo de gestores de distribución JFrame (Diseño de flujo) JPanel (Diseño de rejilla) Slide 27

Layouts Ejercicio: Identifique los tipos de gestores de distribución en la siguiente interfaz gráfica: Slide 28

Layouts Ejercicio: Identifique los tipos de gestores de distribución en la siguiente interfaz gráfica: JFrame (Diseño de borde) JPanel (Diseño de rejilla) Slide 29

Layouts Ejercicio: Identifique los tipos de gestores de distribución en la siguiente interfaz gráfica: Slide 30

Layouts Ejercicio: Identifique los tipos de gestores de distribución en la siguiente interfaz gráfica: JFrame (Diseño de borde) JPanel (Diseño de rejilla) Slide 31

Layouts Ejercicio: Identifique los tipos de gestores de distribución en la siguiente interfaz gráfica: Slide 32

Layouts Ejercicio: Identifique los tipos de gestores de distribución en la siguiente interfaz gráfica: JFrame (Diseño de rejilla 7x1) JPanel (Diseño de rejilla 1x5) JPanel (Diseño de rejilla 1x4) Slide 33

Eventos Java utiliza una metáfora llamada oyente para hacer que la GUI escuche continuamente los eventos que pueden suceder sobre sus componentes. Algunos de los eventos que pueden ocurrir son: Clic sobre los botones Completar campos de texto y oprimir la tecla Enter Hacer clic sobre alguna opción de un menú Ejecutar un comando con el teclado Seguir el rastro del ratón Entre otros. Slide 34

Eventos Cada componente tiene eventos relacionados y a cada evento se le pueden asignar instrucciones que se ejecutarán cuando el evento ocurra. Cada evento tiene relacionado un método o función cuyo nombre está conformado por el nombre del componente y el nombre del evento. Las instrucciones a ejecutar se ubican dentro del método donde se requiera. Ejemplo de eventos generados por el mouse sobre un botón: Evento Nombre en Java Componente Método relacionado Click de mouse sobre el botón MouseClicked boton1 boton1mouseclicked El mouse ingresa al área del botón MouseEntered boton1 boton1mouseentered El mouse sale del área del botón MouseExited boton1 boton1mouseexited Slide 35

Eventos Al realizar clic sobre un componente de una interfaz gráfica como por ejemplo un botón, se dice que ocurre un evento y se ejecutan las instrucciones que se encuentren dentro del método o función llamado nombrecomponenteactionperformed Ejemplo: Al hacer clic sobre el boton llamado botonpapel, se ejecuta el método llamado botonpapelactionperformed Slide 36

GUI S Netbeans

Netbeans cuenta con un asistente para la creación de interfaces gráficas Slide 38

Para emplear el asistente de creación de interfaces gráficas debe seguir los siguientes pasos: Slide 39

Paso 1: Crear un proyecto nuevo sin fuentes Slide 40

Paso 2: Hacer clic derecho sobre la carpeta paquete de fuentes, seleccionar Nuevo y luego Formulario JFrame Slide 41

Paso 3: Colocar como nombre Interfaz y hacer clic en Terminar Slide 42

Paso 3: En la pestaña fuente se muestra el código fuente en Java para la interfaz, en la pestaña diseño se muestra la interfaz como tal Slide 43

El asistente para la creación de interfaces gráficas esta compuesto por distintas subventanas Ventana de Componentes Ventana de Previsualización Ventana de Organización de Componentes Ventana de Propiedades Slide 44

Botón de ejecución Ventana de componentes Ventana de previsualización Ventana de organización de componentes Ventana de propiedades Slide 45

Ejemplo: Por medio del asistente para la creación de interfaces gráficas realizar la siguiente interfaz Slide 46

Paso 4: Arrastrar desde la ventana de componentes los siguientes elementos a la ventana de previsualización 1 Panel 1 Etiqueta 1 Botón 1 Campo de texto Slide 47

Paso 4: Verificar que los componentes se encuentren en la ventana de organización de componentes. Verifique además que se encuentren dentro del componente JFrame Slide 48

Paso 5: Hacer clic derecho y seleccionar cambiar nombre de variable. Cambie el nombre de cada componente de acuerdo a como aparece en la gráfica Slide 49

Paso 6: Hacer clic derecho en JFrame y seleccionar Activar gestor de distribución y luego seleccionar Diseño de Borde Slide 50

Paso 7: El JFrame tiene ahora un diseño de borde, a continuación ubicaremos el panel en el centro del JFrame Slide 51

Paso 7: En la ventana de organización de componentes seleccionar panel y en la ventana de propiedades seleccionar como Dirección: Center Slide 52

Paso 8: Hacer clic derecho en panel y seleccionar Activar gestor de distribución y luego seleccionar Diseño de Rejilla Slide 53

Paso 9: Hacer clic (izquierdo) en GridLayout en la ventana de organización de componentes, luego en la ventana de propiedades digite en Columnas 1 y en Filas 3 Slide 54

Paso 10: Mueva los componentes etiqueta, botón y campodetexto dentro del componente panel Slide 55

Paso 10:La ventana de previsualización debe quedar de la forma que indica la figura Slide 56

Paso 11: Disminuya el tamaño del JFrame, haciendo clic sostenido y arrastrando desde la esquina hasta alcanzar el tamaño de la figura de la derecha Slide 57

Paso 12: Hacer clic derecho en etiqueta en la ventana de previsualización y seleccionar Editar texto. Escribir Bienvenido como nuevo texto Slide 58

Paso 12: Repita el proceso para modificar los otros textos, hasta obtener la figura que se muestra a continuación Slide 59

Paso 13: En la ventana de organización de componentes seleccionar etiqueta y en la ventana de propiedades, ajustar las propiedades de la etiqueta de acuerdo con la figura Slide 60

Paso 13: En la ventana de previsualización, el resultado debe ser la interfaz gráfica que muestra la figura Slide 61

Paso 14: Hacer doble clic en el boton saludos en la ventana de previsualización. En el método botonactionperformed digite las líneas de código que aparecen a continuación private void botonactionperformed(java.awt.event.actionevent evt) { // TODO add your handling code here: String nombre = campotexto.gettext(); JOptionPane.showMessageDialog(null, Hola + nombre); } Nota: No olvide agregar la línea de código. import javax.swing.joptionpane; Slide 62

Paso 14: Ejecute la aplicación. Digite su nombre en el campo de texto y haga clic en el botón. Slide 63

Ejemplo: Por medio del asistente para la creación de interfaces gráficas realizar la siguiente interfaz Slide 64

Repita los pasos: Paso 1, Paso 2 y Paso 3, para crear un nuevo proyecto sin fuentes y con un formulario JFrame Slide 65

Paso 4: Arrastrar desde la ventana de componentes los siguientes elementos a la ventana de previsualización 1 Panel 2 Etiquetas 3 Botones Slide 66

Paso 4: Verificar que los componentes se encuentren en la ventana de organización de componentes. Verifique además que los componentes se encuentren organizados como muestra la figura Los botones se encuentra dentro del JPanel Las etiquetas se encuentra por fuera del JPanel pero dentro del JFrame Slide 67

Paso 5: Hacer clic derecho y seleccionar cambiar nombre de variable. Cambie el nombre de cada componente de acuerdo a como aparece en la gráfica Slide 68

Paso 6: Hacer clic derecho en JFrame y seleccionar Activar gestor de distribución y luego seleccionar Diseño de Borde Slide 69

Paso 7: En la ventana de organización de componentes seleccionar panel y en la ventana de propiedades seleccionar como Dirección: Center Slide 70

Paso 8: En la ventana de organización de componentes seleccionar etiquetaganador y en la ventana de propiedades seleccionar como Dirección: South Slide 71

Paso 9: En la ventana de organización de componentes seleccionar etiquetajugadas y en la ventana de propiedades seleccionar como Dirección: North Slide 72

Paso 10: Hacer clic derecho en panel y seleccionar Activar gestor de distribución y luego seleccionar Diseño de Rejilla Slide 73

Paso 11: Hacer clic (izquierdo) en GridLayout en la ventana de organización de componentes, luego en la ventana de propiedades digite en Columnas 3 y en Filas 1 Slide 74

Paso 12:La ventana de previsualización debe quedar de la forma que indica la figura Slide 75

Paso 13:Modifique los textos de los componentes para obtener la interfaz gráfica de la figura. Elimine los textos de los botones Slide 76

Paso 14:Para cada uno de los botones, modifique la propiedad preferredsize, a un valor de [103, 103] Slide 77

Paso 15: Crear en la carpeta src del proyecto creado en Netbeans (Carpera Personal Netbeans Projects Carpeta de Proyecto src) una carpeta llamada imágenes con las imágenes a continuación Imágenes de los botones (icon) Imágenes al pasar el mouse encima de los botones (icon over) Slide 78

Paso 16: En la ventana de organización de componentes seleccionar el botonpiedra, en la ventana de propiedades hacer clic en icon Slide 79

Paso 17: En la ventana de selección de icono, en paquete seleccionar la carpeta imágenes, en archivo seleccionar piedra.png Slide 80

Paso 17: Repetir el proceso para asignar iconos a los otros botones Slide 81

Paso 18: En la ventana de organización de componentes seleccionar el botonpiedra, en la ventana de propiedades hacer clic en rollovericon Slide 82

Paso 19: En la ventana de selección de icono, en paquete seleccionar la carpeta imágenes, en archivo seleccionar piedraover.png Slide 83

Paso 20: Repetir el proceso para asignar iconos a los otros botones Slide 84

Paso 21: Reduzca el tamaño del JFrame Slide 85

Paso 22: Hacer doble clic en el botonpiedra en la ventana de previsualización. En el método botonpiedraactionperformed digite las líneas de código que aparecen a continuación private void botonpiedraactionperformed(java.awt.event.actionevent evt) { int pcjugada = (int) Math.round(Math.random() * 2) + 1; if (pcjugada == 1) { etiquetajugadas.settext("la PC juega Piedra, Usted juega Piedra"); etiquetaganador.settext("empate"); } if (pcjugada == 2) { etiquetajugadas.settext("la PC juega Papel, Usted juega Piedra"); etiquetaganador.settext("la PC gana"); } if (pcjugada == 3) { etiquetajugadas.settext("la PC juega Tijera, Usted juega Piedra"); etiquetaganador.settext("el ganador es usted"); } } Slide 86

Paso 23: Hacer doble clic en el botonpapel en la ventana de previsualización. En el método botonpapelactionperformed digite las líneas de código que aparecen a continuación private void botonpapelactionperformed(java.awt.event.actionevent evt) { int pcjugada = (int) Math.round(Math.random() * 2) + 1; if (pcjugada == 1) { etiquetajugadas.settext("la PC juega Piedra, Usted juega Papel"); etiquetaganador.settext("el ganador es Usted"); } if (pcjugada == 2) { etiquetajugadas.settext("la PC juega Papel, Usted juega Papel"); etiquetaganador.settext("empate"); } if (pcjugada == 3) { etiquetajugadas.settext("la PC juega Tijera, Usted juega Papel"); etiquetaganador.settext("la PC gana"); } } Slide 87

Paso 24: Hacer doble clic en el botontijera en la ventana de previsualización. En el método botontijeraactionperformed digite las líneas de código que aparecen a continuación private void botontijeraactionperformed(java.awt.event.actionevent evt) { int pcjugada = (int) Math.round(Math.random() * 2) + 1; if (pcjugada == 1) { etiquetajugadas.settext("la PC juega Piedra, Usted juega Tijera"); etiquetaganador.settext("la PC gana"); } if (pcjugada == 2) { etiquetajugadas.settext("la PC juega Papel, Usted juega Tijera"); etiquetaganador.settext("el usuario gana"); } if (pcjugada == 3) { etiquetajugadas.settext("la PC juega Tijera, Usted juega Tijera"); etiquetaganador.settext("empate"); } } Slide 88

Paso 25: Al ejecutar la aplicación deberá observar la interfaz gráfica que se muestra a continuación Slide 89

Ejemplo: Por medio del asistente para la creación de interfaces gráficas realizar la siguiente interfaz Slide 90

Repita los pasos: Paso 1, Paso 2 y Paso 3, para crear un nuevo proyecto sin fuentes y con un formulario JFrame Slide 91

Paso 4: Arrastrar desde la ventana de componentes los siguientes elementos a la ventana de previsualización 1 Panel 4 Etiquetas 1 Campo de texto 1 Lista desplegable 1 Spinner 2 Botones de opción 1 Grupo de botones 1 Botón 1 Cuadro de contraseña 1 Barra de menú 1 Menú 1 Elemento de Menú Slide 92

Paso 5: De acuerdo a la figura: Organizar los componentes Ajustar los gestores de distribución para el JFrame (BorderLayout) y el panel (GridLayout) Cambiar los nombres de los componentes Slide 93

Paso 6: Hacer clic (izquierdo) en GridLayout en la ventana de organización de componentes, luego en la ventana de propiedades digite en Columnas 2, en Filas 5, en Surco Horizontal 2 y en Surco Vertical 2 Slide 94

Paso 7: En la ventana de organización de componentes seleccionar panel y en la ventana de propiedades seleccionar como Dirección: Center Slide 95

Paso 8: En la ventana de organización de componentes seleccionar radiovip y en la ventana de propiedades, en buttongroup, seleccionar grupocategoria. Repetir el procedimiento para el componente radiogeneral Slide 96

Paso 9: Cambie los textos de cada componente de acuerdo a como se observa en la figura. Cambie el tamaño del JFrame para ajustarlo a los componentes de la interfaz Slide 97

Paso 10: Hacer doble clic en el botonreservar en la ventana de previsualización. En el método botonpiedraactionperformed digite las líneas de código que aparecen en la siguiente diapositiva Slide 98

private void botonreservaractionperformed(java.awt.event.actionevent evt) { // TODO add your handling code here: String id = "", fila = "", categoria = ""; int silla = 0; id = campotextoid.gettext(); fila = combofila.getselecteditem().tostring(); silla = Integer.parseInt(spinnerSilla.getValue().toString()); if (radiogeneral.isselected()) { categoria = "VIP"; } else if (radiovip.isselected()) { categoria = "General"; } } if (!id.equals("") &&!fila.equals("") && silla!= 0 &&!categoria.equals("")) { JOptionPane.showMessageDialog(null, "La reserva fue exitosa" + "\nidentificacion : " + id + "\nfila : " + fila + " - Silla : " + silla + "\ncategoria : " + categoria); } else { JOptionPane.showMessageDialog(null, "Ingrese todos los campos"); } Slide 99

Ejemplo: Por medio del asistente para la creación de interfaces gráficas realizar la siguiente interfaz Slide 100

Repita los pasos: Paso 1, Paso 2 y Paso 3, para crear un nuevo proyecto sin fuentes y con un formulario JFrame Slide 101

Paso 4: Arrastrar desde la ventana de componentes los siguientes elementos a la ventana de previsualización 4 Paneles 17 Etiquetas 1 Campo de texto 4 Botones Slide 102

Paso 5: De acuerdo a la figura: Organizar los componentes Ajustar los gestores de distribución para el JFrame (GridLayout) y los paneles (GridLayout) Cambiar los nombres de los componentes Slide 103

Paso 5: El resto de las etiquetas se deben ubicar en cada uno de los paneles Slide 104

Paso 6: Hacer clic (izquierdo) en GridLayout debajo de JFrame en la ventana de organización de componentes, luego en la ventana de propiedades digite en Columnas 1, en Filas 7, en Surco Horizontal 0 y en Surco Vertical 0 Slide 105

Paso 6: Hacer clic (izquierdo) en GridLayout debajo de paneldescripcion en la ventana de organización de componentes, luego en la ventana de propiedades digite en Columnas 5, en Filas 1, en Surco Horizontal 0 y en Surco Vertical 0 (Repetir el proceso para el panelvalores y el panelunidades) Slide 106

Paso 6: Hacer clic (izquierdo) en GridLayout debajo de panelbuscar en la ventana de organización de componentes, luego en la ventana de propiedades digite en Columnas 4, en Filas 1, en Surco Horizontal 0 y en Surco Vertical 0 Slide 107

Paso 7: Cambie los textos de cada componente de acuerdo a como se observa en la figura. Cambie el tamaño del JFrame para ajustarlo a los componentes de la interfaz Slide 108

Paso 8: Declara las siguientes variables globales en el código de la Interfaz: String descripcion[] = new String[4]; int valores[] = new int[4]; int unidades[] = new int[4]; Slide 109

Paso 8: Hacer doble clic en el botondescripcion en la ventana de previsualización. En el método botondescripcionactionperformed digite las líneas de código que aparecen en la siguiente diapositiva Slide 110

private void botondescripcionactionperformed(java.awt.event.actionevent evt) { // TODO add your handling code here: int tam = descripcion.length; for (int i = 0; i < tam; i++) { descripcion[i] = JOptionPane.showInputDialog("Digite producto"); } } etiquetap1.settext(descripcion[0]); etiquetap2.settext(descripcion[1]); etiquetap3.settext(descripcion[2]); etiquetap4.settext(descripcion[3]); Slide 111

Paso 8: Hacer doble clic en el botonvalores en la ventana de previsualización. En el método botonvaloresactionperformed digite las líneas de código que aparecen en la siguiente diapositiva Slide 112

private void botonvaloresactionperformed(java.awt.event.actionevent evt) { // TODO add your handling code here: int tam = valores.length; for (int i = 0; i < tam; i++) { valores[i] = Integer.parseInt(JOptionPane.showInputDialog("Digite valor")); } } etiquetav1.settext("" + valores[0]); etiquetav2.settext("" + valores[1]); etiquetav3.settext("" + valores[2]); etiquetav4.settext("" + valores[3]); Slide 113

Paso 8: Hacer doble clic en el botonunidades en la ventana de previsualización. En el método botonunidadesactionperformed digite las líneas de código que aparecen en la siguiente diapositiva Slide 114

private void botonunidadesactionperformed(java.awt.event.actionevent evt) { // TODO add your handling code here: int tam = unidades.length; for (int i = 0; i < tam; i++) { unidades[i] = Integer.parseInt(JOptionPane.showInputDialog("Digite unidades")); } } etiquetau1.settext("" + unidades[0]); etiquetau2.settext("" + unidades[1]); etiquetau3.settext("" + unidades[2]); etiquetau4.settext("" + unidades[3]); Slide 115

Paso 8: Hacer doble clic en el botonaceptar en la ventana de previsualización. En el método botonaceptaractionperformed digite las líneas de código que aparecen en la siguiente diapositiva Slide 116

private void botonaceptaractionperformed(java.awt.event.actionevent evt) { // TODO add your handling code here: etiquetaresultado.settext(""); int tam = descripcion.length; for (int i = 0; i < tam; i++) { if (campotextocomprar.gettext().equalsignorecase(descripcion[i])) { unidades[i] = unidades[i] - 1; etiquetaresultado.settext("encontrado!"); } } if (etiquetaresultado.gettext().equals("")) { etiquetaresultado.settext("no encontrado!"); } } etiquetau1.settext("" + unidades[0]); etiquetau2.settext("" + unidades[1]); etiquetau3.settext("" + unidades[2]); etiquetau4.settext("" + unidades[3]); Slide 117

Ejercicio: El usuario digita un número en el cuadro de texto Digite un valor una vez pulsado el botón Actualizar, se actualiza el ícono del campo Icono, escriba el código que permita actualizar la información de los componentes: Cree los íconos que requiera en un editor de imágenes. Ejemplos: 1 Slide 118

Ejercicio: Realice los cambios necesarios para que al no escribir un valor, se limpien todos los campos. Nota: para quitar un icono se emplea el método seticon con parámetro de entrada null Slide 119

ALGUNAS COSITAS.. JOPtionPane Mensaje de advertencia: Mensaje que se muestra en el diálogo JOptionPane.showMessageDialog(this, "Debe deligenciar los nombres de todos Jurados", "Advertencias", JOptionPane.INFORMATION_MESSAGE);} Slide 120

ALGUNAS COSITAS.. JOPtionPane Mensaje de advertencia: JOptionPane.showMessageDialog(this, "Debe deligenciar los nombres de todos Jurados", "Advertencias", JOptionPane.INFORMATION_MESSAGE);} Titulo del diálogo Slide 121

ALGUNAS COSITAS.. JOPtionPane Mensaje de advertencia: JOptionPane.showMessageDialog(this, "Debe deligenciar los nombres de todos Jurados", "Advertencias", JOptionPane.INFORMATION_MESSAGE);} Ícono y botones del diálogo Slide 122

ALGUNAS COSITAS.. JOPtionPane Mensaje de confirmación: int respuesta = JOptionPane.showConfirmDialog(this, "Esta seguro de Instalar Mesa de Votacion?", "Confirmacion", JOptionPane.YES_NO_OPTION); Slide 123

ALGUNAS COSITAS.. JOPtionPane Mensaje de confirmación: int respuesta = JOptionPane.showConfirmDialog(this, "Esta seguro de Instalar Mesa de Votacion?", "Confirmacion", JOptionPane.YES_NO_OPTION); Devuelve un valor de tipo entero Slide 124

ALGUNAS COSITAS.. JOPtionPane Mensaje de Error: JOptionPane.showMessageDialog(this, "Clave erronea Sistema no Activado", "Informacion", JOptionPane.ERROR_MESSAGE); Slide 125

Sugerencias Para facilitar la construcción de una interfaz gráfica se recomienda realizar inicialmente un boceto de la interfaz donde se definan los elementos que la conforman y su distribución. En la construcción de la interfaz se recomienda primero agregar los paneles que la conforman y ajustar su respectiva distribución (BorderLayout, GridLayout, etc) junto con sus propiedades (dimensiones de la grilla, separación, etc). Posteriormente se recomienda agregar cada elemento gráfico ( campos de texto, etiquetas, botones, etc) a su respectivo panel y en la posición deseada. Repita los ejercicios de esta clase tomando como referencia únicamente la interfaz en su apariencia final. Slide 126

WEBGRAFIA http://download.oracle.com/javase/7/docs/api/ http://java.sun.com/developer/onlinetraining/gui/swing1/ shortcourse.html http://www.programacion.com/articulo/swing_y_jfc_java_f oundation_classes_94 Slide 127