Напомню, что в первой статье мы научились добавлять собственные источники данных и остановились на отображении этих данных в сыром виде на страницах приложения.
В данной статье мы займемся внешним видом нашего приложения: добавим картинки, поменяем заголовки, стили, плитки и т.п. Всю работу можно провести в Visual Studio, хотя некоторые вещи удобнее и нагляднее менять в Expression Blend.
XAML/C#. Если вы заинтересованы в разработке с использованием XAML и C#, рекомендую обратить внимание на аналогичную серию статей моего коллеги — Стаса Павлова: Разбираемся с разработкой Windows 8 приложений на XAML/С#, реализуя простой RSS Reader.
Извлечение картинок
Первым делом, давайте попробуем вытащить из постов изображения, если они там, конечно, есть. Для этого откройте файл js\data.js и перейдите к функции getItemsFromRSSFeed, занимающейся разбором отдельных постов.
Добавьте перед строчкой «var postItem = {» следующий код:
// извлечение ссылки на изображение в посте var tempElement = document.createElement("div"); tempElement.innerHTML = postContent; var image = tempElement.querySelector("img"); var imglink = (image != null) ? "url('" + image.src + "')" : "";Здесь мы создаем временный элемент с контентом поста и извлекаем (querySelector) из него первую же картинку, чтобы использовать ее в качестве фоновой на плитках к постам. В случае, если картинки нет, используем пустую строку, которую передадим в соответствующее правило CSS.
Замечание: здесь мы также можем попасть в ситуацию, когда явной картинки в посте нет, но есть невидимая, применяемая для подсчета числа просмотров. Именно такая ситуация имеет место для блогов, используемых в ходе статьи, однако, эти картинки прозрачные, поэтому в нашем случае это не критично.
Добавьте в объект-описание поста (post-item) следующие строчки в конце, не забыв добавить запятую строчкой выше:
// ссылка на картинку backgroundImage: imglinkДолжно получиться примерно вот так:
var postItem = { … link: post.querySelector("link").textContent, // ссылка на картинку backgroundImage: imglink };Если вы сейчас запустите проект на отладку, вы увидите, что визуально ничего не поменялось.
Откройте файл pages\groupedItems\groupedItems.html. Внутри этого файла для описания структуры страницы и связывания данных используются шаблоны. Найдите шаблон элемента, начинающийся строчкой:
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">Двумя строчками ниже вы увидите описание картинки:
<img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />Если вы знакомы с основами HTML, вы наверняка уже догадались, почему в отображении ничего не поменялось: формат, который мы использовали выше, рассчитан на использование в CSS, а не явную вставку ссылки на изображение через img.
Замечание: одна из причин, почему в данном случае CSS является предпочтительнее, заключается в более гибких настройках отображения и, в частности, наличие возможности манипуляций с изображением, в том числе с сохранением пропорций.
Удалите эту строчку для вставки изображения.
Поднимитесь на уровень выше и замените строчку
<div class="item">на следующую:
<div class="item" data-win-bind="style.backgroundImage: backgroundImage">Здесь мы используем возможности связывания данных (атрибуты data-win-bind) с шаблоном для проекции свойств в данных на атрибуты в элементах html-разметки и DOM.
Попробуйте запустить приложение на отладку:
Стало лучше, но по-прежнему не очень. Например, как мы и ожидали, в некоторых постах нет изображений — и вместо них мы получили отсутствие картинок или пустые заглушки. Давайте для таких постов поставим цветной фон. Для этого откройте в той же папке файл groupedItems.css.
Найдите следующую строчку, описывающую отображение отдельного элемента:
.groupeditemspage .groupeditemslist .item {Добавьте в конце этого CSS-правила описание фона:
background-color: rgb(0, 204, 255);Дополнительно можно сделать еще несколько манипуляций над фоновым изображением, например, центрировать его, отменить повторения и задать режим масштабирования:
background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;Запускаем приложение:
Теперь давайте перейдем к исправлению отображения текстового содержимого.
Обновление текстовых стилей
Вернитесь к файлу groupedItems.html и описанию шаблона элемента (itemtemplate). В конце элемента вы найдете описание подзаголовка (item-subtitle). В нашем случае никакого подзаголовка нет, зато есть дата, поэтому замените эту строчку:
<h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>на следующие:
<h6 class="item-date win-type-ellipsis"> <span data-win-bind="textContent: day"></span> <span data-win-bind="textContent: month"></span> </h6>Если вы попробуете сейчас запустить, вы увидите, что дата куда-то съехала и залезла на заголовок.
Чтобы это поправить, перейдите назад к CSS-файлу. Найдите описание подзаголовка:
.groupeditemspage .groupeditemslist .item .item-overlay .item-subtitle { -ms-grid-row: 2; width: 220px; }Замените его на соответствующее описание отображение даты:
.groupeditemspage .groupeditemslist .item .item-overlay .item-date { -ms-grid-row: 2; width: 220px; text-transform: uppercase; text-align:right; }В данном случае мы также добавили выравнивание по правому краю и отображение текста в верхнем регистре.
Замечание: обратите внимание, что для позиционирования элементов использует модуль CSS 3 Grid Layout. Мы не будем останавливаться на деталях его использования, но если вы планируете создавать приложения для Windows Store на HTML/JS, рекомендуем хорошо изучить его возможности.
Теперь давайте попробуем сделать заголовок записи побольше и изменить его положение на плитке.
Для начала его необходимо вынести на уровень выше. Перейдите к файлу groupedItems.html и внутри шаблона элемента вынесите описание заголовка на уровень выше, добавив обертку. Должно получиться примерно так:
<div class="item" data-win-bind="style.backgroundImage: backgroundImage"> <!-- Заголовок --> <div class="item-title-container"> <h4 class="item-title" data-win-bind="textContent: title"></h4> </div> <div class="item-overlay"> <h6 class="item-date win-type-ellipsis"> <span data-win-bind="textContent: day"></span> <span data-win-bind="textContent: month"></span> </h6> </div> </div>Вернитесь к CSS-файлу, в нем необходимо отобразить изменение иерархии и прописать обновленные стили.
После правила .groupeditemspage .groupeditemslist .item { … } добавьте новое:
.groupeditemspage .groupeditemslist .item .item-title-container { -ms-grid-row: 1; margin: 10px; padding: 8px; opacity: 0.85; }Сразу после него перенесите находящееся ниже описание заголовка (.item-overlay надо заменить на .item-title-container):
.groupeditemspage .groupeditemslist .item .item-title-container .item-title { overflow: hidden; width: 220px; display: inline; font-size: 1.6em; line-height: 1.5em; font-family: 'Segoe UI Light'; background: rgb(145, 0, 145); box-shadow: rgb(145, 0, 145) 0 0 0 8px; }Попробуйте запустить проект:
Чтобы убрать подложку, оставшуюся от изначального макета, перейдите ниже по коду в CSS-файле к строчкам:
.groupeditemspage .groupeditemslist .item .item-overlay { background: rgba(0,0,0,0.65); }Замените указанный цвет на transparent.
Попробуйте самостоятельно увеличить размер текста у даты и поменять шрифт на “Segoe UI Semibold” и название приложения на другое:
В качестве домашнего задания — попробуте поменять внешний вид плиток, чтобы они приняли такой вид (подсказка: вам помогут градиенты):
Перейдите внутрь группы и внутрь отдельного блога. Аналогичные действия по изменению внешнего вида необходимо проделать для всех внутренних страниц:
Переведите приложение в Snapped-режим (если вы работаете в Expression Blend, на вкладке Device можно менять режим отображения). Здесь также нужно поправить стили с учетом выбранной стилистики.
Стили для Snap-режима корректируются с помощью Media Queries:
@media screen and (-ms-view-state: snapped) { ... }Замечание: в данном проекте мы не меняли тему оформления (по умолчанию используется темная). Тема задается в подключаемом из библиотеки WinJS CSS-файле. Вы легко найдете его в заголовке каждой страницы:
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />Попробуйте поменять dark на light, чтобы увидеть разницу. Обратите внимание, что поменялся не только цвет фона, но и цвет текста и других элементов. В нашем случае это может привести к нежелательным последствиям, так как часть использованных цветов рассчитана на темный цвет фона и белый цвет основного текста.
Проект
Готовый проект на текущей стадии можно скачать тут: http://sdrv.ms/VZRxYf.
Далее
В следующей части мы займемся улучшением работы с данными и добавлением поддержки нескольких контрактов.
Предыдущие части
ссылка на оригинал статьи http://habrahabr.ru/company/microsoft/blog/163813/
Добавить комментарий