Tema 2. Entorno de desarrollo integrado (IDE) de VS .NET

Desarrollo de Aplicaciones Informáticas – Diseño y realización de servicios de presentación en entornos gráficos
Tema 2. Entorno de desarrollo integrado (IDE) de VS .NET
La página de inicio del entorno de desarrollo integrado (IDE)
Desde esta página podremos acceder a: nuestros proyectos recientes, noticias
relacionadas con Visual Studio o bien, dejarnos ayudar por el propio IDE para crear
una aplicación por ejemplo. Si por alguna razón la cerrásemos y quisiéramos volverla a
visualizar iríamos a Ver Î Otras ventanas Î Página de inicio.
En clase se creará una aplicación desde cero usando la ayuda propuesta por el propio IDE y
veremos los elementos más comunes: cuadro de herramientas, explorador de soluciones,
ventana de propiedades, ventana de comandos y de errores.
Explorador de soluciones
Al desarrollar una aplicación en VB.NET, los elementos que contiene: formularios, módulos,
clases, recursos, referencias, etc., se organizan dentro de un proyecto.
También es posible tener varios proyectos abiertos simultáneamente en la misma sesión de
trabajo del IDE. Dichos proyectos se organizan dentro de lo que en VS.NET se denomina una
solución.
Una solución puede contener proyectos desarrollados en los diferentes lenguajes de la
plataforma .NET y el medio más cómodo para manejarlos es a través de la ventana “Explorador
de soluciones”.
Desarrollo de Aplicaciones Informáticas – Diseño y realización de servicios de presentación en entornos gráficos
La carpeta Referentes contiene las referencias que están establecidas dentro del proyecto,
hacia los diferentes espacios de nombres que pueden ser necesarios a la hora de escribir el
código como por ejemplo System, System.Window.Forms, etc.
Al crear un nuevo proyecto, dichas referencias son establecidas automáticamente por el IDE y
varían en función del estilo de proyecto elegido: aplicación de Windows, de consola, etc. El
programador puede establecer referencias adicionales en función de las necesidades del
programa.
Respecto al fichero ASSEMBLYINFO.VB contiene información adicional del ensamblado, una
captura de pantalla sería:
Una vez creado un nuevo proyecto, podríamos necesitar agregar formularios, clases, etc… Para
ello, seleccionaremos nuestro proyecto Î botón derecho Î Agregar y nos aparece una ventana
contextual con todos los elementos que podemos agregar.
Desarrollo de Aplicaciones Informáticas – Diseño y realización de servicios de presentación en entornos gráficos
Si necesitamos variar los parámetros de configuración del proyecto, deberemos abrir la
ventana de propiedades del proyecto, haciendo clic sobre el nombre del proyecto Î botón
derecho, propiedades.
Esta ventana de propiedades está organizada en varias carpetas, situadas en la parte izquierda y
que contienen los diversos apartados en los que se organizan las propiedades. Al hacer clic,
sobre cada uno de los apartados se irán mostrando las propiedades relacionadas.
Ventana de propiedades
Cuando estamos diseñando un formulario, esta ventana muestra las propiedades del objeto que
tengamos seleccionado: un control o el propio formulario.
Desarrollo de Aplicaciones Informáticas – Diseño y realización de servicios de presentación en entornos gráficos
Las propiedades se organizan en dos columnas: una contiene
los nombres de las propiedades y otra sus valores. Las
propiedades compuestas de varios miembros, incluyen en el
lateral izquierdo un signo + para expandirlos.
Ciertas propiedades contienen una lista de valores, que
podemos abrir con el botón que figura en el valor de la
propiedad. Existen otras propiedades cuyo valor es
seleccionado mediante una caja de diálogo. En estas
propiedades, se muestra en su valor, un botón con puntos
suspensivos indicando que debemos pulsarlo para modificar su
valor.
Podemos hacer clic sobre un control del formulario para pasar
a continuación a ver sus propiedades, o bien podemos elegir el
control de la lista desplegable de controles.
.
Cuadro de herramientas
Situado habitualmente como una ficha en el lateral izquierdo
del IDE, la ventana Cuadro de herramientas contiene todos los
controles que podemos insertar en un formulario para
construir la interfaz de usuario de la aplicación.
Esta ventana está organizada en base a una serie de fichas en
forma de barras, en las que al hacer clic se despliegan sus
Desarrollo de Aplicaciones Informáticas – Diseño y realización de servicios de presentación en entornos gráficos
elementos. Por defecto, cuando abrimos el cuadro de herramientas, se muestra abierta la ficha
“Todos los formularios Windows”, conteniendo los controles que habitualmente utilizaremos en
los formularios, aunque también disponemos de las fichas Datos, Controles comunes, etc.
Ya que habitualmente no haremos uso de todos los controles en un programa, algunas fichas se
encuentran ocultas, por lo que si queremos tener todas disponibles, haremos clic derecho sobre
el cuadro de herramientas y elegiremos la opción de menú Mostrar todos, con lo que fichas
como HTML, Esquema XML, etc., que hasta ese momento no estaban disponibles, podrán ser
usadas por el programador.
Las fichas del cuadro de herramientas se muestran en un orden predeterminado por el IDE, pero
podemos cambiar la posición de cualquier ficha haciendo clic sobre la misma y arrastrando arriba
o abajo hasta soltarla en una nueva posición. Esta flexibilidad también se extiende al hecho de
que podemos crear nuestras propias fichas para situar en ella controles ya existentes en el
cuadro de herramientas o nuevos controles. Para crear una nueva ficha, que llamaremos
MisControles, haremos clic derecho en el cuadro de herramientas y seleccionaremos la opción de
menú Agregar ficha, ello creará una nueva ficha vacía en la que escribiremos su nombre y
pulsaremos [INTRO] para terminar.
Es posible también, cambiar de nombre y eliminar las fichas existentes, haciendo clic derecho
sobre su título y eligiendo del menú contextual, la opción Eliminar ficha o Cambiar nombre de
ficha. Debemos tener en cuenta que sólo podremos eliminar las fichas que hayamos creado
nosotros, puesto que las que originalmente se muestran en el IDE, pertenecen al entorno de
desarrollo y no pueden eliminarse.
Los controles dentro de una ficha se visualizan por defecto con el icono del control y su nombre,
en el llamado modo Vista de lista. No obstante, podemos hacer que los controles se muestren en
vista de iconos, haciendo clic derecho sobre el cuadro de herramientas y seleccionando la opción
de menú Vista de lista, que se encontrará marcada, desmarcándola de esa forma, y quedando
esta ventana con un aspecto parecido al siguiente.
Podemos ordenar los controles de una ficha por su nombre, haciendo clic derecho sobre esta
ventana y eligiendo la opción de menú Ordenar elementos alfabéticamente. El orden alfabético
puede tener el inconveniente de situar algunos controles de uso frecuente (por ejemplo
TextBox), al final de la lista. Para remediar este problema, podemos cambiar la posición de los
controles dentro de la lista de dos maneras: haciendo clic sobre el control y arrastrándolo hasta
la posición que deseemos; o bien, haciendo clic derecho sobre la lista de controles y eligiendo las
opciones Subir o Bajar. En este último modo podemos lograr una ordenación mixta, en parte
alfabética, pero con nuestro controles de mayor uso en posiciones preferentes.
Manipulación de los controles
Todos los controles aparecen con su nombre original en el cuadro de herramientas. No obstante,
es posible cambiar dicho nombre por otro que sea más fácilmente identificable por nosotros, o
con el que nos sintamos más cómodos. Por ejemplo, supongamos que queremos cambiar el
nombre del control Label. Para ello, haremos clic derecho sobre dicho control y seleccionaremos
la opción Cambiar nombre de elemento, lo que nos permitirá editar directamente el nombre en
la lista de controles. Introduciremos como nuevo nombre Etiqueta y pulsaremos [INTRO].
Desarrollo de Aplicaciones Informáticas – Diseño y realización de servicios de presentación en entornos gráficos
Mediante las operaciones estándar de Windows: Cortar, Copiar y Pegar, podemos cambiar de
ficha los controles, mientras que si hacemos clic y arrastramos un control hacia otra ficha,
moveremos dicho control de su ficha original, depositándolo en una nueva.
Agregar/eliminar controles
Para agregar un nuevo control, nos situamos sobre la ficha, debemos hacer clic derecho y
seleccionar la opción de menú Elegir elementos, que nos mostrará una ventana en la que
dependiendo de la ficha seleccionada, podemos añadir al cuadro de herramientas tanto controles
basados en componentes COM, como componentes de .NET Framework.
La operación inversa, es decir, eliminar un control del cuadro de herramientas, podemos
realizarla de dos formas:
Seleccionar el control y pulsar [SUPR], confirmando su eliminación del cuadro de
herramientas.
Abrir la ventana para personalizar el cuadro de herramientas, localizar el control y quitar
la marca de su casilla. Con ello desaparecerá del cuadro de herramientas.
Intercambiar código
El cuadro de herramientas, permite el intercambio de código fuente entre diversos elementos del
proyecto, a través de un acceso visual al Portapapeles del sistema.
Supongamos que en nuestro proyecto hemos creado una clase llamada Factura:
Desarrollo de Aplicaciones Informáticas – Diseño y realización de servicios de presentación en entornos gráficos
Si seleccionamos el código Î Copiar y nos situamos en el cuadro de herramientas Î Pegar,
habremos copiado el código al cuadro de de herramientas, y podremos usarlo en aquellos sitios
donde creamos oportuno, lo que aporta una gran comodidad a la hora de manipular el código
fuente de una aplicación.
Ventana de resultados
Esta ventana se encuentra habitualmente en la parte inferior del IDE, y muestra el producto de
acciones diversas, como la compilación previa a la ejecución, generación de ejecutable, etc. Si
no estuviera visible: Ver Î Resultados.
Editores de imágenes
VS.NET permite la creación o modificación de ficheros de imagen en los formatos más usuales:
BMP, GIF, JPG, ICO, etc. Para crear una nueva imagen y añadirla al proyecto, seleccionaremos la
opción de menú Proyecto Î Agregar nuevo elemento Î Archivo de mapa de bits, lo que añadirá
una nueva ficha a la ventana principal del IDE con las herramientas adecuadas para dibujar una
imagen.
Si en lugar de agregar un nuevo elemento, seleccionamos un fichero de imagen o icono
existente, dicho ficheros se añadirá al proyecto, mostrándose en el editor de imagen permitiendo
su modificación.
Desarrollo de Aplicaciones Informáticas – Diseño y realización de servicios de presentación en entornos gráficos
Lista de tareas
Cuando desarrollamos una aplicación, van apareciendo algunas labores que no podemos
completar en el momento y debemos posponer para otra ocasión. Cada programador lleva un
control más o menos efectivo de esta lista de labores incompletas: apuntarlas en un fichero con
el Bloc de notas, una libreta de apuntes, etc., que cumplen correctamente su misión, si bien,
ninguna de ellas está integrada con la herramienta de programación.
VS.NET incorpora un novedoso elemento denominado tarea, que permite definir labores
pendientes de realizar en el código de la aplicación, asignarles una prioridad y realizar
búsquedas entre todas las definidas en el programa.
En el contexto del IDE, una tarea es un identificador simbólico, que al ser incluido en una línea
de comentario es detectado de forma especial, engrosando la lista de tareas pendientes de
realizar en el proyecto.
Definir símbolos para tareas
Al instalar VS.NET se crea un conjunto de símbolos de tareas predeterminado, a los que
podemos acceder a través de la opción de menú Herramientas Î Opciones Î Marcar “Mostrar
todas las configuraciones” Î En la ventana Opciones, abriremos la carpeta Entorno, y haremos
clic sobre Lista de tareas.
En esta pantalla de configuración, podemos alterar los valores de los símbolos asociados a
tareas, crear nuestros propios símbolos y eliminar todos excepto el símbolo TODO. En este caso,
en el campo Nombre escribiremos un nuevo símbolo con el nombre PENDIENTE, y pulsaremos el
botón Agregar, para añadirlo a la lista existente.
Crear tareas
Podemos crear tareas de dos formas:
☺ Asociando una tarea a un símbolo o directamente a una línea ejecutable.
☺ Haciendo clic derecho sobre una línea de código y seleccionando la opción Edición
Marcadores Î Agregar acceso directo a la lista de tareas.
Î
Desarrollo de Aplicaciones Informáticas – Diseño y realización de servicios de presentación en entornos gráficos
Visualizar lista de tareas
Podemos situarnos en las tareas definidas utilizando esta ventana a la que accederemos con la
opción de menú Ver Î Lista de tareas.
Podemos desplazarnos a una tarea haciendo doble clic sobre la misma, lo que nos situará en el
documento de código y línea especificados por la tarea. Las tareas se encuentran filtradas por
Comentarios, Accesos directos o Definidas por el usuario.
Eliminar tareas
Cuando consideremos una tarea completada podemos eliminarla de la lista. El modo de quitar
una tarea depende de su tipo:
☺ Si se trata de una tarea asociada a una línea de código ejecutable, haremos clic sobre ella en
la ventana de tareas y pulsaremos [SUPR]. O bien, haremos clic derecho y elegiremos la
opción de menú Eliminar.
☺ Si la tarea está asociada a un símbolo situado en un comentario de código, bastará con
borrar la línea del comentario.
Explorador de objetos
Ventana a la que accedemos desde Ver Î Examinador de objetos. Una vez abierta, se sitúa
como una ficha más de la ventana principal del IDE, organizada en tres paneles principales.
El panel izquierdo muestra la organización de espacios de nombres, clases, etc. El panel derecho
visualiza los miembros de la clase actualmente seleccionada. Finalmente, el panel inferior
muestra la declaración del miembro seleccionado en el panel derecho.
Con el examinador de objetos podemos buscar información sobre cualquiera de las clases que
componen la plataforma .NET Framework. Para buscar un símbolo dentro de las clases, se
muestra una caja de diálogo en la que introducimos el nombre del símbolo. Al pulsar el botón
Buscar, se abre la ventana Resultados, situada habitualmente en la parte inferior del IDE, con la
lista de símbolos coincidentes encontrados. Al hacer doble clic sobre alguno de los símbolos
encontrados, se actualiza la información del examinador de objetos, mostrando la clase y
símbolo seleccionado.
Desarrollo de Aplicaciones Informáticas – Diseño y realización de servicios de presentación en entornos gráficos
El sistema de ayuda
La aplicación utilizada para navegar por la documentación de la ayuda es Microsoft Document
Explorer, que permite al programador una enorme flexibilidad a la hora de realizar consultas
sobre la ayuda disponible de los diferentes productos de desarrollo que componen la plataforma
.NET.
La integración ahora del sistema de ayuda con el IDE es total, siguiendo como es natural, con la
tónica establecida en versiones anteriores de proporcionar ayuda contextual siempre que sea
posible. Si por ejemplo, nos encontramos diseñando un formulario y hacemos clic sobre un
control Button, al pulsar [F1] se abrirá una nueva pestaña en la ventana principal del IDE que
iniciará la ayuda, y nos posicionará en un documento relativo a dicho control.
La documentación de ayuda está creada en formato HTML, lo cual nos permite, gracias a su
elevado grado de integración, guardar los documentos que visitemos dentro del apartado
Favoritos de Internet Explorer, y consultarlos igualmente utilizando este navegador de Internet.
Ayuda Î Ayuda dinámica
Esta ventana muestra enlaces a los temas de ayuda del entorno .NET. Podemos acceder a ella
mediante la opción de menú Ayuda Î Ayuda dinámica.
Tal y como su propio nombre indica, los enlaces que muestra esta ventana son activos y van
actualizándose dependiendo del elemento de código u objeto del diseñador en el que estemos
posicionados.
Ayuda Î Contenido
Esta ventana muestra la documentación al completo de la plataforma .NET Framework
organizada en áreas temáticas.
Ayuda Î Índice
Esta ventana nos permite realizar una búsqueda dinámica de un elemento dentro de la ayuda.
Según tecleamos un valor en el campo Buscar de esta ventana, se realizará una búsqueda
dentro del
MSDN, del valor más parecido a lo que hasta ese momento hemos tecleado. Una vez que
localicemos en la lista de elementos, el tema deseado, haremos clic sobre él y se mostrará su
contenido en la ventana principal del IDE.
Ayuda Î Buscar
En el caso de que la ayuda contextual o a través del índice no aporten la información necesaria,
podemos utilizar la ventana Buscar, perteneciente a la ayuda, que explorará en toda la
documentación del MSDN, foros, etc. y devolverá una lista con los documentos que cumplan la
condición de búsqueda.
Al igual que en la ventana de índice, teclearemos un valor en el campo Buscar y una vez
pulsado el botón Buscar, la ventana Resultados de la búsqueda, mostrará una lista de todos los
temas relacionados. Al hacer doble clic sobre uno de los elementos, se mostrará el tema en la
ventana de ayuda correspondiente.