Início rápido: adicionando um FlipView (HTML)

  • Artigo

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Muitos aplicativos exibem uma lista de itens pela qual o usuário pode percorrer. Essas listas podem obter os dados de um banco de dados, da Web ou de uma fonte de dados JSON. O WinJS inclui o controle FlipView exatamente para essa finalidade.

Um controle FlipView.

Pré-requisitos

O que é um FlipView?

O FlipView é um controle WinJS que permite percorrer por uma coleção de itens, um de cada vez. Esse controle é ótimo para exibir uma galeria de imagens.

O FlipView extrai seus dados de um IListDataSource. O WinJS oferece vários tipos de objetos IListDataSource:

  • Você pode usar um List para criar um IListDataSource a partir de uma matriz de dados.
  • Você pode usar um StorageDataSource para acessar informações sobre arquivos e diretórios.

Você também pode criar sua própria fonte de dados personalizada que conecta a algum outro tipo de provedor de dados, como um serviço Web ou banco de dados. Para obter instruções, veja Como criar uma fonte de dados personalizada.

Criando um FlipView simples

  1. Adicione referências ao WinJS a seu arquivo HTML, caso ainda não estejam lá.

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

    Este exemplo mostra o HTML do arquivo default.html que é gerado quando você cria um novo projeto Aplicativo em Branco no Microsoft Visual Studio. Observe que ele já inclui referências ao 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 exemplo usa a folha de estilos clara, em vez da folha de estilos escura. Assim, se você quer que seus aplicativos correspondam a esses exemplos, altere a referência:

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

    ...para:

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

  2. Em seu arquivo HTML, crie um elemento div e defina sua propriedade data-win-control como "WinJS.UI.FlipView".

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

  3. No código JavaScript que acompanha seu arquivo HTML, chame a função WinJS.UI.processAll quando o HTML for carregado.

    WinJS.UI.processAll();

    O próximo exemplo mostra o arquivo default.js que acompanha o arquivo default.html criado quando você cria um novo projeto de Aplicativo em Branco.

    
// 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 exemplo funciona quando você adiciona o controle FlipView à sua página inicial (default.html). Se você estiver adicionando o FlipView a um Controle de página, você não precisa chamar WinJS.UI.processAll porque o Controle de página faz isso para você. Quando você adiciona o controle FlipView ao seu próprio HTML personalizado, pode usar o evento DOMContentLoaded para chamar WinJS.UI.processAll. Para saber mais sobre como ativar controles, veja Início rápido: adicionando controles e estilos WinJS.

  4. Importante: defina a altura e a largura de seu FlipView. Para que um controle FlipView seja renderizado, especifique sua altura com um valor absoluto. Adicione esta CSS à folha de estilos CSS da página HTML que contém o controle FlipView:

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

Esse código cria um FlipView vazio. Se você executar o aplicativo, verá um controle vazio. Na próxima seção, crie alguns dados para que o controle FlipView seja exibido.

Definindo seus dados

Coloque o código para criar sua fonte de dados em um arquivo JavaScript separado. Isso pode facilitar sua manutenção. Nesta seção, você vai aprender a criar um arquivo JavaScript para seus dados, a criar um List e a usar a função WinJS.Namespace.define para tornar os dados acessíveis ao restante do seu aplicativo.

  1. Use o Visual Studio para adicionar um arquivo de dados ao seu projeto. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta js do projeto e selecione Adicionar > Novo Item. A caixa de diálogo Adicionar Novo Item aparece.

  2. Escolha Arquivo JavaScript. Dê a ele o nome "dataExample.js". Clique em Adicionar para criar o arquivo. O Visual Studio cria um arquivo em branco do JavaScript chamado dataExample.js.

  3. Abra dataExample.js. Crie uma função anônima e ative o modo restrito.

    Conforme descrito em Codificando aplicativos básicos, é uma ótima ideia encapsular o código JavaScript, através da respectiva quebra automática em uma função anônima, o uso do modo restrito também é uma ídeia excelente.

    (function () {
    "use strict"; 





})();

  4. Crie uma matriz de dados. Este exemplo cria uma matriz de objetos. Cada objeto tem três propriedades: tipo, título e imagem.

    (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" }
    ];

})();

    Observação  Se você estiver acompanhando seu código, poderá mudar as imagens para arquivos no computador local ou poderá obtê-las baixando a a amostra de controle FlipView (não é a mesma amostra, mas usa as mesmas imagens). Você também pode executar a amostra sem adicionar as imagens—ela ainda será executada.

     

  5. Use a matriz para criar um 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. Exponha o objeto List declarando um namespace e adicionando o List como um membro público.

    Como o código que você acabou de criar está incluso em uma função anônima, nenhum dos dois é publicamente acessível. Isso é parte da razão pela qual você usa a função anônima: para manter os dados pessoais confidenciais. Para que seu FlipView seja capaz de acessar o List, você precisará torná-lo publicamente acessível. Uma maneira de fazer isso é usa a função WinJS.Namespace.define para criar um namespace e adicionar o List como um dos seus membros.

    A função WinJS.Namespace.define assume dois parâmetros: o nome do namespace para criar e um objeto que contém um ou mais pares de propriedades/valores. Cada propriedade é o nome público do membro e cada valor é uma variável, propriedade ou função subjacente no código particular que você deseja expor.

    Este exemplo cria um namespace denominado DataExample que expõe um membro público denominado itemList, que retorna o seu 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); 

})();

Você criou uma fonte de dados que pode ser acessada por seu controle FlipView. Na próxima seção, você conectará os dados ao controle FlipView.

Conectando seus dados ao FlipView

  1. Na seção head do arquivo HTML que contém o seu FlipView, adicione uma referência ao arquivo de dados que você acabou de criar (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. Use os dados que você criou na última seção e defina a propriedade itemDataSource do controle FlipView.

    A propriedade itemDataSource usa um objeto IListDataSource. O objeto List não é uma IListDataSource, mas ele tem uma propriedade dataSource que retorna uma versão IListDataSource dele mesmo.

    Para conectar seus dados, defina a propriedade itemDataSource do controle FlipView como DataExample.itemDataList.dataSource:

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

Execute o aplicativo. O FlipView exibe as propriedades e valores na origem dos dados:

Exibindo o conteúdo da origem de dados sem um modelo.

Esta não é exatamente a aparência que queremos. Queremos mostrar apenas os valores do campo de título e as imagens reais, não o caminho para as imagens. Para obter a renderização que desejamos, precisamos definir um Template. A próxima etapa mostra isso para você.

Definindo um modelo de item

Neste ponto, o FlipView tem os dados que precisa, mas não sabe como exibi-los. Para isso, você precisa de um modelo de item. Há duas formas de criar um modelo: você pode usar a marcação para definir um WinJS.Binding.Template ou pode criar uma função de modelo. Este exemplo cria um modelo em marcação. (Para saber mais sobre como criar uma função de modelo, veja a propriedade itemTemplate.)

É fácil criar um WinJS.Binding.Template: defina a marcação que você deseja usar para exibir cada item da lista; em seguida, indique onde cada campo de dados é exibido.

  1. Em seu HTML, crie um controle WinJS.Binding.Template e atribua uma ID a ele. Este exemplo usa a ID "ItemTemplate".

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

</div>

    Observação  Você deve definir seu modelo antes de usá-lo. Assim, adicione o HTML de nosso modelo antes do HTML de seu FlipView.

     

  2. WinJS.Binding.Template precisa ter um único elemento de raiz. Crie um elemento div para servir como pai para o conteúdo do modelo.

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

    </div>
</div>

  3. Crie a marcação que o FlipView produzirá para cada item de dado que contiver. Os dados que você criou na seção anterior contêm um local de imagem, um título e algum texto. Assim, crie estes elementos:

    • Um elemento img para a exibição do campo de imagem.
    • Um elemento h2 para a exibição do campo de título.

    (Este exemplo também adiciona um elemento div extra por razões de formatação.)

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

  4. Defina o atributo data-win-bind em cada elemento que mostre os dados. O data-win-bind atributo usa a sintaxe:

    data-win-bind="propertyName: dataFieldName"

     

    Por exemplo, para associar a propriedade src de um img ao campo "imagem", use a sintaxe:

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

    Para definir várias propriedades, você as separa com um ponto e vírgula:

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

     

    Este exemplo associa os itens no modelo aos campos de dados correspondentes deles.

    
<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 um modelo de item, defina a propriedade itemTemplate do FlipView como a ID de seu modelo de item ("ItemTemplate" neste exemplo).

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

    Agora, quando você executa o aplicativo, os dados associados aparecem na lista.

    Um FlipView com associação de dados.

    Observe que existem alguns problemas de formatação: o texto do título não é exibido. A próxima seção mostra como corrigir o problema aplicando estilo ao modelo.

Itens de estilo

Você pode usar CSS para aplicar estilo ao seu modelo de item. O próximo exemplo adiciona algumas classes CSS ao modelo que você definiu na seção Definindo um modelo de item.

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

Na folha de estilos CSS de seu arquivo HTML, adicione estes estilos ao modelo:

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

Veja aqui como o controle FlipView agora se parece:

FlipView com estilo.Observação  

Se a família de fontes for alterada para os botões de navegação do FlipView, os botões não conterão mais o glifo correto.

 

Alterando a orientação do FlipView

Por padrão, o controle FlipView usa a orientação horizontal. Você pode exibir o FlipView verticalmente definindo sua propriedade orientation como "vertical".

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

FlipView com orientação vertical.

Adicionando elementos interativos a um modelo de item

O modelo de item pode conter a maioria dos outros controles, mas não pode conter um ListView ou outro FlipView.

Normalmente, quando o usuário interage com um elemento, FlipView captura essa interação e a usa para determinar se o usuário selecionou ou invocou um item ou se está se movimentando panoramicamente entre itens. Para que um elemento interativo, como um controle, receba uma entrada, você deve anexar a classe win-interactive a esse elemento ou a um de seus elementos pai. O elemento e seus filhos recebem a manipulação e deixam de disparar eventos para FlipView.

Quando você anexar win-interactive a um elemento em um modelo de item, verifique se esse elemento não está preenchendo o item inteiro. Caso contrário, o usuário não conseguirá selecionar ou invocar esse item.

Para adicionar elementos interativos ao seu modelo de item, você deve usar uma função de modelagem em vez de um WinJS.Binding.Template. Para ver um exemplo de como fazer isso, veja Amostra de controle FlipView em HTML. Para saber mais sobre funções de modelagem, veja os exemplos em FlipView.itemTemplate.

Criando um controle de contexto

O FlipView expõe métodos e eventos que permitem que você crie controles personalizados que dão ao usuário uma ideia de onde está o item atual e que permitem também criar mecanismos alternativos para navegar pela coleção. A imagem a seguir mostra um conjunto de botões de opção com estilo que são mantidos em sincronia com o FlipView através dos eventos pageselected e pagevisibilitychanged.

FlipView com um controle de contexto.

Para saber mais sobre o código que mostra como fazer isso, veja Amostra de controle FlipView HTML.

Tópicos relacionados

FlipView Reference

Amostra de controle HTML FlipView