Совместная работа jQuery и WinJS в приложениях Магазина Windows

Совместная работа jQuery и WinJS в приложениях Магазина Windows
Посетителей: 759 \| Просмотров: 1374 (сегодня 0)	Шрифт:

Библиотека Windows для JavaScript (WinJS) и шаблоны Visual Studio для приложений Магазина Windows предоставляют разработчикам высокую гибкость в использовании сторонних библиотек JavaScript, включая популярную jQuery. Многие веб-разработчики сегодня применяют jQuery для быстрого, простого и эффективного доступа к модели DOM и управления ею.

Как и было объявлено в апреле, теперь можно использовать jQuery версии 2.0 в приложениях Магазина Windows без каких-либо ошибок, касающихся рабочего цикла JavaScript или динамического содержимого. В данной статье я продемонстрирую, как применять jQuery в приложениях Магазина Windows. Кроме того, мы рассмотрим определенные области, где WinJS неплохо заменяет некоторые API jQuery.

(Если вы хотите вспомнить API jQuery, обратитесь к документации jQuery. Возможно, стоит также освежить в памяти информацию об использовании CSS селекторов.)

Использование jQuery в приложениях Магазина Windows

Вам потребуется локальная копия jQuery для использования в приложении Магазина Windows, поэтому скачайте jQuery версии 2.0 (или выше). После того как будет получена копия библиотеки jQuery, добавьте ее в JavaScript-проект в Visual Studio 2012 (щелкните правой кнопкой мыши на папку js в проекте, нажмите Add (Добавить)> Existing Item (Существующий элемент), а затем выберите библиотеку jQuery из папки, где она сохранена).

(Кроме того, можно загрузить jQuery напрямую в решение Visual Studio с помощью NuGet.)

Далее нужно создать ссылку на библиотеку jQuery в HTML-файлах приложения. Обратите внимание, что следует включать ссылку на jQuery на любой HTML-странице, которая ссылается на файл JavaScript, использующий jQuery. Я рекомендую поместить ссылку на стартовой странице приложения (обычно это default.html), благодаря чему можно будет гарантированно воспользоваться jQuery на любой странице, загруженной в эту страницу (или на которую был сделан переход с нее).

Основы работы с DOM

Селекторная функция jQuery (‘$’, также известная как просто «функция jQuery») очень полезна, если требуется доступ к DOM в документе HTML — включая разметку, составляющую содержимое приложения Магазина Windows. Кроме того, jQuery содержит обширную библиотеку API с множеством функций для работы с HTML-содержимым и данными JavaScript. От применения CSS-стилей до хранения скрытых данных в виде JSON-объектов — jQuery предоставляет огромное количество разнообразных средств, которые можно использовать в приложении Магазина Windows.

Кроме того, если нужна только селекторная функция CSS, то можно не использовать всю jQuery. Вместо этого обратитесь к библиотеке Sizzle: она бесплатная, небольшая по размеру и с открытым исходным кодом (на самом деле функция jQuery построена на основе Sizzle). Sizzle также использует CSS-селекторы для получения коллекций HTML-элементов из DOM. Чтобы воспользоваться Sizzle, загрузите локальную копию библиотеки, добавьте ее в проект и включите ссылку на библиотеку в страницу HTML (как и в случае с jQuery).

Теперь мы можем заняться делом: использовать jQuery в приложении Магазина Windows! Функции jQuery и хорошо знакомые вам приемы уже доступны для приложения Магазина Windows:

Получите прецизионный доступ к одному или нескольким элементам приложения:

var appHeadings = $('h1');
var appContent = $('#app-content')[0];
var formFields = $('form input[type="text"]');

Добавляйте обработчики событий к одному (или нескольким) элементам в приложении:

$('.data').mouseover(function (event) {
  // Код обработчика.
});
$('#my-button').click(function (event) {
  // Код обработчика.
});

Получайте значение элемента select в приложении:

var name = $("select option:selected").val();

Динамически добавляйте HTML-содержимое в приложение:

$("#my-list").append("<li>Новый элемент списка.</li>");
$("h1").html("Название моего приложения");

И даже динамически меняйте стиль HTML-содержимого в приложении:

$(".legal").css("font-size", "12pt");

С помощью функций jQuery можно создавать лаконичный, но мощный код для приложения Магазина Windows. Больше времени уйдет на создание функций, чем на управление пользовательским интерфейсом.

Хорошая новость: для разработки более изящных решений доступны API от WinJS и jQuery. WinJS предоставляет доступ к определенным функциям Windows, к которым jQuery не может обратиться самостоятельно. А вместе обе эти библиотеки позволяют создавать гибкие, адаптивные и красивые приложения. Мы рассмотрим два сценария использования jQuery в приложениях Магазина Windows: создание меню AppBar для навигации и выбора/сохранения данных из элемента управления ListView.

Создание панели навигации для приложения

Чтобы создать WinJS.UI.AppBar в приложении Магазина Windows, мы объявим AppBar в HTML-коде приложения, как указано ниже, задав расположение наверху страницы, поскольку оно используется для навигации:

<div id="appbar" data-win-control="WinJS.UI.AppBar"
 data-win-options="{layout: 'commands', placement: 'top'}">
 <button data-win-control="WinJS.UI.AppBarCommand"
  data-win-options="{id: 'back', icon: 'back'}"
  value="/html/pageone.html">
 </button>
 <button data-win-control="WinJS.UI.AppBarCommand"
  data-win-options="{id: 'favorite', icon: 'favorite'}"
  value="/html/pagetwo.html">
 </button>
 <button data-win-control="WinJS.UI.AppBarCommand"
  data-win-options="{id: 'forward', icon: 'forward'}"
  value="/html/pagethree.html">
 </button>
</div>

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

// Добавляем обработчики событий ко всем кнопкам в appbar.
// Эта функция вызывается после загрузки страницы.
function addAppbarNavigation() {
 var appBar = document.getElementById('appbar');
 WinJS.UI.process(appBar);
 var appBarControl = appBar.winControl,
   commandIds = ["back", "favorite", "forward"];

 for (var i = 0; i < commandIds.length; i++) {
   var command = appBarControl.getCommandById(commandIds[i]);
   command.onclick = navigateFromAppBar;
 }
}

// Переход на страницу, заданную кнопкой.
function navigateFromAppBar(event) {
 var element = event.target;
 for (var i = 0; i < element.parentNode.childNodes.length; i++) {
  element.parentNode.childNodes[i].disabled = "";
 }
 element.parentNode.winControl.hide();
 WinJS.Navigation.navigate(element.value);
 element.disabled = 'disabled';
}

С jQuery можно воссоздать то же поведение, но с меньшим количеством строк кода:

// Добавляем обработчики событий ко всем кнопкам в appbar.
// Эта функция вызывается после загрузки страницы.
function addAppbarNavigation() {
 $('#appbar button').click(navigateFromAppBar);
}

// Переход на страницу, заданную кнопкой.
function navigateFromAppBar(event) {
 var element = event.target;
 $('#' + element.parentNode.id + ' button').removeAttr('disabled');
 element.parentNode.winControl.hide();
 WinJS.Navigation.navigate(element.value);
 element.disabled = 'disabled';
}

Создание кода на основе элемента управления ListView

jQuery крайне полезна при совместном использовании с элементом управления WinJS.UI.ListView. Пусть приложение отображает данные о группе товаров, где с каждым товаром ассоциировано изображение и небольшое описание.

var items = [
 {
  name: 'item1',
  description: 'item1 description',
  itemPrice: 1.99,
  quantity: 20,
  pictureSRC: '/images/item1.jpg'
 },
 {
  /* Детали следующего товара. */
 }
];

Учитывая формат данных, можно задать шаблон для отображения массива всех товаров.

<div id="smallListTextTemplate"
 data-win-control="WinJS.Binding.Template" >
 <div>
   <h2 data-win-bind="innerText: name"></h2>
   <img src="#" data-win-bind="src: pictureSRC" />
 </div>
</div>
<div id="item-view">
 Загрузка товаров …
</div>

Затем мы создадим элемент управления WinJS.UI.ListView, привязанный к источнику данных после загрузки страницы, с помощью следующего кода:

// Заполнение 'item-view' в качестве элемента управления ListView данными из
// массива 'items'. Эта функция вызывается после загрузки страницы.
function createItemList(page) {

 var currentItems = new WinJS.Binding.List(items),
   listDiv = $('#item-view')[0];

 var listView = new WinJS.UI.ListView(listDiv, {
  itemDataSource: currentItems.dataSource,
  itemTemplate: smallListTextTemplate,
  oniteminvoked: getItem,
  selectionMode: 'single',
  tapBehavior: 'directSelect',
  swipeBehavior: 'none',
  layout: {type: WinJS.UI.GridLayout }
 });

 WinJS.UI.processAll(page);
}

На данный момент приложение заполняет ListView названиями и изображениями каждого товара в списке items после загрузки страницы. А если нужно увидеть цену или доступное количество товара? Мы можем создать «подробное отображение», чтобы приложение выводило больше информации о товаре. Для начала создадим div 'item-details', чтобы выводить дополнительную информацию о товаре при его выборе в ListView.

<div id="item-details">
 <h2>Item details</h2>
 <div id="item-picture"></div>
 <div id="item-name"></div>
 <div id="item-info">
  <p>Стоимость единицы: $<span id="item-cost"> USD</span></p>
  <p>Доступное количество: <span id="item-quantity"></span></p>
 </div>
</div>

Мы хотим, чтобы при выборе товара в ListView приложение отображало подробную информацию о товаре в разделе Item details. Нужно получить выбранный элемент из ListView при помощи следующего кода:

// Получаем данные для выбранного элемента в списке.
function getItem(evt) {
 var index = evt.detail.itemIndex,
   data = $("#item-view")[0].winControl.itemDataSource;

 data.itemFromIndex(index).done(
  function (result) {
   showItemDetails(result.data);
 });
}

Здесь нам очень пригодится jQuery. Для отображения данных товара в разделе Item details следует воспользоваться следующей маленькой функцией:

// Отображение информации о товаре в div 'item-details'.
function showItemDetails(item) {

 $("#item-name").html(item.name);
 $("#item-cost").html(item.itemPrice);
 $("#item-quantity").html(item.quantity);

 $("#item-details").data(item);

 var img = new Image();
 img.src = item.pictureSRC;
 $("#item-picture").html(img);

}

Информация о товаре, взятая из источника данных, затем отображается в разделе Item details вместе с изображением.

В предыдущем фрагменте кода можно заметить, что необработанные данные о товаре хранятся в div ‘item-details’ с помощью функции jQuerydata. Функция data получает или задает произвольные данные в элементах, полученных селекторной функцией. Данные фактически скрыты на странице; это означает, что можно сохранять скрытые метаданные, которые никак не повлияют на дизайн страницы. Это сильно помогает в случае, когда требуется сохранить небольшое количество скрытых данных, но не хочется делать это между сессиями или создавать экземпляр элемента управления ListView для отображения набора данных.

Вернемся к предыдущему примеру: если нужно добавить товар, отображаемый в разделе Item details, в корзину товаров, то нам не следует вновь обращаться к исходному источнику данных — потребуются только данные, ассоциированные с элементом ‘item-details’.

// Добавляем товар, показанный в Item details, в корзину.
function addToCart() {
 var itemToAdd = $("#item-details").data();

 $("#checkout-cart").append(
  "<div><h2>" + itemToAdd.name + "</h2>" +
  "<p>Цена: $" + itemToAdd.itemPrice + "</p>" +
  "</div>"
 );
}

Promise-объекты

jQuery и WinJS используют свои собственные шаблоны Promise. Некоторые функции jQuery возвращают Promise-объект по умолчанию (такие функции, как animate и get — на них мы остановимся чуть позже). Другие функции можно завернуть в Promise через вызов функции promise с использованием результатов функции. Когда вы это сделаете, promise возвращается сразу же с разрешенным promise.

// Код в следующем методе done выполняется сразу же.
$("div").promise().done(function (result) { });

В некоторых случаях потребуется связать promise WinJS и jQuery. К счастью, обе версии совместимы друг с другом. В promise jQuery используются те же методы then и done, что и в WinJS.

В следующем (немного глупом) примере я смешал вместе promise jQuery и WinJS с помощью связки promise и метода WinJS.Promise.join. Этот код получает данные, хранящиеся в приложении, с помощью функции jQuery get, создает временный файл, записывает данные из приложения в файл, прочитывает файл, а затем отображает данные из файла на экране.

var tempFolder = Windows.Storage.ApplicationData.current.temporaryFolder,
  promiseArray = [],
  filename = "tempfile.txt";

promiseArray.push(tempFolder.createFileAsync(filename,
 Windows.Storage.CreationCollisionOption.replaceExisting));
promiseArray.push($.get("/data/data.txt"));

WinJS.Promise.join(promiseArray).
 then(function (response) {

  var file = response[0],
    data = response[1],
    memoryStream =
     new Windows.Storage.Streams.InMemoryRandomAccessStream(),
    dataWriter =
     new Windows.Storage.Streams.DataWriter(memoryStream);

  dataWriter.writeString(data);
  var buffer = dataWriter.detachBuffer();
  dataWriter.close();

  return Windows.Storage.FileIO.writeBufferAsync(file, buffer);
 }).
 then(function () {
  return tempFolder.getFileAsync(filename);
 }).
 then(function (file) {
  return Windows.Storage.FileIO.readTextAsync(file);
 }).
 then(function (data) {
  return $("#scenario").text(data).promise();
 }).
 done(function () {
  $("#scenario").append("<br/><br/>Finished!");
 });

Использование наиболее подходящих инструментов

Хотя jQuery является мощным дополнением к API Windows, не стоит забывать, что WinJS содержит полезные инструменты, которыми можно воспользоваться. API WinJS оптимизированы для работы в Windows и изначально создавались с учетом специфических для приложений сценариев (в то время как jQuery не привязан ни к какой платформе). Если вы думаете, использовать jQuery или же WinJS для определенного задания, неплохое решение –– положиться на API WInJS.

Ниже приведено несколько сценариев, где WinJS предоставляет лучшие средства для решения задачи.

Анимация элементов

jQuery включает группу функций для анимации содержимого DOM, многие из которых основаны на его функции animate. Но анимации в WinJS специально разработаны для эффективного использования аппаратных ресурсов путем перемещения графической нагрузки с ЦПУ на ГПУ (для анимации, изменяющей форму и прозрачность). В результате анимации WinJS работают великолепно и не блокируют поток пользовательского интерфейса.

WinJS включает анимацию, эквивалентную анимации jQuery; она соответствует дизайну и стилю Windows. Возьмите функции jQuery fadeIn и fadeOut, благодаря которым HTML-элементы плавно появляются и исчезают на экране, и измените отображаемое значение стиля элемента. В WinJS есть функции WinJS.UI.Animation.fadeIn и WinJS.UI.Animation.fadeOut, который тоже плавно отображают и прячут HTML-элементы, но без изменения отображаемого значения.

// Анимация появления содержимого в jQuery.
$("#content").fadeIn("slow");

// Анимация появления содержимого в WinJS и jQuery.
WinJS.UI.Animation.fadeIn($("#content")[0]);

//Анимация исчезания содержимого в jQuery.
$("#content").fadeOut("fast");

// Анимация исчезания содержимого в WinJS и jQuery.
WinJS.UI.Animation.fadeOut($("#content")[0]);

В примере выше обратите внимание на то, что эффекты WinJS только изменяют прозрачность элементов. Анимации jQuery влияют на прозрачность и отображаемое значение, что приводит к изменению структуры страницы.

Сравните несколько других примеров анимации в jQuery со схожими анимациями в WinJS:

Анимация в jQuery

WinJS

slideUp

Функция WinJS.UI.Animation.createCollapseAnimation

slideDown

Функция WinJS.UI.Animation.createExpandAnimation

show

Функция WinJS.UI.Animation.enterContent,

ФункцияWinJS.UI.Animation.createExpandAnimation

hide

Функция WinJS.UI.Animation.exitContent,

ФункцияWinJS.UI.Animation.createCollapseAnimation

Пространство имен WinJS.UI.Animation содержит дополнительные функции для анимации содержимого приложений (перетаскивание элементов, анимацию нажатия кнопки, добавление и удаление элементов из списков и многое другое). И все это разработано для идеальной интеграции с Windows.

Кроме того, многие анимации, встроенные в приложения Магазина Windows, можно использовать посредством CSS3. Следующий код комбинирует jQuery с новыми стилями анимации CSS3 для создания эффекта вращения нужного элемента.

// Поворачиваем элемент 'box' по оси y.
$('#box').css({
 "-ms-transition-property": "-ms-transform",
 "-ms-transition-duration": "1s",
 "-ms-transition-timing-function": "ease-in",
 "-ms-transform": "rotateY(-180deg)",
 "-ms-transform-origin": "50% 50%"
});

Проверяем, загружен ли DOM

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

// Проверим, полностью ли загрузилась страница и готова ли она.
$(document).ready(function() {
 // Код настройки.
})

Однако функция jQuery ready по большей части не нужна в приложениях Магазина Windows, учитывая, что уже есть событие WinJS.Application.onready и метод IPageControl.ready. Метод IPageControl.ready запускается, когда DOM страницы/элемента полностью загружен в приложение. После чего мы добавим код инициализации для страницы в функцию обработчика метода IPageControl.ready.

// Когда страница готова к использованию, запускаем настроечный код.
WinJS.UI.Pages.define("pageone.html", {
 ready: function (element, options) {
  // Настроечный код будет здесь.
 }
});

Доступ к веб-ресурсам

Вы, возможно, уже знакомы с функциями load, get или ajax в jQuery, позволяющими получить доступ к удаленным веб-ресурсам. Однако вы обнаружите, что лучший способ получения веб-ресурсов из приложения Магазина Windows –– это функция WinJS.xhr. WinJS.xhr заворачивает стандартный объект XML HttpRequest в объект Promise.

(Обратите внимание, что в Windows 8.1 теперь есть новый API Windows.Web.Http.HttpClient, который проще в использовании, но при этом гораздо мощнее, чем WinJS.xhr. Это рекомендуемый API для HTTP-запросов для приложений, работающих с Windows 8.1.)

Например, функция WinJS.xhrможет с легкостью получить RSS-ленту из этого блога:

var url = "http://blogs.msdn.com/b/windowsappdev/rss.aspx";

// Запрос RSS-ленты из блога.
WinJS.xhr({ url: url }).done(
 function (result) {
  $("#output").text(result.responseText);
});

С помощью функции WinJS.xhrможно обработать ответ веб-ресурса так же, как и обычным XML HttpRequest.

Навигация по страницам

Навигация от одной страницы к другой –– это ключевая особенность структуры большинства приложений. Благодаря jQuery становится возможным создание многостраничной навигации при использовании функции load. Например, можно внедрить HTML-код из элемента body одной страницы в элемент, содержащийся в другой странице, с помощью следующего кода:

// Отображение страницы, на которую осуществляется переход, в content-host.
$("#content-host").load("/html/pageone.html");

Библиотека WinJS содержит пространство имен Navigation, которое при совместной работе с API, включенными в пространство имен WinJS.UI.Pages, предоставляет надежную многостраничную навигацию. В следующем примере новая страница отображается внутри элемента со значением ID ‘content-host’.

// Переход на новую страницу.
WinJS.Navigation.navigate("/html/pageone.html");

// Другой код…

// После того как приложение перешло на новую страницу, отобразить содержимое
//новой страницы в div 'content-host'.
WinJS.Navigation.addEventListener("navigated", function (eventObject) {
 var url = eventObject.detail.location,
   host = $("#content-host")[0];

 host.winControl && host.winControl.unload && host.winControl.unload();
 WinJS.Utilities.empty(host);
 eventObject.detail.setPromise(
  WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () {
   WinJS.Application.sessionState.lastUrl = url;
   WinJS.UI.Animation.enterPage(host);
   WinJS.UI.processAll();
 }));
});

Образец кода вызывает функцию WinJS.Navigation.navigate для перехода на новый URL. Затем он добавляет обработчик для события ‘navigated’, который отображает открытую страницу в content-host. Перед отображением новой страницы на хосте вызывается функция IPageControl.unload и элемент опустошается. Обратите внимание, как обновляется sessionState для приложения после того, как запускается навигация и небольшая анимация при входе на новую страницу.

(Некоторые шаблоны Visual Studio включают файл navigator.js, предоставляющий дополнительные инструменты навигации для многостраничных приложений.)

Выбор отдельных элементов

В приложениях Магазина Windows можно ссылаться на элементы HTML, имеющие уникальный атрибут ID, по их ID. Таким образом, вам не особо-то и нужно использовать селекторную функцию jQuery, чтобы выбрать отдельный элемент с известным ID. (Похожее поведение можно видеть в файлах кода программной части приложений Windows Store, написанных на C# и XAML.)

Например, возьмите простой HTML-элемент span с правильным атрибутом ID на странице приложения Windows Store:

В файле JavaScript, на который ссылается страница приложения, на span можно ссылаться напрямую по его ID, без необходимости создавать новую переменную:

// Мы можем ссылаться на span напрямую с помощью его ID в качестве названия переменной.
// Следующий оператор возвращает значение 'true'.
mySpan.tagName == 'SPAN';

Вам не нужно перехватывать указатель на элемент с уникальным ID, потому что он уже предоставлен. Это работает только в том случае, если ID-значение элемента допускается в качестве названия переменной в JavaScript: ‘mySpan’ допускается, но ‘my-span’ — нет.

Кроме того, можно использовать это свойство приложений Магазина Windows в сочетании с jQuery. Поскольку переменная указывает на элемент как на объект HTMLElement, можно передать переменную напрямую в селекторную функцию jQuery без использования селекторного выражения CSS.

$(mySpan).css('background-color', 'rgba(40, 200, 40, 1)');

Вместе лучше

Как мы уже видели, jQuery очень хорошо дополняет средства WinJS. С помощью jQuery можно легко и точно выбирать несколько элементов HTML из разметки приложения. Функции jQuery в разы увеличивают мощность кода WinJS, используемого для управления приложением. С помощью этих двух библиотек можно создать динамичное и изящное приложение Магазина Windows с меньшим количеством строк кода, что означает ускорение разработки (и публикации в Магазине!).

Спасибо за то, что дочитали до конца! И не переставайте писать приложения!

Автор: Эрик Шмидт • Иcточник: MSDN • Опубликована: 01.10.2014

Нашли ошибку в тексте? Сообщите о ней автору: выделите мышкой и нажмите CTRL + ENTER

Теги:

Оценить статью: