Inicio rápido: agregar un FlipView (HTML)

  • Artículo

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Muchas aplicaciones muestran una lista de elementos por los que el usuario puede desplazarse rápidamente. Estas listas pueden obtener sus datos de una base de datos, de la web o de un origen de datos JSON. WinJS proporciona el control FlipView justamente para este propósito.

Un control FlipView

Requisitos previos

¿Qué es FlipView?

FlipView es un control de WinJS que te permite pasar por una colección de elementos, uno por uno. Es estupendo para mostrar una galería de imágenes.

FlipView obtiene los datos de un IListDataSource. WinJS ofrece varios tipos de objetos IListDataSource:

También puedes crear tu propio origen de datos personalizado y conectarlo a otro tipo de proveedor de datos, como un servicio web o una base de datos. Para obtener instrucciones, consulta el tema sobre cómo crear un origen de datos personalizado.

Crear un FlipView simple

  1. Agrega a tu archivo HTML algunas referencias a WinJS, si aún no las contiene.

    
<!-- 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>

    En este ejemplo se muestra el HTML del archivo default.html que se genera cuando creas un proyecto Aplicación vacía en Microsoft Visual Studio. Ten en cuenta que ya contiene referencias a 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>

    Este ejemplo usa la hoja de estilos clara (light) en lugar de la oscura (dark) así que, si quieres que tu aplicación concuerde con estos ejemplos, tienes que cambiar esta referencia:

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

    ...a esta:

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

  2. En tu archivo HTML, crea un elemento div y establece su propiedad data-win-control en "WinJS.UI.FlipView".

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

  3. En el código JavaScript que acompaña a tu archivo HTML, llama a la función WinJS.UI.processAll cuando tu HTML esté cargado.

    WinJS.UI.processAll();

    En el siguiente ejemplo se muestra el archivo default.js que acompaña al archivo default.html que se creó cuando creaste un nuevo proyecto Aplicación vacía.

    
// 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();
})();

    Este ejemplo funciona si agregas el FlipView a tu página de inicio (default.html). Si vas a agregar el FlipView a un control de página, no necesitas llamar a WinJS.UI.processAll porque el control de página se encarga de hacerlo. Si agregas el FlipView a tu propio HTML personalizado, puedes usar el evento DOMContentLoaded para llamar a WinJS.UI.processAll. Para obtener más información sobre cómo activar tus controles, consulta Inicio rápido: Agregar controles y estilos de WinJS.

  4. Importante: define el alto y el ancho de tu FlipView. Para representar un FlipView, tienes que especificar el alto con un valor absoluto. Agrega este CSS a la hoja de estilos CSS para la página HTML que contiene el control FlipView:

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

Este código crea un FlipView vacío. Si ejecutas la aplicación, verás un control vacío. En la siguiente sección, creas datos para mostrarlos en el FlipView.

Definir tus datos

Coloca el código para crear el origen de datos en un archivo JavaScript independiente. De esta manera, será más fácil de mantener. En esta sección, aprendiste a crear un archivo JavaScript para los datos, el procedimiento para crear un List y el procedimiento para usar la función WinJS.Namespace.define para que los datos estén accesibles al resto de la aplicación.

  1. Usa Visual Studio agregar un archivo de datos al proyecto. En el Explorador de soluciones, haz clic con el botón secundario en la carpeta js del proyecto y selecciona Agregar > Nuevo elemento. Se abre el cuadro de diálogo Agregar nuevo elemento.

  2. Selecciona Archivo JavaScript. Asígnale el nombre "dataExample.js". Haz clic en Agregar para crear el archivo. Visual Studio crea un archivo JavaScript vacío denominado dataExample.js.

  3. Abre dataExample.js. Crea una función anónima y activa el modo estricto.

    Como se describe en el tema sobre codificación de aplicaciones básicas, es recomendable encapsular el código JavaScript al ajustarlo en una función anónima, así como usar el modo estricto.

    (function () {
    "use strict"; 





})();

  4. Crea una matriz de datos. En este ejemplo se crea una matriz de objetos. Cada objeto tiene tres propiedades: type, title e 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" }
    ];

})();

    Nota  Si vas trabajando en tu código, puedes cambiar las imágenes a archivos en tu equipo local o puedes conseguir las imágenes si descargas la muestra de control FlipView HTML (no es la misma muestra, pero usa las mismas imágenes). También puedes ejecutar la muestra sin agregar las imágenes—no dejará de ejecutarse sin ellas.

     

  5. Usa la matriz para crear un objeto 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. Para exponer el control List, declara un espacio de nombres y agrega el control List como miembro público.

    Como el código que acabas de escribir está incluido en una función anónima, no se puede acceder públicamente al mismo. (En parte, este es el motivo por el que usaste la función anónima: para que los datos privados sigan siendo privados.) Para que el control FlipView pueda acceder al control List, debes hacer que sea de acceso público. Una manera de hacerlo es usar la función WinJS.Namespace.define para crear un espacio de nombres y agregar el control List como uno de sus miembros.

    La función WinJS.Namespace.define toma dos parámetros: el nombre del espacio de nombres para crear y un objeto que contiene uno o más pares de propiedad/valor. Cada propiedad es el nombre público del miembro, y cada valor es la variable, propiedad o función subyacente en el código privado que deseas exponer.

    En este ejemplo se crea un espacio de nombres llamado DataExample que expone un miembro público con el nombre itemList, que devuelve el control 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); 

})();

Has creado un origen de datos al que puede acceder tu FlipView. En la siguiente sección, conectas los datos al FlipView.

Conectar los datos al FlipView

  1. En la sección head del archivo HTML que contiene tu FlipView, agrega una referencia al archivo de datos que acabas de crear (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. Usa los datos que creaste en la última sección para establecer la propiedad itemDataSource del control FlipView.

    La propiedad itemDataSource toma un objeto IListDataSource. El objeto List no es un objeto IListDataSource, pero tiene una propiedad dataSource que devuelve una versión propia de IListDataSource.

    Para conectar tus datos, establece la propiedad la propiedad itemDataSource del control FlipView en DataExample.itemDataList.dataSource:

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

Ejecuta la aplicación. El FlipView muestra las propiedades y los valores en el origen de datos:

Mostrar el contenido del origen de datos sin una plantilla.

No es precisamente el aspecto que nos interesa. Queremos mostrar solamente los valores del campo de título y las imágenes en sí, no solo su ruta de acceso. Para obtener la representación que queremos, tenemos que definir una Template. El siguiente paso muestra cómo hacerlo.

Definir una plantilla de elemento

A estas alturas, el FlipView tiene todos los datos que necesita, pero no sabe cómo mostrarlos. Por eso, necesitas una plantilla de elemento. Hay dos formas de crear una plantilla: puedes usar el marcado para definir un WinJS.Binding.Template o puedes crear una función de plantillas. Este ejemplo crea una plantilla en el marcado. (Para obtener información para crear una función de plantillas, consulta la propiedad itemTemplate).

Es fácil crear un WinJS.Binding.Template: defines el marcado que quieres usar para mostrar cada elemento de la lista y después indicas dónde se muestra cada campo de datos.

  1. En tu HTML, crea un control WinJS.Binding.Template y asígnale un identificador. En este ejemplo se usa el identificador "ItemTemplate".

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

</div>

    Nota  Antes de usar la plantilla, hay que definirla, así que agrega el HTML para nuestra plantilla antes del HTML para tu FlipView.

     

  2. WinJS.Binding.Template debe tener un único elemento raíz. Crea un elemento div que sirva de elemento primario para el contenido de la plantilla.

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

    </div>
</div>

  3. Crea el marcado que el FlipView presentará para cada elemento de datos que contenga. Los datos que creaste en la sección anterior contienen la ubicación de una imagen, un título y algo de texto, así que crea estos elementos:

    • Un elemento img para mostrar el campo de imagen.
    • Un elemento h2 para mostrar el campo de título.

    (Este ejemplo también agrega un elemento div adicional por formato).

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

  4. Establece el atributo data-win-bind en cada elemento que muestre datos. El atributo data-win-bind usa esta sintaxis:

    data-win-bind="propertyName: dataFieldName"

     

    Por ejemplo, para enlazar la propiedad src de un objeto img al campo "picture", usa esta sintaxis:

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

    Para establecer varias propiedades, sepáralas con un punto y coma:

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

     

    Este ejemplo enlaza los elementos en la plantilla a sus campos de datos correspondientes.

    
<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. Para usar la plantilla de elemento, establece la propiedad itemTemplate del control FlipView en el identificador de tu plantilla de elemento ("ItemTemplate", en este ejemplo)

    <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>

    Ahora, cuando ejecutes la aplicación, aparecen los datos enlazados en la lista.

    Un FlipView enlazado a datos

    Fíjate en que hay algunos problemas de formato: el texto del título no se muestra. La siguiente sección muestra cómo arreglar el problema aplicando estilos a la plantilla.

Aplicar estilos a los elementos

Puedes usar CSS para aplicar estilos a tu plantilla de elemento. El siguiente ejemplo agrega algunas clases CSS a la plantilla que definiste en la sección Definir una plantilla de elemento.

<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>

En la hoja de estilos CSS para tu archivo HTML, agrega estos estilos para la plantilla:

#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);
        }

Este es el aspecto que el FlipView tiene ahora:

FlipView con estilos aplicadosNota  

Si cambias la font-family de los botones de navegación del FlipView, los botones dejarán de contener el glifo correcto.

 

Cambiar la orientación del FlipView

De forma predeterminada, el FlipView usa la orientación horizontal. Puedes mostrar el control FlipView de forma vertical si estableces su propiedad orientation en "vertical".

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

FlipView con orientación vertical

Agregar elementos interactivos a una plantilla de elemento

La plantilla de elemento puede contener la mayoría de los otros controles, pero no puede contener un ListView ni otro FlipView.

Normalmente, cuando el usuario interactúa con un elemento, el FlipView captura esa interacción y la usa para determinar si el usuario seleccionó o invocó un elemento o si está realizando un movimiento panorámico por los elementos. Para que un elemento interactivo, como un control, reciba entrada, debes adjuntar la clase win-interactive al elemento interactivo o a uno de sus elementos principales. Ese elemento y sus elementos secundarios reciben la interacción y ya no desencadenan eventos para el FlipView.

Cuando adjuntas la clase win-interactive a un elemento en una plantilla de elemento, asegúrate de que el elemento no rellene todo el elemento; de lo contrario, el usuario no tendrá una manera de seleccionar o invocar ese elemento.

Para agregar elementos interactivos a la plantilla de elemento, debes usar una función de plantillas en lugar de WinJS.Binding.Template. Para ver un ejemplo de cómo hacerlo, consulta la muestra de control FlipView HTML. Para obtener más información acerca de las funciones de plantillas, consulta los ejemplos de FlipView.itemTemplate.

Crear un control de contexto

El FlipView expone métodos y eventos que te permiten crear controles personalizados que den al usuario una idea de dónde está el elemento actual y de mecanismos alternativos para navegar por la colección. La siguiente imagen muestra un conjunto de botones de radio con estilos aplicados que se mantienen sincronizados con el FlipView a través de los eventos pageselected y pagevisibilitychanged.

FlipView con un control de contexto

Para ver el código que indica cómo hacerlo, consulta la muestra de control FlipView HTML

Temas relacionados

FlipView Reference

Muestra de control FlipView HTML