Создание контента с помощью представлений изображений и каналов устройств. Часть 2

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

Чтобы решить эту задачу и обеспечить разработчикам контента простой механизм редактирования, используйте в шаблонах страниц панели обоих типов: 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 мы видим, на что похож процесс редактирования контента при использовании данного подхода.

Панель 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.

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

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

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

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

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

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

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

Ниже приведено еще два примера третьего преимущества, описанного выше (см. экран 10). В этом примере вы видите страницу в режиме редактирования (прорисованную в канале устройств iPad). Обратите внимание, что кнопка Pick Rendition на ленте отключена. Эта кнопка отключается путем настройки свойства RenditionID элемента управления поля Publishing Image. Кроме того, в диалоговом окне, которое используется для добавления/редактирования изображений в элементах управления поля Publishing Image, для соответствующего представления изображения предварительно настроен раскрывающийся список представлений, и этот элемент управления отключен. Как вы можете видеть, данная настройка не позволяет разработчикам контента выбирать неподходящие представления изображений, и упрощает их задачу, ведь им не нужно беспокоиться о выборе правильного представления (см. экран 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> Set Renditions =»server« FieldName=»Canviz_HeroImageiPad« RenditionId=»2«> =»server« FieldName=»Canviz_HeroImageiPhone« RenditionId=»3">

Поделитесь материалом с коллегами и друзьями

«Открытые системы» - ведущее российское издательство, выпускающее широкий спектр изданий для профессионалов и активных пользователей в сфере ИТ, цифровых устройств, телекоммуникаций, медицины и полиграфии, журналы для детей.

© «Открытые системы», 1992-2019.
Все права защищены.