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

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

skype: metsof
email: accusser@gmail.com

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

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

Авторизация

MODX статьи, уроки и готовые решения для MODX Revo

Сайдбар

Обучение основам 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

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