Estilos

Artículo
10/07/2008

Actualización: noviembre 2007

Todos los controles ASP.NET Mobile proporcionan propiedades de estilo que se pueden utilizar para personalizar el modo en que se representan. Para mayor comodidad, los estilos se pueden agrupar, con lo que se favorece la coherencia entre los diferentes elementos de una página. Utilice un control StyleSheet o un elemento Style para proporcionar acceso a propiedades específicas del control y de las funciones del dispositivo.

Nota:
No existe ninguna garantía de que se vaya a aceptar la configuración de las propiedades de estilo. Si un dispositivo de destino no admite un estilo determinado, ASP.NET omite el estilo o lo sustituye por otro.

Herencia de estilos

Si no se especifican de forma explícita las propiedades de estilo para un control (ya sea directa o indirectamente, mediante una referencia de estilo), el control hereda las propiedades de estilo de su contenedor. La mayoría de las propiedades de estilo tienen como valor predeterminado null o un valor enumerado NotSet. Esto facilita la distinción entre las propiedades de estilo que se han establecido de forma explícita y las que no se han establecido.

Estilos declarados de forma explícita

Hay dos maneras de declarar explícitamente un estilo para un control. Una es establecer una propiedad de estilo. Supongamos, por ejemplo, que crea un formulario y le agrega un control Label. (La etiqueta es entonces un control secundario del formulario.) Si después establece la propiedad Font-Name de dicha etiqueta en "Arial", la etiqueta utiliza la fuente Arial.

La otra manera es establecer la propiedad StyleReference del control.

Establecer estilos mediante un control DeviceSpecific

Las propiedades de estilo también se pueden establecer a través de un control DeviceSpecific. El ejemplo siguiente muestra una etiqueta que se muestra en cursiva en la mayoría de los dispositivos y en negrita en los dispositivos de escritorio.

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %>
<script language="C#" >
// A custom method to determine if the page 
// is displayed on a mobile device
public bool IsDesktop(System.Web.Mobile.MobileCapabilities 
    capabilities, String argument)
{
    return !capabilities.IsMobileDevice;
}
</script>
<Mobile:StyleSheet >
  <Style Name="ListStyle" Font-Italic="true">
    <DeviceSpecific>
      <Choice Filter="IsDesktop" Font-Italic="false" 
        Font-Bold="true" />
    </DeviceSpecific>
  </Style>
</Mobile:StyleSheet>
<Mobile:Form runat=server>
  <Mobile:Label id="list1" runat=server StyleReference="ListStyle">
    Here is some text
  </Mobile:Label>
</Mobile:Form>

Algoritmo de búsqueda de un estilo al que se hace referencia

Cuando se hace referencia a un estilo a través de la propiedad StyleReference, ASP.NET realiza comprobaciones en un orden determinado para determinar qué estilo debe aplicarse. En el caso de los controles secundarios (controles dentro de un control contenedor primario), las reglas para determinar las características del elemento secundario se describen en la lista siguiente, donde Font-Size se utiliza como ejemplo:

Si se ha establecido el atributo Font-Size explícitamente para un control secundario, el control utiliza esa configuración.
Por otra parte, si se establece la propiedad StyleReference del control secundario (por ejemplo, myChild.StyleReference = someStyle), el control utiliza el valor del atributo Font-Size del elemento Style al que se hace referencia (por ejemplo, someStyle). El control secundario tiene acceso al valor de la manera siguiente:
1. El control secundario busca primero el estilo al que se hace referencia en la hoja de estilos de la instancia de MobilePage actual.
2. Si no lo encuentra en la hoja de estilos de la página, hace referencia a la hoja de estilos predeterminada del sistema.
3. Si el control secundario no encuentra el valor en ninguna de las hojas de estilos, se genera un error en tiempo de ejecución.
Si el estilo no está disponible directa o indirectamente, no se ha establecido la propiedad StyleReference y el control secundario obtiene el valor de su atributo Font-Size aplicando este procedimiento al control primario de forma recursiva.
Si la recursividad alcanza el límite de la jerarquía del control sin encontrar un valor explícito para la propiedad Font-Size, el control utiliza el tamaño de fuente predeterminado.

Este algoritmo permite hacer referencia a estilos diferentes desde varios controles. Admite herencia de los controles contenedores, y sigue el código estándar y las expectativas lógicas.

Excepciones del algoritmo de búsqueda

Hay dos excepciones para el algoritmo de búsqueda:

Un color de fondo no recibe su valor del objeto primario. (Este comportamiento es coherente con el de las hojas de estilos en cascada.)
Los controles DeviceSpecific no heredan los valores del control primario. Normalmente, un control DeviceSpecific se crea explícitamente para un control o tipo de control concreto.

Hojas de estilos

Los controles ASP.NET Mobile proporcionan una hoja de estilos predeterminada que establece un número limitado de estilos. Para obtener más información, vea StyleSheet. Estos valores predeterminados se pueden reemplazar de forma sencilla por valores personalizados. Una sola hoja de estilos puede contener cualquier número de declaraciones de elemento <Style>. Cada elemento <Style> está identificado por una propiedad Name única. Es posible establecer la propiedad StyleReference de otro control en la propiedad Name, con lo que se hace referencia a su estilo. También se puede utilizar esta técnica para hacer referencia a un estilo desde otro estilo.

Hojas de estilos externas

Es posible definir una hoja de estilos externa que se puede utilizar para varios controles. Esto es de gran utilidad si se desea utilizar los mismos estilos en varias páginas. Para crear una hoja de estilos externa, se ha de crear un control de usuario en un archivo .ascx y colocar un solo control StyleSheet que contenga un conjunto de estilos. Después, para hacer referencia a este archivo, se ha de colocar un control StyleSheet en una página móvil y establecer la propiedad ReferencePath de este control como dirección URL relativa del control de usuario.

Implementación de hojas de estilos externas

Para implementar una hoja de estilos externa es necesario seguir tres pasos:

Escriba un control de usuario móvil de Microsoft ASP.NET en un archivo .ascx.
Coloque una hoja de estilos única en el archivo .ascx y agregue los elementos <Style> que necesite.
Declare una hoja de estilos y establezca la propiedad ReferencePath en el nombre del archivo .ascx del control de usuario de cada página móvil en la que desee utilizar la hoja de estilos externa.

En tiempo de ejecución, todos los estilos que se declaran en la hoja de estilos externa están disponibles en el marco de trabajo de páginas ASP.NET para la hoja de estilos de la página móvil. Para obtener más información acerca de los controles de usuario, vea Controles de usuario.

Características de los objetos de estilo y de las clases de estilo

Un objeto Style no es exactamente un control y no hereda de la clase base MobileControl. En una página, sólo se puede declarar dentro de un control StyleSheet a través del elemento <Style>.

La clase base Style contiene características de estilo comunes a todos los controles móviles. Las clases que heredan de la clase Style contienen características de estilo adicionales que son específicas de su control asociado.

Cada MobileControl contiene internamente un objeto Style. Sin embargo, este objeto Style no se expone a través de miembros públicos. En su lugar, para cada propiedad de estilo, el control MobileControl tiene una propiedad de acceso público que hace referencia internamente al estilo contenido de forma privada. Por consiguiente, MobileControl expone directamente propiedades de estilo como Font, ForeColor y Wrapping.

Organización de estilos

Es posible organizar los estilos en un control StyleSheet. En una hoja de estilos, se puede declarar cualquier número de objetos de estilo. Los estilos se declaran de la misma forma que cualquier control, con la excepción de que no se requiere un atributo runat=server. Para obtener más información, vea Elemento <Style>.

Un estilo puede heredar sus propiedades de otro estilo de la hoja de estilos si se establece la propiedad StyleReference como nombre del estilo primario. Esto es aplicable en el ámbito de la página móvil. Es decir, sólo se puede hacer referencia a los estilos de la hoja de estilos que está en la misma página móvil. Para que un control obtenga sus estilos de un objeto de estilo de la hoja de estilos, se ha de establecer la propiedad StyleReference de dicho objeto como nombre del estilo, ya sea declarando el atributo StyleReference en una página Web de ASP.NET Mobile, o estableciendo la propiedad StyleReference mediante programación.

Vea también

Compartir a través de