Пользовательские страницы панели управления

Создание пользовательских страниц (CPM) представляет собой материал для продвинутых пользователей, которые хотят добавлять свои собственные страницы в панель управления MODX. Это требует некоторых знаний в области программирования на PHP и, дополнительно, ExtJS и Smarty.

Изучение разработки компонент для MODX не входит в наши текущие задачи. Для того, чтобы познакомиться с этим, вы можете просмотреть документацию MODX или изучить код существующих компонент, таких как Quip или Gallery. Здесь мы создадим очень простую пользовательскую страницу панели управления (CMP), использующую HTML для реализации шпаргалки по MODX.

Создание пользовательской страницы панели управления (CMP)

Изучая создание CMP, мы постараемся сделать что-то полезное. Здесь мы создадим очень простую CMP, в которой будет шпаргалка по тегам MODX Revolution и некоторым системным переменным. Мы создадим эту CMP в меню панели управления "Компоненты" и отобразим шпаргалку в панели справа. Наша шпаргалка будет иметь две отдельные страницы со ссылками друг на друга.

Создание пространства имен

Все компоненты сторонних разработчиков должны иметь пространство имен. Пространство имен обеспечивает идентификационную строку, которую MODX использует для элементов компонент и пути, где они могут быть найдены. Пространство имен также используется для определения местоположения языковых строк компонент. Имена пространства имен обычно указываются на нижнем регистре.

Перейдите в раздел Система->Пространство имен и кликните на кнопке "Создать новый". Для пространства имен используйте следующие значения (точно так, как указано ниже) и нажмите на кнопку  "Сохранить" :

Имя : cheatsheet

Путь к ядру : {core_path}components/cheatsheet/

Не забудьте в пути указать завершающий слеш.

Создание действия

Перейдите в раздел Система->Действия. На правой панели будут расположены два дерева. Левое (Действия) отображает действия, которые являются абстракциями контроллеров MODX. В основном они являются событиями, которые происходят в панели управления. Правое дерево (Верхнее меню) отображает все пункты верхнего меню панели управления. Мы начнем с того, что скажем MODX какое действие связано с нашей шпаргалкой. Затем мы подключим его к пункту верхнего меню.

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

Контроллер : index

Пространство имен : cheatsheet

Родительский контроллер : No action

Давайте посмотрим, что означают эти значения. Верхние два пункта говорят MODX, что когда выбирается действие cheatsheet, MODX должна выполнить файл index.php, который MODX найдет в пространстве имен cheatsheet. Отметим, что расширение .php MODX добавляет автоматически. Вот файл, который будет выполнен :

core/components/cheatsheet/index.php

Мы создадим этот файл немного позже, а пока свяжем наше действие cheatsheet с пунктом верхнего меню.

В настоящее время поле "Родительский контроллер"  не оказывает действия в MODX Revolution, поэтому оно может быть установлено в "No Action" или оставлено пустым.

Создание подпункта меню

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

Имя - cheatsheet_name

Описание - cheatset_desc

Действие - cheatsheet - index

Значок - оставьте пустым

Параметры - оставьте пустым

Обработчик - оставьте пустым

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

Поле "Значок" указывает на изображение иконки, которую можно отображать рядом с пунктом меню. Это не реализовано в панели управления MODX Revolution в настоящее время, но предназначено для разработчиков, которые хотят создать в MODX свою собственную панель управления или пользовательские страницы.

Поле "Параметры" позволяет вам ввести параметры, которые будут доступны в массиве $_GET при выполнении действия.

Поле "Обработчик" позволяет вам указывать обработчик на JavaScript, который будет выполняться вместо файла с действием, которое мы указали ранее. Если это поле заполнено, будет выполняться код JS, а поле "Действие" будет игнорироваться. Вы можете или непосредственно поместить код JS в это поле, или разместить здесь вызов существующей функции JS. Используйте этот метод, если вы хотите, чтобы ваша компонента выполняла действие JS вместо загрузки страницы.

Например, подпункт меню "Перейти на сайт" (в меню "Сайт") имеет в качестве обработчика :

window.open("../");

Создание строк языкового файла

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

Мы могли бы просто добавить наши строки языкового файла в разделе "Управление словарями" (в меню "Система") панели управления MODX. Вместо этого давайте сделаем это более правильным образом, создав языковой файл, который позволяет более просто управлять пунктами меню и переводить их, а также обеспечивает информацией при создании из нашей компоненты транспортного пакета.

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

Адрес английского языкового файла должен быть :

core/components/cheatsheet/lexicon/en/default.inc.php

Напомним, что core/components/cheatsheet/ представляет собой путь к пространству имен cheatsheet.

Он должен быть видим в разделе Система->Пространство имен как {core_path}components/cheatsheet/. Файл должен выглядеть подобно этому :

<?php

/*

  * @topic default

  * @namespace cheatsheet

  * @language en

*/

$_lang['cheatsheet_name']='Cheat  Sheet';

$_lang['cheatsheet_desc']='MODX Cheat Sheet';

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

Создание файла index.php

Очистите кэш сайта и перезагрузите в браузере страницу панели управления. Выберите "CheatSheet' в меню "Компоненты". MODX попытается выполнить действие, которое мы указали для для этого пункта меню. Поскольку мы не создали никакого кода для этого, вы должны увидеть примерно вот такое сообщение :

Could not find action file at : C:/ваш_сайт/core/components/cheatsheet/index.php

Строка, которую вы видите при попытке выполнения пункта меню Cheat Sheet говорит вам, куда поместить файл index.php, который создает нашу шпаргалку. Создайте файл index.php с приведенным ниже кодом и расположите его в этом месте :

<?php

/*Код для файла index.php*/

$path = $modx->getOption('assets_URL');

$modx->regClientCSS($path . 'components/cheatsheet/cheatsheet.css');

$output = '<div class="cheatsheet">';

$output  .= '<h2>Шпаргалка по MODX</h2>';

/*получить страницу для отображения из URL*/

switch($_GET['page']) {

      case '2' :

          $output .=$modx->getChunk( 'CheatSheet2');

          break;

      default: /* по умолчанию страница 1*/

          $output .= $modx->getChunk( 'CheatSheet');

}

$output .='<div>';

return $output;

?>

Первая строка приведенного выше кода вставляет ссылку на файл CSS (который мы создадим несколько позже) в раздел <head> страницы панели управления.

Для того, чтобы указать файлу index.php какую страницу отображать, мы поместим page=1 или page=2 в наш URL как параметр. Оператор switch в коде использует $_GET, чтобы определить какой чанк использовать.

Теперь мы создадим два чанка, которые содержат две наши пользовательские страницы. Создадим чанк с названием CheatSheet и поместим в него следующий код : 

<!-- Код для чанка CheatSheet -->

<h3>Тэги MODX</h3>

<table>

<tr>

<th>Имя</th>

<th>Вид</th>

<th>Пример</th>

</tr>

<tr>

<td>Тег ресурса</td>

<td>[<!-- -->[*Поле_ресурса/tv-параметр]]</td>

<td>[<!-- -->[*pagetitle]]</td>

</tr>

<tr>

<td>Тег ссылки</td>

<td>[<!-- -->[~id]]</td>

<td>[<!-- -->[~12]]</td>

</tr>

<tr>

<td>Тег сниппета</td>

<td>[<!-- -->[имя_сниппета]]</td>

<td>[<!-- -->[MySnippet]]</td>

</tr>

<tr>

<td>Тег чанка</td>

<td>[<!-- -->[$имя_чанка]]</td>

<td>[<!-- -->[$MyChunk]]</td>

</tr>

<tr>

<td>Плейсхолдер</td>

<td>[<!-- -->[+имя_плейсхолдера]]</td>

<td>[<!-- -->[+MyPlaceholder]]</td>

</tr>

<tr>

<td>Часто используемые системные переменные</td>

<td>[<!-- -->[++имя_системной_переменной]]</td>

<td>[<!-- -->[++site_urlt]]</td>

</tr>

<tr>

<td>Языковой тег</td>

<td>[<!-- -->[%имя_языковой_строки]]</td>

<td>[<!-- -->[%file_not_found]]</td>

</tr>

</table>

<br/><br/>

<h3>Системные переменные</h3>

<table>

<tr>

<th>Функция</th>

<th>Системная переменная</th>

<tr>

<td>Главная страница</td>

<td>site_start</td>

</tr>

<tr>

<td>Имя сайта</td>

<td>site_name</td>

</tr>

<tr>

<td>Документ не найден - 404</td>

<td>error_page</td>

</tr>

<tr>

<td>Доступ запрещен - 403</td>

<td>error_page</td>

</tr>

<tr>

<td>Публиковать по умолчанию</td>

<td>publish_default</td>

</tr>

<tr>

<td>Использовать дружественные URL</td>

<td>friendly_urls</td>

</tr>

<tr>

<td>Использовать текстовый редактор</td>

<td>use_editor</td>

</tr>

<tr>

<td>Какой редактор использовать</td>

<td>which_editor</td>

</tr>

<tr>

<td>Новые документы, кэшируемые по умолчанию</td>

<td>cache_default</td>

</tr>

<tr>

<td>Новые документы, кэшируемые по умолчанию</td>

<td>cache_default</td>

</tr>

</table>

<br/>

<a href="[[++manager_url]]?a=12&page=2">Page 2 >></a><br/>

Отметим, что пустые комментарии <!-- --> между двумя открывающими квадратными скобками тегов MODX в чанке. Это предотвращает обработку их MODX как тегов. Это одна из техник, которую можно использовать для отображения тегов MODX на вашем сайте.

Обратите внимание на ссылку внизу этого файла :

<a href="[[++manager_url]]?a=12&page=2">Page 2 >></a><br/>

 Использование обычного тега ссылки здесь не подходит, поскольку вы хотите остаться в панели управления. Вместо этого мы используем URL панели управления, сопровождая его параметром ?a=12, который говорит MODX какое действие (страницу панели управления) загрузить. Важно : для того, чтобы сделать эту ссылку рабочей, вы должны заменить 12 на ID вашего действия CheatSheet (видимого в левом дереве раздела Система->Действия). Поскольку мы создаем ссылку на Page 2, мы передаем через &page=2 второй параметр, который будет считан посредством $_GET['page'] в файле index.php, созданном ранее.

Теперь создадим другой чанк под названием CheatSheet2 и добавим в него следующий код :

<!-- Код для чанка CheatSheet2-->

<h3>Page 2</h3>

<p>Это page 2</p>

<br/>

<a href="[[++manager_url]]?a=12&page=1">Page 1>></a><br/>

Этот чанк пока не имеет пока какого-либо реального контента. Мы создали его, чтобы показать как создавать несколько связанных пользовательских страниц. Обратите внимание на обратную ссылку на Page 1 внизу. Не забудьте заменить 12 на тот же ID, который вы использовали в другом чанке, иначе ссылка работать не будет.

Теперь, для красоты нашей шпаргалки давайте добавим CSS файл. Мы уже создали в нашем файле index.php код для добавления CSS в раздел <head>  нашего документа. Создайте файл cheatsheet.css в этом каталоге :

 assets/components/cheatsheet/

Добавьте в этот каталог следующий файл :

/* Код для файла cheatsheet.css */

div.cheatsheet table {

border: 3px solid #5e5e5e;

margin: 0;

padding: 20;

text-align: left;

width: 50%;

}

div.cheatsheet th {

background-color:#ccc;

padding: 10px;

border: 1px solid #ccc;

font-weight: bold;

}

div.cheatsheet td {

background-color:#ffffff;

padding: 10px;

border: 1px solid #cccccc;

}

Если вы перегрузите страницу панели управления, вы должны увидеть пункт верхнего меню "Компоненты" в верхнем меню и подменю Cheat Sheet в нем. Если вы выберете этот пункт подменю, вы должны увидеть нашу шпаргалку в правой части панели управления.

Вы можете экспериментировать с дизайном и стилевым оформлением страниц шпаргаки. Противники использования таблиц можут возражать относительно использования их здесь, но в конце концов мы  отображаем табличные данные. Форматирование их без использования таблиц внутри панели управления может быть непростой задачей. Если бы мы захотели иметь возможность редактирования таблицы и, дополнительно, корректировки базы данных, мы должны бы были использовать Smarty и MODExt.

Почему наш файл CSS расположен в разделе assets/components/cheatsheet а не в файле index.php в core/components/cheatsheet ? Дело в том, что файлы CSS должны быть доступны через URL. Если файл CSS будет расположен в директории core и эта директория будет перенесена из корневого каталога в целях безопасности, то файл cheatsheet.css больше не будет доступен.

Более сложные пользовательские страницы панели управления

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

Создание более сложных пользовательских страниц обычно предполагает использование шаблонизатора Smarty и MODExt, расширения ExtJS, которое является частью MODX. Вы можете узнать больше относительно Smarty на сайте a . Информацию относительно MODExt можно найти в он-лайн документации MODX. Вы можете научиться создавать продвинутые пользовательские страницы, изучая код таких транспортных пакетов, как Doodles, Quip, Batcher или Gallery. Шон Мак Кормик (Shaun McCormick) также создал руководство по созданию компонент MODX сторонними разработчиками, в котором в качестве примера используется Doodles.

Отметим, что теги MODX (например, теги сниппета и чанка) в HTML-коде пользовательской страницы не будут обрабатываться, а ссылки в чанках будут обрабатываться, если вы будете осуществлять доступ к ним при помощи $modx->getChunk().

Ссылки на другие страницы сайта будут вести вас из панели управления и при этом эти страницы будут отображаться в полноэкранном режиме, если вы не включите в путь /manager, как мы делали это ранее и укажите параметр ?a=параметр, чтобы указать MODX какое действие выполняется. Обычно это является предпочтительным методом, но вы также можете создавать отдельные действия для каждой страницы и связывать страницы с ними, используя ID каждого действия в ?a=параметр.

Назад