Разработка приложения на основе шаблона

Для разработки приложения можно воспользоваться встроенными примерами и создать на их базе собственное. Для этого достаточно в окне создания приложения выбрать пункт " Samples and Demos " выбрать подходящий пример, например, приложение "Orientation Sample". После определения имени и каталога создаваемого приложения можно перейти к анализу кода.

Прежде всего обратите внимание на структуру каталогов приложения (Рис.8).

Среда автоматически создает 3 каталога: для таблиц стилей, для изображений и для скриптов, а также ряд вспомогательных каталогов и файлов. Скрипты, на которые ссылается основной файл index.html, можно найти в каталоге js.

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

Остановимся подробнее на скрипте main.js. В нем определена функция init(), которая начинает свою работу в момент, когда приложение уже загружено, а библиотека JavaScript еще нет. Она передает в консоль значения ширины и высоты окна приложения для встроенного скрипта.

Функция window.addEventListener() обеспечивает подключение обработчиков событий. Заметьте, что в index.html отсутствуют назначения обработчиков – все они назначаются в скрипте main.js.

Функция preventDefaultScroll() запрещает изменения размера приложения (скроллинг) как реакцию на событие «touchmove».

Как только все библиотеки Javascript, в том числе Intel XDK, загружены, возникает событие «deviceready» («устройство готово»). В ее обработчике onDeviceReady() указана команда по скрытию белого окна заставки, возникающего при загрузке приложения и при смене контента страницы.

При смене ориентации телефона соответствующий датчик положения «зажигает» событие «orientationchange», которое обрабатывает функция orientationChange(). Задача этой функции – изменение ориентации контента. Это делается с помощью изменения свойств тегов с идентификаторами imagesid и headlineid, bottomed, endingid. За портретную ориентацию отвечают значения 0 и 180, за альбомную 90 и 270 в соответствии со значением градусов поворота. Все стилевые свойства прописаны классами в подключенной таблицах стилей в каталоге css.

Тестирование и отладка на мобильном устройстве

Для тестирования и отладки приложения на реальном мобильном устройстве прежде всего необходим доступ в Интернет. Необходимо установить на устройстве приложение App Preview. Скачать его можно с помощью Apple AppStore, Google Play Store или Windows Phone Store. Также необходимо наличие на мобильном устройстве приложения для чтения QR-кодов.

Процесс переноса созданного приложения с настольного компьютера на мобильное устройство включает:

· чтение мобильным устройством ссылки на приложение на сайте Intel

· закачку приложения с сайта Intel на мобильное устройство

Первые два шага выполняются на вкладке " Test " среды Intel XDK с помощью кнопки "Push files" («Передать файлы») для отправки файлов на сервер Intel XDK и чтения QR-код с экрана настольного компьютера мобильным устройством (Рис.9).

Рис.9 Отправка файлов приложения на сайт Intel и чтение QR-кода.

QR-код содержит гиперссылку, указанный ресурс закачивается в мобильное устройство и автоматически запускается программой App Preview.

Сборка и компиляция приложения предполагает сборку apk-файла. Для этого следует открыть вкладку «Build» и выбрать тип операционной системы мобильного устройства. Сборка и компиляция приложения возможна только при наличии сертификата, который требует прохождения несложной процедуры регистрации.

Для выполнения сборки необходимо выбрать платформу (платформа должна иметь сертификат). Кнопка «Start Builds» начинает процесс сборки приложения. Среда имеет возможность тонкой настройки создаваемого приложения, можно ограничиться настройками по умолчанию. Файл apk будет создан на сервере Intel. Его необходимо скачать и установить на мобильное устройство.

2. Выполните запуск приложений, описанных в работе.

1. На основе примера " Orientation " разработать приложение с анимированным человечком: в вертикальном состоянии телефона (ориентация «Портрет») он занимается спортом, в горизонтально (ориентация «Альбом») - сладко спит.

2. Проведите анализ одного из примеров пункта " Samples and Demos " и разработайте собственное небольшое приложение на его основе.

1. Дайте характеристику технологии разработки мобильных приложений HTML5/JS.

2. Почему приложение, созданное по технологии HTML5/JS, является кроссплатформенным?

3. Как запускается приложение, созданное по технологии HTML5/JS?

4. Какие средства обеспечивают графический интерфейс пользователя в приложениях HTML5/JS?

5. Как обеспечивается реакция приложения HTML5/JS на воздействия пользователя и сигналов датчиков?

6. Какова структура проекта приложения HTML5/JS в среде Intel XDK?

7. Как выполняется отладка и тестирование приложения HTML5/JS?

8. Как установить созданное приложение HTML5/JS на мобильное устройство?

ЧТО ПРОИСХОДИТ, КОГДА МЫ ССОРИМСЯ Не понимая различий, существующих между мужчинами и женщинами, очень легко довести дело до ссоры...

ЧТО ТАКОЕ УВЕРЕННОЕ ПОВЕДЕНИЕ В МЕЖЛИЧНОСТНЫХ ОТНОШЕНИЯХ? Исторически существует три основных модели различий, существующих между...

Система охраняемых территорий в США Изучение особо охраняемых природных территорий(ООПТ) США представляет особый интерес по многим причинам...

ЧТО ПРОИСХОДИТ ВО ВЗРОСЛОЙ ЖИЗНИ? Если вы все еще «неправильно» связаны с матерью, вы избегаете отделения и независимого взрослого существования...

Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте: