빠른 시작: 항목 컨테이너 추가

아티클
03/04/2016

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

JavaScript로 작성한 Windows 스토어 앱에 ItemContainer 개체를 추가하는 방법을 알아봅니다.ItemContainer는 많은 HTML 태그나 JavaScript 코드 없이 간단한 대화형 요소를 만듭니다. 이 컨트롤을 사용하여 만든 항목은 애니메이션, 살짝 밀기, 끌어서 놓기 및 가리키기에서 Windows의 모양 및 느낌과 일치합니다.

이 빠른 시작 문서에서는 Repeater 컨트롤과 ItemContainer 컨트롤을 사용하여 간단한 고객 데이터 표시를 작성합니다. 또한 두 개의 ItemContainer 컨트롤을 통합하는 HTML <form> 요소를 사용하여 JavaScript로 작성한 Windows 스토어 앱에서 데이터 입력 폼을 만드는 방법을 알아봅니다.

사전 요구 사항

탐색 앱 템플릿을 사용하여 새 프로젝트 만들기

Microsoft Visual Studio를 시작합니다.
시작 페이지 탭에서 새 프로젝트를 클릭합니다. 새 프로젝트 대화 상자가 열립니다.
설치됨 창에서 템플릿 및 JavaScript를 확장하고 Windows 스토어 앱 템플릿 종류를 클릭합니다. JavaScript에 사용할 수 있는 프로젝트 템플릿이 대화 상자의 가운데 창에 표시됩니다.
가운데 창에서 탐색 앱 프로젝트 템플릿을 선택합니다.
이름 입력란에 ItemContainer 데모를 입력합니다.
확인을 클릭하여 프로젝트를 만듭니다.

ItemContainer 컨트롤을 사용하여 HTML 추가

ItemContainer는 다른 컨트롤(예: ListView 컨트롤)이 적합하지 않을 수 있는 경우에 사용할 강력한 다용도 컨트롤을 제공합니다. ItemContainer는 풍부한 버전의 토글 단추로 효과적입니다. 쇼핑 카트 사용자 인터페이스와 유사한 놓기 대상으로 사용할 수도 있습니다. 보다 중요한 것은 ItemContainer를 다른 컨트롤, 특히 Repeater와 함께 사용할 수 있다는 것입니다. ItemContainer 및 Repeater를 함께 사용하여 동적 데이터를 ItemContainer에 바인딩할 수 있습니다.

ItemContainer는 HTML 페이지에서 선언적으로 정의하거나 페이지와 함께 로드된 JavaScript를 사용하여 런타임에 정의할 수 있습니다. 이 예제는 Repeater 컨트롤 내에 호스트된 하나의 예제를 사용하여 HTML 태그에서 선언적으로 ItemContainer를 만듭니다.

home.js 파일(/pages/home/home.html)을 열고 다음 HTML 태그를 추가합니다.


<!-- Create an entry form for new customer data. -->
<div id="customerInput">
    <h2>Customer entry</h2><br />
    <form id="inputContainer"
        class="itemContainer">
        <input id="firstName" type="text" placeholder="First name" required /><br />
        <input id="lastName" type="text" placeholder="Last name" required /><br />
        <input id="phoneNumber" type="tel" placeholder="Phone number" /><br />
        <input id="email" type="email" placeholder="E-mail" required /><br /><br />
        <div id="contactByEmail"
            class="selectionItem"
            data-win-control="WinJS.UI.ItemContainer"
            data-win-options="{
                tapBehavior: directSelect
            }">Contact by e-mail</div><br />
        <div id="contactByPhone"
            class="selectionItem"
            data-win-control="WinJS.UI.ItemContainer"
            data-win-options="{
                tapBehavior: directSelect
            }">Contact by phone</div><br />
        <button type="submit">Submit</button>
        <button type="reset">Clear</button>
    </form>
</div>

<!-- Create a display for existing customer data -->
<div id="customerList">
    <h2>Customer list</h2><br />
    <div id="entryContainer"
        class="itemContainer"
        data-win-control="WinJS.UI.Repeater"
        data-win-options="{
            data: CustomerData.data
    }">
        <div class="customerListItem"
            data-win-control="WinJS.UI.ItemContainer">
            <b>Name:</b> <span data-win-bind="textContent: name"></span><br />
            <b>E-mail:</b> <span data-win-bind="textContent: email"></span><br />
            <b>Phone: </b> <span data-win-bind="textContent: phoneNumber"></span><br />
            <b>Contact by: </b><span data-win-bind="textContent: contactPreference"></span><br />
        </div> 
    </div>
</div>

이 태그는 앱 내에서 사용자 인터페이스의 두 부분(고객 데이터 입력 폼 및 기존 고객 데이터 표시)을 정의합니다. 고객 데이터 입력 폼은 <form> 요소에 두 개의 ItemContainer 컨트롤을 포함합니다. 여기서 ItemContainer 컨트롤은 풍부한 확인란 컨트롤 역할을 합니다. 고객 데이터 표시 섹션에는 개별 고객 데이터 항목을 표시하기 위한 ItemContainer를 포함하는 Repeater가 있습니다.

home.css(/pages/home/home.css)를 열고 다음 코드를 추가합니다.


/* Style the page so that the entry form and
display are in two separate parts of a grid. */
.maincontent {
    padding: 50px;
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr;
    -ms-grid-rows: inherit;
}

#customerInput {
    -ms-grid-column: 1;
}

#customerList {
    -ms-grid-column: 2;
}

#entryContainer {  
    overflow-y: auto;
}

.itemContainer {
    width: 500px;
    height: 350px;
}

.selectionItem {
    width: 300px;
    border: 10px;
    height: 50px;
}

/* Create a solid gray border around items
in the customer display list. */
.customerListItem {
    width: 450px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-style: solid;
    border-color: gray;
}

이렇게 스타일을 지정하면 고객 데이터 입력이 포함될 두 부분으로 구성된 그리드와 앱의 고객 데이터 표시 부분이 만들어집니다. 고객 데이터 입력 폼은 앱의 왼쪽에 나타나고 고객 데이터 표시는 오른쪽에 나타납니다.

컨트롤에 JavaScript 이벤트 처리기 적용

이 앱은 입력된 정보를 폼으로 가져와서 고객 데이터 목록에 표시합니다. 폼을 제출하면 폼의 데이터가 하나의 JavaScript 개체로 변환됩니다. 그런 다음 개체가 표시된 고객 데이터 목록에 추가됩니다.

js 폴더를 마우스 오른쪽 단추로 클릭하고 추가 > 새 JavaScript 파일을 클릭합니다. 새 항목 추가 대화 상자에서 파일 이름을 data.js로 지정하고 추가를 클릭합니다. default.html에 새 스크립트에 대한 참조를 추가합니다.
```
<script src='/js/data.js'></script>
```

data.js(/js/data.js)를 열고 다음 코드를 추가합니다.

(function () {
    "use strict";

    var customers = [];
    var customerList = new WinJS.Binding.List(customers);

    function Customer(customerInfo) {
        this.name = customerInfo.lastName + ", " + customerInfo.firstName;
        this.email = customerInfo.email;
        this.phoneNumber = customerInfo.phone;
        this.contactPreference = "Does not wish to be contacted";

        if (customerInfo.contactByPhone && customerInfo.contactByEmail) {
            this.contactPreference = "Contact by e-mail and phone"
        }
        else if (customerInfo.contactByPhone) {
            this.contactPreference = "Contact by phone only"
        }
        else if (customerInfo.contactByEmail) {
            this.contactPreference = "Contact by email only"
        }
    }

    WinJS.Namespace.define("CustomerData", {
        data: customerList,
        Customer: Customer
    });
})();

이 코드는 두 멤버를 노출하는 새 네임스페이스 CustomerData를 정의합니다. Customer는 고객 데이터를 저장하기 위한 개체이고 data는 Customer 개체를 저장하는 List입니다.

home.js(/pages/home/home.js)를 열고 기존 코드를 다음 코드로 바꿉니다.

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {

            // Apply an event handler to when the user
            // submits the form.
            var form = document.forms[0];
            form.onsubmit = function (evt) {

                // Prevent the form from refreshing the page.
                evt.preventDefault();

                // Get the customer input data from the form.
                var entryForm = evt.target;
                var entry = {
                    firstName: entryForm.firstName.value,
                    lastName: entryForm.lastName.value,
                    phone: entryForm.phoneNumber.value,
                    email: entryForm.email.value,
                    contactByEmail: entryForm.children.contactByEmail.winControl.selected,
                    contactByPhone: entryForm.children.contactByPhone.winControl.selected
                };

                // Submit the new Customer data to the list of customers.
                var customer = new CustomerData.Customer(entry);
                var entryList = document.querySelector("#entryContainer").winControl;
                entryList.data.push(customer);

                // Clear the entry form.
                entryForm.querySelector("button[type='reset']").click();
            }

            // Add additional clean-up work when the user 
            // clicks the Reset button.
            form.onreset = function (evt) {
                var entryForm = evt.target;

                // Remove any selection from the item containers.
                entryForm.children.contactByEmail.winControl.selected = false;
                entryForm.children.contactByPhone.winControl.selected = false;
            }

            // Release memory from the 'form' variable after 
            // event handlers have been applied.
            form = null;
        }
    });
})();

이 코드는 <form> 요소에서 선언된 두 개의 단추에 이벤트 처리기를 추가합니다. Submit 단추를 클릭하면 코드가 고객 입력 폼에서 데이터를 가져오고 Repeater 컨트롤의 데이터 원본에 새 Customer 개체를 추가한 다음 폼을 지웁니다. Reset에 적용된 이벤트 처리기는 폼에 포함된 두 개의 ItemContainer 컨트롤 선택을 지웁니다.

F5 키를 눌러 샘플을 실행합니다. 앱이 실행되면 Customer entry 폼에 데이터를 입력하고 Submit을 클릭합니다. 새 ItemContainer가 Customer list 아래에 나타나고 해당 고객에 대한 정보를 표시합니다. 앱이 실행되는 동안 폼에 추가 데이터를 입력하고 Reset을 클릭합니다. 폼이 지워지고 폼에 있는 두 개의 ItemContainer 컨트롤에서 모든 선택이 제거됩니다.

요약 및 다음 단계

이 빠른 시작에서는 몇 가지 방법(사용자 선택을 위한 풍부한 확인란 컨트롤 및 Repeater 컨트롤 내의 중첩 컨트롤)으로 ItemContainer 컨트롤을 사용하는 방법을 알아보았습니다. 또한 JavaScript로 작성한 Windows 스토어 앱 내에서 HTML <form> 요소를 사용하는 방법을 알아보았습니다.

ItemContainer 컨트롤을 끌기 대상과 놓기 대상 둘 다로 사용할 수도 있습니다. 그러나 이 문서에서는 작업 방법을 보여 주지 않습니다.

Repeater 컨트롤을 사용하는 방법에 대해 자세히 알아보려면 빠른 시작: repeater 컨트롤 추가를 참조하세요.

끌어서 놓기 기능을 만드는 방법에 대해 자세히 알아보려면 ListView에서 순서 다시 매기기, 끌기 및 놓기를 사용하도록 설정하는 방법을 참조하세요.

다음을 통해 공유

빠른 시작: 항목 컨테이너 추가

사전 요구 사항

요약 및 다음 단계

추가 리소스