— Windows 8 HTML5 Metro Style App: как создать маленькую программу для чтения RSS за 30 минут (часть 1/2)
— Windows 8 HTML5 Metro Style App: Как создать маленькую программу для чтения RSS за 30 минут (часть 2/2)
Но многие из вас отправляли мне электронные письма или сообщения в Twitter, чтобы узнать, как включить учебники в блог WordPress . Итак, позвольте мне показать вам, как сделать это за 5 минут, а не давать вам код напрямую.
Вам, конечно, нужно прочитать 2 предыдущих урока, прежде чем проходить этот. Более того, обратите внимание еще раз, что приведенных ниже сведений будет недостаточно, чтобы подготовить отличное приложение для Windows 8 для магазина . Вот почему я также продолжу эту серию в ближайшие недели, чтобы показать вам, как добавить каркас навигации, заставку, представление моментальных снимков и т. Д.
Обновление от 09/07/2012: я также добавил пример использования RSS-канала Сервера совместной работы (в моем блоге), так как у меня также были запросы по этому поводу. Если у вас есть другой тип платформы блогов, просто следуйте принципам, описанным ниже, чтобы найти соответствие между вашей структурой XML и кодом JS.
Хорошо, давайте начнем с рассмотрения того, что вам нужно изменить в первой части учебников, чтобы соответствовать RSS-каналу, отправляемому блогом WordPress или сервером совместной работы.
Для WordPress давайте перейдем на официальный сайт WordPress: http://wordpress.com/ и попробуем некоторые из предложенных блогов. Я случайно выбрал этот: Wax Wane и его RSS-канал: Wax Wane RSS Feed .
Для Сервера совместной работы, давайте использовать мой собственный RSS-канал блога: http://blogs.msdn.com/b/davrous/rss.aspx
Что нам нужно сделать, так это проанализировать содержимое XML, отправленное обратно через RSS-канал, и найти интересующие нас узлы, чтобы изменить эту предыдущую функцию загрузки:
function downloadC9BlogFeed() {
WinJS.xhr({ url: "http://channel9.msdn.com/coding4fun/articles/RSS" }).then(function (rss) {
var items = rss.responseXML.querySelectorAll("item");
for (var n = 0; n < items.length; n++) {
var article = {};
article.title = items[n].querySelector("title").textContent;
var thumbs = items[n].querySelectorAll("thumbnail");
if (thumbs.length > 1) {
article.thumbnail = thumbs[1].attributes.getNamedItem("url").textContent;
article.content = items[n].textContent;
articlesList.push(article);
}
}
});
}
это было сделано для правильной работы с деревом XML канала RSS блога Channel9.
Просмотрите RSS-канал WordPress и / или версию Сервера совместной работы в своем браузере:
И щелкните правой кнопкой мыши, чтобы просмотреть источник. Он, вероятно, откроет его в блокноте, который не является лучшим инструментом для просмотра XML. Скопируйте / вставьте весь XML-канал в новый XML-файл в Visual Studio 2012:
Изучив ленту WordPress или Сервера сообщества, вы заметите, что атрибут «thumbnail» отсутствует, как у нас в канале Channel9.
Примечание: первое простое решение было бы тогда иметь ту же структуру XML, что и Channel9, используя плагин MediaRSS для WordPress . Но давайте посмотрим на более общий подход.
Начнем с версии WordPress. Интересные части XML хранятся в:
— « <content: encoded> » для самой статьи
— « <media: content> » для возможных изображений, которые можно использовать в качестве миниатюр для главной страницы.
Получается, что последний узел <media: content> в списке работает нормально. Чтобы отразить это, вот функция загрузки, которую я предлагаю вам:
function downloadThisWordPressBlogFeed(WPFeedUrl) {
WinJS.xhr({ url: WPFeedUrl }).then(function (rss) {
var items = rss.responseXML.querySelectorAll("item");
for (var n = 0; n < items.length; n++) {
var article = {};
article.title = items[n].querySelector("title").textContent;
var thumbs = items[n].querySelectorAll("content");
if (thumbs.length > 1) {
article.thumbnail = thumbs[thumbs.length - 1].attributes.getNamedItem("url").textContent;
article.content = items[n].querySelector("encoded").textContent;
articlesList.push(article);
}
}
});
}
Затем вам нужно вызвать эту функцию вместо предыдущей и передать в качестве параметра URL-адрес канала вашего блога. Например:
args.setPromise(WinJS.UI.processAll().then(downloadThisWordPressBlogFeed("http://wax-wane.com/feed/")));
Если вы работаете с этими модификациями, он начнет работать:
Чтобы немного улучшить опыт, давайте добавим заголовок текущего блога, который читается в заголовке домашней страницы, и давайте отобразим заголовок статьи вверху при переходе к нему. Для этого объявите эти переменные в начале « default.js »:
var wordPressBlogTitle; var mainTitle;
В отключенной функции найдите div, связанный с основным заголовком:
mainTitle = document.getElementById("maintitle");
Затем измените функцию загрузки, добавив эти 2 дополнительные строки:
function downloadThisWordPressBlogFeed(WPFeedUrl) {
WinJS.xhr({ url: WPFeedUrl }).then(function (rss) {
wordPressBlogTitle = rss.responseXML.querySelector("title").textContent;
mainTitle.innerHTML = "Welcome to " + wordPressBlogTitle + " blog!";
var items = rss.responseXML.querySelectorAll("item");
for (var n = 0; n < items.length; n++) {
var article = {};
article.title = items[n].querySelector("title").textContent;
var thumbs = items[n].querySelectorAll("content");
if (thumbs.length > 1) {
article.thumbnail = thumbs[thumbs.length - 1].attributes.getNamedItem("url").textContent;
article.content = items[n].querySelector("encoded").textContent;
articlesList.push(article);
}
}
});
}
Наконец, измените логику навигации, чтобы добавить эти строки в соответствующие функции:
function backButtonClick(e) {
articlecontent.style.display = "none";
articlelist.style.display = "";
mainTitle.innerHTML = "Welcome to " + wordPressBlogTitle + " blog!";
WinJS.UI.Animation.enterPage(articlelist);
}
function itemInvoked(e) {
var currentArticle = articlesList.getAt(e.detail.itemIndex);
WinJS.Utilities.setInnerHTMLUnsafe(articlecontent, currentArticle.content);
articlelist.style.display = "none";
articlecontent.style.display = "";
mainTitle.innerHTML = currentArticle.title;
WinJS.UI.Animation.enterPage(articlecontent);
}
Вот и все. Запуск приложения в Wax Wane RSS Feed даст вам следующие результаты:
Вам, вероятно, придется использовать Blend для работы над дизайном вашего блога, чтобы получить лучшие результаты.
Наконец, во время тестирования этого решения я обнаружил, что URL-адреса некоторых блогов, которые некоторые из вас прислали мне, не работают с приведенным выше кодом. Это связано с тем, что в их каналах нет узлов <media: content>. Та же проблема для фида Сервера совместной работы. Сам контент хранится внутри узла <description>, и, по крайней мере, для тех версий Technet и MSDN, которые у нас есть, нет узлов <media: content>, которые мы могли бы использовать в качестве базы для своих миниатюр.
Возможным альтернативным решением будет поиск первого доступного URL-адреса изображения в самой записи блога и использование его в качестве эскиза.
Вот предлагаемое возможное решение для WordPress:
function downloadThisWordPressBlogFeed(WPFeedUrl) {
WinJS.xhr({ url: WPFeedUrl }).then(function (rss) {
wordPressBlogTitle = rss.responseXML.querySelector("title").textContent;
mainTitle.innerHTML = "Welcome to " + wordPressBlogTitle + " blog!";
var items = rss.responseXML.querySelectorAll("item");
for (var n = 0; n < items.length; n++) {
var article = {};
article.title = items[n].querySelector("title").textContent;
var thumbs = items[n].querySelectorAll("content");
article.content = items[n].querySelector("encoded").textContent;
if (thumbs.length > 1) {
article.thumbnail = thumbs[thumbs.length - 1].attributes.getNamedItem("url").textContent;
}
else {
var firstindex = article.content.indexOf("<img");
if (firstindex !== -1) {
var secondindex = article.content.indexOf("src=", firstindex) + 5;
var thirdindex = article.content.indexOf("\"", secondindex);
article.thumbnail = article.content.slice(secondindex, thirdindex);
}
}
if (article.thumbnail) {
articlesList.push(article);
}
}
});
}
И вот предлагаемое возможное решение для Сервера совместной работы:
function downloadThisCommunityServerBlogFeed(WPFeedUrl) {
WinJS.xhr({ url: WPFeedUrl }).then(function (rss) {
wordPressBlogTitle = rss.responseXML.querySelector("title").textContent;
mainTitle.innerHTML = "Welcome to " + wordPressBlogTitle + " blog!";
var items = rss.responseXML.querySelectorAll("item");
for (var n = 0; n < items.length; n++) {
var article = {};
article.title = items[n].querySelector("title").textContent;
var thumbs = items[n].querySelectorAll("content");
article.content = items[n].querySelector("description").textContent;
if (thumbs.length > 1) {
article.thumbnail = thumbs[thumbs.length - 1].attributes.getNamedItem("url").textContent;
}
else {
var firstindex = article.content.indexOf("<img");
if (firstindex !== -1) {
var secondindex = article.content.indexOf("src=", firstindex) + 5;
var thirdindex = article.content.indexOf("\"", secondindex);
article.thumbnail = article.content.slice(secondindex, thirdindex);
}
}
if (article.thumbnail) {
articlesList.push(article);
}
}
});
}
Вы заметите, что единственное отличие состоит в том, что имя узла XML, содержащего содержимое статьи на сервере совместной работы, — «<описание>», тогда как для «WordPress» это «<контент: кодированный>».
Этот код недостаточно надежен для рассмотрения всех возможных случаев, поэтому вам, вероятно, придется поработать над этой частью для своего собственного блога. Тем не менее, это решение отлично работает в различных случаях, например, в этом блоге, посвященном Super Heros: http://comicsgen.fr/feed :
И вот результат с моего собственного блога:
Опять же, дизайн далеко не оптимален. Поскольку я выбираю первое изображение в качестве эскиза, оно не всегда подходит или недостаточно качественно. Вы можете подумать об улучшении этой части, выбрав в канале изображение наилучшего качества или пометив одно из изображений определенным классом, чтобы автоматически извлечь его в код JS в качестве эскиза. Тем не менее, вы заметите, что видео в моих постах блогов работают нормально, поскольку они используют… HTML5 <video>!
Итак, у нас уже есть хорошее работающее приложение в нескольких строках HTML5 / CSS3 / JS-кода. Теперь вы должны собрать все основные элементы для создания собственного приложения Windows 8, подключенного к вашему RSS-каналу WordPress или Community Server.
Вы можете скачать решение Visual Studio 2012 здесь: Basic Generic WordPress Metro Reader
Наслаждайтесь!