Modx migx: MIGX — MIGX | MODX Documentation

Содержание

Урок 14. Использование MIGX. Создание таблицы MODX

Конфигурация MIGX TV

Допустим нам нужна простая таблица с распорядком работы магазина и время, когда он открывается/закрывается. Создайте новую TV (назовём её «operatingHours») используя Тип ввода MIGX TV(подразумеваю, что вы уже установили пакет MIGX через Система -> Управление дополнениями)

Я сделаю это через быстрое создание ТВ, вот как это выглядит:

Используйте следующий код для Вкладок формы. Вы увидите, что я написал JSON немного по-другому, чем автор MIGX плагина, но если синтаксис JSON правильный — значит всё в порядке.

Итак, код для Вкладок формы:

Даём имя для описания вкладки «Operating Hours» и далее добавляем три поля к ней: день, начало и конец работы. Мы не определяем тип ввода, просто подразумеваем, что это текстовое поле.

Теперь для вывода этого в панели ресурса, нам нужно установить Разметку колонок. Мы используем следующий код для этого:

Вставьте код приведенный выше в поля ТВ operatingHours:

Мы установили три колонки («Day», «From» и «Until»), определили их ширину и соответствующий dataIndex (который должен быть тем же самым как и значение «поля» в форме) и также указываем, что он не должен сортироваться.

Наконец мы определили замену для «Add Item» в моём случае – это «Добавить новую строчку «.

В менеджере при открытии ресурса, шаблону которого доступно данное поле operationgHours вы теперь можете увидеть следующую картину:

Создайте несколько рядов и добавьте в них нужные данные:

Парсинг данных

Теперь на сайте мы должны вывести эти данные используя сниппет getImageList, который идёт вместе с MIGX дополнением.

Ниже приведен вызов сниппета, который нужно поместить в ваш шаблон в нужное для этого место:

Как видно на рисунке — я поместил вызов этого сниппета в поле Content, а для вывода его использовал обычный шаблон Base Template, который идёт вместе с базовой установкой MODX Revolution.

Это проверит TV operatingHours и спарсит её значения чанком operatingHoursTpl.
Вот чанк, который мы использовали:

В основном мы выводим табличный ряд для каждого ряда ТВ и помещаем соответствующие значения. В конце, когда уже значение from пусто, выводятся две колонки с текстом «Closed».

Результат

Демо

Это всего лишь маленький пример того, что можно сделать с помощью MIGX! Конечно же, можно сделать намного больше добавили больше колонок, других форм и т.д. Мы об этом поговорим в следующих уроках.

При работе над уроком использовал RTFM MIGX

Урок 15. Создание слайдера с помощью MIGx TV MODX

В этом занятии мы рассмотрим основы MIGX и поработаем над новым слайдером, который можно использовать в своём блоге.

Конечный результат того, что мы сделаем, будет приблизительно такой слайдер

Требования:

MODX Revolution сайт.

Установлен MIGX пользовательский тип Переменных шаблона (через управление пакетов).

Слайдер или скрипт галереи, который бы мы хотели интегрировать. Я использовал FlexSlider студии WooThemes так как он подгоняет себя под ширину контейнера (что очень важно для отзывчивого дизайна!). Также он легко конфигурируем, поддерживает прокрутку на смартфонах и выглядит просто отлично без доработок.

Установленный сниппет phpthumbof через Менеджер пакетов для автообрезания изображений.

Какие-либо изображения!

Начинаем

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

Шаг 1:Установка MIGX TV для управления изображениями

Давайте начнём с установки TV. Сила MIGX в том, что вы можете определять нужные вам поля. Вы будете видеть их как таблицу и нужно лишь дать названия заголовкам. В этом случае мне нужны будут три разных поля:

Поле ввода для выбора изображения в файловой системе (или в 2.2 от ваших медиа источников).

Поле ввода текста для ввода подписи / тега / описания. FlexSlider отлично справляется с подписями, поэтому будем их и использовать.

Также я добавил ввод текста для «Set». Как мы позже увидим, я им воспользуюсь для бесконечного количества отдельных слайдеров, которые будут добавляться из любой точки ресурса..

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

Давайте перейдём к созданию TV. Вот слайдер с описанием изображений (для случая, если в миниизображении ничего не видно).

Создайте новую переменную шаблона во вкладке «Элементы» и дайте ей соответствующее название. Я назову её ws.images, если вы дадите ей своё название, то не забудьте заменить [[*ws.images]] на ваше название. Во вкладке Тип ввода (Input Options) выберите тип «migx» из выпадающего меню. Если вы не видите этот тип, то проверьте установили ли вы MIGX пакет через Управление дополнениями (Package Manager). Вы заметите, что несколько опций было добавлено внизу экрана, включая Вкладки формы (Form Tabs) и Разметка колонок (Grid Columns). Данное применимо к версии MODX >2.0, для более ранних версий рекомендую обновиться.

Обратите внимание: поля «Вкладки формы» (Form Tabs) и «Разметка колонок» (Grid Columns) должны быть заполнены корректными JSON строками. JSON – это в общем способ показа объектов, массивов или комбинаций ключ -> значение способом, который поддерживает почти любой язык программирования. Вот техническая спецификация и несколько примеров с официального сайта JSON.

Установка Вкладок формы

Форма позволяет использовать различные вкладки. Каждая вкладка имеет описание и несколько полей. Вы можете сделать много продвинутых вещей с этим, так как в большинстве случаев будете использовать одиночную вкладку, поэтому сейчас запомните просто на будущее. Вот JSON код для Вкладок формы (Form Tabs), который я использую:

Давайте пройдёмся по каждой строчке:

Первая – показывает открытие массива вкладок квадратной скобкой ( [ ), и открывающийся объект вкладки фигурной скобкой ( { ). После этого мы определяем подпись (caption) поля Image. Обратите внимание, что нужно использовать двойные кавычки ( » » ) для свойств и их значений, одинарные могут привести к неожиданным результатам. Если у вас эти скобки попадутся в любых свойствах, значениях, экранируйте их слешем ( \ ). После определения описания (caption) давайте продолжим и начнём определять массив «полей», открывая его квадратными скобками ( [ ).

Мы определим наше первое поле как set. «field»: “set”, значит, что мы хотим иметь в этом поле ввод обычного текста. “Caption”:”Set” – мы даём описание названия «set» – это будет название для ввода обычного текста. Далее дадим ему подпись «Set», которая будет показана в форме как метка поля.

Далее определим поле описания таким же образом

4 строчка определяет изображение. Что здесь особенного – мы используем еще одну ТВ (с именем «image») как тип ввода. Это очень сильная особенность MIGX, которая позволяет вам использовать другие ТВ для построения вашей формы. В этом случае ТВ «image» очень проста: тип ввода – изображение, и в 2.2 вы можете назначать её к правильному медиа источнику. Вам не нужно связывать её с шаблонами как нужно делать в случае с обычной ТВ. Другой способ, сделать это (который я использую в других MIGX TV) – это сделать радио-боксы или селект-боксы.

Пятая строка закрывает массив полей. Также обратите внимание, что последняя строчка определяющая поле (изображение) не заканчивается запятой – это важно! Если вы поставите запятую в массиве, он JSON не будет обработан и ваша форма не будет работать.

Шестая строка закрывает объект-вкладку и весь массив вкладок.

Итак, таким образом мы создали «image» TV! У вас должна уже работать форма для заполнения данных, но для их показа нужна разметка…

Установка Разметки колонок

Разметка колонок – это таблица на ТВ панели ресурса. Вам нужно определить заголовки для этой таблицы через опции ввода Разметки колонок.
Вот (снова JSON) определение, что я использую:

Пройдёмся по каждой строке:

Открываем массив заголовков квадратными скобками ( [ ) и заголовок пятой колонки фигурной скобкой ( { ).

Даём название заголовку «Set» указываем, что он может сортироваться (sortable) и указываем параметр «set», что отвечает определению Набор вкладок формы (Set Form Tabs), которые имеют «field»:»set».

Конец Set / начало Description

Даём название заголовку «Description», сортируемый и сопоставляем его с полем description dataIndex.

Конец Description / начало Image

Дайте название заголовку «Image», несортируемый и сопоставьте его с полем dataIndex — image. Также определим рендерер, который в ExtJS позволит вам изменить вид выводимых данных. В данном случае «this.renderImage» рендерер автоматически возьмёт урл выбранного изображения и сформирует миниатюру вместо него.

Окончание объекта Image и массива заголовков.

После этого вы можете назначить эту MIGX TV к вашему шаблону и проверить результат работы. Не показывается разметка? Идите назад к вкладкам и убедитесь, что все значения заключены в двойные кавычки, а не одинарные и проверьте нет ли лишних запятых.

Информация

Для проверки JSON используйте JSONLint.

Далее всё просто:

Заполните данные

Выведите данные на сайт

Заполним произвольными данными нашу переменную шаблона ws.image

Если вы попытаетесь вывести эти данные как обычную ТВ, то увидите приблизительно следующее:

Это JSON массив с введенными полями и значениями!

Так как MIGX идёт в комплекте со сниппетом getImageList можете попытаться вывести данные с его помощью. Документацию по данному сниппету можете найти здесь. Либо сделать свой сниппет (parseMIGXToGallery), который я использую для генерации разметки из &tpl чанка, базируясь на ТВ данных:

Давайте пройдём каждую строчку:

Берём переменную $input (которая берёт данные содержащиеся в параметре &input в вызове сниппета, об этом немного позднее) и парсит JSON в пхп-массив.

Мы установим пустой массив для хранения нашего вывода.

Убедимся, что переменная $input variable не NULL или Ложь, что бы значило, что JSON не передан или что он неправильный, а также проверим $tpl переменную (переданную параметром &tpl в вызове сниппета) не пуста ли она. Если какое либо условие Истина мы выведем сообщение об ошибке «пусто’, что послужит подсказкой для контент-менеджера, что что-то неправильно.

Далее проход через каждый элемент массива $input как $row.

Проверяем установлена ли переменная $set (которая устанавливается в вызове сниппета в параметре &set) и если она не пуста мы сверяем её значение со значением «set» текущего ряда. Если это не то, что нужно переходим к следующему элементу массива.

Получаем чанк с именем $tpl и вставляем значения текущего ряда в него в виде заполнителей (плейсхолдеров).

Закрываем цикл foreach.

Наконец склеиваем вместе массив $output, отделяя каждый элемент разрывом строки и выводим его на страницу.

Итак суммируя вышесказанное мы берём введенные данные, проходим по каждому ряду и проверяем принадлежат ли они к набору, что мы определили, далее это получает чанк и складывается всё в вывод.

Запуск сниппета

Всё, что нам нужно – это сниппет вызов, где нам нужны наши изображения и чанк, который выведет всё в нужном виде для FlexSlider. Вот как вызывается сниппет:

И чанк images.gallery.tpl:

Также нужно обернуть весь вывод сниппета в div и неупорядоченный список, согластно документации FlexSlider. Чтобы сделать это всё проще – положим всё это в один чанк. Мой чанк называется slider и содержит следующее:

Используя данный чанк я могу просто ссылаться на что-либо в контенте, что намного легче запомнить или занести в шпаргалку.

Теперь можно приступить к разметке слайдера FlexSlider

Шаг 3: Использование FlexSlider

FlexSlider относительно лёгок в использовании (загрузите его файлы здесь) и есть куча примеров на его сайте. Также вам нужно включить вызов jQuery на странице и его CSS файл (запакован в zip файл) и FlexSlider плагин (также находится в архиве zip). После этого вам нужно инициировать правильный элемент используя следующий код:

На сайте советуют поместить всё в head файла, но я лично размещаю всё это внизу. Если ваш слайдер выводится наверху страницы, то тогда лучше поместить его в <head>, чтобы он загружался перед появлением страницы, поэтому размещайте где вам угодно.

Вот и всё! Надеюсь эта длинная статья поможет кому-то начать использовать MIGX и такие слайдеры как FlexSlider!

Демо

При создании урока использовались материалы блога Марка Хамстры статья How to: Managing Galleries with MIGX

MODX MIGX. Тип шаблонных переменных TV

MIGX что это такое?

MIGX — это дополнительный тип Шаблонной переменной (Template Variable) (TV) для входных данных, объединяющий несколько TV в одну TV. Данное свойство значительно упрощает процесс добавления конечным пользователем комплексных данных в менеджер. Данные могут состоять из неограниченного числа любых других TV, включая текст, изображения, файлы, чекбоксы и т.д.

Приложение обладает высокой настраиваемостью, и позволяет разработчикам создать диалоговое окно для входных данных MIGX TV. С помощью данного диалогового окна данные могут быть добавлены, изменены или переопределены.

Приложение поставляется со сниппетом getImageList, который обеспечивает простое извлечение комплексных данных из входных данных MIGX TV.

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

MIGX поддерживает MultiItemsGridtv для MODX.

Системные требования

MODX Revolution 2.1 rc4 или более новая версия

PHP5 или более новая версия

MIGX может работать на Revolution 2.0.8 с ограниченной функциональностью.

Загрузка

MIGX может быть загружено с помощью менеджера MODx Revolution, используя Package Management, или из хранилища дополнений MODx.

Инструкции по установке

Шаг 1: Установка приложения

Установите приложение, используя вышеприведенную ссылку.

Шаг 2: Задание Страницы конфигуратора MIGX (Configurator Custom Manager Page (CMP)) и Менеджера приложения (Package Manager)

Внимание: Разумно создать копию базы данных MODX перед тем, как этот процесс изменит ее структуру.

Откройте меню «System» из Revolution Manager

Кликните на меню «Actions»

Найдите в списке действий слева раздел MIGX fи кликнете на нем правой клавишей мыши.

Кликните «Create Action Here»

Выберите для контроллера тип «index»

Отметьте для именованной области «migx»

Выберите для контроллера исходных данных «No Action»

Кликните «Save»

Обновите страницу

Найдите раздел Components в списке меню высшего уровня справа, кликните правой клавишей мыши на нем.

Кликните «Place Action Here» и задайте следующие параметры:

Lexicon Key: migx

Description: Configurator and Package Manager

Action: migx — index (Есть несколько страниц, отсортированных в алфавитном порядке, убедитесь , что вы находитесь после всех основных действий.)

Icon: (не заполняйте)

Parameters: &configs=packagemanager||migxconfigs||setup

Handler: (не заполняйте)

Permissions: (не заполняйте)

Кликните «save»

Обновите страницу

Откройте меню «Components»

Кликните для создания элемента на new MIGX Action.

Кликните Setup / Upgrade

ВНИМАНИЕ: Перед выполнением следующего шага вам лучше сделать копию базы данных.

Кликните по кнопке Setup

Сделано!

Обновление до MIGX 2.0

Для правильной работы MIGX 2.0 в таблице базы MIGX должны быть новые поля. Данная процедура добавляет новые поля auto_increment, MIGX_id, необходимые для корректной работы сниппета getImageList. Очень важно делать резервную копию базы данных перед каждым изменением в ней.

Шаг 1: Создание резервной копии базы данных.

Сделайте резервную копию таблицы базы данных, а именно таблицу modx_site_tmplvar_contentvalues.

Шаг 2: Обновление компонентов

Откройте меню «Components» с помощью Revolution Manager

Кликните MIGX Action Item

Кликните закладку Setup / Upgrade

ВНИМАНИЕ: Перед выполнением следующего шага вам лучше сделать копию базы данных.

Кликните по кнопке Upgrade

Сделано!

Использование

Шаг 1: Установите MIGX

Следуйте инструкциям из данного документа.

Шаг 2: Использование служебной области интерфейса

Создайте новый TV и примените его к шаблону.

Шаг 3: Ввод данных

Введите контент в созданный TV.

Шаг 4: Использование клиентской области интерфейса

Используйте сниппет getImageList для отображения контента из нового TV.

MIGX Работа со служебной областью

Как работают дополнительные шаблонные переменные MIGX Custom Template Variable (TV)

MIGX TV позволяют распространять комплексные данные как один TV. Такие объекты распространяются как JSON. Для дальнейшей работы предполагается, что у вас есть необходимые практические навыки работы с JSON.

Каждая единица комплексных данных может содержать полей данных, ассоциированных с ней. Данные поля могут быть (почти) любого стандартного или пользовательского входного MODX TV типа. Эти данные задаются в поле Form Tabs field. Все единицы могут быть отсортированы по закладкам, определенным JSON.

Создание первого MIGX TV

Пример конфигурации MIGX находится здесь: /core/components/migx/examples/. Мы будем ссылаться на «tabs.txt» для вызова этой страницы. Использование данной страницы предполагает, что у вас установлено дополнение TinyMCE.

tabs.txt демонстрирует пример реализации обычной галереи изображений. Галерея изображений будет состоять из одной комплексной единицы данных, использующей один richtext TV (описание изображения), один image TV (само изображение), и короткую строку (подпись). Данная короткая строка не будет храниться в отдельном TV.

Шаг 1: Создание каждого из образующих комплексную единицу данных TV

Шаг 1.1: Создание первого TV

Имя / name «richtextTV»

Тип / type «richtext»

Права доступа /template access: не нужно назначать никаких прав доступа

Шаг 1.2: Создание второго TV

Имя / name: «imageTV»

Тип / type: image

Права доступа/ template access: снова не нужно заботиться о назначении прав доступа

Шаг 2: Создание объединенного MIGX TV

Заполните имя, подпись, описание, категорию точно также, как делает это для любого другого TV

Назначьте права доступа к шаблону для любого объекта, которому нужно будет добавлять данные. В этом примере это, возможно, «Gallery»

Выберите MIGX как тип входных данных.

Шаг 3: Конфигурирование входного типа MIGX

Для вашего первого MIGX TV, нас интересуют только два текстовых поля: «Form Tabs» (Закладка формы) и «Grid Columns» (Столбцы сетки)

Шаг 3.1 Form Tabs

Form Tabs определяет структуру, согласно которой конечный пользователь будет использовать для введения своих данных.

Содержание tabs.txt:

[

{"caption":"Info", "fields": [

    {"field":"title","caption":"Title"},

    {"field":"description","caption":"Description","inputTV":"richtextTV"}

]},

{"caption":"Image", "fields":[

    {"field":"image","caption":"Image","inputTV":"imageTV"}

]}

]

Этого слишком много для JSON – давайте уменьшим. Первая метка, которую мы видим, озаглавлена как «Caption». Она отсылает к имени первой закладки. Закладка будет называться «Info».

Вторая метка, которую мы видим, озаглавлена как «fields». Она отсылает к каждому из полей, которые будут доступны из данной закладки. Поля хранятся как включенные JSON строки string. Давайте уберем это.

Первая строка их включенных в JSON озаглавлена «field». Она отсылает к плейсхолдеру, который MIGX будет генерировать и к которому мы позже будем обращаться с помощью getImageList. Первую метку мы назвали «title». Она отсылает нас к короткой строке, упомянутой выше. Вторая метка называется «caption». Она отсылает к метке, которую конечные пользователи увидят, когда они будут вводить данные. Давайте назовем ее «Title», чтобы наши пользователи знали, что они заполняют заголовок изображения.

Вторая метка, включаемая в JSON, озаглавлена «description». Сейчас мы имеем три метки: первая, «field», отсылает к плейсхолдеру, который мы рассмотрим позже. Вторая, «caption», ярлык которой пользователь будет видеть. Третья, «inputTV», отсылает к имени TV, созданному выше в шаге 1.1. Это имя «richtextTV», поэтому его мы и впишем здесь как имя TV.

Мы закончили с первой вложенной в JSON строкой. Сейчас мы видим, что есть вторая закладка – созданная выше в шаге 1.2 и содержащая TV изображения и названная «Image».

Мы прошли половину пути с нашим первым MIGX TV. Теперь создадим форму для каждой индивидуальной единицы данных. Метки каждого поля для более удобного использования перечислены в таблице ниже. Давайте приведем краткий обзор данных, использующих Grid Columns в Шаге 3.2

Метка

Описание

field

Имя плейсхолдера для использования с getImageList и шаблоном

caption

Подпись в форме, которую видит конечный пользователь

description

Описание формы, ели пустое, то MIGX будет использовать описание их входных данных, если таковое имеется.

inputTV

Выбирается один из двух, или inputTV или «inputTVtype». Если используется inputTV , задайте имя того TV, который вы хотите использовать. Это полезно использовать, если тип ваших данных требует дополнительную функциональность (т.е., значение по умолчанию, выходные опции т .д.). Можно использовать один и тот же входной TV для различных полей (т.е. если ваш объект содержит множество изображений).

inputTVtype

Выбирается один из двух, или inputTVtype или «inputTV». Если используется inputTVtype, задайте имя того TV, который вы хотите использовать. Это полезно использовать, если тип ваших данных не требует дополнительной функциональности.

Шаг 3.2 Grid Columns (Столбцы сетки)

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

Содержимое columns.txt:

[

{"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title"},

{"header": "Image", "width": "50", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"}

]

Вот еще немного упражнений с JSON! Этот JSON отображает подпись изображения и его превью. Давайте разберем это.

Первая метка, «header», отсылает к заголовку ярлыка, использующегося для классификации четвертой метки, «dataIndex». dataIndex отсылает к плейсхолдеру, который мы задали выше в закладке форме. Первая запись здесь использует dataIndex, который мы задали выше как «title». Также у нас есть еще две метки — ширина и соответствие. Ширина задает относительную ширину столбца, а соответствие определяет соответствие сетки этому столбцу.

Вторая запись имеет пятую метку: renderer. Эта метка позволяет нам вывести изображение.

Теперь мы закончили задавать наш первый MIGX TV. Как самочувствие, все в порядке? Убедитесь, что вы кликнули на save.

Не забывайте сохранять ваш Ресурс после редактировании или добавления элементов!

Теперь мы на середине нашего MIGX урока. Следующий шаг: Data Entry (ввод данных)

Метки для данной сетки описаны здесь:

Метка	Описание
header	Заголовок столбца
sortable	Возможность соответствия / сортировки кликом по header
dataIndex	Поле, которое вы хотите вывести в данный столбец
renderer	Можно использовать renderer для каждого столбца. К примеру, есть встроенная функция «this.renderImage». Она будет выводить изображение – превью в ячейке сетки, если будете использовать image-TV для данного поля.

Расширенное конфигурирование MIGX

Множественные формы

Содержимое switchFormTabs.txt

Здесь мы имеем дополнительный внешний массив с двумя метками.

Метка	Описание
formname	Дает каждой форме уникальное имя. Это значение, которое будет видно в сгенерированном выпадающем меню для переключения формы.
formtabs	Это закладка форма для данной формы.

При использовании множественных форм будет создаваться дополнительное поле с именем ‘MIGX_formname’.
Можно использовать значение данного имени для переключения шаблонов из клиентской области используя &tpl=`@FIELD:MIGX_formname` и создавать чанки с теми же именами, как и имена формы, также можно добавлять дополнительное поле (например listbox-TV) с именем шаблона для выбора выходного шаблона для этого элемента.

Опция превью

MIGX включает возможность превью,что позволяет видеть выводимые объекты в окне iframe. Для того,чтобы использовать данную опцию, нужно создать превью ресурс с контентом наподобие:

Если у вас множественные вызовы в ресурсе-превью, вам может также понадобиться уникальное значение для каждого TV в ‘Preview JsonVarKey’ – по умолчанию это ‘migx_outputvalue’

После того, как вы заполните поле ‘Preview Url’, вы получите дополнительную кнопку в вашем MIGX-TV, с помощью которой будет вызываться окно превью с контентом вашего превью-ресурса.

Обучение основам 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&gt;<a href="[[+pdf]]" target="_blank"&gt;[[+title]]</a></p>

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

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

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

Заключение

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

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

`WEB разработка | Мультизагрузка изображений в админке MODX Revolution при помощи MIGX`

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

`Шаг 1. Создаем динамический медиа-источник.`

В админке переходим в раздел Медиа — Источники файлов.

Создаем новый источник файлов со следующими параметрами:

Имя: ResourceMediaPath

Тип источника файлов: Файловая система

Редактируем созданный источник файлов:

прописываем значения для basepath и baseurl: migxResourceMediaPath? &pathTpl=`assets/resourceimages/{id}/` &createFolder=`1`

Вам также может потребоваться создать каталог с разрешениями на запись для php: assets/resourceimages/

`Шаг 2. Создаем переменную (TV)`

Закладка «Общая информация»

Имя: resourcealbum

Закладка «Параметры ввода»

Тип ввода: migx

Конфигурации: resourcealbum

Закладка «Доступно для шаблонов»

Отмечаем нужный шаблон, к которому будет привязана переменная

Закладка «Источники файлов»

Для вашего контекста (по умолчанию — web) укажите источник файлов ResourceMediaPath

`Шаг 3. Создаем конфигурацию`

Переходим: Приложения->MIGX->Закладка: MIGX

Создаем новую конфигурацию кликом по «Добавить элемент»

Жмем ‘Выполнено’ для сохранения конфигурации

Кликаем правой кнопкой мыши по созданной конфигурации и выбираем ‘Экспорт/импорт’

Вставляем в поле Json следующий код:

{
  "formtabs":[
    {
      "MIGX_id":71,
      "caption":"Image",
      "print_before_tabs":"0",
      "fields":[
        {
          "field":"title",
          "caption":"Title",
          "MIGX_id":327,
          "pos":1
        },
        {
          "MIGX_id":329,
          "field":"description",
          "caption":"Description",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"test",
          "useDefaultIfEmpty":"0",
          "pos":2
        },
        {
          "MIGX_id":330,
          "field":"showBtn",
          "caption":"Show button",
          "description":{
            "field":"showBtn",
            "caption":"Show button",
            "inputTV":"showBtn"
          },
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"checkbox",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"yes==yes",
          "default":"yes",
          "useDefaultIfEmpty":1,
          "pos":3
        },
        {
          "MIGX_id":425,
          "field":"image",
          "caption":"Image",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"image",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"none",
          "sourceFrom":"migx",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "useDefaultIfEmpty":"0",
          "pos":4
        }
      ],
      "pos":1
    }
  ],
  "contextmenus":"edit_migx||duplicate_migx||remove_migx_and_image||movetotop_migx||movetotop_bottom",
  "actionbuttons":"loadfromsource||uploadfiles",
  "columnbuttons":"",
  "filters":"",
  "extended":{
    "migx_add":"Add Image",
    "disable_add_item":1,
    "add_items_directly":"",
    "formcaption":"Image",
    "update_win_title":"",
    "win_id":"resourcegallery",
    "maxRecords":"",
    "addNewItemAt":"bottom",
    "multiple_formtabs":"",
    "multiple_formtabs_label":"",
    "multiple_formtabs_field":"",
    "multiple_formtabs_optionstext":"",
    "multiple_formtabs_optionsvalue":"",
    "actionbuttonsperrow":4,
    "winbuttonslist":"",
    "extrahandlers":"this.handleColumnSwitch",
    "filtersperrow":4,
    "packageName":"",
    "classname":"",
    "task":"",
    "getlistsort":"",
    "getlistsortdir":"",
    "sortconfig":"",
    "gridpagesize":"",
    "use_custom_prefix":"0",
    "prefix":"",
    "grid":"",
    "gridload_mode":1,
    "check_resid":1,
    "check_resid_TV":"",
    "join_alias":"",
    "has_jointable":"yes",
    "getlistwhere":"",
    "joins":"",
    "hooksnippets":"",
    "cmpmaincaption":"",
    "cmptabcaption":"",
    "cmptabdescription":"",
    "cmptabcontroller":"",
    "winbuttons":"",
    "onsubmitsuccess":"",
    "submitparams":""
  },
  "columns":[
    {
      "MIGX_id":1,
      "header":"ID",
      "dataIndex":"MIGX_id",
      "width":10,
      "renderer":"",
      "sortable":"false",
      "show_in_grid":1
    },
    {
      "MIGX_id":2,
      "header":"Title",
      "dataIndex":"title",
      "width":20,
      "sortable":"false",
      "show_in_grid":1,
      "renderer":"",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":"",
      "editor":"this.textEditor"
    },
    {
      "MIGX_id":3,
      "header":"Image",
      "dataIndex":"image",
      "width":20,
      "renderer":"this.renderImage",
      "sortable":"false",
      "show_in_grid":1
    },
    {
      "MIGX_id":4,
      "header":"Published",
      "dataIndex":"published",
      "width":"",
      "sortable":"false",
      "show_in_grid":1,
      "renderer":"this.renderSwitchStatusOptions",
      "clickaction":"switchOption",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":[
        {
          "MIGX_id":1,
          "name":"published",
          "use_as_fallback":1,
          "value":1,
          "clickaction":"switchOption",
          "handler":"",
          "image":"assets\/components\/migx\/style\/images\/cb_ticked.png"
        },
        {
          "MIGX_id":2,
          "name":"published",
          "use_as_fallback":"",
          "value":1,
          "clickaction":"switchOption",
          "handler":"",
          "image":"assets\/components\/migx\/style\/images\/cb_ticked.png"
        },
        {
          "MIGX_id":3,
          "name":"unpublished",
          "use_as_fallback":"",
          "value":"0",
          "clickaction":"switchOption",
          "handler":"",
          "image":"assets\/components\/migx\/style\/images\/cb_empty.png"
        }
      ],
      "editor":""
    }
  ]
}

`Готово, можно использовать`

Теперь вы сможете создавать ресурсы-галереи, использовать пакетную загрузку изображений и синхронизировать элементы MIGX с вашими файлами. Для вывода изображений в Front-end используйте стандартные средства MIGX — getImageList:

[ [getImageList?
  &tvname=`resourcealbum`
  &tpl=`@CODE:<h4></h4><img src="" />`
  &where=`{"published":"1"}`
]]

Либо используйте внешний чанк, если предполагается обработка изображений при помощи phpthumb или что-то типа того:

[ [getImageList?
  &tvname=`resourcealbum`
  &tpl=`imageTpl`
  &where=`{"published":"1"}`
]]

Есть нюанс, достаточно неприятный: файлы сохраняются в папку assets/resourceimages/{id}/, но id у ресурса появится только после того, как ресурс будет сохранен. То есть если вы создадите ресурс и попытаетесь загрузить изображения — все они загрузятся в корень сайта. Это плохо. Чтобы не допустить подобного, спрячем наше поле и будем показывать его только для сохраненного документа. В тот момент, когда поле спрятано — отображаем вместо него сообщение с призывом сохранить документ. Встроенного механизма для отображения подобных сообщений в MODX нет, поэтому используем костыль:

Создаем новое TV с именем resourcealbum-fake типа checkbox, в поле «Подпись» или «Описание» размещаем нужный текст (например, «Документ не сохранен! Сохраните документ!»). Так как мы не указали никакой разметки для данного поля — при редактировании документа выведется только подпись и описание поля.

Осталось заставить админку MODX отображать поле resourcealbum-fake и прятать поле resourcealbum при создании документа (до первого сохранения) и наоборот, отображать поле resourcealbum и прятать поле resourcealbum-fake при редактировании документа.

Открываем Сервис — Настройка форм. Жмем «Создать новый профиль». Называем как нравится (gallery, например), ставим галочку «Активный», сохраняем.

На созданном профиле кликаем правой кнопкой мыши — «Редактировать». Теперь нам нужно добавить два набора правил. Жмем «Новый набор павил», действие: «Создать ресурс«, шаблон: «Фотогалерея» (выбираете шаблон, к которому привязаны TV resourcealbum и resourcealbum-fake. Сохраняем.

На созданном только что правиле кликаем правой кнопкой мыши — «Редактировать». Выбираем закладку «Дополнительные поля» и снимаем галочку напротив resourcealbum.

Повторяем процедуру для поля resourcealbum-fake:

Открываем Сервис — Настройка форм. На профиле gallery кликаем правой кнопкой мыши — «Редактировать». Жмем «Новый набор правил», действие: «Обновить ресурс«, шаблон: «Фотогалерея» . Сохраняем.

На созданном только что правиле кликаем правой кнопкой мыши — «Редактировать». Выбираем закладку «Дополнительные поля» и снимаем галочку напротив resourcealbum-fake.

Все, теперь при создании ресурса после выбора шаблона в закладке «Дополнительные поля» вместо поля MIGX с возможностью загрузки изображений будет отображаться надпись «Документ не сохранен! Сохраните документ!».

`MODX + MIGX и Fenom. Имба связка. | Записки вебмастера. SEO/MODX`

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

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

Стандартный вывод MIGX выглядит вот так:

[[getImageList?

&tvname=` slider_main `

&tpl=`@CODE: <li> <h3>[[+set]]</h3> <h4>[[+description]]</h4> <img src=»[[+image]]» /> </li>`

]]

При выводе больших MIGX таблиц (более 100 элементов, или при выводе 3-4 MIGX таблиц на страницу, вы столкнетесь с долгой загрузкой. Решением, возможно, будет использование пакета на подобие сниппета getCache, но идеальным вариантом будет манипуляция стандартными средствами шаблонизатора FENOM).

P.S Убедитесь что у вас установлен пакет pdoTools и FENOM включен в системных настройках!

В системных настройках pdotools_fenom_parser (Использовать Fenom на страницах) поставьте в ДА.

{set $rows = json_decode($_modx->resource.slider_main, true)} {foreach $rows as $row} <h3>{$row.set}</h3> <h4>{$row.description}</h4> <img src=»{$row.image}» /> {/foreach}

Пояснение: по сути TV с типом MIGX это json-поле, через Fenom мы можем преобразовать его в массив и вывести в цикле, без всяких сниппетов. Это даст значительный прирост скорости при рендеринге страницы.

Если нужно вывести MIGX объект для определенного ресурса тогда 1 строку нужно заменить на:

{set $rows = json_decode (11 | resource: ‘ slider_main ‘, true)}

Где 11 — это ID ресурса с привязанным MIGX TV

Если я вам хоть чуть-чуть помог — ставьте лайк, мне будет приятно, комментируйте, если что-то не понятно.

С уважением web-rocket.by

`Добавить таблицу в MODX. Настройка MIGX. Создание сайтов на MODX Revolution. Минск`

В MODX Revolution можно создавать дополнительные поля с табличными параметрами ввода. Для этих целей идеально подходит дополнение MIGX. Пакет MIGX позволяет работать как с небольшим объемом данных, сохраняя их в JSON как обычное tv-поле, так и с обычными таблицами в базе данных. При этом MIGX предоставляет удобный интрерфейс для ввода и редактирования данных в таблице. Давайте рассмотрим, как создать и настроить редактирование отдельной таблицы в базе данных для сайта на движке MODX Revolution.

Идем в меню установленной компоненты MIGX и настраиваем:

`Создание пакета в core/components`

Прежде всего надо создаь пакет в папке core/components, где будет располагаться схема и генерируемые php-файлы для нашей отдельной таблицы. Вручную его создавать не надо. MIGX предоставляет ui-интерфейс для этой операции.

`Сохраняем схему для кастомной таблицы`

Для работы с отдельной таблицей нам наверняка понадобится чтение данных через API MODX. Для этого необходима ORM-прослойка для работы с базой данных. Чтобы сгенерировать класс для работы с нашей таблицей, достаточно описать структуру таблицы в схеме — специальном xml-файле. Файл схемы будет хранится в пакете, который мы создали на предыдущем шаге. Заполнить схему можно также через интерфейс MIGX:

Код схемы из примера можно получить по ссылке. Важные параметры для замены:

model package=»pages» — в package задается название пакета, который вы создавали на предыдущему шаге;
object table=»custom_pages». Class — название класса для работы с вашей отдельной таблицей через API MODX, а table — название таблицы в базе данных;
fields — описание полей, которые должны быть в таблице;
index — описание индексов таблицы.

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

`Создаем таблицу`

И теперь, сохранив схему, мы можем создать таблицу. Всё необходимое есть на вкладке — create Tables:

`Создание интерфейса для редактирования таблицы из панели администрирования MODX`

Для работы с нашей отдельной таблицей из админ-панели MODX нам надо настроить конфигурацию MIGX:

Для этого нам надо перейти уже на новую вкладку — вкладку MIGX.

`Настройка конфигурации MIGX для отображения таблицы в админ-панели`

Для обязательного заполнения нам понадобятся 5 вкладок:

Settings — достаточно заполнить поле Name — это будет имя конфигурации, которое нам понадобится вдальнейшем.
Formtabs — настройка полей ввода для добавления/редактирования строки из отдельной таблицы.
Columns — какие поля из отдельной таблицы будут отображаться в табличном редакторе в админ панели.
Actionbuttons — какие кнопки выводить перед таблицей (в том числе кнопка для добавления записи!)
MIGXdb-Settings — данные об отдельной таблице и ORM-класса для работы с ней, чтобы MIGX знал, откуда брать данные в визуальную компоненту и куда сохранять.

`Добавление текстового поля на вкладку Formtabs`

Достаточно заполнить поля:

Fieldname — название поля из таблицы.
Caption — подпись, которая будет стоять рядом с полем в форме редактирования.

Если надо, чтобы поле ввода было не текстовое, а изображение или любой другой тип ввода, доступный для tv, — надо указать название этого типа в поле Input TV type, к примеру для content можно указать richtext — чтобы появился редактор для текста.

`Добавить кнопки для управления таблицей`

Для этого надо заполнить вкладвку Actionbuttons. Эти кнопки появляются над таблицей. Обязательно надо отметить чекбокс с addItem — это кнопка для добавления записи в таблицу. Остальные — по желанию.

`Подвязка таблицы к шаблону`

Теперь, когда у нас есть конфигурация, хотя бы с заполненной вкладкой Formtabs и вкладкой Actionbuttons — можно посмотреть, как будет выглядить форма для ввода и редактирования данных в таблице. Для этого нужно создать дополнительное поле с параметрами ввода migxdb и указать в поле «Конфигуарция» — название, которое вводили на вкладке Settings в конфигурации MIGX:

`Настройка связи с базой данных`

Для обмена данными с базой в конфигурации MIGX на вкладке MIGXdb-Settings надо указать пакет и класс для таблицы, которые были созданы в процессе сохранения схемы. Также можно настроить порядок сортировки, кол-во вывода записей на одной странице и т.д. И выбрать режим загрузки данных. По умолчанию стоит загрузка данных по запросу. Удобно ставить, чтобы данные загружались вместе со странице автоматически — это параметр Load Grid со значением auto.

`Колонки для таблицы MIGX`

Теперь осталось настроить колонки таблицы, которые мы хотим видеть в админ панели. Для этого заполняем вкладку Columns. Важно указать среди прочих колонок — колонку id — она используется для пакетных операций и для операций контекстного меню со строкой. Без этого столбца операции над строкой работать не будут! Столбцу можно задать сортировку, ширину и т.д. Поле Header — заголовок колонки, Field — поле из нашей отдельной таблицы.

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

Ещё один важный момент: в таблицах должно присутствовать поле resource_id — это поле устанавливает связь с Ресурсами из MODX, через него определяется, у какого из ресурсов отображать строки из вашей отдельной таблицы для просмотра и редактирования в админ-панели сайта!

Количество просмотров: 222

`Поделиться в соцсетях:`

`MIGX — MIGX | Документация MODX`

`Что такое MIGX? ¶`

MIGX — это настраиваемый тип входа переменной шаблона (TV) для объединения нескольких телевизоров в один телевизор. Такое агрегирование значительно упрощает рабочий процесс для конечных пользователей менеджера по добавлению сложных элементов данных в менеджер. Элемент данных может состоять из любого количества любых других телевизоров, включая текст, изображения, файлы, флажки и т. Д.

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

Пакет также поставляется с фрагментом (getImageList), который упрощает получение сложных элементов данных из настраиваемого типа ввода MIGX TV.

Пожалуйста, прочтите ниже инструкции по установке MIGX, поскольку они отличаются от типичных пакетов MODX.

MIGX означает M ulti I tems G ridtv для MOD X .

`Требования¶`

MODX Revolution 2.1 rc4 или новее
PHP5 или более поздняя версия MIGX также работает с Revolution 2.0.8 с ограниченной функциональностью.

`Загрузить¶`

MIGX можно загрузить из диспетчера Revolution через Управление пакетами или из репозитория MODX Extras, доступного здесь: https://modx.com/extras/package/migx

`Инструкции по установке¶`

`Шаг 1. Установка пакета¶`

Установите пакет по ссылке выше.

`Шаг 2. Настройка страницы настраиваемого диспетчера конфигуратора MIGX (CMP) и диспетчера пакетов¶`

Начиная с версии 2.8 эти шаги (1-19) больше не нужны.

Примечание. Было бы разумно создать снимок вашей базы данных MODX перед установкой, поскольку этот процесс изменит структуру вашей базы данных.

Откройте меню «Система» из Revolution Manager.
Щелкните пункт меню «Действия».
Найдите категорию MIGX в списке действий слева. Щелкните по нему правой кнопкой мыши.
Нажмите «Создать действие здесь»
Тип «индекс» для контроллера
Убедитесь, что для пространства имен выбран «migx».
Выберите «Нет действий» для родительского контроллера.
Нажмите «Сохранить»
Обновить страницу
Найдите категорию «Компоненты» в списке верхних пунктов меню справа.Щелкните по нему правой кнопкой мыши.
Нажмите «Разместить действие здесь» Лексический ключ: migx Описание: конфигуратор и менеджер пакетов Действие: migx — index (несколько страниц отсортированы по алфавиту. Убедитесь, что вы пропустили все основные действия) Значок: (оставьте поле пустым) Параметры: & configs = packagemanager || migxconfigs || setup Обработчик: (оставьте поле пустым) Разрешения: (оставьте поле пустым)
Нажать «сохранить»
Обновить страницу
Открыть меню «Компоненты»
Щелкните созданный вами новый элемент действия MIGX.
Щелкните вкладку Настройка / Обновление
ПРЕДУПРЕЖДЕНИЕ. Перед этим следующим шагом вы, вероятно, захотите убедиться, что создали моментальный снимок своей базы данных.
Нажмите кнопку настройки
Готово!

`Обновление до MIGX 2.0¶`

Для правильной работы

MIGX 2.0 требуется новое поле в таблице MIGX в вашей базе данных. Эта процедура добавит новое поле auto_increment, MIGX_id, которое необходимо для правильной работы фрагмента getImageList. Перед изменением структуры базы данных важно создать моментальный снимок базы данных.

`Шаг 1. Создайте резервную копию базы данных¶`

Сделайте резервную копию таблиц базы данных, в частности таблицы modx_site_tmplvar_contentvalues.

`Шаг 2: Обновление компонентов¶`

Откройте меню «Компоненты» в Revolution Manager
Щелкните элемент действия MIGX
Щелкните вкладку Настройка / Обновление
ПРЕДУПРЕЖДЕНИЕ. Перед этим следующим шагом вы, вероятно, захотите убедиться, что создали моментальный снимок своей базы данных.
Нажмите кнопку «Обновить»
Готово!

`Разработка и сообщение об ошибках¶`

MIGX хранится и разрабатывается Bruno17 с использованием GitHub: https: // github.ru / Bruno17 / migx

`Использование¶`

`Шаг 1: Установите MIGX¶`

Следуйте инструкциям в этом документе.

`Шаг 2. Использование серверной части¶`

Создайте новый телевизор и примените его к шаблону

Посмотреть инструкции

`Шаг 3: Ввод данных¶`

Добавьте контент в свой новый телевизор.

Посмотреть инструкции

`Шаг 4: Использование внешнего интерфейса¶`

Используйте фрагмент getImageList для отображения контента с вашего нового телевизора.

Посмотреть инструкции

`Backend-Usage — MIGX | Документация MODX`

`Использование серверной части¶`

`Как работает переменная настраиваемого шаблона (TV) MIGX¶`

MIGX TV позволяет хранить сложные элементы данных как один телевизор.Эти элементы данных хранятся в формате JSON. На этой странице документации предполагается, что вы знакомы с JSON.

С каждым сложным элементом данных может быть связано несколько полей. Эти поля могут быть (почти) любым стандартным или настраиваемым типом ввода MODX TV. Эти элементы данных определены в поле «Вкладки формы». Элементы можно сортировать по вкладкам, как определено в JSON.

`Создание вашего первого MIGX TV¶`

Примеры конфигураций MIGX хранятся в / core / components / migx / examples /.Мы будем ссылаться на «tabs.txt» для этой страницы документации. На этой странице документации предполагается, что у вас установлена надстройка TinyMCE.

tabs.txt показывает пример реализации простой галереи изображений. Галерея изображений будет состоять из одного сложного элемента данных, который использует одно поле расширенного текста (описание изображения), одно поле изображения (само изображение) и короткую строку (заголовок). Эта короткая строка не будет храниться на отдельном телевизоре.

Телевизоры

«Helper» по-прежнему работают, но больше не нужны; используйте inputTVtype: вместо inputTV:

`Шаг 1. Создайте агрегат MIGX TV¶`

введите имя, заголовок, описание и категорию, как и для любого другого телевизора
предоставляет доступ к шаблону, для которого вы хотите добавить элементы данных.В этом примере, возможно, «Галерея»
выберите MIGX в качестве типа входа

`Шаг 2: Настройте тип входа MIGX¶`

Для вашего первого MIGX TV нас интересуют только два текстовых поля: «Вкладки формы» и «Столбцы сетки»

`Шаг 2.1 Вкладки формы¶`

Вкладки формы определяют структуру, которую конечные пользователи будут использовать для ввода своих данных.

Содержимое tabs.txt:

  [{
    "caption": "Информация",
    "поля": [{
        "поле": "заголовок",
        "caption": "Заголовок"
      },
      {
        "поле": "описание",
        "caption": "Описание",
        "inputTVtype": "richtext"
      }
    ]
  },
  {
    "caption": "Изображение",
    "поля": [{
      "поле": "изображение",
      "caption": "Изображение",
      "inputTVtype": "изображение"
    }]
  }
]

Это много JSON — давайте разберемся с ним.Первая клавиша, которую вы видите, называется «Заголовок». Имеется в виду название первой вкладки. Вкладка будет помечена как «Информация».

Второй ключ, который вы видите, называется «поля». Это относится к каждому из полей, которые будут доступны с этой вкладки. Поля хранятся в виде вложенной строки JSON. Давайте разберем это.

Первый ключ во вложенной строке JSON называется «поле». Это относится к заполнителю, который сгенерирует MIGX, к которому мы позже обратимся с помощью getImageList.Для первого элемента мы обозначили его «заголовком». Это относится к упомянутой выше короткой строке. Второй ключ помечен как «подпись». Это относится к метке, которую конечный пользователь увидит при заполнении элемента данных. Назовем его «Заголовок», чтобы наши пользователи знали, что заполняют заголовок изображения.

Второй ключ во вложенной строке JSON называется «описание». На этот раз у нас есть три ключа: первый, «поле», относится к заполнителю, к которому мы обратимся позже.Вторая, «подпись», — это метка, которую увидит пользователь. Третий, «inputTVtype», относится к типу поля, которое мы хотим использовать.

Мы закончили с первой вложенной строкой JSON. Теперь мы видим, что есть вторая вкладка — она имеет метку «Image» и для inputTVtype указано «image». Чтобы указать источник мультимедиа для изображения, добавьте еще один ключ «sourceFrom»: «migx» и назначьте MIGx TV источнику мультимедиа с помощью вкладки «Источники мультимедиа» телевизора.

Мы наполовину закончили с нашим первым телевизором MIGX TV.Теперь мы создали форму для каждого отдельного элемента данных. Клавиши для каждого поля перечислены ниже в таблице для удобства просмотра. Давайте теперь определим сводное представление элементов данных с помощью столбцов сетки на шаге 3.2

Ключ	Описание
поле	это имя вашего заполнителя для использования с getImageList и шаблоном
подпись	это будет заголовок в вашей форме, чтобы конечный пользователь увидел
описание	это описание в вашей форме, если пустой MIGX будет использовать описание inputTV, если есть
вход ТВ	Выберите это или «inputTVtype».Если вы используете это, укажите имя телевизора, который вы хотите использовать. Это полезно, если для вашего типа данных требуются какие-либо настраиваемые функции (например, значение по умолчанию, параметры вывода и т. Д.). Вы можете использовать один и тот же входной телевизор для разных полей (т. Е. Если у вас есть объект с несколькими изображениями).
вход TVtype	Выберите это или «inputTV». Если вы используете это, укажите имя типа телевизора, который вы хотите использовать. Это полезно, если ваш тип данных не требует каких-либо настраиваемых функций.

`Шаг 2.2 Столбцы сетки¶`

В столбцах сетки мы указываем сводное представление, которое пользователи будут видеть для просмотра своей информации.

Содержимое columns.txt:

  [
{
  "header": "Заголовок",
  "width": "160",
  "sortable": "true",
  "dataIndex": "название"
}, {
  "заглавное изображение",
  "width": "50",
  "sortable": "false",
  "dataIndex": "изображение",
  "рендерер": "this.renderImage"
}]

Вот еще несколько JSON для нас! Этот JSON показывает заголовок изображения, а также его предварительный просмотр.Давайте разберемся с этим.

Первый ключ, «header», относится к метке заголовка, которая будет использоваться для классификации четвертого ключа, «dataIndex». DataIndex относится к заполнителю, который мы указали выше на вкладках формы. Первая запись здесь использует dataIndex, который мы указали выше для «title». У нас также есть еще два ключа: width и sortable. Ширина определяет относительную ширину столбца, а sortable определяет, можно ли сортировать сетку по этому столбцу.

Вторая запись имеет пятый ключ: средство визуализации.Этот ключ позволяет нам рендерить здесь изображение.

Мы закончили определение нашего первого MIGX TV. Чувствует себя прекрасно, правда? Убедитесь, что вы нажали «Сохранить».

Не забудьте сохранить свой ресурс после добавления или редактирования элементов MIGX!

Мы наполовину закончили наш опыт MIGX. Следующий шаг: ввод данных

Ключи для этой сетки перечислены здесь:

Ключ	Описание
Заголовок	заголовок столбца
сортируемый	, если столбцы можно сортировать, щелкнув заголовок
dataIndex	поле, которое вы хотите отобразить в этом столбце
средство визуализации	вы можете использовать средство визуализации для каждого столбца.Например, включенная функция this.renderImage. Это отрендерит предварительный просмотр изображения в ячейке сетки, если вы используете изображение-ТВ для этого поля.

`Расширенная конфигурация MIGX¶`

`Множественные формы¶`

Содержимое switchFormTabs.txt

  [
  [{
    "formname": "image_description",
    "formtabs": [{
        "caption": "Информация",
        "поля": [{
            "поле": "заголовок",
            "caption": "Заголовок"
          },
          {
            "поле": "tpl",
            "caption": "Tpl",
            "inputTV": "tplDropdown"
          }, {
            "поле": "описание",
            "caption": "Описание",
            "inputTV": "richtext"
          }
        ]
      },
      {
        "caption": "Изображение",
        "поля": [{
          "поле": "изображение",
          "caption": "Изображение",
          "inputTV": "изображение"
        }]
      }
    ]
  }, {
    "имя формы": "только текст",
    "formtabs": [{
      "caption": "Информация",
      "поля": [{
          "поле": "заголовок",
          "caption": "Заголовок"
        },
        {
          "поле": "tpl",
          "caption": "Tpl",
          "inputTV": "tplDropdown"
        }, {
          "поле": "описание",
          "caption": "Описание",
          "inputTV": "richtext"
        }
      ]
    }]
  }]
]

здесь у нас есть дополнительный внешний массив с двумя ключами.

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

при использовании нескольких форм будет создано дополнительное поле с именем «MIGX_formname». Вы можете использовать значение этого поля для переключения tpls во внешнем интерфейсе с помощью & tpl = `@ FIELD: MIGX_formname` и создания чанков с теми же именами, что и ваши имена форм, или вы можете добавить дополнительное поле (listbox-TV с именем tpl например), чтобы выбрать output-tpl для этого элемента.

`Предварительный просмотр¶`

MIGX имеет функцию предварительного просмотра, которая позволяет вам видеть визуализированный вывод элементов в окне iframe. Чтобы использовать эту функцию предварительного просмотра, вам необходимо создать ресурс предварительного просмотра. Этот ресурс должен иметь такое содержимое:

  [[! GetImageList? & tpl = `@ FIELD: MIGX_formname` & tvname =` multiitemsgridTv`]]
[[! getImageList? & tvname = `multiitemsgridTv2`]]

Если у вас есть несколько вызовов ресурса предварительного просмотра, вам также понадобятся уникальные значения для каждого ТВ в Preview JsonVarKey — по умолчанию — migx_outputvalue

После того, как вы заполнили поле «Preview Url», у вас появится дополнительная кнопка «Preview» на вашем MIGX-TV, которая показывает окно предварительного просмотра с содержимым вашего ресурса предварительного просмотра.

`Встроенный редактор¶`

Чтобы редактировать поля непосредственно в сетке MIGX, просто добавьте «editor»: «this.textEditor» или «editor»: «this.listboxEditor» в столбцы сетки JSON поля, которое вы хотите сделать доступным для редактирования:

  {"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title", "editor": "this.textEditor"}

`Использование источника мультимедиа и многофайлового загрузчика для конкретного ресурса с MIGX — Учебники`

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

`Требования¶`

Прежде всего нам нужно установить MIGX с помощью управления пакетами.

Перейдите к: Инструменты-> Источники мультимедиа
Создать новый медиаисточник имя: ResourceMediaPath Тип источника: Файловая система
Обновить этот медиа-источник

  [[migxResourceMediaPath?
    & pathTpl = `assets / resourceimages / {id} /`
    & createFolder = `1`
]]

Вам также может потребоваться создать каталог с правами записи для php: assets / resourceimages /

`Создание MIGX — TV¶`

Создать новый телевизор

Вкладка: Общая информация

Вкладка

: параметры ввода Тип ввода: migx Конфигурации: ресурсный альбом

Вкладка

: доступ к шаблону выберите свой шаблон для вашего альбома-ресурсов

Вкладка

: Источники мультимедиа выберите ResourceMediaPath — источник мультимедиа для вашего контекста (по умолчанию Интернет)

`Создание конфигурации для MIGX-TV¶`

Перейдите в: Компоненты-> MIGX-> Вкладка: MIGX
Создайте новую конфигурацию с помощью «добавить элемент»
Нажмите «Готово», чтобы сохранить новую конфигурацию.
щелкните правой кнопкой мыши новую конфигурацию и выберите «импорт / экспорт»
скопируйте / вставьте этот код в текстовое поле:

  {
  "formtabs": [{
    "MIGX_id": 71,
    "caption": "Изображение",
    "print_before_tabs": "0",
    "поля": [{
        "поле": "заголовок",
        "caption": "Заголовок",
        «MIGX_id»: 327,
        "pos": 1
      },
      {
        «MIGX_id»: 329,
        "поле": "описание",
        "caption": "Описание",
        "описание": "",
        "description_is_code": "0",
        "inputTV": "",
        "inputTVtype": "",
        "Проверка": "",
        "конфиги": "",
        "Restrictive_condition": "",
        "отображать": "",
        "sourceFrom": "config",
        "источники": "",
        "inputOptionValues": "",
        "по умолчанию": "тест",
        "useDefaultIfEmpty": "0",
        "pos": 2
      },
      {
        «MIGX_id»: 330,
        "поле": "showBtn",
        "caption": "Показать кнопку",
        "описание": {
          "поле": "showBtn",
          "caption": "Показать кнопку",
          "inputTV": "showBtn"
        },
        "description_is_code": "0",
        "inputTV": "",
        "inputTVtype": "флажок",
        "Проверка": "",
        "конфиги": "",
        "Restrictive_condition": "",
        "отображать": "",
        "sourceFrom": "config",
        "источники": "",
        "inputOptionValues": "да == да",
        "по умолчанию": "да",
        "useDefaultIfEmpty": 1,
        "pos": 3
      },
      {
        "MIGX_id": 425,
        "поле": "изображение",
        "caption": "Изображение",
        "описание": "",
        "description_is_code": "0",
        "inputTV": "",
        "inputTVtype": "изображение",
        "Проверка": "",
        "конфиги": "",
        "Restrictive_condition": "",
        "display": "none",
        "sourceFrom": "migx",
        "источники": "",
        "inputOptionValues": "",
        "дефолт": "",
        "useDefaultIfEmpty": "0",
        "pos": 4
      }
    ],
    "pos": 1
  }],
  "contextmenus": "edit_migx || duplicate_migx || remove_migx_and_image || movetotop_migx || movetotop_bottom",
  "actionbuttons": "loadfromsource || uploadfiles",
  "columnbuttons": "",
  "фильтры": "",
  "расширенный": {
    "migx_add": "Добавить изображение",
    "disable_add_item": 1,
    "add_items_directly": "",
    "formcaption": "Изображение",
    "update_win_title": "",
    "win_id": "галерея ресурсов",
    "maxRecords": "",
    "addNewItemAt": "снизу",
    "multiple_formtabs": "",
    "multiple_formtabs_label": "",
    "multiple_formtabs_field": "",
    "multiple_formtabs_optionstext": "",
    "multiple_formtabs_optionsvalue": "",
    "actionbuttonsperrow": 4,
    "winbuttonslist": "",
    "extrahandlers": "это.handleColumnSwitch ",
    "filterperrow": 4,
    "имя пакета": "",
    "имя класса": "",
    "задача": "",
    "getlistsort": "",
    "getlistsortdir": "",
    "sortconfig": "",
    "gridpagesize": "",
    "use_custom_prefix": "0",
    "приставка": "",
    "сетка": "",
    "gridload_mode": 1,
    "check_resid": 1,
    "check_resid_TV": "",
    "join_alias": "",
    "has_jointable": "да",
    "getlistwhere": "",
    "присоединяется": "",
    "крючки": "",
    "cmpmaincaption": "",
    "cmptabcaption": "",
    "cmptabdescription": "",
    "cmptabcontroller": "",
    "winbuttons": "",
    "onsubmitsuccess": "",
    "submitparams": ""
  },
  "columns": [{
      "MIGX_id": 1,
      "header": "ID",
      "dataIndex": "MIGX_id",
      «ширина»: 10,
      "рендерер": "",
      "sortable": "false",
      "show_in_grid": 1
    },
    {
      "MIGX_id": 2,
      "header": "Заголовок",
      "dataIndex": "название",
      «ширина»: 20,
      "sortable": "false",
      "show_in_grid": 1,
      "рендерер": "",
      "clickaction": "",
      "selectorconfig": "",
      "renderchunktpl": "",
      "renderoptions": "",
      "редактор": "это.Текстовый редактор"
    },
    {
      "MIGX_id": 3,
      "заглавное изображение",
      "dataIndex": "изображение",
      «ширина»: 20,
      "renderer": "this.renderImage",
      "sortable": "false",
      "show_in_grid": 1
    },
    {
      "MIGX_id": 4,
      "header": "Опубликовано",
      "dataIndex": "опубликовано",
      "ширина": "",
      "sortable": "false",
      "show_in_grid": 1,
      "renderer": "this.renderSwitchStatusOptions",
      "clickaction": "switchOption",
      "selectorconfig": "",
      "renderchunktpl": "",
      "renderoptions": [{
          "MIGX_id": 1,
          "имя": "опубликовано",
          "use_as_fallback": 1,
          «значение»: 1,
          "clickaction": "switchOption",
          "обработчик": "",
          "изображение": "активы \ / компоненты \ / migx \ / style \ / images \ / cb_ticked.png "
        },
        {
          "MIGX_id": 2,
          "имя": "опубликовано",
          "use_as_fallback": "",
          «значение»: 1,
          "clickaction": "switchOption",
          "обработчик": "",
          "изображение": "активы \ / компоненты \ / migx \ / style \ / images \ /cb_ticked.png"
        },
        {
          "MIGX_id": 3,
          "name": "не опубликовано",
          "use_as_fallback": "",
          "значение": "0",
          "clickaction": "switchOption",
          "обработчик": "",
          "изображение": "активы \ / компоненты \ / migx \ / style \ / images \ / cb_empty.png "
        }
      ],
      "редактор": ""
    }
  ]
}

`Развлекайтесь¶`

Теперь у вас должна быть возможность создавать ресурсы альбома, загружать изображения с помощью многофайлового загрузчика и синхронизировать MIGX-элементы с вашими файлами. Чтобы перечислить их во Front-end, используйте getImageList — сниппет вроде этого:

  [[getImageList?
  & tvname = `resourcealbum`
  & tpl = `@ CODE:  [[+ title]] 
 `
  & где = `{" опубликовано ":" 1 "}`
]]

, или если у вас более сложный tpl, или вы используете phpthumbof в изображении с tpl-chunk

  [[getImageList?
  & tvname = `resourcealbum`
  & tpl = `imageTpl`
  & где = `{" опубликовано ":" 1 "}`
]]

Шаблон вопросов

`для MIGX MODx`

У меня есть PHP foreach, который я переместил на MIGX, теперь может кто-нибудь знает, как сделать шаблон для MIGX, вот мой PHP

  ';
foreach (glob ($ dir) as $ file) {
 if ($ i <1) {
  echo ' ';
  $ i = $ i + 1;
 }
 еще {
  эхо '
    ';
  $ i = $ i + 1;
 }
}
эхо '';
echo '';
foreach (glob ($ dir) as $ file) {
 $ y = $ y + 1;
 if ($ y == 1) {
  эхо '
  
    
  
  ';
 }
 еще {
  $ active = 'неактивен';
  эхо '
  
    
  
  ';
 }
}
эхо '';

MIGX Extra поставляется с сниппетом getImageList , который анализирует значения в MIGX TV и возвращает их на основе указанного вами шаблона Chunk.

Например, вы можете поместить этот вызов сниппета в свой шаблон:

  
        [[getImageList?
            & tvname = `myMIGXtv`
            & tpl = `myTplChunk`
        ]]

Фрагмент будет возвращать значения, хранящиеся в MIGX TV с именем myMIGXtv , в текущем запрошенном ресурсе и форматировать вывод на основе имен блоков tpl myTplChunk . Содержимое myTplChunk будет примерно таким:

Синтаксис вызова заполнителя [[+ idx]] с : после имени тега вызывает класс модификатора вывода MODX, который поддерживает условные выражения.

Вот некоторые справочные материалы для описанных выше методов:

`Anleitung modx: MIGX Template Variable`

Das Plugin MIGX ist ein großartiger Weg Template Variablen Effektiv einzusetzen und das möchten wir Ihnen in diesem Blogeintrag etwas näher ride.

MIGX была создана Бруно Пернером для системы управления контентом modx Revolution entwickelt, um mehrere Einträge в einer einzelnen Template Variable zu vereinen. Statt etliche unstrukturierte Einträge zu verwalten, müssen Sie lediglich einige übersichtliche Datensätze pflegen.Das spart viel Zeit und erleichtert die Arbeit des Endnutzers im Manager erheblich.

MIGX Variablen verhalten sich ähnlich Arrays und unterstützen auch verschachtelte Array-Werte (англ .: nesting). Im Folgenden möchten wir Ihnen veranschaulichen wie Sie eine verschachtelte MIGX-TV erstellen und im Frontend ausgeben können.

Selbstverständlich sollten Sie das Plugin MIGX vorher Manuell oder über die Package-Verwaltung installiert haben.

`1. Тип-переменная anlegen: childTV`

Beginnen wir mit unserer Kindvariable, умирает в unserer Elternvariable aufgerufen wird.Wir legen eine MIGX — переменная шаблона для ребенка. Danach wechseln wir auf den Tab Eingabe-Optionen und wählen den Eingabetyp migx aus. Daraufhin ändert sich das unten stehende Formular. Dort können wir nun folgende JSON Arrays einfügen.

Переменная шаблона — childTV : Вкладки формул:

  [{"caption": "childTV", "fields": [{"field": "ctv_text", "caption": "Text"}]}]

Dazu eine kurze Erklärung: Der erste Schlüssel caption ist der Name des Tabs welcher unsere Eingabefelder beinhaltet.fields beinhaltet all unsere Felder für einen Datensatz. Das zweite caption ist der Name des aktuellen Feldes und wird uns beim Bearbeiten der Ressource als Label dargestellt. field beinhaltet den Namen über welchen wir die Daten in unserem Template abrufen können.

Табелленспальтен:

  [{"header": "Text", "dataIndex": "ctv_text"}]

Die Tabellenspalten zeigen uns unsere gespeicherten Daten в einer Tabelle an, damit wir sehen welche Datensätze bereits gespeichert sind.header ist der Kopf einer Tabellenspalte für die dementsprechenden Felder unseres Datensatzes. dataIndex beinhaltet den Namen unseres Feldes, denselben welchen wir im Template verwenden werden.

Nun erstellen wir unseren ersten Chunk und nennen diesen childTvTpl , der Chunk muss nicht viel enthalten, da lediglich der Text aus unserem Datensatz angezeigt werden soll.

Чанк — childTvTpl :

  [[+ ctv_text]]

Jetzt müssen wir nur noch den Datensatz in unserem Template ausgeben können dafür benutzen wir den Snippet-Aufruf getImageList, übergeben unseren Variablennamen mit tvname und den Namen des Chunks mit tpl.Zusätzlich geben wir einen outputSeperator an, dieser wird zwischen den Ausgaben eingefügt.

Falls Sie die Variable testen möchten, muss in der Template Переменная unter Template-Zugriff das entsprechende Template zugewiesen werden. Danach können в Jeder Ressource, dem dieses Template zugewiesen ist, neue Datensätze unter Template-Variablen angelegt werden.

Шаблон:

  [[getImageList? & tvname = `childTV` & tpl =` childTvTpl` & outputSeparator = `-`]]

Beispiel anzeigen

Текст 1 — Текст 2 — Текст 32.Eltern-Variable anlegen: parentTV

Gehen wir einen Schritt weiter, hier beginnt das Verschachteln der Template Variablen. Hierfür wird eine neue Переменная шаблона angelegt, genannt parentTV.

Die TV bekommt eine Überschrift (genau wie den Text zuvor in childTV) und zusätzlich einen Verweis auf childTV. Dafür wird der Schlüssel inputTV genutzt, welcher den Namen der Kind-Variable erhält, in diesem Beispiel childTV.

Переменная шаблона — parentTV: Formular-Tabs:

  [{"caption": "parentTV", "fields": [{"field": "ptv_heading", "caption": "Überschrift"}, {"field": "ptv_childtv", "caption": "childTV») Inhalte "," inputTV ":" childTV "// Verweis auf TV" childTV "}]}]

Für die Tabellenspalten brauchen wir momentan nicht viel mehr ausgeben als die Überschrift.

Табелленспальтен:

  [{"header": "Überschrift", "dataIndex": "ptv_heading"}]

Als Nächstes legen wir einen weiteren Chunk an und nennen ihn parentTvTpl. Der Chunk childTvTplwird weiterhin benötigt. An dieser Stelle wollen wir nun unsere Überschrift ausgeben und nutzen dazu unseren bereits vorhandenen Snippet-Aufruf aus dem Template, mit einem Unterschied: Wir möchten nun nicht die Datensätze abrufen, die in derTV Datezable Template Variable parentTV.Hierfür wird der Параметр tvname entfernt undvalue genutzt. Diesem übergibt man nun den Aufruf aus unserem Verweis auf die Kind-Variable, als würden wir es direkt ausgeben wollen.

Чанк — parentTvTpl :

  [[+ ptv_heading]] 
 [[getImageList? & value = `[[+ ptv_childtv]]` & tpl = `childTvTpl` & outputSeparator =` - `]]

Natürlich muss nun in unserem Template auch ein neuer Snippet-Aufruf stattfinden. Der alte childTV Aufruf kann dafür entfernt werden.Dieser wird nun innerhalb des parentTvTpl Chunks eingesetzt. Diesmal zeigen wir die TV parentTV mit dem Chunk parentTvTpl in unserem Template an.

Шаблон:

  [[getImageList? & tvname = `parentTV` & tpl =` parentTvTpl` & outputSeparator = ``]]

Damit wir die Datensätze bearbeiten können, sollten wir der Template Variable parentTV den entsprechenden Template-Zugriff verpassen, und fall noch nicht erledigt entfernen wir в childTV den Zugriff auf das Template.Somit greift nur noch parentTV darauf zu.

Beispiel anzeigen

Überschrift 1Text 1.1 — Text 1.2 — Text 1.3Überschrift 2Text 2.1 — Text 2.2 — Text 2.3

Hiermit wären wir fertig. Nun können wir in den Ressourcen die Datensätze anlegen und im Frontend ausgeben.

`3. Anwendungsbeispiel: Eine einfache Galerie`

Um das ganze abschliessend zu veranschaulichen, bieten wir Ihnen noch ein kleines Beispiel zur Anwendung in der Praxis: eine Galerie.Hierfür erstellen wir im Grunde dieselben Template Variablen und Chunks erneut, deshalb können Sie, Falls bevorzugt, auch die vorher erstellten TVs und Chunks ganz einfach anpassen.

Переменная шаблона — галерея ChildTV : Formular-Tabs:

  [{"caption": "Galeriebild", "fields": [{"field": "gallery_image", "caption": "Bild", "inputTVtype": "image"}]}]

Vermutlich haben Sie schon festgestellt, dass hier ein neuer Schlüssel bei der Beschreibung vorhanden ist: inputTVtype.Damit können wir entscheiden был für ein Feld wir als Eingabe verwenden möchten, на изображении diesem Fall, также ein Bild — sogar mit Verlinkung zum Medien-Browser — um leichter nach Ihren Medien zu suchen oder diese hochzuladen.

Табелленспальтен:

  [{"header": "Bild", "dataIndex": "gallery_image", "renderer": "this.renderImage"}]

In den Tabellenspalten nun ebenfalls einen neuen Schlüssel, den renderer. Damit kann in der Tabelle die Ausgabe angepasst werden.Mit this.renderImage wird das Bild, welches in unserem Datensatz gespeichert ist dargestellt. Es besteht auch die Möglichkeit andere renderer zu verwenden oder gar eigene zu erstellen, jedoch werden wir das hier nicht expizit erklären.

Переменная шаблона — галереяTV :

Формула-Табы:

  [{"caption": "einfache Galerie", "fields": [{"field": "gallery_heading", "caption": "Überschrift"}, {"field": "gallery_description", "caption": " Beschreibung "," inputTVtype ":" textarea "}, {" field ":" gallery_images "," caption ":" Galeriebilder "," inputTV ":" galleryChildTV "}]}]

Hier Nutzen wir als inputTVtype den Typen textarea.Wie erwartet wird damit ein mehrzeiliges Textfeld в unserer Ressource dargestellt. Альтернативный текст Sie den Typen richtext verwenden, jedoch benötigen Sie dafür einen installierten Editor, wie beispielsweise TinyMCE. Водопад gewünscht können Sie Ihrem Label eine Beschreibung beifügen. Dafür wird einfach der Schlüssel descriptionverwendet.

Табелленспальтен:

  [{"header": "Überschrift", "dataIndex": "gallery_heading"}, {"header": "Beschreibung", "dataIndex": "gallery_description"}]

Chunk — галереяTvTpl :

   [[+ gallery_heading]] 
 [[+ gallery_description]]  [[getImageList? & value = `[[+ gallery_images]]` & tpl = `galleryChildTvTpl`]]

Chunk — галерея

____ Шаблон: ____

  [[getImageList? & tvname = `galleryTV` & tpl =` galleryTvTpl` & outputSeparator = ``]]

   Beispiel anzeigen

Галерея 1

Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.В vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Галерея 2

Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. В vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Больше MIGX erfahren Sie in der MODX Revolution Dokumentation и GitHub от Бруно Пернера.

`[MODx] Создание CMP (пользовательской страницы менеджера) с использованием MIGX в MODX 2.3 — 1`

БОЛЬШОЙ FUCK для MODx

Документ

MODx не так хорош … по крайней мере, на мой взгляд. Я трачу часы на поиски мартиралов, чтобы узнать, как построить CMP с помощью MIGX в MODX 2.3. Официальный документ написан для версии 2.2, но, начиная с версии 2.3, он сильно изменился.

Ладно, вот как это дерьмо делать …

Вы можете проверить эти два видео:

https: // www.youtube.com/watch?v=Dv83iC9iELI (Как настроить CMP в MODx 2.2)

https://www.youtube.com/watch?v=LPJQrsiDdQ4 (Изменения в 2.3)

1. УСТАНОВИТЕ MIGX (сделай сам)

2. Создайте пакет: Имя пакета : серийный номер; talbe-prefix : серийный номер

3. Перейти Вкладка «XML-схема »:

4.Перейдите на вкладку «Разбор схемы» и нажмите кнопку «Разобрать схему».

5. Перейдите на вкладку «Создать таблицы» и нажмите кнопку «Создать таблицы».

6. Теперь вы можете проверить две вещи, убедиться, что все в порядке:

Зайдите в phpmyadmin, найдите свою таблицу serialnumberserial
Перейдите в «Файлы» -> «Ядро» -> «Композиции» -> «Серийный номер» -> «Модель»

Вы увидите это:

7. В «MIGX Management» -> вкладка «MIGX» -> щелкните «Добавить элемент»:

8.На вкладке «Настройки» добавьте следующую информацию.

Наименование: серийный номер
«Добавить товар» Замена: «Добавить серийный номер»
уникальный идентификатор MIGX: серийный номер (запомните это, позже воспользуетесь)

9. Перейдите на вкладку «CMP-Settings», добавьте следующую информацию:

10. Перейдите в «MIGXDB-Settings», добавьте следующую информацию:

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

Вы сможете найти эту информацию на шаге 3.

11. Нажмите «ГОТОВО», сохраните изменения. Тогда вы увидите:

У вас может быть другой номер, но больше изменения сохраняются.

12. Заходим в «Система» -> «МЕНЮ»:

13. Нажмите кнопку «Создать меню».

14. Заполните следующую информацию:

, поле « Родитель » пока можно оставить.

«Параметры»: «серийный номер» — это уникальный идентификатор MIGXID, который вы установили на шаге 8.

15. Вы можете перетащить созданное меню в любое место, например: я поместил его в раздел «Дополнительно»

16. Обновите веб-страницу, в верхнем меню в разделе «Дополнительно» вы увидите:

17. Щелкните «Серийный номер», перейдите к CMP.

ОКОКОК, ублюдок !!! Это первый (важный) шаг, которого вы хотите достичь для CMP.

`MIGX | CMSTricks`

В этом уроке я собираюсь написать о MIGX, фантастическом дополнении MODX, разработанном талантливым Бруно Пернером. (Bruno17 на форумах MODX). Это дополнение может помочь вам создать широкий спектр объектов, начиная с таблицы с каждым из них. Строка, определенная специально, в сложный каталог продуктов с изображениями, ценами и описаниями продуктов. Чтобы увидеть пример MIGX из реального мира, просто посмотрите на слайдеры изображений и изображения, которые я использую в этом и других моих сообщениях в блоге на этом сайте.Возможности действительно безграничны, и вы можете создавать действительно крутые вещи с помощью MIGX. Несмотря на то что кривая обучения немного крутая, оно того стоит — вы поблагодарите меня позже.

`Что такое MIGX?`

MIGX — это настраиваемый тип входа переменной шаблона (TV) для объединения нескольких телевизоров в один телевизор. Эта агрегация сильно упрощает рабочий процесс для конечных пользователей менеджера по добавлению сложных элементов данных в менеджер. Элемент данных может состоят из любого количества любых других телевизоров, включая текст, изображения, файлы, флажки и т. д.

Пакет обладает широкими возможностями настройки и позволяет разработчику определять настраиваемое окно ввода для MIGX TV. Из в этом окне ввода можно добавлять, изменять и переупорядочивать элементы.

Пакет также поставляется с фрагментом (getImageList), который упрощает получение сложных элементов данных. от пользовательского типа входа MIGX TV. MIGX означает MultiItemsGridtv для MODX.

`Инструкции по установке`

В отличие от других дополнений MODX, MIGX требует установки и настройки после установки через диспетчер пакетов.Вот как мы это делаем:

Перейдите в меню «Система» в диспетчере и щелкните «Действия».

На панели «Действия» слева щелкните правой кнопкой мыши категорию MIGX и выберите «Создать действие здесь».

Во всплывающем окне «Создать действие» у вас есть 3 поля: «Контроллер», «Пространство имен» и «Родительский контроллер». В «Контроллере» введите «index»; в пространстве имен выберите «MIGX»; и в родительском контроллере выберите «Нет действий» и нажмите «Сохранить».

В верхней панели меню справа щелкните правой кнопкой мыши Компоненты и выберите «Поместить действие сюда».

Откроется меню «Создать». В Lexicon Key введите «migx»; в поле «Описание» введите «Конфигуратор» и Диспетчер пакетов «; в разделе» Действие «выберите» индекс «; в поле» Параметры «введите» & configs = packagemanager || migxconfigs || setup «; и, наконец, нажмите Сохранить. Остальные поля могут оставаться пустыми.

Обновите страницу, и теперь у вас будет пункт меню «Компоненты» в верхнем меню «Менеджеры». Наведите на него, и вы в раскрывающемся списке есть запись MIGX. Щелкните по нему, чтобы перейти на страницу управления MIGX.

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

Теперь, когда мы настроили MIGX, давайте немного повеселимся.

`Как использовать MIGX`

Чтобы использовать MIGX в менеджере MODX, нам нужно создать переменную шаблона. На вкладке «Общая информация» поместите имя вашей переменной шаблона, подпись, которую вы хотите использовать для нее, и описание и поместите ее в категорию (по желанию).

Затем щелкните вкладку «Параметры ввода». В качестве типа ввода выберите migx. Значения параметров ввода, значения по умолчанию и параметры конфигурации можно оставить пустыми (если вы не хотите указывать какие-либо значения по умолчанию и т. д.) Что мы в первую очередь интересуют вкладки формы и столбцы сетки.

Поле вкладок формы позволяет нам настроить, как будет выглядеть всплывающее окно MIGX при вводе значений. Вставим следующий код во вкладку Forms и посмотрите, как это работает:

 [
                      {"caption": "Свойства изображения", "поля": [
                      {"field": "name", "caption": "Name", "inputTVtype": "text"},
                      {"field": "image", "caption": "Image", "inputTVtype": "image"}
                      ]}
                  ]

Давайте объясним, что здесь происходит.Сначала мы создаем массив JSON с объектом, ключ которого — Caption и чей значение — Свойства изображения. «Свойства изображения» будет текстом, отображаемым на нашей вкладке MIGX TV, и может быть любым твой выбор. Затем мы сообщаем ему, что внутри этой вкладки будет несколько полей, создав еще один JSON. массив, содержащий два объекта JSON.

Первый ключ — это «поле», а его значение — «имя». Следующий ключ — «подпись» со значением «Имя».Наконец, у нас есть третий ключ, inputTVtype, со значением текста. Последний вариант позволяет MIGX узнать, какой тип шаблона Переменная, которую мы хотим использовать для этого конкретного поля. В этом случае мы говорим ему использовать текстовую переменную шаблона, хотя это может быть любой из Типы переменных шаблонов MODX

Следующий объект JSON имеет ключевое «поле» со значением «изображение», ключ «заголовок» с «Изображение» в качестве отображаемого текста. в качестве метки для этого телевизора и, наконец, третий ключ «inputTVtype», значение которого — «image», чтобы указать MIGX что мы используем имиджевый телевизор.

Поле Grid Columns — это то, как мы контролируем отображение нашего MIGX TV в диспетчере. Это позволяет нам настраивать метки для нашей таблицы, которая будет отображать значения наших записей MIGX. Вставьте следующий код и давайте объясним, что это делает:

 [
                      {"header": "Name", "width": "160", "sortable": "true", "dataIndex": "name"},
                      {"header": "Image", "width": "50", "sortable": "false", "dataIndex": "image", "renderer": "this.renderImage "}
                  ]

Как видите, мы создаем еще один массив JSON с двумя объектами и несколькими свойствами. Первый ключ, «заголовок», это то, что будет использовать первый столбец нашей таблицы. Следующий ключ позволяет нам передать желаемую ширину этого столбца. Следующий ключ, «sortable», сообщает MODX, что мы можем выполнять сортировку по этому полю. Ключ dataIndex сообщает MODX, какое значение он будет отображаться на вкладке «Формы». Очень важно, чтобы dataIndex соответствовал имени поля, которое вы используете для каждый объект, чтобы он отображал правильное значение.

Второй объект JSON следует той же структуре с некоторыми отличиями. В основном теперь изменился «dataIndex» к изображению, и есть дополнительное свойство «renderer», которое позволяет диспетчеру MODX определять рендеринг изображения как эскиз.

Последний шаг перед тем, как мы сможем продолжить, — это щелкнуть вкладку Template Access и выбрать, какой шаблон будет иметь доступ. к только что созданному MIGX TV.

`Ввод данных в MIGX`

Теперь, когда мы настроили, что будет отображать MIGX и как мы хотим, чтобы это выглядело в диспетчере, давайте приступим к вводу некоторых значений, чтобы увидеть, как MIGX работает в MODX Manager.Создайте новый ресурс с шаблоном, который мы предоставили доступ для использования наш MIGX TV. Щелкните вкладку «Переменные шаблона». Вы должны увидеть метку «Свойства изображения» с добавлением Кнопка элемента и пустая таблица с заголовками, которые мы использовали в наших полях Grid Columns.

Когда вы нажимаете кнопку «Добавить элемент», открывается всплывающее окно MIGX с вкладкой и полями, которые мы настроили. в наших вкладках форм. Введите имя изображения и щелкните поле выбора изображения.Это будет откройте браузер MODX, который позволит нам выбрать существующее изображение или загрузить новое. Нажмите Готово и смотрите наша таблица обновляется только что введенным текстом и выбранным изображением.

`MIGX на передней панели`

Мы уже знаем, как использовать MIGX в Менеджере. Теперь давайте посмотрим, как мы можем использовать его на нашем сайте. MIGX поставляется с фрагментом называется getImageList, который используется для форматирования вывода наших телевизоров MIGX.Полезный совет из документации MODX по MIGX должен рассматривать getImageList как постоянно популярный сниппет, getResources

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

 
      [[! getImageList?
      & tvname = `myMIGXtv`
      & tpl = `@ CODE:   `]]

Как видите, мы завершаем наш вызов getImageList тегом ul.Отсюда у нас есть getImageList, который вызывается без кеширования с двумя параметрами. Первый параметр & tvname — это то место, где мы сообщаем getImageList имя нашего MIGX TV. Второй параметр & tpl — это встроенный шаблон, который будет заключать каждый MIGX TV в тег «li». и тег изображения. Этот тег изображения использует наше изображение MIGX TV в качестве источника и имя MIGX TV в качестве альтернативного текста для наш образ.

getImageList имеет гораздо больше параметров, которые позволят вам выполнять более удивительные вещи.Можно использовать MIGX с getResources, используйте фрагменты как tpls или даже используйте phpthumbof для генерации эскизов на лету. Есть много возможностей, так что не стесняйтесь играть с ним и изучать многие вещи, которые вы можете делать с MIGX. Помнить, если вы застряли, просто идите в MIGX раздел Форумы MODX и член сообщества или сам Бруно помогут вам с вашими вопросами, связанными с MIGX.

Обязательно ознакомьтесь с официальная документация MIGX и некоторые учебные пособия, которые помогут вам лучше понять MIGX.

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

.