Przekonanie, że SharePoint musi wyglądać mało atrakcyjnie odchodzi powoli do lamusa i pojawia się coraz więcej materiałów jak zmienić jego wygląd. SharePoint od wersji 3.0 zawiera 18 motywów witryn, które można ustawiać w zależności od gustu plus do tego można tworzyć własne.
Jeśli posiadamy uprawnienia to w menu Akcje witryny klikamy polecenie Ustawienia witryny. W grupie Wygląd i działanie klikamy łącze Motyw witryny, następnie wybieramy odpowiedni motyw i klikamy Zastosuj.
W tym poście postaram się pokazać w jaki sposób możemy dodać własny motyw witryny, który będzie widoczny wśród innych dostępnych z pudełka motywów.
Cała zabawa zaczyna się od uświadomienia sobie, że tak na prawdę na wygląd SharePoint'a składają się pliki graficzne(*.jpg, *.png, itp), plik CSS i oczywiście fundament tego stanowi stronka *.aspx, która korzysta z masterpage. Technika masterpage została wprowadzona w .NET 2.0 więc nie będę się teraz nad nią rozwodził. Jak zbudowana jest strona w SharePoint można łatwo sprawdzić np. za pomocą IT Developer ToolBar (
link).
Oczywiście dla czytelności zrzutu nie wypisywałem wszystkich klas tylko główne. Wszystkie klasy świetnie opisane są pod adresem
link.
Teraz, gdy już wiemy jak jest złożona stronka w SharePoint to bierzemy się do pracy. Jestem zwolennikiem wdrażania rozwiązań za pomocą paczek instalacyjnych, w skład których wchodzą funkcje itp., więc otwieramy Visual Studio i tworzymy nowy projekt typu
Class Library. Następnie wykonujemy kroki:
1. Zakładamy odpowiednią strukturę katalogową, jak na rysunku. Katalog 1033 jest katalogiem dla wersji językowej (1033 - polski).
2. Katalog MyThemeSite w katalogu IMAGES został stworzony do przechowywania wszystkich grafik związanych ze stroną. Konieczne jest umieszczenie w tym katalogu pliku na przykład o nazwie preview.png, który to będzie pokazywany jako podgląd stylu.
3. W katalogu THEMES/MyThemeSite dodajemy plik CONSTRUC.INF (dodajemy zwykły plik tekstowy i zmieniamy rozszerzenie).
Plik zawiera informację o nazwach szablonu jakie mają się wyświetlać w różnych wersjach językowych. Przykładowa zawartość:
[info]
title=MyThemeSite
codepage=65001
version=3.00
format=3.00
readonly=true
refcount=0
[titles]
1033=MyThemeSite
1045=MyThemeSite
4. W tym samy katalogu zakładamy także plik theme.css, który będzie zawierał szablon styli dla motywu. Plik jest dosyć obszerny więc nie będę go tu przytaczał. Polecam skopiowanie go pliku z katalogu któregoś ze styli, które znajdują się w katalogu: $:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\THEMES.
5. Tworzymy plik dla klasy dziedziczącej po SPFeatureReceiver np.: MyThemeSiteFeatureReceiver.cs i dodajemy referencje do biblioteki Microsoft.SharePoint. Zawartość pliku:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.SharePoint;
namespace MyThemeSite
{
public class MyThemeSiteFeatureReceiver : SPFeatureReceiver
{
public override void FeatureActivated(SPFeatureReceiverProperties properties)
{
}
public override void FeatureDeactivating(SPFeatureReceiverProperties properties)
{
}
public override void FeatureInstalled(SPFeatureReceiverProperties properties)
{
}
public override void FeatureUninstalling(SPFeatureReceiverProperties properties)
{
}
}
}
Klasa została stworzona, żeby w elegancji sposób zmodyfikować plik …\12\TEMPLATE\LAYOUTS\1033\SPTHEMES.XML który zawiera informacje jakie style mają zostać wyświetlone po przejściu do strony Motyw witryny. Przykładowa noda opisująca podstawowy motyw:
<Templates>
<TemplateID>classic</TemplateID>
<DisplayName>Klasyczny</DisplayName>
<Description>Motyw Klasyczny ma białe tło z niebieskimi obszarami.</Description>
<Thumbnail>images/thclassic.gif</Thumbnail>
<Preview>images/thclassic.gif</Preview>
</Templates>
gdzie:
TemplateID - identyfikator stylu, dobrze żeby identyfikator stylu był taki sam jak nazwa stylu np. MyThemeSite
DisplayName - nazwa wyświetlana motywu
Description - opis motywu
Thumbnail, Preview - podgląd motywu
Zawartość pliku MyThemeSiteFeatureReceiver.cs może wyglądać w ten sposób (źródła pochodzą z paczki 10 szablonów - TenThemesForSharePoint_VSeWSS)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.SharePoint;
using System.Xml.Linq;
using System.IO;
using Microsoft.SharePoint.Utilities;
namespace MyThemeSite
{
public class MyThemeSiteFeatureReceiver : SPFeatureReceiver
{
private const string _themeName = "MyThemeSite";
private const string _themeNiceName = "Mój szablon";
private enum ModificationType
{
Add,
Remove
}
public override void FeatureActivated(SPFeatureReceiverProperties properties)
{
ModifySPTheme(ModificationType.Add);
}
public override void FeatureDeactivating(SPFeatureReceiverProperties properties)
{
ModifySPTheme(ModificationType.Remove);
}
public override void FeatureInstalled(SPFeatureReceiverProperties properties)
{
}
public override void FeatureUninstalling(SPFeatureReceiverProperties properties)
{
}
// path to the SPTHEMES.XML file
string spthemePath = Path.Combine(SPUtility.GetGenericSetupPath(@"TEMPLATE\LAYOUTS\1033"), "SPTHEMES.XML");
string contents = string.Empty;
// read the contents of the SPTHEMES.XML file
using (StreamReader streamReader = new StreamReader(spthemePath))
{
contents = streamReader.ReadToEnd();
streamReader.Close();
}
using (StringReader stringReader = new StringReader(contents.Trim()))
{
// create a new XDocument from the contents of the file
doc = XDocument.Load(stringReader);
// retrieve all elements with a TemplateID of our theme. At most, there should only be one
var element = from b in doc.Element(ns + "SPThemes").Elements(ns + "Templates")
where b.Element(ns + "TemplateID").Value == _themeName
select b;
bool exists = (element != null && element.Count() > 0);
if (type == ModificationType.Add)
{
if (!exists)
{
// create an XElement that defines our custom theme
XElement xml =
new XElement(ns + "Templates",
new XElement(ns + "TemplateID", _themeName),
new XElement(ns + "DisplayName", string.Format("{0} Site Theme", _themeNiceName)),
new XElement(ns + "Description", string.Format("A {0}-like Site Theme", _themeNiceName)),
new XElement(ns + "Thumbnail", string.Format("1033/IMAGES/{0}/preview.jpg",_themeName)),
new XElement(ns + "Preview", string.Format("1033/IMAGES/{0}/preview.jpg", _themeName)));
// add the element to the file and save
doc.Element(ns + "SPThemes").Add(xml);
doc.Save(spthemePath);
}
}
else
{
if (exists)
{
// if the element exists, remove it and save
element.Remove();
doc.Save(spthemePath);
}
}
stringReader.Close();
}
}
}
}
Podany kod korzysta z LINQ, więc wymagane jest zainstalowanie .NET 3.5 lub uzupełnienie pliku SPTHEMES.XML ręcznie.
6. Stworzyliśmy odbiornik zdarzeń (tłumaczenie według polskiego wydania książki T. Pattison'a) między nami dosyć nieudane ;). Musimy teraz powiedzieć SharePoint'owi żeby wykonał kod, który znajduje się w naszej klasie. Robimy to za pomocą funkcji. W VisualStudio w katalogu /TEMPLATES/FEATURES/MyThemeSite/ zakładamy plik Feature.xml. Zawartość:
<Feature Id="969e56fa-799a-40b3-a1ee-88b706208aa6"
Title="Motyw witryny - MyThemeSite"
Description="Aktywuje motyw witryny."
Version="12.0.0.0"
Hidden="FALSE"
Scope="Site"
DefaultResourceFile="core"
ReceiverAssembly="MyThemeSite, Version=1.0.0.0, Culture=neutral, PublicKeyToken=5ccf5a358270d7a3"
ReceiverClass="MyThemeSite.MyThemeSiteFeatureReceiver"
xmlns="http://schemas.microsoft.com/sharepoint/">
</Feature>
Składnia jest pewnie dobrze znana więc nie będę jej tłumaczył.
To już koniec. Wystarczy zainstalować oraz aktywować funkcję i możemy się cieszyć nowym motywem.
Zaciekawił mnie temat, gdyż chciałem opakować 10 szablonów które można ściągnąć za darmo z Intenetu (
link) w paczkę. Szablony można potraktować jako przykłady do tego posta.
Chciałem zrobić, żeby 10 szablonów było instalowane za pomocą jednej funkcji, a wszystko było spakowane w jedną paczkę - co upraszcza instalację. Paczkę przygotowałem dla polskiej wersji SharePoint'a i jest do ściągnięcia
tutaj.
Dodany:
2009-04-15 21:40:30 przez
Michał Nikołajuk |
Wypowiedzi: 3