Создание проекта на основе пустого шаблона

⇐ ПредыдущаяСтр 3 из 4Следующая ⇒

Выбрав пункт меню " 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 разряд (добавляет ведущий ноль).

⇐ Предыдущая 1 234 Следующая ⇒

Что делает отдел по эксплуатации и сопровождению ИС? Отвечает за сохранность данных (расписания копирования, копирование и пр.)...

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

Что делать, если нет взаимности? А теперь спустимся с небес на землю. Приземлились? Продолжаем разговор...

ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала...

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