Разработка клиентских мобильных виджетов средствами Visual Studio с использованием Apache Cordova

Установка Cordova в Visual Studio. Создание и запуск проекта

В используемой версии Visual Studio должны быть установлены инструменты разработки мобильных приложений Windows Phone SDK (Software Development Kit).Чтобы установить шаблон Cordova - проекта в Visual Studio, выполните следующие инструкции:

Шаг 1. Скачайте последнюю версию Cordova (например, cordova-3.0.0-src.zip) с сайта [2] и распакуйте ее в папку с соответствующим именем. Она будет содержать набор архивных файлов данного фреймворка для разных платформ, включающий необходимые шаблоны проектов, библиотеки и плагины устройств (cordova-plugin-camera, cordova-plugin-geolocation, cordova-plugin-media и т.д.), а также инструкции по соответствующим установкам. Далее прочтите руководство по установке базового шаблона проекта на платформу Windows Phone. Например, для Windows Phone 8 распакуйте архив cordova-wp8 в одноименную папку и откройте ее.

Шаг 2. Вы найдете содержащийся в ней файл createTemplates.bat. Запустите этот пакетный файл для создания и установки шаблонов. Двойной щелчок по этому файлу будет генерировать два ZIP файла (CordovaWP7 х х x.zip + CordovaWP8 х х x.zip где x x x - это номер текущей версии). Чтобы можно было использовать эти файлы в Visual Studio, скопируйте их в папку шаблонов проектов, например, в "My Documents \ Visual Studio 2012 \ Templates \ ProjectTemplates \". Шаблоны установлены.

Шаг 3. Создайте новый проект, который будет мобильным виджетом. Для этого:

• Откройте Visual Studio и выберите New Project.
• Выберите шаблон проекта CordovaWP8. (Номер версии отображается в описании шаблона.)
• Дайте проекту имя, например, "CordovaHelloWorld" и выберите OK:
  

  
  увеличить изображение
  Рис. 3.2.

Шаг 4. Постройте и запустите проект.

Если вы компилируете и развертываете проект, созданный по этому шаблону, в эмуляторе Windows Phone, то уточните его наличие в главном выпадающего меню:

увеличить изображение
Рис. 3.3.

При запуске проекта вы должны увидеть главную страницу шаблона "APACHE CORDOVA"

Рис. 3.4.

Для того чтобы проверить свое приложение на устройстве, ваше устройство должно быть предварительно зарегистрировано. В этом случае вы сможете выбрать опцию 'Device' из верхнего выпадающего меню Visual Studio и запустить приложение.

Внесите простейшие изменения в код созданного вами проекта. Например, добавьте в текст главного запускающего файла index.html новый тег <p></p>:

<div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
                <p>Разрабатываю для Windows Phone!!!</p>
            </div>
        </div>

Результат запуска приложения с добавленным вами тегом:

Рис. 3.5.