ListView와 앱 바를 함께 작동시키는 방법

이 방법 항목에서는 앱 바의 모범 사례에 따르면서 이러한 시나리오를 지원하기 위한 ListView와 앱 바 간 조작에 대해 설명합니다. 일반적으로 ListView를 사용하여 개체 컬렉션이 가로로 걸쳐 있도록 하고 이러한 개체 중 하나 이상을 선택하여 일부 작업을 수행하도록 할 수 있습니다. 이러한 작업은 종종 앱 바에서 나타납니다.

사전 요구 사항

지침

단계 1: 앱 바와 관련된 지침 유지

  1. 호출: 앱 바가 존재할 경우 사용자는 언제든지 표준 메커니즘을 통해 앱 바를 호출하거나 숨길 수 있어야 합니다.
    • 가장자리 살짝 밀기
    • Win+Z
    • 오른쪽 단추 클릭
  2. 개체를 선택할 때까지 노출되는 명령이 없으면 앱 바가 표시되지 않아야 합니다.
  3. 선택과 관계없이 표시되는 명령은 앱 바 오른쪽의 몇 가지 예외를 제외하고 앱 바의 전역 섹션에 포함되어야 합니다.

단계 2: 선택 및 다중 선택 지원

  1. 선택 영역에 따라 프로그래밍 방식으로 앱 바를 표시합니다.
  2. 다중 선택을 지원하기 위해 앱 바를 고정으로 설정합니다.
  3. 앱 바의 상황별 섹션에 선택 항목에 국한되는 명령을 표시합니다(몇 가지 경우를 제외하고 왼쪽에 표시).
  4. 둘 이상의 개체를 선택한 경우 필요에 따라 추가 명령을 표시합니다(예: 선택 영역 지우기).
  5. 선택 영역이 지워지면 고정 속성을 제거합니다.
  6. 선택 항목에 국한되는 명령은 숨깁니다.

다음은 명령을 포함하는 앱 바의 HTML입니다.


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

앱 바가 초기화되면 선택 항목에 맞는 명령은 숨겨집니다.


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

이 함수는 앱 바를 표시하고 고정으로 설정한 다음 선택 항목에 맞는 명령을 표시합니다.


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

단계 3: 스크롤 막대 위치 조정

다중 선택의 경우처럼 앱 바가 보이면서 스크롤하도록 하려면 스크롤 막대가 앱 바 위에 올라가도록 배치되어야 합니다. 지역화 때문에 앱 바 단추 레이블을 영어만 포함된 레이블보다 한 줄 더 길게 예측해야 합니다. 스크롤 막대를 배치할 때는 이러한 추가 줄을 고려해야 합니다. 예를 들어 영어에 대해 높이가 88px인 단일 레이블 앱 바는 2줄 레이블을 포함하는 108px 높이가 됩니다.

스크롤 막대가 앱 바와 108px 떨어져 있도록 ListView를 디자인합니다. 그런 후 앱 바의 존재 여부에 따라 적절한 위치에 표시되고 잘 보이도록 스크롤 막대를 배치합니다.


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

단계 4: 스크롤 및 확대/축소를 지원합니다.

확대/축소 및 세로 스크롤을 지원하려면 앱 바와 ListView를 유사한 분할 영역에 배치하고 확대/축소가 전체 페이지가 아닌 ListView 부분에만 적용되도록 해야 합니다.


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

설명

목록 뷰와 앱 바가 상호 작용하도록 하는 방식은 앱 디자인 시 일반적으로 사용되는 방법입니다. 이러한 간단한 모범 사례를 따르면 권장되는 사용자 환경을 구현할 수 있습니다.

 

 

표시:
© 2015 Microsoft