VISUAL BASIC.NET MODULO III. Introducción a las aplicaciones Web Forms Tradicionalmente: Las aplicaciones Web se desarrollaban siguiendo un modelo mixto.

Presentación del tema: "VISUAL BASIC.NET MODULO III. Introducción a las aplicaciones Web Forms Tradicionalmente: Las aplicaciones Web se desarrollaban siguiendo un modelo mixto."— Transcripción de la presentación:

1 VISUAL BASIC.NET MODULO III

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

3 Contrasta: Con el modelo orientado a eventos que define la interfaz de usuario colocando controles en un contenedor y se escribe el código que actuará como respuesta a las interacciones de los usuarios sobre estos controles. La principal característica de las aplicaciones Web es que la interfaz de usuario (lo que los usuarios de la aplicación ven) se ejecuta en un lugar diferente al código de la aplicación que reside en un servidor.

4 Las principales desventajas de este tipo de codificación son las siguientes: No existe separación entre el diseño y la lógica de las aplicaciones. No existe separación entre el diseño y la lógica de las aplicaciones. En ASP clásico no existe el concepto de control para la interfaz de usuario. En ASP clásico no existe el concepto de control para la interfaz de usuario. No disponemos de forma de detectar en el servidor que se ha realizado algo en el cliente. No disponemos de forma de detectar en el servidor que se ha realizado algo en el cliente. No existe constancia del estado de los controles de cada página entre las llamadas. No existe constancia del estado de los controles de cada página entre las llamadas. No existe el concepto de Propiedad de los controles. No existe el concepto de Propiedad de los controles. Los controles complejos no tienen forma de enviar sus valores al servidor. Los controles complejos no tienen forma de enviar sus valores al servidor.

5 La principal aportación de ASP.NET al mundo de la programación es que ha llevado a la Web el paradigma de la programación orientada a eventos propia de aplicaciones de escritorio, ofreciendo: Separación entre diseño y lógica. Separación entre diseño y lógica. Componentes de interfaz de usuario, tanto estándar como de terceras empresas o propios. Componentes de interfaz de usuario, tanto 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 en la programación para Internet. Esto como se verá marca un antes y un después en la programación para Internet.

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

7 Páginas ASPX 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. Por compatibilidad, se puede usar en gran medida todo lo que conocemos de ASP 3.0, lo cual no quiere decir que sea lo más recomendable.

8 El entorno de desarrollo Visual Studio 2005 es el entorno de desarrollo de aplicaciones Web para la versión 2.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.

9 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:

10 EXPLORANDO EL ENTORNO Tras crear un proyecto nuevo, el entorno tiene un aspecto similar a este:

11 EXPLORADOR DE SOLUCIONES 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.

12 ÁREA DE DOCUMENTOS ÁREA DE DOCUMENTOS 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.

13 CUADRO DE HERRAMIENTAS CUADRO DE HERRAMIENTAS 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.

14 EDITOR DE PROPIEDADES EDITOR DE PROPIEDADES 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...

15 BARRAS DE HERRAMIENTAS Y MENÚS 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.

16 Los campos ocultos se utilizan para almacenar información sobre la página y el código JavaScript se ocupa de su mantenimiento y de enviar el formulario al servidor ante determinadas acciones del usuario (simulando los eventos). Los campos ocultos se utilizan para almacenar información sobre la página y el código JavaScript se ocupa de su mantenimiento y de enviar el formulario al servidor ante determinadas acciones del usuario (simulando los eventos). Uno de los campos ocultos más importantes es el que se refiere al ViewState. El ViewState - que se podría traducir como "Estado de Visualización" - recoge de manera automática el estado y el contenido de los controles de una página. Esta información se utiliza para dejarlos como estaban en cada recarga de la página. El ViewState - que se podría traducir como "Estado de Visualización" - recoge de manera automática el estado y el contenido de los controles de una página. Esta información se utiliza para dejarlos como estaban en cada recarga de la página.

17 A cada viaje de ida y vuelta de nuestra página al servidor como consecuencia de un evento en el cliente se le denomina PostBack. Se puede averiguar si la carga actual de la página es la primera o se trata de un PostBack consultando el valor booleano de la propiedad IsPostBack de la página (Me.IsPostback). A cada viaje de ida y vuelta de nuestra página al servidor como consecuencia de un evento en el cliente se le denomina PostBack. Se puede averiguar si la carga actual de la página es la primera o se trata de un PostBack consultando el valor booleano de la propiedad IsPostBack de la página (Me.IsPostback). Los mecanismos de ViewState y de PostBack son los responsables de que, a efectos prácticos, podamos trabajar en la Web utilizando el paradigma de programación orientada a eventos. Los mecanismos de ViewState y de PostBack son los responsables de que, a efectos prácticos, podamos trabajar en la Web utilizando el paradigma de programación orientada a eventos.

18 LOS ARCHIVOS DE CÓDIGO LOS ARCHIVOS DE CÓDIGO Existen dos: uno que define la interfaz de usuario y otro para la lógica de la aplicación. EL ARCHIVO.ASPX DE INTERFAZ DE USUARIO. EL ARCHIVO.ASPX DE INTERFAZ DE USUARIO. Todo el código se ejecuta en el servidor, el evento desencadenado por la pulsación se gestiona en el servidor, no en el cliente. Para crear la interfaz de usuario sólo hemos tenido que arrastrar controles Web desde el cuadro de herramientas al diseñador. Por detrás lo que ha estado ocurriendo es que el código HTML de la página ha estado creciendo.

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

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

21 Los controles de ASP.NET LOS CONTROLES HTML LOS CONTROLES HTML Desde el cuadro de herramientas disponemos del grupo HTML (ver figura adjunta) que son controles equivalentes a los de HTML. Podemos arrastrarlos y soltarlos sobre nuestro formulario al igual que los otros, pero al contrario que éstos no se ejecutarán por defecto en el servidor. Sólo aparecerá su sintaxis HTML pura.

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

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

24 CONTROLES PROPIOS CONTROLES PROPIOS Existen dos tipos de controles que podremos crear: Controles Web: son controles como los que hemos visto hasta ahora y equiparables en todos sus aspectos a los controles nativos de ASP.NET 2.0. Controles Web: son controles como los que hemos visto hasta ahora y equiparables en todos sus aspectos a los controles nativos de ASP.NET 2.0. Controles de usuario: permiten la reutilización de partes completas de la interfaz de usuario y de la lógica asociada a ésta. Sin embargo son muy fáciles de crear y ofrecen un método sencillo de encapsular funcionalidades que incluyan interfaz de usuario. Controles de usuario: permiten la reutilización de partes completas de la interfaz de usuario y de la lógica asociada a ésta. Sin embargo son muy fáciles de crear y ofrecen un método sencillo de encapsular funcionalidades que incluyan interfaz de usuario.

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

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

27 Aunque su utilidad es bastante intuitiva, la siguiente tabla indica el uso apropiado de cada uno de los controles disponibles: Control Utilidad RequiredFiledValidatorVerifica que el control asociado no se encuentra vacío. RangeValidatorGenera 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. RegularExpressionValidatorCompara un texto introducido por el usuario con una expresión regular. CompareValidatorPermite comparar el valor introducido por el usuario con una constante o con el valor de la propiedad de otro control. CustomValidatorSe usa para implementar lógica de validación propia tanto en el cliente como en el servidor.