VISUAL VISUAL BASIC.NETBASIC.NETMODULO IIIMODULO III

Introducción a las aplicaciones Introducción a las aplicaciones Web FormsWeb Forms

Tradicionalmente:Tradicionalmente:

Las aplicaciones Web se desarrollaban Las aplicaciones Web se desarrollaban siguiendo un modelo mixto intercalando siguiendo un modelo mixto intercalando código HTML y JavaScript junto con código HTML y JavaScript junto con código que se ejecutaría en el servidor código que se ejecutaría en el servidor (parte servidora).(parte servidora).

Contrasta:Contrasta:

Con el modelo orientado a eventos que define Con el modelo orientado a eventos que define la interfaz de usuario colocando controles en la interfaz de usuario colocando controles en un contenedor y se escribe el código que un contenedor y se escribe el código que actuará como respuesta a las interacciones de actuará como respuesta a las interacciones de los usuarios sobre estos controles. los usuarios sobre estos controles.

La principal característica de las aplicaciones La principal característica de las aplicaciones Web es que la interfaz de usuario (lo que los Web es que la interfaz de usuario (lo que los usuarios de la aplicación ven) se ejecuta en usuarios de la aplicación ven) se ejecuta en un lugar diferente al código de la aplicación un lugar diferente al código de la aplicación que reside en un servidor. que reside en un servidor.

Las principales desventajas de este tipo Las principales desventajas de este tipo de codificación son las siguientes:de codificación son las siguientes:• No existe separación entre el diseño y la No existe separación entre el diseño y la

lógica de las aplicaciones.lógica de las aplicaciones.• En ASP clásico no existe el concepto de En ASP clásico no existe el concepto de

control para la interfaz de usuario.control para la interfaz de usuario.• No disponemos de forma de detectar en el No disponemos de forma de detectar en el

servidor que se ha realizado algo en el cliente.servidor que se ha realizado algo en el cliente.• No existe constancia del estado de los No existe constancia del estado de los

controles de cada página entre las llamadas.controles de cada página entre las llamadas.• No existe el concepto de Propiedad de los No existe el concepto de Propiedad de los

controles.controles. • Los controles complejos no tienen forma de Los controles complejos no tienen forma de

enviar sus valores al servidor. enviar sus valores al servidor.

La principal aportación de ASP.NET al mundo La principal aportación de ASP.NET al mundo de la programación es que ha llevado a la Web de la programación es que ha llevado a la Web el paradigma de la programación orientada a el paradigma de la programación orientada a eventos propia de aplicaciones de escritorio, eventos propia de aplicaciones de escritorio, ofreciendo:ofreciendo:• Separación entre diseño y lógica. Separación entre diseño y lógica. • Componentes de interfaz de usuario, tanto Componentes de interfaz de usuario, tanto

estándar como de terceras empresas o propios. estándar como de terceras empresas o propios. • Diseñadores gráficos. Diseñadores gráficos. • Eventos. Eventos. • Estado. Estado. • Enlazado a datos desde la interfaz. Enlazado a datos desde la interfaz. • Esto como se verá marca un antes y un después Esto como se verá marca un antes y un después

en la programación para Internet. en la programación para Internet.

Fundamentos del desarrollo Fundamentos del desarrollo de Aplicaciones Webde Aplicaciones Web

Los programadores de ASP.NET Los programadores de ASP.NET disponen de todo lo que "siempre" han disponen de todo lo que "siempre" han disfrutado los programadores de disfrutado los programadores de Windows: diseñadores visuales, Windows: diseñadores visuales, asistencia avanzada contextual, código asistencia avanzada contextual, código compilado de alto rendimiento, compilado de alto rendimiento, transparencia acerca de dónde se transparencia acerca de dónde se ejecuta cada parte del código, enlace a ejecuta cada parte del código, enlace a datos, rejillas, etc...datos, rejillas, etc...

Páginas ASPXPáginas ASPX

Las páginas de servidor de ASP.NET Las páginas de servidor de ASP.NET son en esencia archivos de texto que son en esencia archivos de texto que contienen HTML y etiquetas y que contienen HTML y etiquetas y que tienen una extensión '.aspx'. Por ello tienen una extensión '.aspx'. Por ello se les denomina de modo genérico se les denomina de modo genérico páginas ASPX.páginas ASPX.Por compatibilidad, se puede usar en Por compatibilidad, se puede usar en gran medida todo lo que conocemos gran medida todo lo que conocemos de ASP 3.0, lo cual no quiere decir de ASP 3.0, lo cual no quiere decir que sea lo más recomendable.que sea lo más recomendable.

El entorno de desarrolloEl entorno de desarrollo

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

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:

EXPLORANDO EL EXPLORANDO EL ENTORNOENTORNO

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

EXPLORADOR DE SOLUCIONESEXPLORADOR DE SOLUCIONESEste elemento contiene un árbol con los Este elemento contiene un árbol con los proyectos en los que estamos trabajando y los proyectos en los que estamos trabajando y los diferentes archivos y carpetas que forman parte diferentes archivos y carpetas que forman parte

de ellos.de ellos.

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

tiempo trabajando.tiempo trabajando.

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

EDITOR DE PROPIEDADESEDITOR DE PROPIEDADES Este editor sirve para ajustar las propiedades de Este editor sirve para ajustar las propiedades de todos los objetos que podamos utilizar en el todos los objetos que podamos utilizar en el entorno: tanto de los controles que se arrastran entorno: tanto de los controles que se arrastran sobre un diseñador como de los propios archivos sobre un diseñador como de los propios archivos del explorador de soluciones y las etiquetas del explorador de soluciones y las etiquetas HTML o XML, etc... HTML o XML, etc...

BARRAS DE HERRAMIENTAS Y BARRAS DE HERRAMIENTAS Y MENÚSMENÚSSe sitúan en la parte superior y dan acceso al Se sitúan en la parte superior y dan acceso al resto de las características de la herramienta de resto de las características de la herramienta de trabajo. Según el contexto en el que nos trabajo. Según el contexto en el que nos encontremos las barras de herramientas que encontremos las barras de herramientas que veremos serán distintas. veremos serán distintas.

Los campos ocultos se utilizan para almacenar Los campos ocultos se utilizan para almacenar información sobre la página y el código JavaScript información sobre la página y el código JavaScript se ocupa de su mantenimiento y de enviar el se ocupa de su mantenimiento y de enviar el formulario al servidor ante determinadas acciones formulario al servidor ante determinadas acciones del usuario (simulando los eventos).del usuario (simulando los eventos).Uno de los campos ocultos más importantes es el Uno de los campos ocultos más importantes es el que se refiere al que se refiere al ViewStateViewState..

El El ViewState ViewState - que se podría traducir como - que se podría traducir como "Estado de Visualización" - recoge de "Estado de Visualización" - recoge de manera automática el estado y el contenido manera automática el estado y el contenido de los controles de una página. Esta de los controles de una página. Esta información se utiliza para dejarlos como información se utiliza para dejarlos como estaban en cada recarga de la página. estaban en cada recarga de la página.

A cada viaje de ida y vuelta de nuestra A cada viaje de ida y vuelta de nuestra página al servidor como consecuencia de página al servidor como consecuencia de un evento en el cliente se le denomina un evento en el cliente se le denomina PostBackPostBack. Se puede averiguar si la carga . Se puede averiguar si la carga actual de la página es la primera o se actual de la página es la primera o se trata de un trata de un PostBack PostBack consultando el valor consultando el valor booleano de la propiedad booleano de la propiedad IsPostBackIsPostBack de de la página (la página (Me.IsPostbackMe.IsPostback).).

Los mecanismos de Los mecanismos de ViewState ViewState y de y de PostBackPostBack son los responsables de que, a son los responsables de que, a efectos prácticos, podamos trabajar en la efectos prácticos, podamos trabajar en la Web utilizando el paradigma de Web utilizando el paradigma de programación orientada a eventos. programación orientada a eventos.

LOS ARCHIVOS DE CÓDIGOLOS ARCHIVOS DE CÓDIGO

Existen dos: uno que define la interfaz de usuario y Existen dos: uno que define la interfaz de usuario y

otro para la lógica de la aplicación.otro para la lógica de la aplicación. EL ARCHIVO .ASPX DE INTERFAZ DE EL ARCHIVO .ASPX DE INTERFAZ DE

USUARIO.USUARIO.

Todo el código se ejecuta en el servidor, el Todo el código se ejecuta en el servidor, el evento desencadenado por la pulsación se evento desencadenado por la pulsación se gestiona en el servidor, no en el cliente.gestiona en el servidor, no en el cliente.

Para crear la interfaz de usuario sólo hemos Para crear la interfaz de usuario sólo hemos tenido que arrastrar controles Web desde el tenido que arrastrar controles Web desde el cuadro de herramientas al diseñador. Por cuadro de herramientas al diseñador. Por detrás lo que ha estado ocurriendo es que el detrás lo que ha estado ocurriendo es que el código HTML de la página ha estado código HTML de la página ha estado creciendo.creciendo.

El resto de elementos que aparecen son El resto de elementos que aparecen son etiquetas HTML normales (ejetiquetas HTML normales (ej<br/><br/> para para cambio de línea) y unas etiquetas especiales cambio de línea) y unas etiquetas especiales que llevan el prefijo que llevan el prefijo asp:asp:. Este prefijo indica . Este prefijo indica que son controles web de ASP.NET, y como que son controles web de ASP.NET, y como tales son objetos de las clases contenidas en tales son objetos de las clases contenidas en el espacio de nombres el espacio de nombres System.Web.UI.WebControlsSystem.Web.UI.WebControls. Al compilar la . Al compilar la página ASP.NET instancia dichas clases y página ASP.NET instancia dichas clases y las pone a disposición de nuestro código las pone a disposición de nuestro código pasando todo ello inadvertido para pasando todo ello inadvertido para nosotros.nosotros.

EL ARCHIVO .VB DE LÓGICA DE LA APLICACIÓNEL ARCHIVO .VB DE LÓGICA DE LA APLICACIÓN

Éste contiene la "lógica" de la aplicación, Éste contiene la "lógica" de la aplicación, es decir, lo que hace que una interfaz de es decir, lo que hace que una interfaz de usuario se comporte de un determinado usuario se comporte de un determinado modo. modo. Desde este archivo de código podemos Desde este archivo de código podemos responder a cualquier evento de los responder a cualquier evento de los controles de interfaz de usuario o de la controles de interfaz de usuario o de la propia página, y acceder a sus métodos y propia página, y acceder a sus métodos y propiedades. Gracias a la existencia de propiedades. Gracias a la existencia de estos dos archivos podemos independizar estos dos archivos podemos independizar el aspecto de la aplicación (la interfaz) de el aspecto de la aplicación (la interfaz) de lo que queremos hacer con ella. lo que queremos hacer con ella.

LosLos controles de ASP.NET controles de ASP.NET

LOS CONTROLES HTMLLOS CONTROLES HTML

Desde el cuadro de Desde el cuadro de herramientas disponemos del herramientas disponemos del grupo grupo HTML HTML (ver figura (ver figura adjunta) que son controles adjunta) que son controles equivalentes a los de HTML. equivalentes a los de HTML.

Podemos arrastrarlos y soltarlos Podemos arrastrarlos y soltarlos sobre nuestro formulario al sobre nuestro formulario al igual que los otros, pero al igual que los otros, pero al contrario que éstos no se contrario que éstos no se ejecutarán por defecto en el ejecutarán por defecto en el servidor. Sólo aparecerá su servidor. Sólo aparecerá su sintaxis HTML pura.sintaxis HTML pura.

LOS CONTROLES WEBLOS CONTROLES WEB

Aunque algunos son relativamente Aunque algunos son relativamente sencillos (como una etiqueta, un sencillos (como una etiqueta, un botón o un cuadro de texto), existen botón o un cuadro de texto), existen controles muy complejos que sería controles muy complejos que sería difícil recrear desde cero con HTML difícil recrear desde cero con HTML y JavaScript. Por ejemplo el control y JavaScript. Por ejemplo el control calendario, las rejillas de datos, los calendario, las rejillas de datos, los controles maestro-detalle, controles maestro-detalle, validadores, etc...validadores, etc...

ADAPTACIÓN AUTOMÁTICA AL ADAPTACIÓN AUTOMÁTICA AL CLIENTE CLIENTE

ASP.NET permite la adaptación ASP.NET permite la adaptación automática de los controles mostrando automática de los controles mostrando las capacidades y restricciones las capacidades y restricciones concretas en diferentes navegadores y concretas en diferentes navegadores y dispositivos incluso móviles (teléfonos dispositivos incluso móviles (teléfonos y PDA de cualquier marca). A esta y PDA de cualquier marca). A esta característica se la conoce como característica se la conoce como renderización adaptativarenderización adaptativa..

CONTROLES PROPIOSCONTROLES PROPIOS

Existen dos tipos de controles que Existen dos tipos de controles que podremos crear:podremos crear: Controles Web:Controles Web: son controles como los que son controles como los que

hemos visto hasta ahora y equiparables en hemos visto hasta ahora y equiparables en todos sus aspectos a los controles nativos de todos sus aspectos a los controles nativos de ASP.NET 2.0.ASP.NET 2.0.

Controles de usuario:Controles de usuario: permiten la permiten la reutilización de partes completas de la reutilización de partes completas de la interfaz de usuario y de la lógica asociada a interfaz de usuario y de la lógica asociada a ésta. Sin embargo son muy fáciles de crear y ésta. Sin embargo son muy fáciles de crear y ofrecen un método sencillo de encapsular ofrecen un método sencillo de encapsular funcionalidades que incluyan interfaz de funcionalidades que incluyan interfaz de usuario.usuario.

CONTROLES WEB DE VALIDACIÓNCONTROLES WEB DE VALIDACIÓNEstos controles permiten definir reglas de Estos controles permiten definir reglas de validación en la entrada de datos. Dichas validación en la entrada de datos. Dichas reglas se asocian con otros controles que reglas se asocian con otros controles que forman parte del formulario Web, y se forman parte del formulario Web, y se combinan entre ellos para especificar combinan entre ellos para especificar múltiples restricciones sobre los datos múltiples restricciones sobre los datos introducidos. introducidos. La La principal ventajaprincipal ventaja de estos controles de estos controles es que permiten la definición de reglas de es que permiten la definición de reglas de validación de forma validación de forma declarativadeclarativa, es decir, , es decir, no hace falta escribir código para usarlos. no hace falta escribir código para usarlos. Ello facilita mucho el desarrollo y el Ello facilita mucho el desarrollo y el mantenimiento de las reglas de validación. mantenimiento de las reglas de validación.

USO DE LOS CONTROLES DE VALIDACIÓNUSO DE LOS CONTROLES DE VALIDACIÓN

Cada control de validación que Cada control de validación que arrastremos se debe asociar al control arrastremos se debe asociar al control del que deberá "estar pendiente". Por del que deberá "estar pendiente". Por supuesto es posible arrastrar varios supuesto es posible arrastrar varios validadores y asociarlos a un mismo validadores y asociarlos a un mismo control para así verificar varias control para así verificar varias condiciones. Lo contrario no es cierto, condiciones. Lo contrario no es cierto, es decir, no se puede usar un solo es decir, no se puede usar un solo validador para verificar varios controles. validador para verificar varios controles. El control a verificar se asigna mediante El control a verificar se asigna mediante la propiedad la propiedad ControlToValidateControlToValidate del del control de validación.control de validación.

Aunque su Aunque su utilidad es utilidad es bastante bastante intuitiva, la intuitiva, la siguiente tabla siguiente tabla indica el uso indica el uso apropiado de apropiado de cada uno de los cada uno de los controles controles disponibles:disponibles:

Control   Utilidad

RequiredFiledValidator Verifica que el control asociado no se encuentra vacío.

RangeValidator Genera un mensaje de error cuando el contenido de su control asociado está fuera de un rango de valores dado. Permite validar intervalos numéricos (enteros o decimales o monedas), fechas y cadenas de texto.

RegularExpressionValidator Compara un texto introducido por el usuario con una expresión regular.

CompareValidator Permite comparar el valor introducido por el usuario con una constante o con el valor de la propiedad de otro control.

CustomValidator Se usa para implementar lógica de validación propia tanto en el cliente como en el servidor.