» » » Прототипируем таблицу в Axure, часть вторая

 

Прототипируем таблицу в Axure, часть вторая

Автор: admin от 17-04-2017, 09:30, посмотрело: 621

Всем привет. Сегодня я расскажу еще немного о функционале репитеров и как на их основе прототипировать таблицы.

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

Прототипируем таблицу в Axure, часть вторая
Рис. 1

Начнем с пагинации. Выделим репитер и зайдем на вкладку Style, именно здесь находятся основные настройки отображения репитера. В группе ‘Pagination’ ставим флаг ‘Multiple pages’, задаем количество строк, которое хотим одновременно отображать (Items per page) и с какой страницы отображать по умолчанию (Starting page).

Прототипируем таблицу в Axure, часть вторая
Рис. 2

Далее рисуем кнопки, которыми мы будем ходить по страницам. Для простоты я возьму две любые стрелки из того же Awesome Font и цифры “1” и “2”. Это будут контролы для перемещения по страницам репитера.

Прототипируем таблицу в Axure, часть вторая
Рис. 3

Выбираем стрелку “Назад” и на клик по ней задаем действие ‘Set Current Page’, в поле ‘Select the page’ выбираем пункт ‘Previous’. Теперь при клике на кнопку репитер будет показывать предыдущую страницу.

Прототипируем таблицу в Axure, часть вторая
Рис. 4

Проделываем то же самое для стрелки “Вперед”, но указываем соответственно не ‘Previous’, а ‘Next’. Готово, теперь мы можем ходить стрелками по страницам репитера.

Кнопки с номерами страниц прототипируются точно так же, только в поле ‘Set Current Page’ выбирается пункт ‘Value’, а в поле ‘Page#’ ставится номер страницы либо пишется функция его определяющая.

Прототипируем таблицу в Axure, часть вторая
Рис. 5

Не забудьте, что при клике на номер страницы, он должен встать в положение ‘Selected’.

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

Прототипируем таблицу в Axure, часть вторая
Рис. 6

Готово. Для добавления новой строки будем использовать иконку “Plus Circle” из Awesome Font. Зададим ей Interaction style. По событию onclick она будет показывать нашу форму добавления нового клиента. Обязательно называем все поля ввода в форме (инпуты). Добавляться новая строка будет по кнопке “Создать”, соответственно задаем ей действие ‘onclick’, в ‘Case Editor’ находим вкладку ‘Datasets’ и выбираем в нем действие ‘Add Rows’. Жмем на кнопку ‘Add Rows’ в панели события и видим таблицу, в которой каждый столбец соответствует айтему из нашего репитера. Для того чтобы текст из наших инпутов отображался в нужных нам столбцах, придется прибегнуть к помощи локальных переменных. Если говорить максимально упрощенно, то процесс будет выглядеть следующим образом: заводим новую локальную переменную (например ‘Name_Var’), присваиваем ей значение из соответствующего инпута (например ‘Name_Input’) и далее говорим, что значение айтема ‘Name’ будет равно локальной переменной ‘Name_Var’.

Прототипируем таблицу в Axure, часть вторая
Рис. 7

Заполняем таблицу до конца.

Прототипируем таблицу в Axure, часть вторая
Рис. 8

Далее размещаем форму добавления нового клиента на экране и скрываем ее. При клике на кнопку “Добавить” она должна появиться, при клике на кнопку “Создать” она должна закрыться и в нашей табличке должна появится новая строка. Проверяем, добавляется. Не забудьте, что когда вы добавите новую строку, она попадет в самый конец списка и вы скорее всего ее просто не увидите. Чтобы избежать этой проблемы назначьте на создание таблицы дополнительное действие, которое будет сортировать таблицу так, чтобы добавление новой строки было видимым (как сделать сортировку читайте в первой части данной статьи).

Теперь сделаем возможность удаления строк. Для этого заходим в репитер и добавляем в него иконку, по клику на которую мы будем удалять строку. Я буду использовать иконку ‘Trash’ из Awesome Font. Назовем ее ‘Delete’ и поставим галочку ‘Hiden’. Добавляем иконку в общую группу (чтобы Interaction Style срабатывал) и по событию ‘OnMouseHover’ задаем этой группе действие ‘Show’, по которому будем эту самую иконку показывать. Иными словами при наведении на строку иконка будет появляться. Теперь сделаем так, чтобы иконка исчезала когда со строки уводится курсор. Для этого выделяем репитер и по событию ‘onmouseout’ задаем действие ‘Hide’ для нашей иконки. Теперь сделаем так, чтобы по клику на иконку, происходило удаление строки. Заходим в репитер, выбираем иконку и по событию ‘onclick’ задаем действие ‘Delete Rows’ (RepeatersDatasetsDelete Rows), выбираем репитер и включаем радиокнопку напротив ‘This’, это значит, что будет удаляться конкретно эта строка. Также можно задать правила удаления — ‘Rule’ и удаление выбранной строки или строк — ‘Marked’ (например в ситуации, когда контрол для удаления стоит в шапке таблицы, а не появляется в конкретной строке).

Прототипируем таблицу в Axure, часть вторая
Рис. 9

Проверяем, все работает.

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

А на сегодня все. Спасибо за внимание.

Источник: Хабрахабр

Категория: Программирование » Веб-разработка

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

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *