Контактная информация

По всем интересующим вас вопросам связывайтесь при помощи контактной информации приведенной на этой странице!

skype: metsof
email: accusser@gmail.com

В социальных сетях...

Форма обратной связи

Авторизация

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

Сайдбар

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

10 марта 2013

Вашим клиентам постоянно нужно пространство для добавления фото и их описаний в фотогалерее, нужно создавать перечни служебной контактной информации, требуется область для загрузки 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  строки.
Вот что вы можете вставить в область:
 
<code>[ {"caption":"Title", "fields": [ {"field":"title","caption":"Title"} ]}, {"caption":"PDF", "fields":[ {"field":"pdf","caption":"PDF file","inputTV":"download.pdf"} ]} ] </code>
 
Это создаст 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”:
 
<code>[ {"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title"} ]</code>
 
Это дает нам таблицу, состоящую из одной колонки, с заголовком “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 внутри чанка. В чанке должен быть следующий код:
 
<code>[ [getImageList? &tvname=`pdf.migx` &tpl=`downloadTpl` &docid=`1`] ]</code>
Сниппет, который мы используем, называется “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”. Этот чанк используется для организации выходного цикла.
 
Вот код для чанка:
 
<code><p class="download"><a href="[[+pdf]]" target="_blank">[[+title]]</a></p></code>
 
Вы можете выводить элементы чанка в виде неупорядоченного списка, если хотите. Я просто использовал простейший тэг параграфа. На что вы должны обратить внимание, так это на то, что вы используете плейсхолдер и . Это в точности такие же имена, которые мы ассоциировали со свойствами нашего поля данных в шаге 1.

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

Заключение


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






Комментарии (2)

  1. Evgeny 24 июня 2015, 20:44 # 0
    Здравствуйте. Подскажите пожалуйста, как можно передать данные из MIGX допустим в сниппет eventsCalendar2 в качестве JSON. У eventsCalendar2 есть &events — вот что туда передать я так и не понял.
    &events=`[{\«id\»: \«1\»,\«date\»: \«2012-01-01 00:00:00\»,\«pagetitle\»: \«Test page\»},{\«id\»: \«2\»,\«date\»: \«2012-01-02 12:05:00\»,\«pagetitle\»: \«Test page 2\»}]`
    1. Лесь 16 августа 2016, 19:23 # 0
      Добрый вечер.

      можно как то зафиксировать данные введенные в слайдер migX, что бы можно было сразу дублировать на другие страницы, а не только на одну.

      Услуги по MODX Revolution

      Посмотреть все услуги

      Техническая оптимизация сайта

      Подробнее & Заказать

      Создание сайта на MODX Revolution

      Подробнее & Заказать

      Перенос сайта на MODX Revolution

      Подробнее & Заказать

      Продвижение сайта на MODX

      Подробнее & Заказать