빠른 시작: JavaScript용 Windows 라이브러리를 사용한 앱 설정 추가

아티클
12/11/2015

[ 이 문서는 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를 사용하여 설정 계약을 설정하는 방법을 배웠습니다.

Share via