Краткое руководство: определение макетов приложения (HTML)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

Вы можете определить макеты приложения для любого размера окна или ориентации.

См. эту функцию в действии в нашей серии Функции приложений от А до Я: Пользовательский интерфейс Магазина Windows от А до Я

Цель: Ознакомившись с этой статьей, вы получите полное представление о том, как использовать HTML, каскадные таблицы стилей (CSS) и JavaScript для создания динамического пользовательского интерфейса, который хорошо выглядит и не менее хорошо работает во всех состояниях просмотра.

Необходимые условия

Продумайте дизайн своего приложения.

Подробнее о планировании и проектировании приложения среды выполнения Windows: Определение концепции.
Познакомьтесь с окнами изменяемого размера в Windows 8.1.

Подробнее о состояниях просмотра см. в статье Руководство по взаимодействию с пользователями — макеты и масштабирование.
Разберитесь в запросах CSS носителей.

Запросы носителей определены в спецификации "Запросы носителей" консорциума W3C. Запросы носителей в действии можно посмотреть в нашем образце запросов CSS носителей.
Научитесь использовать расширенные возможности макетов, которые предлагают каскадные таблицы стилей уровня 3 (CSS3), особенно выравнивание по сетке.

Подробнее о расширенных возможностях макетов CSS3 и выравнивании по сетке см. в документе CSS.

Адаптивный макет с примером CSS

В этой статье рассматриваются основные концепции определения макетов приложений с помощью описания реализации макетов в примере адаптивного макета с CSS. Этот пример представляет собой имитацию метеорологического приложения, которое отображает погоду на текущий день и прогноз на десять дней. Он демонстрирует использование CSS и HTML, сетки CSS, элемента управления ListView и запросов CSS-носителей для создания динамического макета приложения.

Прежде чем перейти к деталям, рассмотрим структуру образца адаптивного макета с CSS. Приложение состоит из трех HTML-страниц. Первая страница верхнего уровня называется App.html; она определяет основную поверхность для элементов пользовательского интерфейса приложения. Она включает кнопку "Назад", заголовок и подзаголовок, меню приложения, кнопки панели приложения и область для отображения содержимого (белая область на следующем рисунке).

Главная страница примера приложения

Остальные две HTML-страницы — Current.html и TenDay.html — определяют структуру содержимого, отображаемого в области содержимого на главной странице. Страница Current.html отображает сведения о погоде на текущий день:

Страница текущей погоды

Страница TenDay.html отображает прогноз погоды на десять дней:

Страница прогноза на десять дней

Мы остановимся на разделах примера адаптивного макета с CSS, в которых определяются макет главной страницы приложения и макет десятидневного прогноза.

Вот как выглядит на полном экране главная страница приложения при отображении десятидневного прогноза на дисплее размером 10,6 дюйма при разрешении 1366 x 768 в книжной и альбомной ориентации, а также при размещении рядом с другим приложением и изменении размера для узкого макета и более широкого макета.

книжная ориентация, альбомная ориентация, узкий и широкий макеты

Убедитесь, что приложение заполняет доступную область экрана

В правильно разработанном приложении поверхность интерфейса занимает всю доступную область экрана. Поначалу это может показаться трудной задачей, учитывая огромное количество разных размеров корпусов, разрешений и ориентации экрана устройств, к которым должно адаптироваться приложение. К счастью, CSS значительно упрощает эту задачу.

Чтобы убедиться, что приложение заполняет доступную область экрана, выполните следующие действия:

Используйте элемент div в качестве контейнера верхнего уровня для всех других элементов пользовательского интерфейса на странице.
```
<body>
    <div class="win-ui-dark appGrid">
        
    </div>
</body>
```
Используйте свойства CSS vw и vh, чтобы задавать свойства width и height для div относительно окна просмотра. Например, используйте 100vw (ширина окна просмотра) и 100vh (высота окна просмотра) для заполнения окна просмотра, как показано здесь.
```
.appGrid {
    width: 100vw;
    height: 100vh;
    /* TODO: Add other styles here. */
}
```
vw и vh можно задавать для любого элемента вне зависимости от того, насколько глубоко он находится в иерархии. Поскольку контекст размеров для окна просмотра не изменяется, нет необходимости учитывать наследуемые размеры.

Примечание В этом образце для свойств width и height задается 100 %.

Определение основного макета главной страницы

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

Использование HTML для определения элементов пользовательского интерфейса страницы

Пользовательский интерфейс приложения обычно содержит такие элементы, как кнопки навигации, заголовки, меню, элементы управления и прочие. Добавляйте эти элементы пользовательского интерфейса в качестве дочерних HTML-элементов для элемента верхнего уровня div на странице.

Следующий HTML-код определяет элементы пользовательского интерфейса страницы верхнего уровня приложения с примером адаптивного макета с CSS. К этим элементам относятся кнопка "Назад", заголовок и подзаголовок, меню приложения, область основного содержимого и кнопки панели приложения.

<body>
    <div class="win-ui-dark appGrid">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="win-type-xx-large titlecontainer" tabindex="0"><span class="pagetitle">Mountains</span><span class="win-type-x-large chevron">&#xE099</span></span>
                <span class="win-type-x-large pagesubtitle">Rainer</span>
            </h1>
        </header>
        <div id="headerFlyout" data-win-control="WinJS.UI.Menu">
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'rainierMenuItem', label:'Rainier'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'stHelensMenuItem', label:'St. Helens'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'olympusMenuItem', label:'Olympus'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'bakerMenuItem', label:'Baker'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'adamsMenuItem', label:'Adams'}"></button>
        </div>
        <div class="appViewContentMask">
            <div class="appViewContent">
                <div id="current-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/current.html', data: FluidAppLayout.Data.mountains[0].weatherData[0]}"></div>
                <div id="ten-day-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/tenDay.html', data: FluidAppLayout.Data.mountains[0].weatherData}"></div>
            </div>
        </div>
    </div>
    <div id="appbar" class="win-ui-dark appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'current', label: 'Current', icon: 'calendarday', type: 'toggle', onclick: FluidAppLayout.transitionPivot, selected: 'false', tooltip: 'Get the current report'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'tenDay', label: 'Ten day', icon: 'calendarweek', type: 'toggle', onclick: FluidAppLayout.transitionPivot, selected: 'false', tooltip: 'Get the ten day report'}"></button>
    </div>
</body>

Использование сеток CSS для расположения элементов пользовательского интерфейса на HTML-странице

Один из лучших способов создать динамический и адаптивный пользовательский интерфейс — это использование сеток CSS. Сетка способна автоматически расширяться и заполнять имеющееся пространство, что дает большой набор свойств, облегчающих настройку макета пользовательского интерфейса для окон разного размера. Можно задавать различный порядок расположения элементов на экранах разного размера или при разной ориентации — и даже запретить отображение определенных элементов в некоторых представлениях. Это возможно благодаря тому, что позиция элементов в сетке не зависит от порядка, в котором они указаны — их расположение задается исключительно CSS, а не местом в разметке HTML.

Создание макета главной страницы

В приложении с примером адаптивного макета с CSS сетка CSS применяется к объекту верхнего уровня div на странице App.html установкой свойства display объекта div -ms-grid. Такая сетка верхнего уровня определяет общую структуру для расположения элементов пользовательского интерфейса на главной странице приложения.
Затем образец приложения определяет столбцы и строки сетки заданием значений свойств -ms-grid-columns и -ms-grid-rows.

Следующий код CSS применяет сетку к объекту верхнего уровня div на главной странице образца приложения. Эта сетка используется для расположения элементов, составляющих заголовок приложения (кнопка "Назад", заголовок и подзаголовок, меню приложения), и для задания положения области основного содержимого приложения.
```
.appGrid {
    display: -ms-grid;
    -ms-grid-columns: 120px 1fr;
    -ms-grid-rows: 120px 1fr; 

    /* Other properties omitted for clarity. */

}
```
Приведенный выше код CSS создает сетку с двумя столбцами и двумя строками. Ширина первого столбца 120 пикселей, а ширина второго — одна "дробная часть". Это означает, что ширина столбца автоматически увеличивается для заполнения имеющегося пространства, не занятого первым столбцом. Аналогичным образом определяются и строки.

На этом рисунке показано, как сетка делит главную страницу приложения:
Затем пример адаптивного макета с CSS задает положение элементов пользовательского интерфейса, назначая каждому элементу определенную ячейку сетки. Для этого пример применяет свойства -ms-grid-column и -ms-grid-row к элементам страницы. Сетка CSS поддерживает несколько других свойств для расположения элементов относительно границ ячейки, а также для разрешения элементам занимать несколько столбцов или строк. Дополнительные сведения см. в разделе о макете "Сетка".

Следующий код CSS располагает элемент header на главной странице образца приложения в столбце 1, строке 1 сетки верхнего уровня и разрешает элементу занимать оба столбца сетки. Кроме того, код создает "дочернюю" сетку в пределах столбца 1, строки 1 сетки верхнего уровня. Дочерняя сетка используется для расположения отдельных элементов, составляющих заголовок (кнопка "Назад", заголовок и подзаголовок, меню приложения).
```
header[role=banner] {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column-span: 2;

    /* Child grid for positioning header items.*/
    display: -ms-grid;
    -ms-grid-columns: 120px 1fr;
    -ms-grid-rows: 1fr;
}
```
Приведенный выше код создает сетку в области, выделенной синим цветом на следующем рисунке.

Пример адаптивного макета с CSS использует вложенные элементы div, чтобы определить область основного содержимого, в которой отображаются текущий прогноз и прогноз на десять дней:
```
<div class="appViewContentMask">
    <div class="appViewContent">
        <div id="current-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/current.html', data: FluidAppLayout.Data.mountains[0].weatherData[0]}"></div>
        <div id="ten-day-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/tenDay.html', data: FluidAppLayout.Data.mountains[0].weatherData}"></div>
    </div>
</div>
```
Обратите внимание, что в приведенном выше примере элемент управления из библиотеки Windows для JavaScript HtmlControl используется для динамического включения HTML-страниц для текущего и десятидневного прогнозов. Подробнее об использовании элементов управления WinJS: Краткое руководство: добавление элементов управления и стилей WinJS.

Следующий код CSS располагает appViewContentMask div в столбце 2, строке 2 сетки верхнего уровня. Кроме того, он устанавливает свойства, чтобы обеспечить заполнение содержимым всей ячейки сетки и скрытие содержимого, не умещающегося в ячейке.
```
.appViewContentMask {
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Other properties omitted for clarity. */

}
```
Следующий код CSS превращает appViewContent div в дочернюю сетку, содержащую единственную ячейку, которая заполняет область, определенную объектом appViewContentMask div. Использование дочерней сетки облегчает расплавление содержимого при изменении состоянием просмотра размера или ориентации приложения.
```
.appViewContent {
    width: 100%;
    height: 100%;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
}
```
Код CSS назначает сетку области содержимого для области, выделенной синим цветом:

Определение основного макета прогноза на десять дней

Прогноз на десять дней представляет собой коллекцию элементов, управление которыми и отображение которых осуществляются с помощью элемента управления ListView из WinJS. Каждый элемент состоит из изображения и набора строк, включая дату, максимальную и минимальную температуры, температуру по ощущениям и вероятность снегопада:

Макет элементов в прогнозе на десять дней

Следующая HTML-страница определяет пользовательский интерфейс для элементов в десятидневном прогнозе. Пример адаптивного макета с CSS использует шаблоны и привязку данных из WinJS для передачи данных элементу управления ListView. В этом разделе рассматривается макет пользовательского интерфейса вашего приложения, поэтому мы не будем углубляться в шаблоны и привязку данных. Дополнительные сведения о шаблонах и привязке данных см. в разделе Использование шаблонов для привязки данных.

<body>
    <div class="tenDayPage">
        <div id="tenDayTemplate" class="tenDayTemplate" data-win-control="WinJS.Binding.Template">
            <div class="tenDayGrid">
                <div class="win-type-x-large tenDayDate" data-win-bind="innerHTML: date">
                </div>
                <div class="tenDayImg">
                    <img data-win-bind="src: imgSrc" />
                </div>
                <div class="win-type-x-large tenDayHighLow">
                    <span class="tenDayHigh" data-win-bind="innerHTML: hi"></span>
                    <span>/</span>  
                    <span class="tenDayLow" data-win-bind="innerHTML: low"></span>
                </div>
                <div class="tenDayFeelsLike">
                    <span>Feels like </span>
                    <span data-win-bind="innerHTML: feelsLike"></span>
                </div>
                <div class="tenDayChanceOfSnow">
                    <span>Chance of snow is </span>
                    <span data-win-bind="innerHTML: chanceOfSnow"></span>
                </div>
            </div>
        </div>
        <div id="tenDayListView" class="tenDayListView" data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
    </div>
</body>

Обратите внимание, что в приведенном выше примере используется специальный объект WinJS CSS classes for typography для задания сверхкрупного шрифта для строк даты, а также максимальной и минимальной температур. Вот что означает class="win-type-x-large" в элементах tenDayDate и tenDayHighLow div.

В примере приложения используется следующий код CSS, чтобы страница TenDay.html и соответствующий элемент управления ListView заполняли родительский контейнер (область содержимого на главной странице приложения).

/* Size Page to full size of parent container */
.tenDayPage
{
    height: 100%;
}

/* List View Control */
.tenDayListView
{
    width: 100%;
    height: 100%;
}

Использование запросов CSS носителей для применения макетов и стилей в различных представлениях

С помощью запросов CSS носителей можно без труда определять различные стили для применения к HTML-элементам приложения в зависимости от размера окна. Можно использовать отдельный запрос носителя для каждого следующего макета. Можно также комбинировать запросы, чтобы применять одни и те же наборы стилей к разным макетам. Здесь описываются запросы носителей, используемые примером адаптивного макета с CSS для создания структуры главной страницы и размещения элементов в десятидневном прогнозе.

Создание узкого макета главной страницы

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

Элементы пользовательского интерфейса в заголовке приложения уменьшаются в размере.
Макет изменяется с двух столбцов и двух строк на один столбец, в котором заголовок занимает первую строку, а область основного содержимого занимает вторую строку.

Отличия макета заголовка для узких и широких макетов

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

@media (max-width:499px) {
    .appGrid {
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 120px 1fr;
        width: 100%;
        height: 100%;
    }

    header[role=banner] {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-columns: 60px 1fr;
        -ms-grid-rows: 1fr;
        display: -ms-grid;
    }

        header[role=banner] .win-backbutton {
            -ms-grid-column: 1;
            -ms-grid-row: 1;
            margin-left: 20px;
            margin-top: 75px;
        }

        header[role=banner] .titlearea {
            -ms-grid-column: 2;
            -ms-grid-row: 1;
            margin-top: 69px;
            max-width: 260px;
        }

    .appViewContentMask {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    }

В приведенном выше коде CSS новое значение свойства –ms-grid-columns меняет главную сетку приложения (appGrid) с двух столбцов на один. Кроме того, код CSS определяет новую дочернюю сетку для элементов заголовка приложения и располагает элементы заголовка в новой сетке. Наконец, код перемещает область содержимого (appViewContentMask) из столбца 2, строки 2 старой сетки в столбец 1, строку 2 новой сетки.

Создание узкого макета десятидневного прогноза

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

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

Отличия макета элемента для узких и широких макетов

Чтобы получать различные, зависимые от представления макеты, пример использует запросы CSS носителей для применения стилей на основании текущего состояния просмотра. Этот пример определяет один набор стилей общим для всех состояний просмотра, а другой набор — только для макетов, ширина которых меньше 500 пикселей.

/* Styles that are common across all view states */
    .tenDayGrid
    {
        width: 190px;
        height: 250px;
        overflow: hidden;
        padding: 10px;
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: (auto)[5];
    }

    .tenDayDate
    {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
    }

    .tenDayImg
    {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    }

    .tenDayHighLow
    {
        -ms-grid-column: 1;
        -ms-grid-row: 3;
    }

    .tenDayFeelsLike
    {
        -ms-grid-column: 1;
        -ms-grid-row: 4;
    }
    .tenDayChanceOfSnow
    {
        -ms-grid-column: 1;
        -ms-grid-row: 5;
    }
}

/* Define the template for the width less than 500px */
@media (max-width:499px)
{
    .tenDayDate
    {
        font-weight: 600;
    }

    .tenDayDate > .day
    {
       font-weight: 200;
    }

    .tenDayHighLow
    {
        font-weight: 300;
    }

    .tenDayFeelsLike, .tenDayChanceOfSnow
    {
        font-weight: 300;
    }

    .tenDayGrid
    {
        width: 250px;
        height: 150px;
        overflow: hidden;
        padding: 10px;
        display: -ms-grid;
        -ms-grid-columns: auto 1fr;
        -ms-grid-rows: (auto)[4];
    }

    .tenDayDate
    {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-column-span: 2;
    }

    .tenDayImg
    {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
        -ms-grid-row-span: 3;
    }

    .tenDayHighLow
    {
        -ms-grid-column: 2;
        -ms-grid-row: 2;
    }

    .tenDayFeelsLike
    {
        -ms-grid-column: 2;
        -ms-grid-row: 3;
    }
    .tenDayChanceOfSnow
    {
        -ms-grid-column: 2;
        -ms-grid-row: 4;
    }
}

Использование JavaScript для обработки событий изменения размеров окна (при необходимости)

Рекомендуется определить как можно больше макетов приложения с помощью CSS и запросов носителей. Однако иногда возникает необходимость использовать JavaScript для устранения проблем макетирования, которые невозможно решить средствами CSS.

Так, пример приложения использует элемент управления ListView из WinJS, чтобы отображать элементы в десятидневном прогнозе, и переключает режимы ListView "список" и "сетка" в зависимости от ширины приложения. Когда ширина примера приложения составляет не менее 500 пикселей, ListView использует режим сетки для размещения элементов по вертикали и по горизонтали и заполнения родительского контейнера. Когда ширина меньше 500 пикселей, ListView использует режим списка для расположения элементов в виде вертикального списка.

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

В следующем примере адаптивного макета с CSS для ListView задается режим сетки. Если ширина окна меньше 500 пикселей, ListView переходит в режим списка. Прослушиватель событий приложения ожидает передачи данных о событии изменения размера, а затем опрашивает свойство clientWidth и соответствующим образом изменяет ListView.

function ready(element, options) { 
        element.winControl = this; 
        var that = this; 
        WinJS.UI.process(element).done(function () { 
            that.listView = element.querySelector(".tenDayListView").winControl; 
            var itemTemplate = element.querySelector(".tenDayTemplate"); 
            var listViewLayout = new WinJS.UI.GridLayout(); 
 
            if (document.body.clientWidth <= 499) { 
                listViewLayout = new WinJS.UI.ListLayout(); 
            } 
            else { 
                element.style.opacity = "0"; 
            } 
 
            // ... 
 
            window.addEventListener("resize", tenDayResize, false); 
        }); 
    } 
 
    function tenDayResize(e) { 
 
        var listview = document.querySelector(".tenDayListView").winControl; 
 
        if (document.body.clientWidth <= 499) { 
            if (!(listview.layout instanceof WinJS.UI.ListLayout)) { 
                listview.layout = new WinJS.UI.ListLayout(); 
            } 
        } 
        else { 
            if (listview.layout instanceof WinJS.UI.ListLayout) { 
                listview.layout = new WinJS.UI.GridLayout(); 
            } 
        } 
    }

Сводка

Теперь вы поняли, как использовать HTML, CSS и JavaScript для создания динамического пользовательского интерфейса для приложения, чтобы оно достойно выглядело и хорошо работало в окнах любого размера.