В этом руководстве рассматривается использование шаблона Visual Studio Split App для создания программы чтения блогов.

Вы научитесь:

• Определять данные JSON
• Использовать Windows.JS.xhr для получения данных RSS
• Использовать PageControl объекты
• Отображать данные в ListView
• Использовать AppBar для ответа на команды

Совет  

Если вы хотите пропустить учебник и перейти прямо к коду, см. раздел Начало работы с JavaScript: полный код для серии учебников.

Перед началом работы...

• Это шестая часть руководства. Перед началом работы мы рекомендуем вам прочесть Часть 1. Создание приложения "Hello, world!", Часть 2. Управление жизненным циклом и состоянием приложения, Часть 3. Объекты PageControl и навигация, Часть 4. Макет и представления и Часть 5. Доступ к файлам и средства выбора файлов.
  

Программа чтения блогов группы разработчиков Windows

В этом учебнике описано создание простого приложения для чтения блогов Windows Team Blogs. На следующих рисунках показано, как будет выглядеть законченное приложение.

Страница элементов содержит заголовок "Windows Team Blogs" и элемент управления ListView, содержащий по одному элементу из каждого блога. Когда вы щелкаете элемент в ListView, открывается разделенная страница выбранного блога. Разделенная страница состоит из элемента управления ListView, содержащего по одному элементу из каждой записи блога, и элемента управления, который отображает содержимое выбранной записи блога в книжной ориентации. С разделенной страницы можно перейти на страницу сведений об элементе. В верхней части этой страницы отображается заголовок записи блога, а содержимое выбранной записи отображается в альбомной ориентации.

Создайте новый проект в Visual Studio

Сначала создадим новый проект WindowsBlogReader для приложения. Чтобы создать новый проект:

1. Запустите Visual Studio.

2. На вкладке Start Page (Начальная страница) щелкните New Project (Новый проект). Откроется диалоговое окно Новый проект.

3. На панели Installed (Установлено) раскройте узел JavaScript и затем выберите шаблон Windows Store app (Приложение Магазина Windows). Шаблоны проектов для JavaScript отображаются на центральной панели диалогового окна.

4. На центральной панели выберите шаблон проекта Split App (Разделенное приложение).

5. В текстовом поле Name (Имя) введите "WindowsBlogReader".

6. Чтобы создать проект, нажмите кнопку ОК. Это займет некоторое время.

Ниже показано окно Solution Explorer (Обозреватель решений) со структурой проекта. Папка для страниц содержит две категории файлов: одна для страниц элементов, другая для страниц разбиения. Каждая из этих групп является PageControl — группой файлов HTML, CSS и JavaScript, которые определяют, на какую страницу может переходить приложение или какую страницу использовать в качестве пользовательского элемента управления.

Новый проект содержит файлы HTML, CSS и JavaScript, которые требуются для создания элементов PageControl и разбиения PageControl. Позднее мы добавим файлы для сведений об элементе PageControl.

Подробнее об этих шаблонах можно узнать в разделе Шаблоны проектов JavaScript для приложений Магазина Windows.

Запуск приложения Магазина Windows

Если вы хотите увидеть, как выглядит простое разделенное приложение, нажмите клавишу F5, чтобы построить, развернуть и запустить приложение. Приложение запускается в полноэкранном режиме в виде страницы с заголовком "WindowsBlogReader" и списком образцов, отображаемых в виде сетки. Каждый элемент представляет группу данных. Коснитесь или щелкните элемент в списке, чтобы перейти на разделенную страницу. Разделенная страница состоит из двух основных частей. В левой части отображается список элементов, связанных с выбранной группой. В правой части отображается содержимое выбранного элемента. Чтобы вернуться на страницу элементов, коснитесь или щелкните кнопку "Back" (Назад) на странице.

При запуске приложение берет код HTML, CSS и JavaScript (или ссылки на него) в items.html и добавляет его на страницу default.html, которая является начальной страницей приложения. Возможности кода, запускаемого в контейнере приложения, ограничены. Например, ваше приложение не сможет получить доступ к Интернету или веб-камере до тех пор, пока вы не объявите, что приложению требуется этот доступ, а пользователь при установке приложения не предоставит разрешения на доступ к ним. Чтобы получить дополнительные сведения, откройте файл package.appxmanifest и выберите вкладку Capabilities (Возможности).

Изменение заголовка и цвета фона

Выполним две простые задачи настройки приложения.

Чтобы изменить заголовок приложения, откройте файл items.html и замените текст в элементе h1 раздела itemspage на "Windows Team Blogs", как показано ниже.

<h1 class="titlearea win-type-ellipsis">
 <span class="pagetitle">Windows Team Blogs</span>
</h1>

Чтобы задать цвет фона, откройте файл default.css и добавьте атрибут background-color в разделе #contenthost.

#contenthost {
 height: 100%;
 width: 100%; 
 background-color: #0A2562;
}

Чтобы построить, развернуть и запустить приложение, нажмите клавишу F5. Обратите внимание, что заголовок страницы элементов изменился, а фон страницы элементов и разделенной страницы стал синим.

Примечание  В папке images проекта содержатся файлы изображений по умолчанию, которые используются для плиток и экрана-заставки приложения при запуске. В этом учебнике не рассматривается изменение плиток и экрана-заставки. При желании вы можете использовать другие файлы изображений. Для этого добавьте нужные файлы изображений в папку images. Откройте package.appxmanifest и вместо Logo (Эмблема), Small logo (Мелкая эмблема) и Splash screen (Заставка) на вкладке Application UI (Интерфейс приложения) укажите пути к нужным файлам изображений.

Замена демонстрационных данных

Шаблон проекта содержит демонстрационные данные, которые отображаются при запуске приложения. Выполните следующие действия, чтобы вместо демонстрационных данных использовать данные из веб-канала Atom блогов Windows Team Blogs.

Удаление демонстрационных данных

Откройте файл data.js, который содержит демонстрационные данные, используемые приложением.

Вы можете удалить функцию generateSampleData, поскольку она не потребуется:

// Returns an array of sample data that can be added to the application's
// data list. 
function generateSampleData() {
 // Omitted code.

 
}

Вы можете удалить следующий код, поскольку он не потребуется:

// TODO: Replace the data with your real data.
// You can add data from asynchronous sources whenever it becomes available.
generateSampleData().forEach(function (item) {
 list.push(item);
});

Задание переменных и функций

Добавьте этот код в data.js прямо перед определением var list = new WinJS.Binding.List(); ближе к началу файла. Данный код задает все нужные нам переменные и заполняющие их функции. По мере выполнения шагов этого учебника вы можете использовать имеющиеся комментарии, чтобы упростить поиск добавленного кода на каждом шаге.

// Set up array variables

var dataPromises = [];
var blogs;

// Create a data binding for our ListView

var blogPosts = new WinJS.Binding.List();

// Process the blog feeds

function getFeeds() { 
 // Create an object for each feed in the blogs array
 // Get the content for each feed in the blogs array
 // Return when all asynchronous operations are complete
}

function acquireSyndication(url) {
 // Call xhr for the URL to get results asynchronously
}

function getBlogPosts() {
 // Walk the results to retrieve the blog posts
}

function getItemsFromXml(articleSyndication, bPosts, feed) {
 // Get the info for each blog post
}

Определение списка блогов

Чтобы не усложнять наш образец, добавим готовый список URL-адресов в массив blogs.

Добавьте этот код в функцию getFeeds. Код добавляет массивы JSON в массив blogs. Каждый массив JSON содержит объекты JSON, которые хранят содержимое веб-канала. Объект JSON представляет собой неупорядоченный контейнер пар имя-значение. Например, название блога хранится в объекте JSON с именем title и значением, извлеченным из веб-канала Atom. Объекты JSON позволяют привязать содержимое веб-канала к элементам управления приложения.

// Create an object for each feed in the blogs array
blogs = [
{
 key: "blog1",
 url: 'http://blogs.windows.com/skydrive/b/skydrive/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null
},
{
 key: "blog2",
 url: 'http://blogs.windows.com/windows/b/windowsexperience/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null
},
{
 key: "blog3",
 url: 'http://blogs.windows.com/windows/b/extremewindows/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null
},
{
 key: "blog4",
 url: 'http://blogs.windows.com/windows/b/business/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null
},
{
 key: "blog5",
 url: 'http://blogs.windows.com/windows/b/bloggingwindows/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null
},
{
 key: "blog6",
 url: 'http://blogs.windows.com/windows/b/windowssecurity/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null
},
{
 key: "blog7",
 url: 'http://blogs.windows.com/windows/b/springboard/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null
},
{
 key: "blog8",
 url: 'http://blogs.windows.com/windows/b/windowshomeserver/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null
},
{
 key: "blog9",
 url: 'http://blogs.windows.com/windows_live/b/developer/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null
},
{
 key: "blog10",
 url: 'http://blogs.windows.com/ie/b/ie/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null
},
{
 key: "blog11",
 url: 'http://blogs.windows.com/windows_phone/b/wpdev/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null
},
{
 key: "blog12",
 url: 'http://blogs.windows.com/windows_phone/b/wmdev/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null
}];

Извлечение данных веб-канала

В этом разделе для управления веб-каналами мы используем библиотеку Windows для JavaScript.

Добавьте следующий код в функцию acquireSyndication. Чтобы извлечь содержимое веб-канала, мы вызываем функцию Windows.JS.xhr. Этот вызов является асинхронным. К счастью, многие сложные вопросы, которые могли бы возникать при использовании асинхронных вызовов, уже успешно решены. Функция xhr возвращает отложенный результат, который затем будет передан вызывающему.

// Call xhr for the URL to get results asynchronously
return WinJS.xhr(
 {
 url: url,
 headers: { "If-Modified-Since": "Mon, 27 Mar 1972 00:00:00 GMT" }
 
 });

Добавим код в функцию getFeeds, чтобы вызвать функцию acquireSyndication для каждого блога в массиве blogs и добавить отложенный результат, возвращаемый в массив отложенных результатов, то есть dataPromises. Чтобы получить все значения до передачи значения функции WinJS.Promise.join, мы вызываем функцию getFeeds. Это гарантирует наличие всех сведений перед отображением элемента управления ListView.

// Get the content for each feed in the blogs array
blogs.forEach(function (feed) {
 feed.dataPromise = feed.acquireSyndication(feed.url);
 dataPromises.push(feed.dataPromise);
});

// Return when all asynchronous operations are complete
return WinJS.Promise.join(dataPromises).then(function () {
 return blogs;
});

Затем необходимо добавить этот код в функцию getBlogPosts. Чтобы получить необходимые сведения, мы анализируем XML-данные каждого блога в массиве blogs. Сначала для получения текста ответа мы используем свойство responseXML. Затем с помощью метода querySelector с нужными селекторами мы получаем заголовок и дату последнего обновления блога. Чтобы преобразовать дату последнего обновления для отображения, используем Windows.Globalization.DateTimeFormatting.DateTimeFormatter.

Если articlesResponse.responseXML равно null, значит при загрузке блога произошла ошибка, так что мы отображаем ошибку там, где должен был отобразиться блог.

// Walk the results to retrieve the blog posts
getFeeds().then(function () {
 // Process each blog
 blogs.forEach(function (feed) {
 feed.dataPromise.then(function (articlesResponse) {

 var articleSyndication = articlesResponse.responseXML;

 if (articleSyndication) {
 // Get the blog title 
 feed.title = articleSyndication.querySelector("feed > title").textContent;

 // Use the date of the latest post as the last updated date
 var published = articleSyndication.querySelector("feed > entry > published").textContent;

 // Convert the date for display
 var date = new Date(published);
 var dateFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
 "month.abbreviated day year.full");
 var blogDate = dateFmt.format(date);
 feed.updated = "Last updated " + blogDate;

 // Get the blog posts
 getItemsFromXml(articleSyndication, blogPosts, feed);
 }
 else {
 
 // There was an error loading the blog. 
 feed.title = "Error loading blog";
 feed.updated = "Error"; 
 blogPosts.push({
 group: feed,
 key: "Error loading blog",
 title: feed.url,
 author: "Unknown",
 month: "?",
 day: "?",
 year: "?",
 content: "Unable to load the blog at " + feed.url
 });

 }
 });
 });
});

return blogPosts;

В завершение необходимо добавить следующий код в функцию getItemsFromXml. Сначала с помощью метода querySelectorAll мы получаем набор записей блога и сведения о каждой из них. Чтобы получить сведения о каждой записи блога, мы используем метод querySelector. Чтобы преобразовать дату последнего обновления для отображения, используем Windows.Globalization.DateTimeFormatting.DateTimeFormatter. В завершение мы сохраняем сведения о каждой записи блога в соответствующем элементе массива bPosts с помощью метода push.

// Get the info for each blog post
var posts = articleSyndication.querySelectorAll("entry");

// Process each blog post
for (var postIndex = 0; postIndex < posts.length; postIndex++) {
 var post = posts[postIndex];

 // Get the title, author, and date published
 var postTitle = post.querySelector("title").textContent;
 var postAuthor = post.querySelector("author > name").textContent;
 var postPublished = post.querySelector("published").textContent;

 // Convert the date for display
 var postDate = new Date(postPublished);
 var monthFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
 "month.abbreviated");
 var dayFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
 "day");
 var yearFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
 "year.full");
 var blogPostMonth = monthFmt.format(postDate);
 var blogPostDay = dayFmt.format(postDate);
 var blogPostYear = yearFmt.format(postDate);

 // Process the content so it displays nicely
 var staticContent = toStaticHTML(post.querySelector("content").textContent);

 // Store the post info we care about in the array
 bPosts.push({
 group: feed,
 key: feed.title,
 title: postTitle,
 author: postAuthor,
 month: blogPostMonth.toUpperCase(),
 day: blogPostDay,
 year: blogPostYear,
 content: staticContent
 }); 
}