Использование принципов вложенности в компонентах NetCat

Концепция осмысленного использования шаблонов компонентов в NetCat, созданная чтобы:

  • избежать дублирования кода и упростить поддержку и развитие проекта в условиях его непредсказуемости;
  • сформировать логику в голове программиста - отделить общее от частного.

Отсюда идея:
Писать код компонента таким образом, чтобы основная логика была в компоненте и наследовалась в шаблонах. Шаблоны компонента должны по возможности служить модификаторами, надстройками над основным компонентом.

Это должно привести к тому, что:

  • для добавления нового поля в компонент, достаточно прописать его вывод только в корневом шаблоне
  • для изменений верстки или внешнего вида листинга объектов в некоем частном случае, изменения должны вноситься только в соответствующий ему шаблон компонента

Что это значит?
Это значит, что шаблоны компонента должны дополнять корневой компонент, а не перезаписывать его. В самом компоненте всегда должно храниться "ядро" логики и верстки, а шаблонах - его модификаторы, могущие работать как через php, так и через CSS, путем "обвязки" базовой верстки новым слоем.

Как наследовать?
В Netcat 4.x можно использовать переменные %Suffix%, %Record%, %Prefix%, %Settings%, %Full% и т.д. - в них содержится код из соответствующих полей корневого компонента.
В Netcat 5.x - то же самое, что и в Netcat 4.x, плюс можно применять конструкцию <? require_once $nc_parent_field_path; ?> - она используется для наследования любого поля, в том числе действий после добавления/изменения и т.п.

Что значит дополнять корневой компонент, я не понимаю?
Значит, написать, например, в префиксе шаблона - %Prefix% и затем вставить свой архиполезный код, не дублирующий тот, который уже есть в %Prefix%.

Пример из жизни

Задача: выводить на сайте свежие акции (о скидках, распродажах и т.д.) по критерию: отображаются только те акции, у которых дата окончания в будущем относительно сегодняшнего дня (finishDate >= CURDATE()). При этом:

  • акции связаны с компаниями, которые их предлагают;
  • и с товарами, на которые эти акции применяются. Соответственно, акции должны дополнительно выводиться на страницах компаний и на страницах товаров.
  • а еще хочется этими акциями управлять, включать-выключать и видеть завершенные.
  • а на странице товара акции должны подсвечиваться при наведении.

Что делать? Сначала подумать.
Выборка объектов. По итогам дум получаем такую картину:

  • основной компонент должен выводить листинг акций по указанному критерию: finishDate >= CURDATE() (это попадает в системные настройки компонента);
  • в шаблоне "На страницу компании" наследуется этот критерий плюс добавляется критерий, указывающий на принадлежность акции компании: Message_ID IN (список ID акций);
  • в шаблоне "На страницу товара" наследуется этот критерий плюс добавляется критерий, указывающий на принадлежность акции товару: Message_ID IN (список ID акций)

Видим, что в системных настройках двух шаблонов мы совершаем одинаковые выборки. Значит, этот одинаковый код надо вынести в основной компонент, а в системных настройках шаблонов наследовать его через %Settings%

  • нужен шаблон вывода всех акций для администратора с возможностью посмотреть завершенные и выключенные акции.

Значит, в его системных настройках должно быть примерно следующее:

%Settings%
if ($actions) { //GET-параметр, в зависимости от которого формируется выборка
  switch ($actions) {
    case "showAll": //показать все
      $ignore_check = 1;
      break;
    case "showFinished": //показать завершенные
      $ignore_check = 1;
      $query_where = "a.finishDate < CURDATE()";
      break;
    case "showOff":
      $ignore_check = 1;
      $query_where = "a.Checked = 0 OR a.finishDate = 0 OR a.finishDate IS NULL";
      break;
  }
}

С логикой вывода объектов и ее наследованием разобрались. Теперь надо сделать верстку.

Верстка
Базовую верстку делаем в корневом компоненте, оборачивая листинг объектов классом actions. Используя css-компилятор LESS? внутри этого класса пишем нужные стили, соответственно, любой вложенный в actions класс не влияет ни на что другое, кроме акций.

Итак, в корневом компоненте это выглядит так:

  • Префикс: <div class='actions'>
  • Объект в списке: <div class='object'> ... вывод полей объекта ... </div>
  • Суффикс: </div>

В LESS пишем:

.actions {
  margin: 10px 0;
  .object { 
    color: #000;
  }
}

Для страницы компании нет никаких дополнительных требований к внешнему виду, значит, просто наследуем родителя:

  • Префикс: %Prefix%
  • Объект в списке: %Record%
  • Суффикс: %Suffix%

А для страницы товара мы хотели подсветить акцию при наведении мыши:

  • Префикс: <div class='actions actions-for-goods'>
  • Объект в списке: %Record% (наследуем)
  • Суффикс: %Suffix% (наследуем)

Далее идем и в LESS и дополняем его такими строками:

.actions-for-goods {   
  .object {
    // реакция на наведение мыши 
    &:hover {
      background:  #f2fbfe; 
      cursor: pointer;  
    }     
  }
}

Все, требуемый результат получен. Ничего нигде не пересеклось и не наложилось друг на друга. Мы просто в шаблоне для страницы товара дописали дополнительный "обвязывающий" класс actions-for-goods, внутри которого находятся нужные стили и который применен и работает только на странице товара.

Описанный выше прием доказал на практике свою "профпригодность" и, очевидно, должен использоваться при разработке и поддержке любого более-менее сложного проекта на NetCat.

Блог

Что с Мастерхостом? Когда заработает?!

Этот вопрос всё чаще задают в Интернете начиная примерно с 12:00 дня 2 марта. А всё потому, что он накрылся!

далее

Автоматизированная Система Управления Бэкапами

Автоматизированная Система Управления Бэкапами позволяет добиться полного контроля над резервными копиями сайтов внутри инфраструктуры веб-студии. Если вы поддерживаете десятки сайтов на разных хостингах, без подобной системы вы не можете быть на 100% уверены в том, что каждый из них был корректно зарезервирован прошлой ночью.

далее

WebSocket: интеграция с NetCat

Хотите добавить на сайт под управлением CMS NetCat поддержку технологии WebSocket? Обращайтесь к нам! Посетители сайта смогут получать мгновенные уведомления о событиях сайта без обращений к серверу и перезагрузок страниц. Превратите свой сайт в интерактивную площадку, работающую в реальном времени!

далее

NetCat: техническая поддержка и доработка сайтов

Мы работаем с CMS NetCat уже больше 10 лет. У нас большой опыт и ответственный подход к делу.

далее

Весь блог тут