Опубликован: 06.05.2014 | Доступ: свободный | Студентов: 2619 / 601 | Длительность: 10:33:00
Самостоятельная работа 4:

Портирование приложений с использованием Intel XDK

< Лекция 4 || Самостоятельная работа 4: 12 || Лекция 5 >

Перенос интерфейса в среду Intel XDK с учетом особенностей мобильного устройства

Прежде всего необходимо создать новое приложение в Intel XDK. В первой части курса мы рассматривали создание приложений "с чистого листа" и из демонстрационных примеров. После очередного обновления среды (надеемся, что вы их регулярно скачиваете и устанавливаете) появилась новая возможность – создание примера из шаблона. Для этого необходимо при создании нового проекта выбрать пункт меню Start with a Template (см. рис. 8.2).

Создание проекта из шаблона

увеличить изображение
Рис. 8.2. Создание проекта из шаблона

С развитием среды список шаблонов должен увеличиться. В момент написания этой лабораторной работы были доступны следующие семь шаблонов:

  • Flip View App – предназначено для небольших приложений, содержащих только две экранные сущности (главную и окно настроек).
  • Grid View App подходит для разработки приложений, позволяющих просматривать фотографии и другие объекты.
  • List View App – для приложений, содержащих списки с возможностью просмотра подробностей для каждого конкретного элемента (например, почтовые приложения, ленты новостей и т.д.).
  • Login View App – для приложений, требующих обязательной предварительной регистрации.
  • Side Menu App позволяет разрабатывать приложения, содержащие несколько экранов, при этом переключение между ними осуществляется посредством меню, которое вызывается при помощи жеста вытягивания его из одной из сторон экрана.
  • Single View App – для простых одноэкранных приложений.
  • Tab View App – приложения, позволяющие переключаться между вкладками как с помощью нажатий на кнопки, так и посредством перелистывания.

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

Если же вам повезло и приложение, которое вы собираетесь перенести на мобильную платформу, уже является HTML5-приложением, мы можете сразу использовать инструмент Import an Existing App (см. рис. 8.3).

Создание проекта из существующего HTML5-приложения

увеличить изображение
Рис. 8.3. Создание проекта из существующего HTML5-приложения

Организация функционирования приложения

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

Для использования имеющегося кода в Intel XDK необходимо перевести его на подходящий язык. Поскольку в HTML5-приложениях для описания интерфейса используются HTML5 и CSS, а для обеспечения логики работы скриптовый язык JavaScript, разделенный код необходимо переносить следующим образом. Все, что имеет отношение к интерфейсу, описывается на HTML5 с использованием CSS. Для ускорения процесса портирования можно использовать встроенный редактор дизайна, который имеется в Intel XDK. Для работы в этом режиме необходимо на вкладке Develop перейти из режима CODE в режим DESIGN. В этом режиме можно добавлять управляющие элементы и редактировать их свойства. В разделе PAGES здесь можно переключаться между экранными сущностями, если их несколько, и редактировать каждую из них (см. рис. 8.4).

Редактирование проекта в режиме дизайнера

увеличить изображение
Рис. 8.4. Редактирование проекта в режиме дизайнера

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

В качестве транслятора с языка Java можно использовать проект GWT. Компилятор GWT переведёт код Java-приложения в соответствующий браузеру JavaScript, HTML и CSS. Для перевода кода с других языков можно использовать аналогичные решения.

Задачи для самостоятельной работы

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

< Лекция 4 || Самостоятельная работа 4: 12 || Лекция 5 >