Северный (Арктический) федеральный университет им. М.В. Ломоносова
Опубликован: 10.04.2014 | Доступ: свободный | Студентов: 5397 / 513 | Длительность: 14:18:00
Специальности: Программист
Самостоятельная работа 11:

Установка и настройка среды программирования Intel XDK. Создание первых приложений

< Лекция 8 || Самостоятельная работа 11: 123456

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

В основе мобильного приложения, разрабатываемого с использованием Intel XDK, как мы уже выяснили ранее, обычная web-страница с таблицей стилей и скриптами javascript для реализации реакций на события. А значит, все наши знания по HTML5, CSS и javascript вполне применимы.

Начнем с классического "Hello world!". Для этого вполне достаточно прописать в теле страницы, в данном случае приложения, например, абзац текста ( рис. 19.11):

<p> Hello world!</p>
    
Код приложения "Hello world!"

увеличить изображение
Рис. 19.11. Код приложения "Hello world!"

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

Простейшее приложение на эмуляторе

увеличить изображение
Рис. 19.12. Простейшее приложение на эмуляторе

Всем, кто знаком с тройкой HTML+CSS+Javascript, открыты огромные просторы для творчества!

Например, почему бы не создать свои "авторские" часы? Отображаться время будет с помощью заголовка 1 уровня, которому мы зададим размер, цвет и выравнивание по центру:

<h1 id="times"> </h1>
    

Стиль прописан в таблице стилей

#times {color:red;font-size:50pt;text-align:center;}
    

За "автоматику" часов будет отвечать две функции Javascript.

Функция startTime получает текущее системное время и задает его элементу с идентификатором times.

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);
        }
    

Функция FullTime позволяет корректно отобразить время, значение минут и секунд которого занимает 1 разряд (добавляет ведущий нуль)

function FullTime(i){
	if (i<10)
	{
		i="0" + i;
	}
	return i;
}
    

Остается добавить эти функции в тег <script type="text/javascript"> и прописать, чтобы функция была выполнена при загрузке приложения ( рис. 19.13).

<body onload="startTime()">
    
Код приложения "Часы"

увеличить изображение
Рис. 19.13. Код приложения "Часы"

Проверяем результат работы ( рис. 19.14)

Приложение "Часы" на эмуляторе

увеличить изображение
Рис. 19.14. Приложение "Часы" на эмуляторе
< Лекция 8 || Самостоятельная работа 11: 123456
Марат Нуриджанян
Марат Нуриджанян

Пример: Скачать среду можно с сайта для разработчиков Android (http://developer.android.com/sdk/index.html).

Там скачать можно только Android Studio

Владимир Каункин
Владимир Каункин

В самостоятельной работе 2 в примере решения задания некорректно загадывается число (в двух местах), выбирая случайное целое число из диапазона [0, 99] вместо [1, 100], как того требует условие. Кроме того, загадывание числа всё таки лучше вынести в отдельный метод, как мне кажется.
 

Андрей Суслов
Андрей Суслов
Казахстан
Дмитрий Кузнецов
Дмитрий Кузнецов
Россия, Санкт-Петербург