GUIA DE APRENDIZAJE NO. 003

PAGINAS ASPX Y ENTORNO DE DESARROLLO

INSTRUCTOR: Ing. Ariel Almonacid Arias

AREA: Programación en ASP.NET.

ESTUDIANTE: _____________________________________________________.

GRADO: ___________.

OBJETIVOS: Ilustrar en los educandos la presentación de la paginas aspx junto con el entorno y sus partes.

CONTENIDOS

Las páginas ASPX

Si nos vamos a lo fundamental es posible crear una página ASP.NET usando el bloc de notas y sin saber nada de la plataforma .NET y de sus diferentes espacios de nombre.

Las páginas de servidor de ASP.NET son en esencia archivos de texto que contienen HTML y etiquetas y que tienen una extensión '.aspx'. Por ello se les denomina de modo genérico páginas ASPX.

Al igual que las páginas ASP clásicas soportan el uso de etiquetas <% %> para delimitar bloques de código. Ejemplo:

Página ASPX sencilla

El código de la figura no se distingue de una página ASP clásica salvo por la extensión del archivo (.aspx en lugar de .asp). Sin embargo si navegamos hasta esta página (ubicada en el raíz de nuestro servidor IIS) veremos que el resultado es el que esperábamos:

Resultado del código anterior

Siguiendo con el ejemplo vamos a añadir un poco más de código para comprobar hasta qué punto son compatibles las páginas ASPX con el código ASP.

Si lo modificamos para que tenga el siguiente aspecto:

Más código añadido a la página ASPX

Ahora durante la carga (o la recarga) de la página verificamos si se le está pasando un parámetro por POST, en cuyo caso sustituimos la caja de texto por un saludo al nombre que se le esté pasando:

Resultado de la ejecución.

Este ejemplo nos ha servido para ver qué ASPX sigue siendo compatible en cierta medida con ASP, y que sólo por este hecho ya mejoraremos la escalabilidad de las páginas. De todos modos el cambio de la extensión del archivo sólo funcionará en las páginas más sencillas.

Si bien podemos escribir código ASP.NET de la manera correcta sólo con el bloc de notas, la mejor forma de desarrollar páginas Web con ASP.NET es usando Visual Studio, que como veremos enseguida nos ofrece una forma visual de trabajo junto con una separación estricta entre el código y la interfaz de usuario.

El entorno de desarrollo: Visual Studio 2010Visual Studio 2010 es el entorno de desarrollo de aplicaciones Web para la versión 4.0 de la plataforma .NET. Ofrece todo tipo de herramientas para facilitar el trabajo del programador: diseñadores gráficos de páginas y clases, asistentes de uso de bases de datos, un servidor web de desarrollo, ayuda a la escritura de código, y en general todo lo que se espera de un entorno de desarrollo rápido moderno y mucho más todavía.

Para crear un nuevo proyecto ASP.NET utilice el menú Archivo·Nuevo·Sitio Web. Al hacerlo aparecerá un diálogo como el de la figura:

El diálogo de nuevo proyecto web (aplicable a Visual Studio 2010).

Nota:Las plantillas disponibles en el diálogo de nuevo proyecto web puede diferir dependiendo de la versión de Visual Studio 2010 que utilice. Por simplicidad se muestra el diálogo de la versión Visual Web Developer Express, el más simple.

En él tenemos la oportunidad de elegir qué tipo de proyecto vamos a crear (por defecto un sitio web de ASP.NET), en qué ubicación física queremos crearlo (lo normal será en nuestro disco duro pero podríamos elegir un sitio gestionado por FTP o HTTP) y con qué lenguaje de programación.

Explorando el entornoTras crear un proyecto nuevo, el entorno tiene un aspecto similar a este:

El entorno de desarrollo de Visual Studio tras crear un proyecto (aplicable a Visual Studio 2010).

Antes de aprender a manejar Visual Studio 2010 vamos a ponernos en situación conociendo los distintos elementos que forman parte del entorno.

Explorador de soluciones Este elemento contiene un árbol con los proyectos en los que estamos trabajando y los diferentes archivos y carpetas que forman parte de ellos. Nada más crear un nuevo proyecto Web sólo existe una carpeta llamada App_Data, y una página ASPX creada de forma predeterminada que está vacía y es con la que comenzaremos a trabajar.Los botones de la parte superior se usan para realizar diversas acciones sobre el elemento que tengamos seleccionado. Por ejemplo en el caso de la página podemos abrir su diseño o su código presionando respectivamente el tercer y cuarto botones por la derecha.

Área de documentos

Área de documentos mostrando un editor de HTML.

Es la zona situada en el centro del entorno de desarrollo. Contiene los diferentes editores de código así como diseñadores de diversos tipos (de interfaz de usuario, de clases, de DataSets...). Es en donde pasaremos la mayor parte del tiempo trabajando.

Cuadro de herramientas

Cuadro de herramientas y detalle de un algunos grupos de éste.

El cuadro de herramientas contiene los diferentes elementos que podemos utilizar para la definición de la interfaz de usuario de nuestra aplicación, así como algunos otros componentes no visuales que también se pueden arrastrar hacia el diseñador visual de páginas Web. Está situado por defecto en el lateral izquierdo del entorno.

Editor de propiedadesAl igual que en Visual Basic 6.0, Frontpage y otros entornos, el editor de propiedades nos permite ajustar los valores de las propiedades en tiempo de diseño de los objetos que hayamos seleccionados. Este editor sirve para ajustar las propiedades de todos los objetos que podamos utilizar en el entorno: tanto de los controles que se arrastran sobre un diseñador como de los propios archivos del explorador de soluciones y las etiquetas HTML o XML, etc...

Algunas propiedades se editan directamente en el espacio disponible y otras lanzan un asistente o un diseñador que nos ayuda con la tarea.

Se pueden ver las propiedades ordenadas alfabéticamente o bien agrupadas en diferentes categorías (opción por defecto). Además de las propiedades también se pueden ajustar los gestores de eventos de los objetos usando el penúltimo botón por la derecha. En la parte inferior se obtiene una concisa ayuda sobre cada propiedad seleccionada.

Barras de herramientas y menús

Se sitúan en la parte superior y dan acceso al resto de las características de la herramienta de trabajo. Según el contexto en el que nos encontremos las barras de herramientas que veremos serán distintas. Visual Studio se encarga de mostrar y ocultar la ingente cantidad de barras disponibles mostrando en cada caso sólo las que necesitemos. Esto racionaliza el acceso a los elementos de la interfaz que de otro modo serían inmanejables.

“LA INTELIGENCIA CONSISTE NO SOLO EN EL CONOCIMIENTO SINO TAMBIEN EN LA DESTREZA DE APLICAR LOS CONOCIMIENTOS EN LA PRACTICA”. Aristóteles

NOTA: Este material es solo un introductorio, el estudiante debe fortalecer estos conceptos a medida que se van viendo las clase y anexarlos al portafolio.

FIRMA DEL ESTUDIANTE FIRMA Y CEDULA DEL ACUDIENTE

FIRMA DEL INSTRUCTOR