Compartir a través de

Perfiles, temas y elementos web

  • Artículo

por Microsoft

Hay cambios importantes en la configuración y la instrumentación en ASP.NET 2.0. La nueva API de configuración de ASP.NET permite realizar cambios de configuración mediante programación. Además, existen muchas nuevas opciones de configuración que permiten nuevas configuraciones e instrumentación.

ASP.NET 2.0 representa una mejora sustancial en el área de sitios web personalizados. Además de las características de pertenencia que ya hemos tratado, los perfiles de ASP.NET, los temas y los elementos web mejoran significativamente la personalización en los sitios web.

Perfiles de ASP.NET

ASP.NET perfiles son similares a las sesiones. La diferencia es que un perfil es persistente, mientras que una sesión se pierde cuando se cierra el explorador. Otra gran diferencia entre las sesiones y los perfiles es que los perfiles están fuertemente tipados, por lo que proporciona IntelliSense durante el proceso de desarrollo.

Un perfil se define en el archivo de configuración de máquinas o en el archivo web.config de la aplicación. (No se puede definir un perfil en un archivo web.config de subcarpetas.) El código siguiente define un perfil para almacenar los visitantes del sitio web primero y el apellido.

<profile>
    <properties>
        <add name="FirstName" />
        <add name="LastName" />
    </properties>
</profile>

El tipo de datos predeterminado para una propiedad de perfil es System.String. En el ejemplo anterior, no se especificó ningún tipo de datos. Por lo tanto, las propiedades FirstName y LastName son de tipo String. Como se mencionó anteriormente, las propiedades de perfil están fuertemente tipadas. El código siguiente agrega una nueva propiedad para age que es de tipo Int32.

<profile>
    <properties>
        <add name="FirstName" />
        <add name="LastName" />
        <add name="Age" type="Int32"/>
    </properties>
</profile>

Por lo general, los perfiles se usan con la autenticación de ASP.NET Forms. Cuando se usa en combinación con la autenticación de Formularios, cada usuario tiene un perfil independiente asociado con su identificador de usuario. Sin embargo, también es posible permitir el uso de perfiles en una aplicación anónima mediante el elemento <anonymousIdentification> del archivo de configuración junto con el atributo allowAnonymous tal como se muestra a continuación:

<anonymousIdentification enabled="true" />
<profile>
    <properties>
        <add name="FirstName" allowAnonymous="true" />
        <add name="LastName" allowAnonymous="true" />
    </properties>
</profile>

Cuando un usuario anónimo navega por el sitio, ASP.NET crea una instancia de ProfileCommon para el usuario. Este perfil usa un identificador único almacenado en una cookie en el explorador para identificar al usuario como visitante único. De este modo, puede almacenar información de perfil para los usuarios que exploran de forma anónima.

Grupos de perfiles

Es posible agrupar las propiedades de los perfiles. Mediante la agrupación de propiedades, es posible simular varios perfiles para una aplicación específica.

La siguiente configuración configura una propiedad FirstName y LastName para dos grupos; Compradores y perspectivas.

<profile>
    <properties>
        <group name="Buyers">
            <add name="FirstName" />
            <add name="Lastname" />
            <add name="NumberOfPurchases" type="Int32" />
        </group>
        <group name="Prospects">
            <add name="FirstName" />
            <add name="Lastname" />
        </group>
    </properties>
</profile>

A continuación, es posible establecer propiedades en un grupo determinado de la siguiente manera:

Profile.Buyers.NumberOfPurchases += 1;

Almacenar objetos complejos

Hasta ahora, los ejemplos que hemos tratado han almacenado tipos de datos simples en un perfil. También es posible almacenar tipos de datos complejos en un perfil especificando el método de serialización mediante el atributo serializeAs como se indica a continuación:

<add name="PurchaseInvoice"
     type="PurchaseInvoice"
     serializeAs="Binary"
/>

En este caso, el tipo es PurchaseInvoice. La clase PurchaseInvoice debe marcarse como serializable y puede contener cualquier número de propiedades. Por ejemplo, si PurchaseInvoice tiene una propiedad denominada NumItemsPurchased, puede hacer referencia a esa propiedad en el código de la siguiente manera:

Profile.PurchaseInvoice.NumItemsPurchased

Herencia de perfiles

Es posible crear un perfil para su uso en varias aplicaciones. Mediante la creación de una clase de perfil que deriva de ProfileBase, puede reutilizar un perfil en varias aplicaciones mediante el hereda atributo, como se muestra a continuación:

<profile inherits="PurchasingProfile" />

En este caso, la clase PurchasingProfile tendría el siguiente aspecto:

using System;
using System.Web.Profile;
public class PurchasingProfile : ProfileBase {
    private string _ProductName;
    private Int32 _ProductID;
    public string ProductName {
        get { return _ProductName; }
        set { _ProductName = value; }
    }
    public Int32 ProductID {
        get { return _ProductID; }
        set { _ProductID = value; }
    }
}

Proveedores de perfiles

ASP.NET perfiles usan el modelo de proveedor. El proveedor predeterminado almacena la información en una base de datos de SQL Server Express en la carpeta App_Data de la aplicación Web mediante el proveedor SqlProfileProvider. Si la base de datos no existe, ASP.NET la creará automáticamente cuando el perfil intente almacenar información.

Sin embargo, en algunos casos, es posible que quiera desarrollar su propio proveedor de perfiles. La característica de perfil de ASP.NET permite usar fácilmente diferentes proveedores.

Cree un proveedor de perfiles personalizado cuando:

  • Debe almacenar información de perfil en un origen de datos, como en una base de datos FoxPro o en una base de datos de Oracle, que no es compatible con los proveedores de perfiles incluidos en .NET Framework.
  • Debe administrar la información de perfil mediante un esquema de base de datos diferente del esquema de base de datos que usan los proveedores incluidos en .NET Framework. Un ejemplo común es que desea integrar la información de perfil con los datos de usuario en una base de datos de SQL Server existente.

Clases necesarias

Para implementar un proveedor de perfiles, cree una clase que herede la clase abstracta System.Web.Profile.ProfileProvider. El ProfileProvider clase abstracta hereda a su vez la clase abstracta System.Configuration.SettingsProvider, que hereda la clase abstracta System.Configuration.Provider.ProviderBase. Debido a esta cadena de herencia, además de los miembros necesarios de la clase ProfileProvider, debe implementar los miembros necesarios de las clases de SettingsProvider y ProviderBase.

En las tablas siguientes se describen las propiedades y los métodos que debe implementar desde las clasesProviderBase, SettingsProvider, y ProfileProvider abstractas.

Miembros ProviderBase

Member Descripción
Initialize (método) Toma como entrada el nombre de la instancia del proveedor y un NameValueCollection de las opciones de configuración. Se usa para establecer opciones y valores de propiedad para la instancia del proveedor, incluidos los valores y opciones específicos de la implementación especificados en la configuración del equipo o en el archivo Web.config.

Miembros SettingsProvider

Member Descripción
Propiedad ApplicationName Nombre de la aplicación que se almacena con cada perfil. El proveedor de perfiles usa el nombre de la aplicación para almacenar la información de perfil por separado para cada aplicación. Esto permite que varias aplicaciones de ASP.NET usen el mismo origen de datos sin conflicto si se crea el mismo nombre de usuario en diferentes aplicaciones. Como alternativa, varias aplicaciones de ASP.NET pueden compartir un origen de datos de perfil especificando el mismo nombre de aplicación.
Método GetPropertyValues Toma como entrada un objeto SettingsContext y SettingsPropertyCollection. El SettingsContext proporciona información sobre el usuario. Puede usar la información como clave principal para recuperar información de propiedad de perfil para el usuario. Use el objeto SettingsContext para obtener el nombre de usuario y si el usuario está autenticado o anónimo. El SettingsPropertyCollection contiene una colección de objetos SettingsProperty. Cada objeto SettingsProperty proporciona el nombre y el tipo de la propiedad, así como información adicional, como el valor predeterminado de la propiedad y si la propiedad es de solo lectura. El método GetPropertyValues rellena una clase SettingsPropertyValueCollection con objetos SettingsPropertyValue basados en los objetos SettingsProperty proporcionados como entrada. Los valores del origen de datos para el usuario especificado se asignan a las propiedades PropertyValue para cada objeto SettingsPropertyValue y se devuelve toda la colección. Al llamar al método también se actualiza el valor LastActivityDate del perfil de usuario especificado a la fecha y hora actuales.
Método SetPropertyValues Toma como entrada un SettingsContext y un objeto SettingsPropertyValueCollection. El SettingsContext proporciona información sobre el usuario. Puede usar la información como clave principal para recuperar información de propiedad de perfil para el usuario. Use el objeto SettingsContext para obtener el nombre de usuario y si el usuario está autenticado o anónimo. El SettingsPropertyValueCollection contiene una colección de objetos SettingsPropertyValue. Cada objeto SettingsPropertyValue proporciona el nombre, el tipo y el valor de la propiedad, así como información adicional, como el valor predeterminado de la propiedad y si la propiedad es de solo lectura. El método SetPropertyValues actualiza los valores de propiedad de perfil en el origen de datos para el usuario especificado. Al llamar al método también se actualizan los valores LastActivityDate y LastUpdatedDate del perfil de usuario especificado a la fecha y hora actuales.

Miembros ProfileProvider

Member Descripción
Método DeleteProfiles Toma como entrada una matriz de cadenas de nombres de usuario y elimina del origen de datos toda la información de perfil y los valores de propiedad de los nombres especificados donde el nombre de la aplicación coincide con el valor de propiedad ApplicationName. Si el origen de datos admite transacciones, se recomienda incluir todas las operaciones de eliminación en una transacción y revertir la transacción e iniciar una excepción si se produce un error en alguna operación de eliminación.
Método DeleteProfiles Toma como entrada una colección de objetos ProfileInfo y elimina del origen de datos toda la información del perfil y los valores de propiedad de cada perfil donde el nombre de la aplicación coincide con el valor de propiedad ApplicationName. Si el origen de datos admite transacciones, se recomienda incluir todas las operaciones de eliminación en una transacción y revertir la transacción e iniciar una excepción si se produce un error en alguna operación de eliminación.
Método DeleteInactiveProfiles Toma como entrada un valor ProfileAuthenticationOption y un objeto DateTime y elimina del origen de datos toda la información de perfil y los valores de propiedad donde la última fecha de actividad es menor o igual que la fecha y hora especificadas y donde el nombre de la aplicación coincide con el valor de propiedad ApplicationName. El parámetro ProfileAuthenticationOption especifica si solo se van a eliminar perfiles anónimos, solo perfiles autenticados o todos los perfiles. Si el origen de datos admite transacciones, se recomienda incluir todas las operaciones de eliminación en una transacción y revertir la transacción e iniciar una excepción si se produce un error en alguna operación de eliminación.
Método GetAllProfiles Toma como entrada un valor ProfileAuthenticationOption, un entero que especifica el índice de página, un entero que especifica el tamaño de página y una referencia a un entero que se establecerá en el recuento total de perfiles. Devuelve un ProfileInfoCollection que contiene objetosProfileInfo para todos los perfiles del origen de datos donde el nombre de la aplicación coincide con el valor de propiedad ApplicationName. El parámetro ProfileAuthenticationOption especifica si solo se van a devolver perfiles anónimos, solo perfiles autenticados o todos los perfiles. Los resultados devueltos por el método GetAllProfiles están restringidos por los valores de índice de página y tamaño de página. El valor de tamaño de página especifica el número máximo de objetos ProfileInfo que se van a devolver en el ProfileInfoCollection. El valor de índice de página especifica la página de resultados que se va a devolver, donde 1 identifica la primera página. El parámetro para los registros totales es un parámetro out (puede usar ByRef en Visual Basic) que se establece en el número total de perfiles. Por ejemplo, si el almacén de datos contiene 13 perfiles para la aplicación y el valor del índice de página es 2 con un tamaño de página de 5, el ProfileInfoCollection devuelto contiene el sexto al décimo perfiles. El valor total de registros se establece en 13 cuando el método devuelve.
Método GetAllInactiveProfiles Toma como entrada un valor ProfileAuthenticationOption, un objeto DateTime, un entero que especifica el índice de página, un entero que especifica el tamaño de página y una referencia a un entero que se establecerá en el recuento total de perfiles. Devuelve un ProfileInfoCollection que contiene objetos ProfileInfo para todos los perfiles del origen de datos donde la fecha de la última actividad es menor o igual que la DateTime especificada y donde el nombre de la aplicación coincide con el valor de la propiedad ApplicationName. El parámetro ProfileAuthenticationOption especifica si solo se van a devolver perfiles anónimos, solo perfiles autenticados o todos los perfiles. Los resultados devueltos por el método GetAllInactiveProfiles están restringidos por los valores de índice de página y tamaño de página. El valor de tamaño de página especifica el número máximo de objetos ProfileInfo que se van a devolver en el ProfileInfoCollection. El valor de índice de página especifica la página de resultados que se va a devolver, donde 1 identifica la primera página. El parámetro para los registros totales es un parámetro out (puede usar ByRef en Visual Basic) que se establece en el número total de perfiles. Por ejemplo, si el almacén de datos contiene 13 perfiles para la aplicación y el valor del índice de página es 2 con un tamaño de página de 5, el ProfileInfoCollection devuelto contiene el sexto al décimo perfiles. El valor total de registros se establece en 13 cuando el método devuelve.
Método FindProfilesByUserName Toma como entrada un valor ProfileAuthenticationOption, una cadena que contiene un nombre de usuario, un entero que especifica el índice de página, un entero que especifica el tamaño de página y una referencia a un entero que se establecerá en el recuento total de perfiles. Devuelve un ProfileInfoCollection que contiene objetos ProfileInfo para todos los perfiles del origen de datos donde el nombre de usuario coincide con el nombre de usuario especificado y donde el nombre de la aplicación coincide con el valor de propiedad ApplicationName. El parámetro ProfileAuthenticationOption especifica si solo se van a devolver perfiles anónimos, solo perfiles autenticados o todos los perfiles. Si el origen de datos admite funcionalidades de búsqueda adicionales, como caracteres comodín, puede proporcionar funcionalidades de búsqueda más amplias para los nombres de usuario. Los resultados devueltos por el método FindProfilesByUserName están restringidos por los valores de índice de página y tamaño de página. El valor de tamaño de página especifica el número máximo de objetos ProfileInfo que se van a devolver en el ProfileInfoCollection. El valor de índice de página especifica la página de resultados que se va a devolver, donde 1 identifica la primera página. El parámetro para los registros totales es un parámetro out (puede usar ByRef en Visual Basic) que se establece en el número total de perfiles. Por ejemplo, si el almacén de datos contiene 13 perfiles para la aplicación y el valor del índice de página es 2 con un tamaño de página de 5, el ProfileInfoCollection devuelto contiene el sexto al décimo perfiles. El valor total de registros se establece en 13 cuando el método devuelve.
Método FindInactiveProfilesByUserName Toma como entrada un valor de ProfileAuthenticationOption, una cadena que contiene un nombre de usuario, un objeto DateTime, un entero que especifica el índice de página, un entero que especifica el tamaño de página y una referencia a un entero que se establecerá en el recuento total de perfiles. Devuelve un ProfileInfoCollection que contiene objetos ProfileInfo para todos los perfiles del origen de datos donde el nombre de usuario coincide con el nombre de usuario especificado, donde la fecha de la última actividad es menor o igual que la DateTime especificada y donde el nombre de la aplicación coincide con el valor de propiedad ApplicationName. El parámetro ProfileAuthenticationOption especifica si solo se van a devolver perfiles anónimos, solo perfiles autenticados o todos los perfiles. Si el origen de datos admite funcionalidades de búsqueda adicionales, como caracteres comodín, puede proporcionar funcionalidades de búsqueda más amplias para los nombres de usuario. Los resultados devueltos por el método FindInactiveProfilesByUserName están restringidos por los valores de índice de página y tamaño de página. El valor de tamaño de página especifica el número máximo de objetos ProfileInfo que se van a devolver en el ProfileInfoCollection. El valor de índice de página especifica la página de resultados que se va a devolver, donde 1 identifica la primera página. El parámetro para los registros totales es un parámetro out (puede usar ByRef en Visual Basic) que se establece en el número total de perfiles. Por ejemplo, si el almacén de datos contiene 13 perfiles para la aplicación y el valor del índice de página es 2 con un tamaño de página de 5, el ProfileInfoCollection devuelto contiene el sexto al décimo perfiles. El valor total de registros se establece en 13 cuando el método devuelve.
Método GetNumberOfInActiveProfiles Toma como entrada un valor ProfileAuthenticationOption y un objeto DateTime y devuelve un recuento de todos los perfiles del origen de datos donde la fecha de la última actividad es menor o igual que la DateTime especificada y donde el nombre de la aplicación coincide con el valor de la propiedad ApplicationName. El parámetro ProfileAuthenticationOption especifica si solo se van a contar perfiles anónimos, solo perfiles autenticados o todos los perfiles.

ApplicationName

Dado que los proveedores de perfiles almacenan información de perfil por separado para cada aplicación, debe asegurarse de que el esquema de datos incluya el nombre de la aplicación y que las consultas y actualizaciones también incluyan el nombre de la aplicación. Por ejemplo, el comando siguiente se usa para recuperar un valor de propiedad de una base de datos basada en el nombre de usuario y si el perfil es anónimo y garantiza que el valor ApplicationName se incluya en la consulta.

SELECT Property
FROM PropertyTable
WHERE Username = 'user1'
AND IsAnonymous = False
AND ApplicationName = 'MyApplication'

temas de ASP.NET

¿Qué son los temas de ASP.NET 2.0?

Uno de los aspectos más importantes de una aplicación web es una apariencia coherente en todo el sitio. ASP.NET 1.x los desarrolladores suelen usar hojas de estilos en cascada (CSS) para implementar una apariencia y una apariencia coherentes. ASP.NET temas 2.0 mejoran significativamente en CSS, ya que proporcionan al desarrollador de ASP.NET la capacidad de definir la apariencia de los controles de servidor ASP.NET, así como los elementos HTML. ASP.NET temas se pueden aplicar a controles individuales, a una página web específica o a una aplicación web completa. Los temas usan una combinación de archivos CSS, un archivo de máscara opcional y un directorio Images opcional si se necesitan imágenes. El archivo de máscara controla la apariencia visual de ASP.NET controles de servidor.

¿Dónde se almacenan los temas?

La ubicación en la que se almacenan los temas difiere en función de su ámbito. Los temas que se pueden aplicar a cualquier aplicación se almacenan en la carpeta siguiente:

C:\WINDOWS\Microsoft.NET\Framework\v2.x.xxxxx\ASP.NETClientFiles\Themes\<Theme_Name>

Un tema específico de una aplicación determinada se almacena en un directorio App\_Themes\<Theme\_Name> en la raíz del sitio web.

Nota:

Un archivo de máscara solo debe modificar las propiedades de control de servidor que afectan a la apariencia.

Un tema global es un tema que se puede aplicar a cualquier aplicación o sitio web que se ejecute en el servidor web. Estos temas se almacenan de forma predeterminada en el directorio ASP.NETClientfiles\Themes que está dentro del directorio v2.x.xxxxx. Como alternativa, puede mover los archivos de tema a la carpeta aspnet_client/system_web/[version]/Themes/[theme_name] en la raíz del sitio web.

Los temas específicos de la aplicación solo se pueden aplicar a la aplicación en la que residen los archivos. Estos archivos se almacenan en el directorio App\_Themes/<theme\_name> en la raíz del sitio web.

Los componentes de un tema

Un tema se compone de uno o varios archivos CSS, un archivo de máscara opcional y una carpeta Images opcional. Los archivos CSS pueden ser cualquier nombre que desee (es decir, default.css o theme.css, etc.) y deben estar en la raíz de la carpeta de temas. Los archivos CSS se usan para definir clases y atributos CSS normales para selectores específicos. Para aplicar una de las clases CSS a un elemento de página, se usa la propiedad CSSClass.

El archivo skin es un archivo XML que contiene definiciones de propiedad para controles de servidor ASP.NET. El código que se muestra a continuación es un archivo de máscara de ejemplo.

<asp:TextBox runat="server"
    BackColor="#FFC080"
    BorderColor="Black"
    BorderStyle="Solid"
    BorderWidth="1px"
    Font-Names="Tahoma, Verdana, Arial"
    Font-Size="Smaller" />

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0" />

Figura 1 siguiente muestra una página pequeña ASP.NET explorada sin aplicar un tema. Figura 2 muestra el mismo archivo con un tema aplicado. El color de fondo y el color del texto se configuran a través de un archivo CSS. La apariencia del botón y el cuadro de texto se configuran mediante el archivo de máscara enumerado anteriormente.

No Theme

Figura 1: Sin tema

Theme Applied

Figura 2: Tema aplicado

El archivo de máscara enumerado anteriormente define una máscara predeterminada para todos los controles TextBox y Controles de botón. Esto significa que todos los controles TextBox y Botón insertados en una página tendrán esta apariencia. También puede definir una máscara que se pueda aplicar a instancias específicas de estos controles mediante la propiedad SkinID del control.

El código siguiente define una máscara para un control Button. Solo los controles Button con una propiedad SkinID de goButton tomarán la apariencia de la piel.

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0"
    Text=go
    SkinID=goButton
    Width="95px" />

Solo puede tener una máscara predeterminada por tipo de control de servidor. Si necesita pieles adicionales, debe usar la propiedad SkinID.

Aplicación de temas a páginas

Un tema se puede aplicar mediante cualquiera de los métodos siguientes:

  • En las <páginas> elemento del archivo web.config
  • En la directiva @Page de una página
  • De manera programática

Aplicación de un tema en el archivo de configuración

Para aplicar un tema en el archivo de configuración de aplicaciones, use la sintaxis siguiente:

<system.web>
    <pages theme="CoolTheme" />
    ...
</system.web>

El nombre del tema especificado aquí debe coincidir con el nombre de la carpeta de temas. Esta carpeta puede existir en cualquiera de las ubicaciones mencionadas anteriormente en este curso. Si intenta aplicar un tema que no existe, se producirá un error de configuración.

Aplicación de un tema en la directiva Page

También puede aplicar un tema en la directiva @ Page. Este método permite usar un tema para una página específica.

Para aplicar un tema en la directiva @Page, use la sintaxis siguiente:

<%@ Page Language="C#" Theme=CoolTheme CodeFile="Default.aspx.cs" ... %>

Una vez más, el tema especificado aquí debe coincidir con la carpeta de temas como se mencionó anteriormente. Si intenta aplicar un tema que no existe, se producirá un error de compilación. Visual Studio también resaltará el atributo y le notificará que no existe este tema.

Aplicación de un tema mediante programación

Para aplicar un tema mediante programación, debe especificar la propiedad Theme para la página en el método Page_PreInit.

Para aplicar un tema mediante programación, use la sintaxis siguiente:

Page.Theme = CoolTheme;

Es necesario aplicar el tema en el método PreInit debido al ciclo de vida de la página. Si lo aplica después de ese punto, el tiempo de ejecución ya habrá aplicado el tema de páginas y un cambio en ese momento es demasiado tarde en el ciclo de vida. Si aplica un tema que no existe, se produce una HttpException. Cuando se aplica un tema mediante programación, se producirá una advertencia de compilación si algún control de servidor tiene especificada una propiedad SkinID. Esta advertencia está pensada para informarle de que no se aplica ningún tema mediante declaración y que se puede omitir.

Ejercicio 1: Aplicación de un tema

En este ejercicio, aplicará un tema de ASP.NET a un sitio web.

Importante

Si usa Microsoft Word para escribir información en un archivo de máscara, asegúrese de no reemplazar las comillas normales por comillas inteligentes. Las comillas inteligentes provocarán problemas con archivos skin.

  1. Cree un nuevo sitio web de ASP.NET.

  2. Haga clic con el botón derecho en el proyecto en el Explorador de soluciones y elija Agregar nuevo elemento.

  3. Elija Archivo de configuración web en la lista de archivos y haga clic en Agregar.

  4. Haga clic con el botón derecho en el proyecto en el Explorador de soluciones y elija Agregar nuevo elemento.

  5. Elija Archivo de máscara y haga clic en Agregar.

  6. Haga clic en Sí cuando se le pregunte si desea colocar el archivo dentro de la carpeta App_Themes.

  7. Haga clic con el botón derecho en la carpeta SkinFile dentro de la carpeta App_Themes en el Explorador de soluciones y elija Agregar nuevo elemento.

  8. Elija Hoja de estilos en la lista de archivos y haga clic en Agregar. Ahora tiene todos los archivos necesarios para implementar el nuevo tema. Sin embargo, Visual Studio ha llamado a la carpeta de temas SkinFile. Haga clic con el botón derecho en esa carpeta y cambie el nombre a CoolTheme.

  9. Abra el archivo SkinFile.skin y agregue el siguiente código al final del archivo:

    <asp:TextBox runat="server"
    BackColor="#FFC080"
    BorderColor="Black"
    BorderStyle="Solid"
    BorderWidth="1px"
    Font-Names="Tahoma, Verdana, Arial"
    Font-Size="Smaller"
/>

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0"
/>

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0"
    Text="go"
    SkinID="goButton"
    Width="95px"
/>

  10. Guarde el archivo SkinFile.skin.

  11. Abra el StyleSheet.css.

  12. Reemplace todo el texto de él por lo siguiente:

    body {
    background-color: #FFDEAD;
}

  13. Guarde el archivo StyleSheet.css.

  14. Abra la página Default.aspx.

  15. Agregue un control TextBox y un control Button.

  16. Guarde la página. Ahora, examine la página Default.aspx. Debe mostrarse como un formulario web normal.

  17. Abra el archivo web.config.

  18. Agregue lo siguiente directamente debajo de la etiqueta de apertura <system.web>:

    <pages theme="CoolTheme" />

  19. Guarde el archivo web.config. Ahora, examine la página Default.aspx. Debe mostrarse con el tema aplicado.

  20. Si aún no está abierto, abra la página Default.aspx en Visual Studio.

  21. Seleccione el botón.

  22. Cambie la propiedad SkinID a goButton. Observe que Visual Studio proporciona una lista desplegable con valores SkinID válidos para un control Button.

  23. Guarde la página. Ahora vuelva a obtener una vista previa de la página en el explorador. El botón ahora debería decir "ir" y debería ser más amplio en apariencia.

Con la propiedad SkinID, puede configurar fácilmente diferentes máscaras para diferentes instancias de un tipo determinado de control de servidor.

La propiedad StyleSheetTheme

Hasta ahora, solo hemos hablado sobre cómo aplicar temas mediante la propiedad Theme. Al usar la propiedad Theme, el archivo de máscara invalidará cualquier configuración declarativa para los controles de servidor. Por ejemplo, en el ejercicio 1, especificó un SkinID de "goButton" para el control Button y que cambió el texto del botón a "go". Es posible que haya observado que la propiedad Text del botón del diseñador se estableció en "Button", pero el tema se sobrescribía. El tema siempre invalidará cualquier configuración de propiedad en el diseñador.

Si desea poder invalidar las propiedades definidas en el archivo de máscara del tema con las propiedades especificadas en el diseñador, puede usar la propiedad StyleSheetTheme en lugar de la propiedad Theme. La propiedad StyleSheetTheme es la misma que la propiedad Theme, salvo que no invalida todos los valores de propiedad explícitos como lo hace la propiedad Theme.

Para ver esto en acción, abra el archivo web.config del proyecto en el ejercicio 1 y cambie el elemento <pages> a lo siguiente:

<pages styleSheetTheme="CoolTheme" />

Ahora, examine la página Default.aspx y verá que el control Button tiene una propiedad Text de "Button" de nuevo. Esto se debe a que el valor de la propiedad explícita del diseñador reemplaza la propiedad Text establecida por goButton SkinID.

Invalidación de temas

Un tema global se puede invalidar aplicando un tema por el mismo nombre en la carpeta App_Themes de la aplicación. Sin embargo, el tema no se aplica en un escenario de invalidación verdadero. Si el tiempo de ejecución encuentra archivos de tema en la carpeta App_Themes, aplicará el tema con esos archivos y omitirá el tema global.

La propiedad StyleSheetTheme se invalida y se puede invalidar en el código de la siguiente manera:

const String THEME_NAME = "CoolTheme";
public override string StyleSheetTheme {
    get { return THEME_NAME; }
    set { Page.StyleSheetTheme = THEME_NAME; }
}

elementos web

ASP.NET elementos web es un conjunto integrado de controles para crear sitios web que permiten a los usuarios finales modificar el contenido, la apariencia y el comportamiento de las páginas web directamente desde un explorador. Las modificaciones se pueden aplicar a todos los usuarios del sitio o a usuarios individuales. Cuando los usuarios modifican páginas y controles, la configuración se puede guardar para conservar las preferencias personales de un usuario en futuras sesiones del explorador, una característica denominada personalización. Estas funcionalidades de elementos web significan que los desarrolladores pueden permitir a los usuarios finales personalizar dinámicamente una aplicación web, sin intervención del desarrollador o del administrador.

Con el conjunto de controles de elementos web, como desarrollador puede permitir que los usuarios finales:

  • Personalizar el contenido de la página. Los usuarios pueden agregar nuevos controles de elementos web a una página, quitarlos, ocultarlos o minimizarlos como ventanas normales.
  • Personalizar el diseño de página. Los usuarios pueden arrastrar un control de elementos web a una zona diferente de una página o cambiar su apariencia, propiedades y comportamiento.
  • Exportar e importar controles. Los usuarios pueden importar o exportar la configuración de control de elementos web para su uso en otras páginas o sitios, conservando las propiedades, la apariencia e incluso los datos de los controles. Esto reduce las demandas de entrada y configuración de datos en los usuarios finales.
  • Cree conexiones. Los usuarios pueden establecer conexiones entre controles para que, por ejemplo, un control de gráfico pueda mostrar un gráfico para los datos de un control de ticker de stock. Los usuarios no solo podían personalizar la propia conexión, sino la apariencia y los detalles de cómo el control de gráfico muestra los datos.
  • Administrar y personalizar la configuración de nivel de sitio. Los usuarios autorizados pueden configurar opciones de nivel de sitio, determinar quién puede acceder a un sitio o página, establecer el acceso basado en roles a los controles, etc. Por ejemplo, un usuario de un rol administrativo podría establecer un control de elementos web que compartirán todos los usuarios y evitar que los usuarios que no sean administradores personalicen el control compartido.

Normalmente, trabajará con elementos web de una de estas tres maneras: crear páginas que usen controles de elementos web, crear controles de elementos web individuales o crear aplicaciones web personalizables completas, como un portal.

Desarrollo de páginas

Los desarrolladores de páginas pueden usar herramientas de diseño visual como Microsoft Visual Studio 2005 para crear páginas que usan elementos web. Una ventaja de usar una herramienta como Visual Studio es que el conjunto de controles de elementos web proporciona características para la creación y colocación de arrastrar y colocar controles de elementos web en un diseñador visual. Por ejemplo, puede usar el diseñador para arrastrar una zona de elementos web o un control editor de elementos web en la superficie de diseño y, a continuación, configurar el control directamente en el diseñador mediante la interfaz de usuario proporcionada por el conjunto de controles elementos web. Esto puede acelerar el desarrollo de aplicaciones de elementos web y reducir la cantidad de código que tiene que escribir.

Desarrollo de controles

Puede usar cualquier control de ASP.NET existente como control de elementos web, incluidos controles de servidor web estándar, controles de servidor personalizados y controles de usuario. Para obtener el control de programación máximo del entorno, también puede crear controles de elementos web personalizados que derivan de la clase WebPart. En el caso del desarrollo de controles de elementos web individuales, normalmente creará un control de usuario y lo usará como control de elementos web o desarrollará un control de elementos web personalizados.

Como ejemplo de desarrollo de un control de elementos web personalizados, podría crear un control para proporcionar cualquiera de las características proporcionadas por otros controles de servidor de ASP.NET que podrían ser útiles para empaquetar como control de elementos web personalizables: calendarios, listas, información financiera, noticias, calculadoras, controles de texto enriquecido para actualizar contenido, cuadrículas editables que se conectan a bases de datos, gráficos que actualizan dinámicamente sus pantallas, o información meteorológica y de viaje. Si proporciona un diseñador visual con el control, cualquier desarrollador de páginas que use Visual Studio simplemente puede arrastrar el control a una zona de elementos web y configurarlo en tiempo de diseño sin tener que escribir código adicional.

La personalización es la base de la característica de elementos web. Permite a los usuarios modificar o personalizar el diseño, la apariencia y el comportamiento de los controles de elementos web en una página. La configuración personalizada es de larga duración: se conservan no solo durante la sesión actual del explorador (como con el estado de vista), sino también en el almacenamiento a largo plazo, de modo que la configuración de un usuario también se guarde para futuras sesiones del explorador. La personalización está habilitada de forma predeterminada para las páginas de elementos web.

Los componentes estructurales de la interfaz de usuario se basan en la personalización y proporcionan la estructura principal y los servicios necesarios para todos los controles de elementos web. Un componente estructural de interfaz de usuario necesario en cada página de elementos web es el control WebPartManager. Aunque nunca es visible, este control tiene la tarea crítica de coordinar todos los controles de elementos web en una página. Por ejemplo, realiza un seguimiento de todos los controles de elementos web individuales. Administra zonas de elementos web (regiones que contienen controles de elementos web en una página) y qué controles están en qué zonas. También realiza un seguimiento y controla los distintos modos de visualización en los que puede estar una página, como examinar, conectar, editar o el modo de catálogo, y si los cambios de personalización se aplican a todos los usuarios o a usuarios individuales. Por último, inicia y realiza un seguimiento de las conexiones y la comunicación entre los controles de elementos web.

El segundo tipo de componente estructural de interfaz de usuario es la zona. Las zonas actúan como administradores de diseño en una página de elementos web. Contienen y organizan controles que derivan de la clase Part (controles de pieza) y proporcionan la capacidad de realizar un diseño de página modular en orientación horizontal o vertical. Las zonas también ofrecen elementos comunes y coherentes de la interfaz de usuario (como estilo de encabezado y pie de página, título, estilo de borde, botones de acción, etc.) para cada control que contienen; estos elementos comunes se conocen como cromo de un control. Varios tipos especializados de zonas se usan en los diferentes modos de visualización y con varios controles. Los distintos tipos de zonas se describen en la sección Controles esenciales de elementos web a continuación.

Los controles de interfaz de usuario de elementos web, que derivan de la clase Part, componen la interfaz de usuario principal en una página de elementos web. El conjunto de controles de elementos web es flexible e inclusivo en las opciones que proporciona para crear controles de elementos. Además de crear sus propios controles de elementos web personalizados, también puede usar controles de servidor de ASP.NET existentes, controles de usuario o controles de servidor personalizados como controles de elementos web. Los controles esenciales que se usan con más frecuencia para crear páginas de elementos web se describen en la sección siguiente.

Controles esenciales de elementos web

El conjunto de controles de elementos web es extenso, pero algunos controles son esenciales, ya sea porque son necesarios para que los elementos web funcionen o porque son los controles que se usan con más frecuencia en las páginas de elementos web. A medida que empiece a usar elementos web y crear páginas básicas de elementos web, resulta útil familiarizarse con los controles de elementos web esenciales descritos en la tabla siguiente.

control de elementos web Descripción
WebPartManager Administra todos los controles de elementos web de una página. Se requiere un control (y solo uno) WebPartManager para cada página de elementos web.
CatalogZone Contiene controles CatalogPart. Use esta zona para crear un catálogo de controles de elementos web desde los que los usuarios pueden seleccionar controles para agregar a una página.
EditorZone Contiene controles EditorPart. Use esta zona para permitir a los usuarios editar y personalizar controles de elementos web en una página.
WebPartZone Contiene y proporciona un diseño general para los controles Webpart que componen la interfaz de usuario principal de una página. Use esta zona cada vez que cree páginas con controles de elementos web. Las páginas pueden contener una o varias zonas.
ConnectionsZone Contiene controles WebPartConnection y proporciona una interfaz de usuario para administrar conexiones.
WebPart (GenericWebPart) Representa la interfaz de usuario principal; la mayoría de los controles de interfaz de usuario de elementos web se dividen en esta categoría. Para obtener el control de programación máximo, puede crear controles de elementos web personalizados que derivan del control de WebPart base. También puede usar controles de servidor, controles de usuario o controles personalizados existentes como controles de elementos web. Cada vez que cualquiera de estos controles se coloca en una zona, el control WebPartManager los ajusta automáticamente con controles GenericWebPart en tiempo de ejecución para poder usarlos con la funcionalidad de elementos web.
CatalogPart Contiene una lista de controles de elementos web disponibles que los usuarios pueden agregar a la página.
WebPartConnection Crea una conexión entre dos controles de elementos web en una página. La conexión define uno de los controles de elementos web como proveedor (de datos) y el otro como consumidor.
EditorPart Actúa como clase base para los controles del editor especializado.
Controles EditorPart (AppearanceEditorPart, LayoutEditorPart, BehaviorEditorPart y PropertyGridEditorPart) Permitir a los usuarios personalizar varios aspectos de los controles de interfaz de usuario de elementos web en una página

Laboratorio: Crear una página de elementos web

En este laboratorio, creará una página de elementos web que conservará la información a través de perfiles de ASP.NET.

Crear una página simple con elementos web

En esta parte del tutorial, creará una página que usa controles de elementos web para mostrar contenido estático. El primer paso para trabajar con elementos web es crear una página con dos elementos estructurales necesarios. En primer lugar, una página de elementos web necesita un control WebPartManager para realizar un seguimiento y coordinar todos los controles de elementos web. En segundo lugar, una página de elementos web necesita una o varias zonas, que son controles compuestos que contienen elementos web u otros controles de servidor y ocupan una región especificada de una página.

Nota:

No es necesario hacer nada para habilitar la personalización de elementos web; está habilitado de forma predeterminada para el conjunto de controles de elementos web. Cuando se ejecuta por primera vez una página de elementos web en un sitio, ASP.NET configura un proveedor de personalización predeterminado para almacenar la configuración de personalización de usuario. Para obtener más información sobre la personalización, vea Información general sobre personalización de elementos web.

Para crear una página para contener controles de elementos web

  1. Cierre la página predeterminada y agregue una nueva página al sitio denominado WebPartsDemo.aspx.

  2. Cambie a vista Diseño.

  3. En el menú Ver, asegúrese de que se seleccionan las opciones deControles no visuales y Detalles para que pueda ver etiquetas y controles de diseño que no tienen una interfaz de usuario.

  4. Coloque el punto de inserción antes de las etiquetas <div> en la superficie de diseño y presione ENTRAR para agregar una nueva línea. Coloque el punto de inserción delante del nuevo carácter de línea, haga clic en el control de lista desplegable Formato de bloque en el menú y seleccione la opción Encabezado 1. En el encabezado, agregue el texto Página de demostración de elementos web.

  5. Desde la pestaña WebParts del Cuadro de herramientas, arrastre un control WebPartManager a la página y posicione el elemento justo después del nuevo carácter de línea y antes de las <div>etiquetas.

    El control WebPartManager no representa ninguna salida, por lo que aparece como un cuadro gris en la superficie del diseñador.

  6. Coloque el punto de inserción dentro de las etiquetas <div>.

  7. En el menú Diseño, haga clic en Insertar tabla, y cree una nueva tabla que tenga una fila y tres columnas. Haga clic en el botón Propiedades de celda, seleccione superior en la lista desplegable Alineación vertical, haga clic en Aceptar, y haga clic en Aceptar de nuevo para crear la tabla.

  8. Arrastre un control WebPartZone a la columna de la tabla izquierda. Haga clic con el botón derecho en el control WebPartZone, elija Propiedades, y establezca las siguientes propiedades:

    Identificador: SidebarZone

    HeaderText: barra lateral

  9. Arrastre un segundo control WebPartZone a la columna de tabla central y establezca las siguientes propiedades:

    Identificador: MainZone

    HeaderText: Main

  10. Guarde el archivo.

La página ahora tiene dos zonas distintas que puede controlar por separado. Sin embargo, ninguna zona tiene contenido, por lo que la creación de contenido es el siguiente paso. Para este tutorial, trabajará con controles de elementos web que solo muestran contenido estático.

El diseño de una zona de elementos web se especifica mediante un elemento <zonetemplate>. Dentro de la plantilla de zona, puede agregar cualquier control ASP.NET, ya sea un control de elementos web personalizados, un control de usuario o un control de servidor existente. Tenga en cuenta que aquí está usando el control Etiqueta y a que simplemente va a agregar texto estático. Cuando se coloca un control de servidor normal en una zona de WebPartZone, ASP.NET trata el control como un control de elementos web en tiempo de ejecución, lo que habilita las características de elementos web en el control.

Para crear contenido para la zona principal

  1. En la vista Diseño, arrastre un control Etiqueta desde la pestaña Estándar del Cuadro de herramientas al área de contenido de la zona cuya propiedadID está establecida en MainZone.

  2. Cambie a la vista Origen. Observe que se agregó un elemento <zonetemplate> para encapsular el control Label en MainZone.

  3. Agregue un atributo denominado title al elemento <asp:label>, y establezca su valor en Content. Quite el atributo Text="Label" del elemento <asp:label>. Entre las etiquetas de apertura y cierre del elemento <asp:label>, agregue texto como Bienvenido a mi página principal dentro de un par de etiquetas de <elemento <h2>. El código debe ser similar al siguiente.

    <asp:webpartzone id="MainZone" runat="server" headertext="Main">
    <zonetemplate>
        <asp:label id="Label1" runat="server" title="Content">
            <h2>Welcome to My Home Page</h2>
        </asp:label>
    </zonetemplate>
</asp:webpartzone>

  4. Guarde el archivo.

A continuación, cree un control de usuario que también se pueda agregar a la página como un control de elementos web.

Crear un control de usuario

  1. Agregue un nuevo control de usuario web al sitio para que actúe como control de búsqueda. Anule la selección de la opción para Colocar código fuente en un archivo independiente. Agréguelo en el mismo directorio que la página WebPartsDemo.aspx y asígnele el nombre SearchUserControl.ascx.

    Nota:

    El control de usuario de este tutorial no implementa la funcionalidad de búsqueda real; solo se usa para mostrar las características de los elementos web.

  2. Cambie a vista Diseño. En la pestaña Estándar del Cuadro de herramientas, arrastre un control TextBox a la página.

  3. Coloque el punto de inserción después del cuadro de texto que acaba de agregar y presione ENTRAR para agregar una nueva línea.

  4. Arrastre un control Button a la página de la nueva línea debajo del cuadro de texto que acaba de agregar.

  5. Cambie a la vista Origen. Asegúrese de que el código fuente del control de usuario tenga un aspecto similar al del ejemplo siguiente.

    <%@ control language="C#"
    classname="SearchUserControl" %>
<asp:textbox runat="server"
  id=" TextBox1"></asp:textbox>
<br />
<asp:button runat="server"
  id=" Button1" text="Search" />

  6. Guarde y cierre el archivo.

Ahora puede agregar controles de elementos web a la zona barra lateral. Va a agregar dos controles a la zona barra lateral, uno que contiene una lista de vínculos y otro que es el control de usuario que creó en el procedimiento anterior. Los vínculos se agregan como un control estándar de servidor Etiqueta, similar a la forma en que creó el texto estático para la zona principal. Sin embargo, aunque los controles de servidor individuales contenidos en el control de usuario podrían estar contenidos directamente en la zona (como el control de etiqueta), en este caso no lo son. En su lugar, forman parte del control de usuario que creó en el procedimiento anterior. Esto muestra una manera común de empaquetar los controles y funcionalidad adicional que desee en un control de usuario y, a continuación, hacer referencia a ese control en una zona como control de elementos web.

En tiempo de ejecución, el conjunto de controles de elementos web ajusta ambos controles con controles GenericWebPart. Cuando un control GenericWebPart encapsula un control de servidor web, el control de elemento genérico es el control primario y puede acceder al control de servidor a través de la propiedad ChildControl del control primario. Este uso de controles de elementos genéricos permite que los controles de servidor web estándar tengan el mismo comportamiento básico y atributos que los controles de elementos web que derivan de la clase WebPart.

Para agregar controles de elementos web a la zona de la barra lateral

  1. Abra la página WebPartsDemo.aspx.

  2. Cambie a vista Diseño.

  3. Arrastre la página de control de usuario que creó, SearchUserControl.ascx, desde Explorador de soluciones a la zona cuya propiedad ID está establecida en SidebarZone y colóquela allí.

  4. Guarde la página WebPartsDemo.aspx.

  5. Cambie a la vista Origen.

  6. Dentro del elemento <asp:webpartzone> para SidebarZone, justo encima de la referencia al control de usuario, agregue un elemento <asp:label> con vínculos contenidos, como se muestra en el ejemplo siguiente. Además, agregue un atributo Title a la etiqueta de control de usuario, con un valor de Search, como se muestra.

    <asp:WebPartZone id="SidebarZone" runat="server"
                 headertext="Sidebar">
    <zonetemplate>
        <asp:label runat="server" id="linksPart" title="My Links">
            <a href="http://www.asp.net">ASP.NET site</a>
            <br />
            <a href="http://www.gotdotnet.com">GotDotNet</a>
            <br />
            <a href="http://www.contoso.com">Contoso.com</a>
            <br />
        </asp:label>
        <uc1:SearchUserControl id="searchPart"
          runat="server" title="Search" />
    </zonetemplate>
</asp:WebPartZone>

  7. Guarde y cierre el archivo.

Ahora puede probar la página navegando a ella en el explorador. La página muestra las dos zonas. La captura de pantalla siguiente muestra la página.

Página de demostración de elementos web con dos zonas

Web Parts VS Walkthrough 1 Screenshot

figura 3: Captura de pantalla del tutorial de VS de elementos web 1

En la barra de título de cada control hay una flecha hacia abajo que proporciona acceso a un menú de verbos de las acciones disponibles que puede realizar en un control. Haga clic en el menú verbos de uno de los controles y, a continuación, haga clic en el Minimizar verbo y observe que el control está minimizado. En el menú verbos, haga clic en Restaurar, y el control vuelve a su tamaño normal.

Habilitar usuarios para editar páginas y cambiar el diseño

Los elementos web proporcionan la capacidad de que los usuarios cambien el diseño de los controles de elementos web arrastrándolos de una zona a otra. Además de permitir que los usuarios muevan controles WebPart de una zona a otra, puede permitir a los usuarios editar diversas características de los controles, incluido su apariencia, diseño y comportamiento. El conjunto de controles de elementos web proporciona funcionalidad de edición básica para controles deWebPart. Aunque no lo hará en este tutorial, también puede crear controles de editor personalizados que permitan a los usuarios editar las características de controles de WebPart. Al igual que con el cambio de la ubicación de un control de WebPart, la edición de las propiedades de un control se basa en ASP.NET personalización para guardar los cambios que realicen los usuarios.

En esta parte del tutorial, agregará la posibilidad de que los usuarios editen las características básicas de cualquier control de WebPart de la página. Para habilitar estas características, agregue otro control de usuario personalizado a la página, junto con un elemento <asp:editorzone> y dos controles de edición.

Para crear un control de usuario que permita cambiar el diseño de página

  1. En Visual Studio, en el menúArchivo, seleccione el submenú Nuevo y haga clic en la opción Archivo.

  2. En el cuadro de diálogo Agregar nuevo elemento, seleccione Control de usuario web. Asigne al nuevo archivo el nombre DisplayModeMenu.ascx. Anule la selección de la opción para Colocar código fuente en archivos independientes.

  3. Haga clic en Agregar para crear el nuevo control.

  4. Cambie a la vista Origen.

  5. Quite todo el código existente del nuevo archivo y pegue el código siguiente. Este código de control de usuario usa características del conjunto de controles de elementos web que permiten que una página cambie su modo de presentación o visualización, y también le permite cambiar la apariencia física y el diseño de la página mientras se encuentra en determinados modo de presentación.

    <%@ Control Language="C#" ClassName="DisplayModeMenuCS" %>

<script runat="server">

    // Use a field to reference the current WebPartManager control.
    WebPartManager _manager;
    void Page_Init(object sender, EventArgs e) {
        Page.InitComplete += new EventHandler(InitComplete);
    }
    void InitComplete(object sender, System.EventArgs e) {
        _manager = WebPartManager.GetCurrentWebPartManager(Page);
        String browseModeName = WebPartManager.BrowseDisplayMode.Name;
        // Fill the drop-down list with the names of supported display modes.
        foreach (WebPartDisplayMode mode in
        _manager.SupportedDisplayModes) {
            String modeName = mode.Name;
            // Make sure a mode is enabled before adding it.
            if (mode.IsEnabled(_manager)) {
                ListItem item = new ListItem(modeName, modeName);
                DisplayModeDropdown.Items.Add(item);
            }
        }
        // If Shared scope is allowed for this user, display the
        // scope-switching UI and select the appropriate radio
        // button for the current user scope.
        if (_manager.Personalization.CanEnterSharedScope) {
            Panel2.Visible = true;
            if (_manager.Personalization.Scope ==
            PersonalizationScope.User)
                RadioButton1.Checked = true;
            else
                RadioButton2.Checked = true;
        }
    }

    // Change the page to the selected display mode.
    void DisplayModeDropdown_SelectedIndexChanged(object sender,
        EventArgs e) {
        String selectedMode = DisplayModeDropdown.SelectedValue;
        WebPartDisplayMode mode =
            _manager.SupportedDisplayModes[selectedMode];
        if (mode != null)
            _manager.DisplayMode = mode;
    }
    // Set the selected item equal to the current display mode.
    void Page_PreRender(object sender, EventArgs e) {
        ListItemCollection items = DisplayModeDropdown.Items;
        int selectedIndex =
        items.IndexOf(items.FindByText(_manager.DisplayMode.Name));
        DisplayModeDropdown.SelectedIndex = selectedIndex;
    }
    // Reset all of a user's personalization data for the page.
    protected void LinkButton1_Click(object sender, EventArgs e) {
        _manager.Personalization.ResetPersonalizationState();
    }
    // If not in User personalization scope, toggle into it.
    protected void RadioButton1_CheckedChanged(object sender, EventArgs e) {
        if (_manager.Personalization.Scope == PersonalizationScope.Shared)
            _manager.Personalization.ToggleScope();
    }

    // If not in Shared scope, and if user has permission, toggle
    // the scope.
    protected void RadioButton2_CheckedChanged(object sender,
    EventArgs e) {
        if (_manager.Personalization.CanEnterSharedScope &&
            _manager.Personalization.Scope == PersonalizationScope.User)
            _manager.Personalization.ToggleScope();
    }
</script>

<div>
    <asp:Panel ID="Panel1" runat="server"
      BorderWidth="1" Width="230" BackColor="lightgray"
        Font-Names="Verdana, Arial, Sans Serif">
        <asp:Label ID="Label1" runat="server"
          Text=" Display Mode" Font-Bold="true"
            Font-Size="8" Width="120" />
        <asp:DropDownList ID="DisplayModeDropdown"
          runat="server" AutoPostBack="true" Width="120"
            OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
        <asp:LinkButton ID="LinkButton1" runat="server"
             Text="Reset User State"
             ToolTip="Reset the current user's personalization data for the page."
             Font-Size="8" OnClick="LinkButton1_Click" />
        <asp:Panel ID="Panel2" runat="server"
            GroupingText="Personalization Scope" Font-Bold="true"
            Font-Size="8" Visible="false">
            <asp:RadioButton ID="RadioButton1" runat="server"
                Text="User" AutoPostBack="true"
                GroupName="Scope"
                OnCheckedChanged="RadioButton1_CheckedChanged" />
            <asp:RadioButton ID="RadioButton2" runat="server"
                Text="Shared" AutoPostBack="true"
                GroupName="Scope"
                OnCheckedChanged="RadioButton2_CheckedChanged" />
        </asp:Panel>
    </asp:Panel>
</div>

  6. Guarde el archivo haciendo clic en el icono guardar de la barra de herramientas o seleccionando Guardar en el menú Archivo.

Para permitir que los usuarios cambien el diseño

  1. Abra la página WebPartsDemo.aspx, y cambie a vista Diseño.

  2. Coloque el punto de inserción en la vista Diseño justo después del control WebPartManager que agregó anteriormente. Agregue una devolución dura después del texto para que haya una línea en blanco después del control WebPartManager. Coloque el punto de inserción en la línea en blanco.

  3. Arrastre el control de usuario que acaba de crear (el archivo se denomina DisplayModeMenu.ascx) en la página WebPartsDemo.aspx y colóquelo en la línea en blanco.

  4. Arrastre un control EditorZone desde la sección WebParts del Cuadro de herramientas hasta la celda de tabla abierta restante de la página WebPartsDemo.aspx.

  5. En la sección WebParts del Cuadro de herramientas, arrastre un control AppearanceEditorPart y un control LayoutEditorPart al controlEditorZone.

  6. Cambie a la vista Origen. El código resultante en la celda de tabla debe ser similar al código siguiente.

    <td valign="top">
    <asp:EditorZone ID="EditorZone1" runat="server">
        <ZoneTemplate>
            <asp:AppearanceEditorPart ID="AppearanceEditorPart1"
              runat="server" />
            <asp:LayoutEditorPart ID="LayoutEditorPart1"
              runat="server" />
        </ZoneTemplate>
    </asp:EditorZone>
</td>

  7. Guarde el archivo WebPartsDemo.aspx. Ha creado un control de usuario que le permite cambiar los modos de visualización y cambiar el diseño de página y ha realizado referencia al control en la página web principal.

Ahora puede probar la capacidad de editar páginas y cambiar el diseño.

Para probar los cambios de diseño

  1. Cargue la página en un explorador.
  2. Haga clic en el menú desplegable Modo de presentación y seleccione Editar. Se muestran los títulos de zona.
  3. Arrastre el control Mis vínculos por su barra de título desde la zona Barra lateral hasta la parte inferior de la zona Principal. La página debe ser similar a la siguiente captura de pantalla.

Página de demostración de elementos web con el control Mis vínculos movido

Web Parts VS Walkthrough 2 Screenshot

Figura 4: Captura de pantalla de VS Tutorial 2 de elementos web

  1. Haga clic en el menú desplegable Modo de presentación y seleccione Examinar. La página se actualiza, los nombres de zona desaparecen y el control Mis vínculos permanece donde lo ha colocado.

  2. Para demostrar que la personalización funciona, cierre el explorador y vuelva a cargar la página. Los cambios realizados se guardan para futuras sesiones del explorador.

  3. En el menú Modo de presentación, seleccione Editar.

    Cada control de la página ahora se muestra con una flecha hacia abajo en su barra de título, que contiene el menú desplegable verbos.

  4. Haga clic en la flecha para mostrar el menú de verbos en el control Mis vínculos. Haga clic en el verbo Editar.

    Aparece el control EditorZone, en el que se muestran los controles EditorPart que agregó.

  5. En la sección Apariencia del control de edición, cambie el Título a Mis favoritos, use la lista desplegable Tipo de Chrome para seleccionar Título soloy, a continuación, haga clic en Aplicar. La captura de pantalla siguiente muestra la página en modo de edición.

Página de demostración de elementos web en modo de edición

Web Parts VS Walkthrough 3 Screenshot

Figura 5: Captura de pantalla de VS Tutorial 3 de elementos web

  1. Haga clic en el menú Modo de presentación, y seleccione Examinar para volver al modo de exploración.
  2. El control ahora tiene un título actualizado y ningún borde, como se muestra en la siguiente captura de pantalla.

Página de demostración de elementos web editados

Web Parts VS Walkthrough 4 Screenshot

Figura 4: Captura de pantalla del tutorial de VS de elementos web 4

Agregar elementos web en tiempo de ejecución

También puede permitir que los usuarios agreguen controles de elementos web a su página en tiempo de ejecución. Para ello, configure la página con un catálogo de elementos web, que contiene una lista de controles de elementos web que desea que estén disponibles para los usuarios.

Permitir que los usuarios agreguen elementos web en tiempo de ejecución

  1. Abra la página WebPartsDemo.aspx, y cambie a vista Diseño.

  2. En la pestaña WebParts del Cuadro de herramientas, arrastre un control CatalogZone a la columna derecha de la tabla, debajo del control EditorZone.

    Ambos controles pueden estar en la misma celda de tabla porque no se mostrarán al mismo tiempo.

  3. En el panel Propiedades, asigne la cadena Agregar elementos web a la propiedad HeaderText del control CatalogZone.

  4. Desde la sección WebParts del Cuadro de herramientas, arrastre un control DeclarativeCatalogPart al área de contenido del control CatalogZone.

  5. Haga clic en la flecha de la esquina superior derecha del control DeclarativeCatalogPart para exponer su menú Tareas y, a continuación, seleccione Editar plantillas.

  6. En la sección Estándar del Cuadro de herramientas, arrastre un control FileUpload y un control Calendar a la sección WebPartsTemplate del control DeclarativeCatalogPart.

  7. Cambie a la vista Origen. Inspeccione el código fuente del elemento <asp:catalogzone>. Observe que el control DeclarativeCatalogPart contiene un elemento <webpartstemplate> con los dos controles de servidor incluidos que podrá agregar a la página desde el catálogo.

  8. Agregue una propiedad Title a cada uno de los controles que agregó al catálogo, utilizando el valor de cadena que se muestra para cada título en el ejemplo de código siguiente. Aunque el título no es una propiedad que normalmente se puede establecer en estos dos controles de servidor en tiempo de diseño, cuando un usuario agrega estos controles a una zona de WebPartZone del catálogo en tiempo de ejecución, cada uno se ajusta con un control GenericWebPart. Esto les permite actuar como controles de elementos web, por lo que podrán mostrar títulos.

    El código de los dos controles incluidos en la control DeclarativeCatalogPart debe tener el siguiente aspecto.

    <asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server">
    <WebPartsTemplate>
        <asp:Calendar ID="Calendar1" runat="server" title="My Calendar" />
        <asp:FileUpload ID="FileUpload1" runat="server" title="Upload Files" />
    </WebPartsTemplate>
</asp:DeclarativeCatalogPart>

  9. Guarde la página.

Ahora puede probar el catálogo.

Para probar el catálogo de elementos web

  1. Cargue la página en un explorador.

  2. Haga clic en el menú desplegable Modo de presentación y seleccione Catálogo.

    Se muestra el catálogo titulado Agregar elementos web.

  3. Arrastre el control Mis favoritos desde la zona principal de nuevo hasta la parte superior de la zona barra lateral y colóquelo allí.

  4. En el catálogo Agregar elementos web, active ambas casillas y, a continuación, seleccione Main en la lista desplegable que contiene las zonas disponibles.

  5. Haga clic en Agregar en el catálogo. Los controles se agregan a la zona Main. Si lo desea, puede agregar varias instancias de controles desde el catálogo a la página.

    La captura de pantalla siguiente muestra la página con el control de carga de archivos y el calendario en la zona principal.

Controls added to Main zone from the catalog

Figura 5: Controles agregados a la zona principal desde el catálogo 6. Haga clic en el menú desplegable Modo de presentación y seleccione Examinar. El catálogo desaparece y se actualiza la página. 7. Cierre el explorador. Vuelva a cargar la página. Los cambios realizados se conservan.