Presentación de Visual Web Developer 2005 Express Edition

Alfonso Goyeneche TorresPresidencia Nacional

Comunidad Académica MicrosoftJunta Directiva Nacional (JDN)

MCP

Módulo 2: Creación de una interfaz de usuario basada en formulario Web

• Objetivos y Requisitos Previos• Familiarización con varias ventanas

de VS Web Developer Edition 2005• Controles Web ASP.NET 2.0• Posicionamiento Absoluto y Relativo• Barra de herramientas de disposición• Conclusiones

Lección 1: Objetivos y Requisitos Previos

• Familiarización con las ventanas más usuales de la herramienta.

• Conocer de cerca los controles Web ASP.NET más comunes para desarrollar páginas Web ASP.NET.

Requisitos Previos

• Experiencia con el lenguaje HTML• Conocimiento del lenguaje de

programación C#• Descargar la herramienta:

– http://msdn.microsoft.com/vstudio/express/vwd/

• Nivel de complejidad: 100

Lección 2: Familiarización con varias ventanas de VS Web Developer Edition 2005

• Su instructor le demostrará, de forma guiada, las distintas ventanas de la herramienta

Lección 3: Controles Web ASP.NET 2.0

• Label• TextBox• DropDownList• RadioButton• CheckBox• HyperLink• Button• Controles de validación

Label

• El control de servidor Web Label le permite establecer texto en una página ASP.NET.

• Típicamente, se utiliza un control Label cuando se desea cambiar texto en la página cuando se está ejecutando, por ejemplo, como respuesta al click de un botón.

• Soporta estilos CSS y temas.• Ideal para modificación dinámica

Label (cont.)

• Otras alternativas a Label para mostrar texto:– Usar texto en formato HTML

• Si no requiere cambiar dinámicamente el texto en la página.

– Usar un control Web Literal• Si desea cambiar texto dinámicamente.• No soporta estilos CSS, temas ni

modificaciones de apariencia.

TextBox

• El control de servidor Web TextBox permite introducir texto, números y fechas en una página ASP.NET.

• Configuraciones:– Single Line: Soporta una sola línea de texto.

Opcionalmente, se puede definir longitud de la cadena.– Password: Igual a Single Line, pero las letras y números se

presentan en pantalla en forma de asteriscos– Multiline: Permite introducir texto en más de una línea.

Ideal para escribir párrafos. Opcionalmente, se puede definir longitud del párrafo.

• Seguridad– Un control TextBox verifica, al momento de ser enviado al

servidor, que el texto introducido no sea código de script malicioso o elementos HTML.

• Soporta estilos CSS, temas y skins

DropDownList

• El control de servidor Web DropDownList permite seleccionar un elemento de una lista variada desplegable de elementos.

• Permite establecer el alto y ancho del texto a desplegar– Nota: algunos navegadores Web no

permiten este comportamiento.

• Permite aplicar estilos CSS.

RadioButton

• El control de servidor Web RadioButton permite escoger una selección de texto en una página Web ASP.NET.

• Rara vez se utiliza individualmente.• Se debe agrupar con otros controles

RadioButton cuando se desea escoger una sola opción entre varios elementos.

• Soporta estilos CSS.

CheckBox

• El control de servidor Web CheckBox permite escoger una selección verdadera / falsa en una página Web ASP.NET.

• Ideal para preguntas SI / NO.• Soporta estilos CSS.

HyperLink

• El control de servidor Web HyperLink permite vincular una dirección URL a un texto presentado en pantalla.

• Opcionalmente, se puede definir en su comportamiento que se presente como texto o como una imagen.

• Soporta estilos CSS.

Button

• El control de servidor Web Button permite presentar un botón en una página Web ASP.NET, la cual puede causar un evento o generar una acción.

• Permite crear un evento Submit o un comando, el cual será ejecutado en el servidor.– Por defecto, el control creará un evento Submit.– Use la propiedad CommandName para establecer

el comando a ejecutar con cautela.

• Soporta estilos CSS.

Controles de validación

• Controles de validación del lado del cliente

• Controles de validación Web ASP.NET

Controles de validación del lado del cliente

• El navegador del cliente debe soportar Dynamic HTML (DHTML).

• Se deben vincular librerías de scripts para realizar la validación.

• Soporta variables globales

Controles de validación Web ASP.NET

• RequiredFieldValidator– Verifica que el usuario no omita una entrada

en una página Web ASP.NET.

• CompareValidator– Compara un valor o cadena introducida por un

usuario contra una constante, contra el valor de otro control o un tipo específico de datos.

• RangeValidator– Verifica que un valor introducido por un

usuario esté dentro de los límites mínimo y máximo de un rango establecido. Pueden ser letras, números o fechas.

Controles de validación Web ASP.NET (cont.)

• RegularExpressionValidator– Sirve para comparar un valor o cadena

introducido por un usuario en una página Web con un patrón conocido,

• Por ejemplo, si en un control se debe introducir una dirección de E-mail, se verifica que la cadena tenga el signo “@”

• CustomValidator– Sirve para crear reglas propias de validación.

• ValidationSummary– Presenta un consolidado de todos los mensajes

de error de validación que ha generado la página.

Lección 4: Posicionamiento Absoluto y Relativo

• Posicionamiento Relativo– Conocido también como posicionamiento

de flujo (flow layout), coloca todos los elementos de la página de manera contigua.

• Posicionamiento Absoluto– Conocido también como posicionamiento

de grilla (grid layout), permite colocar los elementos de la página de manera libre, de acuerdo a las coordenadas z-index, left y top, basado en un tag Style.

Lección 5: Barra de herramientas de disposición

• Barra de herramientas que permite acceder de forma rápida a los comandos de organización de los elementos de la página Web.

Demo

• Su instructor le demostrará, de forma guiada, el desarrollo de una página Web ASP.NET

Conclusiones

• Visual Web Developer 2005 Express Edition es una herramienta que incorpora todos los controles de servidor Web ASP.NET 2.0 necesarios para desarrollar una página Web con riqueza de experiencia de usuario.

• Controles programables y personalizables.

• Mayor control sobre el comportamiento vs. controles Web HTML.

Para mayor información

• Sitio oficial del producto– http://msdn.microsoft.com/vstudio/express/vwd

/

• Portal de la CAM– http://cam.org.co

• Contactos, eventos y entrenamiento– Alfonso Goyeneche:

alfonso.goyeneche@cam.org.co

Gracias