Всем привет. Сегодня я расскажу еще немного о функционале репитеров и как на их основе прототипировать таблицы.
В прошлый раз мы нарисовали таблицу, запрототипировали прокрутку контента, сортировку и фильтрацию. Но это далеко не все, что можно сделать с помощью репитера. Ниже я расскажу о том, как сделать для таблицы добавление и удаление строк, а также пагинацию.
Рис. 1
Начнем с пагинации. Выделим репитер и зайдем на вкладку Style, именно здесь находятся основные настройки отображения репитера. В группе ‘Pagination’ ставим флаг ‘Multiple pages’, задаем количество строк, которое хотим одновременно отображать (Items per page) и с какой страницы отображать по умолчанию (Starting page).
Рис. 2
Далее рисуем кнопки, которыми мы будем ходить по страницам. Для простоты я возьму две любые стрелки из того же Awesome Font и цифры “1” и “2”. Это будут контролы для перемещения по страницам репитера.
Рис. 3
Выбираем стрелку “Назад” и на клик по ней задаем действие ‘Set Current Page’, в поле ‘Select the page’ выбираем пункт ‘Previous’. Теперь при клике на кнопку репитер будет показывать предыдущую страницу.
Рис. 4
Проделываем то же самое для стрелки “Вперед”, но указываем соответственно не ‘Previous’, а ‘Next’. Готово, теперь мы можем ходить стрелками по страницам репитера.
Кнопки с номерами страниц прототипируются точно так же, только в поле ‘Set Current Page’ выбирается пункт ‘Value’, а в поле ‘Page#’ ставится номер страницы либо пишется функция его определяющая.
Рис. 5
Не забудьте, что при клике на номер страницы, он должен встать в положение ‘Selected’.
Далее, добавляем новую строку в таблицу. Для начала нам необходимо сделать форму для добавления новой строки. Иными словами мы должны создать форму с полями аналогичными нашим айтемам в таблице и привязать их к контейнерам репитера. Рисуем виджет и следим за типами инпутов. Имя, почту и телефон реализуем текстовыми полями ввода, пол — дропбоксом или радиокнопками, а возраст датапикером.
Рис. 6
Готово. Для добавления новой строки будем использовать иконку “Plus Circle” из Awesome Font. Зададим ей Interaction style. По событию OnClick она будет показывать нашу форму добавления нового клиента. Обязательно называем все поля ввода в форме (инпуты). Добавляться новая строка будет по кнопке “Создать”, соответственно задаем ей действие ‘OnClick’, в ‘Case Editor’ находим вкладку ‘Datasets’ и выбираем в нем действие ‘Add Rows’. Жмем на кнопку ‘Add Rows’ в панели события и видим таблицу, в которой каждый столбец соответствует айтему из нашего репитера. Для того чтобы текст из наших инпутов отображался в нужных нам столбцах, придется прибегнуть к помощи локальных переменных. Если говорить максимально упрощенно, то процесс будет выглядеть следующим образом: заводим новую локальную переменную (например ‘Name_Var’), присваиваем ей значение из соответствующего инпута (например ‘Name_Input’) и далее говорим, что значение айтема ‘Name’ будет равно локальной переменной ‘Name_Var’.
Рис. 7
Заполняем таблицу до конца.
Рис. 8
Далее размещаем форму добавления нового клиента на экране и скрываем ее. При клике на кнопку “Добавить” она должна появиться, при клике на кнопку “Создать” она должна закрыться и в нашей табличке должна появится новая строка. Проверяем, добавляется. Не забудьте, что когда вы добавите новую строку, она попадет в самый конец списка и вы скорее всего ее просто не увидите. Чтобы избежать этой проблемы назначьте на создание таблицы дополнительное действие, которое будет сортировать таблицу так, чтобы добавление новой строки было видимым (как сделать сортировку читайте в первой части данной статьи).
Теперь сделаем возможность удаления строк. Для этого заходим в репитер и добавляем в него иконку, по клику на которую мы будем удалять строку. Я буду использовать иконку ‘Trash’ из Awesome Font. Назовем ее ‘Delete’ и поставим галочку ‘Hiden’. Добавляем иконку в общую группу (чтобы Interaction Style срабатывал) и по событию ‘OnMouseHover’ задаем этой группе действие ‘Show’, по которому будем эту самую иконку показывать. Иными словами при наведении на строку иконка будет появляться. Теперь сделаем так, чтобы иконка исчезала когда со строки уводится курсор. Для этого выделяем репитер и по событию ‘OnMouseOut’ задаем действие ‘Hide’ для нашей иконки. Теперь сделаем так, чтобы по клику на иконку, происходило удаление строки. Заходим в репитер, выбираем иконку и по событию ‘OnClick’ задаем действие ‘Delete Rows’ (Repeaters\Datasets\Delete Rows), выбираем репитер и включаем радиокнопку напротив ‘This’, это значит, что будет удаляться конкретно эта строка. Также можно задать правила удаления — ‘Rule’ и удаление выбранной строки или строк — ‘Marked’ (например в ситуации, когда контрол для удаления стоит в шапке таблицы, а не появляется в конкретной строке).
Рис. 9
Проверяем, все работает.
В целом с помощью репитеров можно делать очень многие вещи, не только табличное отображение данных, но и карточные системы и целые страницы, которые будут содержать динамически подгружаемую информацию. В двух частях этой статьи мы коснулись основного функционала, на основе которого вы сможете делать свои прототипы гораздо богаче и проработаннее. В следующий раз я расскажу про некоторые трюки, которые лично мне помогают в работе.
А на сегодня все. Спасибо за внимание.
В прошлый раз мы нарисовали таблицу, запрототипировали прокрутку контента, сортировку и фильтрацию. Но это далеко не все, что можно сделать с помощью репитера. Ниже я расскажу о том, как сделать для таблицы добавление и удаление строк, а также пагинацию.
Рис. 1
Начнем с пагинации. Выделим репитер и зайдем на вкладку Style, именно здесь находятся основные настройки отображения репитера. В группе ‘Pagination’ ставим флаг ‘Multiple pages’, задаем количество строк, которое хотим одновременно отображать (Items per page) и с какой страницы отображать по умолчанию (Starting page).
Рис. 2
Далее рисуем кнопки, которыми мы будем ходить по страницам. Для простоты я возьму две любые стрелки из того же Awesome Font и цифры “1” и “2”. Это будут контролы для перемещения по страницам репитера.
Рис. 3
Выбираем стрелку “Назад” и на клик по ней задаем действие ‘Set Current Page’, в поле ‘Select the page’ выбираем пункт ‘Previous’. Теперь при клике на кнопку репитер будет показывать предыдущую страницу.
Рис. 4
Проделываем то же самое для стрелки “Вперед”, но указываем соответственно не ‘Previous’, а ‘Next’. Готово, теперь мы можем ходить стрелками по страницам репитера.
Кнопки с номерами страниц прототипируются точно так же, только в поле ‘Set Current Page’ выбирается пункт ‘Value’, а в поле ‘Page#’ ставится номер страницы либо пишется функция его определяющая.
Рис. 5
Не забудьте, что при клике на номер страницы, он должен встать в положение ‘Selected’.
Далее, добавляем новую строку в таблицу. Для начала нам необходимо сделать форму для добавления новой строки. Иными словами мы должны создать форму с полями аналогичными нашим айтемам в таблице и привязать их к контейнерам репитера. Рисуем виджет и следим за типами инпутов. Имя, почту и телефон реализуем текстовыми полями ввода, пол — дропбоксом или радиокнопками, а возраст датапикером.
Рис. 6
Готово. Для добавления новой строки будем использовать иконку “Plus Circle” из Awesome Font. Зададим ей Interaction style. По событию OnClick она будет показывать нашу форму добавления нового клиента. Обязательно называем все поля ввода в форме (инпуты). Добавляться новая строка будет по кнопке “Создать”, соответственно задаем ей действие ‘OnClick’, в ‘Case Editor’ находим вкладку ‘Datasets’ и выбираем в нем действие ‘Add Rows’. Жмем на кнопку ‘Add Rows’ в панели события и видим таблицу, в которой каждый столбец соответствует айтему из нашего репитера. Для того чтобы текст из наших инпутов отображался в нужных нам столбцах, придется прибегнуть к помощи локальных переменных. Если говорить максимально упрощенно, то процесс будет выглядеть следующим образом: заводим новую локальную переменную (например ‘Name_Var’), присваиваем ей значение из соответствующего инпута (например ‘Name_Input’) и далее говорим, что значение айтема ‘Name’ будет равно локальной переменной ‘Name_Var’.
Рис. 7
Заполняем таблицу до конца.
Рис. 8
Далее размещаем форму добавления нового клиента на экране и скрываем ее. При клике на кнопку “Добавить” она должна появиться, при клике на кнопку “Создать” она должна закрыться и в нашей табличке должна появится новая строка. Проверяем, добавляется. Не забудьте, что когда вы добавите новую строку, она попадет в самый конец списка и вы скорее всего ее просто не увидите. Чтобы избежать этой проблемы назначьте на создание таблицы дополнительное действие, которое будет сортировать таблицу так, чтобы добавление новой строки было видимым (как сделать сортировку читайте в первой части данной статьи).
Теперь сделаем возможность удаления строк. Для этого заходим в репитер и добавляем в него иконку, по клику на которую мы будем удалять строку. Я буду использовать иконку ‘Trash’ из Awesome Font. Назовем ее ‘Delete’ и поставим галочку ‘Hiden’. Добавляем иконку в общую группу (чтобы Interaction Style срабатывал) и по событию ‘OnMouseHover’ задаем этой группе действие ‘Show’, по которому будем эту самую иконку показывать. Иными словами при наведении на строку иконка будет появляться. Теперь сделаем так, чтобы иконка исчезала когда со строки уводится курсор. Для этого выделяем репитер и по событию ‘OnMouseOut’ задаем действие ‘Hide’ для нашей иконки. Теперь сделаем так, чтобы по клику на иконку, происходило удаление строки. Заходим в репитер, выбираем иконку и по событию ‘OnClick’ задаем действие ‘Delete Rows’ (Repeaters\Datasets\Delete Rows), выбираем репитер и включаем радиокнопку напротив ‘This’, это значит, что будет удаляться конкретно эта строка. Также можно задать правила удаления — ‘Rule’ и удаление выбранной строки или строк — ‘Marked’ (например в ситуации, когда контрол для удаления стоит в шапке таблицы, а не появляется в конкретной строке).
Рис. 9
Проверяем, все работает.
В целом с помощью репитеров можно делать очень многие вещи, не только табличное отображение данных, но и карточные системы и целые страницы, которые будут содержать динамически подгружаемую информацию. В двух частях этой статьи мы коснулись основного функционала, на основе которого вы сможете делать свои прототипы гораздо богаче и проработаннее. В следующий раз я расскажу про некоторые трюки, которые лично мне помогают в работе.
А на сегодня все. Спасибо за внимание.