Повторитель виджетов

1. Предмет и набор данных
2. Предмет
3. Набор данных
4. Отображение данных в позиции
5. Изображений
6. Справочные страницы и URL
7. Специальные свойства
8. расстояние
9. раскладка
10. пагинация
11. Границы, фоны и отступы
12. Подходит для содержимого в HTML
13. Изолировать радиогруппы и группы выбора
14. Репитерная маска
15. Особые взаимодействия
16. OnItemLoad
17. OnItemResize
18. Сортировка и фильтрация строк
19. фильтрация
20. Динамическое редактирование набора данных
21. Объекты и свойства набора данных
22. Item и TargetItem
23. повторитель

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

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

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

Предмет и набор данных

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

Текст и изображения, хранящиеся в наборе данных, отображаются на виджетах в элементе посредством взаимодействий в событии повторителя OnItemLoad .

Предмет

Коллекция повторяющихся виджетов называется «элемент». Вы можете редактировать виджеты в элементе, дважды щелкнув повторитель на холсте или на панели Outline . При редактировании элемента вы увидите только один экземпляр содержащихся в нем виджетов и можете скрыть другие виджеты на странице, щелкнув « Изолировать» в правом верхнем углу холста.

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

Набор данных

Таблица данных, которая контролирует повторения элементов ретранслятора, называется «набором данных». Вы можете просматривать и редактировать набор данных повторителя на панели « Стиль» . Чтобы добавить строку или столбец в набор данных, нажмите Добавить столбец , Добавить строку или используйте значки над таблицей. Вы также можете использовать эти кнопки для перемещения и удаления столбцов и строк, или вы можете сделать это, щелкнув правой кнопкой мыши ячейки в таблице.

Данные в наборе данных повторителя - это то, что определяет различия между повторениями элемента повторителя. Например, повторитель в библиотеке виджетов « По умолчанию» начинается с трех строк данных, каждая из которых содержит число: 1, 2 и 3. Это числа, которые вы видите напечатанными на трех прямоугольных виджетах повторителя на холсте. (Эта связь осуществляется с помощью взаимодействия, объясненного в следующем разделе.)

Совет: Вы можете вставить табличные данные из приложений электронных таблиц, таких как Microsoft Excel и Google Sheets, в набор данных ретранслятора, выбрав ячейку и нажав CTRLV (Windows) или CMDV (Mac).

Отображение данных в позиции

Текст

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

Чтобы отобразить текст набора данных на виджете в элементе повторителя, используйте действие « Задать текст» в повторителе. OnItemLoad событие. Выделите текст в раскрывающемся списке « Установить на» и щелкните значок « fx» справа от поля « Значение» .

В верхней части диалогового окна «Редактировать текст» нажмите « Вставить переменную или функцию» . В разделе « Повторитель » раскрывающегося списка нажмите « Item.ColumnName» , где «ColumnName» - это имя столбца набора данных, содержащего ваш текст. (Если вы работаете с ретранслятором по умолчанию, например, вы увидите Item.Column0 в списке.)

Нажмите кнопку ОК, чтобы закрыть диалоговое окно « Редактировать текст ». Текст из выбранного столбца набора данных теперь должен отображаться на целевом виджете в элементе повторителя.

Изображений

Ячейки набора данных также могут содержать файлы изображений. Щелкните правой кнопкой мыши ячейку и выберите « Импортировать изображение», чтобы открыть файловый браузер вашего компьютера, из которого вы можете выбрать нужное изображение.

Чтобы отобразить изображения набора данных на виджете изображения в элементе повторителя, настройте действие « Задать изображение» под повторителем. OnItemLoad событие. В разделе « Установить изображение по умолчанию» выберите « Значение» в раскрывающемся списке, а затем щелкните значок « fx» справа от текстового поля.

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

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

Справочные страницы и URL

Ячейки набора данных также могут содержать URL-адреса и ссылки на другие страницы в файле RP. Введите URL-адреса в виде простого текста. Чтобы сохранить ссылку на страницу, щелкните правой кнопкой мыши ячейку и выберите « Страница ссылки» . В появившемся диалоговом окне выберите страницу, для которой вы хотите сохранить ссылку.

Вы можете использовать URL-адреса и ссылки на страницы для создания взаимодействий Open Link для событий виджета в элементе повторителя - например, для события виджета кнопки OnClick . Выберите « Ссылка на внешний URL-адрес» в раскрывающемся списке « Ссылка на» , а затем щелкните значок « fx» рядом с текстовым полем с текстом https: //.

В верхней части появившегося диалогового окна « Изменить значение » нажмите « Вставить переменную или функцию» . В разделе « Повторитель » раскрывающегося списка щелкните « Item.ColumnName» , где «ColumnName» - это имя столбца набора данных, содержащего URL-адреса и ссылки на страницы.

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

Специальные свойства

Интервал, расположение и разбиение на страницы

По умолчанию все элементы повторителя видны и расположены вертикально в одном столбце без пробелов между элементами. Вы можете изменить это с помощью параметров в разделах Spacing , Layout и Pagination , разделов панели Style .

расстояние

В разделе « Интервалы » панели « Стиль» вы можете указать, сколько пустого пространства должно быть между строками и / или столбцами элементов повторителя. Если вы установили цвет фона для повторителя, он будет виден в этом пустом пространстве.

раскладка

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

пагинация

Разбиение повторителя разбивает его элементы на несколько «страниц» - не путать с страницами-прототипами на панели « Страницы», чтобы вы могли контролировать количество элементов, видимых одновременно.

В разделе « Разбивка на страницы » панели « Стиль» установите флажок « Несколько страниц» . Введите количество элементов, которые вы хотите отображать на каждой странице, и введите номер страницы, на которой вы хотите, чтобы повторитель запускался (по умолчанию 1). Вы можете перемещаться по страницам повторителя, используя действие « Установить текущую страницу» , и вы можете динамически изменять количество элементов на странице, используя действие « Установить элементы на страницу» .

Чтобы узнать больше, взгляните на Повторите учебник по пагинации ,

Границы, фоны и отступы

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

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

Подходит для содержимого в HTML

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

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

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

Изолировать радиогруппы и группы выбора

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

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

Репитерная маска

Повторители по умолчанию закрыты зеленой маской, чтобы их было легче отличать от других на холсте. Вы можете переключить маску в View> Masks в меню приложения.

Примечание. Маски виджета, включая маску повторителя, не применяются в веб-браузере.

Особые взаимодействия

Специфичные для ретранслятора события

OnItemLoad

Событие OnItemLoad запускается один раз для каждого экземпляра элемента повторителя, который загружается в веб-браузер. Например, событие будет инициировано три раза для повторителя, набор данных которого содержит три строки, поскольку каждая строка создает новый экземпляр элемента. Кроме того, событие OnItemLoad всегда обрабатывает строки набора данных в порядке сверху вниз.

Ретранслятор загружает все свои элементы при первой загрузке страницы и перезагружает все свои элементы всякий раз, когда внесены изменения в набор данных ретранслятора , Это означает, что событие OnItemLoad запускается один раз для каждого экземпляра элемента при загрузке страницы и каждый раз, когда строки набора данных добавляются, удаляются или обновляются .

OnItemResize

Событие OnItemResize возникает всякий раз, когда размер экземпляра элемента повторителя изменяется из-за изменений в содержащихся в нем виджетах. Это происходит только когда ретранслятор настроен на Fit to Content ,

Сортировка и фильтрация строк

Сортировка

Используя действия Добавить сортировку и Удалить сортировку , вы можете динамически сортировать строки репитера по любому из его столбцов набора данных. Вы можете отсортировать значения столбца по любому из следующих типов данных:

• Число
• Текст
• Текст (с учетом регистра)
• Дата - ГГГГ-ММ-ДД
• Дата - ММ / ДД / ГГГГ

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

Чтобы узнать больше, проверьте Учебник по сортировке репитеров ,

фильтрация

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

• [[Item.State == 'CA']] будет отображать только строки со значением "CA" в столбце State

• [[Item.Price <= 20]] будет отображать только те строки, значение которых в столбце Цена меньше или равно 20

• [[Item.TasksCompleted! = Item.TasksAssigned]] будет отображать только те строки, значение которых в столбце TasksCompleted не равно их значению в столбце TasksAssigned

Чтобы узнать больше, проверьте Учебник по фильтрации строк репитера ,

Динамическое редактирование набора данных

Вы можете динамически изменять набор данных ретранслятора в веб-браузере, используя следующие действия:

• Добавить строки позволяет добавлять новые строки в набор данных
• Удалить строки удаляет строки из набора данных
• Обновление строк позволяет изменять значения столбцов для существующих строк в наборе данных
• Пометка строк позволяет назначать строки, которые будут удалены или обновлены позднее
• Unmark Rows снимает пометки с ранее помеченных строк

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

Объекты и свойства набора данных

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

Item и TargetItem

Объект Item ссылается на отдельную строку набора данных повторителя, обрабатываемую данным взаимодействием, обычно действием под событием OnItemLoad . (Этот объект, который вы видели, использовался для доступа к значениям столбцов в предыдущих разделах этого документа.)

TargetItem - это похожий объект, который дает вам доступ ко всем тем же свойствам, что и Item . Разница между ними заключается в том, что вы можете использовать TargetItem во взаимодействии с виджетом внутри элемента повторителя для доступа к информации о других элементах в повторителе.

Вы можете использовать следующие свойства с объектами Item и TargetItem :

• Item.ColumnName: представляет данные, хранящиеся в именованном столбце. (Это свойство, которое вы видели, использовалось в предыдущих разделах этого документа.)

• Item.isFirst: Возвращает true, если строка является первой видимой строкой в ​​повторителе, после того, как были применены все сортировка, фильтрация и разбиение на страницы. В противном случае возвращается false.

• Item.isLast: возвращает true, если строка является последней видимой строкой в ​​повторителе, после того как все сортировки, фильтрации и разбиения на страницы были применены. В противном случае он возвращает истину.

• Item.index: числовое значение, представляющее номер строки в наборе данных. Например, это значение для третьей строки в наборе данных будет равно 3.

• Item.isEven: возвращает true, если Item.index является четным числом. В противном случае возвращается false.

• Item.isOdd: возвращает true, если Item.index нечетное число. В противном случае возвращается false.

• Item.isMarked: возвращает true, если строка в данный момент отмеченный , В противном случае возвращается false.

• Item.isVisible: Возвращает true, если строка в настоящее время видна в ретрансляторе после применения всех фильтров и разбивки на страницы. В противном случае возвращается false.

повторитель

Объект Repeater предоставляет информацию обо всем наборе данных ретранслятора. При работе с событием виджета внутри элемента повторителя вы получите доступ к этому объекту с помощью Item.Repeater : [[Item.Repeater.dataCount]]

Вы также можете использовать эту запись при работе с собственные события ретранслятора или Вы можете использовать Это как ярлык, так как ретранслятор обращается к своим собственным свойствам: [[This.dataCount]]

При работе с виджетом или событием страницы, которое существует за пределами повторителя, вам необходимо сохранить повторитель как локальная переменная и затем добавьте свойства ниже к имени локальной переменной: [[LVAR1.dataCount]]

Вы можете использовать следующие свойства с объектом Repeater :

• Repeater.dataCount: Числовое значение, представляющее общее количество строк в наборе данных ретранслятора.

• Repeater.itemCount: Числовое значение, которое представляет количество строк в повторителе после применения всей фильтрации.

• Repeater.visibleItemCount: Числовое значение, которое представляет текущее количество видимых строк в повторителе после применения всех фильтров и разбиения на страницы.

• Repeater.pageCount: Числовое значение, представляющее общее количество страниц в повторителе.

• Repeater.pageIndex: Числовое значение, представляющее номер видимой в данный момент страницы в повторителе.