• iRidium studio 2019
• Прокручивающиеся списки

Типы прокручивающихся списков:

Static List​

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

Список позволяет разместить на одной странице множество попапов, и перемещаться между ними при помощи жестов. Список выглядит как графический элемент на странице или попапе. В его настройках указывается перечень и порядок следования попапов, которые будут прокручиваться внутри этого элемента. Если попап - в списке, его нельзя использовать самостоятельно или в еще одном списке (техническое ограничение).

Настройки Static List, кроме основных:

• Popups List - список попапов, которые нужно показать в списке
• Direction : Vertical / Horizontal - вертикальная или горизонтальная прокрутка списка. Зациклить список нельзя
• Scroll (Полоса прокрутки) - включить или выключить возможность пролистывания списка
• Resistance (%) - скорость, с которой список будет терять инерцию движения и останавливаться после отпускания
• Scroll bar - показать или скрыть полосу прокрутки
• PullUp Tweener - тип анимации при листании списка
• PullUp Time - скорость листания списка
• Attach to - способ "прилипания" попапов к краям базового элемента списка: прилипание к центру, к верхнему краю, к нижнему краю, к обоим краям:
• • Center - середины попапов прилипают к центральной линии списка (центровка). Не подходит, если попапы шире (выше) самого списка;
• • Stick Up - левые (верхние) края попапов прилипают к левому (верхнему) краю списка. . Не подходит, если попапы шире (выше) самого списка;
• • Stick Up & Down - края попапов прилипают к краям списка (по направлению прокрутки). Подходит для больших попапов, которые можно будет открывать "по частям";
• • Columns - список заполняется колонками попапов. Вертикальный: слева-направо и сверху-вниз. Горизонтальный: сверху-вниз и слева-направо;
• • No - без прилипания к краям при остановке.
• Indent (px) - отступ между попапами списка, недоступен для для "Attach to: Center"
• End Indent – отступ между последним попапом и нижним краем Static List, недоступен для для "Attach to: Center"

''' скачать:''' пример реализации статического списка

List​

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

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

Инструкция по заполнению списка из JavaScript

Настройки List, кроме основных:

• Select template - попап-шаблон, на базе которого будет строиться список (путем клонирования и заполнения данными)
• Direction : Vertical / Horizontal - вертикальная или горизонтальная прокрутка списка. Зациклить список нельзя
• Scroll bar - показать или скрыть полосу прокрутки
• Resistance (%) - скорость, с которой список будет терять инерцию движения и останавливаться после отпускания

Advanced List​

Улучшенный лист хорошо работает с большим количеством пунктов и его можно заполнить массивом данных из переменной. Данные – это массив объектов, каждый из которых описывает 1 пункт списка. Список может строиться на базе нескольких пунктов-шаблонов и заполняться разными данными. Чтобы обновить список, необходимо передать ему обновленный массив данных.

К окну-попапу, выбранному в качестве шаблона пункта, можно привязать команду – она будет повторяться на всех пунктах списка

Информация о том, на какой пункт списка нажали, приходит в слушатель события IR.EVENT_LIST_ITEM_CHANGE

Настройки Advanced List, кроме основных:

• Direction : Vertical / Horizontal - вертикальная или горизонтальная прокрутка списка;
• Scroll Bar - отображение полосы прокрутки списка;
• Stop By Tap - остановить движение списка при касании;
• Looped - зациклить список;
• Template setting - попапы-шаблоны, на базе которых строится список (путем клонирования). В каждом шаблоне можно указать соответствие свойств элементов шаблона ключам JSON объекта;
• Data source - переменная, в которую нужно записывать массив объектов для заполнения списка (json объект). Структура данных и способы ассоциации ключей и свойств пунктов см. далее.

Пример данных:

[
    {
        "__popup": "Folder",
        "Name": "Composer 1"
    },{
        "__popup": "Composition",
        "Song Name": "Song one",
        "Album": "First",
        "Length": "3:25"
    },{
        "__popup": "Composition",
        "Song Name": "Song two",
        "Album": "First",
        "Length": "2:12"
    },{
        "__popup": "Folder",
        "Name": "Composer 2"
    },{
        "__popup": "Composition",
        "Song Name": "Song three",
        "Album": "Second",
        "Length": "1:25"
    }
]

Template Setting – настройка попапов: шаблонов пунктов списка; связь пунктов списка с ключами json объекта:

1. Выберите шаблоны для пунктов списка - попапы, которые будут клонироваться, создавая пункты.

2. В настройках каждого шаблона создайте список свойств, в которые нужно записывать данные из JSON объекта. Справа от свойства можно вписать значение - это имя ключа в JSON объекте, значение из которого будет записано в соответствующее свойство. JSON объект может содержать разные данные для разных пунктов списка.

3. В Data source укажите переменную, которая передает массив объектов для заполнения списка.

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

скачать: пример заполнения списка данными из JSON объекта

Существует также предыдущая версия API для заполнения списков полностью из скрипта , но она не рекомендована к использованию.

Picker​

Барабан позволяет прокручивать список пунктов, изменять их количество, информацию в них. Основное применение – для установки даты или времени. Барабан можно создать только при помощи скрипта: см. Picker API.

Создайте барабан:

1. создайте новый попап - шаблон для строки барабана
2. с помощью Java Script сформируйте набор данных, из которых должен строиться барабан (например, список дат и месяцев). Используйте Picker API, чтобы создать и заполнить список
3. создайте графическое оформление барабана

Инструкция по заполнению Picker из JavaScript

скачать: пример реализации барабана