Framework7 — это мощная платформа, которая позволяет оформить интерфейс web-приложений в мобильном стиле Android и iOS. Это позволяет намного проще и быстрее создавать гибридные приложения, за счёт замены огромного числа блоков программным кодом. Звучит пугающе, но на самом деле всё очень просто.
На предыдущем занятии был показан пример взаимодействия c JavaScript без использования дополнительных файлов. Это очень удобно, поскольку при изменении кода не нужно постоянно его переподключать к проекту. Весь код находится в тектовом блоке, подключенному к блоку WebViewer.HomeUrl. Этот способ будет работать только при небольшом объеме данных из-за ограничения длины указателя ресурсов (URL-адреса). Если нужно к проекту подключить большие библиотеки типа jQuery, Framework7 и др., то придётся использовать файл или html-страницу.
Использовать файл в процессе отладки неудобно из-за необходимости его переподключения к проекту после внесения в него правок. Поэтому на этапе отладки будем использовать html-страницу.
Рис. 1. Совместное использование блоков и Framework7.
Скачать проектКод файла fr7templateai.html
Это простой шаблон, в котором подключаются необходимые файлы Framework7. Нам осталось написать код, который вставит нужные теги в блок с id="app". Для этого воспользуемся методом document.querySelector("#app").innerHTML.
Полный код блока можно посмотреть в проекте.
Что делать тем, кто ничего не понимает в коде? Framework7 имеет неплохую документацию, из которой можно просто копировать примеры. Если кодирование вам кажется сложным, то на главной странице Framework7 есть большой пример того, какие элементы интерфейса можно создавать при помощи него. Думаю, вы согласитесь с тем, что при помощи одних блоков такую красоту и интерактивность невозможно получить. Блоки - это легко. Но HTML и JavaScript - это тоже несложно. Совместное использование блоков и текстового кодирования откроет перед вами новые горизонты App Inventor 2 и похожих платформ.
Ниже дана ссылка на проект с живым просмотром (live preview), благодаря чему после сохранения html-файла с кодом происходит автоматическое обновление экрана на устройстве.
Скачать проект