Diseño moderno de un login

 A la hora de programar nuestra primer software es muy importante validar el ingreso del usuario, es por ello que explicaré los pasos detallados de como crear un formulario sencillo con datos fijos.

Diseño:

  
Tenemos que tener en cuenta que en este blog todavía no vamos a validar el ingreso a través de una base de datos, eso se hará más adelante .

Comenzamos creando un formulario al cual llamaremos "loginJava", le daremos un absolute Layout y añadiremos un panel color negro o el color de su preferencia.



Si queremos eliminar la barra de título debemos cambiar la propiedad "undecorated" a true.



A este panel agregamos los siguientes componentes: 3 JButton (uno servirá para el ingreso, para poder visualizar la contraseña y el ultimo para cerrar el login), 1 JtextField(para el usuario), 1 JpasswordField(para la contraseña),6 Jlabel ( 3 de ellos escribiremos:"Login", "Usuario" y "Contraseña", y los 3 restantes servirán para colocar las imágenes).



 Programaremos el botón salir, en el evento actionPerformed, pondremos:

    System.exit(0);

y en la parte de login para poner el subrayado hay varias opciones, pero la mas práctica es poner un borde al Jlabel.

Ahora faltan adicionar imágenes, para ello crearemos una carpeta en nuestro proyecto y pegamos todas las imágenes que necesitaremos.




Con las imágenes ya dentro de nuestro proyecto a cada label tendremos que ponerle la imágen como un icono:


 lblUsu.setIcon(new ImageIcon("imagenes/user.png"));

Por último tendremos que programar el botón que hace que la contraseña sea visible


Declaramos la variable global boolean "visible":

boolean visible=false;

Y dentro del evento action Performed del botón que esta señalado se programará el siguiente código:
 
 if(visible){
  btnVisible.setIcon(new ImageIcon("imagenes/visible.png"));
  jpass.setEchoChar('•');
  visible=false;
   
 }else{
   
  btnVisible.setIcon(new ImageIcon("imagenes/-visible.png"));
  jpass.setEchoChar((char)0);
  visible=true;
 }

Dentro de la propiedad echoChar podemos poner cualquier caracter que queramos, estos los podemos encontrar en el mapa de caracteres de window.

Programación:
 Ahora toca programar el botón ingresar, el siguiente código hará que pueda ingresar con el usuario "admin" y contraseña "123456", también validará que los campos no esten vacíos.

String usuario=txtUsuario.getText().trim();
  String password=String.valueOf(jpass.getPassword());
  if(!usuario.equals("") || !password.equals("")){
   if(usuario.equals("admin") && password.equals("123456") ){
    JOptionPane.showMessageDialog(this, "Bienvenido al sistema " + usuario ,"Mensaje de Bienvenida",1);
   }
   else{
    JOptionPane.showMessageDialog(this, "Usuario y/o contraseñas incorrecta","Error",0);
   } 
  }else{
   JOptionPane.showMessageDialog(this, "El campo usuario y contraseña son obligatorios","Error",0);
  }


Con esto ya se tiene las herramientas básicas para programar, el diseño ya depende de cada programador, aquí un ejemplo de un login similar a este:


Comentarios