MIGX

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 может быть загружено с помощью менеджера MODx Revolution, используя Package Management, или из хранилища дополнений MODx.

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

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

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

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

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

1. Откройте меню "System" из Revolution Manager
2. Кликните на меню "Actions"
3. Найдите в списке действий слева раздел MIGX fи кликнете на нем правой клавишей мыши.
4. Кликните "Create Action Here"
5. Выберите для контроллера тип "index"
6. Отметьте для именованной области "migx"
7. Выберите для контроллера исходных данных "No Action"
8. Кликните "Save"
9. Обновите страницу
10. Найдите раздел Components в списке меню высшего уровня справа, кликните правой клавишей мыши на нем.
11. Кликните "Place Action Here" и задайте следующие параметры:
1. Lexicon Key: migx
2. Description: Configurator and Package Manager
3. Action: migx - index (Есть несколько страниц, отсортированных в алфавитном порядке, убедитесь , что вы находитесь после всех основных действий.)
4. Icon: (не заполняйте)
5. Parameters: &configs=packagemanager||migxconfigs||setup
6. Handler: (не заполняйте)
7. Permissions: (не заполняйте)
12. Кликните "save"
13. Обновите страницу
14. Откройте меню "Components"
15. Кликните для создания элемента на new MIGX Action.
16. Кликните Setup / Upgrade
17. ВНИМАНИЕ: Перед выполнением следующего шага вам лучше сделать копию базы данных.
18. Кликните по кнопке Setup
19. Сделано!

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

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

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

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

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

1. Откройте меню "Components" с помощью Revolution Manager
2. Кликните MIGX Action Item
3. Кликните закладку Setup / Upgrade
4. ВНИМАНИЕ: Перед выполнением следующего шага вам лучше сделать копию базы данных.
5. Кликните по кнопке Upgrade
6. Сделано!

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

Шаг 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

Шаг 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 (ввод данных)

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

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

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

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

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

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

Опция превью

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

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

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