Cómo hacer que las AppBar funcionen con ListView

Artículo
03/04/2016

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

En este procedimiento se explica la interacción entre el ListView y la AppBar para dar soporte a estos escenarios mientras se siguen los procedimientos recomendados para la AppBar. Normalmente, ListView permite que el usuario mueva horizontalmente una colección de objetos y seleccionar uno o más de estos objetos para realizar algunas acciones. Estas acciones se suelen exponer en la AppBar.

Requisitos previos

Lee Directrices para las AppBar y Directrices para los controles de ListView.

Instrucciones

Paso 1: Mantener los compromisos de la AppBar

Invocación: si una AppBar está presente, los usuarios deberían poder invocarla u ocultarla en cualquier momento mediante los mecanismos estándar.
Si no hay un comando para exponer hasta que se seleccione un objeto, no se mostrará ninguna AppBar
Los comandos que estén presentes independientemente de la selección, deberían estar en el área de acción de la AppBar, con muy pocas excepciones en el lado derecho de la AppBar

Paso 2: Compatibilidad con selección y selección múltiple

Muestra la AppBar mediante programación al realizar una selección.
Muestra comandos específicos para seleccionar en la sección contextual de la AppBar (en el lado izquierdo, excepto en muy pocas excepciones).
Muestra comandos adicionales si es necesario cuando se seleccionen más de un objeto (por ejemplo, borrar selección).
Oculta comandos que sean contextuales para la selección.

Aquí se muestra el HTML para una AppBar con 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 -->

Cuando se inicializa la AppBar, los comandos contextual de selección se ocultan.

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;
}

Esta función muestra la AppBar y los comandos contextuales al realizar la selección.

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'));
    }
}

Paso 3: Ajustar la posición de la barra de desplazamiento

Para admitir el desplazamiento mientras la AppBar está visible, como en los casos de selección múltiple, la barra de desplazamiento debe estar situada por encima de la AppBar. Debido a la localización, deberás suponer que las etiquetas de los botones de la AppBar serán una línea más largar que las etiquetas solo en inglés. Al colocar la barra de desplazamiento, deberás tener en cuenta esa línea extra. Así que, por ejemplo, una AppBar con etiquetas de una línea de con una altura de 88 px para inglés, debería tener una altura de 108 px con etiquetas de una línea.

Diseña tu ListView para que la barra de desplazamiento tenga un espacio de 108 px para la AppBar. Después ajusta la posición de la barra de desplazamiento para que quede visible y en su lugar correcto, dependiendo de si la AppBar está presente.

/* 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;
    }
}

Paso 4: Admite el desplazamiento y el zoom.

Para admitir el zoom y el desplazamiento vertical, deberás colocar la AppBar y el LitView en DIV que sean del mismo nivel y asegurarte de que el zoom solo se aplique al DIV del ListView y no a toda la página.

<!-- 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 -->

Observaciones

Algunas aplicaciones pueden beneficiarse de las interacciones entre ListView y la AppBar. Sigue estos sencillos procedimientos recomendados para cumplir con la experiencia de usuario recomendada.