Введение в разработку WinRT-приложений на HTML/JavaScript. Стилизация приложения

от автора

Эта статья продолжает серию материалов (первая часть), посвященных азам разработки WinRT-приложений на HTML/JS для Windows 8. Мы последовательно пройдем путь от стартового практически пустого шаблона к полноценному приложению с серверной частью и живыми плитками.

Напомню, что в первой статье мы научились добавлять собственные источники данных и остановились на отображении этих данных в сыром виде на страницах приложения.

В данной статье мы займемся внешним видом нашего приложения: добавим картинки, поменяем заголовки, стили, плитки и т.п. Всю работу можно провести в 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/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *