빠른 시작: 앱 도움말 추가(HTML)

아티클
12/11/2015

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

이 빠른 시작에서는 HTML과 JavaScript용 Windows 라이브러리(WinJS)를 위한 SettingsFlyout 개체를 사용하여 설정 창에 도움말 플라이아웃을 추가하는 방법을 보여 줍니다. 전체 앱에서 도움말 플라이아웃을 보려면 앱 설정 샘플을 참조하세요.

다음 예제에서는 HTML 파일(HelpUI.html)에 Help라는 설정 플라이아웃을 정의합니다. 그런 다음 설정 플라이아웃을 초기화하고 JavaScript를 사용하여 설정 창을 채웁니다.

C#/Visual Basic/C++ 및 XAML을 사용하는 경우Quickstart: Add app help (Windows Store apps using C++, C#, or VB and XAML)를 참조하세요.

사전 요구 사항

앱 도움말에 대한 지침 및 앱 설정에 대한 지침을 읽어 보세요.

지침

1. 도움말 플라이아웃을 정의합니다.

"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 data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" to create 
         a wide flyout. -->
    <!-- Set the background color for the header to the background color defined
         for your app tile in the manifest. -->
    <div data-win-control="WinJS.UI.SettingsFlyout"
         data-win-options="{settingsCommandId:'helpDiv', width:'wide'}">
        <div class="win-ui-dark win-header" title="Help">
            <button type="button" 
                    onclick="WinJS.UI.SettingsFlyout.show()"
                    class="win-backbutton"></button>
            <div class="win-label">Help</div>
        </div>
        <div class="win-content">
            <!-- Help content here -->
        </div>
    </div>
    <!-- ENDTEMPLATE -->
</body>
</html>

참고 기본적으로 이 플라이아웃은 너비가 "narrow"(346px)입니다. 와이드 플라이아웃(646px)을 만들려면 data-win-options="{settingsCommandId:'helpDiv', width:'wide'}"를 설정합니다.

2. 설정 플라이아웃을 처리하고 설정 창을 채웁니다.

다음 코드는 설정 플라이아웃을 처리하고 JavaScript를 사용하여 SettingsPane을 채웁니다. 앱을 활성화할 때 이 함수를 호출합니다.

function initializeSettings() {
    // Initialize Settings flyout(s) and WinJS controls.
    WinJS.UI.processAll();
    
    // Populate Settings pane and tie commands to Settings flyouts.
    WinJS.Application.onsettings = function (e) {
        e.detail.applicationcommands = {
            "helpDiv": { href: "HelpUI.html", title: "Help"}
        };
        WinJS.UI.SettingsFlyout.populateSettings(e);
    }
    WinJS.Application.start();
}

참고 DOM이 초기화된 후 이 함수를 호출해야 합니다. 그러나 onactivated 함수에서 initializeSettings를 호출하는 경우에는 DOM 초기화에 대해 염려하지 마세요. DOMContentLoaded 이벤트 뒤에 activated 이벤트가 발생합니다. 자세한 내용은 앱의 수명 주기 최적화(JavaScript 및 HTML로 작성한 Windows 스토어 앱)를 참조하세요.

요약 및 다음 단계

이 빠른 시작에서는 HTML과 JavaScript용 Windows 라이브러리를 사용하여 설정 창에 앱 도움말을 추가하는 방법에 대해 알아보았습니다.

이제 iframe을 사용해 도움말 페이지에 온라인 도움말을 포함하는 방법을 배울 수 있습니다.

도움말에 온라인 콘텐츠를 포함하는 방법

빠른 시작: 앱 도움말 추가(HTML)

사전 요구 사항

지침

1. 도움말 플라이아웃을 정의합니다.

2. 설정 플라이아웃을 처리하고 설정 창을 채웁니다.

요약 및 다음 단계

관련 항목

추가 리소스