Está en la página 1de 5

Personalización y Temas

Personalización

 
       
  
  

     
 
 ! 
  

   
"# 
  !  
 $      
%!      & '(!
)
   

 
! 
Creacion de sitios web personalizados
         !
   
 * !
 
    $ 
  

 
    
 
 
 !     
   %

  
     

$   
   & 
   

 !
  
 
 
 * !
    *  $  $
! 
 !
 
* + 
    % !    !
  $ & 
Configurar la gestión de perfiles
c   *,
p c+ $ %!
   ! 
* !  

 
$ & 
-p  

 
   %!
  !  
 
&
c )
!
   

! 
%  . &

   !  $
!    
 $   
 
 *
 
   **  
 $   
!
 $
!   ! 
 
!
 !   
# !
  
#
/
$* ** 
   
$   ! 
  !/,
Dentro de system.web tendremos también compilation, authentication«
<profile enabled="true" defaultProvider="AspNetSqlProfileProvider">
<properties>
<add name="lastname"/>
<add name="firstname"/>
<add name="phoneNumer"/>
<add name="birthDate" type="System.DateTime"/>
</properties>
</profile>
Así, la API del perfil crea espacio para almacenar cuatro fragmentos de información. El
tipo de almacenamiento predeterminado es String, pero podemos almacenar otros valores
como diferentes objetos.
Si queremos, desde nuestra página de LoginView, podemos crear un HiperLink a otra página
ProfileInfo.aspx en donde tengamos una tabla con sus TextBox en donde el usuario
introduce la información de los cuatro espacios requeridos.
Esta tabla también deberá incluir un botón Save cuyo código almacenará los datos en
dichos espacios.
protected void Button1_Click(object sender, EventArgs e)
{
if (Profile.IsAnonymous == false)
{
Profile.lastName = this.lastName.Text;
Profile.firstName = this.firstName.Text;
Profile.phoneNumber = this.phoneNumber.Text;
DateTime birthDate = Convert.ToDateTime(this.birthDate.Text);
Profile.birthDate = birthDate;
Response.Redirect("Welcome.aspx");
}
El objeto Profile tiene propiedades que se corresponden con las propiedades añadidas al
web.config. podemos comprobar el objeto Profile creando un panel en la página (en su
parte inferior) en donde tengamos Labels que tengan cualquier texto escrito ahora. Cada
label es importante su ID.

c  
   
Cuando se cargue la página, comprobaremos si tenemos datos de perfil para este usuario y
si es así, ponemos visible el panel y en cada label aparecere el texto de cada espacio.
Si no hubiera, el panel permanecería oculto.
protected void Page_Load(object sender, EventArgs e)
{
if (Profile.UserName !=null && Profile.IsAnonymous==false)
{
this.pnlInfo.Visible = true;
this.label1.Text = Profile.firstName;
...
this.label4.Text= Profile.birthDate.ToShortDateString();
}
else
{
this.pnlInfo.Visible=false;
}
Si ejecutamos la aplicación, iniciamos la sesión y hacemos clic en Añadir Información
del Perfil.
Se nos manda al formulario Informacion del Perfil.
Cuando Guardamos y volvemos a la pagina Welcome, se desencadena el evento Page_Load.
Las dos partes de la instrucción if devuelve true (userName está en el perfil + usuario
ha iniciado una sesión y no es anónimo)

01234 +1 4c+5c+4 

|  
  
Comprueba las tablas de la base de datos aspnetdb.
Abrimos la tablas aspnet_Users y aspnet_Profile (muestra la información de perfil de
cada usuario).
La tabla Users muestra cada usuario con UserID única. La tabla de perfil tiene una clave
extranjera en esa tabla (UserID) y muestra PropertyNames y PropertyValues que concuerdan
con las entradas de profile de web.config.
       
Muchas veces deberemos almacenar conlecciones o tipos (clases) complejos definidos por
el usuario (piensa en e-commerce).
Podemos editar web.config para agregar una colección de cadenas y permitiremos al
usuario escoger uno o más libros que almacenaremos (lo que haya seleccionado) en su
perfil.
<add name="ChosenBooks" type="System.Collections.Specialized.StringCollection"/>
Vamos a itnroducir los libros a elegir a través de un CheckBoxList (los ListItem los
puedes añadir como prefieras). (fichero ProfileInfo.aspx)
El botón Save deberá añadir un nuevo Profile que almacenar para ChosenBooks.
Profile.ChosenBooks = new System.Collections.Specialized.StringCollection ();
foreach (ListItem li in this.cblChosenBooks.Items)
{if (li.Selected)
{Profile.ChosenBooks.Add (li.Value.ToString());
Podemos visualizar los datos rellenados al Page_Load o en las tablas de Profile.
En el Page_Load:
this.lbBooks.Items.Clear();
if (Profile.ChosenBooks != null)

c  
   --
{
foreach(string bookName in Profile.ChosenBooks)
{
this.lbBooks.Items.Add(bookName);
}
}
Cuando hacemos clic en el perfil podremos añadir o cambiar los libros asociados a
nuestro perfil puesto que se almacena en Profile.

01c47348 1 4c+5c+4 

 

c  
   66

    
Los temas permiten ofrecer un nivel de personalización a nuestros usuarios (cambiar el
color y funcionamiento de los controles).
Un tema es una colección de máscaras. Una máscara describe el aspecto que tiene que
tener un control. (atributos de hoja de estilo, imágenes, colores«).
Podemos tener varios temas y así modificar el aspecto cambiando un conjunto de máscaras
con hacer clic en un botón.
Si lo combinamos con la personalización, nuestro sitio puede recordar el aspecto y
funcionamiento preferido de un usuario.
Hay dos tipos de temas_

`p De hoja de estilo. Añadimos StyleSheetTheme a la directiva Page.


`p Temas de personalización. Añadimos el atributo Theme a la directiva Page.
También podemos aplicarlos a todo el sitio Web desde web.config.
<pages theme=´nombre de tema´ />
La personalización se crea con controles (igual que se crean para un sitio normal) con
sus atributos correspondientes. (SkinID permitirá que unos controles tengan una
apariencia diferente).
3     
Los temas se almacenan en App_Themes.
En el Explorador de soluciones Agregamos una carpeta de temas
Creamos carpetas con sus nombres y dentro de cada una un nuevo archivo (skin).
No olvidemos de configurar web.cofig
<profile enabled="true" defaultProvider="AspNetSqlProfileProvider">
<properties>
<add name="Theme"/>
Creamos un archivo para cada control que queramos personalizar.
El archivo skin no tiene nada más que asp:control«con sus atributos.

Para especificar los temas de la página solo debemos añadir el atributo Theme en la
directiva Page y asociar la cadena de la carpeta correspondiente de App_Themes.
Al cargar la página en el navegador podemos comprobar.
    
Podemos poner más de una máscara distinta a un control en nuestra página.
En el archivo skin tendremos dos asp:control pero uno de ellos tendrá un nombre con
SkinID. Bastará en el archivo aspx normal añadir el atributo SkinID al control que
queremos personalizar con un nombre de máscara.

01:3 c" ;+ 


 

c  
   99
|    
Permiten a los usuarios cambiar la configuración de partes del sitio para que se ajusten
a sus necesidades y preferencias.
Podemos crear un nuevo sitio Web.
Los elementos Web se crean usando un componente estructural llamado WebPartManager que
permite gestinar la interacción de elementos web y controles de interfaz de usuario.
Este control invisible registra los controles de elemento Web indificuales y gestiona
las zonas en elemetnos Web.
h  
 
Estas páginas están divididas en zonas (áreas de la página que pueden tener contenido) y
controles que se derivan de la clase Part.
Es habitual configurar estas zonas utilizando tablas.(aunque no es imprescindible)
En cada celda arrastramos un WebParZone.
A cada zona se le pueden añadir los controles que deseemos.
Al cargar la página vemos como tenemos comandos Minimizar y Cerrar.
(si hubieramos usado una sesión, la configuración de estos Elementos Web se almacena
n
para cada usuario).
   
Arrastramos controles a cada zona.
En la vista código podemos cambiar la propiedad de las etiquetas y el resto de
controles.
Si utilizamos una sesión, recuerda automáticamente minimizar y restaurar de cada
WebPartZone.
(fichero WebPartsDemo.aspx)

01 ++4 =  c1

 
   

  
Los elementos Web permiten a los usuarios cambiar el diseño de los controles de elemento
Web arrastrandolos de una zona a otra.
Tb podemos permitir a los usuarios modificar el aspecto de los controles, su disposición
y su comportamiento.
Podemos crear controles que nos permitan realizar una edición más amplia.

h 
  

 
Debemos pasar del modo edición al de diseño para personalizar totalmente nuestra página.
Podemos crear un control que vayamos a reutilizar en otras ocasiones, es decir, un
control de usuario.
Estos controles tienen la extensión ascx y éste nos permitirá pasar de Eximinar, Editar
y Diseñar.
Agregamos como nuevo elemento un Control de usuario Web. (el fichero no tiene la
directiva Page sino Control)

c  
   <<