Como fazer com que AppBars funcionem com ListViews

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 ]

Este tópico de instruções explica a interação entre o ListView e a AppBar para dar suporte a esses cenários enquanto segue as práticas recomendadas para AppBar. Normalmente, o ListView permite que os usuários apliquem panorâmica em uma coleção de objetos horizontalmente e selecionem um ou mais desses objetos para realizar algumas ações. Essas ações costumam ser expostas na AppBar.

Pré-requisitos

Leia Diretrizes para AppBars e Diretrizes para controles ListView.

Instruções

Etapa 1: Manter as promessas da AppBar

Invocação: se uma AppBar estiver presente, os usuários deverão ser capazes de invocar ou ocultar essa barra usando os mecanismos padrão a qualquer momento.
Se não houver um comando a ser exposto até que um objeto seja selecionado, nenhuma AppBar será mostrada
Os comandos que estão presentes independentemente de seleção devem ficar na área de ação da AppBar, salvo raras exceções, no lado direito da AppBar

Etapa 2: Suportar seleção e seleção múltipla

Mostre a AppBar programaticamente mediante a seleção.
Mostre comandos específicos à seleção na seção contextual da AppBar (no lado esquerdo, salvo raras exceções).
Mostre os comandos adicionais se necessário quando mais de um objeto for selecionado (por exemplo, desmarcar seleção).
Oculte os comandos que sejam contextuais à seleção.

Aqui está o HTML para uma AppBar com comandos.

<!-- AppBar with contextual commands for a ListView -->
<!-- BEGINTEMPLATE: Template code for AppBar -->
<div id="scenarioAppBar" data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'primary',extraClass:'singleSelect',tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdSelectAll',label:'Select All',icon:'selectall',section:'primary',extraClass:'multiSelect',tooltip:'Select All'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdClearSelection',label:'Clear Selection',icon:'clearselection',section:'primary',extraClass:'multiSelect',tooltip:'Clear Selection'}"></button>
    <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator',section:'primary',extraClass:'multiSelect'}" />
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',section:'primary',extraClass:'multiSelect',tooltip:'Delete item'}"></button>
</div>
<!-- ENDTEMPLATE -->

Quando uma AppBar é iniciada, os comandos contextuais de seleção ficam ocultos.

function initAppBar() {
    var appBarDiv = document.getElementById("scenarioAppBar");
    var appBar    = document.getElementById("scenarioAppBar").winControl;
    // Add event listeners
    document.getElementById("cmdAdd").addEventListener("click", doClickAdd, false);
    document.getElementById("cmdDelete").addEventListener("click", doClickDelete, false);
    document.getElementById("cmdSelectAll").addEventListener("click", doClickSelectAll, false);
    document.getElementById("cmdClearSelection").addEventListener("click", doClickClearSelection, false);
    appBar.addEventListener("beforeopen", doAppBarShow, false);
    appBar.addEventListener("beforeclose", doAppBarHide, false);        
    // Hide selection group of commands
    appBar.hideCommands(appBarDiv.querySelectorAll('.multiSelect'));
    // Disable AppBar until in full screen mode
    appBar.disabled = true;
}

Essa função mostra a AppBar e comandos contextuais mediante seleção.

function doSelectItem() {
    var appBarDiv = document.getElementById("scenarioAppBar");
    var appBar =    document.getElementById('scenarioAppBar').winControl;
    var listView =  document.getElementById("scenarioListView").winControl;
    var count = listView.selection.count();
    if (count > 0) {
        // Show multi-select commands in AppBar
        appBar.showOnlyCommands(appBarDiv.querySelectorAll('.win-command'));
        appBar.open();
    } else {
        // Hide multi-select commands in AppBar
        appBar.close();
        appBar.showOnlyCommands(appBarDiv.querySelectorAll('.singleSelect'));
    }
}

Etapa 3: Ajustar a posição da barra de rolagem

Para dar suporte à rolagem enquanto a AppBar está visível, como no caso de seleção múltipla, a barra de rolagem precisa ser colocada acima da AppBar. Por causa da localização, os rótulos dos botões da AppBar devem ter uma linha a mais do que os rótulos somente em inglês. Ao colocar a barra de rolagem, leve em consideração essa linha extra. Sendo assim, uma AppBar com um único rótulo que tenha 88 px de altura em inglês deverá ter 108 px de altura para rótulos com duas linhas.

Crie seu ListView de forma que a barra de rolagem tenha um espaço livre de 108 px para a AppBar. Em seguida, ajuste a posição da barra de rolagem para que fique visível e na posição correta de acordo com a presença da AppBar.

/* This function slides the ListView scrollbar into view if occluded by the AppBar */
function doAppBarShow() {
    var listView = document.getElementById("scenarioListView");
    var appBar = document.getElementById("scenarioAppBar");
    var appBarHeight = appBar.offsetHeight;
    }
}

/* This function slides the ListView scrollbar back to its original position */
function doAppBarHide() {
    var listView = document.getElementById("scenarioListView");
    var appBar = document.getElementById("scenarioAppBar");
    var appBarHeight = appBar.offsetHeight;
    }
}

Etapa 4: Dê suporte a rolagem e zoom.

Para dar suporte a zoom e rolagem vertical, você deve colocar a AppBar e o ListView em divs pares e ter certeza de que o zoom se aplica apenas ao div ListView, e não à página inteira.

<!-- Full screen container for ListView -->
<div id="scenarioFullscreen">
    <button id="scenarioHideListView">Hide ListView</button>
    <header aria-label="Header content" role="banner">
        <button id="scenarioBackButton" class="win-backbutton" aria-label="Back"></button>
        <div class="titlearea win-type-ellipsis">
            <h1 class="titlecontainer" tabindex="0">
                <span class="pagetitle">Ice cream</span>
            </h1>
        </div>
    </header>
    <section role="container">
        <div id="scenarioListView"
            data-win-control="WinJS.UI.ListView"
            data-win-options="{ itemTemplate: smallListIconTextTemplate, selectionMode: 'multi', tapBehavior: 'toggleSelect', swipeBehavior: 'select', layout: { type: WinJS.UI.GridLayout, maxRows: 4 }}" >
        </div>
    </section>
</div>    
<!-- AppBar with contextual commands for a ListView -->
<!-- BEGINTEMPLATE: Template code for AppBar -->
<div id="scenarioAppBar" data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'primary',extraClass:'singleSelect',tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdSelectAll',label:'Select All',icon:'selectall',section:'primary',extraClass:'multiSelect',tooltip:'Select All'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdClearSelection',label:'Clear Selection',icon:'clearselection',section:'primary',extraClass:'multiSelect',tooltip:'Clear Selection'}"></button>
    <hr     data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator',section:'primary',extraClass:'multiSelect'}" />
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',section:'primary',extraClass:'multiSelect',tooltip:'Delete item'}"></button>
</div>
<!-- ENDTEMPLATE -->

Comentários

As interações entre o ListView e a AppBar podem beneficiar alguns aplicativos. Siga essas práticas recomendadas e você estará de acordo com a experiência do usuário ideal.

Share via