En este capítulo veremos todas las partes en que se divide el Entorno de Desarrollo Integrado o, a partir de ahora IDE. Si conocemos bien el entorno sabremos por un lado la ayuda que nos ofrece al escribir código y por otro conocer las herramientas de apoyo de que dispone.

Parece que era obligatorio entre los programas de desarrollo que proporcionaran un buen IDE para desarrollar las aplicaciones, pero no, mas bien ofrecían algunas ayudas pero pocas. Con .NET por fin tenemos a nuestra disposición un potente IDE que nos va a ofrecer multitud de herramientas para el desarrollo y la depuración de programas. Los que vengan de Visual Basic 6 se verán un poco desorientados por este nuevo IDE pero sólo es cuestión de tiempo acomodarse. En poco tiempo obtendréis mejores resultados que con el anterior IDE. Es mas, si utilizáis VB6 dentro de un tiempo seguro que pensáis "cómo se nota que es antiguo, ¡vaya IDE mas limitado!". En fin sigamos... lejos han quedado los días en que se programaba de forma artesanal: se utilizaba un editor de texto tipo Bloc de notas (Notepad) y luego se iba al compilador para crear el programa. En mis tiempos (turbo pascal 3.0) se utilizaba un mínimo editor tipo WordStar sin herramientas de ayuda, depuración, ni trazas de programas. Ahora las cosas son mas fáciles.

Hasta hace muy poco los lenguajes de Microsoft tenían IDE's diferentes. De tal forma que si un programador quería hacer sus pinitos con otro lenguaje, aunque fuese de Microsoft, tenía que aprender un nuevo IDE con todo en sitios diferentes. Ahora no, con .NET llegamos a la total integración: por fin se dispone de un IDE común.

Ahora sólo hay que iniciar Visual Studio .NET y elegir el lenguaje con el que vamos a trabajar. Además al ser .NET Framework multilenguaje podemos añadir lenguajes de terceros a este entorno y facilitarnos de esta coherencia. Es habitual en ingeniería que se incorporen kits de desarrollo de determinadas máquinas y que tengan su propio lenguaje y entorno IDE. Si cumplen con el entorno .NET Framework podemos integrarlo en nuestro IDE. Como en nuestra instalación sólo hemos incluido Visual Basic .NET sólo nos mostrará proyecto para este lenguaje.

Repitamos otra vez el inicio de una aplicación para ver los elementos de esta primera pantalla:

Veamos que herramientas mas importantes tenemos en pantalla:

• Cuadro de herramientas. Disponemos de cuadros de herramientas que puedes ver a la izquierda agrupados en secciones que nos ofrecen distintas funciones. De momento dejamos las predeterminadas. Explóralas un poco para veas los tipos de control que tenemos en esta versión Express: controles comunes, controles contenedores, de menu...
• Parte central: formulario de edición. Aquí nos podremos mover con las pestañas superiores por los distintos formularios que tengamos abiertos.
• Parte derecha: son las ventanas mas importantes según la información que nos proporcionan: explorador de soluciones que tiene otra pestaña llamada orígenes de datos. Debajo tenemos la imprescindible ventana de propiedades...
• Parte inferior: por defecto no aparece ninguna ventana pero configuraremos un par de ellas que nos serán de gran ayuda a lo largo del proyecto. Sobre todo durante la ejecución de los programas.

Cada una de estas partes la veremos con detalle a continuación.

Es la ventana que mas área de trabajo utiliza y la que habitualmente utilizaremos para introducir nuestro código. Para pasar a ver el código de este formulario podemos hacer dos cosas. Una, el formulario elegimos "ver código" haciendo clic con el botón derecho del ratón:

O pulsando en el Explorador de soluciones de la derecha el botón que indica "Ver código":

Para llegar a la ventana de código:

Vamos a añadir un nuevo formulario para ver cómo navegar entre ellos. En el menú principal seleccionamos la opción "Agregar formulario" (o Agregar Windows Forms) del menú "Proyecto"

Podemos ver cómo ahora hay una pestaña mas con este segundo formulario. Añadimos también un módulo de código con la opción "Agregar Módulo" del menú "Proyecto". Vemos que también se ha añadido a nuestra lista de pestañas:

Podemos cambiar con las teclas Control+Tabulador o lógicamente con el ratón. Para cerrar alguna de ellas pulsaremos las teclas Control + F4 o en la "x" de la derecha.

En esta ventana escribiremos el código del programa en forma de declaraciones, procedimientos, funciones, módulos, ... veamos algunas posibilidades de esta ventana.

Ajustar el color y el tipo de letra

Para cambiar el tipo de letra y algunos detalles mas del estilo de la fuente seleccionaremos "Opciones" del menú "Herramientas" y luego en la parte del Entorno seleccionamos Fuentes y colores:

Si alguno de vosotros está acostumbrado a otro entorno u otras fuentes aquí puedes modificar cualquiera de los estilos utilizados en el editor, no sólo para la edición, sino, como puedes ver, para el comportamiento en general. Para los antiguos de VB: qué... ¿esta mejor o no? simplemente está a muchísima distancia del limitado editor de VB6. Por eso merece la pena la longitud de este capítulo: para aprender todas las cosas nuevas y sobre todo las que nos van a ayudar a que la labor de escritura y mantenimiento sea mas cómoda.

En la parte inferior izquierda puedes ver una casilla de verificación (checkbox) que te permite mostrar todas las opciones del entorno. Por defecto está desactivada y nos vale con las opciones que nos muestra.

¡¡Volvemos al "GOTO 10"!! No, es broma, simplemente en ocasiones puede que sea mas cómodo parta sacar listados impresos hacer que las líneas estén numeradas. No es muy práctico pero ahí está... para activarla utiliza la opción Basic, General de la sección "Editor de texto" de la pantalla anterior:

Con esto podremos utilizar atajos como los que ofrece Excel o Project de ir hasta una línea en concreto utilizando la opción Ir a del menú Edición.

Al igual que en otros programa de Office podemos dividir la ventana de código. Es especialmente útil si queremos visualizar permanentemente un área de código y queremos ver otra a la vez para por ejemplo comparar secciones de código, copiar y pegar, ...

Para esto utilizaremos la opción dividir del menú Ventana:

También podemos hacer clic en el divisor de ventana que se encuentra justo encima de la barra de desplazamiento:

Los marcadores son señales que introducimos en las líneas de código. Con esto podremos volver rápidamente a la línea en la que colocamos el marcador. Es especialmente en listados grandes para ver una determinada parte y volver done estábamos editando rápidamente. Para insertar un marcador utilizaremos la opción "Alternar marcador" de la sección Marcadores del menú Edición:

 y se distinguirá por un óvalo azul:

Si tenemos mas de un marcador nos podemos mover entre ellos desde el menú anterior.

O la barra de herramientas del editor de texto que contiene a la derecha la navegación por los marcadores:

Poner comentarios en el código es una buena práctica que en este curso utilizaremos muy a menudo. Seguro que cuando estemos escribiendo nuestro programa sabemos lo que estamos haciendo y estaremos plasmando todas las ideas que tenemos en la cabeza en el código. Pero seguramente si abrimos este código dentro de un mes tendremos muchos problemas para recordad ciertas cosas por lo que unos comentarios en los sitios precisos dando explicación a unas rutinas, fragmentos u otros serán de un valor inestimable. Por ejemplo:

Private Sub ListBox1_SelectedIndexChanged(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles ListBox1.SelectedIndexChanged

    ' Cuando pulsamos en un elemento de la lista...
    With ListBox1
 'Obtenemos su contenido con el método GetItemTExt
        TextBox1.Text = .GetItemText(.SelectedItem)
    End With

End Sub

Los comentarios que en el IDE aparecen en color verde nos ayudan a explicar las partes del código.

También nos pasará que, según las leyes de Murphy, tengamos que retocar el código de otra persona y seguro que en ese momento está de vacaciones o de viaje de novios. SI su código está comentado seguramente nos acordemos muy bien de él al ser un código legible peo si no lo está tendremos que analizar todas las líneas y nos acodaremos no de él pero si de su familia. Otras veces simplemente queremos que se ejecute un fragmento de código y queremos que se quede momentáneamente como comentarios.

De acuerdo, pues además de poner los comentarios necesarios a medida que escribimos el código (incluyendo una comilla simple ' antes del comentario) podemos hacer que el editor nos marque una zona como comentario, es decir, sin valor para VB.NET que lo ignorará. Para esto marcamos las líneas que queramos y utilizamos la opción del menú Selección con comentarios del Avanzadas en el menú Edición. También disponemos de los iconos para realizar esto:

Para terminar con esta parte del editor vamos a ver una tecnología que al principio nos puede parecer incómoda y que nos complica mas la escritura del código pero luego no se puede "estar sin ella", nos ayudará a escribir el código, en muchas ocasiones nos servirá para ver si estamos escribiendo bien el código... Veamos cuatro situaciones típicas:

• Lista de miembros. Estamos escribiendo el código y estamos trabajando con el objeto formulario, (recuerda el Windows forms) este formulario tiene muchas propiedades y métodos... si está bien declarado y escribimos su nombre al escribir el punto "." para asignarle una propiedad o trabajar con un método obtendremos.

Veremos una lista desplegable con todo lo que podemos hacer o escribir con el objeto "form1" en este ejemplo. Como no las conocemos ni le haremos caso al principio pero luego seguro que la seleccionamos de la lista porque así nos confirma que esa instrucción es de "form1"

• Información de parámetros. Cuando llamemos a procedimientos y funciones (subprogramas o fragmentos que realizan una operación o proceso) éstos necesitan normalmente de unos parámetros para poder trabajar correctamente. Pues bien, en el momento que escribamos la llamada a este procedimiento o función nos irá indicando las variables o parámetros que debemos escribir y de que tipo... ya practicaremos
   

• Información rápida. Nos muestra una viñeta con la información que necesita el código que estamos escribiendo.
   

Además de la ventana principal que hemos visto antes tenemos una serie de ventanas suplementarias que nos ayudarán en nuestro trabajo. Vamos a ver cómo las manipulamos, su funcionamiento lo veremos un poco mas adelante...

Las ventanas adicionales están por defecto visibles pero podemos ponerlas para que se oculten automáticamente situándose a los laterales de nuestro IDE indicando con una ficha que están ocultas pero disponibles y que se desplegarán al pasar el ratón. Esto es verdaderamente útil porque las utilizaremos en algunas ocasiones pero no desearemos que nos ocupen permanentemente un área de pantalla. Veamos este ejemplo, tenemos las ventanas del explorador de soluciones que tiene otra pestaña debajo para el

Pulsa ahora en la chincheta que tiene en la parte superior de la ventana, justo al lado de la "x" de cerrar, verás que la ventana del explorador de soluciones desparece colocándose en un lateral:

Vemos que a la derecha tenemos las dos ventanas, para acceder a ellas, basta con pasar el ratón por encima de esta pestaña. Si en ese área lateral pulsamos con el botón derecho nos aparecerá una lista con todas las ventanas disponibles. Para volver a dejarla fija volveremos a "pinchar la chincheta"

Normalmente estas ventanas disponen de cuatros posibilidades de visualización:

• Acoplable. Se acopla con las ventanas contiguas repartiendo el espacio. Por ejemplo es habitual tener acopladas en una misma columna la ventana del explorador de soluciones y la ventana de propiedades.

• Ocultar. La ventana no se muestra.

• Flotante. Está visible pero no se acopla en ningún sitio. Permanece en primer plano en nuestro IDE.

• Ocultar automáticamente. Es la posición predeterminada y se activa pasando el ratón por la pestaña.

Por tanto para que permanezca siempre visible pulsamos en la chincheta que aparece en la parte superior derecha . Si está fija lógicamente no se ocultará al pasar el ratón por encima. Para ver todas las opciones pulsaremos con el botón derecho encima del título y elegiremos el estilo que nosotros queramos:

Quizás el mas complicado de configurar es el "acoplable" ya que se debe arrastrar con cuidado el título de la ventana para que la acople a la posición que deseemos. Para conseguir que se acoplen varias ventanas arrastraremos una ventana hacia la zona de trabajo de otra y soltaremos el ratón. Si intentas arrastrar por ejemplo la de propiedades, al moverse te aparecerá lo siguiente:

Que son las posiciones donde se acoplará la ventana. En el ejemplo ves las direcciones donde quedaría acoplada. Lo mejor es que practiques un poco hasta conseguir soltura, luego te presentaremos la configuración mas habitual...

La última posibilidad y casi la mas práctica como has podido comprobar ya es acoplar varias ventanas organizándolas en fichas. De esta forma sólo se ve una y las otras se desplegarán al ir pulsando en los títulos. Por ejemplo:

Para conseguir acoplarla he arrastrado la ventana al cuadro de herramientas que ya tenía abierto. Fíjate en la parte inferior están disponibles las ventanas del cuadro de herramientas, explorador de soluciones y ventana de propiedades. Pero la disposición estándar es mas que suficiente para trabajar. SI te "cargas" alguna ventana, cosa habitual y normal cuando estamos aprendiendo a manejar el IDE siempre te puedes ir a la opción del menú:

Hay mas ventanas todavía que ya iremos aprendiendo mas adelante... las puedes ver en la opción "Otras ventanas" del menú anterior.

Corresponde al antiguo explorador de proyectos y contiene todos los ficheros de que consta nuestro proyecto. Veamos la pantalla del ejemplo anterior:

¿Porqué se llama Explorador de soluciones? Muy sencillo, porque ahora con .NET un programa puede estar compuesto de varios proyectos o programas que conforman la solución. Por eso este explorador permite tener varios proyectos simultáneos que van a conformar la solución (incluso en distintos lenguajes, recuerda que el entorno ahora es el mismo).

Vemos primero el nombre de la solución y debajo un fichero que pone "My Project" que si le hacemos clic veremos que tiene:

Que son todas las propiedades de nuestro proyecto, desde el nombre hasta el icono que le pondrá al programa cuando lo terminemos. Debajo de este fichero nos aparecen ya dos iconos de "form1" y "form2" que son los dos formularios que he creado en este ejemplo. Si recuerdas en la carpeta aparecen varios ficheros mas pero en esta versión se ocultan para tener el área mas limpia. Antes se mostraban todos e incluso el que vimos con la configuración del formulario se incluía en el propio formulario. Ahora tiene un aspecto mucho mas sencilla mostrándonos solo lo mas importante. Aparece como título el nombre genérico de "WindowsApplicationx".

Si pulsamos con el botón derecho vemos que podemos añadir mas... que ya veremos mas adelante. Por ejemplo, he adquirido un kit de desarrollo para manejar una , para PDA o un "Smartphone" y quiero manejarlo desde mi programa, pues bien, sólo tendré que añadir en las propiedades del proyecto su referencia y así mi programa estará preparado para utilizar todas las opciones y objetos de este kit.