Facultad de Ingeniera y Arquitectura

Algoritmo y Estructura de Datos I 2012- II Haga clic para modificar el estilo de subttulo del patrn

Sesin 14

Ing. Dany Montoya Negrillo.

Algoritmo y Estructura de Datos I

Introduccin a la Programacin Visual

Haga clic para modificar el estilo de subttulo del patrn

Desarrollo de soluciones bsicas usando GUI

Introduccin a la Programacin Visual

La Interfaz Grafica de Usuario

La interfaz grfica del usuario, o GUI, es el conjunto de elementos grficos (ventanas, mens, botones, etc.) que permiten la interaccin entre el usuario y la aplicacin informtica. Haga clic un acrnimo el estilo de subttulo delGraphical User GUI es para modificar del vocablo ingls patrn Interface. En el lenguaje Java podemos utilizar como Interfaz a las Clase Applet, Frame o Dialog.

Introduccin a la Programacin Visual

Diseo de la GUI

Consiste en crear una Interfaz y colocar sobre ella los componentes graficos. De tal manera que cumplen los requerimientos mnimos de entrada y salida de Datos. A cada componente le asignaremos un nombre. En java utilizamos Haga clic para modificar el estilo de subttulo del patrn los componentes AWT o Swing.

Introduccin a la Programacin Visual

Componentes mas usados
Paleta AWT Controls
1 2 3 4 5 6 7

Uso
Texto esttico en la pantalla. Bsicamente informativo. Caja de texto, permite capturar o mostrar datos. Todos los datos son capturados como String Caja de texto de mltiples lneas, permite capturar y mostrar datos. Botn que al hacer clic puede ejecutar un conjunto de instrucciones Lista desplegable que nos muestra opciones fijas de las cuales podemos seleccionar una. Casillas de seleccin, nos permiten seleccionar una o varias opciones. Muestra datos en forma de listado.

Haga clic para modificar el estilo de subttulo del patrn

5 1

Haga clic para modificar el estilo de subttulo del patrn

3 7 6

Introduccin a la Programacin Visual

Contenedores mas usados

Haga clic para modificar el estilo de subttulo del patrn

Introduccin a la Programacin Visual

En la programacin 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 disear nuestra aplicacin, como al momento de ejecutarse, es decir mediante programacin. Haga clic para modificar el estilo de subttulo del patrn 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 mayora de componentes tienen una etiqueta que se muestra en forma visual.

Haga clic para modificar el estilo de subttulo del patrn

Componente Jbutton JTextField JTextArea Jlabel JComboBox Jlist

Prefijo btn nombredelcomponente txt nombredelcomponente txa nombredelcomponente lbl nombredelcomponente cbo nombredelcomponente lst nombredelcomponente btnSalir

Ejemplo

txtNombres txaResultado lblNombres cboEstadoCivil lstCiudades

Haga clic para modificar el estilo de subttulo del patrn JCheckBox chk nombredelcomponente chxHobbies JRadioButton Jframe Jdialog JApplet rabnombredelcomponente Frm nombredelcontenedor dlg nombredelcontenedor appnombredelcontenedor rabSexo frmVentana dlgCantidad appInicio

Introduccin a la Programacin Visual

Programacin de la GUI

La programacin de la GUI esta asociada a la programacin d eventos de la GUI y consiste en asociar los mtodos del programa con los componentes visuales. Haga clic para modificar el estilo de subttulo del patrn En java hacemos uso de la Interfaces o Auditores para el manejo de eventos. La Interface mas utilizada es el ActionListener siendo los mtodos mas utilizados el actionEvents(), actionPerformed(), mouseClicked(), etc.

Tipo de objetos usados en la gui

Grafico Tipo de Objeto JLabel JTextField JButton JComboBox Prefijo lbl txt btn cbo Uso Mostrar texto o imagen Ingresar datos Realizar una accion Mostrar y seleccionar

Tipo de objetos usados en la gui

Grafico Tipo de Objeto JTextArea Prefijo txt Uso Mostrar datos en varias lineas

JTextArea con JScrollPane

txt scp

Mostrar datos en varias lineas

Diseo xde la gui Coordenada

Coordenada y

Ubicacin de los componentes

Componente tipo nombre Ubicacin x y Dimensiones ancho alto

JLabel JTextField JButton JtextArea JScrollPane

lblAno txtAno btnCargar txtS scpScroll

25

25

100

25

Creando un componente
Para crear un componente realizamos lo siguiente: n Declara el componente (En el bloque de declaracion de variables) n En el metodo init(), hacer lo siguiente por cada componente n Crear el componente (Utilizando la palabra new) n Darle las coordenadas, ancho y alto n Agregarlo al applet/JFrame

Creando una etiqueta

import java.awt.event.*; import java.awt.*; import javax.swing.*; public class Programa1 extends JApplet implements ActionListener{ // Declaracin de variables globales JLabel lblLinea; public void init() { getContentPane().setLayout(null); lblLinea = new JLabel("Introduccin a la Algoritmia", JLabel.CENTER); lblLinea.setBounds(0,50,300,25); getContentPane().add(lblLinea); } // Proceso de eventos de tipo ActionEvent public void actionPerformed( ActionEvent e){

if(e.getSource()==btnIngresar){ }else if(e.getSource()==btnCalcular){ }

} }

Ejemplo : Creacin de una JApplet

Diseo de la Ventana

JTextField:txtNum1

JLabel: lblNum1 JLabel: lblNum2 JLabel: lblResul

JTextArea:txaSalida JButton: btnSalir

EJERCICIOS PROPUESTOS
1.- Desarrollar una solucin que permita calcular el sueldo neto de un vendedor. Dicho calculo se realiza en base a un sueldo bsico equivalente a S/. 500, mas una comisin del 13.87% por cada venta que el vendedor realice. Mostrar el sueldo neto del vendedor sabiendo que hizo n ventas en el mes. 2.- desarrollar una solucin que permita ingresar el nombre, cantidad , el costo y el precio de venta de un producto. Calcular y mostrar el monto que tiene que pagar un cliente al momento de realizar una compra y cual ser la ganancia para el vendedor. 3.- Desarrollar una solucin que permita distribuir la fortuna de un padre entre sus cinco hijos, sabiendo que esta distribucin se realizara de la siguiente manera: Hijo1 = 10%, Hijo2 = 15%, Hijo3 = 25%, Hijo4 y Hijo5 el porcentaje restante, se divide proporcionalmente en relacin a la edad que representa cada uno de estos dos hijos, adems se debe de ingresar y mostrar el nombre, y el monto que le corresponde a cada hijo. 4.- Tres amigos desean implementar una empresa, para ello uno aporta un capital en soles y los otros dos en dlares, si se sabe que para formar la empresa requieren reunir S/.10,000, disee y desarrollo una solucin que permita calcular y mostrar el capital total recaudado, que porcentaje del capital fue aportado por cada amigo y si este capital cubre o no con el monto requerido, adems se debe mostrar los nombres y apellidos . 5.- Disee y desarrolle una solucin que permita ingresar dos nmeros de 3 cifras y en base a estos pueda obtener un tercer nmero de tres cifras, cuyas cifras sern obtenidas de la siguiente manera: La cifra correspondiente a las unidades ser igual a la cifra de las centenas del nmero mayor, La cifra de las decenas ser igual a la cifra de las unidades del nmero menor y La cifra de las centenas ser igual a la mayor cifra de las decenas de los nmeros ingresados.