Суперпрототип в Axure: кастомная JS-валидация

153 full reads
267 story viewsUnique page visitors
153 read the story to the endThat's 57% of the total page views
4,5 minutes — average reading time

Суперпрототип в Axure: кастомная JS-валидация
Суперпрототип в Axure: кастомная JS-валидация

В одной из предыдущих статей я рассказывал, как заставить Axure выполнять произвольный JS-код без использования плагинов AxShare. Теперь пришло время показать, как это чудо работает на практике.

Для примера возьмем что-нибудь простое - ту же валидацию. Представим, что нам нужно сделать числовое поле с кнопками "+" и "-", в которое при этом можно вводить цифры вручную. Типа такого:

Суперпрототип в Axure: кастомная JS-валидация
Суперпрототип в Axure: кастомная JS-валидация

Условия:
⇒ значением могут быть только целые числа, все остальные символы должны быть убиты;
⇒ минимальное число в поле должно быть 10, максимальное - 100;
⇒ изменение числа по кнопкам также должно не выходить из этого диапазона;
⇒ если вручную было введено число больше - в поле остается 100, если меньше - 10;
⇒ при ручном вводе исправление происходит при потере полем фокуса.

Ничего, в общем-то, сложного, но из коробки Axure ничего из этого не умеет (кроме, пожалуй, последнего пункта). Поэтому мы просто заставим ее понимать наши собственные скрипты.

Общая схема валидации

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

Мы можем изменять число в поле двумя способами: вручную и с помощью кнопок "+" и "-". Соответственно, проверять будем все варианты.

Для этого нам понадобится три JavaScript-функции, одна из которых будет проверять, больше ли наше число десяти, другая - меньше ли оно ста, а третья - сводить эти две функции воедино, очищать данные и выдавать результат.

Кроме того, мы будем использовать отдельный скрытый блок с промежуточным результатом наших действий, в который будем записывать получившееся число. Можно было бы для этого использовать глобальные переменные, но тогда возникнет проблема при копировании нашего "виджета" - придется проходиться по всем элементам и менять название переменной.

Архитектура нашего кода будет не идеальной, но это - необходимая жертва доступности настоящего материала для новичков. При этом статья не является пошаговым руководством, а лишь указанием, куда следует копать. Наверняка вы встретите в ней массу непонятных моментов. Гуглите, развивайтесь. Никто не обещал, что будет легко :)

Внедряем собственную JS-надстройку

Для того, чтобы научить Axure понимать наш собственный JS, необходимо сначала произвести нехитрые манипуляции, описанные в этой статье про кастомную JS-надстройку.

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

Добавляем элементы поля

Итак, представим, что у нас уже есть динамическая панель "AxureJS" с необходимым содержимым. Самое время добавить к ней наше поле со всеми кнопочками и оформительством.

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

Суперпрототип в Axure: кастомная JS-валидация
Суперпрототип в Axure: кастомная JS-валидация

Где:

  • count-text-number-10-100 - тот самый скрытый блок для промежуточного сохранения значения поля;
  • count-text-10-100 - само поле, вокруг которого и разведены все эти пляски с бубуном;

Все, с оформительством покончено. Начинается магия.

Магия JS

Напоминаю, что к этому моменту в нашем прототипе уже есть динамическая панель "AxureJS", внутри которой лежит элемент "script".

Мы добавляем в элемент "script" три упомянутые выше функции:

function checkNum_greater_10(numb) {
var rgx = /^([1-9]\d{1}\d*|\d{3}\d*)$/;
return rgx.test(numb);
}

function checkNum_less_100(numb) {
var rgx = /^([0-9]|[1-9][0-9]|100)$/;
return rgx.test(numb);
}

function checkNumber10_100() {
var string = $axure("@count-text-10-100").text();
var number = string.match(/\d/g);
var resultNumber = number.join("");
if ( checkNum_greater_10(resultNumber) ) {
if ( checkNum_less_100(resultNumber) ) {
$axure("@count-text-number-10-100").text(resultNumber);
} else {
$axure("@count-text-number-10-100").text("100");
}
} else {
$axure("@count-text-number-10-100").text("10");
}
}

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

Здесь стоит обратить внимание на несколько моментов:

  • у нас здесь активно используются регулярные выражения - это такое сильное колдунство, которое позволяет обойтись без занудных многоуровневых проверок; если интересно - загуглите волшебное слово regexp;
  • достучаться до конкретного элемента прототипа можно с помощью конструкции "$axure("@НАЗВАНИЕ_ЭЛЕМЕНТА")". Это очень упрощает поиск нужных элементов на странице; при этом большинство jQuery-функций прекрасно работают.

Для вашего удобства в итоговом прототипе я даже малость подсветил синтаксис кода:

Суперпрототип в Axure: кастомная JS-валидация
Суперпрототип в Axure: кастомная JS-валидация

Ну вот. Куча непонятного кода, с которым не очень ясно, что теперь делать. Не парьтесь, сейчас объясню.

Вешаем магию на элементы

Для начала мы добавляем к нашему полю "count-text-10-100" обработчик на событие "OnTextChange", в котором тупо дублируем значение поля в наш скрытый блок "count-text-number-10-100". Сделать это совсем не сложно:

Суперпрототип в Axure: кастомная JS-валидация
Суперпрототип в Axure: кастомная JS-валидация

Следующим шагом мы делаем так, что при потере нашим полем фокуса оно выполняет основную функцию "checkNumber10_100", ждет 50мс (пока выполнится эта функция), и затем сует в себя же ее очищенное значение - текст скрытого блока "count-text-number-10-100", который к тому времени (с помощью нашего JS) приобретает девственное значение. Во избежание внешних конфликтов мы и в конце добавляем 50мс ожидания.

Раз:

Суперпрототип в Axure: кастомная JS-валидация
Суперпрототип в Axure: кастомная JS-валидация

Два:

Суперпрототип в Axure: кастомная JS-валидация
Суперпрототип в Axure: кастомная JS-валидация

Вуаля! Ручное изменение нашего поля теперь всегда будет возвращать число от 10 до 100. Идеально. Осталось разобраться с кнопками "+" и "-". Но это уже совсем просто.

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

Вот пример для кнопки "-":

Общий сценарий:

Суперпрототип в Axure: кастомная JS-валидация
Суперпрототип в Axure: кастомная JS-валидация

Проверка, что значение поля меньше десяти:

Суперпрототип в Axure: кастомная JS-валидация
Суперпрототип в Axure: кастомная JS-валидация

Уменьшение значения с помощью локальной переменной:

Суперпрототип в Axure: кастомная JS-валидация
Суперпрототип в Axure: кастомная JS-валидация

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

Финализируя

В итоге всего этого ада у нас есть пуленепробиваемое поле прямо в Axure-прототипе. Да, путем довольно сложных манипуляций. Да, проще сверстать. Да, устанешь поддерживать. Однако, если малость поднапрячься, если заставить мозг потратить лишние джоули, то уже через пару недель подобных экспериментов вы сможете в экспресс-режиме создавать самые клевые прототипы в мире. А о том, зачем вообще нужно такие монстры (b нужны ли они вообще), я писал в своей вводной статье про суперпрототип.

Ссылки

Ну и, по традиции, заканчиваю пост очередной порцией мегаполезных ссылок:

  • вот тут можно скачать исходники прототипа;
  • предыдущая статья, про внедрение собственной JS-надстройки.

Еще больше букв и картинок про дизайн и проектирование можно увидеть на моем сайте и здесь, в дзен-канале.