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

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

В этой статье речь пойдет о том, как реализовать упоминавшийся в первой части подход, предусматривающий совместное использование панелей Device Channel и панелей Edit Mode в шаблонах страниц

КиТ :: Будь в СЕТИ! KiT - Keep-inTouch :: RSS-лента

Сети :: [Профессиональные] | [Зарубежные] | [Тематические] | [Молодежные] | [Детские] | [Купоны] | [Прочее]

Категории (метки) :: Авто | Музыка | Книги | Хобби | Профессии | Сообщества | Семья | Бизнес | Регионы | Спорт | Статусы

В предыдущей статье цикла, «Создание контента с помощью представлений изображений и каналов устройств. Часть 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.

 

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

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

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

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

 

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

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

 

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

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

 

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

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

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

 

Экран 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> Set Renditions =»server« FieldName=»Canviz_HeroImageiPad« RenditionId=»2«> =»server« FieldName=»Canviz_HeroImageiPhone« RenditionId=»3">

 



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




Теперь расходы на сертификацию кабельных систем станут меньше на 65%! Теперь расходы на сертификацию кабельных систем станут меньше на 65%! Самое читаемое Windows обречена? Надежные средства киберзащиты промышленного уровня Добавляем новые возможности в контекстное меню Windows Шифрование для MongoDB Процесс управления RID в Active Directory Составляем произвольную буквенную последовательность ИТ-календарь
Шестая конференция российских разработчиков операционных платформ «OS DAY. Инструменты, их разработка и опыт применения» 10 июня 2019 Опыт Вилгуд: как сеть умных автосервисов использует ITSM 365. Support 13 июня 2019 Популярные теги Windows 10 SharePoint Microsoft Azure Active Directory Все темы White Papers Veeam 6 критически важных причин необходимости резервного копирования Office 365 19 апреля 2019 Veeam Безопасность цифровой личности в государственных системах: резервирование и восстановление данных 19 апреля 2019 Об издательстве Об издании Обратная связь Как нас найти Контакты О републикации Теги Архив изданий Политика обработки персональных данных

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

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

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

За «диджитализацию» Сбербанка будет отвечать экс-зампред Правительства по вопросам культуры и спорта

Не вошедшая в новое Правительство бывшая вице-премьер России по вопросам культуры и спорта Ольга Голодец станет зампредправления Сбербанка и будет отвечать за его цифровую трансформацию. Непосредственного опыта работы в ИТ-сфере экс-чиновница не имее...

ИИ двойного назначения. Китай планирует опередить США в области искусственного интеллекта

Руководство КНР не жалеет ресурсов для того, чтобы страна заняла лидирующее положение на рынке искусственного интеллекта, потеснив привычного «лидера гонки» — Соединенные Штаты. Россия, увы, наблюдает за схваткой двух гигантов, с почтительного рассто...

Как государство потратит 101 миллиард на цифровое госуправление

CNews изучил федеральный проект «Цифровое государственное управление» национальной программы «Цифровая экономика». ЦГУ - единственный федеральный проект из этой нацпрограммы, в котором предусмотрено исключительно финансирование из федерального бюджет...

С чего начнется четвертая промышленная революция в вашей компании?

Операционные технологии управляют оборудованием в критически важных инфраструктурах. И они отделены от традиционных ИТ-сетей. Их интеграция - одна из основ Индустрии 4.0. Но 90% компаний отдаляются от цели, потому что не могут обеспечить безопасность...

Исследование Microsoft: россияне стали чаще сталкиваться с интернет-рисками

Microsoft представила результаты четвертого ежегодного исследования, посвященного культуре общения и личной безопасности в сети за 2019 г. На его основе был составлен рейтинг стран по индексу цифровой культуры (Digital Civility Index, DCI). Россия за...

[Популярные социальные сети] [*Добавить сайт]

Нравится

Группы: ВК | FB | Tw | G+ | OK

Рубрики | КАТАЛОГ | Новости | Контакты |