Отправлено: NHUY L. (Intel) 10 декабря 2014 г.
Введение
Разработчики используют средство Intel® XDK для создания гибридных и веб‑приложений, поддерживаемых различными платформами, на основе веб-технологий HTML5, JavaScript и CSS3. Таким образом, можно разработать единое межплатформенное приложение, которое будет запускаться на мобильных устройствах без изменений. Intel® XDK поддерживает все основные целевые платформы: Microsoft Windows*, OS X* и Ubuntu* Linux*. Средство предоставляет разработчикам комплексные возможности для разработки, отладки, тестирования и развертывания своих приложений на устройствах с целевыми платформами.
Intel® XDK — это отличный выбор как для начинающих, так и для опытных разработчиков. Это решение позволяет упростить процессы проектирования, сборки и развертывания гибридных и веб-приложений в различных магазинах приложений и на устройствах любого типа. Начать разработку можно с пустого проекта или использовать существующую демонстрационную версию приложения либо другие шаблоны. Изменения вносятся в редакторе HTML5 Brackets* с открытым исходным кодом. Редактор HTML5 Brackets* предоставляет несколько удобных функций (например автозаполнение) и все средства, необходимые для жизненного цикла разработки, отладки, сборки и тестирования приложений.
Прочитав эту статью, новые пользователи узнают, как создать собственное веб‑приложение с помощью HTML5, JavaScript и CSS3. Кроме того, мы рассмотрим общие принципы установки пакета Intel® XDK, создания проекта простой формы входа в систему, ее оформления и тестирования в эмуляторе.
Код, разработанный для этой статьи, будет в дальнейшем использоваться для предоставления доступа через Интернет к ресурсам ресторанного приложения, которое упоминается в нескольких статьях других участников команды.
Ниже представлены некоторые ссылки на эти статьи.
- Добавление возможностей поиска
- Использование базы данных с приложением Android*
- Разработка бизнес-приложений для Android* с использованием возможностей имитации платежных карт на устройствах с поддержкой NFC
Установка Intel® XDK
Загрузите и установите последнюю версию пакета Intel® XDK по адресу http://xdk‑software.intel.com. Это средство предоставляется бесплатно. Для запуска и тестирования разработанного приложения на реальном устройстве необходимо создать учетную запись Intel® XDK. Учебное руководство по запуску приложения на реальном устройстве см. на странице Начало работы с Intel® XDK. Если для тестирования приложения используется эмулятор в составе Intel® XDK, учетная запись не требуется.
Создание пустого проекта
Основой для создания проекта может служить шаблон, демонстрационная версия приложения или пустой проект. Средство позволяет разработчикам оптимизировать рабочий процесс, состоящий из этапов разработки, тестирования, отладки и развертывания приложения. Текстовый редактор на вкладке Develop создан на базе редактора Brackets*, в котором можно изменить код приложения. Документация по Intel® XDKсодержит подробные инструкции по использованию каждой вкладки в рамках рабочего процесса.
Рисунок 1. Запуск нового проекта
Рисунок 2. Создание пустого проекта
Создание формы входа в систему с помощью HTML5, JavaScript и CSS3
На этом этапе можно изменить файл index.html для создания формы входа в систему. В первую очередь необходимо добавить открывающий тег элемента формы. Типом входных данных для полей с именем пользователя и паролем является текст с заполнителем. Заполнитель описывает ожидаемое значение поля ввода.
<form action="" method="post" name="login" class="little-chef-form"><label><span>Username:</span><input type="text" name="username" placeholder="Username" id="username" /></label><label><span>Password:</span><input type="password" name="password" placeholder="Password" /></label></form>
Пример кода 1. Форма входа в систему в HTML5**
Рисунок 3. Макет формы входа в систему в эмуляторе
Следующим типом входных данных является кнопка. Когда пользователь нажимает кнопку входа в систему, вызывается функция JavaScript validateForm() для проверки соответствующей формы. Проверку формы входа в систему можно выполнять с помощью HTML5, но рекомендуется выбрать JavaScript, так как некоторые атрибуты HTML5 поддерживаются только в последних версиях браузеров.
<label><span> </span><input type="button" class="button" value="Login" onclick="return validateForm()" /></label>
Пример кода 2. Кнопка для входа в HTML5**
Ниже представлен пример проверки формы с помощью JavaScript. Файл JavaScript необходимо сохранить с расширением JS.
function validateForm() {
var formUsername = document.forms.login.username.value;
var formPassword = document.forms.login.password.value;
// Validate username and password
if (formUsername === null || formUsername === "") {
alert("Username must be filled out");
}
else if (formPassword === null || formPassword === "") {
alert("Password must be filled out");
}
else if (formUsername.length < MINLENGTH || formPassword.length < MINLENGTH) {
alert("The minimum length of username and password at least " + MINLENGTH);
}
else {
// Call api function to check whether the username and password exist in the server
return;
}
alert("Login failed!!!");
}Примеркода 3. Проверка формы с помощью JavaScript**
Если пользователю не удается выполнить вход в систему, форма должна быть очищена. Необходимо предоставить пользователю несколько повторных попыток. Если пользователь успешно выполняет вход, форма должна быть очищена и отключена (см. ниже).
function clearAndDisableForm(form) {
if (form == formType.LOGIN_FORM) {
// Clear the form
document.forms.login.username.value = '';
document.forms.login.password.value = '';
// Diabled the form
document.forms.login.username.disabled = true;
document.forms.login.password.disabled = true;
}
}Пример кода 4. Очистка и отключение формы с помощью JavaScript**
Добавьте ссылку на внешний файл сценария js/Login.js, используя тег сценария и атрибут источника из файла index.html.
<script src="js/Login.js" type="text/javascript"></script>
Пример кода 5. Тег сценария
Ниже представлен полный пример формы входа в систему, созданной с помощью HTML5.
<html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="styles.css" media="screen" /><title>Little Chef Login</title><script src="js/Login.js" type="text/javascript"></script></head><body><form action="" method="post" name="login" class="little-chef-frm"><h1>Little Chef Log in<span>Please login or sellect other options </span></h1><label><span>Username:</span><input type="text" name="username" placeholder="Username" id="username" autofocus required /></label><label><span>Password:</span><input type="password" name="password" placeholder="Password" /></label><label><span> </span><input type="button" class="button" value="Login" onclick="return validateForm()" /></label><label><span> </span><input type="button" class="button" value="Reset Password" onclick="return resetPassword()" /></label><label><span> </span><input type="button" class="button" value="Register New User" onclick="return registerNewUser()" /></label></form><table id="myTable"></table></body></html>
Пример кода 6. Полный пример формы входа в систему, созданной с помощью HTML5**
Для оформления внешнего вида формы входа в систему используйте таблицы стилей CSS3. Чаще всего встречаются внешние, внутренние и встроенные таблицы стилей. Внешняя таблица стилей идеально подходит для оформления большого количества веб‑страниц. Каждая страница должна содержать ссылку на таблицу стилей с тегом <link> в разделе head.
<head><link rel="stylesheet" type="text/css" href="styles.css" media="screen" /></head>
Пример кода 7. Тег внешней таблицы стилей
Чтобы добавить светло-серую границу толщиной 1 пиксель вокруг полей ввода текста и пароля, используйте выражение border: 1px solid #CCC. Цвета текста, фона и границы задаются с помощью шестизначных шестнадцатеричных значений цветов. По умолчанию задано значение #000000. Кроме того, можно использовать названия цветов, например red (красный), green (зеленый), blue (синий) и т. д., или палитру цветов HTML. Одним из способов указания ширины поля в пикселях является выражение line-height:15px. Оно также определяет пространство между строками в двух абзацах. Добавив выражение margin-bottom: 16px, можно изменить нижнюю границу поля. Аналогичным образом атрибуты margin-right и margin-top будут определять правую и верхнюю границы поля.
.little-chef-form input[type="text"], .little-chef-form input[type="password"], .little-chef-form select{
border: 1px solid #CCC;
color: #888;
background-color: #000000
line-height:15px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
}
Примеркода 8. Стиль поля ввода данных в CSS3**
В примере ниже задается стиль оформления кнопки. В нем нужно указать цвет фона, цвет текста на кнопке и границу. Чтобы придать кнопке форму, используйте атрибут border-radius. Выражение padding: 4px 25px 4px 25px определяет размер кнопки.
.little-chef-form .button {
background: #EEE;
border: 1px solid #DDD;
padding: 4px 25px 4px 25px;
color: #333;
border-radius: 4px;
}Примеркода 9. Стиль кнопки в CSS3**
Тестирование в эмуляторе
Вкладка Emulate используется для тестирования функций и разметки созданного приложения на различных виртуальных мобильных устройствах. По умолчанию используются устройства Motorola Droid 2 с ОС Android..
Рисунок 4. Форма входа в систему в эмуляторе
После успешного создания и тестирования формы входа в систему в эмуляторе можно переходить к разработке форм сброса пароля и регистрации нового пользователя.
Рисунок 5. Сброс пароля
Рисунок 6. Регистрация нового пользователя
Заключение
Intel® XDK — это всеобъемлющее интегрированное межплатформенное средство разработки приложений на языке HTML. Переходя между вкладками в верхней части окна, разработчики могут без труда выполнять различные задачи в ходе создания программного обеспечения. Благодаря Intel® XDK процессы разработки приложений и их развертывания в одном или нескольких поддерживаемых магазинах приложений становятся по-настоящему удобными. В этой статье также описано, как с помощью комплекта Intel® XDK создать собственное веб-приложение.
Об авторе
Нэнси Ли (Nancy Le) занимает должность инженера по программному обеспечению в компании Intel. Она работает над проектами по масштабированию процессоров Intel® Atom™ в отделе разработки ПО и услуг.
Справочные материалы
Обучение HTML5: http://software.intel.com/html5
* Прочие наименования и товарные знаки могут быть собственностью третьих лиц.
** Этот пример исходного кода распространяется на условиях соглашения Intel Sample Source Code License Agreement.