Introducción
Hoy veremos como crear un login moderno, trataré de hacer la explicación lo mas entendible que pueda, después veremos como agregar una barra de cargando o progreso, cuando el usuario ingrese correctamente los datos; les aseguro que se divertirán, ustedes ahora podrán poner en marcha su creactividad.
Para que nuestro formulario se vea modernista, le quitaremos los bordes que trae por defecto, si no sabes hacer esto, te recomiendo ver el tema anterior 😄, también les recuerdo que para hacer estos efectos, estaremos utilizando Guna Framework, algo que también ya vimos en anteriores capítulos.
Agregaremos el botón de salir, minimizar e iniciar sesión, tambien colocaremos dos cajas de textos donde el usuario podrá ingresar los datos necesarios, al botón de iniciar sesión le agregaremos unos efectos de movimiento al momento de presionar encima de el, tendrá un color en degrado y todos nuestros botones los dejaremos con bordes redondeados, por último agregaremos una casilla de verificación para que el usuario pueda visualizar la clave que ha ingresado en una caja de texto 😎.
Diseño del formulario:
Ustedes ya deben de saber a que me refiero con la asignación de propiedades en nuestros controles, esto lo explicamos en el anterior capítulo. De ahora en adelante solo les daré las propiedades que deben de asignarles a los controles; por su puesto, ustedes pueden darles las propiedades que más les agrade, recuerden que esto es solo es un ejemplo 🤗.
Formulario:
BackColor: DarkBlue
FormBorderStyle: None
StartPosition: CenterScreen
Opacity: 80%
Name: frmLogin
Panel (Barra de control)
BackColor: DodgerBlue
Name: pnlBarraControl
BorderColor: White
BorderStyle: Solid
BorderThickness: 1
Cajas de textos:
BackColor: DarkBlue
Cursor: IBeam
Name: txtUsuario y txtClave
ForeColor: Aqua
BorderColor: DongerBlue
BorderRadius: 8
BorderStyle: Solid
BorderThickness: 1
FillColor: DarkBlue
UseSystemPasswordChar (txtClave): True
Botón (iniciar sesión)
BackColor: DarkBlue
Name: btniniciarsesion
Text: Iniciar Sesión
Animated: True
BorderColor: DongerBlue
BorderRadius: 8
BorderStyle: Solid
BorderThickness: 1
FillColor: 0, 0, 192
FillColor2: MidnightBlue
Botón (salir)
BackColor: DongerBlue
Font: Segoe UI, 11.25pt, style=Bold
Name: btnSalir
Text: X
BorderColor: White
BorderRadius: 11
BorderStyle: Solid
BorderThickness: 1
FillColor: DeepSkyBlue
Botón (Minimizar)
BackColor: DongerBlue
Font: Segoe UI, 18pt, style=Bold
Name: btnMinimizar
Text: –
BorderColor: White
BorderRadius: 11
BorderStyle: Solid
BorderThickness: 1
FillColor: DeepSkyBlue
Casilla de verificación:
BackColor: Transparent
Cursor: Hand
Text: Mostrar clave
Name: cbxMostrarClave
Animated: True
Imágenes:
BackColor: Transparent
SizeMode: StretchImage
Programación de los elementos:
En el anterior capítulo ya les explique como programar la barra de control para mover, cerrar y minimizar el formulario, así que omitiremos esa parte, ahora nos enfocaremos en la casilla de verificación y en el botón de iniciar sesión.
✔Lo que le indicaremos a la casilla de “Mostrar clave” es que si el usuario palomea o checa el elemento, nos mostrará los caracteres que el usuario ha ingresado o que va ingresar, en caso contrario que muestre solo unos puntos en vez de los caracteres, facil verdad 🙃.
✔Por último al botón de “Iniciar sesión” le indicaremos que si el usuario ingresa en las cajas de textos la siguiente palabra: “admin”, le mostrará un mensaje que diga: “Bienvenido”, en caso contrario que muestre “Los datos introducidos no son correctos”.
