컨트롤(HTML 및 JavaScript)
Windows 8.1의 새로운 HTML 및 JavaScript 컨트롤을 사용하여 사용자 지정 명령 및 향상된 탐색 지원 등의 새로운 기능을 Windows 스토어 앱에 추가하세요. 기존 컨트롤의 업데이트를 통해 끌어서 놓기 지원 같은 추가 기능을 더 쉽게 사용하고 추가할 수 있습니다. 이러한 새 컨트롤과 컨트롤 업데이트를 사용하면 모든 기능을 갖춘 앱을 매우 쉽게 만들 수 있습니다.
새 컨트롤 및 컨트롤 업데이트
Windows 8.1 및 JavaScript 2.0용 Windows 라이브러리에서는 다음과 같은 새 컨트롤과 기능을 제공합니다.
- AppBarCommand
- BackButton
- Hub
- ItemContainer
- NavBar
- Repeater
- WebView
Windows 8.1 및 JavaScript 2.0용 Windows 라이브러리에는 이러한 기존 컨트롤에 대한 업데이트가 포함되어 있습니다.
- ListView에 대한 끌어 놓기 지원
- ListView에서 항목 다시 정렬
- 새 ListView 레이아웃: CellSpanningLayout
- 기타 ListView 업데이트
- 기타 JavaScript용 Windows 라이브러리 업데이트
JavaScript 2.0용 Windows 라이브러리 사용
새로운 Microsoft Visual Studio 2013 프로젝트에는 JavaScript 2.0용 Windows 라이브러리가 자동으로 포함됩니다. Windows 8으로 만든 프로젝트에서 JavaScript 2.0용 Windows 라이브러리를 사용하려면 기존 JavaScript 1용 Windows 라이브러리 참조를.
<!-- WinJS style sheets (include one) -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">
<!-- WinJS code -->
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
...Windows Library for JavaScript 2.0에 대한 참조로 바꿔야 합니다.
<!-- WinJS style sheets (include one) -->
<link rel="stylesheet" href="//Microsoft.WinJS.2.0/css/ui-dark.css" />
<link rel="stylesheet" href="//Microsoft.WinJS.2.0/css/ui-light.css" />
<!-- WinJS code -->
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
Visual Studio 2013을 통해 프로젝트를 자동으로 업그레이드하거나 수동으로 이러한 추가 업데이트를 수행할 수 있습니다.
Windows 8.1 Library for JavaScript에 대한 참조를 프로젝트에 추가하세요.
앱 매니페스트에서 OSMinVersion 및 OSMaxVersionTested 값을 6.3.0으로 업데이트합니다.
<Prerequisites> <OSMinVersion>6.3.0</OSMinVersion> <OSMaxVersionTested>6.3.0</OSMaxVersionTested> </Prerequisites>
AppBarCommand
[지금 HTML AppBar 컨트롤 샘플을 가져옵니다.]
Windows 8.1에서는 콘텐츠라는 새로운 AppBarCommand 형식을 사용하여 JavaScript를 통해 Windows 스토어 앱에 사용자 지정 앱 바 명령을 만들 수 있습니다.
이 기능을 사용하면 commands 레이아웃에 사용자 지정 콘텐츠를 삽입할 수 있으므로 사용자 지정 콘텐츠가 포함된 앱 바를 만드는 프로세스가 간소화됩니다. 키보드 작업, 명령 정렬 및 동적으로 명령을 표시하고 숨기기 위한 애니메이션을 포함하여 사용자 지정 콘텐츠가 포함된 앱 바 명령에 대한 전체 기본 제공 지원을 이용할 수 있습니다.
commands 레이아웃에 포함될 경우 콘텐츠 형식 AppBarCommand는 기본 앱 바 명령과 동일한 대부분의 기능을 지원합니다.
키보드 작업(tab, 화살표, home 및 end 키 사용)은 기본 앱 바 명령과 사용자 지정 AppBarCommand 사이에서 사용됩니다.
새 콘텐츠 형식 AppBarCommand를 사용하면 앱 바 크기 조정이 제대로 작동합니다. 앱 크기가 더 작게 조정되면 명령의 텍스트 레이블이 동적으로 삭제됩니다.
BackButton
Windows 8.1 및 Windows Library for JavaScript 2.0에서는 앱에 대한 컨트롤의 양식에 플랫폼에 대한 다른 탐색 지원을 추가합니다. 이러한 컨트롤 중 하나는 BackButton입니다.
BackButton을 통해 뒤로 탐색 기능을 앱에 손쉽게 추가할 수 있으며 BackButton 컨트롤을 간단하게 만들 수 있습니다.
<button data-win-control="WinJS.UI.BackButton" ></button>
.png "새로운 BackButton 컨트롤")
BackButton은 탐색 스택을 자동으로 확인하여 사용자가 뒤로 탐색할 수 있는지 판별합니다. 뒤로 탐색할 내용이 없는 경우 단추 자체가 사용하지 않도록 설정됩니다. 사용자가 단추를 클릭하거나 바로 가기 키(예제: Alt+Left 또는 BrowserBack 키)를 사용하면 컨트롤이 자동으로 WinJS.Navigation.back 함수를 호출하여 뒤로 이동합니다. 코드를 작성할 필요가 없습니다.
Hub
[지금 HTML Hub 컨트롤 샘플을 가져옵니다.]
더욱 일관된 탐색 환경을 제공할 수 있도록 Windows 8.1 및 Windows Library for JavaScript 2.0에서는 Hub 컨트롤을 추가합니다.
대부분의 Windows 스토어 앱에서는 탐색의 계층적 시스템인 허브 탐색 패턴을 사용합니다. 큰 콘텐츠 모음 또는 다양한 콘텐츠 섹션을 포함하고 사용자가 이를 탐색해야 하는 앱에 가장 효과적인 패턴입니다.
허브 디자인의 핵심은 콘텐츠를 서로 다른 섹션과 세부 정보 수준으로 구분하는 것입니다. 허브 페이지는 사용자의 앱 진입점입니다. 이 페이지에는 콘텐츠가 가로 또는 세로 이동 보기로 표시되어 사용자가 새로 추가된 기능과 사용 가능한 기능을 한눈에 살펴볼 수 있습니다. 허브는 다양한 콘텐츠 범주로 구성되며, 이 각각의 범주는 앱의 섹션 페이지에 매핑됩니다. 각 섹션에서 콘텐츠 또는 기능이 다양하게 생성되어야 합니다. 허브는 풍부한 시각적 다양성을 제공하여 앱의 각 부분으로 사용자를 유도해야 합니다.
.jpg "허브 페이지")
Windows 8.1에서는 Hub 컨트롤을 통해 허브 페이지를 쉽게 만들 수 있습니다. Hub 페이지를 사용하여 앱을 빠르게 만들려면 Visual Studio 2013의 허브 앱 템플릿을 사용하세요.
허브 만들기
허브를 만들려면 Hub 컨트롤과 HubSection 개체를 허브에 포함된 각 섹션에 대해 추가합니다. 각 HubSection에는 JavaScript용 Windows 라이브러리 컨트롤을 포함한 모든 형식의 콘텐츠가 포함될 수 있습니다. header 속성을 사용하여 섹션 머리글을 지정합니다. 섹션 머리글은 정적이거나 대화형일 수 있습니다. 대화형 머리글은 숨길 수 있는 펼침 단추를 표시하고 사용자가 머리글을 조작할 때 이벤트를 발생시킵니다.
이 예제에서는 다음 세 가지 섹션이 포함된 Hub를 정의합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hubPage</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>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/hub/hub.css" rel="stylesheet" />
<script src="/js/data.js"></script>
<script src="/pages/hub/hub.js"></script>
</head>
<body>
<div class="hubpage fragment">
<header aria-label="Header content" role="banner">
<button data-win-control="WinJS.UI.BackButton"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Hub example</span>
</h1>
</header>
<section class="hub" aria-label="Main content" role="main" data-win-control="WinJS.UI.Hub">
<!-- Customize the Hub control by modifying the HubSection controls here. -->
<div class="section1" data-win-control="WinJS.UI.HubSection" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'Section1'} }">
<img src="/images/gray.png" width="420" height="280" />
<div class="subtext win-type-x-large secondary-text" data-win-res="{ textContent: 'Section1Subtext' }"></div>
<div class="win-type-medium" data-win-res="{ textContent: 'DescriptionText' }"></div>
<div class="win-type-small secondary-text">
<span data-win-res="{ textContent: 'Section1Description' }"></span>
<span data-win-res="{ textContent: 'Section1Description' }"></span>
<span data-win-res="{ textContent: 'Section1Description' }"></span>
</div>
</div>
<div class="section2" data-win-control="WinJS.UI.HubSection" data-win-res="{ winControl: {'header': 'Section2'} }"
data-win-options="{ onheaderinvoked: HubPage.section2HeaderNavigate }">
<div class="itemTemplate" data-win-control="WinJS.Binding.Template">
<img src="#" data-win-bind="src: backgroundImage; alt: title" />
<div class="item-text">
<div class="win-type-medium" data-win-bind="textContent: title"></div>
<div class="win-type-xx-small secondary-text" data-win-bind="textContent: subtitle"></div>
<div class="win-type-small secondary-text" data-win-bind="textContent: description"></div>
</div>
</div>
<div class="itemslist" data-win-control="WinJS.UI.ListView" data-win-options="{
layout: {type: WinJS.UI.ListLayout2},
selectionMode: 'none',
itemTemplate: select('.section2 .itemTemplate'),
itemDataSource: HubPage.section2DataSource,
oniteminvoked: HubPage.section2ItemNavigate
}">
</div>
</div>
<div class="section3" data-win-control="WinJS.UI.HubSection" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'Section3'} }">
<div class="top-image-row">
<img src="/images/gray.png" />
</div>
<div class="sub-image-row">
<img src="/images/gray.png" />
<img src="/images/gray.png" />
<img src="/images/gray.png" />
</div>
<div class="win-type-medium" data-win-res="{ textContent: 'DescriptionText' }"></div>
<div class="win-type-small secondary-text">
<span data-win-res="{ textContent: 'Section3Description' }"></span>
<span data-win-res="{ textContent: 'Section3Description' }"></span>
</div>
</div>
</section>
</div>
</body>
</html>
위의 코드로 이 페이지를 만듭니다.
.jpg "허브 페이지")
두 번째 머리글을 클릭하면 앱이 섹션 페이지로 이동합니다.
.jpg "섹션 페이지")
탐색을 수행하는 코드는 다음과 같습니다.
(function () {
"use strict";
var nav = WinJS.Navigation;
var session = WinJS.Application.sessionState;
var util = WinJS.Utilities;
// Get the groups used by the data-bound sections of the hub.
var section2Group = Data.resolveGroupReference("group1");
var section5Group = Data.resolveGroupReference("group6");
WinJS.UI.Pages.define("/pages/hub/hub.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) {
var hub = element.querySelector(".hub").winControl;
hub.onloadingstatechanged = function (args) {
if (args.srcElement === hub.element && args.detail.loadingState === "complete") {
this._hubReady(hub);
hub.onloadingstatechanged = null;
}
}.bind(this);
hub.onheaderinvoked = function (args) {
args.detail.section.onheaderinvoked(args);
};
// TODO: Initialize the page here.
},
unload: function () {
// TODO: Respond to navigations away from this page.
session.hubScroll = document.querySelector(".hub").winControl.scrollPosition;
},
updateLayout: function (element, viewState, lastViewState) {
/// <param name="element" domElement="true" />
// TODO: Respond to changes in viewState.
},
_hubReady: function (hub) {
/// <param name="hub" type="WinJS.UI.Hub" />
WinJS.Resources.processAll();
if (typeof session.hubScroll === "number") {
hub.scrollPosition = session.hubScroll;
}
// TODO: Initialize the hub sections here.
},
});
function createHeaderNavigator(group) {
return util.markSupportedForProcessing(function (args) {
nav.navigate("/pages/section/section.html", { title: this.header, groupKey: group.key });
});
}
function createItemNavigator(group) {
var items = Data.getItemsFromGroup(group);
return util.markSupportedForProcessing(function (args) {
var item = Data.getItemReference(items.getAt(args.detail.itemIndex));
nav.navigate("/pages/item/item.html", { item: item });
});
}
function getItemsDataSourceFromGroup(group) {
return Data.getItemsFromGroup(group).dataSource;
}
WinJS.Namespace.define("HubPage", {
section2DataSource: getItemsDataSourceFromGroup(section2Group),
section2HeaderNavigate: createHeaderNavigator(section2Group),
section2ItemNavigate: createItemNavigator(section2Group),
section5DataSource: getItemsDataSourceFromGroup(section5Group),
section5ItemNavigate: createItemNavigator(section5Group)
});
})();
Hub 컨트롤과 SemanticZoom 컨트롤을 함께 사용할 수도 있습니다. 이에 대한 추가 예제를 보려면 HTML Hub 컨트롤 샘플을 참조하세요.
ItemContainer
[지금 HTML ItemContainer 샘플을 가져옵니다.]
새 ItemContainer 컨트롤을 사용하여 살짝 밀기, 끌어서 놓기 및 가리키기 기능을 제공하는 대화형 요소를 쉽게 만들 수 있습니다. 콘텐츠를 ItemContainer 내부에 배치하세요. ItemContainer에는 표준 HTML 요소와 기타 WinJS 컨트롤도 포함될 수 있습니다.
ItemContainer는 유연하므로 다양한 확인란 그룹, 탐색 단추 및 쇼핑 카트 표시를 만드는 것과 같은 다양한 용도로 사용할 수 있습니다.
.png "탐색 모음의 ItemContainer 개체")
항목을 표시하려 하지만 ListView 컨트롤의 모든 기능이 필요하지는 않을 경우 ItemContainer를 사용하세요.
ItemContainer 사용
이 예제에서는 두 가지 ItemContainer 개체를 만들고 개체를 선택할 수 있도록 tapBehavior 속성을 toggleSelect로 설정합니다.
<div id="item1"
data-win-control="WinJS.UI.ItemContainer"
data-win-options="{tapBehavior: 'toggleSelect'}"
style="width: 300px;">
<div style="margin: 10px; padding: 10px; background-color: lightgray">
<div class="win-type-x-large"
style="margin-bottom: 5px;">
Banana
</div>
<img src="/images/60banana.png">
<div>Frozen yogurt</div>
</div>
</div>
<div id="item2"
data-win-control="WinJS.UI.ItemContainer"
data-win-options="{tapBehavior: 'toggleSelect'}"
style="width: 300px;">
<div style="margin: 10px; padding: 10px; background-color: lightgray">
<div class="win-type-x-large"
style="margin-bottom: 5px;">
Strawberry
</div>
<img src="/images/60Strawberry.png">
<div>Ice cream</div>
</div>
</div>
.png "두 가지 ItemContainer 개체")
ItemContainer를 Repeater 컨트롤과 함께 사용하여 List에서 항목을 생성할 수도 있습니다. Template 컨트롤 내부에 ItemContainer를 배치하기만 하면 됩니다.
<div id="itemTemplate" data-win-control="WinJS.Binding.Template">
<div
data-win-control="WinJS.UI.ItemContainer"
data-win-options="{tapBehavior: WinJS.UI.TapBehavior.toggleSelect}"
style="width: 300px;">
<div
style=" margin: 10px; padding: 10px; background-color: lightgray">
<div class="win-type-x-large"
style="margin-bottom: 5px;"
data-win-bind="textContent: title"></div>
<img src="#" data-win-bind="src: image">
<div data-win-bind="textContent: desc"></div>
</div>
</div>
</div>
<div data-win-control="WinJS.UI.Repeater"
data-win-options="{data: ItemContainerExample.flavorList,
template: select('#itemTemplate')}">
</div>
이 예제에서는 데이터 원본을 정의합니다.
(function () {
"use strict";
var basicList = new WinJS.Binding.List(
[
{ title: "Banana blast", desc: 'Frozen yogurt', image: '/images/60Banana.png' },
{ title: "Strawberry swirl", desc: 'Ice cream', image: '/images/60Strawberry.png' },
{ title: "Magnificant mint", desc: 'Frozen yogurt', image: '/images/60Mint.png' },
{ title: "Lemon lift", desc: 'Frozen yogurt', image: '/images/60Lemon.png' }
]);
WinJS.Namespace.define("ItemContainerExample",
{
flavorList: basicList
});
})();
.png "Repeater에서 생성된 ItemContainer 개체")
항목은 기본적으로 선택할 수 있습니다. 선택을 사용하지 않으려면 ItemContainer 컨트롤의 selectionDisabled 속성을 true로 설정합니다.
NavBar
[지금 HTML NavBar 컨트롤 샘플을 가져옵니다.]
Windows 8.1 및 Windows Library for JavaScript 2.0에서는 일관되고 예측 가능한 탐색 환경을 제공하는 데 도움이 되는 새로운 컨트롤인 WinJS.UI.NavBar 컨트롤을 제공합니다.
.jpg "데이터 소스에서 생성된 탐색 항목이 포함된 NavBar")
NavBar는 탐색 명령에만 사용되는 AppBar와 같습니다. 실제로 NavBar는 AppBar의 하위 클래스입니다. 간단한 링크 목록을 포함할 수 있으며, 범주로 구성된 여러 수준의 링크를 포함할 수 있습니다. 항목을 하드 코드하거나, 프로그래밍 방식으로 업데이트하거나, 데이터 바인딩을 사용하여 NavBar를 채울 수 있습니다.
NavBar는 사용자가 필요로 할 때 앱 화면 맨 위에 나타납니다. 사용자는 가장자리를 살짝 밀거나, Windows 로고 키+Z를 누르거나, 마우스 오른쪽 단추를 클릭하여 NavBar를 호출합니다.
NavBar는 세로 레이아웃 및 분할 탐색 항목(하위 탐색 옵션이 있는 탐색 항목)도 지원합니다. NavBar는 자유롭게 사용자 지정할 수 있습니다. CSS 스타일 시트를 사용하여 NavBar의 거의 모든 측면과 해당 콘텐츠의 스타일을 지정할 수 있으며, 사용자 지정 탐색 항목을 만들 수도 있습니다.
NavBar 만들기
NavBar에는 다음 세 가지 구성 요소가 있습니다.
NavBar 자체.
NavBarContainer 개체. 이 개체는 탐색 항목(NavBarCommand 개체)을 포함하며 페이지 매김과 이동 및 스크롤을 모두 지원합니다. 하나의 NavBar에 NavBarContainer 개체가 하나 이상 있을 수 있습니다. NavBarContainer 개체를 사용하여 탐색 옵션 그룹을 정의합니다.
하나 이상의 NavBarCommand 개체. 사용자가 탐색을 위해 클릭하는 항목입니다.
탐색을 사용하려면 NavBarCommand 개체의 location 속성을 설정합니다. 사용자가 명령을 클릭하면 WinJS.Navigation.navigated 이벤트가 발생합니다. 이 이벤트를 사용하여 지정된 위치로 이동합니다.
또는 NavBar에서 oninvoked에 대해 등록하고 이벤트 처리기를 사용하여 탐색 작업을 수행할 수 있습니다.
이 예제에서는 두 가지 탐색 항목이 포함된 간단한 NavBar를 보여 줍니다.
<div id="NavBar" data-win-control="WinJS.UI.NavBar">
<div id="GlobalNav" data-win-control="WinJS.UI.NavBarContainer">
<div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
label: 'Home',
icon: WinJS.UI.AppBarIcon.home,
location: '/html/home.html',
splitButton: false
}">
</div>
<div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
label: 'Your apps',
icon: WinJS.UI.AppBarIcon.favorite,
location: '/html/yourapps.html',
splitButton: false
}">
</div>
</div>
</div>
NavBar는 다음과 같이 표시됩니다.
.png "NavBar")
하위 NavBarCommand 개체가 포함된 NavBarCommand를 만들 수 있습니다. 이렇게 하려면 상위 NavBarCommand 개체의 splitButton 속성을 true로 설정하고 splittoggle 이벤트를 사용하여 하위 NavBarCommand 개체가 포함된 Flyout을 표시합니다. 첫 번째 부분에 대한 예제 코드는 다음과 같습니다.
<div id="useSplit" data-win-control="WinJS.UI.NavBar">
<div class="globalNav" data-win-control="WinJS.UI.NavBarContainer">
<div data-win-control="WinJS.UI.NavBarCommand"
data-win-options="{ label: 'Home', icon: 'url(../images/homeIcon.png)' }">
</div>
<div data-win-control="WinJS.UI.NavBarCommand"
data-win-options="{ label: 'Favorite', icon: WinJS.UI.AppBarIcon.favorite, splitButton: 'true' }">
</div>
<div data-win-control="WinJS.UI.NavBarCommand"
data-win-options="{ label: 'Your account', icon: WinJS.UI.AppBarIcon.people }">
</div>
</div>
</div>
<div id="contactFlyout" data-win-control="WinJS.UI.Flyout"
data-win-options="{ placement: 'bottom' }">
<div id="contactNavBarContainer" data-win-control="WinJS.UI.NavBarContainer"}">
<div data-win-control="WinJS.UI.NavBarCommand"
data-win-options="{ label: 'Family' }">
</div>
<div data-win-control="WinJS.UI.NavBarCommand"
data-win-options="{ label: 'Work' }">
</div>
<div data-win-control="WinJS.UI.NavBarCommand"
data-win-options="{ label: 'Friends' }">
</div>
<div data-win-control="WinJS.UI.NavBarCommand"
data-win-options="{ label: 'Blocked' }">
</div>
</div>
</div>
다음 예제에서는 HTML 페이지를 초기화하고 하위 NavBarCommand 개체가 포함된 Flyout을 표시하는 splittoggle 이벤트 처리기를 추가하는 코드를 보여 줍니다.
(function () {
"use strict";
var navcontainer;
var page = WinJS.UI.Pages.define("/html/6-UseSplitButton.html", {
ready: function (element, options) {
document.body.querySelector('#useSplit').addEventListener('invoked', this.navbarInvoked.bind(this));
document.body.querySelector('#contactNavBarContainer').addEventListener('invoked', this.navbarInvoked.bind(this));
var navBarContainerEl = document.body.querySelector('#useSplit .globalNav');
if (navBarContainerEl) {
this.setupNavBarContainer();
} else {
var navBarEl = document.getElementById('useSplit');
navBarEl.addEventListener('childrenprocessed', this.setupNavBarContainer.bind(this));
}
},
navbarInvoked: function (ev) {
var navbarCommand = ev.detail.navbarCommand;
WinJS.log && WinJS.log(navbarCommand.label + " NavBarCommand invoked", "sample", "status");
document.querySelector('select').focus();
},
setupNavBarContainer: function () {
var navBarContainerEl = document.body.querySelector('#useSplit .globalNav');
navBarContainerEl.addEventListener("splittoggle", function (e) {
var flyout = document.getElementById("contactFlyout").winControl;
var navbarCommand = e.detail.navbarCommand;
if (e.detail.opened) {
flyout.show(navbarCommand.element);
var subNavBarContainer = flyout.element.querySelector('.win-navbarcontainer');
if (subNavBarContainer) {
// Switching the navbarcontainer from display none to display block requires
// forceLayout in case there was a pending measure.
subNavBarContainer.winControl.forceLayout();
// Reset back to the first item.
subNavBarContainer.currentIndex = 0;
}
flyout.addEventListener('beforehide', go);
} else {
flyout.removeEventListener('beforehide', go);
flyout.hide();
}
function go() {
flyout.removeEventListener('beforehide', go);
navbarCommand.splitOpened = false;
}
});
}
});
})();
전체 코드를 보려면 HTML NavBar 샘플을 참조하세요.
분할 단추가 열려 있는 NavBar는 다음과 같이 표시됩니다.
.jpg "분할 NavBarCommand")
NavBarContainer를 데이터 소스에 바인딩할 수 있습니다. 이렇게 하려면 탐색 명령을 설명하는 데이터가 포함된 List를 만들고 이를 사용하여 NavBarContainer 개체의 data 속성을 설정합니다. 이 예제에서는 NavBarContainer에서 사용할 데이터를 정의합니다.
(function () {
"use strict";
var page = WinJS.UI.Pages.define("/html/2-UseData.html", {
init: function (element, options) {
var categoryNames = ["Picks for you", "Popular", "New Releases", "Top Paid", "Top Free",
"Games", "Social", "Entertainment", "Photo", "Music & Video",
"Sports", "Books & Reference", "News & Weather", "Health & Fitness", "Food & Dining",
"Lifestyle", "Shopping", "Travel", "Finance", "Productivity",
"Tools", "Secuirty", "Business", "Education", "Government"];
var categoryItems = [];
for (var i = 0; i < categoryNames.length; i++) {
categoryItems[i] = {
label: categoryNames[i]
};
}
Data.categoryList = new WinJS.Binding.List(categoryItems);
},
ready: function (element, options) {
document.body.querySelector('#useTemplate').addEventListener('invoked', this.navbarInvoked.bind(this));
},
navbarInvoked: function (ev) {
var navbarCommand = ev.detail.navbarCommand;
WinJS.log && WinJS.log(navbarCommand.label + " NavBarCommand invoked", "sample", "status");
document.querySelector('select').focus();
}
});
})();
다음 예제에서는 NavBar 및 NavBarContainer 개체를 만드는 HTML을 보여 줍니다.
<div id="useTemplate" data-win-control="WinJS.UI.NavBar">
<div class="globalNav" data-win-control="WinJS.UI.NavBarContainer">
<div data-win-control="WinJS.UI.NavBarCommand"
data-win-options="{ label: 'Home', icon: 'url(../images/homeIcon.png)' }">
</div>
<div data-win-control="WinJS.UI.NavBarCommand"
data-win-options="{ label: 'Favorite', icon: 'favorite' }"></div>
<div data-win-control="WinJS.UI.NavBarCommand"
data-win-options="{ label: 'Your account', icon: 'people' }"></div>
</div>
<div class="categoryNav"
data-win-control="WinJS.UI.NavBarContainer"
data-win-options="{ data: Data.categoryList, maxRows: 3 }">
</div>
</div>
전체 코드를 보려면 HTML NavBar 샘플을 참조하세요.
코드를 실행하면 이 NavBar가 생성됩니다.
여기에는 표시되지 않지만 WinJS.Binding.Template 개체를 데이터 원본과 함께 사용하여 탐색 모음 항목을 생성할 수도 있습니다.
Repeater
[지금 HTML Repeater 컨트롤 샘플을 가져옵니다.]
Repeater는 템플릿을 사용하여 데이터 집합에서 HTML 태그를 생성하는 간단하고 사용하기 쉬운 WinJS 컨트롤입니다. 템플릿에는 거의 모든 HTML 태그 및 WinJS 컨트롤이 포함될 수 있습니다. Repeater 컨트롤을 Repeater 컨트롤 내부에 중첩할 수도 있습니다.
Repeater를 사용하여 사용자 지정 목록 및 테이블을 생성합니다. 다음 예제에서는 Repeater를 통해 일기 예보를 만듭니다.
.jpg "Repeater 컨트롤")
Repeater는 ListView 컨트롤을 대체하지 않습니다. 보다 큰 유연성을 제공하지만, 데이터 항목 로드 방식 제어 같은 ListView의 몇몇 고급 기능을 제공하지 않습니다.
Repeater 사용
Repeater는 List에서 데이터를 생성합니다. 이 예제에서는 몇 가지 단순 항목이 포함된 List를 만듭니다.
(function () {
"use strict";
var basicList2 = new WinJS.Binding.List(
[
{ title: "Item 1" },
{ title: "Item 2" },
{ title: "Item 3" },
{ title: "Item 4" }
]);
WinJS.Namespace.define("RepeaterExample",
{
basicList: basicList2
});
})();
Repeater가 생성하는 태그를 지정하려면 template을 정의합니다. 태그를 사용하여 템플릿을 만들거나 템플릿 함수를 사용할 수 있습니다. 이 예제에서는 태그를 사용하여 템플릿을 만듭니다. 데이터가 데이터 원본의 제목 필드를 li 요소의 텍스트 콘텐츠에 바인딩합니다.
<div id="listTemplate" data-win-control="WinJS.Binding.Template">
<li data-win-bind="textContent: title"></li>
</div>
다음 예제에서는 Repeater 자체를 만듭니다.
<ul data-win-control="WinJS.UI.Repeater"
data-win-options="{data: RepeaterExample.basicList,
template: select('#listTemplate')}">
</ul>
앱을 실행하면 Repeater가 데이터 목록의 각 요소에 대해 li 요소를 생성합니다.
.jpg "Repeater 컨트롤에서 생성된 목록")
WebView 및 SmartScreen
[지금 HTML WebView 컨트롤 샘플을 가져옵니다.]
Windows 8에서는 iframe 요소를 사용하여 웹 기반 콘텐츠를 호스트하지만 많은 콘텐츠 분리 및 탐색 기능을 제공하지 않습니다. Windows 8.1에서는 앱에서 웹 기반 콘텐츠를 훨씬 더 쉽게 호스트할 수 있는 새로운 WebView 컨트롤을 제공합니다.
웹 기반 콘텐츠를 표시하는 데 iframe을 사용하는 것에 비해 WebView가 제공하는 몇 가지 향상된 기능은 다음과 같습니다.
HTML5 지원
WebView에서 호스트되는 페이지를 통해 대부분의 HTML5 기능에 액세스할 수 있습니다. 그러나 WebView는 IndexedDB, HTML5 app cache, 지리적 위치 API 또는 Clipboard API에 액세스할 수 없습니다.
향상된 탐색 지원
WebView는 자체적인 별도의 기록 스택을 포함하고 있으며 앞으로 및 뒤로 이동하고 현재 페이지를 다시 로드하기 위한 여러 가지 메서드를 제공합니다.
프레임 내에서 작동하지 않는 사이트 지원
WebView를 사용하여 콘텐츠 로드
WebView 컨트롤을 만들려면 x-ms-webview 요소를 만듭니다.
<x-ms-webview id="webview">
</x-ms-webview>
WebView를 사용하여 다음과 같은 다양한 방법으로 콘텐츠를 로드할 수 있습니다.
WebView 컨트롤의 src 속성, navigate 메서드 또는 navigateWithHttpRequestMessage 메서드를 사용하여 URI로 이동합니다. 이 예제에서는 src 속성을 사용하여 URI로 이동합니다.
<x-ms-webview id="webview" src="https://go.microsoft.com/fwlink/p/?LinkID=294155" style="width: 400px; height: 400px;"> </x-ms-webview>navigateToString 메서드를 사용하여 HTML의 임의 문자열을 로드합니다.
var htmlString = "<!DOCTYPE html>" + "<html>" + "<head><title>Simple HTML page</title></head>" + "<body>" + "<h1>Hi!</h1>" + "<p>This is a simple HTML page.</p>" + "</body>" + "</html>"; document.getElementById("webview").navigateToString( htmlString);navigate 메서드를
ms-appdata://프로토콜과 함께 사용하여 앱의 상태 폴더에 저장된 HTML 콘텐츠를 로드할 수 있습니다.document.getElementById("webview").navigate( "ms-appdata:///local/NavigateToState/simple_example.html");HTML 기반 파일 형식의 경우 WebView 컨트롤에서 기본적으로 렌더링할 수 없는 암호화된 HTML 콘텐츠의 경우와 같이 필요할 때 상대 참조를 스트림하는 것이 유용할 수 있습니다. buildLocalStreamUri 및 navigateToLocalStreamUri 메서드를 사용하여 스트림에서 콘텐츠를 표시합니다. (IUriToStreamResolver 인터페이스를 사용하는 사용자 지정 Windows 런타임 개체를 구현해야 합니다.)
var contentUri = document.getElementById("webview").buildLocalStreamUri( "NavigateToStream", "simple_example.html"); var uriResolver = new SDK.WebViewSampleCS.StreamUriResolver(); document.getElementById("webview").navigateToLocalStreamUri(contentUri, uriResolver);
전체 예제를 보려면 HTML WebView 샘플을 참조하세요.
ListView에 대한 끌어 놓기 지원
[지금 HTML ListView 끌어서 놓기 및 다시 정렬 샘플을 가져옵니다.]
Windows Library for JavaScript 2.0을 사용하면 ListView가 끌어서 놓기 작업에 대한 지원을 추가합니다. 이 새로운 지원은 HTML 5 끌어서 놓기 기능과 호환됩니다. 두 개의 ListView 컨트롤 사이, ItemContainer와 ListView 사이 및 HTML 요소와 ListView 사이에서 끌어서 놓을 수 있습니다. 사용자가 항목을 ListView의 특정 위치로 끌어서 놓게 하거나, 새 항목이 추가된 후 ListView에서 항목을 다시 정렬하는 등의 방법으로 끌어서 놓은 항목이 삽입되는 위치를 제어할 수 있습니다.
ListView에서 항목 끌어 놓기
ListView에서 HTML 5 놓기 대상으로 항목 끌어서 놓기를 사용하려면 다음과 같이 합니다.
ListView의 itemsDraggable 속성을 true로 설정합니다.
ListView 컨트롤의 itemdragstart 이벤트를 처리합니다. 이벤트 처리기를 통해 이벤트 개체의 detail 속성에서 dataTransfer 개체를 가져옵니다. dataTransfer 개체의 setData 메서드를 사용하여 데이터 전송 방식과 전송할 데이터를 지정합니다.
놓기 대상의 dragover 이벤트를 처리합니다. 이벤트 처리기에서 event 개체의 preventDefault 메서드를 사용하여 놓기를 수락하고 있음을 시스템에 알립니다. 그렇지 않으면 끌기 작업이 놓기 대상에서 수락되지 않습니다.
놓기 대상의 drop 이벤트를 처리합니다. 이벤트 처리기를 통해 이벤트 개체의 detail 속성에서 dataTransfer 개체를 가져옵니다. dataTransfer 개체의 getData 속성을 사용하여 전송되는 데이터를 검색합니다. 이 데이터를 사용하여 놓기 대상을 업데이트합니다. 선택한 텍스트 및 img 요소 같이 앱에서 기본적으로 끌어 놓을 수 있는 요소의 끌기는 허용하지 않아야 합니다.
다음 일련의 예제에서는 ListView에서 항목을 끌어서 놓을 수 있게 하는 방법을 보여 줍니다. 첫 번째 예제에서는 HTML 태그를 정의합니다.
<div id="myDropTarget" class="DnDItem">
<div id="myTargetContents">
<p>
HTML 5 Drop Target
</p>
<br />
<div id="myPlusSign" class="drop-ready">+ </div>
<br />
<p>
Drop Items Here
</p>
</div>
</div>
<!-- Simple template for the ListView instantiation -->
<div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div class="smallListIconTextItem">
<img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" draggable="false" />
<div class="smallListIconTextItem-Detail">
<h4 data-win-bind="innerText: title"></h4>
<h6 data-win-bind="innerText: text"></h6>
</div>
</div>
</div>
<!-- The declarative markup necessary for ListView instantiation -->
<!-- Call WinJS.UI.processAll() in your initialization code -->
<div id="listView"
class="win-selectionstylefilled"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: myData.dataSource,
selectionMode: 'none',
itemTemplate: smallListIconTextTemplate,
itemsDraggable: true,
layout: { type: WinJS.UI.GridLayout }
}">
</div>
다음은 끌어 놓기 작업에 대한 CSS입니다.
.drop-ready #myPlusSign
{
opacity: 1;
}
#myPlusSign
{
font-size:100px;
font-weight:bolder;
color: blue;
opacity: 0;
}
다음 예제에서는 끌어서 놓기 기능을 사용하는 코드를 보여 줍니다.
(function () {
"use strict";
var page = WinJS.UI.Pages.define("/html/scenario2.html", {
ready: function (element, options) {
listView.addEventListener("itemdragstart", function (eventObject) {
eventObject.detail.dataTransfer.setData("Text", JSON.stringify(eventObject.detail.dragInfo.getIndices()));
});
var dropTarget = element.querySelector("#myDropTarget");
dropTarget.addEventListener("dragover", function (eventObject) {
// Allow HTML5 drops.
eventObject.preventDefault();
});
dropTarget.addEventListener("dragenter", function (eventObject) {
WinJS.Utilities.addClass(dropTarget, "drop-ready");
});
dropTarget.addEventListener("dragleave", function (eventObject) {
WinJS.Utilities.removeClass(dropTarget, "drop-ready");
});
dropTarget.addEventListener("drop", function (eventObject) {
// Get indicies -> keys of items that were trashed, and remove from datasource.
WinJS.Utilities.removeClass(dropTarget, "drop-ready");
var indexSelected = JSON.parse(eventObject.dataTransfer.getData("Text"));
var listview = document.querySelector("#listView").winControl;
var ds = listview.itemDataSource;
ds.itemFromIndex(indexSelected[0]).then(function (item) {
WinJS.log && WinJS.log("You dropped the item at index " + item.index + ", "
+ item.data.title, "sample", "status");
});
});
}
});
})();
전체 코드를 보려면 HTML ListView 끌어 놓기 및 다시 정렬 샘플을 참조하세요.
항목을 ListView로 끌어 놓기
요소를 ListView 내의 특정 위치로 끌어 놓으려면 다음과 같이 합니다.
HTML 요소(끌기 원본)의 draggable 속성을 true로 설정합니다.
놓기 대상의 dragstart 이벤트를 처리합니다. 이벤트 처리기를 통해 이벤트 개체에서 dataTransfer 개체를 가져옵니다. dataTransfer 개체의 setData 메서드를 사용하여 데이터 전송 방식과 전송할 데이터를 지정합니다.
ListView 컨트롤의 itemdragenter 이벤트를 처리합니다. 이벤트 처리기에서 event 개체의 preventDefault 메서드를 사용하여 놓기를 수락하고 있음을 시스템에 알립니다. 그렇지 않으면 끌기 작업으로 인해 예측할 수 없는 결과가 발생할 수 있습니다.
ListView 컨트롤의 itemdragdrop 이벤트를 처리합니다. 이벤트 처리기를 통해 이벤트 개체의 detail 속성에서 dataTransfer 개체를 가져옵니다. dataTransfer 개체의 getData 속성을 사용하여 전송되는 데이터를 검색합니다. 이 데이터를 사용하여 ListView를 업데이트합니다.
다음 일련의 예제에서는 항목을 ListView로 끌어 놓을 수 있게 하는 방법을 보여 줍니다. 첫 번째 예제에서는 HTML 태그를 정의합니다.
<div id="myDragSource" class="DnDItem">
<div id="mySourceContents">
<p>
HTML 5 Drag Source
</p>
<br />
<br />
<br />
<div id="myDragContent" class="smallListIconTextItem" draggable="true">
<img id="myImg" src="/images/60Tree.png" class="smallListIconTextItem-Image" draggable="false" />
<div class="smallListIconTextItem-Detail">
<h4 id="myItemTitle">Drag Me</h4>
</div>
</div>
</div>
</div>
<!-- Simple template for the ListView instantiation -->
<div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div class="smallListIconTextItem">
<img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" draggable="false" />
<div class="smallListIconTextItem-Detail">
<h4 data-win-bind="innerText: title"></h4>
<h6 data-win-bind="innerText: text"></h6>
</div>
</div>
</div>
<!-- The declarative markup necessary for ListView instantiation -->
<!-- Call WinJS.UI.processAll() in your initialization code -->
<div id="listView"
class="win-selectionstylefilled"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: myData.dataSource,
selectionMode: 'none',
itemTemplate: smallListIconTextTemplate,
itemsReorderable: true,
layout: { type: WinJS.UI.GridLayout }
}">
</div>
다음 예제에서는 끌어서 놓기 기능을 사용하는 코드를 보여 줍니다.
(function () {
"use strict";
var page = WinJS.UI.Pages.define("/html/scenario3.html", {
ready: function (element, options) {
myDragContent.addEventListener("dragstart", function (eventObject) {
var dragData = { sourceElement: myDragContent.id, data: myItemTitle.innerText, imgSrc: myImg.src };
eventObject.dataTransfer.setData("Text", JSON.stringify(dragData));
});
listView.addEventListener("itemdragenter", function (eventObject) {
if (eventObject.detail.dataTransfer.types.contains("Text")) {
eventObject.preventDefault();
}
});
listView.addEventListener("itemdragdrop", function (eventObject) {
var dragData = JSON.parse(eventObject.detail.dataTransfer.getData("Text"));
if (dragData && dragData.sourceElement === myDragContent.id) {
var newItemData = { title: dragData.data, text: ("id: " + dragData.sourceElement),
picture: dragData.imgSrc };
// insertAfterIndex tells us where in the list to add the new item.
// If we're inserting at the start, insertAfterIndex is -1.
// Adding 1 to insertAfterIndex gives us the nominal index in the array to insert the new item.
myData.splice(eventObject.detail.insertAfterIndex + 1, 0, newItemData);
} else {
// Throw error that illegal content was dropped.
}
});
}
});
})();
전체 코드를 보려면 HTML ListView 끌어 놓기 및 다시 정렬 샘플을 참조하세요.
ListView에서 항목 다시 정렬
콘텐츠를 다시 정렬할 수 있으면 사용자는 무엇이든 할 수 있다고 생각하게 됩니다. 새로운 itemsReorderable 속성을 사용하면 사용자가 ListView에서 항목 순서를 쉽게 변경할 수 있습니다. 사용자가 ListView 내부에서 항목을 끌게 하려면 itemsReorderable을 true로 설정하세요. 다른 코드가 필요하지 않습니다.
참고 그룹화된 ListView에서 항목을 완전히 다시 정렬할 수 있게 하려면 itemdragdrop 이벤트에 응답하고 항목을 올바른 위치로 적절하게 삽입해야 합니다.
참고 다시 정렬이 작동하려면 데이터 원본이 다시 정렬 기능을 지원해야 합니다.
이 예제에서는 항목 다시 정렬을 지원하는 ListView를 만듭니다.
<style type="text/css">
.win-listview {
margin: 20px;
border: 2px solid gray;
Width: 500px;
}
.standardItem {
width: 150px;
height: 150px;
background-color: #0aaddd;
padding: 5px;
}
</style>
<div id="template" data-win-control="WinJS.Binding.Template">
<div class="standardItem" data-win-bind="textContent: title" ></div>
</div>
<div
id="reorderableListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: ListViewExamples.dataList.dataSource,
itemTemplate: select('#template'),
layout: {type: WinJS.UI.GridLayout},
itemsReorderable: true
}">
</div>
다음 예제에서는 ListView가 사용하는 데이터 원본을 정의합니다.
(function () {
"use strict";
var dataList =
new WinJS.Binding.List(
[{ title: "Item 1" },
{ title: "Item 2" },
{ title: "Item 3" },
{ title: "Item 4" }]);
WinJS.Namespace.define("ListViewExamples",
{
dataList: dataList
})
})();
코드가 실행될 때 사용자가 ListView 항목을 끌어서 놓음으로써 항목을 다시 정렬할 수 있습니다.
.png "ListView 다시 정렬")
새 ListView 레이아웃: CellSpanningLayout
JavaScript용 Windows 라이브러리 1.0에서는 ListView에 여러 크기의 항목을 포함하려면 GridLayout을 사용합니다. Windows Library for JavaScript 2.0의 경우 여러 크기의 그리드를 만드는 데만 사용되는 새로운 레이아웃인 CellSpanningLayout이 추가되었습니다.
이 예제에서는 CellSpanningLayout을 사용하는 ListView에 대한 itemInfo 및 groupInfo 메서드와 데이터 원본을 정의합니다. ListView에서는 높이가 510픽셀인 첫 번째 항목을 제외하고 모든 항목의 크기가 250 x 250 픽셀입니다.
(function () {
"use strict";
var unorderedList =
new WinJS.Binding.List(
[{ title: "Item 1", cssClass: "tallItem" },
{ title: "Item 2", cssClass: "standardItem" },
{ title: "Item 3", cssClass: "standardItem" },
{ title: "Item 4", cssClass: "standardItem" }]);
function myItemInfo(itemIndex) {
var size = { width: 250, height: 250 };
if (itemIndex === 0) {
size.height = 510;
}
return size;
};
function myGroupInfo(groupInfo) {
return {
enableCellSpanning: true,
cellWidth: 250,
cellHeight: 250
};
};
WinJS.Utilities.markSupportedForProcessing(myItemInfo);
WinJS.Utilities.markSupportedForProcessing(myGroupInfo);
WinJS.Namespace.define("ListViewExamples",
{
unorderedList: unorderedList,
myItemInfo: myItemInfo,
myGroupInfo: myGroupInfo
})
})();
다음 예제에서는 ListView 및 WinJS.Binding.Template을 만들기 위한 HTML을 보여 줍니다.
<style type="text/css">
.win-listview {
margin: 5px;
border: 2px solid gray;
}
.standardItem {
width: 250px;
height: 250px;
background-color: #999999;
padding: 5px;
}
.tallItem {
width: 250px;
height: 510px;
background-color: #0aaddd;
padding: 5px;
}
</style>
<div id="template" data-win-control="WinJS.Binding.Template">
<div data-win-bind="className: cssClass; textContent: title" ></div>
</div>
<div
id="cellSpanningListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: ListViewExamples.unorderedList.dataSource,
itemTemplate: select('#template'),
layout: {type: WinJS.UI.CellSpanningLayout,
itemInfo: ListViewExamples.myItemInfo,
groupInfo: ListViewExamples.myGroupInfo}
}">
</div>
ListView는 다음과 같이 표시됩니다.
.jpg "CellSpanningLayout을 사용하는 ListView")
기타 ListView 업데이트
Windows 8.1에서는 ListView 컨트롤에 대한 훨씬 더 향상된 기능을 제공합니다.
머리글에 대한 향상된 접근성
그룹화된 ListView의 머리글은 이제 키보드 탐색과 키보드 및 마우스 조작을 지원합니다. 이 새로운 기능을 사용하려면 코드를 변경하지 않아야 합니다.
그룹 만들기에 대한 자세한 내용은 ListView에서 항목을 그룹화하는 방법을 참조하세요.
참고 머리글에 링크나 단추를 포함하여 Windows Library for JavaScript 1.0에서 머리글을 호출할 수 있게 설정하면 Windows Library for JavaScript 2.0으로 전환할 경우 사용자가 키보드로 머리글을 호출할 수 없습니다. 이 문제를 해결하려면 단추나 링크를 사용하지 않고 ongroupheaderinvoked 이벤트를 처리하고 이를 사용하여 머리글 작업을 수행합니다.
레이아웃 인터페이스 업데이트
ListView에는 사용자 지정 레이아웃을 더 쉽게 만드는 데 사용되는 새로운 레이아웃 인터페이스인 ILayout2 및 ISiteLayout2가 포함됩니다. 이러한 인터페이스를 구현하면 표준 CSS 레이아웃을 구현의 일부로 사용할 수 있습니다.
ListLayout 및 GridLayout 업데이트
ListLayout 및 GridLayout을 업데이트하여 전체 성능, 특히 이동 성능을 향상시켰습니다. 이 향상된 기능을 이용하려면 코드를 변경하지 않아야 합니다.
기타 WinJS 업데이트
Binding 맟 WinJS.Binding.Template 업데이트
Windows Library for JavaScript 2.0은 Template 개체 처리에 새롭고 더 효율적인 시스템을 사용하고 성능을 크게 향상시킵니다. 새 시스템에서 데이터 바인딩 및 컨트롤 인스턴스화는 JavaScript용 Windows 라이브러리 1.0에서 수행된 것처럼 직렬이 아니라 더 유연한 병렬 프로세스로 수행됩니다. 코드가 레거시 직렬 처리 동작을 사용하는 경우 더 빠른 템플릿 처리를 활용하기 위해 코드를 변경하는 것이 좋습니다. 그러나 코드를 변경할 수 없는 경우에는 disableOptimizedProcessing 속성을 사용하여 이전 동작을 복원할 수 있습니다.
Dispose API
Dispose 모델은 메모리 누출을 방지하기 위해 요소와 컨트롤이 수명이 끝날 때 자원을 해제할 수 있는 새로운 패턴입니다. 요소 또는 컨트롤이 선택적으로 이 패턴을 구현할 수 있습니다. 릴리스할 리소스가 있는 JavaScript용 Windows 라이브러리 2.0 컨트롤이 이 API를 구현합니다.
Dispose 모델을 이용하려면 페이지를 벗어나거나 앱이 종료되는 경우 같이 컨트롤이 더 이상 필요하지 않을 경우 컨트롤의 dispose 메서드를 호출합니다.