Este artículo pertenece a nuestra serie dedicada a UserForms. Si es el primero que has visto, te sugiero iniciar por la primera entrega: Introducción a UserForms
Artículo anterior: UserForms | Asignar Acciones a los Botones
En la presente entrega de nuestra serie de artículos dedicados a UserForms, daremos un gran paso en la dirección de lograr que nuestros formularios se vean como tales: incorporaremos cuadros de texto y etiquetas, para permitirle al usuario ingresar información que luego será procesada por el código de nuestro formulario.
Hemos dado pasos importantes hasta el momento, pero estoy seguro que el que viene te resultará más que interesante: un cuadro de texto permite lograr lo mismo que un InputBox en nuestro código, pero potenciado, ya que podremos insertar varios en la misma ventana y personalizarlos completamente.
Comenzaremos por crear 4 etiquetas, una debajo de la otra, de la misma manera que lo habíamos hecho con los botones de comando: seleccionamos la herramienta de la ventana de Cuadro de herramientas, y luego arrastramos entre dos esquinas para definir el tamaño y ubicación que tendrá (luego podremos moverlo y redimensionarlo):
A continuación, te muestro cómo las he insertado, de manera algo descuidada, para mostrarte luego cómo podemos organizarlas de manera sencilla, en lugar de poner un gran esfuerzo en que queden perfectas “a la primera vez”:
También, insertaremos 4 Cuadros de texto, al lado de cada etiqueta:
Formato del UserForm
Ahora bien, para comenzar a organizar los elementos del formulario, sigue el siguiente procedimiento:
- Selecciona todas las etiquetas
- En la ventana de Propiedades, localiza la llamada AutoSize, y cambia su valor por True. Esto eliminará los espacios sobrantes con respecto al tamaño del texto.
- Activa la Barra de Herramientas de Userform . En la barra superior, dirígete a Ver > Barras de herramientas > √ Userform
- Sobre la barra de herramientas recién activada (y con las etiquetas aún seleccionadas), localiza y selecciona el botón de Alinear > Derecha (puedes alinear a la izquierda o derecha según tus preferencias; al alinear a la derecha, el final de la etiqueta queda inmediatamente antes del cuadro de texto):
Verás cómo se acomodan las etiquetas contra un mismo margen. Puedes moverlas en bloque si así lo deseas:
Este mismo procedimiento puedes hacerlo desde Formato > Alinear > Derecha . De hecho, aún con todas las etiquetas seleccionadas, nos dirigiremos a Formato > Espacio vertical > Igualar, para que queden igualmente espaciadas:
- Ahora ordenaremos los cuadros de texto. Selecciona el que se encuentra en la parte superior (primero) y la etiqueta Nombre (después), y selecciona Alinear > Medio:
El orden es importante debido a que el último objeto seleccionado (que siempre aparecerá con puntos blancos alrededor, en lugar de negros), actúa de referencia. Así, el cuadro de texto se acomodará a la posición media de la etiqueta que ya hemos organizado, y no al revés.
- Hacemos lo mismo con el último cuadro de texto y la etiqueta Edad:
Así, hemos definido las posiciones extremas de los cuadros de texto, a través del que se encuentra en la parte superior, y el que se encuentra en la parte inferior.
- Procedemos ahora a seleccionarlos todos, y luego aplicamos Formato > Espacio Vertical > Igualar, y luego Formato > Alinear > Izquierda
- Finalmente, en la ventana de Propiedades de los cuadros de texto, localiza la propiedad Height, y establécela por el momento en 17 puntos (luego puedes ajustarla a tu preferencia, pero es una buena altura para empezar), y la propiedad Width, y establécela en 120 puntos de ancho
- Realiza ajustes sobre cualquiera de los pasos anteriores hasta lograr un diseño ordenado y que sea de tu agrado:
Puede parecer un proceso extenso, pero se vuelve ágil con la práctica y es sumamente preciso cuando manejamos muchos objetos, permitiéndote ahorrar mucho tiempo en el proceso.
Antes de terminar por esta entrega, les pondremos nombres a cada Cuadro de Texto y Etiqueta, a fines de reconocerlos fácilmente en el código, en lugar de hacerlo a través de números sin sentido.
Te recomiendo la siguiente estructura para los nombres de etiqueta: lbl + Descripción, por ejemplo: lblNombre, lblApellido, lblLegajo, lblEdad. De esta forma, sabemos que es un objeto Etiqueta (en inglés label, y abreviado lbl), y específicamente, cada una de ellas en nuestro formulario.
Recuerda que el procedimiento para cambiar el nombre del objeto es a través de la ventana de Propiedades > (Name):
Hacemos lo mismo para los Cuadros de Texto, con la estructura txt + Descripción: txtNombre, txtApellido, txtLegajo, txtEdad.
Y antes de finalizar por hoy, puedes darle a Ejecutar UserForm para ver cómo puedes ingresar texto en cada campo:
En la próxima entrega, vamos a hablar de cómo controlar los campos que puede ingresar el usuario, y realizar la carga de la información en una base de datos. ¡Te espero allí!
