Está en la página 1de 37

MATERIA: PROGRAMACIÓN ORIENTADA A OBJETOS

ALUMNO: LUIS JOSUE SANDOVAL ESQUEDA


PROFESOR: LUCIANO CONTRERAS QUINTERO
TRABAJO: PRÁCTICA 5
FECHA DE ENTREGA: 24/10/2018
Programación orientada a objetos 04/10/2018

Contenido
Objetivo..................................................................................................................................... 2
Introducción .............................................................................................................................. 2
Desarrollo ................................................................................................................................. 2
1. Login visto en clase ......................................................................................................... 3
1.1. Planteamiento .................................................................................................................... 3
1.2. Algoritmo ............................................................................................................................ 3
1.3 Diagrama de flujo ............................................................................................................... 3
1.4 Código documentado ......................................................................................................... 5
1.5 Explicación ......................................................................................................................... 7
1.6 Corridas .............................................................................................................................. 9
1.7 Conclusión ....................................................................................................................... 10
2. Login con eventos en botones...................................................................................... 11
2.1 Planteamiento ................................................................................................................... 11
2.2 Algoritmo........................................................................................................................... 11
2.3 Diagramas de flujo ........................................................................................................... 11
2.4 Código documentado ....................................................................................................... 13
2.5 Explicación ....................................................................................................................... 16
2.6 Corridas ............................................................................................................................ 18
2.7 Conclusión ....................................................................................................................... 20
3. Login personalizado ...................................................................................................... 21
3.1. Planteamiento .................................................................................................................. 21
3.2 Algoritmo........................................................................................................................... 21
3.3 Diagrama de flujo ............................................................................................................. 21
3.4 Código documentado ....................................................................................................... 26
3.5 Explicación ....................................................................................................................... 30
3.6 Corridas ............................................................................................................................ 32
3.7 Conclusión ....................................................................................................................... 35
4. Referencias ..................................................................................................................... 36
Programación orientada a objetos 04/10/2018

Objetivo

Dar a conocer la creación de tres versiones de un login, donde la primera versión cuenta con
todos los elementos necesarios principales como botones, espacios para ingresar usuario y
contraseña(campos de texto), imágenes y títulos que conforman la carcasa de un login básico,
también dar conocer el uso de eventos en botones esto ya en la versión 2 y por ultimo dar a
conocer más características para personalizar el login como por ejemplo modificarle el color
de fondo a los botones, al texto, a los paneles poder hacer acciones con los botones u otro
objeto esto en la versión 3.

Introducción

En este documento se mostrará la creación de tres versiones de un login donde la primera es


un login sin eventos de ningún tipo, la segunda versión ya cuenta con eventos en sus botones
y la tercera versión ya es un login personalizado aplicando lo aprendido de las versionas
anteriores, aquí se mostrara las tres versiones como sus códigos, diagramas de flujo delos
mismos, explicación de los códigos de las versiones, algoritmos de los códigos, corridas de los
programas, también conclusiones de las mismas y por último se dará a conocer algunas
referencias de información externa con respecto al tema.

Desarrollo
La mayoría de los programadores aprenden Java, sus primeros programas trabajan sin
intervención del usuario. Al aprender por primera vez la creación de interfaces de usuario en
Java, los programadores necesitan ajustar las estructuras de control dentro de sus
aplicaciones. Cuando una aplicación de Java con interfaz de usuario comienza su ejecución,
en el procesamiento inicial normalmente se construyen los diversos elementos dentro de la
interfaz de usuario, como botones y campos de texto, y luego se los presenta al usuario para
que éste pueda interactuar con ellos. Durante esta fase inicial de procesamiento los programas
también se pueden cargar con detectores de eventos, indicando a Java que debe "escuchar"
los eventos del usuario, como la interacción con los componentes de la interfaz.
Programación orientada a objetos 04/10/2018

1. Login visto en clase

1.1. Planteamiento
Crear un login con dos espacios uno para colocar usuario y otro para colocar las contraseña,
colocar dos botones en el login uno de aceptar y otro de cancelar, también colocar una imagen
de java y un título al login de “inicio de sesión” dentro del login, la distribución de los elementos
en la ventana de login deberá ser la imagen a la izquierda y los espacios(inputs) de usuario y
contraseña deberán ir a la derecha estos con sus indicadores de texto a la derecha es decir
para el espacio de usuario colocar un texto a la izquierda del mismo que indique que hay debe
ir ingresado el usuario y así para el espacio de la contraseña , tanto la imagen como los
espacios de usuario y contraseña deben ir al centro de la ventana de login, el titulo debe ir en
la parte superior(Norte) de la ventana y por último los botones deberán ir debajo(sur) de la
ventana.

1.2. Algoritmo
1. Inicio
2. Crear nuevo objeto de la clase Practica5 de nombre p con el constructor por defecto
3. Poner la posición de la ventana al centro
4. No permitir que se cambie el tamaño de la ventana v no cambie este fijo.
5. Poner el objeto v en modo visible
6. Fin

1.3 Diagrama de flujo


Diagrama del método main()

Diagrama de flujo del método especial constructor de la clase


Programación orientada a objetos 04/10/2018

Diagrama de flujo de método initComponents


Programación orientada a objetos 04/10/2018

1.4 Código documentado


Programación orientada a objetos 04/10/2018
Programación orientada a objetos 04/10/2018

1.5 Explicación
Primeramente, se crea la clase principal Practica5 dentro de ella, rápidamente se hace la
declaración de los atributos de la clase estos son clases en si también no son datos primitivos,
luego se declara el constructor por defecto este manda llamar al metodo initComponents que
es el encargado de inicializar los valores de los objetos o atributos, después se declara el
método initComponents dentro de este se crea el objeto de la clase JFrame de nombre v y
se inicializa el título con el texto "Loggin", luego se coloca una operación de cierre al objeto v
el cual al cerrar el JFrame v termina el programa total mente , posteriormente se le asigna un
tamaño al objeto v que en este caso es un JFrame(cuadro o ventana), a continuación se crea
dos objeto uno de la clase JPanel y otro de la clase JLabel el JPanel se asigna al atributo
panel y el JLabel a imagen, rápidamente se coloca una imagen a el label de nombre java-
logo.jpg y se mezcla al panel el objeto imagen que pertenece a la clase JLabel, en seguida se
crea un objeto de la clase JPanel de nombre panel1 y a este se le coloca un layaout de tipo
flowlayout al panel1 el cual ingresa los elementos en este mismo de forma de flujo un elemento
tras otro en la parte central del panel1, en seguida se crea un objeto de la clase JLabel de
nombre lblTitulo y se le pasa el valor que tendrá de texto por medio del constructor y se agrega
al panel1 el objeto lblTitulo, inmediatamente se crea un objeto de la clase JPanel y se asigna
al objeto antes creado de nombre panel2 y a este se le coloca un layaout de tipo flowlayout al
panel2 el cual ingresa los elementos en este mismo de forma de flujo un elemento tras otro
Programación orientada a objetos 04/10/2018

en la parte central del panel2, más tarde se crea un objeto de la clase JLabel y se asigna al
objeto antes creado de nombre lblUsuario este con su texto "usuario:" y se agrega al panel2 el
objeto lblUsuario, inmediatamente se crea un objeto de la clase JTextField y se asigna al objeto
antes creado de nombre tfUsuario y se agrega al panel2 el objeto tfUsuario, luego se crea un
objeto de la clase JLabel pasándole el valor al constructor "contraseña:" el cual se mostrar y
asigna al objeto antes creado de nombre lblPassword así mismo se agrega al panel2 el objeto
lblPassword, pronto se crea un objeto de la clase JPasswordField y se asigna al objeto antes
creado de nombre tfPassword y se agrega al panel2 el objeto tfPassword, posteriormente se
crea un objeto de la clase JPanel y se asigna al objeto antes creado de nombre panel3 y se
coloca un layaout de tipo flowlayout al panel3 el cual ingresa los elementos en este mismo de
forma de flujo un elemento tras otro en la parte central del panel3, pronto se crean dos objetos
de la clase JButton y estos se asigna a los objetos antes creados de nombres btnAceptar y
btnCancelar y a estos se les pasa por el constructor el texto que mostraran en su interior dichos
botones y luego se agregan los botones a l panel, a continuación se mezcla al objeto v de la
clase Jframe los paneles panel1,panel2, panel3 y panel usando BorderLayout que trabaja
sur,norte,centro,este y oste en la ventana(v) el panel1 se coloca al norte, el panel2 se coloca
al centro, panel3 se coloca} al sur y el panel al oeste, por último se declara el método principal
main donde se crea un objeto de la clase Pracatica5 de nombre p por medio de este
accederemos al objeto v(atributo) de la clase, primeramente se manda la ventana v al centro
de la pantalla, hacemos que el tamaño de la ventana v no se pueda modificar y hacemos
visible la ventana v.
Programación orientada a objetos 04/10/2018

1.6 Corridas
Programación orientada a objetos 04/10/2018

1.7 Conclusión
Los atributos de la clase principal no son tipos de datos primitivos son clases es decir que
clases pueden ser atributos de otra clase. Por otra parte, existen más variedades de layaouts
para repartir los elementos en un ventana aparte del FlowLayout existe BoxLayout, GridLayout,
BorderLayout, GridBagLayout, CardLayout y SpringLayout.
Programación orientada a objetos 04/10/2018

2. Login con eventos en botones

2.1 Planteamiento
Adiciónale eventos a los botones del login anterior a los botones Aceptar y cancelar, que al
presionar el botón aceptar muestre el usuario y contraseña colocados en los espacios de
texto correspondientes a usuario y password esto en un mensaje.

2.2 Algoritmo
1. Inicio
2. Crear nuevo objeto de la clase Practica5_ de nombre p con el constructor por defecto
3. Poner la posición de la ventana al centro
4. No permitir que se cambie el tamaño de la ventana v no cambie este fijo.
5. Poner el objeto v en modo visible
6. Fin

2.3 Diagramas de flujo

Diagrama del método main()

Diagrama de método actionPerformed()


Programación orientada a objetos 04/10/2018

Diagrama del método initComponents


Programación orientada a objetos 04/10/2018

2.4 Código documentado


Programación orientada a objetos 04/10/2018
Programación orientada a objetos 04/10/2018
Programación orientada a objetos 04/10/2018

2.5 Explicación
Primeramente, se crea la clase principal Practica5_ donde se implementa el interface
ActionListener dentro en la misma , rápidamente se hace la declaración de los atributos de la
clase estos son clases en si también no son datos primitivos estos de clases JPanel, JFrame,
JLabel, JTextField, JPasswordField y JButton, luego se declara el constructor por defecto
este manda llamar al método initComponents que es el encargado de inicializar los valores de
los objetos o atributos, después se declara el método initComponents dentro de este se crea
el objeto de la clase JFrame de nombre v y se inicializa el título con el texto "Loggin", luego
se coloca una operación de cierre al objeto v el cual al cerrar el JFrame v termina el programa
total mente , posteriormente se le asigna un tamaño al objeto v que en este caso es un
JFrame(cuadro o ventana), a continuación se crea dos objeto uno de la clase JPanel y otro
de la clase JLabel el JPanel se asigna al atributo panel y el JLabel a imagen, rápidamente se
coloca una imagen a el label de nombre java-logo.jpg y se mezcla al panel el objeto imagen
que pertenece a la clase JLabel, en seguida se crea un objeto de la clase JPanel de nombre
Programación orientada a objetos 04/10/2018

panel1 y a este se le coloca un layaout de tipo flowlayout al panel1 el cual ingresa los
elementos en este mismo de forma de flujo un elemento tras otro en la parte central del panel1,
en seguida se crea un objeto de la clase JLabel de nombre lblTitulo y se le pasa el valor que
tendrá de texto por medio del constructor y se agrega al panel1 el objeto lblTitulo,
inmediatamente se crea un objeto de la clase JPanel y se asigna al objeto antes creado de
nombre panel2 y a este se le coloca un layaout de tipo flowlayout al panel2 el cual ingresa los
elementos en este mismo de forma de flujo un elemento tras otro en la parte central del panel2,
más tarde se crea un objeto de la clase JLabel y se asigna al objeto antes creado de nombre
lblUsuario este con su texto "usuario:" y se agrega al panel2 el objeto lblUsuario,
inmediatamente se crea un objeto de la clase JTextField y se asigna al objeto antes creado de
nombre tfUsuario y se agrega al panel2 el objeto tfUsuario, luego se crea un objeto de la clase
JLabel pasándole el valor al constructor "contraseña:" el cual se mostrar y asigna al objeto
antes creado de nombre lblPassword así mismo se agrega al panel2 el objeto lblPassword,
pronto se crea un objeto de la clase JPasswordField y se asigna al objeto antes creado de
nombre tfPassword y se agrega al panel2 el objeto tfPassword, posteriormente se crea un
objeto de la clase JPanel y se asigna al objeto antes creado de nombre panel3 y se coloca un
layaout de tipo flowlayout al panel3 el cual ingresa los elementos en este mismo de forma de
flujo un elemento tras otro en la parte central del panel3, pronto se crean dos objetos de la
clase JButton y estos se asigna a los objetos antes creados de nombres btnAceptar y
btnCancelar y a estos se les pasa por el constructor el texto que mostraran en su interior dichos
botones , luego se agregan los botones a l panel3 y se mezcla una ActionListener a tfPassword
y tfUsuario, a continuación se mezcla al objeto v de la clase Jframe los paneles panel1,panel2,
panel3 y panel usando BorderLayout que trabaja sur,norte,centro,este y oste en la ventana(v)
el panel1 se coloca al norte, el panel2 se coloca al centro, panel3 se coloca} al sur y el panel
al oeste, luego se declara el método principal main donde se crea un objeto de la clase
Pracatica5_ de nombre p por medio de este accederemos al objeto v(atributo) de la clase,
primeramente se manda la ventana v al centro de la pantalla, hacemos que el tamaño de la
ventana v no se pueda modificar y hacemos visible la ventana v, Por ultimo declaramos el
método actionPerformed el cual se manda llamar cuando se detecta un evento en los botones,
dentro de esta método se obtiene lo que contiene tfUsuario y tfPassword y el valor de tfUsuario
se asigna a usu y el de tfPassword se signa a pas luego se verifica si se detecta el evento del
botón aceptar si es asi ejecuta el bloque if sino es asi ejecuta el bloque del else, donde el
bloque if despliega "El usuario: " +usu +"\ncon Password: " +pas +"\nHizo Click en Boton
Aceptar" como mensaje y pone el texto de tfUsuario y de tfPassword en null para que se borre
el contenido y el por último el bloque else hace lo mismo solo con la diferencia que el mensaje
que envía lo muestra seguido sin salto de línea.
Programación orientada a objetos 04/10/2018

2.6 Corridas
Programación orientada a objetos 04/10/2018
Programación orientada a objetos 04/10/2018

2.7 Conclusión
@override sobre escribe el método para hacer otra acción que nosotros le programemos o
codifiquemos, @Override se sitúa justo delante de un método y lo que indica es que ese
método está siendo sobrescrito. Pero ojo, el uso de esta anotación es opcional, la importancia
de colocar @override es indicar a los programadores que lean el código que ese método está
sobrescrito y por tanto proviene de una SuperClase o Interfaz.
Programación orientada a objetos 04/10/2018

3. Login personalizado

3.1. Planteamiento
Basarse en el login visto en clase y adicionarle más detalles investigando en libros o internet,
para crear un login con el logo de la universidad autónoma de san Luis potosí, colocar dos
espacios para ingresar usuario y contraseña a lado de estos colocar iconos que hagan relación
a ellos por ejemplo en el espacio de usuario un icono a la izquierda que se refiera a usuario y
lo mismo para el espacio de contraseña estos colocados al centro de la ventana del login, en
la parte norte colocar la imagen de la universidad y colocar dos botones uno de aceptar y el
otro de cancela en la parte sur de la ventana , también sustituir el icono por defecto de las
ventanas en java por el logo de la universidad, también colocarle de título a la ventana del login
“inicio de sesión”, hacer que compare datos usuario y contraseña, así si esto no son correctos
que arroje un mensaje en el panel central de “error de autentificación” en rojo así algo sencillo
y colocar colores característicos de la universidad al login en botones y paneles, y por ultimo
si los datos de autentificación son correctos abrir otra ventana y cerrar el login esta ventana
con título “E administración “ y mensaje de “ya puedes administrar” .

3.2 Algoritmo
1. Inicio
2. Crear nuevo objeto de la clase Práctica de nombre p con el constructor por defecto
3. Poner la posición de la ventana al centro
4. No permitir que se cambie el tamaño de la ventana v no cambie este fijo.
5. Poner el objeto v en modo visible
6. Fin

3.3 Diagrama de flujo

Diagrama de flujo del método especial constructor de la clase


Programación orientada a objetos 04/10/2018

Diagrama de flujo de método initComponents()


Programación orientada a objetos 04/10/2018
Programación orientada a objetos 04/10/2018

Diagrama de flujo de método main()

Diagrama de flujo de método cont()

Diagrama de flujo del Método actionPerformed(ActionEvent event)


Programación orientada a objetos 04/10/2018
Programación orientada a objetos 04/10/2018

3.4 Código documentado


Programación orientada a objetos 04/10/2018
Programación orientada a objetos 04/10/2018
Programación orientada a objetos 04/10/2018
Programación orientada a objetos 04/10/2018

3.5 Explicación
Primeramente, se crea la clase principal Practica donde se implementa el interface
ActionListener dentro en la misma , rápidamente se hace la declaración de los atributos de la
clase estos son clases en si también no son datos primitivos estos de clases JPanel, JFrame,
JLabel, JTextField, JPasswordField y JButton, luego se declara el constructor por defecto
este manda llamar al método initComponents que es el encargado de inicializar los valores de
los objetos o atributos, después se declara el método initComponents dentro de este se crea
el objeto de la clase JFrame de nombre v y se inicializa el título con el texto " Inicio de Sesión
", luego se coloca una operación de cierre al objeto v el cual al cerrar el JFrame v termina el
programa total mente , posteriormente se le asigna un tamaño al objeto v que en este caso es
un JFrame(cuadro o ventana), a continuación se crea un objeto de la clase Image al cual se
le asigna la imagen de nombre favicon16.png y se asigna a objeto icon y se coloca como icono
de la ventana v, en seguida se crea un objeto de la clase JPanel y se asigna a panel1 , luego
se le coloca un color de fondo al panel1 de color blanco y a este se le coloca un layaout de
tipo flowlayout al panel1 el cual ingresa los elementos en este mismo de forma de flujo un
elemento tras otro en la parte central del panel1, rápidamente se crea un objeto de la clase
JLabel con nombre lblTitulo y se le asigna un tamaño de ancho y alto al label, al instante se
crea un objeto de la clase ImageIcon con nombre log y se le asigna la imagen de nombre
Programación orientada a objetos 04/10/2018

"logo.jpg" y así mismo se crea otro objeto de la misma clase de nombre logo la cual obtiene la
imagen de log y adapta su tamaño al ancho y alto del objeto lblTitulo , después coloca la
imagen o el objeto lblTitulo y agrega al objeto lblTitulo la imagen logo modificada en tamaño,
más tarde se crea un objeto de la clase JPanel y se asigna a panel2 y se le modifica el color
de fondo a blanco, así al mismo panel se coloca un layaout de tipo flowlayout al panel2 el cual
ingresa los elementos en este mismo de forma de flujo un elemento tras otro en la parte central
del panel2, en seguida se crea un objeto de la clase Jlabel y se asigna a lblUsuario antes
declarado como atributo, también se coloca un tamaño a lblUsuario, al instante se crea un
objeto de la clase ImageIcon con nombre img y se le asigna la imagen de nombre "13.png" y
así mismo se crea otro objeto de la misma clase de nombre i la cual obtiene la imagen de img
y adapta su tamaño al ancho y largo del objeto lblUsuario, luego se coloca el objeto i a el objeto
lblUsuario y se mezcla al panel2 el objeto lblUuario, a continuación se crea un objeto de la
clase JTextField donde al constructor se le pasa el tamaño del largo del objeto en este caso
22, después se mezcla al panel2 el objeto ftUsuario, prontamente se crea un objeto de la
clase JPanel y se asigna a lblPssword y se le coloca un tamaño de ancho y alto, pronto se crea
un objeto de la clase ImageIcon con nombre img2 y se le asigna la imagen de nombre "22.jpg"
y así mismo se crea otro objeto de la misma clase de nombre i2 la cual obtiene la imagen de
img2 y adapta su tamaño al ancho y alto del objeto lblPassword y se coloca el objeto i2 a el
objeto lblPassword , también se mezcla al panel2 el lblPassword, en seguida se crea un
objeto de la clase JTextField el cual es tfPssword donde al constructor se le pasa el tamaño
del ancho del objeto a este mismo se le mezcla una ActionListener el cual detectara cuando
haya un intro en tfPassword y tfPassword se agrega al panel2, a continuación se crea un
objeto de la clase JLabel y se asigna a lberror antes declarado en la clase como atributo de la
clase JLabel a este label se le asigna el color de texto de color rojo y se mezcla a el panel2,
en seguida se crea un objeto de la clase JPanel que se asigna a panel3 ya antes declarado,
luego al panel3 se coloca un layaout de tipo flowlayout el cual ingresa los elementos en este
mismo de forma de flujo un elemento tras otro en la parte central del panel, posteriormente se
crean dos objetos de la clase JButton btnAceptar y btnCancelar y estos mismos se mezclan al
panel3 y se les asigna un color de fondo y se les mezcla un ActionListener el cual detecta un
evento en este caso son botones detectara cuando se haga clic en uno de ellos, después
mezcla al objeto v de la clase Jframe los paneles panel1,panel2 y panel3 usando BorderLayout
que trabaja sur,norte,centro,este y oste en el cuadro(v) el panel1 lo coloca al norte, el panel2
lo coloca al centro y panel3 lo coloca al sur y termina el metodo initComponents, luego se
declara la función principal main donde se crea un objeto de la clase Pracatica5_ de nombre
p por medio de este accederemos al objeto v(atributo) de la clase Practica5_, primeramente
se manda la ventana v al centro de la pantalla, en seguida hacemos que el tamaño de la
ventana v no se pueda modificar y por ultimo hacemos visible la ventana v y termina la función
main, pronto declaramos el método cont que recibe un parámetro y retorna un valor int se usa
para incrementar el atributo cont a un, por último se declara el método actionPerformed el cual
es llamado cuando se detecta un evento el código interno de este método obtiene los valores
de usuario y contraseña e identifica que elemento genero el evento si es el botón de cancelar
quien lo genero sale del login, pero si fue el botón de aceptar compara los valores de usuario
con la cadena "Josue” y la contraseña con la cadena "uaslpMx" y si esto son iguales abre otro
JFrame de nombre v2y cierra o destruye el objeto o ventana v y si las cadenas no coinciden
Programación orientada a objetos 04/10/2018

nada un mensaje de error el cual dice "Error de autentificación!" y limpia los campos de usuario
y contraseña , pero después de 6 intentos donde las cadenas no son iguales a los datos de los
campos de usuario y contraseña termina el programa esta cuenta la lleva con la función cont
que es la que compara el número de veces de intentos de logeo sean probado y si estos son
mayores a 5 termina el programa.

3.6 Corridas
Programación orientada a objetos 04/10/2018
Programación orientada a objetos 04/10/2018
Programación orientada a objetos 04/10/2018

3.7 Conclusión
Cuando usamos el addActionListener() de un componente, nos estamos
suscribiendo a la "acción típica" o que java considera más importante para ese
componente. Por ejemplo, la acción más típica de un JButton es pulsarlo. Para
un JTextField, java considera que es pulsar <INTRO> indicando que hemos
terminado de escribir el texto, para un JComboBox es seleccionar una opción,
etc. Cuando llamamos al addActionListener() de cualquiera de estos
componentes, nos estamos suscribiendo a la acción más "típica" de ese
componente.
Programación orientada a objetos 04/10/2018

4. Referencias

 https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id
=669:concepto-de-interface-y-herencia-multiple-en-java-implements-ejemplos-y-
diagramas-de-clases-cu00696b&catid=68&Itemid=188

 http://chuwiki.chuidiang.org/index.php?title=Uso_de_Layouts

 https://techlandia.com/evento-java-info_243555/

También podría gustarte