Создание проекта на основе пустого шаблона
Выбрав пункт меню "New Project" или "Start new project", разработчик попадает в окно для выбора вида создаваемого приложения. Здесь можно создать приложение "с чистого листа": стартового шаблона HTML-файла и сценария Javascript (Blank Template) (Рис.4). В процессе создания проекта потребуется указать имя создаваемого проекта и директорию для его хранения.
Рис. 4 Создание приложения «с чистого листа».
После завершения создания приложения на вкладке "Develop" можно получить доступ к исходному коду будущего приложения.
Код приложения - это web-страница с подключенными скриптами cordova.js, app.js и init-dev.js, отвечающими за основную функциональность приложения.
Для того чтобы web-страница функционировала как мобильное приложение, по умолчанию задан ряд настроек:
Сделаны мета-определения для корректной работы в браузере телефона:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Данный код определяет ширину страницы приложения, равной ширине экрана устройства, и задает начальный масштаб.
Определен стиль, запрещающий любое масштабирование
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
За функциональность приложения отвечают скрипты JavaScript, явно прописанном в коде приложения. Программирование на JavaScript - программирование каких-либо действий, основанных на событиях. Модель событий DOM2, реализованная в виде иерархической структуры объектов документа HTML, позволяет реализовать стандартные способы создания, захвата, обработки и отмены событий в древовидной иерархической структуре тегов HTML-документа.
События начинают жизненный цикл на вершине иерархии (на уровне Document) и движутся вниз через вложенные объекты к цели. Этот процесс называется фазой захвата.
За это в DOM2 отвечает метод addEventListener с тремя аргументами: строковое название события, обработчик события - onDeviceReady, и логический параметр - фаза захвата. Если значение фазы равно true - то обработчик сработает по мере перемещения вглубь по иерархии, если false - на обратном "пути".
Созданный код приложения - это заготовка приложения, которую необходимо наполнить тегами и скриптами, обеспечивающими требуемую функциональность приложения. Например, чтобы получить на экране мобильного устройства классическое "Hello world!", достаточно прописать в теле HTML-страницы или приложения абзац текста <p> Hello world!</p> (Рис.5).
Рис.5 Код простейшего приложения
Проверить полученный результат можно с помощью вкладки "Simulate", на которой среда позволяет сымитировать работу на самых популярных устройствах. Для симуляции работы приложения следует выбрать платформу, конкретную модель телефона и нажать кнопку(Рис.6).
Рис.6 Настройка симуляции работы приложения на смартфоне.
Изображение телефона появится в отдельном окне (Рис.7)
Рис.7 Окно симулятора смартфона.
Знание технологии разработки Web-страниц с помощью HTML/CSS/JavaScript дает инструменты для разработки самых разнообразных приложений. В качестве примера рассмотрим создание часов на экране смартфона.
Код приложения имеет вид:
<script type="text/javascript">
function startTime(){
var d=new Date(); //Системные Дата/Время
var h=d.getHours();
var m=d.getMinutes();
var s=d.getSeconds();
m=FullTime(m);
s=FullTime(s);
document.getElementById('times').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function FullTime(i){
if (i<10)
i="0" + i;
return i;
}
</script>
<style>
#times {color:red;font-size:50pt;text-align:center;}
</style>
<body onload="startTime()">
<h1 id="times"> </h1>
</body>
</html>
В теле HTML-документа расположен заголовок 1 уровня, в котором будет отображаться время. Ход часов обеспечивает скрипт startTime(), который запускается при загрузке тела приложения (событие onload). Тег <style> определяет стиль отображения часов. Функция setTimeout() обеспечивает периодическое повторение вызова функции startTime() через каждые 500 Мсек. Функция FullTime() позволяет корректно отобразить время, значение минут и секунд которого занимает 1 разряд (добавляет ведущий ноль).
Разработка приложения на основе шаблона
Для разработки приложения можно воспользоваться встроенными примерами и создать на их базе собственное. Для этого достаточно в окне создания приложения выбрать пункт "Samples and Demos" выбрать подходящий пример, например, приложение "Orientation Sample". После определения имени и каталога создаваемого приложения можно перейти к анализу кода.
Прежде всего обратите внимание на структуру каталогов приложения (Рис.8).
Рис. 8. Код приложения "Orientation"
Среда автоматически создает 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.