}
Урок посвящен:
- Архитектуре построения админки
- Созданию собственных страниц в ней
Контроллер — это специальный 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 обязательных частей объединенных в одно слово (без пробелов) и каждая часть начинается с заглавной буквы. Части указываются в следующем порядке:
- Openmodx - название пространства имен
- Index - название контроллера
- ManagerController - обязательное обозначение контроллера
Обратите внимание что класс OpenmodxIndexManagerController должен наследоваться от modExtraManagerController
Шаг 5. Объявите пространство имен
- Перейдите в пространство имен (Настройки -> Пространство имен)
- В открывшемся окне кликните по кнопке "Создать новый"
- В сплывающем окне введите следующие данные:
- Имя - openmodx
- Путь к ядру - {core_path}/components/openmodx/
- Путь к активам - {assets_path}/components/openmodx/
- Сохраните изменения
Шаг 6. Проверьте правильность выполненных шагов
Обратитесь к созданному контроллеру через адресную строку {имя_сайта}/manager/?a=index&namespace=openmodx В случае правильного выполнения задания вы должны увидеть пустое окно без каких-либо ошибок
Наполнение созданной страницы
В предыдущем примере мы рассмотрели создание пустой страницы нашей компоненты openmodx. Далее мы будем работать с созданным выше контроллером, который по своей сути представляет собой класс.
Описание структуры класса
Класс представляет собой набор функций, как правило состоящий из следующих методов:
- procees() - метод выполняющий подготовительные действия до загрузки страницы;
- getPageTitle() - выводит текст для тега title страницы;
- loadCustomCssJs() - основной метод контроллера, именно он загружает все нужные скрипты и стили для работы страницы;
- getTemplateFile() - метод отдаёт html шаблон страницы для дальнейшего отображения;
- checkPremissions() - метод проверки ограничительных прав на доступ к странице.
Использование всех методов является не обязательным и зависит всегда от способа решения конкретной задачи. Как видно из описания классов для описания внешного вида странички мы можем использовать два метода getTemplateFile и loadCustomCssJs. Рассмотрим их начиная с самого простого.
Метод getTemplateFile()
Этот метод должен возвращать путь к файлу для отображения, давайте это напишем. Добавьте внутри класса следующий код:
Для наполнения страницы содержимым и логикой абсолютно не обязательно использовать 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 позволяет быстро создавать страницы внутри нашей системы и не требует от разработчика специфических знаний, так как используется только нативный 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-приложения. В теории такой структуры придерживаться не обязательно, но ее использование косвенно подтверждает высокий уровень разработчика. Давайте рассмотрим назначение папок:
- assets — содержит папки файлы, которые должны быть доступны снаружи, из интернета;
- components — каталог в котором хранятся файлы компонентов, которые должны быть доступны из браузера;
- openmodx - каталог содержащий вспомогательный файлы нашей компоненты;
- js — каталог содержащий js файлы;
- 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, которая выводит требую нам информацию на своей странице. Также отмечу, что отображение страницы возможно выполнить двумя разными способами:
- использованием tpl шаблона с html разметкой, через метод getTemplateFile;
- описанием содержимого страницы через библиотеку Ext JS и подключаемый методом loadCustomCssJs.
Несмотря на то, что второй способ значительно сложнее для понимая и реализации, но он является более универсальным при разработке интерфейсов админки на MODX и позволяет использовать общий стиль и архитектуру интерфейса админки MODX.
Вы должны авторизоваться, чтобы оставлять комментарии.