Este es el contenido de esta segunda parte del Apéndice A del Curso Básico de Programación con Visual Basic
- Introducción
- Empezar con el IDE de VB
- Añadir controles al formulario
- Cambiar el tamaño y posición de los controles
- Añadir más controles y usar el diseñador para ajustar el tamaño y la posición
En esta segunda parte del Apéndice A del
Curso Básico, vamos a ver cómo añadir controles a nuestros formularios y cómo
configurar esos controles, cambiar los valores de las propiedades, etc.
Esto es algo que hace años tendría que haber hecho, lo sé, pero yo es que
antes era un poco más inocente que ahora, y pensaba que los lectores de este
curso se iban a tomar un poco de más interés en aprender estas cosas usando la
información (o documentación) que acompañaba al Visual Basic... y creo que
hace algún tiempo así era... antes la gente no se me quejaba tanto como
ahora... seguramente porque los lectores eran menos numerosos... y,
posiblemente, (Guille, creo que deberías decir
"presuntamente", para que nadie se sienta "acusado"), porque ahora la
gente tiene más oportunidad de "conseguir" gratuitamente el Visual Basic, (es
que hay "viejos VisualBasikeros" que son muy caritativos, no te creas
otra cosa), y es posible que no se acompañe "ningún" tipo de
documentación... Espero que nadie se de por aludido con el comentario
anterior, y si es así, echando mano del refranero: el que se rasca, es
porque algo le pica... (¡que malo soy!)
La cuestión es que, sea como sea, aquí están estos apéndices, los cuales
intentarán "ayudarte" en la medida de lo posible a que aprendas "mejor" este
querido, (al menos por mi), lenguaje de programación.
En este caso seguiremos usando el Visual
Basic 5.0 Control Creation Edition (VB5CCE para los amigos), ya que, al ser un
entorno (IDE) gratuito, todos tendréis la oportunidad de poder "jugar" con él.
En la primera parte de este Apéndice A te expliqué
cómo conseguirlo, cómo instalarlo y como configurar algunas de las opciones y
barras de herramientas, así que... si aún no te lo has leído, deberías hacerlo
antes de seguir.
Te recuerdo o aclaro que todo lo que voy a
explicar aquí, estará basado en el Visual Basic 5.0 Control Creation Edition,
pero también será válido para el Visual Basic 5.0 e incluso para el Visual
Basic 6.0, pero en algunos casos no será "tan evidente" para la versión 4.0,
aunque en estas fechas, esa versión ya es más difícil de encontrar, así que...
si tienes el VB4, intenta amoldarte a las explicaciones. Y si no tienes
ninguna de esas versiones, ya que trabajas con el Visual Basic de Office,
pues... bájate el VB5CCE y prueba con lo que aquí voy a explicar o bien,
intenta amoldarte a como el Office te presente el diseñador de formularios...
La cuestión es que si lo aquí dicho no se adapta al 100% a lo que tu tienes...
¡que te lo curres! Gracias.
Empezar con el IDE de VB: Configurar un formulario.
En cuanto iniciamos el Visual Basic, se nos presenta un cuadro de diálogo para que seleccionemos el tipo de proyecto que queremos crear, (para más detalles, ver Iniciar el VB5CCE), para este ejemplo, elegiremos un proyecto normal (Standard EXE).
Nota:
Si no se muestra el cuadro de diálogo de nuevo proyecto, puede ser que hayas marcado la casilla "Don't show this dialog in the future", lo cual viene a decir que no muestre ese cuadro de diálogo nunca más; si ese es tu caso, tendrás que crear un nuevo proyecto seleccionando New Project (Nuevo Proyecto) del menú File (Fichero) o bien pulsando la combinación de teclas Ctrl+N.
Al crear un nuevo proyecto de tipo EXE,
tendremos un formulario llamado Form1.
Por ahora vamos a dejar ese nombre para que sea más fácil de comprender todo
lo que voy a explicar.
Vamos a configurar el formulario para que sepas "adaptarlo" a tu gusto.
Para poder configurar el formulario,
tendremos que tenerlo a la vista.
Un formulario se compone de dos partes: Lo que mostrará y el código.
Para poder añadir controles al formulario o para cambiar la apariencia del
mismo, tendremos que tenerlo a la vista, es decir, tendremos que mostrar el
"diseñador de formularios".
Cuando queramos usar el diseñador de formularios, tendremos que seleccionar el
formulario de la ventana de proyectos y pulsar la combinación de teclas
Mayúsculas+F7 (Shift+F7) o bien pulsar en el icono con forma de formulario que
hay en la ventana de proyectos, (ver figura 1).
Figura 1
Para mostrar la ventana del código, podemos pulsar F7 o bien en el icono que está a la izquierda del que muestra el formulario, (ver figura 1)
Una vez que tenemos el formulario en modo de
diseño, podemos pulsar F4 para mostrar la ventana de propiedades.
En esta ventana (ver figura 2) se mostrarán las propiedades que podemos
cambiar mientras estamos "diseñando" el formulario, es decir, no se mostrarán
todas las propiedades, ya que algunas de ellas puede que no sean
"configurables" en tiempo de diseño, es decir, que no afecten al aspecto
visual.
También hay que tener en cuenta de que, (como comprobaremos en un momento), en
la ventana de propiedades se mostrarán las propiedades del "objeto" que esté
seleccionado. En este caso, se mostrará sin problemas las propiedades del
formulario por la sencilla razón de que no tenemos ningún otro "objeto" dentro
del formulario (ni en la aplicación).
Figura 2, Ventana de propiedades
Como podemos comprobar, la ventana de
propiedades está dividida en tres partes:
-La parte superior nos indica el "objeto" que tenemos seleccionado, en este
caso es el formulario. Podemos usar esa lista desplegable para seleccionar el
objeto que queremos configurar. Ahí se nos indica el nombre del objeto, el
cual estará en negrita, y el tipo de objeto se mostrará en letra normal.
-La parte del centro nos muestra las propiedades, en esa ventana tenemos dos
fichas (o solapas), para mostrar la información de forma alfabética (Alphabetic)
o bien por categorías (Categorized). En la columna de la izquierda está el
nombre de la propiedad y en la de la derecha está el valor.
-En la parte inferior tenemos la descripción de la propiedad que tenemos
actualmente seleccionada. En el caso de la figura 2, la propiedad seleccionada
es Caption y abajo nos dice (en inglés) que esa propiedad sirve para mostrar
el texto en la barra de título.
Si quisiéramos que en la barra de títulos del formulario se mostrara otra cosa distinta a lo que actualmente se muestra, simplemente tendríamos que escribir en la casilla que está a la derecha de la propiedad el texto que queremos mostrar.
Las propiedades más importantes (o las más usadas) del formulario las iremos viendo con algo de detalle en este o en otros "apéndices". Lo importante es que sepas cómo poder cambiar los valores y, si te atreves, que vayas probando por tu cuenta y riesgo... y como resulta que ya sabes cómo cambiar (y dónde) cambiar esos valores, ahora no tienes excusa.
Para muestra un botón: La propiedad AutoRedraw nos puede servir cuando queremos mostrar las pruebas hechas en las primeras entregas del curso, en las que teníamos que incluir "Show" al principio del evento Form_Load para que se pudiera ver lo que se "escribe" en el formulario. Si queremos darle un valor verdadero (True) a esa propiedad, simplemente seleccionaremos ese valor de la casilla que está a la derecha de la propiedad y asunto arreglado.
También decirte que en las versiones más
recientes de Visual Basic hay más propiedades que en las versiones anteriores,
por ejemplo, en la versión 5 tenemos algunas propiedades que no estaban
disponibles en la versión 4.
Tal es el caso de la propiedad que le indica a Windows dónde debe situar el
formulario cuando se muestre. Si buscamos la propiedad StartUpPosition,
tenemos unos valores a elegir, por defecto tendrá un valor de 3 - Windows
Default, lo cual quiere decir que será el Windows el que posicione el
formulario (o la ventana), pero si elegimos el valor 2 - CenterScreen,
el formulario se posicionará en el centro de la pantalla. Si seleccionamos el
valor 0 - Manual, el formulario se posicionará en la posición que
manualmente le indiquemos en las propiedades Left y Top. Por
último, si elegimos 1 - CeterOwner se centrará en el formulario que es
"el propietario", esto lo veremos cuando se trate el manejo de más de un
formulario.
Pero dejemos las propiedades del formulario, (en otra ocasión intentaremos hacer un repaso de algunas de ellas y el efecto que conseguiremos al aplicar distintos valores), y sigamos viendo otras cosas.
Añadir controles al formulario.
Esta es otra de las cosas que con más asiduidad haremos, ya que no es habitual que un formulario esté vacío, sino que tenga controles.
Los controles más usados son las etiquetas (Label), las cajas de texto (TextBox) y los botones (CommandButton), seguidos de las listas (ListBox), listas desplegables (ComboBox) (que algunos traducen también por cajas combinadas), los CheckBox y OptionBox (o RadioButton) y por último los controles que suelen hacer de contenedores de otros controles: los marcos (Frame) y los cuadros de imágenes (PictureBox).
Empecemos añadiendo una etiqueta, una caja de
textos y un botón.
Para añadir cualquier control al formulario, usaremos la barra de herramientas
que está en la parte izquierda del IDE de Visual Basic (ver figura 3).
Figura 3
Si posicionas el ratón encima de los iconos,
te mostrará un ToolTip (una cajita emergente) con el nombre del control.
La etiqueta es la A que hay en la segunda fila de controles, la caja de
textos es el que está a la derecha, también en la segunda fila y el botón es
el que está a la derecha en la tercera fila.
Para añadir un control, podemos hacer doble
pulsación (doble-click) sobre el elemento de la barra de herramientas y se
añadirá al formulario, posicionándose en el centro del mismo y teniendo el
tamaño predeterminado.
También podemos pulsar una vez, y a continuación "dibujarlo" en el formulario,
dándole el tamaño que queramos y posicionándolo también en el sitio que
queramos.
Por ahora vamos a elegir el primer método y después cambiaremos el tamaño y
posición.
Haz doble-click en la etiqueta, esto añadirá una etiqueta al formulario, el nombre de ese objeto se llamará Label1, para cambiar la posición de la etiqueta Label1, podemos seleccionarla en el formulario y moverla con el ratón. Vamos a situarla en la parte superior izquierda, para que deje el centro del formulario libre, ya que el resto de los controles se posicionarán en el mismo sitio y si dejamos la etiqueta ahí y añadimos nuevos controles, los nuevos controles ocultarán la etiqueta.
A continuación añadiremos una caja de textos, por tanto haz doble-click en el icono correspondiente y una vez que esté incluido en el formulario, lo posicionaremos en la parte superior, a la izquierda de la etiqueta. El nombre que tendrá esa caja de textos será Text1.
Por último añadiremos un botón, así que pulsa
en el icono correspondiente y déjalo donde lo ha posicionado el diseñador de
formularios, el nombre que tendrá será Command1.
El aspecto del formulario con estos controles será el mostrado en la figura 4.
Figura 4
Fíjate en los nombres de los controles, que son los mismos que los "textos" mostrados. El diseñador de formularios de Visual Basic siempre va nombrando los controles usando el mismo "algoritmo", (dicho así parece hasta algo importante, je, je), osea: usando un nombre "reducido" del tipo de control seguido de un número, el cual se va incrementando cada vez que añadimos un nuevo control del mismo tipo. Si añadimos una nueva etiqueta (control Label), ¿qué nombre tendría? (la respuesta dentro de un ratillo).
Cambiar el tamaño y posición de los controles.
Por regla general, no se suelen dejar los controles con el tamaño que el diseñador le ha dado al insertarlos en el formulario, por tanto, será algo habitual el que tengamos que cambiar el tamaño de los controles.
Ese cambio del tamaño de los controles podemos hacerlo de dos formas distintas:
- Usando el diseñador de formularios y el
ratón, para ello simplemente tendremos que seleccionar el control que
queramos redimensionar, mantener el ratón pulsado en el borde que nos
interese usar para cambiar el tamaño y ajustarlo a nuestro gusto.
Por ejemplo, para cambiar la altura del botón, pulsaremos en ese control, y desde el borde inferior iremos cambiando el tamaño, por ejemplo, para que tenga una altura de 375, ver la figura 5. Si queremos cambiar, en una sola acción, tanto el ancho como el alto, podemos hacerlo desde una de las esquinas del control, ver la figura 6.
Mientras se está cambiando el tamaño del control, se mostrará un "ToolTip" con el nuevo tamaño. - La segunda forma de cambiar el tamaño es usando la ventana de propiedades y usar las propiedades Height y Width, las cuales cambiarán respectivamente la altura y anchura del control.
 Figura 5 |
 Figura 6 |
Vamos a cambiar el tamaño de los controles
para que tengan los que aquí te indico:
La etiqueta (Label1), tendrá un tamaño de 1245 x 255 (ancho x alto)
La caja de textos (Text1), tendrá un tamaño de 2895 x 315
El botón (Command1), tendrá el tamaño 1245 x 375
Para cambiar la posición de los controles, como puedes imaginarte, también podemos hacerlo de dos formas, arrastrando el control hasta la nueva posición o bien asignando valores a las propiedades Left y Top, las cuales representarán los valores izquierdo y superior respectivamente.
Posiciona la etiqueta en la posición 180, 150 (izquierda, arriba), la caja de textos en la posición 1560, 120 y el botón déjalo en el mismo sitio que estaba: 1740, 1350.
Nota:
Como te comenté en la primera parte del Apéndice A, podemos cambiar el espaciado de puntos del grid (o rejilla) del diseñador de formularios, en aquella ocasión te dije que usaras 60 x 60, pero yo suelo usar 30 x 30, por tanto para que los controles se "puedan mover" en tiempo de diseño a las posiciones que te indico, es posible que tengas que cambiar esos valores, (ver la figura 4 de la primera parte del Apéndice A).
Todos estos cambios son en tiempo de diseño,
es decir, mientras estamos "diseñando" el formulario, ya que esos ajustes de
tamaño también podemos hacerlo en tiempo de ejecución, es decir, cuando
pulsemos F5 para ejecutar la aplicación.
El sitio habitual para hacer esos cambios en tiempo de ejecución es en el
evento Load del formulario o bien en el evento Resize del mismo. Aunque, la
verdad sea dicha, no es común cambiar el tamaño de los controles, salvo en
contadas ocasiones, por ejemplo, cuando queremos adaptarlos al nuevo tamaño
del formulario, etc., pero ese tema no lo vamos a ver, al menos ahora, ya que,
aunque sea de paso, se tocó en la entrega veintinueve.
Las propiedades Left, Top, Height y Width también las podemos usar en tiempo
de ejecución para asignar un nuevo valor en cualquiera de ellas, También
quiero "recordarte" que existe un método en casi todos los controles (incluso
en los formularios) que sirve para cambiar la posición y/o el tamaño de los
controles de una vez (es decir con una sola instrucción); ese método es:
Move y se usa de la siguiente forma:
<control>.Move Izquierda, Arriba, Ancho, Alto
El único valor requerido es el primero (posición izquierda), pero si se
especifica cualquiera de los otros tres, los anteriores también se deben
especificar; aunque los siguientes no tenemos la obligación de indicarlos,
además de que seguirán conservando los valores que ya tuvieran. Por ejemplo,
si sólo queremos cambiar la posición del control, podemos indicar los dos
primeros parámetros de ese procedimiento. Pero si además de la posición
queremos cambiar el alto, estamos obligados a indicar también el alto... ya
que no podemos dejar ese "hueco".
Como consejo, decirte que es más "rápido" usar el método Move que asignar
individualmente las propiedades.
Otra cosa, la posición siempre se considera relativa a la posición superior izquierda del formulario, la cual estará indicada por 0,0. El formulario a su vez estará posicionado relativamente a la pantalla (Screen), considerándose igualmente que la posición superior izquierda es la posición 0,0.
Añadir más controles y usar el diseñador para ajustar el tamaño y la posición.
Una vez que tenemos estos controles, pueden
ocurrir dos cosas, que lo dejemos como está, porque no necesitemos más
controles, o bien que queramos añadir más controles, y puede que hasta ocurra
que lo que necesitemos sea añadir más etiquetas y cajas de textos, los cuales
queremos que tengan el mismo tamaño que los que ya tenemos.
Esto es algo habitual y muy común, por ejemplo si queremos hacer un formulario
que pida datos al usuario.
Para ver cómo solucionar de una forma fácil y rápida esta situación, vamos a
añadir dos nuevas etiquetas y dos cajas de textos. ¡Espera! Tranqui... no
te precipites, que te voy a explicar un par de truquillos...
Esto podemos hacerlo como te he explicado hace unos párrafos, es decir, haciendo doble-click sobre el icono en la barra de herramientas, pero también podemos hacerlo de otra forma. Ahora veremos estos dos sistemas, para que practiques un poco y de paso te explico cómo usar algunas de las "facilidades" que nos da el diseñador de formularios.
Empecemos usando la forma "clásica", es decir
hacer doble-click sobre el icono de la barra de herramientas.
Añade una etiqueta y una caja de textos, estos dos controles estarán ahora
posicionados en el centro del formulario, si no has cambiado el botón del
sitio que estaba, la caja de textos habrá ocultado tanto la etiqueta como el
botón. No te preocupes, ya que esto es algo que puede ocurrir y siempre es
bueno saber cómo "salir del paso".
Así que, seleccionaremos la caja de textos, para seleccionarla, simplemente
pulsa UNA vez en ella, ahora haremos que tenga el mismo tamaño que la otra
caja. Mantén pulsada la tecla Control (Ctrl) y haz un click en la otra caja de
textos (la que tenemos en la parte de arriba), de esta forma tendremos las dos
cajas seleccionadas... (Guille, dile que ya puede soltar la tecla Control).
Ahora para cambiar el tamaño y hacer que las dos tengan el mismo tamaño,
podemos hacerlo de dos formas, (como viene siendo habitual), la primera, sería
mostrando la ventana de propiedades y asignado a las propiedades Height y
Width un valor, el cual se asignará a los controles que estén seleccionados,
(esta es la forma que yo lo he estado haciendo durante un montón de tiempo,
incluso trabajando con el VB5 y 6, la fuerza de la costumbre), pero hay otra
forma más "práctica" y es mediante el menú Format (Formato),
seleccionando el sub-menú Make Same Size (hacer del mismo tamaño), el
cual a su vez nos mostrará tres opciones: Width (ancho), Height
(alto), Both (ambos), por tanto seleccionaremos la última: Both, de
forma que se hagan iguales tanto en altura como en anchura, ver la figura 7.
Figura 7, El menú Format
De ese mismo menú Format, podemos
seleccionar Align (alinear) para que estén alineados a la izquierda,
por tanto, selecciona la opción Lefts de Format>Align, (se supone que
los dos controles siguen estando seleccionados).
Otra cosa que podemos hacer es pegar el segundo control al primero, de forma
que estén "juntitos", pero no revueltos, para ello, selecciona Format>Vertical
Spacing>Remove y los dos controles estarán juntos, uno debajo de otro. Por
ahora vamos a dejar los controles "pegados".
Nota:
Decirte que cuando seleccionamos controles para usar las opciones del menú Format, el último que se haya seleccionado será el que "tenga el mando" y el resto se adaptará a ese último control seleccionado.
Una vez que hemos cambiado el segundo textbox de sitio, en el centro del formulario tendremos el botón y "debajo" estará la etiqueta, como resulta que la etiqueta es más alta que el botón, debajo del botón sobresaldrá la etiqueta, así que, podemos seleccionarla, pulsar la tecla Control y pulsar sobre la otra etiqueta y haremos lo mismo que con la caja de textos, Format>Make Sime Size>Both y a continuación Format>Align>Lefts y por último: Format>Vertical Spacing>Remove.
Truco:
También puedes seleccionar esa etiqueta usando la ventana de propiedades, de la lista desplegable, selecciona Label2 y ahora pulsa la tecla Control, etc., es decir, si no puedes seleccionarla en el formulario, porque esté oculta, por ejemplo, siempre nos queda el recurso de seleccionarla desde la ventana de propiedades.
Ahora tendremos las dos etiquetas y las dos cajas de textos del mismo tamaño y con la misma posición izquierda, aunque demasiado pegados con sus compañeros, así que ahora, manualmente, vamos a cambiar la posición. Baja un poquito la segunda caja de textos y posiciona la etiqueta 30 puntos más bajo que la caja de textos, (que es una distancia "conveniente"), es decir si el valor de la propiedad Top de la segunda caja de textos (Text2) tiene un valor de 510, la segunda etiqueta (Label2) debería tener 540.
Ahora vamos a añadir una nueva etiqueta y una
caja de textos, pero usando otro "truco".
En este caso, también queremos que tanto la etiqueta como la caja de textos
tengan el mismo tamaño que las dos últimas que acabamos de añadir, por tanto,
selecciona la etiqueta y la caja de textos que está a su derecha; ya sabes
cómo hacerlo: selecciona la etiqueta y manteniendo pulsada la tecla Control,
pulsa en la caja de texto, aunque también puedes hacerlo de otra forma:
primero pulsa en cualquier parte del formulario para quitar cualquier
selección que hubiera, a continuación, con el ratón, selecciona la etiqueta y
la caja de textos, (de la misma forma que seleccionarías varios objetos en
cualquier aplicación, incluso en el explorador de Windows, ver la figura 8)
Figura 8
Una vez que tenemos los dos controles
seleccionados, copiaremos los dos controles, bien mediante el menú Edit>Copy,
bien mediante el menú contextual (pulsando con el botón secundario del ratón)
y seleccionando Copy (Copiar).
Ahora vamos a pegar lo que hemos copiado, ya sabrás cómo... (ver la figura 9)
Figura 9
Al pulsar en pegar, se nos mostrará un cuadro
de diálogo preguntándonos si queremos crear un array de controles, (ver la
figura 10), pulsa en el botón NO, ya que no queremos crear ningún array de
controles. Primero te preguntará por si quieres crear el array de Label2 y
después de Text2 (aunque puede que el orden sea al revés, pero eso no es
importante).
El tema de los arrays de controles, lo vimos en la
segunda parte de la entrega 11.
Figura 10
Esto hará que se "peguen" dos nuevos controles, los cuales tendrán el mismo tamaño que los copiados, incluso estarán posicionados "relativamente" a la misma distancia, pero se pegarán en la parte superior del formulario, como estarán los dos seleccionados, podemos arrastrarlos hasta que estén en la posición que queramos, en este caso, los posicionaremos debajo de los anteriores. Si necesitas ajustar las posiciones, ya sabes que puedes recurrir al menú Format y posicionarlos correctamente.
Un detalle a tener en cuenta, es que los controles tendrán como nombre Label3 y Text3, pero mostrará el mismo "texto" que los dos que se usaron para la copia. Para cambiar el texto mostrado, tendrás que asignar un valor a la propiedad Caption de la etiqueta y para cambiar el texto mostrado en la caja de textos, tendrás que cambiar la propiedad Text.
Nota:
Como puede ser que te haya ocurrido, sobre todo si no tienes mucha práctica con el ratón o bien porque tu ratón sea muy sensible, es posible que al "intentar" hacer un click en un control, realmente hayas hecho un doble-click, si es eso lo que te ha ocurrido, verás que se muestra la ventana de código con el evento "predeterminado" de ese control, no te preocupes, simplemente cierra la ventana de código y vuelve a intentarlo.
Ahora ya sabes dónde está el menú Format, así que... juega un poquito con las distintas opciones y practica, por ejemplo centrando los controles en el formulario, etc.
Ahora que estás entretenido "jugueteando" con las opciones del menú Format, vamos a dejar aquí esta segunda parte del Apéndice A, entre otras cosas, porque te he explicado lo que quería explicarte: cómo agregar controles a un formulario, poder cambiarle el tamaño y posición, así como explicarte cómo cambiar otras propiedades... además de que ya se ha hecho un poquito larga... (je, je... es una excusa como otra cualquiera).
En otra ocasión veremos más cosillas que podemos hacer con el IDE de Visual Basic, así como otras cosas relacionadas con los controles y formularios.
Espero que estos apéndices vayan rellenando
las lagunas que se hayan quedado en las entregas "normales".
No te voy a adelantar más cosas que contendrán estos apéndices, pero si te
diré que no se quedarán en cosas relacionadas con el IDE (entorno de
desarrollo), pero... como siempre, tendrás que esperar para poder saber de qué
tratarán... mientras tanto, sigue practicando y leyendo cosas sobre el Visual
Basic.
Nos vemos.
Guillermo
