Блог Сергея Байдачного

Мой блог о технологиях

Archive for Апрель 2010

Моя книга о Silverlight 4 уже в продаже

19 комментариев

Written by Sergiy Baydachnyy

19.04.2010 at 11:01

Опубликовано в SilverLight

Tagged with

SharePoint 2010: Темы

7 комментариев

В SharePoint 2010 изменения коснулись core.css. Теперь это не один файл, а целый набор файлов, разбивающих старый мега-стиль на несколько стилей, сгрупированных по назначению. Кроме того, в стандартный набор предопределенных списков входит список под названием Style Library. Даный список (библиотека) может быть использован разработчиком для размещения картинок, стилей и других элементов, связанных с оформлением сайта, полагаясь на то, что список всегда присутствует.

А вот вопрос тем требует более детального рассмотрения. Если Вы сталкивались с SharePoint 2007, то знаете, что для изменения внешнего вида сайта можно было использовать темы. Благодаря темам можно было задать цвета для различных элементов интерфейса, определить основные шрифты, а также фон. Темы представляли собой файл CSS, который переписывал стили, указанные в core.css. Кроме того, тема содержала набор изображений, используемых для фона. Найти темы достаточно легко, достаточно перейти в каталог C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\THEMES. Тут находится список каталогов, каждый из которых содержит CSS файл и набор изображений. Однако, если Вы попробуете войти на один из сайтов, созданных в SharePoint 2010 и изменить тему (Site Actions->Site Settings->Site Theme), то не увидите ни одного знакомого названия в списке тем.

@1.7

@1.7 Выбор темы

Фактически, все старые темы остались в SharePoint 2010 для успешной миграции со старой версии продукта. Новые же темы находятся в папке C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL\Lists\themes. Данная папка содержит набор файлов с расширением thmx и шаблон скрытого списка Theme, который будет являться хранилищем для этих и подобных файлов. Поскольку список Theme определяется в шаблоне Global, то он будет присутствовать на любом из сайтов, так как все шаблоны используют Global в качестве фундамента. В свою очередь функциональность для пользователя была переписана таким образом, чтобы он работал со списком Theme при выборе новой темы.

Давайте разберемся, что представляет собой файл с расширением thmx. Оказывается это файл, поддерживаемый пакетом Microsoft Office, при этом его может создать любой пользователь, например, используя Microsoft Office PowerPoint, используя команду New->Themes.

@1.8

@1.8 Создание темы

Создав тему, ее можно легко модифицировать, используя вкладку Design и такие кнопки как Colors и Fonts для установки цветов и шрифтов темы. Редактируя эти параметры, Вы можете установить определенное количество именованных цветов и шрифтов, которые и будут использоваться в SharePoint 2010 для наложения на текущий CSS.

@1.9

@1.9 Модификация цветов темы

Получив желаемую тему, ее можно сохранить в виде thmx файла и загрузить в список тем Theme. В результате этого действия тема станет доступной в списке и готова к использованию.

Как разработчиков, нас интересуют несколько вопросов:

· Как это работает вместе с CSS;

· Как на темы можно влиять программно;

· Как развернуть свою тему программно.

Попробуем ответить на эти вопросы.

Если Вы откроете corev4.css файл, который можно найти в папке C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES, то сможете найти тут стили, подобные этому:

table.ms-toolbar{
height:45px;
border:none;
/* [RecolorImage(
themeColor:"Light2",includeRectangle:{x:0,y:610,width:1,height:42})] */ 
background:url("/_layouts/images/bgximg.png") repeat-x -0px -610px;
 
/* [ReplaceColor(themeColor:"Light1")] */ 
background-color:#fff;
}

Тут без труда можно заметить специальные тэги, которые указаны в виде комментариев, это ReplaceColor и ReplaceImage. Это специальные комментарии, которые понятны только SharePoint 2010 (а теперь и нам). Если в качестве комментария используется тэг ReplaceColor, то при использовании темы, цвет в CSS будет заменен на тот, который указан в тэге. Естественно тут используется одно из стандартных имен тем. Аналогично, тэг ReplaceImage способен заменить изображение на прямоугольник заданного цвета из темы. Кроме этих тэгов, существует тэг ReplaceFont, способный заменить шрифт. Таким образом, если Вы решились на разработку своих CSS файлов и хотите сохранить возможность установки тем, то подобными комментариями следует снабдить и собственный CSS.

Теперь перейдем к API. Чтобы управлять темами программно, разработчика снабдили классом ThmxTheme.

Ниже показан пример кода, который получает ссылку на текущую тему для сайта:

SPWeb web = new SPSite("http://sbaydach64/").RootWeb;
string themeurl = ThmxTheme.GetThemeUrlForWeb(web); 
ThmxTheme theme = ThmxTheme.Open(web.Site, themeurl );

Используя полученную ссылку, можно легко модифицировать тему (не сам файл, а те параметры, которые были установлены в ходе применения темы – все они хранятся в базе), используя такие свойства, как AccentColor1, AccentColor2 и т. д. Чтобы изменения вступили в силу, необходимо вызвать метод Save.

Чтобы применить новую тему к сайту, достаточно воспользоваться статическим методом SetThemeUrlForWeb:

ThmxTheme.SetThemeUrlForWeb(SPWeb web, string ThemeUrl) 
 
ThmxTheme.SetThemeUrlForWeb(SPWeb web, string ThemeUrl, bool shareGenerated)) 

Наконец, если Вы создаете собственный шаблон, который включает темы, то развернуть собственные темы в список достаточно просто. Для этого используется элемент Module, который описывает имя списка для развертывания, а также сам файл:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="ThemesElement" Url="_catalogs/theme" RootWebOnly="TRUE" Path="Themes">
    <File Type="GhostableInLibrary"  Url="CustomTheme.thmx" IgnoreIfAlreadyExists="true" />
  </Module>
</Elements>

Written by Sergiy Baydachnyy

19.04.2010 at 10:48

Опубликовано в SharePoint

Tagged with