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

  • Статья

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

Во многих приложениях отображается список элементов, который пользователь может перелистывать. Информация для этих списков может загружаться из базы данных, Интернета или других источников в формате JSON. В WinJS для этой цели предусмотрен элемент управления FlipView.

Элемент управления FlipView.

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

Что такое FlipView?

FlipView — это элемент управления WinJS, который позволяет пролистывать элементы коллекции по одному. Он прекрасно подходит для просмотра коллекции изображений.

Объект FlipView получает данные из интерфейса IListDataSource. WinJS предоставляет несколько типов объектов IListDataSource:

  • Можно использовать объект List для создания IListDataSource из массива данных.
  • StorageDataSource позволяет вам получить доступ к информации о файлах и каталогах.

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

Создание простого FlipView

  1. Добавьте ссылки на WinJS в HTML-файл, если их там еще нет.

    
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    В этом примере приведен HTML-код файла default.html, который генерируется при создании проекта по шаблону Пустое приложение в Microsoft Visual Studio. Отметим, что он уже содержит ссылки на WinJS.

    
<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>FlipViewExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- FlipViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

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

        <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">

    на

         <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">

  2. Создайте в вашем HTML-файле элемент div и задайте для его свойства data-win-control значение "WinJS.UI.FlipView".

    <div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
></div>

  3. В связанном с HTML-файлом коде JavaScript добавьте вызов функции WinJS.UI.processAll при загрузке этого файла.

    WinJS.UI.processAll();

    В следующем примере приведено содержимое файла default.js, связанного с default.html, который был сгенерирован при создании проекта Пустое приложение.

    
// default.js
(function () {
    "use strict";

    var app = WinJS.Application;

    // This function responds to all application activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // TODO: Initialize your application here.
            WinJS.UI.processAll();
        }
    };

    app.start();
})();

    Для корректной работы примера элемент FlipView должен находиться на стартовой странице (default.html). При добавлении FlipView в элемент Page вызывать WinJS.UI.processAll не требуется, так как элемент Page делает это самостоятельно. Если вы добавляете FlipView в собственный пользовательский HTML, вы можете использовать событие DOMContentLoaded для вызова WinJS.UI.processAll. Дополнительные сведения об активации элементов управления см. в разделе Добавление элементов управления и стилей WinJS.

  4. Важно! Задайте высоту и ширину вашего объекта FlipView. Для просмотра FlipView вам нужно указать для высоты абсолютное значение. Добавьте этот CSS-код в таблицу стилей CSS для HTML-страницы, содержащей FlipView:

    #basicFlipView
{
    width: 480px;
    height: 270px;
    border: solid 1px black;    
}

Этот код создает пустой объект FlipView. Если запустить приложение, вы увидите пустой элемент управления. В следующем разделе будет показано, как внести в FlipView данные.

Добавление данных

Для удобства исходный код источника данных лучше всего поместить в отдельный JavaScript-файл. В этом разделе вы узнаете, как создать для своих данных JavaScript-файл и List, а также как с помощью функции WinJS.Namespace.define открыть доступ к данным всем остальным компонентам приложения.

  1. Для добавления файла данных в проект используйте Visual Studio. В окне "Обозреватель решений" щелкните правой кнопкой мыши папку проекта js и выберите команду Добавить > Новый элемент. Откроется диалоговое окно Добавление нового элемента.

  2. Выберите Файл JavaScript. Назовите его "dataExample.js". Чтобы создать файл, нажмите кнопку Добавить. Visual Studio создаст пустой файл JavaScript с именем dataExample.js.

  3. Откройте файл dataExample.js. Создайте анонимную функцию и включите строгий режим.

    Как описано в разделе Создание простейших приложений, полезно инкапсулировать свой код JavaScript, заключив его в анонимную функцию. Рекомендуется также использовать строгий режим.

    (function () {
    "use strict"; 





})();

  4. Создайте массив данных. В данном примере будет создан массив объектов. У каждого объекта есть три свойства: type, title и image.

    (function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

})();

    Примечание  Можно заменить изображения в вашем коде на файлы на локальном компьютере или взять изображения из статьи Пример использования элемента управления FlipView, написанный на HTML (это другой пример, но в нем используются те же изображения). Кроме того, данный пример можно выполнить, не добавляя изображения,—— он может работать и без них.

     

  5. Создайте объект List с помощью массива.

    (function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

    var dataList = new WinJS.Binding.List(dataArray); 

})();

  6. Откройте доступ к объекту List, объявив пространство имен и добавив List в качестве общедоступного члена.

    Так как код заключен в анонимную функцию, он недоступен извне. (Это одна из причин использования анонимной функции — обеспечение приватности данных.) Чтобы объект FlipView смог получить доступ к List, необходимо сделать его общедоступным. Один из способов сделать это — создать пространство имен с помощью функции WinJS.Namespace.define и добавить List в качестве одного из его членов.

    Функция WinJS.Namespace.define принимает два параметра: имя создаваемого пространства имен и объект, содержащий одну или несколько пар свойство-значение. Каждое свойство — это открытое имя члена, а каждое значение — это базовая переменная, свойство или функция в вашем частном коде, к которым вы хотите открыть доступ.

    В этом примере создается пространство имен DataExample, предоставляющее общедоступный itemList, который возвращает ваш объект List

    (function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

    var dataList = new WinJS.Binding.List(dataArray);

    // Create a namespace to make the data publicly
    // accessible. 
    var publicMembers =
        {
            itemList: dataList 
        };
    WinJS.Namespace.define("DataExample", publicMembers); 

})();

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

Подключение данных к FlipView

  1. В разделе head HTML-файла, содержащего элемент FlipView, добавьте ссылку на только что созданный файл данных (dataExample.js):

    <head>
    <meta charset="utf-8">
    <title>FlipViewExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- FlipViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>

    <!-- Your data file. -->
    <script src="/js/dataExample.js"></script>

</head>

  2. С помощью созданных в последнем разделе данных задайте для элемента управления FlipView свойство itemDataSource.

    Свойство itemDataSource принимает объект IListDataSource. Объект List не является IListDataSource, но имеет свойство dataSource, которое возвращает IListDataSource-версию самого себя.

    Чтобы подключить данные, задайте для элемента управления FlipView в свойстве itemDataSource значение DataExample.itemDataList.dataSource:

    
<div id="basicFlipView"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource }">
</div>

Запустите приложение. В FlipView отобразятся свойства и значения, взятые из источника данных.

Отображение содержимого источника данных без использования шаблона.

Однако это не совсем тот результат, которого мы ожидали. Мы хотим показать только значения поля заголовка и фактические изображения, а не путь к изображениям. Для решения проблемы необходимо определить шаблон Template. Подробнее об этом — в следующем подразделе.

Определение шаблона элемента

Итак, в элементе FlipView есть все необходимые данные, но пока что они отображаются некорректно. И здесь нам понадобится создать шаблон элемента. Это можно сделать двумя способами: определить WinJS.Binding.Template с помощью ручной разметки или же реализовать функцию, которая сделает это автоматически. В этом примере мы создадим шаблон вручную. (Сведения о создании функции шаблона см. в описании свойства itemTemplate.)

Создать WinJS.Binding.Template довольно легко — достаточно задать разметку для каждого элемента списка и указать местоположение каждого поля данных в окне приложения.

  1. В HTML-файле создайте элемент управления WinJS.Binding.Template и присвойте ему идентификатор. В этом примере используется идентификатор "ItemTemplate".

    <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">

</div>

    Примечание  Шаблон должен быть определен до его использования. Поэтому добавьте HTML для нашего шаблона перед HTML для FlipView.

     

  2. В WinJS.Binding.Template должен быть только один корневой элемент. Создайте элемент div, который будет родительским объектом для содержимого шаблона.

    <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>

    </div>
</div>

  3. Создайте разметку, которую FlipView будет применять ко всем внутренним элементам данных. Данные, созданные вами в предыдущем разделе, содержат расположение изображения, заголовок и сопровождающий текст, поэтому создайте следующие элементы:

    • img — для поля с картинкой;
    • Элемент h2 для отображения поля заголовка.

    (В этом примере также добавляется дополнительный элемент div в целях форматирования.)

    <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#"  />
        <div>
            <h2></h2>
        </div>
    </div>
</div>

  4. Задайте атрибут data-win-bind в каждом элементе, отображающем данные. В атрибуте data-win-bind используется следующий синтаксис:

    data-win-bind="propertyName: dataFieldName"

     

    Например, для привязки свойства src объекта img к полю "picture" используется синтаксис:

    <img data-win-bind="src : picture" />

    Если нужно задать несколько свойств, разделяйте их точкой с запятой:

    data-win-bind="property1Name: dataField1Name; property2Name: dataField2Name"

     

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

    
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#" data-win-bind="src: picture; alt: title" />
        <div>
            <h2 data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>

  5. Чтобы воспользоваться шаблоном элемента, задайте свойству itemTemplate объекта FlipView идентификатор этого шаблона (в данном случае это "ItemTemplate").

    <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#" data-win-bind="src: picture; alt: title" />
        <div>
            <h2 data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>    

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }"
></div>

    Запустите приложение. В списке появятся соответствующие данные.

    FlipView с привязкой данных.

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

Применение стилей к элементам

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

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div class="overlaidItemTemplate">
        <img class="image" src="#" data-win-bind="src: picture; alt: title" />
        <div class="overlay">
            <h2 class="ItemTitle" data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }"
></div>

В таблице стилей CSS для HTML-файла добавьте следующие стили для шаблона:

#basicFlipView
{
    width: 480px;
    height: 270px;
    border: solid 1px black;    
}

/**********************************************/
/*                                            */
/* Styles used in the item template           */
/*                                            */
/**********************************************/
.overlaidItemTemplate
{
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
    width: 480px;
    height: 270px;
}

    .overlaidItemTemplate img
    {
        width: 100%;
        height: 100%;
    }
    
    .overlaidItemTemplate .overlay
    {
        position: relative;
        -ms-grid-row-align: end;
        background-color: rgba(0,0,0,0.65);
        height: 40px;
        padding: 20px 15px;
        overflow: hidden;
    }

        .overlaidItemTemplate .overlay .ItemTitle
        {
            color: rgba(255, 255, 255, 0.8);
        }

Теперь FlipView выглядит вот так:

FlipView с заданными стилями.Примечание  

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

 

Изменение ориентации FlipView

По умолчанию FlipView использует горизонтальную ориентацию. Объект FlipView можно отображать по вертикали, задав свойству orientation значение "vertical".

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate, orientation: 'vertical' }"
></div>

FlipView с вертикальной ориентацией.

Добавление интерактивных элементов в шаблон элемента

Шаблон элемента может содержать большинство других элементов управления, но не может содержать элемент ListView или другой элемент FlipView.

Обычно, когда пользователь взаимодействует с элементом, FlipView захватывает это взаимодействие и использует его, чтобы определить, что делает пользователь: выбирает или вызывает элемент либо сдвигает элементы. Чтобы интерактивный элемент, такой как элемент управления, принимал ввод, вы должны присоединить класс win-interactive к интерактивному элементу или одному из его родительских элементов. Такой элемент и его дочерние элементы принимают взаимодействие и больше не запускают события для элемента FlipView.

Когда вы присоединяете класс win-interactive к интерактивному элементу в шаблоне элемента, необходимо обеспечить, чтобы интерактивный элемент не занимал весь элемент. В противном случае у пользователя не будет возможности выбрать или вызвать этот элемент.

Чтобы добавлять интерактивные элементы в шаблон элемента, необходимо использовать функцию создания шаблона вместо WinJS.Binding.Template. Пример того, как это сделать, см. в разделе Пример использования элемента управления FlipView, написанный на HTML. Дополнительные сведения о функциях создания шаблонов см. в примерах FlipView.itemTemplate.

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

Объект FlipView предоставляет методы и события для создания пользовательских элементов управления, дающих пользователю представление о нахождении текущего элемента и альтернативные механизмы навигации по коллекции. На следующей иллюстрации показан стилизованный набор переключателей, синхронизация которых с FlipView поддерживается с помощью событий pageselected и pagevisibilitychanged.

FlipView с элементами управления контекстом.

Пример кода, показывающий, как это сделать, см. в разделе Пример использования элемента управления FlipView, написанный на HTML.

Связанные разделы

FlipView Reference

Пример использования элемента управления FlipView, написанный на HTML