빠른 시작: FlipView 추가(HTML)

  • 아티클

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

사용자가 전환할 수 있는 항목 목록을 표시하는 앱이 많습니다. 이러한 목록들은 데이터베이스, 웹 또는 JSON 데이터 원본으로부터 데이터를 획득합니다. WinJS는 이 용도로만 사용되는 FlipView 컨트롤을 제공합니다.

FlipView 컨트롤.

사전 요구 사항

FlipView란?

FlipView는 한 번에 하나씩 항목 컬렉션을 전환할 수 있는 WinJS 컨트롤입니다. 이미지 갤러리를 표시하는 데 유용합니다.

FlipView는 IListDataSource에서 데이터를 가져옵니다. WinJS에서는 여러 유형의 IListDataSource 개체를 제공합니다.

  • List를 사용하여 데이터 배열에서 IListDataSource를 만들 수 있습니다.
  • StorageDataSource를 사용하여 파일 및 디렉터리에 대한 정보에 액세스할 수 있습니다.

웹 서비스 또는 데이터베이스와 같은 일부 다른 유형의 데이터 공급자에 연결되는 사용자 지정 데이터 원본도 만들 수 있습니다. 자세한 내용은 사용자 지정 데이터 원본을 만드는 방법을 참조하세요.

단순 FlipView 만들기

  1. WinJS에 대한 참조를 HTML 파일에 추가합니다(없는 경우).

    
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    다음 예제에서는 Microsoft Visual Studio에서 새 응용 프로그램 프로젝트를 만들 때 생성되는 default.html 파일의 HTML을 보여줍니다. 여기에는 WinJS에 대한 참조가 이미 포함되어 있습니다.

    
<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>FlipViewExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- FlipViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

    이 예제에서는 어두운 스타일시트 대신 밝은 스타일시트를 사용하므로 앱을 이 예제와 일치시키려면 다음 참조를 변경합니다.

        <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">

    방법:

         <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">

  2. HTML 파일에서 div 요소를 만들고 해당 data-win-control 속성을 "WinJS.UI.FlipView"로 설정합니다.

    <div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
></div>

  3. HTML 파일과 함께 제공되는 JavaScript 코드에서 HTML이 로드될 때 WinJS.UI.processAll 함수를 호출합니다.

    WinJS.UI.processAll();

    다음 예제에서는 새 응용 프로그램 프로젝트를 만들 때 생성된 default.html 파일과 함께 제공되는 default.js 파일을 보여 줍니다.

    
// default.js
(function () {
    "use strict";

    var app = WinJS.Application;

    // This function responds to all application activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // TODO: Initialize your application here.
            WinJS.UI.processAll();
        }
    };

    app.start();
})();

    이 예제는 FlipView를 시작 페이지(default.html)에 추가하는 경우에 작동합니다. FlipView를 페이지 컨트롤에 추가하는 경우에는 WinJS.UI.processAll을 호출할 필요가 없습니다. 페이지 컨트롤이 대신해 줍니다. 사용자 지정 HTML에 FlipView를 추가하는 경우 DOMContentLoaded 이벤트를 사용하여 WinJS.UI.processAll을 호출할 수 있습니다. 컨트롤 활성화에 대한 자세한 내용은 빠른 시작: WinJS 컨트롤 및 스타일 추가를 참조하세요.

  4. 중요:FlipView의 높이와 너비를 설정합니다. FlipView 렌더링을 위해서는 높이를 절대값으로 지정해야 합니다. FlipView를 포함하는 HTML 페이지용 CSS 스타일시트에 이 CSS를 추가합니다.

    #basicFlipView
{
    width: 480px;
    height: 270px;
    border: solid 1px black;    
}

이 코드는 빈 FlipView를 만듭니다. 앱을 실행하는 경우 빈 컨트롤이 표시됩니다. 다음 섹션에서는 표시할 FlipView의 데이터를 만듭니다.

데이터 정의

데이터 원본을 만들 코드를 별도의 JavaScript 파일로 만들면 유지 관리하기가 더욱 수월합니다. 이 섹션에서는 JavaScript 파일을 만드는 방법, List를 만드는 방법 그리고 WinJS.Namespace.define 기능을 사용하여 데이터가 앱의 나머지 부분에 접근성 있도록 만드는 방법을 설명합니다.

  1. Visual Studio를 사용하여 프로젝트에 데이터 파일을 추가합니다. 솔루션 탐색기에서 프로젝트의 js 폴더를 마우스 오른쪽 단추로 클릭하고 추가 > 새 항목을 선택합니다. 새 항목 추가 대화 상자가 나타납니다.

  2. JavaScript 파일을 선택합니다. 파일의 이름을 "dataExample.js"로 지정합니다. 추가를 클릭하여 파일을 만듭니다. Visual Studio에서 dataExample.js라는 빈 JavaScript 파일을 만듭니다.

  3. dataExample.js를 엽니다. 익명 함수를 만들고 strict 모드를 켭니다.

    기본 앱 코딩에 설명된 대로 JavaScript 코드를 익명 함수에 래핑하여 코드를 캡슐화하고 strict 모드를 사용하는 것이 좋습니다.

    (function () {
    "use strict"; 





})();

  4. 데이터 배열을 만듭니다. 다음 예제에서는 개체 배열을 만듭니다. 각 개체에 세 가지 속성(type, title 및 image)이 있습니다.

    (function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

})();

    참고  코드를 단계별로 수행하면 사진을 로컬 컴퓨터의 파일로 변경하거나, HTML FlipView 컨트롤 샘플(동일한 샘플은 아니지만 동일한 이미지를 사용함)을 다운로드하여 사진을 가져올 수 있습니다. 이미지—를 추가하지 않고 샘플을 실행할 수도 있습니다. 그래도 샘플이 실행됩니다.

     

  5. 배열을 사용하여 List 개체를 만듭니다.

    (function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

    var dataList = new WinJS.Binding.List(dataArray); 

})();

  6. 네임스페이스를 선언하고 List를 공용 멤버로 추가하여 List를 노출합니다.

    방금 작성한 코드는 익명 함수 안에 있으므로 공개적으로 액세스할 수 없습니다. 익명 함수를 사용하는 것은 이런 이유 때문이며, 개인 데이터를 비공개로 유지할 수 있습니다. FlipView가 List에 액세스할 수 있으려면 공개적으로 접근성 있도록 설정해야 합니다. 한 가지 방법은 WinJS.Namespace.define 함수를 사용하여 네임스페이스를 만들고 List를 멤버 중 하나로 추가하는 것입니다.

    WinJS.Namespace.define 함수는 만들 네임스페이스 이름과 하나 이상의 속성/값 쌍을 포함하는 개체라는 두 매개 변수를 사용합니다. 각 속성은 멤버의 공개 이름이고 각 값은 노출할 개인 코드의 기본 변수, 속성 또는 함수입니다.

    다음 예제에서는 List를 반환하는 itemList라는 공용 멤버를 노출하는 DataExample이라는 네임스페이스를 만듭니다.

    (function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

    var dataList = new WinJS.Binding.List(dataArray);

    // Create a namespace to make the data publicly
    // accessible. 
    var publicMembers =
        {
            itemList: dataList 
        };
    WinJS.Namespace.define("DataExample", publicMembers); 

})();

FlipView에서 액세스할 수 있는 데이터 원본을 만들었습니다. 다음 섹션에서는 해당 데이터를 FlipView에 연결합니다.

FlipView에 데이터 연결

  1. FlipView를 포함하는 HTML 파일의 head 섹션에서 방금 만든 데이터 파일(dataExample.js)의 참조를 추가합니다.

    <head>
    <meta charset="utf-8">
    <title>FlipViewExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- FlipViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>

    <!-- Your data file. -->
    <script src="/js/dataExample.js"></script>

</head>

  2. 마지막 섹션에서 만든 데이터를 사용하여 FlipView 컨트롤의 itemDataSource 속성을 설정합니다.

    itemDataSource 속성은 IListDataSource 개체를 사용합니다. List 개체는 IListDataSource가 아니지만 해당 개체의 IListDataSource 버전을 반환하는 dataSource 속성이 있습니다.

    데이터를 연결하려면 FlipView 컨트롤의 itemDataSource 속성을 DataExample.itemDataList.dataSource로 설정합니다.

    
<div id="basicFlipView"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource }">
</div>

앱을 실행합니다. FlipView는 데이터 원본의 속성과 값을 표시합니다.

템플릿 없이 데이터 원본 콘텐츠 표시.

이것이 우리가 원하는 바로 그 모양은 아닙니다. 제목 필드의 값만 표시하려고 하며 이미지의 경로가 아닌 실제 이미지를 표시하려고 합니다. 원하는 렌더링을 가져오려면 Template을 정의해야 합니다. 다음은 그 방법입니다.

항목 템플릿 정의

이 시점에서 FlipView는 필요한 데이터는 있지만 데이터를 표시하는 방법을 모릅니다. 이를 위해서는 항목 템플릿이 있어야 합니다. 템플릿을 만드는 두 가지 방법이 있습니다. 태그를 사용하여 WinJS.Binding.Template을 정의하거나 템플릿 작성 함수를 만들 수 있습니다. 이 예제에서는 태그를 사용하여 템플릿을 만듭니다. 템플릿 함수를 만드는 방법에 대한 자세한 내용은 itemTemplate 속성을 참조하세요.

WinJS.Binding.Template은 쉽게 만들 수 있습니다. 각 목록 항목을 표시할 때 사용할 태그를 정의한 다음 각 데이터 필드가 나타날 위치를 표시합니다.

  1. HTML에서 WinJS.Binding.Template 컨트롤을 만들고 ID를 할당합니다. 다음 예제에서는 ID "ItemTemplate"을 사용합니다.

    <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">

</div>

    참고  템플릿을 사용하려면 먼저 정의해야 합니다. 따라서 FlipView HTML보다 템플릿 HTML을 먼저 추가합니다.

     

  2. WinJS.Binding.Template에는 하나의 루트 요소만 있어야 합니다. 템플릿의 콘텐츠에 대해 부모 역할을 할 div 요소를 만듭니다.

    <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>

    </div>
</div>

  3. FlipView가 포함하는 각 데이터 항목에 대해 생성할 태그를 만듭니다. 이전 섹션에서 만든 데이터에는 이미지 위치, 제목 및 일부 텍스트가 포함되어 있으므로 다음과 같은 요소를 만드세요.

    • 사진 필드를 표시할 img 요소
    • 제목 필드를 표시할 h2 요소

    이 예제에서는 서식 지정을 위해 다른 div 요소도 추가합니다.

    <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#"  />
        <div>
            <h2></h2>
        </div>
    </div>
</div>

  4. 데이터를 표시하는 각 요소에서 data-win-bind 특성을 설정합니다. data-win-bind 특성은 다음 구문을 사용합니다.

    data-win-bind="propertyName: dataFieldName"

     

    예를 들어 img의 src 속성을 "picture" 필드에 바인딩하려면 다음 구문을 사용합니다.

    <img data-win-bind="src : picture" />

    여러 속성을 설정하려면 세미콜론으로 구분합니다.

    data-win-bind="property1Name: dataField1Name; property2Name: dataField2Name"

     

    이 예제에서는 템플릿의 항목을 해당 데이터 필드에 바인딩합니다.

    
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#" data-win-bind="src: picture; alt: title" />
        <div>
            <h2 data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>

  5. 항목 템플릿을 사용하려면 FlipView의 itemTemplate 속성을 항목 템플릿의 ID(이 예제에서는 "ItemTemplate")로 설정합니다.

    <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#" data-win-bind="src: picture; alt: title" />
        <div>
            <h2 data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>    

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }"
></div>

    이제 앱을 실행하면 바인딩된 데이터가 목록에 표시됩니다.

    데이터 바인딩된 FlipView

    몇 가지 서식 문제가 있습니다. 가령 제목 텍스트가 표시되지 않습니다. 다음 섹션에서는 템플릿에 스타일을 지정하여 이러한 문제를 해결하는 방법을 보여 줍니다.

항목 스타일 지정

CSS를 사용하여 항목 템플릿에 스타일을 지정할 수 있습니다. 다음 예제에서는 항목 템플릿 정의 섹션에서 정의한 템플릿에 일부 CSS 클래스를 추가합니다.

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div class="overlaidItemTemplate">
        <img class="image" src="#" data-win-bind="src: picture; alt: title" />
        <div class="overlay">
            <h2 class="ItemTitle" data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }"
></div>

HTML 파일의 CSS 스타일시트에서 템플릿에 대해 이러한 스타일을 추가합니다.

#basicFlipView
{
    width: 480px;
    height: 270px;
    border: solid 1px black;    
}

/**********************************************/
/*                                            */
/* Styles used in the item template           */
/*                                            */
/**********************************************/
.overlaidItemTemplate
{
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
    width: 480px;
    height: 270px;
}

    .overlaidItemTemplate img
    {
        width: 100%;
        height: 100%;
    }
    
    .overlaidItemTemplate .overlay
    {
        position: relative;
        -ms-grid-row-align: end;
        background-color: rgba(0,0,0,0.65);
        height: 40px;
        padding: 20px 15px;
        overflow: hidden;
    }

        .overlaidItemTemplate .overlay .ItemTitle
        {
            color: rgba(255, 255, 255, 0.8);
        }

FlipView의 현재 모양은 다음과 같습니다.

스타일이 지정된 FlipView참고  

FlipView 탐색 단추의 글꼴 패밀리를 변경하면 단추에 더 이상 올바른 문자 모양이 포함되지 않습니다.

 

FlipView 방향 변경

기본적으로 FlipView는 가로 방향을 사용합니다. orientation 속성을 "vertical"로 설정하여 FlipView를 세로로 표시할 수 있습니다.

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate, orientation: 'vertical' }"
></div>

세로 방향의 FlipView

항목 템플릿에 인터랙티브 요소 추가

항목 템플릿에는 대부분의 다른 컨트롤이 포함될 수 있지만 ListView 또는 다른 FlipView는 포함할 수 없습니다.

일반적으로 사용자가 요소를 조작할 때 FlipView는 이 조작을 캡처하고 사용하여 사용자가 항목을 선택 또는 호출했는지, 아니면 항목 간을 이동 중인지 확인합니다. 컨트롤 등의 인터랙티브 요소가 입력을 받으려면 인터랙티브 요소나 부모 요소 중 하나에 win-interactive 클래스를 연결해야 합니다. 해당 요소와 자식은 조작을 받고 더 이상 FlipView에 대한 이벤트를 트리거하지 않습니다.

항목 템플릿의 요소에 win-interactive를 연결하는 경우 요소가 전체 항목을 채우지 않도록 합니다. 그렇지 않으면 사용자가 해당 항목을 선택하거나 호출할 수 없습니다.

항목 템플릿에 인터랙티브 요소를 추가하려면 WinJS.Binding.Template 대신 템플릿 함수를 사용해야 합니다. 이 작업을 수행하는 방법의 예제는 HTML FlipView 컨트롤 샘플을 참조하세요. 템플릿 함수에 대한 자세한 내용은 FlipView.itemTemplate의 예제를 참조하세요.

컨텍스트 컨트롤 만들기

FlipView는 사용자에게 현재 항목의 위치와 컬렉션 탐색을 위한 대체 메커니즘에 대한 힌트를 제시하는 사용자 지정 컨트롤을 만들 수 있는 메서드와 이벤트를 제공합니다. 다음 이미지는 pageselected 및 pagevisibilitychanged 이벤트를 통해 FlipView와 동기화 상태를 유지하며 스타일이 지정된 라디오 단추 모음을 보여 줍니다.

컨텍스트 컨트롤이 있는 FlipView

이 방법을 보여 주는 코드는 HTML FlipView 컨트롤 샘플을 참조하세요.

관련 항목

FlipView Reference

HTML FlipView 컨트롤 샘플