Часть 2

Иван Хрипунов

Windows SharePoint Services предоставляет удобный и простой интерфейс, с помощью которого вы можете создавать и изменять веб-страницы. А если требуется расширить функциональность этой технологии и улучшить внешний вид веб-узла?

В первой части статьи [1] вы познакомились с базовыми элементами Windows SharePoint Services. В качестве иллюстрации возможностей технологии мы создали веб-узел телефонного справочника, содержащий сведения о сотрудниках компании, а также их фотографии. Все изменения на веб-узле проводились с помощью обозревателя Internet Explorer. Эта функциональность WSS позволяет решать большинство задач по предоставлению информации.

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

Microsoft Office FrontPage 2003

С момента выхода первой версии программы, которая была нацелена на использование в качестве наглядного (WYSIWYG, What You See Is What You Get) редактора HTML, во FrontPage 2003 многое изменилось. Помимо того, что стало удобнее редактировать HTML, XML, CSS и проч., теперь можно полноценно работать со службами SharePoint. А следующая версия, которая выйдет в начале 2007 года, будет именоваться Microsoft SharePoint Designer 2007. Это говорит о том, что программа ориентирована исключительно на работу с технологиями SharePoint.

В настоящий момент для пользователей и администраторов веб-узлов, использующих платформу WSS, во FrontPage доступны такие возможности:

n  Дизайн. Если вы не знакомы с языком разметки HTML или не хотите работать с кодом, вы можете изменять веб-страницы в режиме конструктора (WYSIWYG). Добавляйте слои, динамические эффекты и панели навигации – это улучшит внешней вид веб-узлов WSS.

n  Кодирование. Изменяйте веб-страницы в режиме кодирования с помощью профессионального редактора HTML, XML и CSS. Доступны функции автозавершения и проверки правильности кода, шаблоны поведения (Behaviors) и работа с элементами управления ASP.NET.

n  Расширение функциональности. Вы можете работать с информацией из различных источников, создавая веб-узлы, управляемые данными. Создавайте и изменяйте цветовые схемы с помощью встроенного редактора. Анализируйте статистику использования веб-узла WSS в различных разрезах при помощи представления «Отчеты».

 

C помощью FrontPage вы можете выполнять задачи по обслуживанию и управлению веб-узлами:

n  Создавать веб-узлы, списки, библиотеки документов, страницы веб-частей, используя мастера и шаблоны.

n  Изменять основные параметры веб-узлов, списков, библиотек документов. В том числе добавлять и редактировать столбцы в списках и библиотеках. Появляется возможность изменить URL веб-узла, используя окно свойств.

n  Изменять служебные файлы списков и библиотек документов, которые позволяют добавлять, редактировать и просмотривать элементы.

n  Создавать и восстанавливать резервные копии веб-узлов.

Каталог источников данных

При работе с веб-узлами, основанными на технологии SharePoint, FrontPage позволяет получать данные из разнообразных источников:

n  Списков и библиотек документов данного узла.

n  Баз данных, совместимых с OLEDB, например, Microsoft SQL Server.

n  Веб-сервисов.

n  XML-файлов.

Все используемые источники информации текущего веб-узла хранятся в так называемом каталоге данных. Физически этот каталог представлен в иерархии узла папкой, обычно _fpdatasources, где хранятся файлы в формате XML с описаниями подключений. Эта папка создается при первом обращении к каталогу источников данных во FrontPage. Вы можете добавлять каталоги других узлов и таким образом отображать данные списков, библиотек документов и т. д., расположенных за пределами текущего узла.

Основа для получения информации из перечисленных источников – механизм передачи данных (data retrieval service), одно из нововведений в WSS. Этот механизм позволяет обмениваться информацией между поставщиком и получателем данных по протоколу SOAP (Simple Object Access Protocol), используя XML, и является, по-сути, веб-сервисом.

Вывод информации из каталога

Чтобы отображать данные из каталога на веб-страницах, в составе WSS поставляется веб-часть «Представление данных» (DataView web part). Она выступает как клиент сервиса передачи данных, форматируя их с помощью XSLT (eXtensible Stylesheet Language for Transformations, расширяемый язык стилей для преобразований). Таблицы XSLT используются для описания преобразований структуры документов, посредством простых наборов правил.

FronPage – одна из первых программ, предоставляющих возможность наглядного редактирования XSLT. Это означает, что вы можете редактировать стили XSLT, не обладая глубокими знаниями о них. С другой стороны, если вы не новичок в работе с XSLT, вы можете использовать редактор кода FrontPage для самостоятельного создания необходимых преобразований.

Веб-часть «Представление данных» поддерживает все свойства, присущие этому элементу WSS, – изменение параметров, персонализация, соединения с другими веб-частями. Для добавления на веб-страницы данная веб-часть доступна только из FrontPage. Изменять ее настройки вы можете с помощью браузера или FrontPage.

Стандартные веб-части списков и библиотек документов вы можете трансформировать в «Представление данных» во FrontPage с помощью команды «Преобразовать в XSLT-представление данных». При этом сохраняется идентичный исходной веб-части внешний вид и функциональность, а также вам доступны средства, применимые к веб-части «Представление данных».

Используем FrontPage

Давайте на практике рассмотрим работу с веб-узлами во FrontPage. Вернемся к нашему телефонному справочнику, расположенному по адресу http://server01/phones/. На первой странице веб-узла, default.aspx, расположены две связанные между собой веб-части – одна отображает контактную информацию сотрудников компании, другая – их фотографии. Данные о сотрудниках и их фотографии хранятся в списке и библиотеке рисунков соответственно.

Откроем наш веб-узел во FrontPage: для этого запустите программу и выберите пункт «Открыть узел» в меню «Файл». Справа на панели представлены все каталоги открытого узла. Обратите внимание, что библиотеки файлов (в нашем случае – фотографий сотрудников) и списки (они находятся в директории Lists) отображаются в виде папок. Внутри каждого списка или библиотеки файлов (в папке «Forms») находятся вспомогательные файлы создания, редактирования и просмотра элемента, а также файлы веб-страниц представлений. Кроме того, в структуре узла присутствуют следующие служебные папки:

n  _catalogs. Это скрытая системная папка. Отображается, если разрешен показ скрытых файлов и папок. Эта опция устанавливается в окне параметров узла. Содержит каталог шаблонов списков, узлов и веб-частей.

n  _fpdatasources. Папка каталога источников данных. Создается при первом обращении к каталогу во FrontPage.

n  _private. Это специальный скрытый каталог FrontPage, не видимый в обозревателе. Его можно использовать, например, для хранения информации, собранной с помощью форм.

n  Images. Пустая папка для изображений, которые могут быть использованы при дизайне веб-страницы.

Также в структуре отображаются все файлы веб-страниц.

При изменении файлов вы можете выбирать представление, которое больше вам подходит. Это может быть представление «Конструктор», позволяющее редактировать страницу в визуальном редакторе, или представление «Код», для работы непосредственно над кодом веб-страницы. Одним из удобных является представление «С разделением», которое комбинирует вышеуказанные представления так, что вам доступны и изменение кода, и  визуальный редактор. При этом обе части окна синхронизируются, то есть если вы добавили в таблицу код для создания нового столбца, это изменение будет отражено в визуальной части. А если вы выделите в визуальной части любой элемент, он будет подсвечен в области кода.

Найдите файл default.aspx и откройте его.

Для позиционирования элементов на странице используется сложная структура вложенных таблиц. Нас интересуют только две области, веб-зоны. Они расположены в центральной части страницы, называются «Left» и «Right». Используя FrontPage, вы можете добавлять новые веб-зоны или изменять свойства существующих. В представленных веб-зонах находятся веб-части списка сотрудников и веб-часть изображения.

Для нашего примера они нам не понадобятся, удалите их со страницы, освободив место для добавления новых элементов. В визуальной части окна достаточно выделить веб-часть и нажать на клавиатуре кнопку «Delete».

Рисунок 1. Схема работы механизма передачи данных WSS

Добавляем представление данных

Перед вставкой веб-части выделите веб-зону, в которую она добавляется. Если добавить веб-часть на веб-страницу за пределы веб-зоны, она не будет доступна для изменения в обозревателе. Выделите левую веб-зону, кликнув на ее названии, и в меню «Данные» выберите пункт «Вставить представление данных». В правой части окна, на панели области задач открывается каталог источников данных, где перечислены все имеющиеся поставщики, сгруппированные по типам и месту расположения. Изначально в качестве места расположения указан текущий веб-узел, но вы можете добавлять сюда каталоги источников данных других узлов с помощью команды «Управление каталогом», которая находится в нижней части панели задач.

Подключения данных для списков и библиотек SharePoint формируются автоматически при создании этих элементов на веб-узле. Для всех остальных типов источников данных вы должны добавлять подключения вручную, с помощью команды «Добавить в каталог», которая расположена в каждой группе источников данных.

Раскройте группу «Списки Share Point». Здесь представлен единственный созданный нами список – «Сотрудники». Его можно «перетащить» в нужную веб-зону по аналогии с веб-частями или, нажав правую кнопку мыши, выбрать из меню пункт «Добавить представление данных». После этого будет добавлена веб-часть с данными из списка сотрудников. По умолчанию она содержит несколько основных полей расположенных в таблице. Так как в нашем списке было всего три записи, таблица содержит заголовок и три строки с данными. Стиль представления элементов вы можете выбирать из десятка стандартных шаблонов – на основе таблиц, списков и других элементов HTML. Если вы знакомы с XSLT, то легко можете создать свой шаблон вывода данных, написав необходимый код.

Заметьте, после добавления веб-части на страницу, на панели задач открылось окно «Сведения о представлении данных». Здесь представлены команды для настройки веб-части, а также отображены данные списка в виде древовидной структуры.

Рисунок 2. Открытый веб-узел во FrontPage 2003

Настраиваем внешний вид

Давайте для начала добавим необходимые для списка контактов поля – те что в данный момент отображаются, не несут в себе достаточной информации. Удалите названия полей из заголовка таблицы. Каждый столбец списка отображается в данной веб-части полем. Эти поля необходимо выделить и удалить. Вы можете работать с любой строкой – при удалении поля из одной строки, удаляются все поля в столбце. Это происходит из-за того, что вы работаете непосредственно с шаблоном XSLT. Мы продолжим работать с табличным стилем, и нам потребуется добавить столбцы в таблицу по количеству полей, которые будут отображаться. В режиме конструктора это не сложнее, чем такая же операция в Microsoft Word.

Добавить поля в таблицу вы можете, просто «перетащив» их в нужные колонки с панели «Сведения о представлении данных». Давайте добавим следующие столбцы: «Фамилия», «Имя», «Отдел», «Рабочий телефон», «Сотовый телефон», «Адрес электронной почты». Не забудьте, что самая первая строка таблицы – это заголовок, поэтому внесите сюда названия полей.

После того как необходимые поля добавлены, можно приступить к их форматированию. Все поля у нас имеют текстовый формат и отображаются верно, кроме поля с адресом электронной почты. Это поле неплохо было бы отображать в виде гиперссылки. Выделите это поле в конструкторе и, используя меню «Данные», выберите пункт «Форматировать элемент как…». Из открывшегося меню нас интересует пункт «Гиперссылка». Если вы применяете такое форматирование к элементу «Адрес электронной почты», он отображается на веб-странице в виде гиперссылки. Но, к сожалению, текущая версия FrontPage не позволяет выбрать тип ссылки (обычная, сообщение электронной почты, ссылка в документе). В код автоматически вставляется ссылка на страницу. Такая ссылка не будет работать для отправки сообщений электронной почты, и это придется исправить в коде вручную.

Если вы уже работали с языком разметки, то знаете, что для ссылок на адреса электронной почты параметр href тега <A> должен содержать строку «mailto:[e-mail]». Выделите в визуальной части окна элемент с адресом и найдите в выделенном фрагменте вот такой код:

<td class="ms-vb">

    <a>

           <xsl:attribute name="href">            

                 <xsl:value-of select="@Email"/>

           </xsl:attribute>

           <xsl:value-of select="@Email"/>

    </a>

</td>

В описании XSL-атрибута href для тега <A> (строка 4) измените значение на «mailto:<xsl:value-of select=”@Email”/>». Теперь гиперссылка будет работать правильно – при выборе ее будет создаваться сообщение электронной почты. Вы не забываете сохранять изменения?

Данная ситуация исправлена в новой версии FrontPage – SharePoint Designer 2007. Во второй бета-версии, доступной для публичного тестирования, при форматировании элемента как гиперссылки открывается стандартное окно «Выбор гиперссылки». Все остальные поля пока оставим без изменений форматирования.

Используем условное форматирование

Можно немного оживить наш список – добавить условное форматирование. С помощью этой опции FrontPage вы можете, например, изменять форматирование (цвета, шрифт, отображение) в зависимости от выполнения какого-либо условия. С веб-частью списка сделать это нельзя, а вот для «Представления данных» это не сложно.

Давайте для примера будем изменять цвет фона каждой нечетной строки на серый. Для создания правила условного форматирования выделите строку таблицы и на панели «Сведения о представлении данных» выберите команду «Условное форматирование». Создайте правило применения форматирования, в качестве поля укажите [номер строки] – нечетный. В окне изменения стилей («Формат» -> «Граница» -> «Заливка» ) укажите цвет заливки – светло-серый. Если этот цвет из стандартного набора кажется темным, то, нажав «Другие цвета» в списке цветов, введите, например, значение «Hex={DF,DF,DF}».

Сортируем и группируем список

Используя веб-части списков вы можете сортировать, группировать и фильтровать данные – эти команды расположены на панели инструментов. К тому же, нажав на заголовок столбца, вы можете отсортировать строки. А что же «Представление данных»? Вся эта функциональность присутствует и в этой веб-части. Откройте окно «Типы представлений» с помощью команды «Стиль» на панели «Сведения о представлении данных». На закладке «параметры» вы можете изменить следующие настройки веб-части – показывать или нет панель инструментов, с помощью которой можно сортировать, фильтровать и группировать информацию; создать ссылки в заголовках столбцов для сортировки; выбрать отображение набора элементов и так далее.

Для нашего примера можно включить параметр для сортировки данных по заголовкам столбцов.

Фотографии сотрудников

Получившийся список контактов неплохо выглядит, но, в отличие от первой версии, на странице не отображается фотография.

Вы можете поступить уже известным вам способом [1] – соединить веб-часть представления данных с веб-частью изображения, используя в качестве адреса фотографии поле «Фото». Отличительная особенность «Представления данных» от веб-части списка в том, что создавать соединения можно по любым полям, вне зависимости, показаны они на странице или нет. Единственное условие – поле списка должно быть указано в запросе данных. Еще одна замечательная возможность «Представления данных» – настройка отправки первой строки всем присоединенным веб-частям. На практике это означает, что при начальном отображении страницы во всех связанных веб-частях будет отображаться информация. Изменить эту настройку вы можете в окне изменения параметров веб-части, в разделе «Разное».

Но раз уж мы ведем речь о «Представлении данных», сделаем вывод фотографий с помощью именно этой веб-части.

Повторите описанные выше шаги по добавлению представления данных списка «Сотрудники» на страницу, но в веб-зону «Right», расположенную в правой части страницы. Удалите всю информацию, оставив пустую таблицу, состоящую из одного столбца. Оставьте в таблице строку заголовка, а одну из строк, содержащих данные, разбейте на 7 строк. Последние пять строк разделите на две колонки. Теперь «перетащите» поля списка в полученный макет, введите названия и отформатируйте текст. Первые две строки – это поля «Фото» и «Полное имя».

Элемент, содержащий путь к фотографии сотрудника, отформатируйте как рисунок. Нажмите правую кнопку мыши и из меню «Отформатировать элемент как» выберите «Рисунок». На рис. 3 показано, что у вас должно получиться. Не забывайте сохранять страницу.

Рисунок 3. Результат изменений телефонного справочника

Соединение веб-частей

Мы сделали вывод дополнительной информации о сотруднике на одной странице – вместе с фотографией теперь доступны все необходимые поля. Осталось лишь связать список сотрудников с созданным информационным блоком, назовем его «Сотрудник – подробно».

Создание соединений между веб-частями такого типа доступно только во FrontPage. Выберите одно из представлений данных, нажмите правую кнопку и выберите «Соединения веб-частей» из меню. Если данный элемент уже имеет настроенные соединения, то вы увидите окно соединений. Здесь перечислены все соединения, любое из них вы можете отредактировать или удалить. Мы создаем первое соединение для веб-части, поэтому сразу открывается окно «Мастер соединения веб-частей». Не буду описывать подробно все шаги мастера, в процессе его работы даются достаточно подробные объяснения. Замечу лишь, что так как мы связываем две веб-части, основанные на одном списке, то в качестве связующего стоит использовать поле «Идентификатор». Хотелось обратить ваше внимание на предпоследний шаг мастера. На этом этапе вам предлагается выбрать поле веб-части источника, на котором будет создана ссылка для связи, и указать, какие поля будут участвовать в обозначении выделенного элемента. Выделенный элемент выделяется полужирным написанием. Выберите в качестве поля со ссылкой и поля обозначения столбец «Фамилия» нашего списка. Теперь сохраните страницу и откройте веб-узел в обозревателе.

Полезные мелочи

Посмотрите на получившуюся страницу – фактически она ничем не отличается от первой версии, созданной с использованием стандартных веб-частей списков и изображений. Но получившийся справочник содержит на одной веб-странице всю информацию о сотруднике, позволяет более гибко настраивать внешний вид. Несмотря на то что на разработку такой страницы уходит больше времени, результат того стоит.

Что можно еще улучшить? Например, добавить в XSLT-шаблон динамические эффекты с помощью тегов <xsl:attribute>. Таким образом вы можете описать DHTML-события OnClick, OnMouseOver и прочие. Например, используя событие OnClick, вы сможете выводить информацию о сотруднике по щелчку в любом месте строки.

Если список сотрудников достаточно большой, создайте еще один список, содержащий буквы алфавита. Добавьте в список сотрудников вычисляемое поле, в котором будет содержаться первая буква фамилии сотрудника. Сделать это можно, записав в поле формулу «=ЛЕВСИМВ([Фамилия];1)». Добавьте на страницу еще одну веб-часть «Представление данных» с буквами алфавита и соедините ее с веб-частью списка сотрудников. Вы получите удобную разбивку списка по алфавиту, и ориентироваться в таком справочнике будет удобнее.

Вам необходимо добавить ссылку на экспорт контактов в Outlook на страницу? Воспользуйтесь возможностями протокола stssync, реализованного в WSS. Подробнее об этом вы можете прочитать на страницах библиотеки MSDN (http://msdn.microsoft.com/library/en-us/spptsdk/html/tsstsync_SV01036546.asp)

Если вам потребуется выгрузка данных в Excel, создайте на странице ссылку на файл запроса данных. Получить такой файл вы можете на страницах представлений списка. Достаточно найти ссылку «Экспорт в электронную таблицу». При запросе необходимо сохранить файл *.iqy на ваш веб-узел.

И помните о том, что если при работе с «Представлением данных» вам не хватает функциональности, которая присутствует в стандартной веб-части списка или библиотеки, вы в любой момент можете преобразовать эту веб-часть в полностью настраиваемое XSLT-представление.

А как же остальные источники данных?

Все действия, описанные в статье, вы можете применять для данных, полученных из других поддерживаемых источников. Отличаться будет только запрос данных.

Используйте веб-сервисы, которые устанавливаются вместе с WSS, и те, что доступны на внешних узлах в Интернете. Подробное описание веб-сервисов для технологий SharePoint вы можете найти на сайте MSDN – http://msdn.microsoft.com/library/en-us/spptsdk/html/soapnsMicrosoftShare PointSoapServer2_SV01043862.asp.

Выгружайте на веб-узлы файлы в формате xml и выводите информацию из них на страницах веб-сайтов. Таким образом вы можете публиковать, например, курсы валют в удобном для вас формате. То же самое вы можете сделать и с потоками в формате RSS.

1. Хрипунов И., Черневский А. Возможности технологии MS Windows SharePoint Services. //Системный администратор, №5, 2006 г. – C. 20-27.

2. http://www.sharepointcustomization.com – сайт, посвященный совместному использованию FrontPage и технологий SharePoint.

3. http://www.microsoft.com/technet/prodtechnol/office/office2003/maintain/fp03wss.mspx – использование FrontPage для редактирования веб-узлов SharePoint.

4. http://msdn.microsoft.com/library/default.asp?url=/library/en-us/odc_fp2003_ta/html/odc_fpbldgxmlwebs.asp – построение узлов, управляемых данными.

5. http://www.sharepointcustomization.com/resources/whitepapers.htm – сборник документации.

6. http://www.sharepointcustomization.com/resources/sdks.htm – Software Development Kits для FrontPage и WSS.

Все перечисленные интернет-ресурсы представлены на английском языке. Из русскоязычных ресурсов в ближыйшее время начнет функционировать блог, посвященный технологиям SharePoint. Найти его вы сможете по адресу http://blogs.technet.com/ruswss.