Microsoft Visual Studio 6.0 Prof. José Moscoso/ Prof. Alexis Barreto TEMA 11: INTRODUCCIÓN A MICROSOFT VISUAL STUDIO Para comenzar a estudiar cualquier programa, lo mejor es empezar por el análisis de la interfaz; que es la pantalla con la cual nos encontramos y con la que nos tendremos que familiarizar para poder trabajar cómoda y rápidamente. Con más razón si se trata de VB (Visual Basic), ya que no es una aplicación, sino un Lenguaje de Programación generador de Aplicaciones. Al comenzar VB le presenta una ventana como ésta donde se distinguen tres pestañas y varias opciones: Las solapas dicen: 1) Nuevo, que es la opción que utilizaremos y por lo tanto debemos pulsar el botón abrir. – 2) Existente, sirve para abrir un proyecto que ya tenemos guardado con anterioridad. – 3) Reciente, esta opción es parecida a la anterior pero nos muestra los últimos proyectos con los que hemos estado trabajando. – Por lo tanto hacemos clic en el botón Nuevo, las otras opciones las explicaremos más adelante. - Fig. 1 Ahora sí nos encontramos con la Interfaz: Esta pantalla presenta como todas las aplicaciones de Windows la Barra de título, la Barra de menús, que se describirá con posterioridad, pero damos por supuesto que Ud. ya se encuentra familiarizado con las aplicaciones Windows como ser Word (Procesador de textos), el Excel (Planilla de cálculos), etc. 1 3 6 4 Por lo tanto, describiremos en principio las otras partes que hemos procedido a numerar en color rojo para identificarlas mejor. 2 5 - Fig. 2 El nro. 1 es la Barra de Herramientas Estándar, el nro. 2 es la Caja de Herramientas, el nro. 3 es el Explorador de Proyectos, el nro. 4 es la Ventana de Propiedades, el nro. 5 la Ventana de posición del Formulario y el nro. 6 es la Ventana de diseño de Formularios, en donde diseñaremos las Aplicaciones. – Por lo tanto daremos una breve descripción de cada uno de ellos, comenzando por diferenciar la Barra de Herramientas de la Caja de Herramientas. 1 La Barra de Herramientas Estándar: Agregar Proyecto Estándar EXE Lista despegable del Asistente de Proyectos Pág. 1 Microsoft Visual Studio 6.0 Prof. José Moscoso/ Prof. Alexis Barreto Agregar Form Lista desplegable agregar módulo Editor de menús Abrir Proyecto Guardar Proyecto Cortar Copiar Pegar Buscar - Fig. 3 Deshacer Comenzar Interrumpir Finalizar Rehacer Ventana del Explorador de Proyectos Ventana de Propiedades Ventana de Diseño de Formularios Examinador de Objetos Caja de Herramientas 2 La Caja de Herramientas: Con estas herramientas uno crea controles para agregar funcionalidad a sus programas, son muy fáciles de usar. Simplemente se hace un doble clic sobre la herramienta seleccionada y luego, sobre el formulario, al cambiar el puntero de Mouse (), hacemos clic, y lo arrastramos, dibujándolo automáticamente sobre el formulario. Después podrá cambiarlos al tamaño que desee. Se lo iremos explicando a medida que vaya realizando las distintas aplicaciones que le proponemos a lo largo del presente trabajo. Los nombres de cada herramienta los puede leer dejando el puntero del Mouse sobre la herramienta, y en ese momento aparecerá un mensaje. Le indicamos los nombres de cada una de las herramientas que aparecen por defecto: Cerrar la Caja (1) Puntero (2) PictureBox (3) Label (4) TextBox (5) Frame (6) CommandButton (7) CheckBox (8) OptionButton (9) ComboBox (10) ListBox (11) HScrollBar (12) VScrollBar (13) Timer (14) DriveListBox (15) DirListBox (16) FileListBox (17) Shape (18) Line (19) Image (20)Data (21) OLE - Fig. 4 3 El Explorador de Proyectos: (a) (b) Pág. 2 Microsoft Visual Studio 6.0 Prof. José Moscoso/ Prof. Alexis Barreto El explorador de proyectos permite observar cada uno de los formularios que hayamos creado, lo mismo que los módulos que podemos agregarle al mismo. En el presente ejemplo se puede observar que nos encontramos en el Proyecto número 1 y que cuenta con un solo Formulario. En su parte superior presenta dos botones de suma importancia, el primero, al pulsarlo nos muestra la Ventana de Código (a) y el segundo nos muestra la Ventana de Diseño del Formulario (b). – - Fig. 5 4 La Ventana de Propiedades: Esta ventana es una de las más importantes, se compone de la Ventana de Controles: A través de la cual uno puede elegir el control sobre el que se trabajará u observar si en realidad estamos operando sobre el control deseado. Luego se pueden observar dos solapas; Alfabética y Por Categorías: Esto en realidad es una cuestión de preferencias, en la forma de manejarnos para seleccionar las distintas modificaciones a realizar sobre las Propiedades También se pueden modificar sobre la parte derecha de la ventana los distintos Valores Por último, en la parte inferior de la Ventana se puede observar una ayuda en castellano (para los que tienen VB 6.0 en español) sobre la propiedad seleccionada, en este caso nos muestra el Caption (Título). – - Fig. 6 – 5 Ventana de Posición del Formulario: Esta ventana nos muestra la posición exacta donde aparecerá nuestro formulario, dentro de la pantalla. Si nos dirigimos hacia él con el Mouse, automáticamente este se modifica a “cuatro flechas” y podemos arrastrar el formulario al sector exacto de la pantalla en donde nos interesa que aparezca. Como se muestra en el siguiente ejemplo: - Fig. 7 - Pág. 3 Microsoft Visual Studio 6.0 6 Prof. José Moscoso/ Prof. Alexis Barreto Ventana de Diseño del Formulario: Sobre esta ventana es donde trabajaremos permanentemente para crear la interfaz de nuestro programa. El Formulario es un objeto contenedor de otros objetos. Sobre él y a través de la caja de Herramientas, colocaremos los distintos controles, que se llaman Objetos. Al hacer doble clic sobre el formulario se pasa a otra Ventana, que se denomina Ventana de Código, en la cual se escriben las sentencias necesarias (Código), para que funcione nuestra aplicación. – - Fig. 8 - La Ventana de Código: (a) Al hacer doble clic sobre el Formulario, o sobre cualquier Objeto que esté contenido dentro del Formulario, entramos automáticamente en esta Ventana. La misma presenta en la parte superior dos Cajas Desplegables: (a) Nos muestra todos los objetos que tenemos creados dentro de nuestro proyecto. (b) Muestra todos los eventos posibles para cada uno de los objetos. Por último podemos observar donde escribiremos nuestras sentencias de código (c). – (b) (c) - Fig. 9 - Comencemos a realizar nuestro primer diseño: Iniciamos la aplicación de VB, al hacerlo aparecerá la Ventana con las tres solapas (Fig.1), hacemos clic en el botón Nuevo, aparece la Interfaz explicada en la primera página (Fig.2) y comenzamos a trabajar: 1) Nos dirigimos con el puntero de mouse a la Caja de Herramientas (Fig.4), nos ubicamos sobre la herramienta (3) Label “hundida” , hacemos un clic sobre ella para elegirla y quedará como con un gris más claro. 2) En este momento podemos elegir entre dos métodos para crear el objeto: a) Hacemos doble clic sobre la misma, y automáticamente aparecerá la misma en el centro del Formulario. b) Dirigimos el puntero del mouse hacia el Formulario (sin arrastrarlo es decir, sin mantener el botón izquierdo presionado), veremos que el puntero al estar sobre el Formulario cambiara a una cruz, nos dirigimos con la misma, al sector donde deseamos ubicar la label y en ese momento hacemos clic sobre el formulario y ahora sí arrastraremos el puntero manteniendo el botón izquierdo oprimido e iremos viendo una estela de tipo rectangular que se va agrandando a medida que arrastramos el puntero. Hasta soltar el botón izquierdo, y en ese momento queda definida la label, como se ve en siguiente ejemplo: Pág. 4 Microsoft Visual Studio 6.0 Prof. José Moscoso/ Prof. Alexis Barreto Con la Caja de Herramientas, hemos creado nuestro primer objeto, que se llama Label1. Podemos observar que en la misma aparecen unos cuadrados azules, que se denominan nodos, estos sirven para redimensionar el objeto, al acercar el puntero del mouse sobre un nodo, el puntero se modifica a una doble flecha y en ese momento “arrastramos”, (manteniendo el botón izquierdo presionado). Pruebe estirar la label, para alargarla hacia la derecha e izquierda del formulario, para que quede de la siguiente forma: - Fig. 10 - Puede observar que además de estirar la label, la hemos ubicado prácticamente debajo de la barra de título del formulario, esto se realiza, ubicando el puntero del mouse en el centro del objeto y arrastrando hacia la posición deseada. - Fig. 11 - HERRAMIENTAS, OBJETOS, PROPIEDADES Y VALORES: Con la herramienta seleccionada dentro de la Caja de Herramientas, hemos creado un Objeto, en este caso el objeto se llama Label1, y posee una serie de propiedades y esas propiedades tienen valores, esto quedará más claro con un ejemplo: “Con las herramientas adecuadas hemos creado un automóvil, este auto es un objeto, este objeto tiene una serie de propiedades como ser la marca del mismo, la cantidad de puertas, su tamaño, su carburador, su color, etc. pero además también tiene una serie de valores, esto significa, que el carburador tiene un código para determinar el calibre del paso de la nafta o en forma mucho más sencilla que el color del mismo está determinado por otro código especial que determina exactamente su tipo”. Por lo tanto y para continuar con nuestra aplicación nos dirigimos a la Ventana de Propiedades (Fig. 2 punto 4). Podemos ver que la misma se encuentra dividida como explicamos (a) anteriormente; observe que al crear la label1, automáticamente, aparece su nombre en la Ventana de Controles (a), si analiza la figura 2, lo que aparecía en forma automática era el nombre de Form1, que era el único objeto que existía. Dentro del sector izquierdo se encuentran las propiedades, una de ellas dice Caption (b), que significa Título y está resaltado en azul todo ese sector del renglón. Hacemos Doble Clic sobre el color (b) azul de Caption y automáticamente nos habilita el sector derecho (c), (c) al ponerse de ese mismo color; escribimos directamente: Bienvenidos alumnos de Visual Basic. Si observa el Formulario, vera que en lugar de Label1 apareció lo que Ud. escribió. SEGUIMOS TRABAJANDO CON PROPIEDADES Y VALORES: Pág. 5 Microsoft Visual Studio 6.0 Prof. José Moscoso/ Prof. Alexis Barreto Utilizando la barra de desplazamiento y haciendo doble clic sobre las propiedades que mencionamos a continuación, modifique los valores de acuerdo a la siguiente lista: PROPIEDAD VALOR 1) Alignment 2) BackColor 3) BorderStyle 2 – Center Blanco 1 – Fixed Single Fuente: Arial Estilo: Negrita Tamaño: 14 Rojo False 4) Font 5) ForeColor 6) Visible 1) Alignment: Nos dirigimos con el puntero del mouse, hacia la propiedad Alignment, que significa alineación, hacemos clic sobre ella, el fondo del renglón se transforma en azul y aparece la flecha de opciones, como muestra el siguiente ejemplo: La opción por defecto como puede observar es 0 – Left Justify (Justificado a la izquierda), pero como deseamos alinearlo al centro debemos hacer clic sobre la flecha que mostrará un menú desplegable: Hacemos clic en Center y quedará seleccionado. De esta manera hay que proceder con la mayoría de las otras opciones, para modificar los valores de las distintas propiedades. – 2) BackColor: Significa color de fondo, y de la misma manera, como lo explicamos en el punto 1), nos dirigimos con el puntero del mouse a la propiedad BackColor; en este caso, al hacer click sobre la flecha nos mostrará un cuadro de opciones que muestra dos solapas. a) La solapa Sistema, sirve para modificar los colores predeterminados por el Sistema Windows que posee el usuario. Por una cuestión de respeto de gustos es aconsejable no intentar ningún cambio en la misma. b) La solapa Paleta, es la que deberemos modificar, por lo tanto, se hace clic sobre la misma y aparecerá la paleta de colores; elegimos en este caso, el color blanco haciendo clic sobre el mismo, y nuestra label1 se verá como en el ejemplo: Título de la label1 centrado y color de fondo blanco Pág. 6 Microsoft Visual Studio 6.0 Prof. José Moscoso/ Prof. Alexis Barreto 3) BorderStyle: Significa estilo de borde, como se puede ver el label1 ha quedado con el borde totalmente plano, si queremos darle profundidad, como ya sabe hacemos clic sobre borderstyle, luego sobre la flecha de opción y pulsamos sobre el valor 1 – Fixed Single: 4) Font: Significa Fuente, la buscamos a través de la barra de desplazamiento, en las propiedades, pulsamos sobre ella y veremos que en vez de la flecha de opciones nos aparecen tres puntos, lo que siempre indica: distintas opciones, pulsamos sobre ella y veremos: Con las barras de desplazamiento elegimos en Fuente: Arial (Hacemos clic sobre la misma). En Estilo: Negrita y en Tamaño: 14. Luego hacemos clic sobre el botón aceptar. 5) ForeColor: Sirve para cambiar el color de la letra, en nuestro caso la pondremos en color rojo. Para ello buscamos con la barra de desplazamiento esta propiedad y aparecerá como en el caso de BackColor las mismas pantallas, elegimos el color haciendo clic. 6) Visible: Elegimos esta propiedad y el valor lo modificamos por False.- Posibles errores: 1) Es muy probable que la label1 haya quedado gris y el formulario de color blanco.2) Que la Bienvenida haya quedado colocada en la barra de título del formulario. 3) Que una parte del mensaje no se vea.El primero y segundo caso se produjeron porque en algún momento, sin querer se hizo un clic sobre el Formulario, y luego modificó los valores de las propiedades del mismo, pero no del label. – Pág. 7 Microsoft Visual Studio 6.0 Prof. José Moscoso/ Prof. Alexis Barreto Para evitar que esto se produzca, tome por costumbre antes de modificar el valor de una propiedad, tiene que observar en la Ventana de Propiedades cual es el nombre del control seleccionado; otra forma es mirar sobre el formulario para ver, donde están colocados los nodos. Mal Bien El tercer caso es el más fácil de corregir, lo único que debe hacer es colocar el puntero del mouse sobre el nodo inferior de la label y estirarlo, arrastrando hacia abajo, hasta ver todo el título. Si cometió el error 1) ó 2) le sugerimos que reinicie, el ejercicio, para ello diríjase con el puntero del mouse hacia la Barra de Menús haga clic sobre Archivo, luego haga clic sobre Nuevo Proyecto, le aparecerá una ventana como la siguiente, la cual le dice si quiere guardar los Cambios, le indica que no y abre un nuevo proyecto.- Si no tuvo problemas, realmente lo felicitamos y puede continuar con la segunda parte de su proyecto, que consistirá en agregar dos botones de opción. Pág. 8 Microsoft Visual Studio 6.0 Prof. José Moscoso/ Prof. Alexis Barreto 1) Para ello seleccione con un clic sobre el botón (nro. 6) CommandButton, de la Caja de Herramientas, luego haciendo un doble clic sobre el mismo botón seleccionado, automáticamente le aparecerá en el centro de su formulario y entonces lo arrastra hasta la posición inferior derecha, como muestra el ejemplo: 2) En la ventana de propiedades, hace clic sobre Caption (título) y en el sector de Valores escribe Salir, observando la ventana de Propiedades, en la cual debe aparecer el nombre del objeto sobre el que estamos trabajando, en este caso Command1. Nos dirigimos nuevamente con el cursor hacia el botón que hemos creado en el formulario y hacemos doble clic sobre el mismo para pasar a la ventana de código y escribimos la sentencia End, esta instrucción sirve para cerrar nuestro proyecto. Ventana de propiedades Valor: Salir En la figura de la página anterior sobre la ventana del explorador de proyectos dibujamos un círculo rojo sobre dos iconos de suma importancia: 1) Ventana de Código 2) Ventana del Formulario Al hacer clic sobre el icono (1) que parece un papel escrito, nos muestra la ventana de código, en cambio al hacer clic sobre el otro icono (2) nos muestra el formulario, sobre el cual estamos trabajando. Por lo tanto hacemos clic sobre el icono del formulario para verlo nuevamente y procedemos a ejecutar nuestro proyecto, para ello hacemos clic sobre el icono de comenzar de la barra de herramientas, tal cual se muestra en el ejemplo: Pág. 9 Microsoft Visual Studio 6.0 Prof. José Moscoso/ Prof. Alexis Barreto Por favor no se aterrorice, ya que lo único que vera es el Formulario con el botón de Salir, la Label1 con el mensaje de Bienvenida, no se la puede ver, debido a que en la propiedad Visible de la Label1, el valor que se le dimos fue: False. Para volver a nuestro proyecto, hagamos un clic sobre el botón Salir, en caso de que no funcione haga clic en botón de la barra de herramientas de finalizar y verifique el código si está bien: Viendo nuevamente la ventana del Formulario, agregaremos un nuevo CommandButton, como lo describimos anteriormente y lo ubicamos en el sector inferior izquierdo. Sobre la propiedad Caption hacemos clic y escribimos: Comenzar. Hacemos doble clic sobre el botón de Comenzar y pasamos a la ventana de Código, en ella escribimos: Label1.Visible = True Inicie el Programa, haga clic sobre el botón de Comenzar y mágicamente aparecerá el mensaje de Bienvenida; haga clic sobre el botón Salir. Si está todo bien, en la barra de herramientas haga clic en el icono de Guardar y grabe su programa, con el nombre de Bienvenida. Atención: Al salvar su proyecto VB, primero graba el nombre del Proyecto y luego le pide el nombre para el Formulario (ambos nombres pueden ser iguales). – Pág. 10