MODX - редактор backend`а

• Вводная
• BackEnd
• PS

Вводная

В настоящее время уже мало просто написать сайт для отображения какой-либо информации. Это очень просто сделать в любой социальной сети, получив плюсом и какой-никакой интерактив. Все больше возникает потребность создания страниц "менеджера" ("менеджера" - в хорошем смысле). В которой человек мог бы просматривать какие-либо данные, управлять содержимым(редактировать). Например - заказы в интернет-магазине. Конечно, полно дополнений для MODX, где все это уже есть. Это и коменты в блогах, управление заказами в интернет-магазинах и еще много чего. Можно найти подходящее расширение и не париться. Но всегда есть ньюансы. Дополнения, как правило, пишутся на все случаи жизни. В них полно того, что не нужно в конкретном случае. Или наоборот чего-то не хватает. Например есть классное дополнение "Gallary" для работы с изображениями. И в сети полно примеров где люди расширяют его возможности. В частности для загрузки нескольких изображений в один TV(переменную шаблона). А для этого уже надо писать свою страницу менеджера. Да и вообще это расширяет понимание механизмов MODX. А они очень не простые. Этот пост - не руководство, скорее памятка для закрепления ранее изученного. Ну и некоторые размышления. Конкретную реализацию всегда можно посмотреть в любом установленном компоненте.

BackEnd (страница менеджера)

Есть в системе понятие контекста. Как правило их два: контекст менеджера и "www". Можно добавить свои, но не рекомендуется. BackEnd всегда работает в контексте менеджера. А контекст "www" отвечает за отображение страницы прочим посетителям(FrontEnd). Разница существенная. Так в контексте менеджера весь UI(интерфейс пользователя) реализован на ExtJS, а в контексте "www" чаще используют jQwery. Это потому-что ExtJS заточен на приложения(диалоги, интерактивные таблицы и прочее), a jQuery - более общего применения. Допустим, мы создаем новый компонент(дополнение, приложение).

Последовательность:

• Кнопка в меню
  • Создать пространства имен("шестерня"->пространство имен) Детали
    Назовем "my_comp_php"

    Тут указывааются пути до ядра(core) и активов компонента(assets): {core_path}components/my_comp_php/ и {assets_path}components/my_comp_php/

    Это нужно чтобы modx смог найти контроллер(при нажатии на кнопку)

    ---
  • Создать саму кнопку("шестерня"->действия) Детали
    Можно впихнуть в любое меню, или создать свое

    Действие. Обычно в примерах ставят:"index".Как я выяснил позже, это не "ice". Подробнее тут. Лучше сделать уникальным.

    Ключ-произвольный(это надпись кнопки)

    Пространство имен- выбираем наше("my_comp_php")

    ---

    В итоге при нажатии кнопки - система будет искать класс-контроллер в файле: core/components/my_comp_php/controllers/index.class.php
• Создать контроллер(index.class.php) Детали
  создается класс-наследник modExtraManagerController

  Имя этого наследника должно быть строго определенным, иначе система не найдет класс котроллера.

  Допутим имя пространста имен "nsname", действие - "index".

  Тогда имя класса - NsnameIndexManagerController, или nssnameindexManagerController(т.е. регистронезависимый литерал)

  В нем несколько обязательных функций-методов(вызываемых системой при запуске страницы менеджера)

  • initialize()
    • Создает php-объект компонента(my_comp_php) Детали
      обычно тут:"core/components/my_comp_php/model/my_comp_php/my_comp_php.class.php"

      в конструкторе:

      $basePath =home/.../core/components/my_comp_php/ - абсолютный путь на сервере

      $assetsUrl =.../assets/components/my_comp_php/ - от корня сайта в WWW

      config добавляются пути:

      'modelPath' => $basePath.'model/',

      'processorsPath' => $basePath.'processors/',

      'templatesPath' => $basePath.'templates/',

      'chunksPath' => $basePath.'elements/chunks/',

      'jsUrl' => $assetsUrl.'js/',

      'cssUrl' => $assetsUrl.'css/',

      'assetsUrl' => $assetsUrl,

      'connectorUrl' => $assetsUrl.'connector.php',

      $this->modx->addPackage('my_comp_php',$this->config['modelPath']); - регистрация для xPDO

      ---

      getChunk($name,$properties = array()) - чанк произвольный можно подсунуть(для сниппетов. не для менеджера)

      _getTplChunk($name,$postfix = '.chunk.tpl') - чанк по-умолчанию("")
    • Добавляет CSS
    • Добавляет JS(config['jsUrl'].'mgr/my_comp.js')
      • Создается объект-наследник Ext.Component - My_comp_js. Детали

        var My_comp_js = function(config) {
            config = config || {};
            My_comp_js.superclass.constructor.call(this,config);
        };
        Ext.extend(My_comp_js,Ext.Component,{
            page:{},window:{},grid:{},tree:{},panel:{},combo:{},config: {}
        });
        Ext.reg('my_comp_js',My_comp_js);
        My_comp_js = new My_comp_js();

      • Регистрируется в ExtJS как my_comp_js.
    • Через втроенный JS - My_comp_js.config = '.$this->modx->toJSON($this->my_comp_php->config).'; тут описаны все нужные нам пути. Это способ загрузки настроек из PHP в JS(по-моему через ajax было б красивее, видать "психанул" программист)
    • return parent::initialize()
  • getLanguageTopics() - загружает языковую локаль
  • checkPermissions() - если нужно, здесь проверяются права доступа, (обычно тут:return true)
  • process($scriptProperties) - сам не знаю для чего он. По-моему в ранних версиях использовался. В руководстве написано: всегда оставлять пустым.
  • getPageTitle() - заголовок страницы(return $this->modx->lexicon('my_comp_php');)
  • loadCustomCssJs() - вот тут непосредственная загрузка содержимого(таблиц, едитов и прочих полей). Сначала загружается "sections/index.js", та - "widgets/home.panel.js", ну а панель уж оставшиеся виджеты.
  • getTemplateFile() - загрузка HTML-контейнера для нашего содержимого.(<div id="my_comp_php-panel-home-div"></div>)
    • Скрипты JS загружающие контент менеджера принято тут делит на виджеты и секции
    • Виджеты описывают таблицы, панели и прочие елементы
    • Секции - реально загружают отображают их на странице(в нашем случае в (<div id="my_comp_php-panel-home-div"></div>))
    • А разделяют все это для возможности многократного использования виджетов в различных секциях, без дублирования кода.

  ---

PS(... мораль)

Еще раз все это можно в кратце описать так:

• При нажатии на кнопку запускается котроллер("core/components/my_comp_php/controllers/index.class.php")
• Котроллер загружает JS с объектом, JS кот. загружает содержимое страницы менеджера. Напр. таблицу(виджет)
• В JS-объекте таблицы(виджете) прописан коннектор( "/assets/components/my_comp_php/connector.php"), в котором вызывается коннектор глобальный("connectors/index.php"). Через коннектор происходит работа с данными через ajax

И еше раз про некоторые термины:

• Controller -(core/components/my_comp/controllers/index.class.php) PHP-код загрузки страницы менеджера(реакция на кнопку. Зависит от записей в пространстве имен)
• Processor -(core/components/my_comp/processors/mgr/my_comp/type_proc.class.php) PHP - манипуляции с базой(напр. mySQL). Запускается, как правило, коннектором.
• Connector -(assets/components/my_comp/connector.php) PHP - "handle"(ответка, приемник запросов) для ajax-запросов на выборку-модификацию базы. Обычно при работе с таблицами и прочими элементами на странице менеджера. В итоге отсюда запускаются процессоры(processors) (выборки, модификации базы). Назначается в JS Для Grids и прочих.
• Widget -(assets/components/my_comp/js/mgr/widgets/my_comp.grid.js) JS - интерфейс для работы с базой. В нем и прописывается коннектор. Запускается секцией(section)
• Section -(assets/components/my_comp/js/mgr/sections/index.js) JS - загрузка всех интерфейсов страницы менеджера в #my_comp-panel-home-div.Вызывается системой ExtJS через loadCustomCssJs()(прописана в контроллере). При загрузке страницы менеджера.
• CRUD - интерфейс - тут все просто Create, Read, Update, Delete.