Каждому, кто давно использует для прототипирования Axure, знакома ситуация, при которой не хватает функциональных возможностей даже этого монстра. В ряде случаев это становится серьезным ограничением прототипа: вы проработали пользовательский опыт до мелочей, хотите проверить его реальных юзерах, но банальное поле с количеством товаров не реализуется в Axure так, как вам надо. Или какой-то компонент не получается запрототипировать так, чтобы передать его логику разработчикам в однозначном виде.
И вы, повесив нос, делаете как получится, списывая это на условности прототипа. Или непомерно раздуваете документ с его спецификацией. Что ж, хочу вас обрадовать: решение есть. Правда, для его применения нужно хотя бы немного знать JavaScript - но не более, чем на самом базовом уровне.
Я покажу, как засунуть собственный JS-код прямо в прототип, достучаться из него до элементов страницы и не зависеть при этом от плагинов AxShare (то есть решение будет работать и в оффлайне).
В конце статьи будет ссылка на исходник прототипа - если вам лень читать, возьмите и попробуйте разобраться самостоятельно.
Я специально не буду подробно останавливаться на некоторых мелочах, о которых писал тут, в Дзене, ранее. В конце размещу ссылки, если захотите копнуть.
Добавляем в прототип исполняемый код
Контейнер
Для начала создадим контейнер, в котором будет храниться наша надстройка. Идеально подойдет динамическая панель. У меня она называется "AxureJS", и у нее единственное состояние - "Code":
Блоки надстройки
Затем добавляем два блока - в одном будет размещаться код ("script"), а второй будет отвечать за вызов скрипта в браузере ("JAVASCRIPT ENGINE"). Чтобы запустить выполнение JS, нам будет достаточно скрыть блок "JAVASCRIPT ENGINE" в событии "OnPageLoad".
Очистка текста от бяки
Следующим шагом мы готовим наш прототип распознавать текст внутри блока "script" и выполнять его как JS. Тут понадобится немного шаманства.
Вешаем блоку "JAVASCRIPT ENGINE" на "OnHide" несколько событий: скрываем блок "script" и обрабатываем текст внутри него (предотвращаем всякие страшные ошибки): для этого берем содержимое блока, прогоняем через реплейсер и вставляем обратно:
Вот сам код реплейсера:
[[JS_CODE.replace('\\','\\\\').replace('\'','\\\'').replace("<","<").replace(">",">")]]
При этом "JS_CODE" - это название переменной, которая и содержит в себе текст блока "script". Взяли-обработали-положили на место.
Учим распознавать код
Для этого воспользуемся конструкцией "javascript:void", которая позволяет выполнять произвольный JS-код - и с ее помощью сделаем из нашего блока исполняемый код внутри тега <script>. Подробнее о вызове простых JS-конструкций можно будет почитать по ссылке в конце статьи.
Здесь мы вкладываем в секцию <head> страницы свой скрипт и уже внутрь него - текст из блока:
javascript:void($('head').append('
<script>
[[JS_CODE]]
</script>
'));
И снова "JS_CODE" - это название переменной, которая содержит в себе текст блока "script".
В итоге у вас получается вот так:
Чуть глубже:
Собственно, все, можно вставлять в блок "script" наш JS-код, вешать на "OnPageLoad" сокрытие "JAVASCRIPT ENGINE" - и все будет работать.
Проверяем
Для проверки просто заставим наш прототип показать стандартное сообщение в браузере, засунув в блок "script" код "alert('all work!');":
Если все сделано правильно, при просмотре страницы у вас вылезет вот такое окошко:
Несколько советов
Чтобы не ломать голову, почему это на одной из страниц наш код вдруг перестал работать, вот вам пара рекомендаций:
- После сокрытия блока "JAVASCRIPT ENGINE" добавьте таймаут (Wait) в 500мс, и только потом вызывайте функции внутри вашего "script" - так мы точно будем уверены, что блок успел скрыться, а все остальное - проинициализироваться.
- Если вызываете функцию из события виджета, используйте конструкцию "javascript:functionname();", а если из событий самой страницы, то "javascript:void(functionname());"
- Комментарии с помощью двойных слэшей работать не будут - используйте многострочные комментарии.
В заключение
Конечно, это не все. Вы сейчас окунулись лишь в самое начало. Продолжение истории - в статье про кастомную JS-валидацию.
Ну и напоследок еще пара ссылок, как и обещал:
- базовая статья, про конструкцию "javascript:void";
- файл прототипа;
Еще больше букв и картинок про дизайн и проектирование можно увидеть на моем сайте и здесь, в дзен-канале.