Обучение основам MIGX MODX Revolution. MIGX создание фотогалереи

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

MIGX поможет сделать это все, и даже больше. Он предоставляет MODX ресурсам возможность быть использованными в качестве контейнеров данных, по типам. Он позволяет обычной MODX Template Variable (TV, Шаблонная переменная) быть контейнером для других Template Variables (Шаблонных переменных) или произвольных входных данных в форме строковой JSON. Визуально это выглядит как координатная сетка, выводящая администратору список ячеек данных. Администратор может создавать, редактировать и удалять записи, изменять порядок отображения, перемещая записи вверх-вниз, используя AJAX. Все это было придумано Бруно Пернер (Bruno Perner).

В моем короткой обучалке я создам шаблонную переменную (Template Variable, TV) MIGX , которая позволит администратору контролировать область загрузки Pdf-файлов на сайте. Этот достаточно простой пример продемонстрирует (я надеюсь) основные принципы работы с данным приложением. Итак, начнем.

Замысел: На нашей главной странице мы хотим иметь box, в котором будут отображаться Pdf-файлы наших клиентов в виде ссылки для загрузки. Это могут быть официальные документы, или подробная информация о продукте, или что-то еще.

Первое, что мы должны сделать, так это обратиться к package manager и установить MIGX. Сделано? Замечательно!

Теперь нужно создать нашу Template Variable, которую мы будем использовать для хранения MIGX JSON. Я обычно называю ее “pdf.migx”.

Традиционно даю ссылку на документацию (RTFM):

http://www.modx.cc/documentation/additions/migx/

Шаг 1: Установка нашего MIGX TV

Итак, мы уже назвали нашу шаблонную переменную TV “pdf.migx”. Теперь перейдем на вкладку “Input Options” и выберем входной тип “migx”. Благодяря этому станут доступны некоторые специальные конфигурационные опции. Для нас важны две из них: “Form Tabs” и “Grid Columns”. Здесь мы перейдем к формированию интерфейса координатной сетки, которую администратор будет использовать для нашего ресурса.

Form Tabs: Здесь мы зададим то, какие переменные администратор сможет сохранять и какой текст мы будем использовать для меток в этой форме. В виде JSON строки.

Вот что вы можете вставить в область:
[ {"caption":"Title", "fields": [ {"field":"title","caption":"Title"} ]}, {"caption":"PDF", "fields":[ {"field":"pdf","caption":"PDF file","inputTV":"download.pdf"} ]} ] 
Это создаст 2 вкладки в нашем интерфейсе. Первая называется “Title”. Этот текст будет использоваться в качестве ссылки, ведущей на данную вкладку в клиентском интерфейсе. Вторая называется “PDF”. Сюда администратор сможет загружать pdf. Вы могли бы иметь оба “входа” информации на одной вкладке, но я хотел продемонстрировать, каким образом MIGX автоматически создает вкладки. Вам нужно задать имя в первом поле “caption”. Ниже caption есть другое свойство, названное “fields”. Здесь вы можете задать, какие переменные может вводить администратор. В первом случае мы имеем только одну входную переменную названную “Title”. Вы зададите имя поля позже, когда у вас будет доступ из клиентской части. Теперь задайте caption, а затем задайте, где будет храниться наша шаблонная переменная Template Variable. Т.к. title – это всего лишь текстовая запись, вам не нужно задавать ее свойства, оставьте все по умолчанию. Вам также не нужно создавать отдельную TV для данной переменной, т.к. это будет сохранено в строке JSON.

Вторая область для входных данных (или вкладка) называется “PDF”. Caption – обычный текст, который будет выводиться в интерфейсе администратора. Поле, используемое в шаблоне для клиентской части интерфейса, называется “pdf”, и поэтому caption будет содержать “PDF file”. В нашем случае мы хотим, чтобы администратор мог загрузить pdf файл в медиа браузер MODX, поэтому нам нужно назначить для этого Template Variable / Шаблонную переменную. Мы назовем данную TV “download.pdf”. “inputTV” – параметр, который мы связываем с именем TV.

После того, как это сделано, нам нужно сформировать первоначальную координатную сетку, которую будет видеть администратор.

В данном случае мне нужно только одно поле для отображения на координатной сетке – title pdf. Если у нас есть изображение, то нам может потребоваться две колонки (Title, Image). Обучающие материалы, как сделать галерею на базе MIGX, можно посмотреть по ссылке: http://www.modx.cc/documentation/additions/migx/

Просто вставьте это в секцию “Grid Column”:
[ {"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title"} ]
Это дает нам таблицу, состоящую из одной колонки, с заголовком “Title”. Вы можете задать ширину колонки, или позволить администратору сортировать колонки и т.д.

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

Шаг 2: Задаем pdf Template Variable / Шаблонную переменную

Для любого, уже знакомого с MODX, этой фразы было бы достаточно. Создайте новую TV, названную “pdf.download”, точно так же, как в предыдущем шаге. Наш входной тип в этом случае - “file” и мы можем ассоциировать с ним те медиа ресурсы, которые хотим. Единственное, что отличается, так это то, что мы НЕ связываем TV с шаблоном / template. Доступ к данной TV осуществляется только через MIGX.

Шаг 3: Как этим все пользоваться?

Теперь перейдите к ресурсу, который ассоциирован с шаблоном, который ассоциирован с нашей MIGX TV. Все понятно? Возможно, вы ассоциировали нашу MIGX TV с категорией “PDF Download”. Теперь поищите нашу TV под этой категорией. Или, может быть, вы не ассоциировали TV с категорией, и попробуйте поискать в категории “uncategorized”. Теперь вы должны увидеть начало координатной сетки. Вы видите кнопку “Add item” и заголовок “Title”. Для того, чтобы добавить запись – кликните по “Add item”. Здесь вы вводите наш title для ссылки, откуда следует загружать, а также ссылку на pdf файл. Поэтому, возможно, придется создать несколько записей. Попробуйте поперемещать записи вверх-вниз, изменяя их порядок на координатной сетке. Здорово? Я люблю этот addon!

Шаг 4: Переходим в клиентскую часть

Мы закончили производить все настройки в служебной области. Ваш администратор может загружать такие pdf файлы, какие захочет, и задавать для каждого title. Замечательно. Теперь нужно запустить сниппет, который поставляется в комплекте с MIGX, это нужно для обеспечения доступа к нашим данным.

Разместим box внутри чанка. В чанке должен быть следующий код:
[ [getImageList? &amp;tvname=`pdf.migx` &amp;tpl=`downloadTpl` &amp;docid=`1`] ]
Сниппет, который мы используем, называется “getImageList. Он обладает множеством свойств, узнать поподробнее о которых вы сможете, перейдя по ссылке:

http://www.modx.cc/documentation/additions/migx/

Для нас самыми важными свойствами являются “tvname” and “tpl”. Если вы хотите использовать этот чанк на других страницах, вам нужно ассоциировать ID ресурса, содержащего данные. Это производится с помощью свойства “docid”. Я использую ID 1, т.к. это выполняется на главной странице. Если box будет отображаться только на странице, на которой находится MIGX TV (для главной страницы ID=1), то это свойство может быть удалено. Второе свойство, которое может представлять интерес для нас, это “limit” или “&limit=´5´” (для примера). Это свойство ограничивает выходные данные первыми 5 на координатной сетке.

Вы наверно, обратили внимание, что я сослался на шаблонный чанк “downloadTpl”. Этот чанк используется для организации выходного цикла.

Вот код для чанка:
&lt;p class="download"&gt;<a href="[[+pdf]]" target="_blank"&gt;[[+title]]</a></p>
Вы можете выводить элементы чанка в виде неупорядоченного списка, если хотите. Я просто использовал простейший тэг параграфа. На что вы должны обратить внимание, так это на то, что вы используете плейсхолдер и . Это в точности такие же имена, которые мы ассоциировали со свойствами нашего поля данных в шаге 1.

Теперь наш вызываемый сниппет имеет доступ к нашей MIGX TV, получает JSON string, считывает данные с помощью его, и формирует чанк для каждого отдельного случая.

Вот так оно и должно работать. Теперь вам нужно написать CSS и сделать так, что бы все это выглядело красиво.

Заключение

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

Я обнаружил одно ограничение в MIGX – когда использовал входной TV тип “Rich Text” для одной из входных переменных. Т.к. TinyMCE достаточно “тяжел” для javascript, иногда возникают проблемы с сохранением данных.