Microsoft — мировой лидер в области ПО и ИТ-услуг
492,04
рейтинг
25 декабря 2012 в 10:31

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

Эта статья продолжает серию материалов (первая часть), посвященных азам разработки 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.

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


Добавьте в объект-описание поста (postItem) следующие строчки в конце, не забыв добавить запятую строчкой выше:

            // ссылка на картинку
            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://aka.ms/win8jsreadertemplate_v1.

Далее


В следующей части мы займемся улучшением работы с данными и добавлением поддержки нескольких контрактов.

Предыдущие части


Автор: @kichik
Microsoft
рейтинг 492,04
Microsoft — мировой лидер в области ПО и ИТ-услуг

Комментарии (0)

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Разработка