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

Структура папок шаблона Cordova

Рассмотрим структуру проекта в окне обозревателя решений (Solution Explorer):

Рис. 3.6.

Содержание основных папок и файлов:

• cordova - содержит управляющие *.js и *.bat - файлы проекта.
• cordovalib - содержит "родную" для Windows Phone реализацию Cordova API (C#/XAML), включая файл CordovaView.xaml с элементом управления браузером WebBrowser;
• www- папка, в которую помещаются ресурсы вашего приложения, HTML5, JavaScript, CSS и изображения. Шаблон генерирует только базовый файл index.html и таблицу стилей index.css, остальные ресурсы добавляет сам разработчик;
• www/cordova.js - общие средства Cordova JavaScript API для Windows Phone, такие как обработка обратного вызова. Взаимодействует с "родным" кодом, содержащимся в cordovalib;
• config.xml - конфигурационный XML-файл с главным тегом <widget>, содержащим информацию о виджете и указывающем параметры, влияющие на его работу. Пример конфигурационного файла, содержащего информацию о подключенных плагинах "Accelerometer" и "Camera":

  <?xml version='1.0' encoding='utf-8'?>
  <widget>
      <access origin="*" />
      <feature name="Accelerometer">
          <param name="wp-package" value="Accelerometer" />
      </feature>
      <feature name="Camera">
          <param name="wp-package" value="Camera" />
      </feature>
  </widget>

Файл MainPage.xaml содержит экземпляр пользовательского элемента управления CordovaView:

<my:CordovaView HorizontalAlignment="Stretch" 
                   Margin="0,0,0,0"  
                   x:Name="CordovaView" 
                   VerticalAlignment="Stretch" />

Элемент управления CordovaView берет на себя загрузку ресурсов приложения в локальное хранилище и осуществляет навигацию к файлу www/index.html, тем самым запуская ваше приложение. Любые элементы управления, добавляемые вами в файл MainPage.xaml, будут специфичными для сборки под Windows Phone.

Разработка приложений Cordova

Вы можете добавить свои файлы HTML, JavaScript и CSS в папку www, и - если они помечены как Build Action of Content - они будут включены в ваш проект и доступны при выполнении приложения через элемент управления "браузер". Вы можете использовать любую из стандартных JavaScript/HTML5-библиотек или инфраструктур в своем приложении Cordova при условии, что они совместимы с браузером мобильного устройства. Важный момент состоит в том, что вы должны ждать события deviceready, прежде чем пользоваться любым API-методом. Если вы просмотрите файл index.html, сгенерированный из шаблона, то заметите, что перед обновлением UI в нем предусмотрено ожидание до тех пор, пока устройство не будет готово:

<div id="deviceready" class="blink">
       <p class="event listening">Connecting to Device</p>
       <p class="event received">Device is Ready</p>
</div>

Архитектура одно- и многостраничных приложений

При создании приложений Cordova можно применять два совершенно разных шаблона [3].

• Многостраничные приложения. Набор HTML-страниц представляет разные экраны в таком приложении. При навигации между страницами используются стандартные механизмы браузера со ссылками, определяемыми тегами привязки (anchor tags) (<a>). Каждая HTML-страница включает скриптовые ссылки на JavaScript-код Cordova и JavaScript-код вашего приложения.
• Одностраничные приложения. Единственный HTML-файл ссылается на Cordova и JavaScript-код вашего приложения. Навигация между страницами в вашем приложении осуществляется динамическим обновлением визуализируемого HTML. С точки зрения браузера мобильного устройства, URL остается одним и тем же, и реальной навигации между страницами нет.

Выбор между этими двумя шаблонами имеет определяющее влияние на структуру вашего кода. В целом, многостраничный шаблон лучше подходит приложениям, которые в основном имеют дело со статическим контентом. При этом подходе вы можете брать HTML/CSS/JavaScript, которые в данный момент используются на вашем веб-сайте, и упаковывать их, используя Cordova, для доставки на устройство в виде приложения. Но этому подходу свойствен ряд недостатков. Прежде всего, когда браузер переходит с одной страницы на следующую, ему приходится повторно загружать и разбирать весь JavaScript-код, сопоставленный с новой страницей. При этом возникает заметная пауза, пока длится жизненный цикл Cordova, в ходе которого создается связь между JavaScript API и эквивалентами на C#. Во-вторых, из-за повторной загрузки вашего JavaScript-кода теряется состояние всего приложения.

Одностраничный шаблон позволяет преодолеть проблемы, связанные с многостраничным шаблоном. Код Cordova и JavaScript-код приложения загружаются лишь раз, благодаря чему UI (англ. user interface - пользовательский интерфейс) становится более отзывчивым и исключается необходимость в передаче состояния приложения от одной страницы другой. Единственный недостаток этого подхода в том, что он сложнее, так как для обновления UI при навигации требуется дополнительный JavaScript-код.