Semana XIV

Taller de Desarrollo Web

Inicio 10 minutos:
La semana anterior estuvimos viendo el trabajo de acceso a base de datos con PHP y MySQL. Aprendimos como configurar una base de datos con MySQL y como insertar, modificar, eliminar

Resumen semestre anterior

y buscar datos.

Al trmino de la semana 10 minutos:

Aprenders cmo funciona el Framework .NET, podrs configurar el entorno de trabajo con IIS, aprenders como funciona ASP.NET y como ste se integra con el Framework. Crears pginas simples utilizando los controles de despliegue de informacin y de aceptacin de datos del usuario.

: ido s n nte inuto : o C yo m o 5 p 22 ea d to. al i s r e te pu o r M a P T. . io p iada P c i 2 u c jer ica g l. E t ia 1 rc tutor P o 1 ide V 1

Aprendizajes esperados

Vista general del Framework .NET

El Framework .NET de Microsoft es un componente de software para el desarrollo y ejecucin de aplicaciones. Entrega un conjunto de clases que permiten el desarrollo y ejecucin de aplicaciones a nivel empresarial que se ejecuten en diferentes plataformas como computadores de escritorio, servidores, dispositivos mviles, entorno web, etc. El Framework .NET est compuesto de un conjunto de clases que se posicionan entre la aplicacin y el sistema operativo, esto permite que las aplicaciones independiente de la plataforma en la que se estn ejecutando siempre reconozcan el mismo conjunto de clases. Esta solucin permite que las aplicaciones pesen poco y que no sea necesario la instalacin constante de las clases, pues el Framework .NET provee una gran cantidad de funcionalidades que se pueden extender fcilmente.

Framework.NET

Bsicamente el Framework .NET se encarga de entregar una serie de herramientas de desarrollo como por ejemplo lenguajes de programacin y compiladores. Una caracterstica del Framework es que soporta muchos lenguajes de programacin, los cuales al ser compilados generan un cdigo intermedio (MSIL), ste cdigo intermedio es ejecutado por el entorno de ejecucin el cual llama a las libreras de funcionalidad del Framework. Estas libreras llamadas BCL (Base Class Library) se encargan de hacer las llamadas a las funciones del sistema operativo para que la aplicacin funcione.

IIS / Framework de .NET

Fjate que el Framework trae soporte nativo para formularios de Windows, ASP.NET y ADO.NET, por lo tanto no necesitamos ms que el Framework y un servidor Web con el cual integrarse para prestar los servicios Web.

Configuracin del entorno de trabajo (IIS, Framework de .NET)

Vamos a ver como configurar el entorno de trabajo para aplicaciones que ocupen la tecnologa ASP.NET, debes saber que ASP.NET es una tecnologa, no un lenguaje de programacin, ASP.NET es la combinacin de IIS (Internet Information Services) ms el Framework .NET. Existen varias formas de configurar un entorno de trabajo con la tecnologa ASP.NET, nosotros vamos a ver una que es la instalacin en Windows 7. Primero debemos instalar IIS (Internet Information Services), para esto, vamos

al panel de control y hacemos clic en la seccin programas y caractersticas.

Desde ah se abre una nueva ventana y buscamos la opcin Activar o desactivar las caractersticas de Windows.

IIS / Framework de .NET

Una vez se abra la ventana, seleccionamos la opcin de Internet Information Services

Abre el rbol de las opciones a configurar y selecciona algunas opciones bsicas, en ste caso vamos a seleccionar Consola de administracin de IIS y luego en los Servicios World Wide Web y luego en Caractersticas d3e desarrollo de aplicaciones marca la opcin ASP.NET, Extensibilidad de .NET y el resto de las opciones que aparecen en la imagen. Si necesitas configurar de mejor forma IIS puedes leer las guas que aparecen en http://learn.iis.net/

IIS / Framework de .NET

Una vez que hayas instalado IIS puedes probar su funcionamiento escribiendo la siguiente URL en tu navegador: http://localhost Debera aparecer una imagen como la siguiente:

Controles y pginas ASP.NET

Esto significa que IIS est correctamente instalado.

Funcionamiento de los controles y las pginas ASP.NET

Las pginas web programadas con ASP.NET funcionan de forma distinta a las pginas XHTML en las cuales el servidor slo se encarga de buscarlas y entregarlas al navegador tal cual como las encontr. En el caso de las pginas ASP.NET el servidor no slo busca el archivo con extensin .aspx sino que adems lo ejecuta utilizando las clases del Framework.NET y devuelve el resultado de la ejecucin en un formato que el navegador pueda ejecutar (XHTML y JavaScript). El proceso o ciclo de ejecucin de un archivo aspx es el siguiente: 1. El usuario realiza la solicitud del recurso mediante una URL 2. El servidor realiza la bsqueda del recurso y procesa su estado inicial. Luego retorna un archivo aspx que slo contiene XHTML y JavaScript al usuario, junto con esta estructura, el servidor agrega el estado inicial de todos los objetos del recurso. 3. El usuario interacta con los controles y luego reenva la pgina completa con los nuevos estados de los controles, esta informacin se procesa en el servidor y se ejecutan las instrucciones contenidas en el code-behind que se encarga de controlar los cambios de estado de los controles. 4. Una vez se han procesado los datos, el servidor vuelve a construir un nuevo archivo aspx que contiene el nuevo estado de los controles. A ste proceso de ida y vuelta al servidor se le conoce como Post Back. El modelo de programacin de las pginas web con tecnologa ASP.NET incluye el concepto de code-behind. ste concepto surge por el hecho de que se trata de que las aplicaciones con tecnologa ASP.NET funcionen de forma muy parecida a lo que hacen las aplicaciones de escritorio. Para lograr esto, ASP.NET crea el concepto de evento para un cierto tipo de controles llamados Web Controls, estos controles son controles especficamente

Niveles de pensamiento: CONOCIMIENTO: Repetir.

Ejercicio 02 :Condicionales Duracin: 45 minutos

1._ REPITE los ejemplos dados hasta ste punto.

Actividades

Controles estndar

creados para el Framework .NET y que soportan un modelo de programacin basado en eventos. El primer componente es el contenedor de todos los controles llamado Web Form que no es ms que un contenedor web que puede contener tanto Web Controls como controles normales XHTML. ste tipo de controles maneja eventos que se ejecutan siempre en el lado del servidor, el cdigo que se ejecuta en el lado del servidor asociado a un evento se denomina code-behind. Cuando el usuario interacta con un botn en la pgina, los datos de ste objeto y de todos los objetos del web form se envan al servidor y son procesados en funcin del evento que se haya gatillado. El servidor revisa la informacin y ejecuta el cdigo asociado al evento. De esta forma se modifican otras propiedades de los controles, se reconstruye la pgina y se enva de vuelta al cliente.

Uso de los controles estndar

Los controles estndar o web controls de ASP.NET, permiten generar la funcionalidad bsica a las pginas que vamos a construir. Lo primero que debemos hacer es crear un proyecto ASP.NET utilizando nuestro editor en ste caso Visual Studio 2010 (el proceso es muy similar para las otras versiones de Visual Studio). Abres Visual Studio y seleccionas la opcin de nuevo sitio web.

Una vez que selecciones esa opcin debes configurar algunas cosas: Por ejemplo puedes seleccionar el Framework .NET que vas a utilizar para compilar la aplicacin, lo mismo el compilador que se va a ocupar, el tipo de plantilla de proyecto que vamos a ocupar y la ubicacin fsica de los archivos. Una vez hayas configurado estas opciones presionas OK y ya tenemos nuestro sitio pre configurado y con los archivos necesarios creados y listos. Para ste caso seleccionamos la plantilla de sitio web vaco para poder crear todo por nuestra cuenta. Una vez creado el sitio web esto es lo que veremos

en el panel explorador de soluciones.

Controles estndar

Visual Studio maneja el concepto de Solucin, la cual puede estar compuesta por una serie de proyectos. Comenzaremos agregando nuestro primer elemento un web form. Hacemos clic con el botn secundario sobre el proyecto y seleccionamos la opcin que dice Agregar Nuevo Elemento

De la lista de elementos propuestos seleccionas la opcin que dice Web Form y le das nombre. Fjate que al lado del nombre del web form hay dos elementos seleccionables con

Controles estndar

la opcin de mantener el cdigo en un archivo separado a la interfaz grfica y adems si vas a utilizar una pgina maestra.

En nuestro caso para mantener la claridad del cdigo vamos a marcar la opcin de poner el cdigo en un archivo separado. Una vez hayamos configurado la pgina esta es la imagen que vers.

Fjate que la interfaz est dividida en varias secciones, la parte superior tiene el men, la parte derecha tiene los cuadros de explorador de soluciones y el cuadro de propiedades. En la parte central encontramos el diseador de formularios que nos permitir trabajar tanto con el cdigo XHTML, como con el diseo y el code-behind. En la parte inferior de la ventana central encontramos 3 botones para cambiar la vista ya sea al cdigo fuente, a la vista de diseo o una vista dividida.

Controles estndar

Vamos a la vista de diseo y desde el panel de la caja de herramientas vamos a arrastrar un control de tipo button.

A continuacin arrastraremos un control label al lado del control button quedando la interfaz de la siguiente forma:

Como los controles que se arrastran al formulario estn basados en clases, podemos modificar las propiedades de los controles, para hacerlo basta con seleccionar el control y dirigirse al cuadro de propiedades.

Controles estndar

Vamos a modificar la propiedad Text para el control, para esto nos situamos en la cuadro que contiene el valor y escribimos un nuevo valor en ste caso OK. El botn quedar de la siguiente forma:

Ahora vamos a ejecutar la aplicacin, para esto presionamos la tecla F5. Fjate que en tu pantalla aparecen 2 mensajes, el primero te avisa que Visual Studio levant un servidor local de prueba apuntando hacia la carpeta donde se encuentra tu solucin.

La segunda ventana que aparece te avisa que el archivo de configuracin de tu sitio (web.config) no est configurado para depuracin lo que significa que no podrs ocupar las herramientas de traza de errores o la ejecucin paso a paso, Visual Studio te pregunta si deseas que l modifique el web.config,

en ste caso presionamos OK.

Controles estndar

ste es el resultado del proceso:

Fjate que al presionar el botn no sucede nada, pues no hemos programado an la estructura. Para hacerlo debemos programar un evento. Los eventos en los controles de ASP.NET se ejecutan slo cuando se envan los datos al servidor. Para programar el evento lo podemos hacer de dos formas, la primea es seleccionando el evento desde el listado de eventos del panel de propiedades del control.

Desde ac seleccionamos el evento que queremos programar y al hacer doble clic en l, se crear el delegado para ese evento y se abrir el editor de cdigo. Es ste caso programaremos el evento Click para el botn. La otra forma de programar un evento es hacer doble clic directamente en el control, con esto lograremos que el control abra el editor de cdigo utilizando el delegado por defecto para el control. Una vez hayamos creado el delegado, veremos la siguiente interfaz:

Controles estndar

En ella podremos programar las acciones especficas para el evento que queremos programar. Fjate que debemos ingresar el cdigo en la funcin se ha creado para ser ejecutada cuando ocurra el evento clic. A esta funcin se le conoce como delegado.

Ahora programaremos el evento para modificar una propiedad del control label. Recuerda que al igual que con otros lenguajes orientados a objetos, las propiedades se pueden modificar por cdigo. El cdigo resultante ser el siguiente:

Al ejecutar la pgina ahora y presionar el botn, los datos se envan al servidor, ste recibe los datos ejecuta el cdigo y devuelve la pgina con los nuevos estados de los objetos.

Controles estndar

Niveles de pensamiento: CONOCIMIENTO: Repetir.

Ejercicio 02 :Controles Standar Duracin: 45 minutos

1._ REPITE los paso a paso para ejecutar los controles estandar.

Actividades