Compartilhar via

Guia de início rápido: adicionando controles do repetidor

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

Saiba como usar o controle Repeater nos aplicativos da Windows Store usando JavaScript que exibe um conjunto distinto de dados como marcação HTML recorrente.

O controle Repeater, apesar de ser parecido com o controle ListView porque permite vincular dados ao HTML do aplicativo, tem várias diferenças. Ele é ideal para conjuntos de dados menores, estáticos e finitos, que pedem menos funcionalidade aos usuários. Quando conectado a um conjunto de dados dinâmico, o Repeater é mais adequado para pequenas mudanças não muito frequentes, que são controladas pelo desenvolvedor. Você ainda pode definir facilmente o estilo do controle Repeater com um pequeno conjunto de regras CSS (Folhas de Estilos em Cascata).

Pré-requisitos

Criar um novo projeto usando o modelo Aplicativo em Branco

  1. Inicie o Microsoft Visual Studio Express 2013 para Windows.

  2. Na guia Página Inicial, clique em Novo Projeto. A caixa de diálogo Novo Projeto é aberta.

  3. No painel Instalado, expanda Modelos e JavaScript, e clique no tipo de modelo Aplicativo da Windows Store. Os modelos de projeto disponíveis para JavaScript são exibidos no painel central da caixa de diálogo.

  4. No painel central, selecione o modelo de projeto Aplicativo em Branco.

  5. Na caixa de texto Nome, digite Demonstração do repetidor.

  6. Clique em OK para criar o projeto.

Adicionar a definição do repetidor ao projeto

O controle Repeater pode ser definido de modo declarativo em uma página HTML ou em tempo de execução usando JavaScript carregado com a página. Este exemplo cria o repetidor de modo declarativo na marcação HTML.

  1. Abra default.html e insira o HTML a seguir no elemento <body>. O hub deve ser um filho direto do elemento <body>.

    <div id="main-content">
    <h1>Great literature of Ancient Athens</h1>
    <div id="repeater" data-win-control="WinJS.UI.Repeater"
        data-win-options="{ data: Books.data }">
        <section>
            <h2 data-win-bind="textContent: bookTitle"></h2>
            <p><i data-win-bind="textContent: author"></i></p>
            <p data-win-bind="textContent: synopsis"></p>
        </section>
    </div>
</div>

  2. No default.html, dentro das marcas <head>, adicione as seguintes marcas <script> .

    <script src="/js/books.js"></script>

  3. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta js e escolha Adicionar > Novo Arquivo JavaScript. Na caixa de diálogo Adicionar Novo Item, nomeie o novo arquivo JavaScript como "books.js" e depois clique em Adicionar.

  4. Abra o arquivo books.js (js/books.js) e adicione o seguinte código JavaScript.

    (function () {
    "use strict";

    // Define a data set as an array of objects.
    var books = [
        {
            bookTitle: "Anabasis",
            author: "Xenophon",
            synopsis: "10,000 Greek mercenaries, lost in Persia, work together to make their way home."
        },
        {
            bookTitle: "History of the Peloponnesian War",
            author: "Thucydides",
            synopsis: "The mighty cities Sparta and Athens war for supremacy over the Hellenes."
        },
        {
            bookTitle: "Antigone",
            author: "Sophocles",
            synopsis: "A young woman defies the king of the city by giving her father a proper burial."
        }
    ];

    // Convert the array into a List object.
    var booksList = new WinJS.Binding.List(books);

    // Expose the list globally in the 'Books' namespace.
    WinJS.Namespace.define("Books",
        { data: booksList });

})();

  5. Pressione F5 para executar o exemplo.

    O aplicativo exibe três seções, cada uma com alguns dados da List expostos pela propriedade Books.data.

Neste exemplo, o fragmento HTML a ser repetido está no controle Repeater declarado na marcação HTML. (Você também pode usar um WinJS.Binding.Template para definir o fragmento HTML de repetição.) O controle Repeater no exemplo apresenta itens que fazem parte da lista Books.data, em que cada item do objeto List aparece em seu próprio fragmento HTML.

Resumo e próximas etapas

Neste Guia de início rápido, você adicionou um Repeater com três fragmentos HTML repetidos usando uma simples fonte de dados estática.

Para saber mais como adicionar ou remover dados de um controle Repeater dinamicamente, veja o Exemplo de controle HTML Repetidor.