Всем привет. Сегодня я расскажу вам немного больше о функционале репитеров и о том, как прототипировать таблицы на их основе.
В прошлый раз мы рисовали таблицу, прототипировали прокрутку, сортировку и фильтрацию контента.
Но это не все, что можно сделать с помощью репитера.
Ниже я расскажу о том, как добавлять и удалять строки таблицы, а также нумерацию страниц.
Рис.
1 Начнем с нумерации страниц.
Выберите репитер и перейдите на вкладку «Стиль», здесь находятся основные настройки отображения репитера.
В группе «Пагинация» ставим флаг «Несколько страниц», задаем количество строк, которые хотим отображать одновременно (Элементов на странице) и с какой страницы отображать по умолчанию (Начальная страница).
Рис.
2 Далее рисуем кнопки, которые будем использовать для навигации по страницам.
Для простоты я возьму любые две стрелки из одного и того же Awesome Font и цифры «1» и «2».
Это будут элементы управления для перемещения по страницам репитера.
Рис.
3 Выберите стрелку «Назад» и, нажав на нее, установите действие «Установить текущую страницу», в поле «Выбрать страницу» выберите пункт «Предыдущая».
Теперь при нажатии на кнопку репитер будет показывать предыдущую страницу.
Рис.
4 То же самое делаем со стрелкой «Вперед», но указываем соответственно не «Предыдущий», а «Следующий».
Готово, теперь мы можем использовать стрелки для навигации по страницам репитера.
Кнопки с номерами страниц прототипируются точно так же, только в поле «Установить текущую страницу» выбирается пункт «Значение», а в поле «Страница#» вводится номер страницы или пишется функция, определяющая его.
.
Рис.
5 Не забывайте, что когда вы нажимаете на номер страницы, он должен находиться в положении «Выбрано».
Затем добавьте в таблицу новую строку.
Сначала нам нужно создать форму для добавления новой строки.
Другими словами, мы должны создать форму с полями, похожими на наши элементы в таблице, и привязать их к контейнерам-ретрансляторам.
Рисуем виджет и следим за типами входов.
Мы реализуем имя, адрес электронной почты и телефон в виде полей ввода текста, пол в виде раскрывающегося списка или переключателей, а возраст в качестве средства выбора даты.
Рис.
6 Готовый.
Чтобы добавить новую строку, мы будем использовать значок «Круг плюс» из Awesome Font. Давайте придадим ему стиль взаимодействия.
В событии OnClick отобразится наша форма для добавления нового клиента.
Обязательно назовите все поля ввода в форме (inputs).
Новая строка будет добавлена нажатием кнопки «Создать», соответственно устанавливаем для нее действие «По клику», в «Редакторе дел» находим вкладку «Наборы данных» и выбираем в ней действие «Добавить строки».
Нажмите на кнопку «Добавить строки» на панели событий и увидите таблицу, в которой каждый столбец соответствует элементу из нашего репитера.
Чтобы текст с наших входов отображался в нужных нам столбцах, нам придется прибегнуть к использованию локальных переменных.
Если говорить максимально просто, то процесс будет выглядеть так: мы создаем новую локальную переменную (например «Name_Var»), присваиваем ей значение из соответствующего входа (например «Name_Input») и затем говорим, что значение элемента «Имя» будет равна локальной переменной «Name_Var».
Рис.
7 Заполните таблицу до конца.
Рис.
8 Далее разместите на экране форму добавления нового клиента и скройте ее.
При нажатии на кнопку «Добавить» она должна появиться, при нажатии на кнопку «Создать» она должна закрыться и в нашей таблице должна появиться новая строка.
Проверяем, добавляется.
Не забывайте, что когда вы добавляете новую строку, она попадет в самый конец списка и вы, скорее всего, ее просто не увидите.
Чтобы избежать этой проблемы, назначьте на создание таблицы дополнительное действие, которое будет сортировать таблицу так, чтобы было видно добавление новой строки (о том, как сделать сортировку, читайте в первой части статьи).
Теперь давайте сделаем возможным удаление строк.
Для этого заходим в репитер и добавляем к нему иконку, нажав на которую мы удалим линию.
Я буду использовать значок «Корзина» из Awesome Font. Назовем это «Удалить» и отметим флажок «Скрыть».
Добавляем иконку в общую группу (чтобы Стиль взаимодействия работал) и на основе события OnMouseHover назначаем этой группе действие «Показать», с помощью которого мы будем показывать эту самую иконку.
Другими словами, при наведении курсора на линию появится значок.
Теперь сделаем так, чтобы значок исчезал при удалении курсора от строки.
Для этого выбираем репитер и на основе события OnMouseOut устанавливаем действие «Скрыть» для нашей иконки.
Теперь убедимся, что при нажатии на иконку строка удаляется.
Заходим в репитер, выбираем иконку и при событии "OnClick" устанавливаем действие "Удалить строки" (Repeaters\Datasets\Delete Rows), выбираем репитер и включаем радиокнопку напротив "Это", это означает что эта конкретная строка будет удалена.
Также можно задать правила удаления – «Правило» и удаления выбранной строки или строк – «Отмечено» (например, в ситуации, когда элемент управления удалением находится в заголовке таблицы, а не отображается в конкретной строке).
Рис.
9 Проверим, что все работает. Вообще с помощью репитеров можно делать очень многое, не только табличное отображение данных, но и карточные системы и целые страницы, которые будут содержать динамически загружаемую информацию.
В двух частях этой статьи мы затронули основной функционал, на основе которого вы сможете сделать свои прототипы намного богаче и совершеннее.
В следующий раз я расскажу вам о некоторых хитростях, которые лично мне помогают в работе.
Это все на сегодня.
Спасибо за внимание.
Теги: #Прототипирование #Графический дизайн #интерфейсы #Юзабилити #веб-дизайн #axure #axure
-
Восстановленные Струйные Картриджи
19 Oct, 24 -
Марк Кьюбан Положил Глаз На Врага Youtube
19 Oct, 24
