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, с помощью которой будет вызываться окно превью с контентом вашего превью-ресурса.