빠른 시작: JavaScript용 Windows 라이브러리를 사용한 앱 설정 추가
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
이 빠른 시작에서는 HTML과 JavaScript용 Windows 라이브러리를 위한 SettingsFlyout 클래스를 사용하여 설정 계약을 구현하는 방법에 대해 설명합니다.
앱 기능 전체 프로세스 시리즈의 일부로 이 기능의 작동 방법을 살펴보세요.: Windows 스토어 앱 UI 전체 프로세스
소개
다음 예제에서는 두 개의 서로 다른 HTML 파일에서, 두 개의 설정 플라이아웃, 기본값 및 도움말을 정의하게 됩니다. JavaScript를 사용하여 설정 플라이아웃을 처리하고 설정 창도 채웁니다.
사전 요구 사항
앱 설정에 대한 지침을 참조하세요.
1. 빈 앱 만들기
"Hello, world" 앱 만들기에 설명된 대로 "Hello World" 빈 앱을 만듭니다. 처음 두 단계만 완료하면 됩니다.
- Visual Studio에서 새 프로젝트를 만듭니다.
- 앱을 시작합니다.
2. 기본 설정 플라이아웃 정의
Visual Studio에서 DefaultSettings.html이라는 HTML 파일을 만듭니다.
- 솔루션 탐색기 창에서 "HelloWorld" 솔루션 아래의 HelloWorld 프로젝트를 마우스 오른쪽 단추로 클릭합니다.
- 추가, 새 폴더를 선택합니다.
- 새 폴더의 이름을 "html"로 지정합니다.
- 폴더를 마우스 오른쪽 단추로 클릭하고 추가, **새 HTML 파일...**을 선택합니다.
- HTML 페이지를 선택하고 이름을 "DefaultSettings.html"로 입력한 다음 추가를 클릭합니다.
다음 내용을 복사하여 새 파일의 내용에 붙여넣습니다.
<!doctype HTML>
<html>
<head>
<title>App defaults Settings flyout</title>
</head>
<body>
<!-- BEGINTEMPLATE: Template code for an empty Help Flyout. -->
<!-- Each Settings flyout should be defined in its own HTML file. -->
<!-- Set the width to 'narrow' (346px) or 'wide' (646px). -->
<!-- Set the background color for the header to the background color defined for your
app tile in the manifest. -->
<div id="defaultsDiv" data-win-control="WinJS.UI.SettingsFlyout" aria-label="App defaults Settings flyout"
data-win-options="{settingsCommandId:'help',width:'narrow'}">
<div class="win-header" style="background-color:#464646">
<button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
<div class="win-label">Defaults</div>
<img src="ms-appx:///images/smalllogo.png" style="position: absolute; right: 40px;" />
</div>
<div class="win-content">
{App defaults content goes here}
</div>
</div>
<!-- ENDTEMPLATE -->
</body>
</html>
3. 도움말 플라이아웃 정의
"html" 폴더 아래에 HelpUI.html이라는 HTML 파일을 추가로 만듭니다.
다음 내용을 복사하여 새 파일의 내용에 붙여넣습니다.
<!doctype HTML>
<html>
<head>
<title>Help Settings flyout</title>
</head>
<body>
<!-- BEGINTEMPLATE: Template code for an empty Help Flyout. -->
<!-- Each Settings flyout should be defined in its own HTML file. -->
<!-- Set the width to 'narrow' (346px) or 'wide' (646px). -->
<!-- Set the background color for the header to the background color defined for your
app tile in the manifest. -->
<div id="helpDiv" data-win-control="WinJS.UI.SettingsFlyout" aria-label="Help Settings flyout"
data-win-options="{settingsCommandId:'help',width:'narrow'}">
<div class="win-header" style="background-color:#464646">
<button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
<div class="win-label">Help</div>
<img src="ms-appx:///images/smalllogo.png" style="position: absolute; right: 40px;" />
</div>
<div class="win-content">
{Help content goes here}
</div>
</div>
<!-- ENDTEMPLATE -->
</body>
</html>
4. 설정 창 채우기
default.js에 다음 JavaScript를 추가하여 설정 플라이아웃을 처리하고 설정 창도 채웁니다. DOM이 초기화된 후 실행되도록 onactivated 함수 내에 새 코드를 배치합니다.
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
// BEGIN BLOCK OF NEW CODE
// Populate Settings pane and tie commands to Settings flyouts.
WinJS.Application.onsettings = function (e) {
e.detail.applicationcommands = {
"defaultsDiv": { href: "html/DefaultSettings.html", title: "App defaults" },
"helpDiv": { href: "html/HelpUI.html", title: "Help" }
};
WinJS.UI.SettingsFlyout.populateSettings(e);
}
// END OF BLOCK
}
};
요약
이 빠른 시작에서는 HTML과 WinJS를 사용하여 설정 계약을 설정하는 방법을 배웠습니다.
관련 항목
샘플
참조
문서