Personalización de las plantillas para la vista móvil en SharePoint


Una de las muchas características que ofrece SharePoint (tanto MOSS como WSSv3) es la posibilidad de visualizar nuestros sitios en dispositivos móviles en forma de listas y librerías de datos. Es tan simple como añadir a nuestra URL una /m. De tal forma, que si nuestra URL es http://moss2007 poniendo http://moss2007/m accederemos a la vista móvil. Haciendo esto se redirecciona a una página default.aspx contenida en el directorio …12TEMPLATELAYOUTSMOBILE. Esta a su vez se redirecciona  a otra página contenida en el mismo directorio llamada mbllists.aspx. Todas las páginas que están en este directorio son plantillas usadas para renderizar la vista móvil. Además existe un control ascx llamado MobileDefaultTemplates.ascx, que se encuentra en el directorio …12TEMPLATECONTROLTEMPLATES, y que es la plantilla que se encuentra por debajo de las plantillas anteriores.


Para personalizar la vista móvil que nos ofrece SharePoint tenemos tres opciones:


·         Modificar las plantillas del directorio …12TEMPLATELAYOUTSMOBILE.


·         Crearnos nuestro propio control ascx en el directorio …12TEMPLATECONTROLTEMPLATES para modificar lo que creamos necesario.


·         Combinar las dos opciones anteriores.


Además existe la posibilidad, de cambiar la redirección de la página default.aspx para que apunte a otra página. De este modo podremos crearnos nuestras propias páginas para la vista móvil.


En este artículo solo vamos a trabajar con las dos primeras opciones.


·        Personalización trabajando con las plantillas directamente.


La vista móvil que por defecto nos ofrece SharePoint es la siguiente:


 



 


Como se puede apreciar es un poco sosa, carece de colores y no tiene ninguna imagen. Lo que vamos a hacer en el siguiente ejemplo es colorear un poco la página y mostrar un logo, en nuestro caso, del CIIN. Esto lo haremos solamente a la página que aparece por defecto, mbllists.aspx, pero se puede aplicar al resto de las páginas del directorio _layouts/mobile.


Para ello nos vamos a valer de la clase System.Web.UI.MobileControls en la que se encuentran todos los controles necesarios para crear páginas Web para dispositivos móviles.


Lo primero que hay que hacer es crearse un control ASP.Net que nos sirva como hoja de estilos, con el siguiente código:


 







<Mobile:Stylesheet  runat=”server”>


 


   <Style name=”Formulario”  font-name=”Verdana”  backcolor=”#F0F0F0″


        wrapping=”wrap” />


 


   <Style name=”Titulo” font-size=”Large” font-name=”Verdana” font-bold=”true”


        forecolor=”#354260″  backcolor=”Black”  wrapping=”wrap” />


     


   <Style name=”Contenido” font-size=”Normal” font-name=”Verdana” font-bold=”true”


        forecolor=”#99BC5A” />


 


</Mobile:Stylesheet>


 


 


A este control lo llamaremos Mobile_style.ascx y lo guardaremos en el directorio _layouts/mobile. Podemos crear cuantos estilos queramos. En este caso hemos creado tres estilos, uno que se aplicará a toda la página, otro sólo para el título y el otro para la zona de contenido.


El siguiente paso es modificar la página mbllists.aspx de la siguiente forma:


·         Antes del tag  <SPMobile:SPMobileForm> tenemos que hacer referencia al control creado anteriormente que nos servirá como hoja de estilos:







<mobile:StyleSheet id=”Style1″ ReferencePath=”Mobile_style.ascx”


 


·         Dentro del tag <SPMobile:SPMobileForm> habrá que añadir una referencia al estilo aplicado en el formulario:







<SPMobile:SPMobileForm RunAt=”Server” PageType=”HomePage” Paginate=”true” StyleReference=”Formulario”>


 


·         Dentro del tag <SPMobile:SPMobilePageTitle> habrá que añadir una referencia al estilo aplicado en el título:







<SPMobile:SPMobilePageTitle RunAt=”Server” StyleReference=”Titulo”/>


 


·         Dentro del tag <SPMobile:SPMobilePageContents> habrá que añadir una referncia al estilo aplicado en el contenido.







<SPMobile:SPMobilePageContents RunAt=”Server” StyleReference=”Contenido”/>


 


·         Y por último añadiremos una imagen encima del título. Para ello hay que introducir el siguiente código antes del tag <SPMobile:SPMobilePageTitle/>







<mobile:Image ID=”Image1″ RunAt=”Server” ImageUrl=”~ImageslogoCIIN_pqverde.jpg”  />


 


Después de seguir estos pasos, vamos a comprobar cómo ha quedado nuestra vista móvil:



 


Vemos como la página es mucho más vistosa que al principio. Si seguimos navegando por el resto de las páginas nos daremos cuenta de que no están personalizadas. Esto es así, porque solo hemos cambiado la página principal. Si queremos cambiar todo el sitio, debemos personalizar las páginas contenidas en el directorio _layoutsmobile.


·        Creación de un control acsx para usarlo como plantilla


Existe otra forma de personalizar la vista móvil que nos ofrece SharePoint. Podemos crearnos un control ascx en el que podremos variar desde el aspecto visual hasta el contendido de la vista móvil.


Lo primero que hay que hacer es crearse un nuevo archivo con extensión ascx y guardarlo en la carpeta …12TEMPLATECONTROLTEMPLATES, con el nombre MyMobileControlTemplate.ascx. Lo abrimos con nuestro editor preferido (Visual Studio, SPD, Notepad, etc.) y escribimos el siguiente código:







<%@ Control Language=”C#”   %>


<%@ Assembly Name=”Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>


<%@ Register TagPrefix=”mobile” Namespace=”System.Web.UI.MobileControls” Assembly=”System.Web.Mobile, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a” %>


<%@ Register TagPrefix=”SharePoint” Namespace=”Microsoft.SharePoint.WebControls” Assembly=”Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>


<%@ Register TagPrefix=”SPMobile” Namespace=”Microsoft.SharePoint.MobileControls” Assembly=”Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>


 


 


<SharePoint:RenderingTemplate RunAt=”Server” ID=”Mobile_Default_HomePage_Title”>


                <Template>


                                <mobile:Image ID=”Image1″ RunAt=”Server” ImageUrl=”~ImageslogoCIIN_pqverde.jpg”  />


<mobile:Label RunAt=”Server” Text=”CIIN->Home” font-size=”Large” font-name=”Verdana”                                font-bold=”true” forecolor=”#354260″ />


                </Template>


</SharePoint:RenderingTemplate>


 


<SharePoint:RenderingTemplate RunAt=”Server” ID=”Mobile_Default_HomePage_Contents”>


                <Template>


                               <SPMobile:SPMobileComponent RunAt=”Server” TemplateName=”Mobile_STS_HomePage_Contents”


                               font-size=”Normal” font-name=”Verdana” font-bold=”true” forecolor=”#99BC5A” />


                </Template>


</SharePoint:RenderingTemplate>


 


Una vez guardado el archivo tenemos que hacer un iisreset desde la consola de comandos. Cuando se acabe de resetear el ISS podremos acceder a la vista móvil:



Como podemos comprobar además de cambiar el aspecto visual de la página, hemos cambiado también el contenido, en concreto el título. Como en el otro caso, se ha personalizado sólo la página principal. Si queremos personalizar el resto de páginas tendremos que añadir más tags <SharePoint:RenderingTemplate/> pero con la ID que corresponda. En la página http://msdn2.microsoft.com/en-us/library/ms468582.aspx tenemos una referencia de los ID que hay  para modificar para personalizar el resto de las páginas. Además podemos hecharle un vistazo a la plantilla que utiliza por defecto SharePoint que se encuentra en el directorio …12TEMPLATECONTROLTEMPLATES y se llama MobileDefaultTemplates.ascx. Este fichero no se puede editar, por lo que si queremos usarle tenemos que copiarle y guardarlo con otro nombre. En el podremos cambiar cuanto queramos para personalizar la vista movil de SharePoint.


En la página http://msdn2.microsoft.com/en-us/library/ms464268.aspx hay mucha más información de cómo trabajar con las plantillas de la vista movil de SharePoint.


 

3 comentarios en “Personalización de las plantillas para la vista móvil en SharePoint”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *