Guia de início rápido: adicionando um SemanticZoom (HTML)

Artigo
03/04/2016

[ 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 SemanticZoom para aplicar zoom entre exibições do mesmo conteúdo.

Pré-requisitos

Nós consideramos que você já saiba criar um aplicativo da Windows Store básico em JavaScript que use controles da Biblioteca do Windows para JavaScript. Para aprender a usar os controles WinJS, veja Guia de início rápido: adicionando controles e estilos WinJS.
Para seguir este início rápido, você deve saber como usar o controle ListView. Para obter ajuda para iniciar com o controle ListView, veja Guia de início rápido: adicionando um ListView.
Para usar o controle SemanticZoom, você precisa saber como criar um ListView agrupado. Para obter mais informações, consulte Como agrupar itens em um ListView.

Qual é o controle SemanticZoom?

O controle SemanticZoom permite que o usuário alterne entre duas exibições do mesmo conteúdo. Uma dessas é a principal exibição do conteúdo. A segunda exibição é uma exibição do mesmo conteúdo representado de uma forma que permita que os usuários naveguem rapidamente por ele. Por exemplo, ao ver um catálogo de endereços, o usuário poderia ampliar uma letra para ver os nomes associados à letra.

Para fornecer este recurso de zoom, o controle SemanticZoom usa dois outros controles: um para fornecer a exibição ampliada e outro para fornecer a exibição reduzida.

<div data-win-control="WinJS.UI.SemanticZoom">   
                
    <!-- The control that provides the zoomed-in view goes here. -->

    <!-- The control that provides the zoomed-out view goes here. -->

</div>

Eles podem ser quaisquer dois controles que implementem a interface IZoomableView. O WinJS oferece um controle que implementa a interface de IZoomableView: o controle ListView. Os exemplos neste Guia de início rápido mostram como usar o SemanticZoom com dois controles ListView.

Não confunda zoom semântico com zoom óptico. Apesar deles compartilharem a mesma interação e o mesmo comportamento básico (exibindo mais ou menos detalhes baseados em um fator de zoom), o zoom óptico se refere ao ajuste da ampliação para uma área de conteúdo ou objeto como uma fotografia.

Crie os dados

Para usar um SemanticZoom, você precisa de um IListDataSource que contenha informações sobre o grupo. Uma maneira de criar um IListDataSource é criar um WinJS.Binding.List. Cada WinJS.Binding.List tem uma propriedade dataSource que retorna um IListDataSource que contém seus dados.

E um novo arquivo JavaScript para o seu projeto que contenha os seus dados. Dê o nome "data.js".

No arquivo data.js que você acabou de criar, crie uma fonte de dados subjacente que fornecerá seu controle ListView com os dados. Este exemplo cria um WinJS.Binding.List de uma matriz de objetos JSON (myData):


// Start of data.js
(function () {
    "use strict";



    var myData = [
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Orangy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Orangy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Absolutely Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Absolutely Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Triple Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Triple Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Green Mint", text: "Gelato", picture: "images/60Mint.png" }
    ];

    // Create a WinJS.Binding.List from the array. 
    var itemsList = new WinJS.Binding.List(myData);

Observação Esses dados são referentes a várias imagens. Para obter as imagens, baixe o exemplo de SemanticZoom e agrupamento ListView e copie as imagens do exemplo para seu projeto. Você também pode usar suas próprias imagens —mas não se esqueça de atualizar o valor da propriedade picture em seus dados.

Dica

Você não está limitado a usar um WinJS.Binding.List: também poderia usar um StorageDataSource ou um VirtualizedDataSource personalizado. Para saber mais sobre a criação de uma fonte de dados personalizada, veja Como criar uma fonte de dados personalizada.

Crie uma versão da fonte de dados que contém as informações de agrupamento. Se você estiver usando um WinJS.Binding.List, poderá chamar seu método createGrouped para criar uma versão agrupada do List. O método createGrouped aceita três parâmetros.
- getGroupKey: uma função que, dado um item na lista, retorna a chave de grupo à qual pertence o item.
- getGroupData: uma função que, dado um item na lista, retorna o objeto do dado que representa o grupo ao qual o item pertence.
- compareGroups: uma função que compara dois grupos e retorna um valor menor que zero quando o primeiro grupo é menor que o segundo grupo, igual a zero quando os grupos são iguais, e um valor positivo quando o primeiro grupo é maior que o segundo grupo.
Este exemplo usa o método List.createGrouped para criar uma versão agrupada do List. Ele usa a primeira letra do título de cada item para definir os grupos.
```
    // Sorts the groups.
    function compareGroups(leftKey, rightKey) {
        return leftKey.charCodeAt(0) - rightKey.charCodeAt(0);
    }

    // Returns the group key that an item belongs to.
    function getGroupKey(dataItem) {
        return dataItem.title.toUpperCase().charAt(0);
    }

    // Returns the title for a group.
    function getGroupData(dataItem) {
        return {
            title: dataItem.title.toUpperCase().charAt(0)
        };
    }

    // Create the groups for the ListView from the item data and the grouping functions
    var groupedItemsList = itemsList.createGrouped(getGroupKey, getGroupData, compareGroups);
```
Torne os dados acessíveis para outras partes do programa. Este exemplo usa WinJS.Namespace.define para tornar a lista agrupada acessível publicamente.
```
    WinJS.Namespace.define("myData",
        {
            groupedItemsList: groupedItemsList
        }); 


})(); // End of data.js
```

Criar dois controles ListView

Conforme mencionado anteriormente, o controle SemanticZoom requer dois controles adicionais que implementam a interface IZoomableView: um para fornecer a exibição em zoom e um para oferecer a exibição sem zoom.

Na seção head da página HTML que conterá o SemanticZoom, adicione uma referência ao arquivo de dados que você criou na etapa anterior.
```
    
    <script src="/js/data.js"></script>
```

Definir 3 métodos para seus objetos ListView: um para exibição de itens em zoom, um para cabeçalhos de grupo com exibição em zoom, e um dos cabeçalhos de grupo sem zoom.

<!-- Template for the group headers in the zoomed-in view. -->
<div id="headerTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="simpleHeaderItem">
        <h1 data-win-bind="innerText: title"></h1>
    </div>
</div>

<!-- Template for the ListView items in the zoomed-in view. -->
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="mediumListIconTextItem">
        <img class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
        <div class="mediumListIconTextItem-Detail">
            <h4 data-win-bind="innerText: title"></h4>
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>

<!-- Template for the zoomed out view of the semantic view. -->
<div id="semanticZoomTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="semanticZoomItem">
        <h1 class="semanticZoomItem-Text" data-win-bind="innerText: title"></h1>
    </div>
</div>

No arquivo HTML, defina dois controles ListView. O primeiro controlo oferece a exibição ampliada e o segundo oferece a exibição reduzida.

Defina o itemDataSource para aplicar zoom ListView para myData.groupedItemList.dataSource, o IListDataSource que contém os itens a exibir. Defina seu groupDataSource para myData.groupedItemsList.groups.dataSource, o IListDataSource que contém informações de grupo.
Para não aplicar zoom ListView, defina seu itemDataSource para myData.groupedItemList.groups.dataSource, o IListDataSource que contém informações de grupo. É onde o ListView obtém títulos de grupo para exibir.

Esse exemplo cria dois controles ListView e configure-os para usar os modelos que você acabou de criar.



    <!-- The zoomed-in view. -->    
    <div id="zoomedInListView"
        data-win-control="WinJS.UI.ListView" 
        data-win-options="{ itemDataSource: myData.groupedItemsList.dataSource, itemTemplate: select('#mediumListIconTextTemplate'), groupHeaderTemplate: select('#headerTemplate'), groupDataSource: myData.groupedItemsList.groups.dataSource, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none' }"
    ></div>

    <!--- The zoomed-out view. -->
    <div id="zoomedOutListView"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource: myData.groupedItemsList.groups.dataSource, itemTemplate: select('#semanticZoomTemplate'), selectionMode: 'none', tapBehavior: 'invoke', swipeBehavior: 'none' }"
    ></div>

Em seu arquivo CSS, defina os estilos para seus modelos e os controles ListView. Se você ignorar esta etapa, seu aplicativo executará, mas não ficará muito bonito.

/* Template for headers in the zoomed-in ListView */
.simpleHeaderItem
{
    width: 50px;
    height: 50px;
    padding: 8px;
}   

/* Template for items in the zoomed-in ListView */  
.mediumListIconTextItem
{
    width: 282px;
    height: 70px;
    padding: 5px;
    overflow: hidden;
    display: -ms-grid;
}

    .mediumListIconTextItem img.mediumListIconTextItem-Image 
    {
        width: 60px;
        height: 60px;
        margin: 5px;
        -ms-grid-column: 1;
    }

    .mediumListIconTextItem .mediumListIconTextItem-Detail
    {
        margin: 5px;
        -ms-grid-column: 2;
    }

/* Template for items in the zoomed-out ListView */
.semanticZoomItem
{
    width: 130px;
    height: 130px;
    background-color: rgba(38, 160, 218, 1.0);
}   

    .semanticZoomItem .semanticZoomItem-Text
    {
        padding: 10px;
        line-height: 150px;
        white-space: nowrap;
        color: white;
    }

/* CSS for the zoomed-in ListView */
#zoomedInListView
{
    width: 600px;
    height: 300px;
    border: solid 2px rgba(0, 0, 0, 0.13);
}

#semanticZoomDiv 
{
    width: 600px;
    height: 300px;
    border: solid 2px rgba(0, 0, 0, 0.13);
}

Execute o aplicativo. Você verá dois controles ListView:

O primeiro ListView oferece a exibição ampliada e o segundo oferece a exibição reduzida. Observe que os dois usam o layout horizontal. Recomendamos que as exibições ampliadas e reduzidas dos dados usem o mesmo layout.

Adicionar o controle SemanticZoom

Em sua marcação, crie o controle SemanticZoom e mova os seus controles ListView dentro dele.

<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom">   
            
    <!-- The zoomed-in view. -->    
    <div id="zoomedInListView"
        data-win-control="WinJS.UI.ListView" 
        data-win-options="{ itemDataSource: myData.groupedItemsList.dataSource, itemTemplate: select('#mediumListIconTextTemplate'), groupHeaderTemplate: select('#headerTemplate'), groupDataSource: myData.groupedItemsList.groups.dataSource, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none' }"
    ></div>

    <!--- The zoomed-out view. -->
    <div id="zoomedOutListView"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource: myData.groupedItemsList.groups.dataSource, itemTemplate: select('#semanticZoomTemplate'), selectionMode: 'none', tapBehavior: 'invoke', swipeBehavior: 'none' }"
    ></div>

</div>

Ao executar o aplicativo, você vê agora um único ListView, e pode aplicar zoom entre as duas exibições que definiu.

Exibições ampliada e reduzida de um controle SemanticZoom

Observação Não estabeleça uma borda nos controles filhos do controle SemanticZoom. Se você definir bordas nos controles SemanticZoom e seus filhos, a borda SemanticZoom e a borda do controle filho que está na exibição serão visíveis. Ao ampliar e reduzir, as bordas dos controles filhos são dimensionadas com o conteúdo e não terão uma boa aparência. Defina só uma borda no controle SemanticZoom.

Usando o SemanticZoom

Para aplicar zoom entre dois modos de exibição:

Mecanismo de entrada	Redução	Ampliação
Toque	Aperto para fora	Pinçagem, toque
Teclado	Ctrl + sinal de subtração, Enter	Ctrl + sinal de adição, Enter
Mouse	Ctrl + Girar a roda do mouse para trás	Ctrl + Girar a roda do mouse para frente

Usando SemanticZoom com um controle personalizado

Para usar o SemanticZoom com um controle diferente do ListView, você deve implementar a interface IZoomableView. Para obter um exemplo que mostre como fazer isso, veja SemanticZoom para um exemplo de controles personalizados.

Mantendo o SemanticZoom responsivo

É importante para o usuário poder alternar rápida e uniformemente entre as exibições ampliadas e reduzidas de um SemanticZoom. Isso significa que os controles filhos do controle SemanticZoom não devem fazer o aplicativo esperar enquanto carregam seus dados. Ao usar o ListView (ou uma versão do FlipView que você personalizou para implementar o IZoomableView) com o SemanticZoom, use uma função de modelo que cria espaços reservados quando há uma chance de que os itens possam não estar disponíveis no momento em que o controle entra na exibição. Para saber mais sobre como usar espaços reservados em modelos de itens, veja FlipView.itemTemplate. Se você estiver usando um controle personalizado com o SemanticZoom, implemente um ciclo de progresso e use os espaços reservados se os itens não estiverem disponíveis.