Создание своей страницы в админке MODX Revolution

В рассматриваемой статье мы разберемся с тем, как создаются произвольные страницы компонентов в админке MODX. Мы разберемся с тем, что такое контроллер и за что он отвечает, а также определимся с тем, можно ли создать страницу в админке без использования сложной и непонятной библиотеки ExtJS.

Автор материала

Артем Зернов. Веб-разработчик, создатель проекта Лектория, эксперт MODX Revolution, директор веб-студии OpenColour. Youtube-канал OpenModx.

31
9 минут на прочтение
Теги по этой теме:

Урок посвящен:

  1. Архитектуре построения админки
  2. Созданию собственных страниц в ней

Контроллер — это специальный php-файл, лежащий в директории core компонента, и наследующий класс modExtraManagerController. Его назначение — подготовить нужные файлы для вывода страницы. Иными словами, нажатие на пункт меню какого-нибудь приложения, вызывает соответствующий контроллер, который запускает ряд указанных в нем действий.

Используемый контроллер можно найти в адресной строке, которая строится по следующему шаблону: {название сайта}/manager/?a={контроллер}&namespace={пространство имен} {контроллер} - имя контроллера (php-файла, например index — index.class.php) {пространство имен} - пространство имен созданное для компонента.

Структура контроллера

  • Объявление класса
  • Подключение стилей *.css
  • Подключение javaScript-файлов
  • Подключение дополнительного кода необходимого для реализации логики

Создание тестового компонента с названием "openmodx"

Шаг 1. Добавьте пространство имен openmodx

Для этого создайте папку openmodx в директории /www/core/components

Шаг 2. Добавьте в него каталог controllers

В этом каталоге хранятся все контроллеры используемые в компоненте

Шаг 3. В корне каталога контроллеров создайте файл контроллера index.class.php

Название файла контроллера стандартизировано и всегда имеет вид {название контроллера}.class.php По умолчанию (если не определено другого) MODX ищет index контроллер

Шаг 4. Объявите класс omIndexController

В начале файла добавьте следующий код

Имя контроллера modx должно состоять из 3-х обязательных частей объединенных в одно слово (без пробелов) и каждая часть начинается с заглавной буквы.

<?php
class OpenmodxIndexManagerController extends modExtraManagerController {
}

Имя контроллера должно состоять из 3 обязательных частей объединенных в одно слово (без пробелов) и каждая часть начинается с заглавной буквы. Части указываются в следующем порядке:

  1. Openmodx - название пространства имен
  2. Index - название контроллера
  3. ManagerController - обязательное обозначение контроллера

Обратите внимание что класс OpenmodxIndexManagerController должен наследоваться от modExtraManagerController

Шаг 5. Объявите пространство имен

  1. Перейдите в пространство имен (Настройки -> Пространство имен)
  2. В открывшемся окне кликните по кнопке "Создать новый"
  3. В сплывающем окне введите следующие данные:
  4. Имя - openmodx
  5. Путь к ядру - {core_path}/components/openmodx/
  6. Путь к активам - {assets_path}/components/openmodx/
  7. Сохраните изменения

Шаг 6. Проверьте правильность выполненных шагов

Обратитесь к созданному контроллеру через адресную строку {имя_сайта}/manager/?a=index&namespace=openmodx В случае правильного выполнения задания вы должны увидеть пустое окно без каких-либо ошибок

пустое окно без каких-либо ошибок
пустое окно без каких-либо ошибок

Наполнение созданной страницы

В предыдущем примере мы рассмотрели создание пустой страницы нашей компоненты openmodx. Далее мы будем работать с созданным выше контроллером, который по своей сути представляет собой класс.

Описание структуры класса

Класс представляет собой набор функций, как правило состоящий из следующих методов:

  1. procees() - метод выполняющий подготовительные действия до загрузки страницы;
  2. getPageTitle() - выводит текст для тега title страницы;
  3. loadCustomCssJs() - основной метод контроллера, именно он загружает все нужные скрипты и стили для работы страницы;
  4. getTemplateFile() - метод отдаёт html шаблон страницы для дальнейшего отображения;
  5. checkPremissions() - метод проверки ограничительных прав на доступ к странице.

Использование всех методов является не обязательным и зависит всегда от способа решения конкретной задачи. Как видно из описания классов для описания внешного вида странички мы можем использовать два метода getTemplateFile и loadCustomCssJs. Рассмотрим их начиная с самого простого.

Метод getTemplateFile()

Этот метод должен возвращать путь к файлу для отображения, давайте это напишем. Добавьте внутри класса следующий код:

Обязательно ExtJS?

Для наполнения страницы содержимым и логикой абсолютно не обязательно использовать ExtJS. Вы вправе использовать любые библиотеки, либо нативный html для построения содержимого и произвольный javascript для динамической клиентской логики.

public function getTemplateFile() {
  return dirname(__DIR__).'/templates/index.tpl';
}

В приведенном примере для отображения используется tpl шаблон, который расположен, в нашем примере, по адресу www/components/openmodx/templates/. В указанной папке создайте файл index.tpl и поместите в него код который выведет на страницу заголовок 2 уровня с текстом "Тестовая страница для админки":

<div class="container"><h2>Тестовая страница для админки</h2></div>

Сохраните изменения в файле и перезагрузите страницу браузера. Результат должен быть как на изображении.

Отображение шаблона, указанного в методе getTemplateFile
Отображение шаблона, указанного в методе getTemplateFile

Использование метода getTemplateFile позволяет быстро создавать страницы внутри нашей системы и не требует от разработчика специфических знаний, так как используется только нативный html код. Далее рассмотрим другой подход к отображению страниц, более сложный на первый взгляд.

Метод loadCustomCssJs()

Для корректного отображения страницы с использованием данного метода закомментируйте метод getTemplateFile или сделайте так, чтобы он возвращал пустую строку, например так:

public function getTemplateFile() {
  return '';
}

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

...
public function loadCustomCssJs() {}
...

Видим, что наш метод должен возвращать строку содержащую абсолютный путь до файла шаблона. Но начнем реализацию метода не с его описания, а с подготовки, принятой в системе MODx, структуры каталогов.

Шаг 1. Создание каталогов

По пути www/assets/components/ создайте каталог openmodx, в нем папку js, подпапку mgr с файлом index.js. У Вас должна получиться структура папок представленных на изображении

www/  
 |-- assets/  
      |-- components/  
          |-- openmodx/  
                |-- js/  
                    |-- mgr/   
                        |-- index.js  

Почему именно такая структура? Это связано с правилами MODx, такое распределение позволяет упорядочить файлы по их назначению, содержанию и в дальнейшем упростит работу по модификации web-приложения. В теории такой структуры придерживаться не обязательно, но ее использование косвенно подтверждает высокий уровень разработчика. Давайте рассмотрим назначение папок:

  1. assets — содержит папки файлы, которые должны быть доступны снаружи, из интернета;
  2. components — каталог в котором хранятся файлы компонентов, которые должны быть доступны из браузера;
  3. openmodx - каталог содержащий вспомогательный файлы нашей компоненты;
  4. js — каталог содержащий js файлы;
  5. mgr — каталог содержащий файлы связанные с панелью управления менеджера.

Шаг 2. Наполнение index.js

Вставьте следующий код в файл который выведет заголовок страницы и текстовое поле с названием. Для облегчения понимания внутри кода приведены комментарии поясняющие назначение тех или иных команд (выражений, функций и т.д.)

var myPanel = function(config){ // Создаём компонент - главный объект
  config = config || {};
    Ext.apply(config,{
      cls: 'container', //применяем стиль container
      header: true, // разрешаем отображение заголовка
      title: 'Тест', // в заголовке выводим слово "Тест"
      items:[{ // описываем объекты внутри панели
        layout: 'form', // создаем слой типа форма
        cls: 'main-wrapper', //применяем стиль main-wrapper
        labelAlign: 'top', //отображение подписи "сверху"
        items: [{
          xtype: 'textfield', //создаем тестовое поле
          fieldLabel: 'Тесктовое поле' // подпись к текстовому полю
        }]
      }]
    });
    myPanel.superclass.constructor.call(this,config); //собираем компонент
};

Ext.extend(myPanel, MODx.FormPanel); // Наша панель расширяет объект MODX.FormPanel
Ext.reg('my-panel',myPanel);// Регистрируем новый xtype для панели

Ext.onReady(function(){ // Когда страница загрузилась
  MODx.add({ // Вставляем на страницу объект
    xtype: 'my-panel' // Тип объекта - Панель
  })
});

Шаг 3. Определение метода loadCustomCssJs()

В предыдущем шаге мы описали внешний вид нашей страницы. Теперь сделаем его доступным пользователю. Для этого вставим путь к файлу index.js в метод.

public function loadCustomCssJs() {
  $baseUrl = '/assets/components/openmodx';
  $this->addLastJavascript($baseUrl.'js/mgr/index.js') //добавление файла js в конец генирируемой страницы
}

Сохраните изменения в файле и перезагрузите страницу браузера. Результат должен быть как на изображении.

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

Заключение

В данном уроке был рассмотрен принцип создания простой странички в админке, что по своей сути является началом написания компонента для MODx. В ходе выполнения предложенных заданий, в существующие архитектуру папок и пространство имен, мы внедрили свою компоненту - openmodx, которая выводит требую нам информацию на своей странице. Также отмечу, что отображение страницы возможно выполнить двумя разными способами:

  1. использованием tpl шаблона с html разметкой, через метод getTemplateFile;
  2. описанием содержимого страницы через библиотеку Ext JS и подключаемый методом loadCustomCssJs.

Несмотря на то, что второй способ значительно сложнее для понимая и реализации, но он является более универсальным при разработке интерфейсов админки на MODX и позволяет использовать общий стиль и архитектуру интерфейса админки MODX.

Подробный курс по теме

Артем Зернов
Мы используем куки на нашем сайте. Продолжая просмотр, вы соглашаетесь с условиями пользовательского соглашения
Пожалуйста, подождите. Процесс оформления заказа может занимать до 30 секунд.