jueves, 25 de febrero de 2010

Estilos personalizados en SharePoint 2010 (I)

Los que hayáis trabajado con MOSS en entornos de publicación sabréis que una de las tareas típicas en todos los proyectos era la creación de almenos una característica para aplicar un estilo visual al portal o a los portales involucrados en el proyecto. Esta característica contenía elementos tales como páginas maestras, plantillas de página, hojas de estilo, transformaciones XSLT, imágenes, etc.  En este artículo os voy explicar cómo aprovechar las nuevas características de Visual Studio 2010 para crear este tipo de características en proyectos desarrollados sobre SharePoint 2010 de una manera más simple y dirigida.

Antes de comenzar es importante destacar el hecho de que lo principal es conocer lo que se está haciendo. Los que me conocéis sabéis que no soy partidario del uso de asistentes como primera opción, pero considero que una vez conoces el detalle de cómo se hacen las cosas, estos asistentes mejoran tu productividad a la hora de hacer las mismas tareas una y otra vez. Dicho esto, comenzamos.

Una vez tenemos claros los elementos que van a formar parte de nuestra solución inicialmente, abrimos Visual Studio y creamos un proyecto vacío de SharePoint 2010. En mi caso, llamaré al proyecto ProjectLayouts.

image

A continuación os aparecerá una imagen como la de la figura para que seleccionéis el modo en el que queráis desplegar la solución. Ya habréis leído mucho sobre las SandBoxes Solutions y sobre las ventajas que nos proporcionan. En este caso podríamos plantearnos desplegar nuestra característica en modo SandBox, ya que únicamente contiene elementos a nivel de colección de sitios y podría tener un comportamiento totalmente aislado del resto de desarrollos. No obstante, para el ejemplo que os planteo yo optaré por el modo granja, ya que en un futuro os explicaré como crear una definición de sitio que incluya la característica que ahora vamos a construir y las definiciones de sitio no se pueden desplegar en modo SandBox.

image 

Una vez creado el proyecto, empezamos a plantear el contenido del paquete. Si recordáis cuando trabajábamos con MOSS, simplificando mucho las cosas tendríamos una característica que incluyese una serie de módulos, cada uno de los cuales contuviera una lista de elementos de un tipo determinado de artefacto. Utilizando las nuevas características de SharePoint 2010 procederemos de la siguiente manera.

Empezaremos por las páginas maestras. Para ello añadiremos un nuevo elemento al proyecto de tipo Module. Yo utilizaré el nombre ProjectMasterPages.

image

Si echamos un primer vistazo rápido a lo que se crea por defecto veremos algo similar a la siguiente figura. Básicamente se ha creado el módulo que hemos indicado con el fichero Elements.xml que contendrá la definición del módulo y con un archivo de ejemplo (Sample.txt) y se ha creado la característica asociada a dicho módulo.

image

Llegados a este punto podríamos cambiar los datos de la característica para adecuarla a nuestras necesidades. En mi ejemplo concreto he cambiado el nombre de la caracteristica a “ProjectLayouts Feature” y he indicado que el ámbito de la característica será Site (colección de sitios), ya que los elementos de branding se despliegan siempre a este nivel. Tal y como se muestra en la figura, la característica contiene automáticamente la referencia al módulo que préviamente hemos creado.

image

Una vez tenemos la estructura de alto nivel clara, llega el momento de introducir los elementos concretos. Para empezar podemos eliminar el fichero de ejemplo ya que nosotros no lo necesitamos. A continuación necesitamos indicar a SharePoint dónde queremos que el módulo incluya los ficheros que contiene y, para ello basta con añadir el atributo url al nodo Module. El fichero Elements.xml debería quedar así:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="masterpage" Url="_catalogs/masterpage">
  </Module>
</Elements>

A continuación, para añadir la página maestra a nuestro módulo tenemos dos opciones: o bien añadimos una página maestra existente o bien creamos una de cero y la rellenamos con el contenido deseado. En este caso crearemos una de cero pulsando con el botón derecho del ratón y seleccionando la opción Añadir nuevo elemento, y escogiendo un fichero de texto con el nombre que deseamos, tal y como muestra la figura:

image 

Una vez hecho esto, veremos como el fichero Elements.xml se modifica automáticamente. No obstante, tenemos que hacer un cambio manual que consiste en quitar la cadena “ProjectMasterPages/” del atributo Url del fichero que acabamos de introducir, ya que anteriormente hemos especificado que el módulo desplegará los elementos directamente en la carpeta _catalogs/masterpage y si no hacemos este cambio el sistema creará una carpeta llamada ProjectMasterPages dentro de la galería de páginas maestras, y esto no es lo que queremos. Además, es necesario añadir las propiedades específicas del tipo de contenidos “Página Maestra” dentro del nodo File. Lo mínimo a especificar es la propiedad ContentType, pero también es necesario indicar que el elemento a desplegar formará parte de una librería de documentos mediante el atributo Type con valor GhostableInLibrary. El fichero Elements.xml quedaría, por ejemplo, de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="ProjectMasterPages" Url="_catalogs/masterpage">
    <File Path="ProjectMasterPages\msdn.master" Url="msdn.master" Type="GhostableInLibrary">
      <Property Name="ContentType" Value="$Resources:cmscore,contenttype_masterpage_name;" />
    </File>
  </Module>
</Elements>

El fichero de texto que hemos creado está, evidentemente, vacío. En este momento podemos incluir aquel contenido que consideremos oportuno. Un detalle más, si seleccionamos el proyecto en el explorador de soluciones y accedemos a sus propiedades veremos algunos elementos importantes. En esta ocasión os comentaré la propiedad Include Assembly que por defecto está a e indica que el proyecto generará un ensamblado que se desplegará al GAC o a la carpeta bin en función de otras dos propiedades visibles en la misma zona (Assembly Deployment Target y Sandboxed Solution). En este caso no necesitamos ningún ensamblado puesto que sólo queremos desplegar ficheros de branding, por lo tanto podemos cambiar el valor de la variable a no.

image 

Después de todos estos pasos estamos en disposición de desplegar la solución que acabamos de crear. Únicamente hemos añadido una página maestra pero, sobretodo si es la primera vez que lo hacemos, es conveniente avanzar poco a poco para asegurar el método. Para desplegar el paquete bastará con pulsar con el botón derecho del ratón sobre el proyecto de Visual Studio y seleccionar la opción de desplegar. Con las opciones por defecto desplegará el paquete sobre la colección de sitios y activará la característica que hemos creado.

Como se puede apreciar en la figura, ya tenemos disponible la nueva página maestra msdn.master en la lista de páginas maestras del sitio:

image

Bien, éste ha sido el primer paso en la construcción de nuestra característica. En la próxima entrada de la serie explicaré cómo continuar para tener un conjunto completo de elementos para dotar a nuestro portal de un estilo gráfico personalizado.

0 comentarios: