Разработка межплатформенных приложений с помощью Intel® XDK и открытого кода JavaScript*

Download Source

Введение

Всем нам известны преимущества технологий с открытым исходным кодом. Их можно использовать свободно и бесплатно. «Сделать больше, затратив меньше усилий» — вот чего можно ожидать от библиотек с открытым исходным кодом. Многие ведущие разработчики участвуют в создании высококачественных библиотек, что не только ускоряет разработку приложений, но и повышает качество ваших продуктов.

В этой статье мы увидим, как использовать библиотеки JavaScript с открытым исходным кодом вместе с Intel XDK для разработки межплатформенных приложений.

Базовые сведения

На сегодняшний день на рынке доступно множество библиотек JavaScript с открытым исходным кодом, многие из которых обеспечивают DOM-манипуляции, помогают создавать пользовательские интерфейсы и т. д. Такие библиотеки обычно работают в любых браузерах. Несоответствия между браузерами обычно обрабатываются внутри таких библиотек.

До недавнего времени JavaScript считался языком разработки веб-приложений. В последнее время модель его использования изменилась: в сочетании с HTML5 он позволяет создавать не только веб-приложения, но и гибридные приложения. Теперь JavaScript является основным языком разработки приложений для Магазина Windows*.

Intel® XDK — инструмент для создания межплатформенных приложений с помощью HTML5 и JavaScript. Применяя единый инструмент, можно разрабатывать, тестировать и развертывать гибридные приложения и веб-приложения HTML5 и JavaScript. Опубликовать пакет приложения можно в Android*, iOS*, Amazon Appstore, Windows Store и т. д.

Принцип «межплатформенности» и означает однократное написание кода и развертывание на любых платформах. Написать приложение можно с помощью платформо-нейтральных языков HTML5 и JavaScript. Intel XDK поможет упаковать этот код для запуска на разных платформах, таких как Android, iOS, Windows 8, Tizen* и пр. Код, написанный на HTML и JavaScript, можно просматривать не только в браузере, но и с помощью WebView. Каждая платформа располагает элементом управления WebView, который может быть использован вашим приложением для отображения страниц HTML. Intel XDK использует WebView для отображения вашего кода на всех поддерживаемых платформах. Этот контейнер Intel XDK располагает доступом к собственным возможностям платформы, которые затем предоставляются приложению через JavaScript.

Разработчики приложений для Магазина Windows иногда сталкиваются с некоторыми затруднениями при использовании открытого исходного кода JavaScript, главным образом из-за ограничений, связанных с безопасностью в Windows. Например, в приложениях для Windows Store запрещена динамическая загрузка ресурсов JavaScript или манипуляция DOM во время выполнения (хотя и существует способ обойти эту проблему). Тем не менее, поскольку приложения разрабатываются в Intel XDK для запуска в контейнере, эти ограничения не действуют.

Принимая во внимание все вышеизложенное, мы создали образец приложения с помощью AngularJS — одной из самых популярных библиотек JS с открытым исходным кодом.

Ограничение в Intel XDK

Здесь есть один подвох, о котором следует помнить. Для создания пользовательского интерфейса конструктор приложений App Designer в Intel XDK использует DOM. Если вы выберете библиотеку JS, которая конфликтует с классами CSS конструктора приложений Intel XDK, то не сможете использовать этот удобный конструктор для создания приложения. В таких случаях можно создать пустой проект, выбрав Start with blank project. В этом случае вы сможете использовать все функции Intel XDK, кроме конструктора приложений.

В нашем примере используется библиотека AngularJS, которая не конфликтует с обработкой DOMконструктором приложений. Поэтому можно использовать конструктор для создания статического пользовательского интерфейса, а затем сделать его динамическим с помощью AngularJS.

Пример приложения для регистрации учеников

Этот образец приложения представляет собой простой реестр учеников, содержащий список всех учеников школы. Пользователи могут добавлять имена учеников в список. В этом приложении не реализованы функции работы со списками, поскольку это можно очень просто сделать с помощью AngularJS.

Создание приложения реестра учеников

Шаг 1.Создайте новое приложение и выберите Start with App Designer. Введите имя проекта и щелкните Create.

Шаг 2.Выберите фреймворк для приложения. Я в этом примере выбрал просто App Framework.

Теперь переходим к созданию страницы приложения.

Для нашего приложения и для списка учеников нам нужны следующие поля.

Поля:

1. Имя
2. Фамилия
3. Пол
4. Возраст
5. Секция
6. Кнопка «Добавить»

Для этого проекта выберите окно просмотра tablet.

Теперь добавим listviewдля отображения добавленных учеников. Поскольку нужно наполнять список динамически, мы сохраним один элемент списка (для получения формата) и удалим все остальные.

Теперь перейдите в режим кода.

Шаг 3.Нужно загрузить последнюю версию файла angular.js по адресу https://angularjs.org/.

Создайте новую папку JSвнутри папки www и скопируйте в нее файл angular.js, загруженный с веб-сайта angularjs.org. Добавьте ссылку на этот файл в файле index.html.

Теперь angular.jsготов к использованию.

Шаг 4.Создайте класс контроллера. Angular.jsиспользует класс контроллера для обработки пользовательских событий и для манипуляций с данными. Будем использовать встроенный тег script (вы можете создать собственный файл JS и добавить в него этот код).

<script type="text/javascript">
            function StudentManager($scope)
            {
                //An JSON array to hold the student list.
                $scope.students = [];

                //addStudent will add the new student to the list.
                $scope.addStudent = function() {
                $scope.students.push({firstName:$scope.firstName,
                                      lastName:$scope.lastName,
                                      age:$scope.age,
                                      gender:$scope.gender,
                                      section:$scope.section});
                $scope.firstName = '';
                $scope.lastName = '';
                $scope.age = 0;
                $scope.gender = '';
                $scope.section = '';
              };
            }</script>

При этом будет создан новый класс контроллера для вашей страницы.

Шаг 5.Изменяем содержимое HTML.

Шаг 5.1. Теперь запускаем страницу с помощью ng-app. Указываем этот атрибут в теге <body id="afui" ng-app>.

Внимание! Иногда система может удалять этот атрибут при переключении между режимом конструктора и режимом кода. Проверьте этот атрибут и снова добавьте его, если он удален.L control. We will attach this controller to the root level div element.

Шаг 5.2. Свяжите контроллер с элементом управления HTML. Мы привязываем этот контроллер к элементу div корневого уровня.

<div class="uwrap" id="content" ng-controller="StudentManager">

Шаг 5.3. Теперь нужно начать присоединять модели ng-modelк полям ввода. Сначала нужно создать поля для ввода имени, фамилии, возрастаи секции.

<div class="table-thing with-label widget uib_w_2 d-margins" data-uib="app_framework/input" data-ver="1"><label class="narrow-control label-inline">First Name</label><input class="wide-control" type="text" ng-model="firstName"></div>

Аналогичным образом добавим ng-modelи для других полей. Назовем их, соответственно, lastName, age, genderи section.

Шаг 5.4.Найдите тег привязки кнопки «Добавить» и свяжите обработчик событий addStudentс событием ng-click.

<a class="button widget uib_w_10 d-margins green" data-uib="app_framework/button" ng-click="addStudent()" data-ver="1">Add</a>

Шаг 6. Нужно показать список учеников в listview.

Найдите составленный нами ранее список одиночных элементов. Замените <li>на следующее:

<li class="widget uib_w_8" data-uib="app_framework/listitem" data-ver="1" ng-repeat="student in students"><a>Name: {{student.firstName}} {{student.lastName}} <br />Age: {{student.age}}<br /> Gender: {{student.gender}} <br />Section: {{student.section}}</a></li>

Вот и все. Осталось протестировать код на имитаторе и исправить все оставшиеся ошибки.

Шаг 7. После исправления ошибок код готов к развертыванию. Выберите нужный магазин приложений и соберите пакет, предоставив необходимые метаданные.

На следующем снимке экрана показано действующее приложение в Магазине Windows.

Вот как оно выглядит на планшете iPad*.

Заключение

Intel XDK — удобный инструмент для разработки, тестирования и упаковки приложений HTML5 и JavaScript. Библиотеки JavaScript с открытым исходным кодом упрощают разработку; это высококачественные межплатформенные, совместимые с браузерами библиотеки. Intel XDK поддерживает большинство библиотек JavaScript с открытым исходным кодом, если использовать параметр Start with blank project. В этом случае можно использовать все функции Intel XDK, кроме App Designer. Можно также импортировать вашу существующую базу кода.

App Designer — без сомнений, очень удобный компонент. Но если вы хотите его использовать, то необходимо выбирать такие библиотеки, которые не образуют конфликты с работой App Designer. В нашем примере библиотека KnockoutJS не работает с App Designer, поэтому ее нельзя использовать.

Об авторе

Рагавендра Урал (Raghavendra Ural) — эксперт Intel в таких областях, как датчики в Windows 8, HTML5, Intel XDK и компьютерные системы с управлением без помощи контроллеров. Его рабочий опыт в области ИТ насчитывает 14 лет, все это время он занимался различными веб-технологиями и корпоративными решениями. В настоящий момент он занимается популяризацией и внедрением Windows 8, HTML5, других средств Intel и пакетов SDK. Рагавендра увлекается распространением знаний, изучением технических проблем и их решением. Он занимает должность разработчика-евангелиста в подразделении Developer Relationships корпорации Intel.

Intel и эмблема Intel являются товарными знаками корпорации Intel в США и в других странах.

© Intel Corporation, 2014. Все права защищены.

* Прочие наименования и товарные знаки могут быть собственностью третьих лиц.