Programación II - Guía3 - GUI

13
UNIVERSIDAD DE EL SALVADOR FACULTAD MULTIDISCIPLINARIA DE OCCIDENTE DEPARTAMENTO DE INGENIERÍA Y ARQUITECTURA PROGRAMACIÓN II DOCENTE: ING. ROBERTO COLÓN INSTRUCTOR: BR. KEVIN MANUEL OSORIO GUÍA 3 Objetivo: - Introducir a la parte de GUI en java Ejercicio continuación de Guía 2 Se debe crear el formulario que pida el id, el nombre, apellido, tipo de contratación, tipo de profesional con el que se calculará el salario a pagar que será mostrado en el formulario PARTE INTRODUCTORIA Se llama Interfaz Gráfica GUI (Graphical User Interface) al conjunto de componentes gráficos que posibilitan la interacción entre el usuario y la aplicación. Es decir ventanas, botones, combos, listas, cajas de diálogo, campos de texto, etc. Primero tenemos que diseñar la aplicación,programarla y por último los eventos que se generan a medida que el usuario interactua con la Interfaz. Los componentes son objetos de las clases que heredan de la clase base componente como Button, List, TextField, TextArea, Label, etc. En una GUI los componentes son contenidos en Contenedores o containers. Un Containes es un objeto cuya clase hereda de Container(clase que a su vez es subclase de Component) y tiene la responsabilidad de contener Componentes. Generalmente una GUI se monta sobre un Frame. Esté sera el Container principal que contendrá a los componentes de la Interfaz Gráfica, un Container podría contener a otros containers.

description

Introducción a parte GUI en java

Transcript of Programación II - Guía3 - GUI

UNIVERSIDAD DE EL SALVADOR

FACULTAD MULTIDISCIPLINARIA DE OCCIDENTE

DEPARTAMENTO DE INGENIERÍA Y ARQUITECTURA

PROGRAMACIÓN II

DOCENTE: ING. ROBERTO COLÓN

INSTRUCTOR: BR. KEVIN MANUEL OSORIO

GUÍA 3

Objetivo:

- Introducir a la parte de GUI en java

Ejercicio continuación de Guía 2

Se debe crear el formulario que pida el id, el nombre, apellido, tipo de

contratación, tipo de profesional con el que se calculará el salario a pagar que será

mostrado en el formulario

PARTE INTRODUCTORIA

Se llama Interfaz Gráfica GUI (Graphical User Interface) al conjunto de componentes gráficos

que posibilitan la interacción entre el usuario y la aplicación. Es decir ventanas, botones,

combos, listas, cajas de diálogo, campos de texto, etc.

Primero tenemos que diseñar la aplicación,programarla y por último los eventos que se

generan a medida que el usuario interactua con la Interfaz.

Los componentes son objetos de las clases que heredan de la clase base componente como

Button, List, TextField, TextArea, Label, etc.

En una GUI los componentes son contenidos en Contenedores o containers. Un Containes es

un objeto cuya clase hereda de Container(clase que a su vez es subclase de Component) y tiene

la responsabilidad de contener Componentes.

Generalmente una GUI se monta sobre un Frame. Esté sera el Container principal que

contendrá a los componentes de la Interfaz Gráfica, un Container podría contener a otros

containers.

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Crear un nuevo proyecto y un nuevo JFrame Form con el nombre Formulario

Se puede ver como aparece la paleta donde se pueden elegir los componentes a poner en el

formulario, y las propiedades del componente seleccionado

Para empezar pondremos una Label en el formulario, arrastando desde el apartado Swing

Controls de la Palette hacia el formulario y se suelta en el lugar deseado

Se le asigna desde las propiedades el nombre, en este caso se colocará Mi Label, para efecto

de ejemplo. Se selecciona la JLabel1 y se cambia la propiedad text asignando el nuevo Mi

Label.

Desde las propiedades se puede cambiar la fuente del texto dando clic en el botón que tiene

los puntos suspensivos al final de la fila

De esa forma se cambian las propiedades de cada componente, cabe resaltar que no todos

los componentes tienen las mismas propiedades. La jLabel es usada mayormente para

descripciones o texto estático en el formulario.

Ahora se pasará a explicar el JTextField. Se agrega de la misma forma como se agregó el JLabel

en el formulario, arrastrando el componente hasta el formulario.

Ahora cambiar el nombre de variable de ambos componentes, a la label que se llame

lblEtiqueta y a textField se le coloca txtCampo. Esto se hace dando clic derecho a componente

y seleccionando la opción

DISEÑO GRÁFICO DE LA APLICACIÓN

Hasta ahora se ha explicado lo más básico para agregar componentes en el formulario y

cambiar propiedades, en este momento crearemos el diseño añadiendo estos componentes:

Componente Nombre de

variable

Propiedad: text

jLabel1 Sin modificar ID de empleado:

jLabel2 Sin modificar Nombre:

jLabel3 Sin modificar Apellido:

jLabel4 Sin modificar Tiempo Contratación:

jLabel5 Sin modificar Tipo de Profesional:

jLabel6 Sin modificar Salario base:

jLabel7 lblMostrador …

Componente Nombre de

variable

Propiedad: text Propiedad: Horizontal Size

jTextField1 txtID ID de empleado: 50

jTextField2 txtNombre Nombre: 100

jTextField3 txtApellido Apellido: 100

Este componente no es visible en el formulario pero si se puede ver el navegador donde

también se pueden visualizar todos los componentes que se han agregado

Componente Nombre de

variable

Button Group grupoProfesional

Al agregar los radioButton al grupo se hace que sean mutuamente excluyentes, al seleccionar

uno se deselecciona el anterior

Componente Nombre de

variable

Propiedad: text Propiedad: buttonGroup

jRadioButton1 rdUniversitario Universitario grupoProfesional

jRadioButton1 rdMaestria Con Maestría grupoProfesional

jRadioButton1 rdDoctorado Con Doctorado grupoProfesional

Componente Nombre de

variable

jCombobox1 cmbContratacion

Para este combobox asignaremos el modelo en la propiedad Model y se coloca lo siguiente:

Y se colocan así y luego se da clic en OK

Componente Nombre de

variable

Propiedad: text

jButton1 btnCalcularSalario Calcular Salario

TRABAJANDO CON EL CÓDIGO

Se ha visto la parte gráfica de la aplicación ahora haremos que funcione agregando las clases

que se crearon en la Guía II y haciendo los métodos necesarios para obtener los valores que el

usuario ingrese desde el formulario. Se crea la clase Empleado en el proyecto y la clase

Operaciones que hereda de Empleado, estas clases ya fueron creadas en la Guía II anterior, así

que solo copiamos el código que se dejó al final de esta guía. La clase Operaciones tiene un

cambio, ahora devuelve una variable String que es la que se mostrará en el formulario y ya no

se mostrará con un JOptionPane.

Se debe ir a la parte del código de nuestro formulario dando clic en source

Ya se puede ver todo el código que se generó cuando se crearon todos los componentes de

forma gráfica. Regresar a la parte de Design para luego elegir el button Calcular Salario que se

creó y se selecciona de las propiedades la opción de Events y de ahí el evento actionPerformed

que es cuando el usuario activa el botón al darle clic en él.

Otra forma para poder empezar a codificar ese evento es darle doble clic en el botón. Una vez

ahí obtenemos todos los valores de los text, del combobox y de los radioButton.

Ahora se codifica los métodos para ver que radioButton está seleccionado y que elemento del

combobox está seleccionado

public class Empleado {

private String nombre, identificacion;

private int tiempoDeContratacion, tipoProfesional;

private double salarioBase;

public Empleado(){}

public Empleado(String id,String nom, int tiemContra, int tipoPro, double salBase)

{

setIdentificacion(id);

setNombre(nom);

setTiempoDeContratacion(tiemContra);

setTipoProfesional(tipoPro);

setSalarioBase(salBase);

}

public String getNombre() {

return nombre;

}

public void setNombre(String nombre) {

if(nombre.length()==0)

{

nombre="Sin Nombre";

}

this.nombre = nombre;

}

public void setIdentificacion(String identificacion) {

if(identificacion.length()==0)

{

identificacion="Sin Identificación";

}

this.identificacion = identificacion;

}

public void setTiempoDeContratacion(int tiempoDeContratacion) {

this.tiempoDeContratacion = tiempoDeContratacion;

}

public void setTipoProfesional(int tipoProfesional) {

this.tipoProfesional = tipoProfesional;

}

public void setSalarioBase(double salarioBase) {

this.salarioBase = salarioBase;

}

public String getIdentificacion() {

return identificacion;

}

public int getTiempoDeContratacion() {

return tiempoDeContratacion;

}

public int getTipoProfesional() {

return tipoProfesional;

}

public double getSalarioBase() {

return salarioBase; } }

public class Operaciones extends Empleado{

public Operaciones(){}

public Operaciones(String id,String nom, int tiemContra, int tipoPro, double salBase)

{

super(id,nom,tiemContra,tipoPro,salBase);

}

public double salarioARecibir()

{

//se asigna el valor del salario base a la variable salario para

//luego ir sacando los bonos

double salario=getSalarioBase();

//SI ES TIEMPO COMPLETO::::::::::::::::::::::

if(getTiempoDeContratacion()==1)

{

if(getTipoProfesional()==2)

{

salario+=salario*0.1;

}

else if(getTipoProfesional()==3)

{

salario+=salario*0.2;

}

}

//SI ES MEDIO TIEMPO::::::::::::::::::::::

if(getTiempoDeContratacion()==2)

{

if(getTipoProfesional()==1)

{

salario/=2;

}

if(getTipoProfesional()==2)

{

salario=(salario+salario*0.1)/2;

}

else if(getTipoProfesional()==3)

{

salario=(salario+salario*0.2)/2;

}

}

//SI ES UN CUARTO DE TIEMPO::::::::::::::::::::::

if(getTiempoDeContratacion()==3)

{

if(getTipoProfesional()==1)

{

salario/=4;

}

if(getTipoProfesional()==2)

{

salario=(salario+salario*0.1)/4;

}

else if(getTipoProfesional()==3)

{

salario=(salario+salario*0.2)/4;

}

}

return salario;

}

public String mostrar()

{

String cadena="";

cadena+="Nombre: "+getNombre();

cadena+="\n Identificación: "+getIdentificacion();

cadena+="\n \n \n SALARIO A RECIBIR: "+salarioARecibir();

return cadena;

}

}

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MÉTODOS DEL FORMULARIO private int radioActivo(){

//SE VERIFICA QUE RADIOBUTTON ESTA SELECCIONADO

int tipoProfesional=0;

if(rdUniversitario.isSelected()==true){

tipoProfesional=1;

}

if(rdMaestria.isSelected()==true){

tipoProfesional=2;

}

if(rdDoctorado.isSelected()==true){

tipoProfesional=3;

}

return tipoProfesional;

}

private int opcionDelComboboxSeleccionada(){

int tiempoContratacion=0;

if(cmbContratacion.getSelectedIndex()==1){

tiempoContratacion=1;

}

if(cmbContratacion.getSelectedIndex()==2){

tiempoContratacion=2;

}

if(cmbContratacion.getSelectedIndex()==3){

tiempoContratacion=3;

}

return tiempoContratacion;

}

private void btnCalcularSalarioActionPerformed(java.awt.event.ActionEvent evt) {

String id;

String nombre, apellido;

int tiempoContratacion,tipoProfesional;

double salarioBase=1000;

id=txtID.getText();

nombre=txtNombre.getText();

apellido=txtApellido.getText();

tipoProfesional=radioActivo();

tiempoContratacion=opcionDelComboboxSeleccionada();

Operaciones empleado=new Operaciones(id,nombre,tiempoContratacion,tipoProfesional,salarioBase);

lblMostrador.setText(empleado.mostrar());

}

PROPUESTA

- Agregar el espacio para que el usuario ingrese el salario base del empleado

- Que el usuario no pueda dejar el índice 0 de combobox

- Que el usuario no pueda dejar sin seleccionar uno de los radioButton