¿Qué es un Framework? ASP.NET como framework de Visual Studio 2012

Bueno, primero vimos un poco de HTML y HTML5 y explicamos que estas etiquetas son procesadas por nuestro navegador. Con lo básico que hemos visto (siempre con la promesa de ver cosas más interesantes más adelante), ya podemos explicar un poco como trabajan los programas de desarrollo de sitios o aplicaciones web.

En el mundo del desarrollo de software y específicamente web, existen muchas herramientas que nos permiten crear sitios y aplicaciones web. Según el lenguaje de programación, podemos escoger la herramienta a usar. Esta herramienta suele llamarse IDE (Interface Development Environment), y es donde nosotros creamos nuestro código, compilamos y ejecutamos para ver el resultado de nuestra programación.

Visual Studio 2012, junto con los lenguajes C# y Visual Basic, son el IDE creado por Microsoft. En el mundo Java, Netbeans y Eclipse son los IDEs más usados.

Sin embargo, existe algo que es ampliamente usado en el ambiente web y son los frameworks. En cada lenguaje de programación existe al menos uno.

Pero ¿qué es un framework?

Si lo traducimos al español, básicamente estamos hablando de un marco de trabajo. En los primeros tiempos del desarrollo web, toda la lógica de programación estaba mezclada con la estructura de presentación (HTML). Esto no era bueno cuando se desarrollaba aplicaciones o sitios grandes, pues su mantenimiento era tedioso y complejo. Ahí entra en juego los frameworks, los cuales permiten separar casi en su totalidad la capa de presentación (HTML) de la lógica de programación.

Los frameworks traen como consecuencias ciertas ventajas, como acelerar el proceso de desarrollo, reutilizar código ya existente y promover buenas prácticas de desarrollo.

Visual Studio 2012 trae consigo el framework ASP.NET para el desarrollo de aplicaciones o sitios web dinámicos. Sin embargo, ASP.NET lo podemos separar en dos frameworks: Web Forms y MVC.

Escoger cual utilizar más bien es cuestión de gustos, aunque también puede influir lo que se desea hacer. Nosotros nos enfocaremos en este momento en los Web Forms.

Comenzaremos por crear una aplicación web en el Visual Studio 2012 usando el lenguaje de programación C#. En File -> New -> Project

Elegimos crear un Proyecto, lo cual nos crea una aplicación web. Podemos crear también un Sitio Web, pero no es recomendable, debido a que para la siguiente versión de Visual Studio (la de 2013) algunas nuevas características no estarán disponibles para la opción Sitios Web.

En la siguiente ventana que nos aparece, seleccionamos ASP.NET Web Forms Application. Le ponemos un nombre a nuestro proyecto y la ubicación donde estará. En el panel de la izquierda vemos el lenguaje C# seleccionado y arriba la versión del framework ASP.NET, en este caso .NET Framework 4.5.

Si damos click en Solution Explorer en la pestañita que aparece a nuestra derecha, vemos que Visual Studio nos creará varios archivos, que si bien unos no deben ser nunca eliminados, hay otros que nos crea para ayudarnos a comenzar nuestro proyecto. En estos momentos, ignoraremos estos archivos.

Luego creamos una página. Damos click derecho en el nombre del Proyecto -> Add -> New Item...

 

Seleccionamos WebForm y le ponemos un nombre, en este caso Login.aspx

Veremos que por cada página creada se crean tres archivos: uno para la presentación .aspx (donde va el lenguaje de marcado o etiquetas), otro para la lógica de programación .aspx.cs (el cual es llamado code-behind y va el código c# creado por el programador) y el designer (este último es el puente para la comunicación entre el archivo .aspx y el code-behind).

Anteriormente vimos las etiquetas HTML usadas para mostrar controles en una página. Podemos usar estas etiquetas en nuestra página aspx. Sin embargo, Visual Studio provee una serie de controles del lado del servidor que proveen una mayor flexibilidad para manipular por medio de propiedades y eventos nuestra lógica de programación, lo cual sería más complicado si usáramos directamente etiquetas HTML.

Vamos a agregar los siguientes controles a nuestra página: un TextBox para pedir el nombre de usuario, otro TextBox para pedir la contraseña de usuario y un Botón para enviar los datos al servidor. Para eso, damos doble click en el archivo Login.aspx y seleccionamos la pestañita Design que se encuentra abajo a la izquierda.

Luego, damos click en la pestaña Toolbox que se encuentra a la izquierda y nos aparecerá un listado de controles, seleccionamos TextBox y sin soltar el click izquierdo del mouse, lo arrastramos hasta el área de diseño de la página. Así agregamos el otro TextBox y el Botón.

Uno de los TextBox lo vamos a configurar para el campo contraseña. Seleccionamos el TextBox y en el panel de propiedades (que es una pestañita que está a la derecha) aparecerán todas las propiedades del control. Buscamos la propiedad TextMode y vemos sus valores. Si recordamos un poco las etiquetas HTML vistas anteriormente, veremos que Visual Studio 2012 ya considera varios de los tipos que vimos, incluyendo las de HTML 5. Para el caso de la contraseña, seleccionamos Password como el valor de la propiedad TextMode.

Ahora seleccionamos el Botón y buscamos su propiedad UseSubmitBehavior en el panel de propiedades. Vemos que está establecida a true, lo cual significa que es un botón para enviar datos al servidor (recuerdan el submit en las etiquetas HTML que vimos).

Teniendo ya agregados estos controles, nos vamos a la vista Source de nuestra página. Esto lo hacemos dando click en Source en la parte de abajo.

Ya en la vista Source, veremos que las etiquetas creadas por Visual Studio no corresponden a etiquetas HTML. Estas son etiquetas que son procesadas del lado del servidor.

Ejecutamos la aplicación para verla en el navegador dando click en el botón play de arriba.

Esto es lo que nuestro navegador genera:

 





Veremos el código fuente de la página (click derecho, ver código fuente en firefox). Nos damos cuenta que Visual Studio creó etiquetas HTML para nuestros controles del lado del servidor. MAGIA!!!