(или другого тега), который, собственно, и определяет, каким стилем размечен фрагмент веб-страницы (рис. 6.6). На рис.6.7 приведена сводка элементов интерфейсаSharePointDesigner, на которых отображаются название и свойства стиля, назначенного выделению. Таким образом, пользователь имеет определенную свободу в выборе панелей, которые он будет применять для настройки стилейCSS.

Рис. 6.7. Сводка мест отображения назначенного стиля

Помимо панели Применение стиля , для назначения и редактирования стилей может применяться и панельУправление стилями (рис. 6.8).

Примечание: Вопросам применения стилей вSharePointDesignerпосвящена лабораторная работа 6.1.

Рис. 6.8. Использование панели Управление стилями

В частности, вызывая из области названия некоторого стиля контекстное меню и выбирая в нем пункт Изменить стиль , Вы получаете доступ к редактированию параметров данного стиля в диалоговом окне (рис. 6.9). Выбор командыПерейти к коду открывает фрагмент кода выбранного стиля в отдельной вкладке (см. рис. 6.4).

Рис. 6.9. Настройка стиля

На этот раз, мне потребовалось внести изменения на формы стандартного SharePoint"овского списка. Таких форм существует три вида, и вы все их прекрасно знаете:

1. DisplayForm - форма отображения элемента списка
2. EditForm - форма изменения элемента списка
3. NewForm - форма создания нового элемента списка

Из-за большого количества полей в одном из наших списков, мне захотелось разнести эти поля по вкладкам. Причем, захотелось также следующее:

1. Чтобы сохранилась возможность добавлять новые поля в список
2. Чтобы можно было перемещать поля из одной вкладки в другую, и менять порядок их следования
3. Чтобы поля рендерились стандартными средствами

Для того, чтобы определить принадлежность полей к вкладкам, я раскопал способ добавления пользовательских данных в SPField, и создал симпатичный jquery-интерфейс для того, чтобы этим мог заниматься пользователь. Но дальше дело, неожиданно, застопорилось: оказалось, что народ повсеместно пользуется для подобных целей грязными js-хаками, а такой способ мне категорически не подошел!

И вот, после долгих исследований и поиска в интернетах, мне-таки удалось понять, как же это делается правильно, и воплотить в жизнь вот такую вот красивую форму:

Как видите, часть полей (ФИО и фотография) здесь рендерятся по-особому. Остальные поля рендерятся обычным образом, но разбиваются на вкладки (пользователь может менять порядок полей и принадлежность полей разным вкладкам).

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

Как делают все

Оказалось, что когда дело доходит до форм списков, большинство SharePoint-разработчиков использует крайне сомнительные подходы:

1. Создание новой формы в виде aspx-страницы, которая кладется в _layouts. Форма полностью "кастомная", и если в список добавить поле, это поле придется руками добавлять и на форму...
2. Javascript и jquery-хаки. К примеру, такие известные проекты, как Virto Ajax List Form Extender и SPServices - на самом деле парзят содержимое страницы с формой уже после её загрузки, и затем вносят свои изменения.

Ни один из этих подходов мне не понравился.

Создание целиком новой формы вообще пошло из SharePoint Designer, то есть это кустарное решение, решение для сисадминов.

Что же касается jquery, то это типичный клиентский подход, изобилующий собственными минусами:

• В таких решениях, чаще всего даже невооруженным взглядом видно, что сначала форма загружается в обычном виде, а через мгновение - меняется (например, добавляются вкладки, и т.д.). Чем больше полей, тем лучше это видно.
• jQuery использует механизм, который в профессиональной среде называется скринскрэпингом (screen scraping, data scraping), а даже само слово это - дурно пахнет! По сути, скрипт парзит HTML-код или же ищет элементы DOM-модели по некоторым признакам - в любом случае, признаки эти официально нигде не заявлены, и никто не гарантирует, что после очередного обновления SharePoint, ваш код останется работоспособным.

RenderingTemplate

Через некоторое время поисков, я понял, что если мне что-то и поможет, то только механизм RenderingTemplate . Этот механизм позволяет задавать т.н. шаблоны отображения форм списков для типов содержимого (класс SPContentType , свойства EditFormTemplateName , NewFormTemplateName и DisplayFormTemplateName ).

RenderingTemplate представляет собой обычный ASP.Net контрол, реализующий интерфейс ITemplate , и позволяющий задать шаблон для отображения формы списка. Куча RenderingTemplate"ов лежит в файлике 14\TEMPLATE\CONTROLTEMPLATES\DefaultTemplates.ascx . Среди них, присутствует и шаблон под именем ListForm , который представляет собой стандартный шаблон для отображения всех форм списка.

Центральным элементом шаблона ListForm является контрол ListFieldIterator . Собственно, он и отображает все поля. И что интересно, от него можно отнаследоваться, а затем переопределить метод Render , чтобы изменить отображение так, как нам вздумается.

FormContext

Когда мы переопределяем метод Render в новосозданном потомке ListFieldIterator , сразу же возникает вопрос: а как рендерить поля? Откуда взять сведения о том, какие у нас есть поля, каковы их значения, и т.д. Оказалось, всё очень просто, и решается с помощью коллекции SPContext.Current.FormContext. FieldControlCollection . Эта коллекция хранит объекты типа BaseFieldControl , каждый из которых содержит, среди прочего, свойства Field и ItemFieldValue , которые позволяют получить любые сведения о поле, и значении этого поля.

Также, каждый из этих контролов имеет метод RenderControl , благодаря чему их можно спокойно отображать штатными средствами, ровно также, как это сделал бы SharePoint.

Ниже представлен шаблонный пример класса-потомка ListFieldIterator :

public class CustomFieldIterator : ListFieldIterator { protected override void Render(HtmlTextWriter output) { foreach (BaseFieldControl fieldControl in SPContext .Current.FormContext.FieldControlCollection) { if (fieldControl.Field == null ) continue ; // небольшой хак, если его не использовать, // IsFieldExcluded будет всегда возвращать true, // т.к. считает, что контрол уже есть, и еще раз // добавлять его не требуется. fieldControl.Visible = false ; if (!this .IsFieldExcluded(fieldControl.Field)) { output.AddAttribute("class" , "my-field" ); output.AddAttribute("id" , "field" + fieldControl.FieldName); output.RenderBeginTag(HtmlTextWriterTag .Div); output.Indent++; // Восстанавливаем видимость и рендерим контрол fieldControl.Visible = true ; fieldControl.RenderControl(output); output.Indent--; output.RenderEndTag(); } } } }

В этом фрагменте, правда, отсутствует прорисовка заголовков и описаний полей, но пусть это будет домашним заданием:)

Кстати, возможностей данный подход открывает великое множество, если подумать...

Проект-пример

Проект, демонстрирующий описанный выше способ, доступен для скачивания .

P.S. Мои исследования во многом основывались на статье Виталия Баума Расширяем возможности ListFieldIterator , спасибо ему большое за эту статью!

Собственно, там описан практически такой же результат, который получил и я, только Виталий объединял поля не во вкладки, а в секции:

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

Но вообще, статья обрывочная, вот честно. Фрагменты кода в надерганы очень куцо, мне по ним было крайне сложно сориентироваться, почти до всего пришлось доходить самому.

В целом, надеюсь, мой пост прольет еще больше света на это очень правильное направление.

И уже почти создали одностраничный сайт . Теперь продолжаем его оформление. Открываете программу SharePoint Designer , а в ней файл index.html , который уже делали раньше, в папке Вашего одностраничного сайта.

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

Если Вы в программе SharePoint Designer поставите курсор внутри таблицы, и зайдете в пункт меню Таблица — Свойства таблицы — Таблица , то увидите, почему это так: ширина таблицы задана в процентах от ширины экрана, причем стоит 100% , то есть действительно на весь экран. Ставите ширину в точках, и задаете ее, например, равной 950 точек , точнее, пикселей. Таблица получит постоянную ширину, и сместится влево. Чтобы поставить ее по центру, опять заходите в свойства таблицы, и делаете выравнивание по центру.

Давайте теперь сделаем границы для этой таблицы. Заходите в свойства, делаете размер границы 10 , а цвет границы светло-серый, чтобы она не сильно бросалась в глаза.

Теперь посмотрите свой одностраничный сайт в браузере: откройте в нем свой файл index.html . В браузере будет лучше все видно. В частности, Вы увидите, что текст и картинки располагаются слишком близко к границам таблицы. Чтобы эти элементы от границ отодвинуть, в программе SharePoint Designer заходите опять в свойства таблицы, и изменяете либо Поля ячеек (расстояние между границами ячеек и их содержимым), либо Интервал ячеек (расстояние между ячейками). Можете поэкспериментировать, изменяя величины этих полей, и наблюдая результат.

Осталось вставить в пустую правую ячейку Вашей подписной страницы форму подписки на рассылку. Естественно, у Вас уже . Если Ваша рассылка сделана на , то заходите на этот сервис, затем выбираете там пункт меню Формы , выбираете дизайн формы, берете ее код и ставите в программе SharePoint Designer в ячейку. Чтобы поставить код, ставите сначала в нужное место курсор, затем выбираете пункт меню Вставка — Веб-компонент — Дополнительные элементы управления — HTML , и нажимаете кнопку Готово . Затем вставляете код в то окошко, которое появится. Форма подписки в программе SharePoint Designer видна не будет, но если Вы посмотрите свою подписную страницу в браузере, то форму подписки увидите.

Похожим образом ставите на своей подписной странице код видео, если нужно. Сначала Вам нужно разместить видео на одном из сервисов. Рекомендую для этого использовать сервис YouTube . Если Вы в нем не зарегистрированы — регистрируетесь. Затем заходите в свой аккаунт, нажимаете Добавить видео , выбираете файл видео у себя на компьютере, пишете название, описание и ключевые слова.

Видео о том, как на одностраничном сайте в программе SharePoint Designer размещать форму подписки и видео

Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.

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

Мы рассмотрели процесс создания сайта и списка в браузере. Рассмотрим сейчас другие варианты создания списка.

Создание списка в InfoPath Designer

Как уже упоминалось ранее, одно из ключевых преимуществ SharePoint – интеграция с продуктами Microsoft. Продемонстрируем это на конкретном примере.

Для создания списков воспользуемся Microsoft InfoPath Designer 2010, в стандартных шаблонах которого есть Список SharePoint (рис. 3.12.). По нажатию на Конструктор форм предлагается ввести адрес веб-сайта, на котором будет публиковаться форма.

Рис. 3.12. Начальная страница Microsoft InfoPath Designer 2010

После чего нужно ввести название нового списка, мы вводим Книги (рис. 3.13.), нажимаем на Далее , и затем Готово (в это время происходит публикация списка на портал).

Рис. 3.13. Окно создания нового списка в Microsoft InfoPath Designer 2010

После создания списка открывается Конструктор форм (рис. 3.14.). Справа расположена панель Поля , из которых может состоять форма.

Рис. 3.14. Конструктор форм

У книги должны быть следующие атрибуты – название, автор, издательство, год, страницы, ISBN, тираж и жанр.

Для создания нового поля нужно кликнуть на Добавить поле в группе Действия на панели Поля , в результате чего появится соответствующее окно (рис. 3.15.). Достаточно указать отображаемое имя, выбрать тип данных из выпадающего списка, при необходимости указать заполнить по умолчанию и указать, является ли поле обязательным. После чего кликнуть на ОК .

Рис. 3.15. Окно добавления поля или группы (на примере авторов)

Аналогичным образом создаются остальные поля. Готовые поля добавляются на форму простым перетаскиванием, причем их можно расположить в любом порядке. В результате получилась следующая форма (рис. 3.16). Можно сделать внешний вид более привлекательным, если поработать с командами, вынесенными на ленту.

Остается опубликовать форму, для чего можно использовать комбинацию клавиш Ctrl + Shift + Q , или кликнуть на пункт меню Файл , далее Сведения и Быстрая публикация .

Рис. 3.16. Форма, готовая для публикации

Для добавления нового элемента в список нужно кликнуть на Добавить элемент и появится диалоговое окно (рис. 3.17.). Такое же окно появляется при редактировании записи.

Рис. 3.17. Окно создания нового элемента в списке Книги

Создание списка в SharePoint Designer

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

Для начала нужно открыть существующий сайт, воспользовавшись пунктом Открыть сайт в группе Открытие сайта SharePoint (рис. 3.18), где нужно ввести имя сайта и затем авторизоваться в качестве администратора семейства веб-сайтов.

Рис. 3.18. Стартовая страница SharePoint Designer 2010

Для того чтобы создать новый сайт, в группе Шаблоны сайтов выберем Пустой сайт (рис. 3.19.) Название нового сайта нужно указать в виде http ://<Веб приложение>/[<Путь>]/<Название сайта> , где в качестве пути могут указываться сайты, которые будут родительскими для нового сайта. Кликнув на ОК , создается новый сайт.

Рис. 3.19. Создание сайта в SharePoint Designer 2010

После создания сайта мы видим следующее (рис. 3.20). Первым дело можно изменить название сайта. На эту же страницу для удобства вынесены настройки разрешений. Также с разрешениями можно поработать, кликнув на соответствующее название в левой панели.

Рис. 3.20. Главная страница настроек сайта в SharePoint Designer 2010

Создать список можно аналогичным способом, описанным ранее в пункте Создание списка в InfoPath Designer либо воспользоваться механизмом для работы со списками, заложенным в SharePoint Designer. Таким образом, сайт можно считать готовым.

Преимущество SharePoint Designer заключается в том, что он предоставляет больше возможностей для разработчика (чем браузер), в чем мы убедимся в следующих главах данного руководства.

Создание списка в Visual Studio 2010

Создание веб-приложения и семейства веб-сайтов было подробно описано в начале настоящей главы.

Создадим список, для этого нужен новый проект List Definition в группе шаблонов проектов для SharePoint 2010 (рис. 3.21.)

Рис. 3.21. Окно создания нового проекта в Visual Studio 2010

После нажатия на кнопку ОК появляется окно для развертывания решения, где предлагается два способа:

1. Развертывание в песочнице – осуществляется владельцем семейства сайтов, обеспечивается безопасность и ограниченный доступ к ресурсам.

2. Развертывание в качестве решения фермы – осуществляется администраторами, имеет силу во всей ферме.

Выберем второй способ, после чего кликнем на Далее , где будет предложено ввести отображаемое название списка (Книги) и выбрать его тип (в нашем случае Custom List), после чего нажать на Finish .

Далее переименуем названия списка в обозревателе решений (рис. 3.22.) на Список книг и Книги соответственно. Также можно подправить параметры в файле Elements . xml (на уровень ниже Книг ), такие как Title (название), Url (ссылка списка) и Description (описание). Также можно внести изменения во второй файл Elements.xml .

Рис. 3.22. Обозреватель решений

Для создания полей в файле Schema . xml между тегами < Fields > нужно добавить код (рис. 3.23.) Идентификаторы получены с помощью программы guidgen, входящей в поставку Visual Studio.

Рис. 3.23. Код для добавления столбцов к списку.

Столбцы созданы, но еще их нужно добавить в представление по умолчанию, которое можно найти в этом же файле внутри тега View , где атрибут BaseViewID =”1” . Внутри есть теги ViewFields , которые нам и нужны. В результате добавления столбцов в представление списка по умолчанию можно увидеть следующий код (рис. 3.24.)

Рис. 3.24. Код для добавления столбцов в представление по умолчанию

После чего список можно считать готовым, и его можно развернуть, воспользовавшись главным меню (Build => Deploy ) или кликнув правой кнопкой по решению выбрать из контекстного меню Deploy .

В целом все выглядит неплохо, но при попытке добавить новый элемент появляется странное окно (рис. 3.25.), в котором явно чего-то не хватает.

Рис. 3.25. Окно для создания нового элемента списка Книги

Причина этого очень проста – мы не создали типы контента, которые определяются в файле Schema . xml (рис. 3.26) Мы не будем этим заниматься, вместо этого удалим полностью этот блок.

Рис. 3.26. Определения типов контента

В процессе развертывания списка появится следующее окно (рис. 3.27), которое говорит нам о конфликтах развертывания. Кликнем на кнопку Resolve Automatically (Разрешить автоматически) .

Рис. 3.27 Конфликты развертывания

После чего можно обновить страницу и еще раз попытаться добавить новый элемент. Больше такой проблемы нет!

Итак, в этой главе мы рассмотрели создание сайта школьной библиотеки с помощью браузера, SharePoint Designer 2010 и Visual Studio 2010. Даже на таком простом примере видны плюсы и минусы разных подходов.

В рассматривается настройка внешнего вида сайтов SharePoint 2010.

очередь , предназначена для разработки веб-узлов, построенных на технологии SharePoint. В отличие от небогатого набора методов редактирования узлов SharePoint в браузере, SharePoint Designer дает возможность гибкого и удобного управления практически всем спектром свойств веб-страниц. Существенно, что в подавляющем большинстве случаев (по крайней мере, в рамках нашего курса) пользователю не придется обращаться к HTML-коду, ограничиваясь для разработки веб-страниц режимом Конструктор .

Учитывая, что приемы работы с веб-узлами и проектирования HTML- и ASP -страниц были представлены в предыдущих лекциях и полностью применимы и для SharePoint-узлов, мы сосредоточимся в этой и двух следующих лекциях на специфических методах управления узла SharePoint.

Будем изучать вопросы редактирования веб-страниц SharePoint на примере того же самого веб-узла "Рога и Копыта", который был нами создан ранее средствами браузера. После его открытия в SharePoint Designer (в ходе которого необходимо будет пройти процедуру авторизации, подписавшись учетной записью Бендер, т.е. владельца узла), в пределах основной панели мы будем наблюдать файловую структуру веб-сайта, идентичную содержимому панели Список папок (рис. 7.1) .

Перейдем к правке домашней страницы узла.

1. Щелкните дважды по имени домашней страницы default.aspx в списке папок (рис. 7.1) .
2. После открытия домашней страницы в отдельной вкладке (рис. 7.2) поэкспериментируйте с ее содержимым, наводя указатель на различные ее элементы и щелчком выделяя их.

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

1. мастер-страницы (или, по-другому, главной страницы узла) – страницы-шаблона, включающей общие элементы для всех страниц узла SharePoint
2. страницы содержимого (контента) – собственно говоря, содержащей уникальное наполнение страницы, отличающее ее от других страниц узла.

Большинство элементов, которые сопровождаются полупрозрачными метками, как раз и приходят не со страницы содержимого (в данном случае, домашней страницы веб-узла default .aspx), а приходят с шаблонной мастер-страницы . Для того, чтобы отключить отображение этих меток, выберите в верхнем меню Вид пункт Визуальные подсказки и отключите в нем опцию Показать (рис. 7.3) . После этого ориентироваться в содержимом страницы станет проще.

Выделение содержимого на веб-странице

Для того, чтобы выделить конкретный элемент веб-страницы, достаточно щелкнуть по нему (рис. 7.4) . Вообще говоря, для выделения веб-страниц в SharePoint Designer предусмотрено несколько способов:

1. мышью в области Конструктор (или Код );
2. щелчком по тегу на панели доступа к тегу , расположенной под закладкой страницы (для элементов, настраиваемых на самой aspx-странице);
3. при помощи панели инструментов Главная страница (для элементов, приходящих с мастер-страниц ).

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