taller de programación web

TALLER DE PROGRAMACIÓN
WEB
Ing. David Gil
Unidad Didáctica: Taller de Programación Web | 2
Web Controls (Controles Web)
Los controles de servidor HTML proporcionan una forma relativamente rápida para migrar a ASP.NET, pero
no necesariamente la mejor manera. Por un lado, los nombres de los controles HTML y sus atributos no
siempre son intuitivos, y no tienen el mismo soporte en tiempo de diseño para conectar los controladores de
eventos. Los controles HTML también tienen ciertas limitaciones, tales como las propiedades de estilo que
se debe establecer a través de la sintaxis CSS (que es más difícil que establecer una propiedad directa) y que
los eventos de cambio no pueden ser aplicados hasta que se realice una operación de posted back en
respuesta a otra acción. Por último, los controles de servidor HTML no pueden proveer elementos de interfaz
de usuario que no estén ya definidos en el estándar HTML. Si desea crear algún tipo de control global que
utiliza una combinación de elementos HTML para hacer una interfaz compleja, tienes que crearlo tú mismo.
Para abordar estas cuestiones, ASP.NET proporciona un modelo de mayor nivel de control web. Todos los
controles web se definen en el espacio de nombres System.Web.UI.WebControls y se derivan de la clase base
WebControl, que ofrece un modelo más abstracto y coherente que los controles de servidor HTML. Los
controles Web también permiten funciones adicionales, como la devolución automática. Pero la parte
realmente importante es que no muchos controles no sólo mapean una etiqueta HTML única, sino que
generan una salida más complejo formado por varias etiquetas de código HTML y JavaScript. Los ejemplos
incluyen las listas de casillas de verificación, botones de radio, calendarios, cuadrículas editable, y así
sucesivamente.
Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia
Ing. David Gil
Unidad Didáctica: Taller de Programación Web | 3
La clase base WebControl
Todos los controles Web heredan de la clase WebControl. La clase WebControl también a su vez deriva de
Control. Como resultado, muchas de sus propiedades y métodos -tales como Controls, Visible y
FindControl()- son similares a los de los controles de servidor HTML. Sin embargo, la clase WebControl agrega
las propiedades que aparecen a continuación en la tabla.
Propiedades de la clase WebControl
Propiedad
Descripción
AccessKey
Devuelve o establece el método abreviado de teclado que permite al usuario
desplazarse rápidamente al control. Por ejemplo, si se define como A, el usuario
puede mover el foco a este control pulsando Alt + A.
BackColor
Devuelve o establece el color de fondo.
BorderColor
Devuelve o establece el color del borde.
BorderStyle
Uno de los valores de la enumeración BorderStyle, incluyendo Dashed, Dotted,
Double, Groove, Ridge, Inset, Outset, Solid, y None.
BorderWidth
Devuelve o establece el ancho del borde.
CssClass
Devuelve o establece el estilo CSS para asociar con el control. El estilo CSS se puede
definir en una sección de <style> en la parte superior de la página o en un archivo
CSS independiente que hace referencia la página.
Enabled
Devuelve o establece el estado habilitado del control. Si es false, el control suele
mostrarse en gris y no es utilizable.
Font
Devuelve un objeto con toda la información de estilo de la fuente utilizada para el
texto del control.
ForeColor
Devuelve o establece el color de primer plano, por ejemplo el texto del control.
Height
Devuelve o establece la altura del control.
TabIndex
Un número que le permite controlar el orden de tabulación. El control con un
TabIndex de 0 tiene el foco cuando la página se carga por primera vez. Al pulsar Tab
mueve al usuario el control con el TabIndex siguiente más baja, siempre que esté
activado. Esta propiedad sólo es compatible en Internet Explorer 4.0 y superior.
Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia
Ing. David Gil
Unidad Didáctica: Taller de Programación Web | 4
Tooltip
Muestra un mensaje de texto cuando el usuario pasa el ratón por encima del control.
Muchos de los navegadores más antiguos no soportan esta característica.
Width
Devuelve o establece el ancho del control.
Las clases básicas de Web Controls
ASP.NET incluye controles Web que duplican cada control de servidor HTML y ofrecen la misma
funcionalidad. Estos controles web heredan de WebControl y añaden sus propias propiedades y eventos. En
la tabla siguente se resume estos controles.
Declaración de
etiqueta ASP.NET
HTML Generado
Miembros específicos
<asp:Button>
<input type="submit"/> or
Text, CausesValidation, PostBackUrl,
<input type="button"/>
ValidationGroup, Click event
<input type="checkbox"/>
AutoPostBack, Checked, Text,
<asp:CheckBox>
TextAlign, CheckedChanged event
<asp:FileUpload>
<input type="file">
FileBytes, FileContent, FileName,
HasFile, PostedFile, SaveAs()
<asp:HiddenField>
<input type="hidden">
Value
<asp:HyperLink>
<a>...</a>
ImageUrl, NavigateUrl, Target, Text
<asp:Image>
<img/>
AlternateText, ImageAlign, ImageUrl
<asp:ImageButton>
<input type="image"/>
CausesValidation, ValidationGroup,
Click event
<asp:ImageMap>
<map>
HotSpotMode, HotSpots (collection),
AlternateText, ImageAlign, ImageUrl
<asp:Label>
<span>...</span>
Text, AssociatedControlID
<asp:LinkButton>
<a><img/></a>
Text, CausesValidation, ValidationGroup, Click event
Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia
Ing. David Gil
Unidad Didáctica: Taller de Programación Web | 5
<asp:Panel>
<div>...</div>
BackImageUrl, DefaultButton,
GroupingText, HorizontalAlign,
Scrollbars, Wrap
<asp:RadioButton>
<input type="radio"/>
AutoPostBack, Checked, GroupName,
Text, TextAlign, CheckedChanged event
<asp:Table>
<table>...</table>
BackImageUrl, CellPadding,
CellSpacing, GridLines,
HorizontalAlign, Rows (collection)
<asp:TableCell>
<td>...</td>
ColumnSpan, HorizontalAlign,
RowSpan, Text, VerticalAlign, Wrap
<asp:TableRow>
<tr>...</tr>
Cells (collection), HorizontalAlign,
VerticalAlign
<asp:TextBox>
<input type="text"/> or
AutoPostBack, Columns, MaxLength,
<textarea>...</textarea>
ReadOnly, Rows, Text, TextMode, Wrap,
TextChanged event
Manejando eventos de controles web
Los eventos del lado del servidor trabajan de la misma forma que los eventos de servidor de los controles de
servidor HTML. En lugar de ServerClick, hay un evento Click, y en lugar de los eventos genéricos
ServerChange hay eventos específicos, como CheckedChanged (para el RadioButton y CheckButton) y
TextChanged (para el cuadro de texto), pero el comportamiento sigue siendo el mismo.
El evento Click y el control ImageButton
Un control que envía información adicional es el control ImageButton. Envía un objeto especial
ImageClickEventArgs (del espacio de nombres System.Web.UI) que proporciona propiedades X y Y que
representan la ubicación en donde la imagen fue clikeada. Con esta información adicional, puede crear un
mapa de imagen del lado del servidor.
Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia
Ing. David Gil
Unidad Didáctica: Taller de Programación Web | 6
Los controles List
Los controles List son controles web especializados que generan cuadros de lista, listas desplegables, y otros
controles de repetir que puede ser enlazado a un origen de datos (como una base de datos o una colección no
modificable de valores) o mediante programación rellenados de elementos. La mayoría de los controles de
lista permiten al usuario seleccionar uno o más elementos, pero el BulletedList es una excepción -se muestra
una lista estática numerada o con viñetas. La siguiente tabla muestra todos los controles list.
Control
Descripción
<asp:DropDownList>
Una lista desplegable poblado por una colección de objetos
<asp:ListItem>. En HTML, es renderiada por una etiqueta <select> con
el atributo size = "1".
<asp:ListBox>
Un cuadro de lista poblada por una colección de objetos
<asp:ListItem>. En HTML, es renderiada por una etiqueta <select> con
el atributo size = "x", donde x es el número de elementos visibles.
<asp:CheckBoxList>
Sus elementos se representan como casillas de verificación, alineadas
en una tabla con una o más columnas.
<asp:RadioButtonList>
Igual que el <asp:CheckBoxList>, pero los elementos se representan
como botones de radio.
<asp:BulletedList>
Una lista estática numerada o con viñetas. En HTML, se representan
con la etiqueta <ul> o <ol>. También puede utilizar este control para
crear una lista de hipervínculos.
Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia
Ing. David Gil