Как стать автором
Обновить

Orchard CMS для разработчика — часть 2

Время на прочтение6 мин
Количество просмотров3.6K
image
В продолжении статьи о разработке для open-source CMS Orchard рассмотрим вывод контента на страницу, обновление модулей и концепцию виджетов. И закончим модуль, позволяющий добавить к сайту на Orchard список пунктов быстрого перехода для закрепленного сайта Internet Explorer 9.

Начало


Итак, продолжим работу над модулем IE9Pins для Orchard CMS. В прошлый раз мы остановились на том, что закончили с админской частью – добавили возможность создавать, редактировать и удалять элементы из списка быстрого перехода IE9. По сути, реализовали CRUD для типа содержимого, включающего единственную часть для хранения данных пункта jump list’a.

Jump lists — подходы


Теперь пришло время добавить на сам сайт данные из админской части, превратив их в функционирующий список переходов для IE9. Как вы, подозреваю, уже узнали из статьей на MSDN или блога Константина Кичинского, чтобы зарегистрировать список быстрого перехода (да и вообще управлять поведение закрепленного (pinned) сайта) существуют два подхода – через meta tags или через JavaScript. По большому счету, и тот и другой варианты требуют одного – при рендеринге страниц сайта добавлять либо тег meta в head страницы, либо выполнять скрипт по завершению ее загрузки.

Виджеты


Какой бы подход мы не выбрали, первое что нужно сделать – выяснить, какие средства предоставляет Orchard для расширения функциональности сайта. Пропущу метания и поиски и предложу ответ сразу – это виджеты (widgets). По большому счету, это просто еще один тип контента, который лишь помечен при создании, что он может быть добавлен на любую страницу в качестве виджета. А если это тип контента, значит у него есть свой драйвер, который определяет рендеринг в HTML – соответственно, там мы и сможем добавить код для генерации JavaScript / установки значений метатегов. Мало того, виджет может быть добавлен не только на все страницы сразу, но и на каждую по-отдельности, а значит, при большом желании мы сможем контролировать поведение даже каждой страницы сайта.
Итак, пора добавить виджет в проект. Первым же решением, которое приходит в голову – если виджет это тип контента, почему бы просто не использовать уже существующий JumpListItem? Благо, в его драйвере мы никак не обработали метод Display. Проблема в том, что виджет при добавлении на страницу выведет свой набор полей и частей, доступных для редактирования – т.е. отобразит поля для нового элемента JumpList’a и мало того, по клику на Save на этапе добавления виджета он добавит созданный контент в общий список. Разумеется, нам ничего такого не требуется – мало того, у виджета и настроек никаких не будет, кроме стандартных – на какой странице и в каком блоке его выводить. Т.е. нам пойдет тип контента вовсе без свойств и частей и даже не привязанный ни к каким данным в БД (т.е. запись (record) не потребуется). От него потребуется только созданный драйвер с написанным методом Display и отдельный View, который отрендерит нужный нам контент.

Часть контента (Content part)


Для виджета потребуется простая часть контента – JumpListPart (не путать с JumpListItemPart). Код весьма прост:
public class JumpListPart : ContentPart<br>  {<br>  }<br><br>* This source code was highlighted with Source Code Highlighter.

В драйвере для данной части определим метод Display:
public class JumpListPartDriver : ContentPartDriver<Models.JumpListPart><br>  {<br>    IContentManager contentManager;<br>    IJumpListService jumpListService;<br>    public JumpListPartDriver(IContentManager contentManager, IJumpListService jumpListService)<br>    {<br>      this.contentManager = contentManager;<br>      this.jumpListService = jumpListService;<br>    }<br> <br> <br>    protected override DriverResult Display(Models.JumpListPart part, string displayType, dynamic shapeHelper)<br>    {<br>      return ContentShape("Parts_JumpList", () => shapeHelper.Parts_JumpList(<br>        AllItems: jumpListService.Get()));<br>    }<br>  }<br><br>* This source code was highlighted with Source Code Highlighter.

И, наконец-то, добавим то, ради чего все затевалось – View, который добавит пункты в Jump List закрепленного сайта. Для начала, посмотрим, что можно сделать в View с meta тегами в head страницы – метод SetMeta выглядит вполне подходящим. Но, к сожалению, после детального изучения становится ясно, что использовать его не получится. Все пункты меню обладают одним и тем же ключом, но разными значениями, и сделав несколько вызовов SetMeta мы получим только одно значение для последнего пункта – не подходит. Не проблема, сделаем несложный код на JavaScript (даже не сделаем, а возьмем из статьи kichik, там как раз то, что нужно). Только вот исходный массив будем генерить на серверной стороне, отдавать в модель для представления – и получим именно то, что нам нужно. Генерация массивы выглядит следующим образом:
string items = string.Empty;<br>var itemsArray = (jumpListService.Get() as IEnumerable<JumpListItemPart>).ToArray();<br>items = "[" + string.Join(",", itemsArray.Select(i => "{name: '" + i.Name + "',url: '" + i.Url + "', iconUrl: '" + i.IconUrl + "'}")) + "]"; <br><br>* This source code was highlighted with Source Code Highlighter.
И, собственно, создание элементов списка по этому массиву в представлении:
<script type="text/javascript"><br>  var items = @(new MvcHtmlString(Model.JsArray))<br>  var isPinnedSiteMode = window.external && "msIsSiteMode" in window.external<br>            && window.external.msIsSiteMode();  <br>  if (isPinnedSiteMode) {<br>    window.external.msSiteModeCreateJumplist('Tasks');<br>    window.external.msSiteModeClearJumplist();<br>    for (i = items.length - 1; i >= 0; i--) {<br>      window.external.msSiteModeAddJumpListItem(items[i].name,<br>             items[i].url, items[i].iconUrl);<br>    }<br>    window.external.msSiteModeShowJumplist();<br>  }<br></script><br><br>* This source code was highlighted with Source Code Highlighter.


Миграция


Итак, основа для виджета создана, пора заняться созданием нового типа контента. Происходит оно, как водится, в Migration.cs. Однако в этот раз добавлять код в метод Create бессмысленно, он отрабатывает только при первичной активации модуля. А мы же теперь увидим, как на практике работают и применяются миграции. Итак, как вы видите, метод Create возвращает int значение 1 – это номер версии. Т.к. наш модуль только что был установлен, то текущая версия и будет равна 1. Добавим очень простой код:
public int UpdateFrom1()<br>    {<br>      ContentDefinitionManager.AlterTypeDefinition("InternetExplorerPins", cfg => cfg<br>        .WithPart("JumpListPart")<br>        .WithPart("WidgetPart")<br>        .WithPart("CommonPart")<br>        .WithSetting("Stereotype", "Widget"));<br> <br>      return 2;<br>    }<br><br>* This source code was highlighted with Source Code Highlighter.
UpdateFrom1 – это и есть указание обновить с версии 1. Return 2 – какое значение версии следует установить после выполнения миграции. Само описание типа контента простое – добавляем части контента JumpListPart, WidgetPart – это добавит в наш виджет возможность конфигурировать его положение на странице и в блоке и важный момент – настройка WithSetting(“Stereotype”, “Widget”) – значит этот тип контента появится в списке доступных виджетов.
Обновление модуля
Все готово – Build all, Successfully. Теперь открываем админку сайта – и Orchard встречает нас уведомлением, что для модуля IE9Pins доступны обновления.


Отправляемся в Modules:

Выбираем Update, разумеется, и после пары секунд ожидания видим сообщение, что все успешно обновлено, ура.

Размещение виджета


Но пока виджет только зарегистрирован в системе, на страницы он пока не добавлен. В админке идем в пункт Widgets, добавляем новый – и вот он, наш InternetExplorerPins.

Выбираем Add to zone:

В качестве зоны указываем Footer, а слоя (Layer) – Default. Такой тип размешения добавит в конце страницы – в футере – на каждой странице, т.к. выбран слой Default. Можно выбрать слой HomePage – чтобы разместить только на домашней странице, например.
И самый волнующий момент – добавляем для проверки несколько элементов в список и открываем главную страницу сайта. Тащим его на taskbar… и наконец-то наблюдаем результат работы.



Ссылки


1) Первая часть статьи (там можно найти много полезных ссылок)
2) Исходный код на BitBucket
Теги:
Хабы:
Всего голосов 17: ↑10 и ↓7+3
Комментарии3

Публикации