Controles (HTML com JavaScript)

Adicione novos recursos ao seu aplicativo da Windows Store, como comandos personalizados e suporte à navegação avançados, com os novos controles HTML e JavaScript do Windows 8.1. Com as atualizações, os controles existentes ficam mais fáceis de usar e têm mais recursos, como suporte para arrastar e soltar. Esses novos controles e as atualizações dos controles tornam mais fácil que nunca criar um aplicativo com recursos completos.

Novos controles e atualizações de controles

O Windows 8.1 e a Biblioteca do Windows para JavaScript 2.0 apresentam estes novos controles e recursos:

O Windows 8.1 e a Biblioteca do Windows para JavaScript 2.0 incluem atualizações para estes controles existentes:

Usando a Biblioteca do Windows para JavaScript 2.0

Os novos projetos do Microsoft Visual Studio 2013 incluem automaticamente a Biblioteca do Windows para JavaScript 2.0. Para usar a Biblioteca do Windows para JavaScript 2.0 em um projeto criado com o Windows 8, substitua as referências existentes da Biblioteca do Windows para JavaScript 1.


    <!-- WinJS style sheets (include one) -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">

    <!-- WinJS code -->
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

... por referências para a biblioteca do Windows para JavaScript 2.0:


    <!-- WinJS style sheets (include one) -->
    <link rel="stylesheet" href="//Microsoft.WinJS.2.0/css/ui-dark.css" />
    <link rel="stylesheet" href="//Microsoft.WinJS.2.0/css/ui-light.css" />

    <!-- WinJS code -->
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

O Visual Studio 2013 pode atualizar seu projeto automaticamente ou você pode fazer estas atualizações adicionais manualmente:

  • Adicione uma referência para a Biblioteca do Windows 8.1 para JavaScript ao seu projeto.

  • No manifesto do aplicativo, atualize os valores OSMinVersion e OSMaxVersionTested para 6.3.0:

    
      <Prerequisites>
        <OSMinVersion>6.3.0</OSMinVersion>
        <OSMaxVersionTested>6.3.0</OSMaxVersionTested>
      </Prerequisites>
    
    

AppBarCommand

[Obtenha o exemplo de controle AppBar HTML agora.]

No Windows 8.1, você pode criar comandos personalizados da barra de aplicativos em aplicativos da Windows Store em JavaScript usando um novo tipo de AppBarCommand chamado conteúdo.

Esse recurso simplifica o processo de criação de uma barra de aplicativos com conteúdo personalizado, pois permite colocar conteúdo personalizado no layout de commands. Você pode aproveitar o suporte interno completo para comandos da barra de aplicativos com conteúdo personalizado, incluindo uso de teclado, alinhamento de comandos e animações para a exibição e ocultação dinâmica de comandos.

Quando colocado no layout de commands, o tipo de conteúdo AppBarCommand dá suporte a muitos dos mesmos recursos que os comandos da barra de aplicativos padrão.

  • Digitação (usando a tabulação, as setas e as teclas home e end) é habilitada entre comandos da barra de aplicativos padrão e o AppBarCommand personalizado.

  • A colocação em escala da barra de aplicativos funciona corretamente com o novo tipo de conteúdo de AppBarCommand. Os rótulos de texto para os comandos são ignorados de forma dinâmica enquanto o aplicativo é redimensionado para se tornar menor.

BackButton

O Windows 8.1 e a Biblioteca do Windows para JavaScript 2.0 adicionam mais suporte de navegação à plataforma como controles para seus aplicativos. Um desses controles é o BackButton.

O BackButton fornece uma maneira fácil de adicionar a navegação para trás a seu aplicativo. A criação de um controle BackButton é simples.


<button data-win-control="WinJS.UI.BackButton" ></button>

O novo controle BackButton

O BackButton confere automaticamente a pilha de navegação para ver se o usuário pode navegar para trás. Se não há para onde voltar, o botão é desativado. Quando o usuário clica no botão ou usa atalhos de teclado (como Alt+Seta para a esquerda ou as teclas BrowserBack), a função WinJS.Navigation.back é chamada automaticamente para navegar para trás. Você não precisa escrever nenhum código.

Hub

[Obtenha o exemplo de controle HTML Hub agora.]

Para ajudar a fornecer uma experiência de navegação mais consistente, o Windows 8.1 e a Biblioteca do Windows para JavaScript 2.0 adicionam o controle Hub.

Muitos aplicativos da Windows Store usam o padrão de navegação de hub, um sistema hierárquico de navegação. Esse padrão é melhor para aplicativos com grandes coleções de conteúdo ou muitas seções de conteúdo distintas para um usuário explorar.

A essência do design de hub é a separação do conteúdo em diferentes seções e níveis de detalhes. As páginas de hub são o ponto de entrada do usuário no aplicativo. Nelas, o conteúdo é mostrado em uma exibição panorâmica horizontal ou vertical em que os usuários têm uma prévia das novidades e do que está disponível. O hub tem diferentes categorias de conteúdo, mapeadas para as páginas das seções do aplicativo. Cada seção deve fervilhar com conteúdos ou funcionalidades. O hub precisa ser visualmente diversificado, envolver os usuários e atraí-los para partes diferentes do aplicativo.

Uma página de hub

 

Com o Windows 8.1, o controle Hub torna fácil criar uma página de hub. Para começar rapidamente, criando um aplicativo com uma página de Hub, use o modelo de Aplicativo Hub do Visual Studio 2013.

Criando um hub

Para criar um hub, você adiciona um controle Hub e um objeto HubSection para cada seção contida no cubo. Cada HubSection pode ter qualquer tipo de conteúdo, inclusive outros controles da Biblioteca do Windows para JavaScript. Você pode usar a propriedade header para especificar o cabeçalho da seção. Os cabeçalhos de seção podem ser estáticos ou interativos. Os cabeçalhos interativos mostram uma divisa que pode ser ocultada e geram eventos quando o usuário interage com eles.

Este exemplo define um Hub que tem três seções.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>hubPage</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>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/hub/hub.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/hub/hub.js"></script>
</head>
<body>
    <div class="hubpage fragment">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Hub example</span>
            </h1>
        </header>

        <section class="hub" aria-label="Main content" role="main" data-win-control="WinJS.UI.Hub">
            <!-- Customize the Hub control by modifying the HubSection controls here. -->


            <div class="section1" data-win-control="WinJS.UI.HubSection" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'Section1'} }">
                <img src="/images/gray.png" width="420" height="280" />
                <div class="subtext win-type-x-large secondary-text" data-win-res="{ textContent: 'Section1Subtext' }"></div>
                <div class="win-type-medium" data-win-res="{ textContent: 'DescriptionText' }"></div>
                <div class="win-type-small secondary-text">
                    <span data-win-res="{ textContent: 'Section1Description' }"></span>
                    <span data-win-res="{ textContent: 'Section1Description' }"></span>
                    <span data-win-res="{ textContent: 'Section1Description' }"></span>
                </div>
            </div>

            <div class="section2" data-win-control="WinJS.UI.HubSection" data-win-res="{ winControl: {'header': 'Section2'} }"
                data-win-options="{ onheaderinvoked: HubPage.section2HeaderNavigate }">
                <div class="itemTemplate" data-win-control="WinJS.Binding.Template">
                    <img src="#" data-win-bind="src: backgroundImage; alt: title" />
                    <div class="item-text">
                        <div class="win-type-medium" data-win-bind="textContent: title"></div>
                        <div class="win-type-xx-small secondary-text" data-win-bind="textContent: subtitle"></div>
                        <div class="win-type-small secondary-text" data-win-bind="textContent: description"></div>
                    </div>
                </div>
                <div class="itemslist" data-win-control="WinJS.UI.ListView" data-win-options="{
                        layout: {type: WinJS.UI.ListLayout2},
                        selectionMode: 'none',
                        itemTemplate: select('.section2 .itemTemplate'),  
                        itemDataSource: HubPage.section2DataSource,
                        oniteminvoked: HubPage.section2ItemNavigate
                    }">
                </div>
            </div>

            <div class="section3" data-win-control="WinJS.UI.HubSection" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'Section3'} }">
                <div class="top-image-row">
                    <img src="/images/gray.png" />
                </div>
                <div class="sub-image-row">
                    <img src="/images/gray.png" />
                    <img src="/images/gray.png" />
                    <img src="/images/gray.png" />
                </div>
                <div class="win-type-medium" data-win-res="{ textContent: 'DescriptionText' }"></div>
                <div class="win-type-small secondary-text">
                    <span data-win-res="{ textContent: 'Section3Description' }"></span>
                    <span data-win-res="{ textContent: 'Section3Description' }"></span>
                </div>
            </div>


        </section>
    </div>
</body>
</html>

Esse código cria esta página.

Uma página de hub

 

Quando você clica no segundo título, o aplicativo vai para uma página de seção:

Uma página de seção

 

Veja aqui o código que executa a navegação.


(function () {
    "use strict";

    var nav = WinJS.Navigation;
    var session = WinJS.Application.sessionState;
    var util = WinJS.Utilities;

    // Get the groups used by the data-bound sections of the hub.
    var section2Group = Data.resolveGroupReference("group1");
    var section5Group = Data.resolveGroupReference("group6");

    WinJS.UI.Pages.define("/pages/hub/hub.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            var hub = element.querySelector(".hub").winControl;
            hub.onloadingstatechanged = function (args) {
                if (args.srcElement === hub.element && args.detail.loadingState === "complete") {
                    this._hubReady(hub);
                    hub.onloadingstatechanged = null;
                }
            }.bind(this);

            hub.onheaderinvoked = function (args) {
                args.detail.section.onheaderinvoked(args);
            };

            // TODO: Initialize the page here.
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
            session.hubScroll = document.querySelector(".hub").winControl.scrollPosition;
        },

        updateLayout: function (element, viewState, lastViewState) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in viewState.
        },

        _hubReady: function (hub) {
            /// <param name="hub" type="WinJS.UI.Hub" />

            WinJS.Resources.processAll();
            if (typeof session.hubScroll === "number") {
                hub.scrollPosition = session.hubScroll;
            }

            // TODO: Initialize the hub sections here.
        },
    });

    function createHeaderNavigator(group) {
        return util.markSupportedForProcessing(function (args) {
            nav.navigate("/pages/section/section.html", { title: this.header, groupKey: group.key });
        });
    }

    function createItemNavigator(group) {
        var items = Data.getItemsFromGroup(group);
        return util.markSupportedForProcessing(function (args) {
            var item = Data.getItemReference(items.getAt(args.detail.itemIndex));
            nav.navigate("/pages/item/item.html", { item: item });
        });
    }

    function getItemsDataSourceFromGroup(group) {
        return Data.getItemsFromGroup(group).dataSource;
    }

    WinJS.Namespace.define("HubPage", {
        section2DataSource: getItemsDataSourceFromGroup(section2Group),
        section2HeaderNavigate: createHeaderNavigator(section2Group),
        section2ItemNavigate: createItemNavigator(section2Group),
        section5DataSource: getItemsDataSourceFromGroup(section5Group),
        section5ItemNavigate: createItemNavigator(section5Group)
    });
})();

Você pode até usar o controle Hub com o controle SemanticZoom. Para obter outros exemplos deste item e muito mais, consulte o exemplo de controle HTML Hub.

ItemContainer

[Obtenha o exemplo de ItemContainer HTML agora.]

Com o novo controle ItemContainer, é fácil criar elementos interativos que proporcionam funcionalidade para passar o dedo, arrastar e soltar e focalizar. Basta colocar seu conteúdo dentro do ItemContainer. O ItemContainer pode conter elementos HTML padrão e até mesmo outros controles da WinJS.

O ItemContainer é flexível, tornando-o ideal para muitas utilizações, como a criação de representações mais avançadas de grupos de caixas de seleção, botões de navegação e carrinhos de compras.

Objetos ItemContainer em uma barra de navegação

 

Use um ItemContainer quando você deseja exibir itens, mas não precisar de todos os recursos do controle ListView.

Usando o ItemContainer

Este exemplo cria dois objetos ItemContainer e define sua propriedade tapBehavior como toggleSelect, de forma que eles possam ser selecionados.


<div id="item1"
    data-win-control="WinJS.UI.ItemContainer"
    data-win-options="{tapBehavior: 'toggleSelect'}"
    style="width: 300px;">
    <div style="margin: 10px; padding: 10px; background-color: lightgray">
        <div class="win-type-x-large"
            style="margin-bottom: 5px;">
            Banana
        </div>
        <img src="/images/60banana.png">
        <div>Frozen yogurt</div>
    </div>
</div>
<div id="item2"
    data-win-control="WinJS.UI.ItemContainer"
    data-win-options="{tapBehavior: 'toggleSelect'}"
    style="width: 300px;">
    <div style="margin: 10px; padding: 10px; background-color: lightgray">
        <div class="win-type-x-large"
            style="margin-bottom: 5px;">
            Strawberry
        </div>
        <img src="/images/60Strawberry.png">
        <div>Ice cream</div>
    </div>
</div>

Dois objetos ItemContainer

 

Você também pode usar um ItemContainer com um controle Repeater para gerar itens de uma List; basta colocar o ItemContainer dento do controle Template.


<div id="itemTemplate" data-win-control="WinJS.Binding.Template">
    <div  
        data-win-control="WinJS.UI.ItemContainer" 
        data-win-options="{tapBehavior: WinJS.UI.TapBehavior.toggleSelect}"
        style="width: 300px;">
            <div 
                 style=" margin: 10px; padding: 10px; background-color: lightgray">
                <div class="win-type-x-large" 
                    style="margin-bottom: 5px;" 
                    data-win-bind="textContent: title"></div>
                <img src="#" data-win-bind="src: image">
		        <div data-win-bind="textContent: desc"></div>
            </div>
    </div>
</div>

<div data-win-control="WinJS.UI.Repeater" 
    data-win-options="{data: ItemContainerExample.flavorList, 
    template: select('#itemTemplate')}">
</div>

Este exemplo define a fonte de dados.


(function () {
    "use strict";

    var basicList = new WinJS.Binding.List(
        [
            { title: "Banana blast", desc: 'Frozen yogurt', image: '/images/60Banana.png'  },
            { title: "Strawberry swirl", desc: 'Ice cream', image: '/images/60Strawberry.png' },
            { title: "Magnificant mint", desc: 'Frozen yogurt', image: '/images/60Mint.png' },
            { title: "Lemon lift", desc: 'Frozen yogurt', image: '/images/60Lemon.png' }
        ]);

    WinJS.Namespace.define("ItemContainerExample",
        {
            flavorList: basicList

        });
})();

Objetos ItemContainer gerados por um Repeater

 

Por padrão, os itens podem ser selecionados. Para desabilitar a seleção, defina a propriedade selectionDisabled do controle ItemContainer como true:

NavBar

[Obtenha o exemplo de controle HTML NavBar agora.]

O Windows 8.1 e a Biblioteca do Windows para JavaScript 2.0 apresentam um novo controle para ajudar você a fornecer uma experiência de navegação consistente e previsível: o controle WinJS.UI.NavBar.

Uma NavBar com itens de navegação gerados a partir de uma fonte de dados

 

A NavBar é como uma AppBar que é dedicada a comandos de navegação. (Na verdade, a NavBar é uma subclasse da AppBar.) Ela pode conter uma lista simples de links e ter vários níveis de links organizados em categorias. Você pode preencher a NavBar com entradas embutidas em código, atualizá-la de forma programática ou usando vinculação de dados.

A NavBar aparece na parte superior da tela do aplicativo quando o usuário precisa dela. O usuário invoca a NavBar passando o dedo pela borda, pressionando a tecla do logotipo do Windows + Z ou clicando com o botão direito do mouse.

A NavBar também dá suporte a layouts verticais e itens de navegação dividida (itens de navegação que possuem opções de navegação secundária). A NavBar é altamente personalizável: você pode usar CSS (Folhas de Estilos em Cascata) para alterar o estilo praticamente de qualquer aspecto da NavBar e de seu conteúdo, e você também pode criar itens de navegação personalizados.

Criando uma NavBar

A NavBar tem três componentes:

  • A própria NavBar.

  • Um objeto NavBarContainer, que contém itens de navegação (objetos NavBarCommand) e dá suporte a movimentos de paginação, panorâmico e de rolagem. Você pode ter um ou mais objetos NavBarContainer em uma única NavBar. Use objetos NavBarContainer para definir grupos de opções de navegação.

  • Um ou mais objetos NavBarCommand. É neles que o usuário clica para navegar.

Para ativar a navegação, você pode definir a propriedade location do objeto NavBarCommand. Quando o usuário clica no comando, o evento WinJS.Navigation.navigated é acionado. Use esse evento para navegar para o local especificado.

Como opção, você pode registrar o evento oninvoked na NavBar e usar seu manipulador de eventos para executar a ação de navegação.

Este exemplo mostra uma NavBar simples que contém dois elementos de navegação.


<div id="NavBar" data-win-control="WinJS.UI.NavBar">
    <div id="GlobalNav" data-win-control="WinJS.UI.NavBarContainer">
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                label: 'Home',
                icon: WinJS.UI.AppBarIcon.home,
                location: '/html/home.html',
                splitButton: false
                }">
            </div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                label: 'Your apps',
                icon: WinJS.UI.AppBarIcon.favorite,
                location: '/html/yourapps.html',
                splitButton: false
                }">
            </div>
    </div>
</div>


E aqui está a aparência da NavBar.

A NavBar

 

Você pode criar um NavBarCommand que contém os objetos filho NavBarCommand. Para fazer isso, você define a propriedade splitButton do objeto pai NavBarCommand como true e usa o evento splittoggle para exibir um Flyout que contém os objetos filho NavBarCommand. Aqui está um exemplo de código da primeira parte desse item.


<div id="useSplit" data-win-control="WinJS.UI.NavBar">
    <div class="globalNav" data-win-control="WinJS.UI.NavBarContainer">
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Home', icon: 'url(../images/homeIcon.png)' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Favorite', icon: WinJS.UI.AppBarIcon.favorite, splitButton: 'true' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Your account', icon: WinJS.UI.AppBarIcon.people }">
        </div>
    </div>
</div>
<div id="contactFlyout" data-win-control="WinJS.UI.Flyout" 
    data-win-options="{ placement: 'bottom' }">
    <div id="contactNavBarContainer" data-win-control="WinJS.UI.NavBarContainer"}">
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Family' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Work' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Friends' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Blocked' }">
        </div>  
    </div>
</div>

O próximo exemplo mostra o código que inicializa a página HTML e adiciona o manipulador de eventos splittoggle, que exibe o Flyout que contém os objetos filho NavBarCommand.


(function () {
    "use strict";
    var navcontainer;

    var page = WinJS.UI.Pages.define("/html/6-UseSplitButton.html", {
        ready: function (element, options) {
            document.body.querySelector('#useSplit').addEventListener('invoked', this.navbarInvoked.bind(this));
            document.body.querySelector('#contactNavBarContainer').addEventListener('invoked', this.navbarInvoked.bind(this));

            var navBarContainerEl = document.body.querySelector('#useSplit .globalNav');
            if (navBarContainerEl) {
                this.setupNavBarContainer();
            } else {
                var navBarEl = document.getElementById('useSplit');
                navBarEl.addEventListener('childrenprocessed', this.setupNavBarContainer.bind(this));
            }
        },

        navbarInvoked: function (ev) {
            var navbarCommand = ev.detail.navbarCommand;
            WinJS.log && WinJS.log(navbarCommand.label + " NavBarCommand invoked", "sample", "status");
            document.querySelector('select').focus();
        },

        setupNavBarContainer: function () {
            var navBarContainerEl = document.body.querySelector('#useSplit .globalNav');

            navBarContainerEl.addEventListener("splittoggle", function (e) {
                var flyout = document.getElementById("contactFlyout").winControl;
                var navbarCommand = e.detail.navbarCommand;
                if (e.detail.opened) {
                    flyout.show(navbarCommand.element);
                    var subNavBarContainer = flyout.element.querySelector('.win-navbarcontainer');
                    if (subNavBarContainer) {
                        // Switching the navbarcontainer from display none to display block requires 
                        // forceLayout in case there was a pending measure.
                        subNavBarContainer.winControl.forceLayout();
                        // Reset back to the first item.
                        subNavBarContainer.currentIndex = 0;
                    }
                    flyout.addEventListener('beforehide', go);
                } else {
                    flyout.removeEventListener('beforehide', go);
                    flyout.hide();
                }
                function go() {
                    flyout.removeEventListener('beforehide', go);
                    navbarCommand.splitOpened = false;
                }
            });
        }
    });
})();

(Veja o código completo em Exemplo de NavBar HTML.)

Veja como o NavBar fica com botão de divisão aberto:

Um NavBarCommand dividido

 

Você pode associar um NavBarContainer a uma fonte de dados. Para fazer isso, crie uma List contendo dados que descrevam os comandos de navegação e use-a para definir a propriedade data do objeto NavBarContainer. Este exemplo define os dados para serem usados pelo NavBarContainer.



(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/2-UseData.html", {
        init: function (element, options) {
            var categoryNames = ["Picks for you", "Popular", "New Releases", "Top Paid", "Top Free",
            "Games", "Social", "Entertainment", "Photo", "Music & Video",
            "Sports", "Books & Reference", "News & Weather", "Health & Fitness", "Food & Dining",
            "Lifestyle", "Shopping", "Travel", "Finance", "Productivity",
            "Tools", "Secuirty", "Business", "Education", "Government"];

            var categoryItems = [];
            for (var i = 0; i < categoryNames.length; i++) {
                categoryItems[i] = {
                    label: categoryNames[i]
                };
            }

            Data.categoryList = new WinJS.Binding.List(categoryItems);
        },

        ready: function (element, options) {
            document.body.querySelector('#useTemplate').addEventListener('invoked', this.navbarInvoked.bind(this));
        },

        navbarInvoked: function (ev) {
            var navbarCommand = ev.detail.navbarCommand;
            WinJS.log && WinJS.log(navbarCommand.label + " NavBarCommand invoked", "sample", "status");
            document.querySelector('select').focus();
        }
    });
})();



O próximo exemplo mostra o HTML que cria os objetos NavBar e NavBarContainer.



<div id="useTemplate" data-win-control="WinJS.UI.NavBar">
    <div class="globalNav" data-win-control="WinJS.UI.NavBarContainer">
        <div data-win-control="WinJS.UI.NavBarCommand" 
             data-win-options="{ label: 'Home', icon: 'url(../images/homeIcon.png)' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
             data-win-options="{ label: 'Favorite', icon: 'favorite' }"></div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
             data-win-options="{ label: 'Your account', icon: 'people' }"></div>
    </div>
    <div class="categoryNav" 
        data-win-control="WinJS.UI.NavBarContainer" 
        data-win-options="{ data: Data.categoryList, maxRows: 3 }">
    </div>
</div>



(Veja o código completo em Exemplo de NavBar HTML.)

Quando você executa o código, ele cria esta NavBar.

Uma NavBar com itens de navegação gerados a partir de uma fonte de dados

 

Embora isso não seja mostrado aqui, você também pode usar um objeto WinJS.Binding.Template com uma fonte de dados para gerar itens da barra de navegação.

Repeater

[Obtenha o exemplo de controle HTML Repeater agora.]

O Repeater é um controle simples e fácil de usar da WinJS, que usa um modelo para gerar a marcação HTML a partir de um conjunto de dados. O modelo pode ter praticamente qualquer marcação HTML e controles da WinJS. Você pode até mesmo aninhar controles Repeater dentro de controles Repeater.

Use o Repeater para gerar listas e tabelas personalizadas. Aqui está um exemplo de previsão do tempo criado por um Repeater.

controle repeater

 

O Repeater não é um substituto para o controle ListView. É mais flexível, mas não fornece alguns dos recursos avançados de ListView, como o controle sobre a maneira como os itens de dados são carregados.

Usando o Repeater

Um Repeater gera seus dados a partir de uma List. Este exemplo cria uma List com alguns itens simples.


(function () {
    "use strict";

    var basicList2 = new WinJS.Binding.List(
        [
            { title: "Item 1" },
            { title: "Item 2" },
            { title: "Item 3" },
            { title: "Item 4" }
        ]);

    WinJS.Namespace.define("RepeaterExample",
        {
            basicList: basicList2

        });
})();

Para especificar a marcação que o Repeater gera, você define um template. Você pode criar um modelo na marcação ou usar uma função de modelagem. Este exemplo cria um modelo em marcação. Ele vincula dados do campo de título da fonte de dados ao conteúdo de texto de um elemento li.


<div id="listTemplate" data-win-control="WinJS.Binding.Template">
    <li data-win-bind="textContent: title"></li>
</div>

O próximo exemplo cria o Repeater propriamente dito.


<ul data-win-control="WinJS.UI.Repeater" 
    data-win-options="{data: RepeaterExample.basicList, 
    template: select('#listTemplate')}">
</ul>

Quando você executa o aplicativo, o Repeater gera um elemento li para cada item da lista de dados.

Uma lista gerada pelo controle Repeater

 

WebView com SmartScreen

[Obtenha o exemplo de controle HTML WebView agora.]

No Windows 8, você podia usar o elemento iframe para hospedar conteúdo baseado na Web, mas essa opção não oferecia muita funcionalidade de navegação ou isolamento de conteúdo. O Windows 8.1 introduz o novo controle WebView, que facilita bastante a hospedagem de conteúdo baseado na Web em seus aplicativos.

Veja aqui algumas das melhorias que WebView oferece em relação ao iframe para mostrar conteúdo baseado na Web:

  • Suporte para HTML5

    Páginas hospedadas em um WebView podem acessar a maior parte da funcionalidade de HTML5. (Entretanto, o WebView não pode acessar IndexedDB, o cache de aplicativo HTML5, a API de Geolocalização nem Clipboard API.)

  • Melhor suporte à navegação

    A WebView tem sua própria pilha de histórico separada e fornece vários métodos para navegar para frente e para trás e para recarregar a página atual.

  • Suporte para sites que não trabalham dentro de quadros

    A WebView pode mostrar sites que não trabalham dentro de elementos frame ou iframe.

Usando WebView para carregar conteúdo

Para criar um controle WebView, crie um elemento x-ms-webview.


<x-ms-webview id="webview">
</x-ms-webview>


Existem várias maneiras de usar o controle WebView para carregar conteúdo:

  • Use a propriedade src do controle WebView, o método navigate ou o método navigateWithHttpRequestMessage para navegar para um URI. Este exemplo usa a propriedade src para navegar para um URI.

    
    <x-ms-webview id="webview" src="http://go.microsoft.com/fwlink/?LinkId=294155" 
        style="width: 400px; height: 400px;">
    </x-ms-webview>
    
    
    
  • Use o método navigateToString para carregar uma cadeia de caracteres arbitrária de HTML.

    
    var htmlString = "<!DOCTYPE html>" +
            "<html>" +
            "<head><title>Simple HTML page</title></head>" +
            "<body>" +
                "<h1>Hi!</h1>" +
                "<p>This is a simple HTML page.</p>" +
            "</body>" +
            "</html>";
    document.getElementById("webview").navigateToString(
        htmlString);
    
    
  • Você pode usar o método navigate com o protocolo ms-appdata:// para carregar o conteúdo HTML armazenado nas pastas de estado do aplicativo.

    
     document.getElementById("webview").navigate(
        "ms-appdata:///local/NavigateToState/simple_example.html");
    
    
  • Para formatos de arquivo baseados em HTML, às vezes pode ser útil transmitir referências relativas conforme elas são necessárias. Por exemplo, para conteúdo HTML criptografado que não pode ser renderizado nativamente pelo controle WebView. Use os métodos buildLocalStreamUri e navigateToLocalStreamUri para exibir o conteúdo de um fluxo. (Você também deve implementar um objeto de Tempo de Execução do Windows personalizado que use a interface de IUriToStreamResolver.)

    
    var contentUri = document.getElementById("webview").buildLocalStreamUri(
        "NavigateToStream", "simple_example.html");
    var uriResolver = new SDK.WebViewSampleCS.StreamUriResolver();
    document.getElementById("webview").navigateToLocalStreamUri(contentUri, uriResolver);
    
    

(Veja exemplos completos em Exemplo de WebView HTML.)

Suporte a arrastar e soltar para ListView

[Obtenha o exemplo de reordenação e arrastar e soltar de ListView HTML agora.]

Com a Biblioteca do Windows para JavaScript 2.0, o controle ListView adiciona suporte para operações de arrastar e soltar. Esse novo suporte é compatível com a funcionalidade de arrastar e soltar do HTML 5. Você pode arrastar entre dois controles ListView, entre um ItemContainer e uma ListView e entre qualquer elemento HTML e a ListView. Você pode permitir que o usuário solte os itens em um local específico na ListView ou pode controlar onde os itens soltos são inseridos, por exemplo, reordenando itens na ListView depois que um novo item é adicionado.

Arrastando um item da ListView

Para arrastar um item de ListView para um destino de soltura HTML 5, você deve fazer o seguinte:

  1. Defina a propriedade itemsDraggable do ListView como true.

  2. Manipule o evento itemdragstart do controle ListView. No manipulador de eventos, obtenha um objeto dataTransfer da propriedade detail do objeto de evento. Use o método setData do objeto dataTransfer para especificar como os dados devem ser transferidos e quais dados devem ser transferidos.

  3. Manipule o evento dragover do destino de soltura. No seu manipulador de eventos, use o método preventDefault do objeto event para dizer ao sistema que você aceita a operação de soltar. Caso contrário, a operação de arrastar não será aceita pelo destino de soltura.

  4. Manipule o evento drop do destino de soltura. No manipulador de eventos, obtenha um objeto dataTransfer da propriedade detail do objeto de evento. Use a propriedade getData do objeto dataTransfer para recuperar os dados que estão sendo transferidos. Use esses dados para atualizar o destino de soltura. Cuidado para não aceitar ações de arrastar de elementos que podem ser arrastados intrinsecamente em seu aplicativo, como o texto selecionado e elementos img.

Veja aqui um conjunto de exemplos que mostram como habilitar a operação de arrastar e soltar um item usando o controle ListView. O primeiro exemplo define a marcação HTML.


<div id="myDropTarget" class="DnDItem">
    <div id="myTargetContents">
        <p>
            HTML 5 Drop Target
        </p>
        <br />
        <div id="myPlusSign" class="drop-ready">+ </div>
        <br />
        <p>
            Drop Items Here
        </p>
    </div>
</div>

<!-- Simple template for the ListView instantiation  -->
<div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="smallListIconTextItem">
        <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" draggable="false" />
        <div class="smallListIconTextItem-Detail">
            <h4 data-win-bind="innerText: title"></h4>
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>

<!-- The declarative markup necessary for ListView instantiation -->
<!-- Call WinJS.UI.processAll() in your initialization code -->
<div id="listView"
    class="win-selectionstylefilled"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ 
        itemDataSource: myData.dataSource,
        selectionMode: 'none', 
        itemTemplate: smallListIconTextTemplate,
        itemsDraggable: true,
        layout: { type: WinJS.UI.GridLayout } 
    }">
</div>

Este é o CSS da operação de arrastar e soltar.


.drop-ready #myPlusSign
{
    opacity: 1;
}

#myPlusSign
{
     font-size:100px;
     font-weight:bolder;
     color: blue;
     opacity: 0;
}

O próximo exemplo mostra o código que habilita a funcionalidade de arrastar e soltar.


(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/scenario2.html", {
        ready: function (element, options) {

            listView.addEventListener("itemdragstart", function (eventObject) {
                eventObject.detail.dataTransfer.setData("Text", JSON.stringify(eventObject.detail.dragInfo.getIndices()));
            });

            var dropTarget = element.querySelector("#myDropTarget");
            dropTarget.addEventListener("dragover", function (eventObject) {
                // Allow HTML5 drops.
                eventObject.preventDefault();
            });

            dropTarget.addEventListener("dragenter", function (eventObject) {
                WinJS.Utilities.addClass(dropTarget, "drop-ready");
            });

            dropTarget.addEventListener("dragleave", function (eventObject) {
                WinJS.Utilities.removeClass(dropTarget, "drop-ready");
            });

            dropTarget.addEventListener("drop", function (eventObject) {
                // Get indicies -> keys of items that were trashed, and remove from datasource.
                WinJS.Utilities.removeClass(dropTarget, "drop-ready");
                var indexSelected = JSON.parse(eventObject.dataTransfer.getData("Text"));
                var listview = document.querySelector("#listView").winControl;
                var ds = listview.itemDataSource;

                ds.itemFromIndex(indexSelected[0]).then(function (item) {
                    WinJS.log && WinJS.log("You dropped the item at index " + item.index + ", "
                    + item.data.title, "sample", "status");
                });
            });

        }
    });

})();


Veja o código completo em Exemplo de arrastar e soltar e reordenação de ListView HTML.

Arrastando um item para a ListView

Para soltar um elemento em um local específico da ListView:

  1. Defina a propriedade draggable do elemento HTML (a origem da operação de arrastar) como true.

  2. Manipule o evento dragstart do destino de soltura. No manipulador de eventos, obtenha um objeto dataTransfer do objeto do evento. Use o método setData do objeto dataTransfer para especificar como os dados devem ser transferidos e quais dados devem ser transferidos.

  3. Manipule o evento itemdragenter do controle ListView. No manipulador de eventos, use o método preventDefault do objeto event para dizer ao sistema que você aceita a operação de soltar. Caso contrário, a operação de arrastar pode ter resultados imprevisíveis.

  4. Manipule o evento itemdragdrop do controle ListView. No manipulador de eventos, obtenha um objeto dataTransfer da propriedade detail do objeto de evento. Use a propriedade getData do objeto dataTransfer para recuperar os dados que estão sendo transferidos. Use esses dados para atualizar a ListView.

Veja aqui um conjunto de exemplos que mostram como ativar a operação de arrastar um item para a ListView. O primeiro exemplo define a marcação HTML.


<div id="myDragSource" class="DnDItem">
    <div id="mySourceContents">
        <p>
            HTML 5 Drag Source
        </p>
        <br />
        <br />
        <br />
        <div id="myDragContent" class="smallListIconTextItem" draggable="true">
            <img id="myImg" src="/images/60Tree.png" class="smallListIconTextItem-Image" draggable="false" />
            <div class="smallListIconTextItem-Detail">
                <h4 id="myItemTitle">Drag Me</h4>
            </div>
        </div>
    </div>
</div>

<!-- Simple template for the ListView instantiation  -->
<div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="smallListIconTextItem">
        <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" draggable="false" />
        <div class="smallListIconTextItem-Detail">
            <h4 data-win-bind="innerText: title"></h4>
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>

<!-- The declarative markup necessary for ListView instantiation -->
<!-- Call WinJS.UI.processAll() in your initialization code -->
<div id="listView"
    class="win-selectionstylefilled"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ 
        itemDataSource: myData.dataSource,
        selectionMode: 'none',
        itemTemplate: smallListIconTextTemplate,
        itemsReorderable: true,
        layout: { type: WinJS.UI.GridLayout } 
    }">
</div>

O próximo exemplo mostra o código que habilita a funcionalidade de arrastar e soltar.


(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/scenario3.html", {
        ready: function (element, options) {

            myDragContent.addEventListener("dragstart", function (eventObject) {
                var dragData = { sourceElement: myDragContent.id, data: myItemTitle.innerText, imgSrc: myImg.src };
                eventObject.dataTransfer.setData("Text", JSON.stringify(dragData));
            });

            listView.addEventListener("itemdragenter", function (eventObject) {
                if (eventObject.detail.dataTransfer.types.contains("Text")) {
                    eventObject.preventDefault();
                }
            });

            listView.addEventListener("itemdragdrop", function (eventObject) {
                var dragData = JSON.parse(eventObject.detail.dataTransfer.getData("Text"));
                if (dragData && dragData.sourceElement === myDragContent.id) {
                    var newItemData = { title: dragData.data, text: ("id: " + dragData.sourceElement), 
                                        picture: dragData.imgSrc };
                    // insertAfterIndex tells us where in the list to add the new item.
                    // If we're inserting at the start, insertAfterIndex is -1. 
                    // Adding 1 to insertAfterIndex gives us the nominal index in the array to insert the new item.
                    myData.splice(eventObject.detail.insertAfterIndex + 1, 0, newItemData);
                } else {
                    // Throw error that illegal content was dropped.
                }
            });
        }
    });
})();


Veja o código completo em Exemplo de arrastar e soltar e reordenação de ListView HTML.

Reordenar itens em ListView

A capacidade de reordenar o conteúdo faz os usuários se sentirem no controle. Com a nova propriedade itemsReorderable, os usuários podem alterar mais facilmente a ordem dos itens em uma ListView. Basta definir itemsReorderable como true para permitir que usuários arrastem itens dentro da ListView; nenhum código adicional é necessário.

Observação  Para habilitar totalmente o reordenamento de itens em uma ListView agrupada, você também deve responder ao evento itemdragdrop e inserir o item corretamente no local correto.

Observação  Para que a reordenação funcione, sua fonte de dados deve ser compatível.

Este exemplo cria uma ListView compatível com a reordenação de itens.


<style type="text/css">
    .win-listview {
        margin: 20px;
        border: 2px solid gray;
        Width: 500px; 
    }

    .standardItem {
        width: 150px;
        height: 150px;
        background-color: #0aaddd;
        padding: 5px; 
    }

</style>

<div id="template" data-win-control="WinJS.Binding.Template">
    <div class="standardItem" data-win-bind="textContent: title" ></div>
</div>
<div
    id="reorderableListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{
    itemDataSource: ListViewExamples.dataList.dataSource, 
    itemTemplate: select('#template'), 
    layout: {type: WinJS.UI.GridLayout},
    itemsReorderable: true 
    }">
</div>

O próximo exemplo define a fonte de dados que a ListView usa.


(function () {
    "use strict";

    var dataList =
        new WinJS.Binding.List(
             [{ title: "Item 1" },
              { title: "Item 2" },
              { title: "Item 3" },
              { title: "Item 4" }]);

    WinJS.Namespace.define("ListViewExamples",
        {
            dataList: dataList
        })

})();


Quando o código é executado, o usuário pode reordenar os itens da ListView arrastando-os.

Reordenação de ListView

Novo layout de ListView: CellSpanningLayout

Com a Biblioteca do Windows para JavaScript 1.0, para que uma ListView tivesse itens de vários tamanhos, você usava um GridLayout. Para a Biblioteca do Windows para JavaScript 2.0, adicionamos um novo layout especificamente para a criação de grades com vários tamanhos: o CellSpanningLayout.

Este exemplo define a fonte de dados e os métodos itemInfo e groupInfo para uma ListView que usa um CellSpanningLayout. Cada item da ListView tem 250 pixels por 250 pixels, exceto o primeiro, que tem a altura de 510 pixels.


(function () {
    "use strict";

    var unorderedList =
        new WinJS.Binding.List(
             [{ title: "Item 1", cssClass: "tallItem" },
              { title: "Item 2", cssClass: "standardItem" },
              { title: "Item 3", cssClass: "standardItem" },
              { title: "Item 4", cssClass: "standardItem" }]);

    function myItemInfo(itemIndex) {
        var size = { width: 250, height: 250 };
        if (itemIndex === 0) {
            size.height = 510;
        }

        return size;
    };

    function myGroupInfo(groupInfo) {
        return {
            enableCellSpanning: true,
            cellWidth: 250,
            cellHeight: 250
        };
    };

    WinJS.Utilities.markSupportedForProcessing(myItemInfo);
    WinJS.Utilities.markSupportedForProcessing(myGroupInfo);

    WinJS.Namespace.define("ListViewExamples",
        {
            unorderedList: unorderedList,
            myItemInfo: myItemInfo,
            myGroupInfo: myGroupInfo
        })


})();


O próximo exemplo mostra o HTML para criar a ListView e o WinJS.Binding.Template.


<style type="text/css">
    .win-listview {
        margin: 5px;
        border: 2px solid gray; 
    }

    .standardItem {
        width: 250px;
        height: 250px;
        background-color: #999999;
        padding: 5px; 
    }

    .tallItem {
        width: 250px;
        height: 510px;
        background-color: #0aaddd;
        padding: 5px; 
    }
</style>

<div id="template" data-win-control="WinJS.Binding.Template">
    <div data-win-bind="className: cssClass; textContent: title" ></div>
</div>

<div
    id="cellSpanningListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{
    itemDataSource: ListViewExamples.unorderedList.dataSource, 
    itemTemplate: select('#template'), 
    layout: {type: WinJS.UI.CellSpanningLayout, 
    itemInfo: ListViewExamples.myItemInfo, 
    groupInfo: ListViewExamples.myGroupInfo}
    }">
</div>


Veja aqui como é a aparência da ListView.

Uma ListView que usa CellSpanningLayout

Outras atualizações de ListView

O Windows 8.1 inclui ainda mais melhorias para o controle ListView.

Melhor acessibilidade para cabeçalhos

Os cabeçalhos em uma ListView agrupada agora são compatíveis com a navegação por teclado e a interação por teclado e mouse. Você não precisa mudar nada no código para obter esses novos recursos.

(Para saber mais sobre a criação de grupos, veja Como agrupar itens em uma ListView.)

Observação  Se você definiu seu cabeçalho para poder ser invocado na Biblioteca do Windows para JavaScript 1.0 com a inclusão de um link ou um botão nele, os usuários não podem invocar o cabeçalho com o teclado quando você muda para a Biblioteca do Windows para JavaScript 2.0. Para corrigir esse problema, manipule o evento ongroupheaderinvoked e use-o para executar a ação de cabeçalho em vez de usar um botão ou link.

Atualizações da interface de layout

A ListView gora tem um novo conjunto de interfaces de layout que facilitam a criação de seu próprio layout personalizado: ILayout2 e ISiteLayout2. Quando você implementa essas interfaces, pode usar layouts CSS padrão como parte da implementação.

Atualizações de ListLayout e GridLayout

Atualizamos o ListLayout e o GridLayout para melhorar seu desempenho global, principalmente seu desempenho de movimento panorâmico. Você não precisa mudar nada no código para aproveitar esses melhoramentos.

Outras atualizações da WinJS

Atualizações de vinculação e WinJS.Binding.Template

A Biblioteca do Windows para JavaScript 2.0 usa um sistema novo e mais eficiente para o processamento de objetos de Template, o que melhora significativamente o desempenho. Com o novo sistema, a vinculação de dados e a instanciação de controles ocorrem em um processo paralelo mais fluido e não em série, como na Biblioteca do Windows para JavaScript 1.0. Se o seu código depende do comportamento de processamento serial herdado, recomendamos alterar o código para tirar proveito do processamento de modelo mais rápido. No entanto, você poderá usar a propriedade disableOptimizedProcessing para restaurar o comportamento antigo, se não puder alterar o código.

A API de descarte

O modelo de descarte é um novo padrão para os elementos e controles liberarem recursos no fim de seu tempo de vida, para evitar vazamentos de memória. Um elemento ou controle pode implementá-lo como opção. Agora, os controles da Biblioteca do Windows para JavaScript 2.0 que têm recursos para liberar implementam essa API.

Para aproveitar o modelo de descarte, chame o método de dispose do controle quando ele não for mais necessário. Por exemplo, quando você sai de uma página ou quando o aplicativo é desligado.

 

 

Mostrar:
© 2014 Microsoft