В предыдущей статье цикла, «Создание контента с помощью представлений изображений и каналов устройств. Часть 1» (опубликованной в Windows IT Pro/RE № 4 за 2014 год), я рассказывал о проблемах, связанных с оптимизацией процесса создания контента с помощью представлений изображений и каналов устройств. .

Использование панелей Device Channel и панелей Edit Mode

Чтобы решить эту задачу и обеспечить разработчикам контента простой механизм редактирования, используйте в шаблонах страниц панели обоих типов: Device Channel и Edit Mode. Панели Edit Mode применяются для отображения контента и управляющих элементов, только когда страница находится в режиме редактирования. На сайте MSDN можно найти дополнительную информацию о панелях Edit Mode (http://msdn.microsoft.com/en-us/library/jj822364.aspx) и процессе их создания (http://msdn.microsoft.com/en-us/library/jj822364.aspx). Диаграмма на приведенном рисунке иллюстрирует данный подход.

 

Схема механизма редактирования
Рисунок. Схема механизма редактирования

Обратите внимание, что элементы управления поля Publishing Page, связанные с каналом устройства, который не является каналом устройства, используемым по умолчанию, присутствуют в шаблоне страницы в двух экземплярах. По одному экземпляру каждого из этих элементов управления размещено в панели Edit Mode внутри панели Default Device Channel. Таким образом, вы даете разработчикам контента возможность редактировать эти элементы в канале устройств, используемом по умолчанию.

Код, реализующий панель Default Device Channel и содержащиеся в ней компоненты, приведен в листинге.

На экране 1 мы видим, на что похож процесс редактирования контента при использовании данного подхода.

 

Процесс редактирования
Экран 1. Процесс редактирования

Панель Default Device Channel выделена красной рамкой. Черной рамкой обведена панель Edit Mode. Обратите внимание, что элемент управления поля Publishing Image (с именем Hero Image), связанный с каналом, используемым по умолчанию, позволяет выбирать изображение, отображаемое в канале устройств, используемом по умолчанию. Внутри элемента управления поля Publishing Image содержится ссылка с именем Set Hero Image Renditions.

Если щелкнуть мышью по ссылке Set Hero Image Renditions, на экран будут выведены элементы управления поля Publishing Image, используемые для настройки представлений изображений для других каналов устройств. За отображение отвечает модуль JavaScript, который вы видите в приведенном примере кода.

Как показано на экране 2, этот модуль позволяет разработчикам контента, находясь в режиме редактирования, задавать представления изображений для всех каналов устройств, работая со страницей через представление Default Device Channel.

 

Работа с представлением Default Device Channel
Экран 2. Работа с представлением Default Device Channel

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

На экране 3 показано, как выглядит страница в режиме редактирования при добавлении параметра QueryString? Devicechannel=iPad в строке URL в браузере. Данный параметр сообщает системе SharePoint, что страницу нужно прорисовывать в канале устройств iPad. Здесь используется тот же подход, о котором говорилось выше. Обратите внимание на зеленую рамку: так выделен канал устройств iPad, в котором отображается только элемент управления поля Publishing Image, связанный с каналом устройств iPad, у которого соответствующим образом настроено свойство RenditionID (см. соответствующий код ниже):

runat=«server»
FieldName=«Canviz_HeroImageiPad»
RenditionId=«4">

 

Редактирование с параметром QueryString?Devicechannel=iPad
Экран 3. Редактирование с параметром QueryString?Devicechannel=iPad

Если вернуться к представлению Default Device Channel и указать изображение для каждого элемента управления поля Publishing Image, страница в режиме редактирования будет выглядеть, как показано на экране 4.

 

Редактирование всех изображений
Экран 4. Редактирование всех изображений

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

 

Страница в канале устройств по умолчанию
Экран 5. Страница в канале устройств по умолчанию

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

  1. Разработчики контента получают гибкую возможность выбора различных изображений для каждого канала устройств.
  2. Разработчики могут редактировать и настраивать представления для каждой страницы/каждого изображения/каждого канала устройств. Обеспечивается абсолютная гибкость.
  3. В шаблоне страницы представления изображений задаются для каждого элемента управления поля Publishing Image и они не могут быть изменены разработчиками контента. Таким образом обеспечивается согласованность и оптимизированная доставка изображений на мобильные устройства, подключающиеся к сайту через каналы Ddevice.

 

Страница в канале iPad
Экран 6. Страница в канале iPad

На экране 7 можно увидеть пример второго описанного выше преимущества. Сначала отредактируйте представление для данного изображения, выбрав пункт EDIT RENDITIONS во всплывающем меню. Затем измените участок изображения, отображаемый в выбранном представлении (см. экран 8). После сохранения представления изображения в канале устройств iPad страница будет выглядеть так, как показано на экране 9.

 

Изменение представления
Экран 7. Изменение представления

 

Выбор отображаемого изображения
Экран 8. Выбор отображаемого изображения

 

Измененное представление
Экран 9. Измененное представление

Ниже приведено еще два примера третьего преимущества, описанного выше (см. экран 10). В этом примере вы видите страницу в режиме редактирования (прорисованную в канале устройств iPad). Обратите внимание, что кнопка Pick Rendition на ленте отключена. Эта кнопка отключается путем настройки свойства RenditionID элемента управления поля Publishing Image. Кроме того, в диалоговом окне, которое используется для добавления/редактирования изображений в элементах управления поля Publishing Image, для соответствующего представления изображения предварительно настроен раскрывающийся список представлений, и этот элемент управления отключен. Как вы можете видеть, данная настройка не позволяет разработчикам контента выбирать неподходящие представления изображений, и упрощает их задачу, ведь им не нужно беспокоиться о выборе правильного представления (см. экран 11).

 

Выключение элементов управления
Экран 10. Выключение элементов управления

 

Выключение неподходящих элементов управления
Экран 11. Выключение неподходящих элементов управления

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

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

ID=»DeviceChannelPanel«
runat=»server«
IncludedChannels=»default«>



. canviz-clear-float{
float: none;
clear: both;
visibility: hidden;
}

Листинг. Реализация панели Default Device Channel

ID=»DeviceChannelPanel1«
runat=»server«
IncludedChannels=»Default«>
=»server«
FieldName=»Canviz_HeroImage«
RenditionId=»1«>

ID=»EditModePanel1«
PageDisplayMode=»Edit«
runat=server>





=»server«
FieldName=»Canviz_HeroImageiPad«
RenditionId=»2«>





=»server«
FieldName=»Canviz_HeroImageiPhone«
RenditionId=»3">