Como fazer com que as barras de aplicativos funcionem com ListViews

Applies to Windows and Windows Phone

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

Pré-requisitos

Instruções

Etapa 1: Manter as promessas da barra de aplicativos

  1. Invocação: se uma barra de aplicativos estiver presente, os usuários deverão ser capazes de invocar ou ocultar essa barra usando os mecanismos padrão a qualquer momento:
    • passar o dedo na borda
    • Win+Z
    • clicar com o botão direito
  2. Se não houver um comando a ser exposto até que um objeto seja selecionado, nenhuma barra de aplicativos será mostrada
  3. Salvo raras exceções, os comandos que estão presentes independentemente de seleção devem ficar na seção global, no lado direito da barra de aplicativos.

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

  1. Mostre a barra de aplicativos programaticamente mediante a seleção.
  2. Defina a barra de aplicativos para o modo fixo para dar suporte à seleção múltipla.
  3. Mostre comandos específicos à seleção na seção contextual da barra de aplicativos (no lado esquerdo, salvo raras exceções).
  4. Mostre os comandos adicionais se necessário quando mais de um objeto for selecionado (por exemplo, desmarcar seleção).
  5. Remova a propriedade fixa quando as seleções são desmarcadas.
  6. Oculte os comandos que sejam contextuais à seleção.

Aqui está o HTML para uma barra de aplicativos 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:'global',extraClass:'singleSelect',tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdSelectAll',label:'Select All',icon:'selectall',section:'selection',extraClass:'multiSelect',tooltip:'Select All'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdClearSelection',label:'Clear Selection',icon:'clearselection',section:'selection',extraClass:'multiSelect',tooltip:'Clear Selection'}"></button>
    <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator',section:'selection',extraClass:'multiSelect'}" />
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',section:'selection',extraClass:'multiSelect',tooltip:'Delete item'}"></button>
</div>
<!-- ENDTEMPLATE -->

Quando uma barra de aplicativos é inicializada, os comandos contextuais à 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("beforeshow", doAppBarShow, false);
    appBar.addEventListener("beforehide", 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 barra de aplicativos, define-a para o modo fixo e mostra os 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 selection commands in AppBar
        appBar.showCommands(appBarDiv.querySelectorAll('.multiSelect'));
        appBar.sticky = true;
        appBar.show();
    } else {
        // Hide selection commands in AppBar
        appBar.hide();
        appBar.hideCommands(appBarDiv.querySelectorAll('.multiSelect'));
        appBar.sticky = false;
    }
} 
 

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

Para dar suporte à rolagem enquanto a barra de aplicativos está visível, como no caso de seleção múltipla, a barra de rolagem precisa ser colocada acima da barra de aplicativos. Por causa da localização, os rótulos dos botões da barra de aplicativos devem ter uma linha a mais do que os rótulos somente em inglês. Ao colocar a barra de rolagem, leve em conta essa linha extra. Sendo assim, uma barra de aplicativos 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 barra de aplicativos. Depois, 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 barra de aplicativos.


/* This function slides the ListView scrollbar into view if occluded by the AppBar (in sticky mode) */
function doAppBarShow() {
    var listView = document.getElementById("scenarioListView");
    var appBar = document.getElementById("scenarioAppBar");
    var appBarHeight = appBar.offsetHeight;
    // Move the scrollbar into view if appbar is sticky
    if (appBar.winControl.sticky) {
        var listViewTargetHeight = "calc(100% - " + appBarHeight + "px)";
        var transition = {
            property: 'height',
            duration: 367,
            timing: "cubic-bezier(0.1, 0.9, 0.2, 0.1)",
            to: listViewTargetHeight
        };
        WinJS.UI.executeTransition(listView, transition);
    }
}

/* 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;
    // Move the scrollbar into view if appbar is sticky
    if (appBar.winControl.sticky) {
        var listViewTargetHeight = "100%";
        var transition = {
            property: 'height',
            duration: 367,
            timing: "cubic-bezier(0.1, 0.9, 0.2, 0.1)",
            to: listViewTargetHeight
        };
        WinJS.UI.executeTransition(listView, transition);
    }
} 

Etapa 4: Dê suporte a rolagem e zoom.

Para dar suporte a zoom e rolagem vertical, você deve colocar a barra de aplicativos e o LitView 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:'global',extraClass:'singleSelect',tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdSelectAll',label:'Select All',icon:'selectall',section:'selection',extraClass:'multiSelect',tooltip:'Select All'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdClearSelection',label:'Clear Selection',icon:'clearselection',section:'selection',extraClass:'multiSelect',tooltip:'Clear Selection'}"></button>
    <hr     data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator',section:'selection',extraClass:'multiSelect'}" />
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',section:'selection',extraClass:'multiSelect',tooltip:'Delete item'}"></button>
</div>
<!-- ENDTEMPLATE --> 

Comentários

As interações entre a exibição de lista e a barra de aplicativos devem ser uma maneira comum de projetar aplicativos. Siga essas práticas recomendadas e você estará de acordo com a experiência do usuário ideal.

 

 

Mostrar:
© 2015 Microsoft