Егор Чураев
Файлы для загрузки
Инструментальные средства Intel® HTML5 для разработки мобильных приложений [PDF 821,98 КБ]
Исходный код iOS [файл .ZIP, 168 КБ]
Результирующий исходный код средств разработки HTML5 [файл .ZIP, 86 КБ]
HTML5 – это новый стандарт HTML. Не так давно корпорация Intel объявила о выпуске комплекта инструментальных средств HTML5 для разработки мобильных приложений. В этой статье представлено использование этих средств для процесса переноса приложения акселерометра Apple iOS* в среду HTML5. Имейте в виду, что код, создаваемый автоматически с помощью комплекта XDK Intel®, может содержать лицензионный код, разработанный на условиях одной или нескольких лицензий, представленных в приложении A к настоящему документу. Пожалуйста, изучите выходные данные комплекта Intel XDK для получения информации о том, какие библиотеки используются для создания вашего приложения.
Средство переноса приложений Intel® HTML5 App Porter
Первое, что мы сделаем, это возьмем приложение акселерометра для iOS и преобразуем его исходный код Objective-C* в формат HTML5. Мы сделаем это с помощью средства переноса приложений Intel® HTML5 App Porter и исходного кода, который можно найти в файле: [iOS_source.zip] (Примечание. Пример кода IOS_source предоставляется на условиях лицензии на примеры кода ПО Intel, которая подробно описывается в приложении B).Вы можете скачать средство Intel HTML5 App Porter на вкладке Tool сайта: http://software.intel.com/ru-ru/html5. После заполнения и отправки формы с вашим адресом электронной почты вы получите ссылки для загрузки этого средства. Инструкции по его использованию можно найти на следующем сайте: http://software.intel.com/ru-ru/html5/articles/tutorial-creating-an-html5-app-from-a-native-ios-project-with-intel-html5-app-porter-tool
Когда вы закончите все действия, вы получите исходный код HTML5.
Intel XDK
Вы можете открыть код HTML5 в любом средстве IDE. Корпорация Intel предлагает для вас удобное средство для разработки приложений HTML5: Intel XDK - комплект разработчика кроссплатформенных приложений (http://software.intel.com/ru-ru/html5/tools). Используя комплект Intel XDK, разработчики могут создавать единый исходный код для установки на многих устройствах. Что особенно удобно, так это отсутствие необходимости установки средства на вашем компьютере. Вы можете установить его в качестве расширения браузера Google Chrome*. Если вы используете другой браузер, вы должны загрузить и запустить файл JavaScript*. Иногда может потребоваться обновить среду Java*.
После установки комплекта Intel XDK вы увидите главное окно:
Если вам нужно выполнить перенос существующего кода, нажмите большую кнопку "Start new".
Если вы создаете новый проект, введите имя проекта и установите флажок "Create your own from scratch", как это показано на следующем снимке экрана.
Установите флажок "Use a blank project". Через некоторое время отобразится сообщение "Application Created Successfully!"
Нажмите "Open project folder".
Удалите все файлы из этой папки и скопируйте перенесенные файлы. На этом перенос приложения акселерометра не закончен. Мы все еще должны написать для него интерфейс. Можно удалить методы, созданные средством Intel HTML5 App Porter. Удалите следующие файлы:
- todo_api_application__uiaccelerometerdelegate.js
- todo_api_application_uiacceleration.js
- todo_api_application_uiaccelerometer.js
- todo_api_js_c_global.js
Для обновления проекта в Intel XDK перейдите в окно редактора в эмуляторе Windows.
Откройте файл index.htmlи удалите строки слева от включенных файлов.
Откройте файл todo_api_application_appdelegate.jsи примените неназначенное свойство представителя "window".
application.AppDelegate.prototype.setWindow = function(arg1) {
// ================================================================
// REFERENCES TO THIS FUNCTION:
// line(17): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
// In scope: AppDelegate.application_didFinishLaunchingWithOptions
// Actual arguments types: [*js.APT.View]
// Expected return type: [unknown type]
//
//if (APT.Global.THROW_IF_NOT_IMPLEMENTED)
//{
// TODO remove exception handling when implementing this method
// throw "Not implemented function: application.AppDelegate.setWindow";
//}
this._window = arg1;
};
application.AppDelegate.prototype.window = function() {
// ================================================================
// REFERENCES TO THIS FUNCTION:
// line(20): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
// In scope: AppDelegate.application_didFinishLaunchingWithOptions
// Actual arguments types: none
// Expected return type: [unknown type]
//
// line(21): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
// In scope: AppDelegate.application_didFinishLaunchingWithOptions
// Actual arguments types: none
// Expected return type: [unknown type]
//
//if (APT.Global.THROW_IF_NOT_IMPLEMENTED)
//{
// TODO remove exception handling when implementing this method
// throw "Not implemented function: application.AppDelegate.window";
//}
return this._window;
};
Откройте файл viewcontroller.js. Удалите все функции, используемые для работы с акселерометром в старом приложении iOS. По завершении мы получим следующий файл:
APT.createNamespace("application");
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
APT.ViewController = Class.$define("APT.ViewController");
application.ViewController = Class.$define("application.ViewController", APT.ViewController, {
__init__: function() {
this.$super();
};>});
В файле ViewController_View_774585933.cssнужно изменить стили цвета элементов с черного на белый для возможности прочтения на черном фоне: color: rgba(0,0,0,1);на color: rgba(256,256,256,1);. В результате мы получим:
div#Label_590244915
{
left: 20px;
color: rgba(256,256,256,1);
height: 21px;
position: absolute;
text-align: left;
width: 320px;
top: 0px;
opacity: 1;
}
div#Label_781338720
{
left: 20px;
color: rgba(256,256,256,1);
height: 21px;
position: absolute;
text-align: left;
width: 42px;
top: 29px;
opacity: 1;
}
div#Label_463949782
{
left: 20px;
color: rgba(256,256,256,1);
height: 21px;
position: absolute;
text-align: left;
width: 42px;
top: 51px;
opacity: 1;
}
div#Label_817497855
{
left: 20px;
color: rgba(256,256,256,1);
height: 21px;
position: absolute;
text-align: left;
width: 42px;
top: 74px;
opacity: 1;
}
div#Label_705687206
{
left: 70px;
color: rgba(256,256,256,1);
height: 21px;
position: absolute;
text-align: left;
width: 42px;
top: 29px;
opacity: 1;
}
div#Label_782673145
{
left: 70px;
color: rgba(256,256,256,1);
height: 21px;
position: absolute;
text-align: left;
width: 42px;
top: 51px;
opacity: 1;
}
div#Label_1067317462
{
left: 70px;
color: rgba(256,256,256,1);
height: 21px;
position: absolute;
text-align: left;
width: 42px;
top: 74px;
opacity: 1;
}
div#View_774585933
{
left: 0px;
height: 548px;
position: absolute;
width: 320px;
top: 20px;
opacity: 1;
}
После обновления окна эмулятора вы должны увидеть:
Для написания кода функций акселерометра мы должны использовать библиотеку appMobi JavaScript. Документация для этой библиотеки находится здесь. Она устанавливается во время загрузки комплекта Intel XDK.
Откройте файл index.htmlи добавьте следующую строку в список сценариев:
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>
Откройте файл ViewController_View_774585933.html. Мы должны переименовать поля так, чтобы они имели логически приемлемые имена:
<div data-apt-class="Label" id="Label_705687206">0</div> <div data-apt-class="Label" id="Label_782673145">0</div> <div data-apt-class="Label" id="Label_1067317462">0</div>
на:
<div data-apt-class="Label" id="accel_x">0</div> <div data-apt-class="Label" id="accel_y">0</div> <div data-apt-class="Label" id="accel_z">0</div>
То же самое должно быть сделано в файле ViewController_View_774585933.css, где мы должны переименовать имена стилей.
Откройте файл viewcontroller.jsи напишите несколько функций для использования акселерометра.
function suc(a) {
document.getElementById('accel_x').innerHTML = a.x;
document.getElementById('accel_y').innerHTML = a.y;
document.getElementById('accel_z').innerHTML = a.z;
}
var watchAccel = function () {
var opt = {};
opt.frequency = 5;
timer = AppMobi.accelerometer.watchAcceleration(suc, opt);
}
function onDeviceReady() {
watchAccel();
}
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
Обновите проект, и он будет отображен в окне эмулятора:
Работу акселерометра в среде Intel XDK можно увидеть, используя панель "ACCELEROMETER":
Приложение должно выглядеть следующим образом:
Полный исходный код приложения можно найти здесь.
Приложение A: Лицензионные соглашения для кода комплекта Intel® XDK
Приложение B: Лицензионное соглашение на примеры кода ПО Intel
Intel и логотип Intel являются товарными знаками корпорации Intel в США и/или в других странах.
© Корпорация Intel, 2013 г. Все права защищены.
*Другие наименования и товарные знаки являются собственностью своих законных владельцев.