Суперпрототип в Axure: собственная JS-надстройка

163 full reads
222 story viewsUnique page visitors
163 read the story to the endThat's 73% of the total page views
5 minutes — average reading time

Суперпрототип в Axure: собственная JS-надстройка

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

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

Я покажу, как засунуть собственный JS-код прямо в прототип, достучаться из него до элементов страницы и не зависеть при этом от плагинов AxShare (то есть решение будет работать и в оффлайне).

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

Я специально не буду подробно останавливаться на некоторых мелочах, о которых писал тут, в Дзене, ранее. В конце размещу ссылки, если захотите копнуть.

Добавляем в прототип исполняемый код

Контейнер

Для начала создадим контейнер, в котором будет храниться наша надстройка. Идеально подойдет динамическая панель. У меня она называется "AxureJS", и у нее единственное состояние - "Code":

Суперпрототип в Axure: собственная JS-надстройка

Блоки надстройки

Затем добавляем два блока - в одном будет размещаться код ("script"), а второй будет отвечать за вызов скрипта в браузере ("JAVASCRIPT ENGINE"). Чтобы запустить выполнение JS, нам будет достаточно скрыть блок "JAVASCRIPT ENGINE" в событии "OnPageLoad".

Суперпрототип в Axure: собственная JS-надстройка

Очистка текста от бяки

Следующим шагом мы готовим наш прототип распознавать текст внутри блока "script" и выполнять его как JS. Тут понадобится немного шаманства.

Вешаем блоку "JAVASCRIPT ENGINE" на "OnHide" несколько событий: скрываем блок "script" и обрабатываем текст внутри него (предотвращаем всякие страшные ошибки): для этого берем содержимое блока, прогоняем через реплейсер и вставляем обратно:

Суперпрототип в Axure: собственная JS-надстройка

Вот сам код реплейсера:

[[JS_CODE.replace('\\','\\\\').replace('\'','\\\'').replace("<","&lt;").replace(">","&gt;")]]

При этом "JS_CODE" - это название переменной, которая и содержит в себе текст блока "script". Взяли-обработали-положили на место.

Учим распознавать код

Для этого воспользуемся конструкцией "javascript:void", которая позволяет выполнять произвольный JS-код - и с ее помощью сделаем из нашего блока исполняемый код внутри тега <script>. Подробнее о вызове простых JS-конструкций можно будет почитать по ссылке в конце статьи.

Здесь мы вкладываем в секцию <head> страницы свой скрипт и уже внутрь него - текст из блока:

javascript:void($('head').append('
<script>
[[JS_CODE]]
</script>
'));

И снова "JS_CODE" - это название переменной, которая содержит в себе текст блока "script".

В итоге у вас получается вот так:

Суперпрототип в Axure: собственная JS-надстройка

Чуть глубже:

Суперпрототип в Axure: собственная JS-надстройка

Собственно, все, можно вставлять в блок "script" наш JS-код, вешать на "OnPageLoad" сокрытие "JAVASCRIPT ENGINE" - и все будет работать.

Проверяем

Для проверки просто заставим наш прототип показать стандартное сообщение в браузере, засунув в блок "script" код "alert('all work!');":

Суперпрототип в Axure: собственная JS-надстройка

Если все сделано правильно, при просмотре страницы у вас вылезет вот такое окошко:

Суперпрототип в Axure: собственная JS-надстройка

Несколько советов

Чтобы не ломать голову, почему это на одной из страниц наш код вдруг перестал работать, вот вам пара рекомендаций:

  • После сокрытия блока "JAVASCRIPT ENGINE" добавьте таймаут (Wait) в 500мс, и только потом вызывайте функции внутри вашего "script" - так мы точно будем уверены, что блок успел скрыться, а все остальное - проинициализироваться.
  • Если вызываете функцию из события виджета, используйте конструкцию "javascript:functionname();", а если из событий самой страницы, то "javascript:void(functionname());"
  • Комментарии с помощью двойных слэшей работать не будут - используйте многострочные комментарии.

В заключение

Конечно, это не все. Вы сейчас окунулись лишь в самое начало. Продолжение истории - в статье про кастомную JS-валидацию.

Ну и напоследок еще пара ссылок, как и обещал:

- базовая статья, про конструкцию "javascript:void";
-
файл прототипа;

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