설정을 바로 커밋하는 방법

아티클
12/11/2015

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

Windows 스토어 앱에서 모든 설정은 사용자가 해당 값을 변경하는 즉시 적용됩니다. 이 모델은 사용자가 WinJS 설정 플라이아웃 및 로컬 응용 프로그램 데이터를 사용하여 즉시 설정을 커밋하는 과정을 보여 줄 수 있으므로 중요합니다.

사전 요구 사항

앱 설정에 대한 지침을 참조하세요.

설정 참 메뉴에 설정 플라이아웃 추가

설정 플라이아웃을 추가하는 방법에 대한 자세한 내용은 빠른 시작: JavaScript용 Windows 라이브러리를 사용하여 앱 설정 추가를 참조하세요. 다음은 요약 정보입니다.

다음과 같이 설정 플라이아웃에 대한 HTML을 정의합니다.

<div aria-label="App Settings Flyout" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{settingsCommandId:'settingsExample', width:'narrow'}">
<!-- Add the background color matching you app tile color to the Settings flyout header. -->
<!-- Use add the win-ui-dark class if the background color requires a white text  -->
<!-- Add the app small logo to the Settings flyout header                         -->
    <div class="win-header win-ui-light" style="background-color: #dbf9ff;">
        <button class="win-backbutton" onclick="WinJS.UI.SettingsFlyout.show()" type="button"></button>
     <div class="win-label">Example</div>
     <img alt="smalllogo" src="/images/smalllogo.png" style="height: 30px; width: 30px; position: absolute; right: 40px;"/>
    </div>
    <div class="win-content">
    <!—Your settings contents go here -->
    </div>
</div>

다음과 같이 설정 참 메뉴에 설정 플라이아웃을 연결합니다.

WinJS.Application.onsettings = function (e) {
    e.detail.applicationcommands = {
        "settingsExample": { title: "Example" }
    };
    WinJS.UI.SettingsFlyout.populateSettings(e);
};

플라이아웃에 컨트롤 추가

이 예제에서는 설정 플라이아웃에 전환 컨트롤과 선택 컨트롤을 추가합니다. 이러한 컨트롤은 설정에 가장 일반적인 두 컨트롤입니다.

<div class="win-content">
    <div class="win-settings-section">
        <h3>Example settings section</h3>
        <p>Description: toggle and select are common settings controls</p>
        <div id="settingsToggle" data-win-control="WinJS.UI.ToggleSwitch" 
             data-win-options="{title:'Example toggle switch', 
             onchange: settingsToggleChange}"></div>
    </div>
    <div class="win-settings-section">
        <h3>Select control</h3>
        <p>Select controls let users select an item from a set of text only items.</p>
        <label>Example select control</label>
        <select id="settingsSelect" aria-label="Example select control">
            <option value="1">Value 1</option>
            <option value="2">Value 2</option>
            <option value="3">Value 3</option>
            <option value="4">Value 4</option>
        </select>
    </div>
</div>

참고

settingsToggle에 대한 data-win-options에 onchange 이벤트 옵션을 추가했습니다. 따라서 ToggleSwitch 컨트롤에 대해 onchange 이벤트가 등록됩니다. 자세한 내용은 토글 스위치에 대한 지침을 참조하세요.
설정은 win-settings-section CSS 클래스에서 래핑되며 권장 요소를 사용하여 설정 지침과 일치하는 스타일을 얻습니다(앱 설정에 대한 지침 참조).

로컬 앱 데이터 저장소에서 컨트롤 초기화

이 예제에서는 로컬 응용 프로그램 데이터 저장소를 사용합니다. 사용자가 설정 플라이아웃을 호출할 때마다 응용 프로그램 데이터에서 값을 읽어 UI의 컨트롤에 최신 값이 반영되도록 합니다.

function initSettingsControls() {
    // Initialize the toggle control using the current value of settingsToggleValue in the local state store
    var toggleControl = document.getElementById("settingsToggle").winControl;
    toggleControl.checked = (Windows.Storage.ApplicationData.current.localSettings.values["settingsToggleValue"] === "on");

    // Initialize the select control using the current value of settingsSelectValue in the locale state store
    var selectControl = document.getElementById("settingsSelect");
    var settingsSelectValue = Windows.Storage.ApplicationData.current.localSettings.values["settingsSelectValue"];
    for (var i = 0; i < selectControl.options.length; i++) {
        if (selectControl.options(i).value === settingsSelectValue) {
            selectControl.selectedIndex = i;
            break;
        }
    }

    // Add event listener for change event on select control
    selectControl.addEventListener("change", settingsSelectChange, false);
}

참고

DOM이 로드되고 WinJS 컨트롤이 초기화된 후 컨트롤 초기화가 발생되도록 합니다. 자체 HTML 페이지에 정의된 설정 플라이아웃을 사용할 경우에는 페이지의 컨트롤 준비가 된 메서드를 호출하여 설정 플라이아웃을 사용할 준비가 되도록 해야 합니다.
이 예제에서는 로컬 응용 프로그램 데이터 저장소를 사용합니다. 로밍 응용 프로그램 데이터 저장소를 사용하여 설정이 자동으로 로밍되도록 할 수 있습니다. 자세한 내용은 응용 프로그램 데이터 로밍에 대한 지침을 참조하세요.

설정 컨트롤에 대한 변경 이벤트 처리

실제로 인스턴트 커밋이 수행되는 위치입니다. 사용자가 컨트롤과 연관된 값을 변경하면 바로 새 값을 응용 프로그램 데이터 저장소에 기록합니다. 이 작업은 컨트롤과 연관된 onchange 이벤트 처리기에서 수행됩니다.

function settingsToggleChange() {
    var toggleControl = document.getElementById("settingsToggle").winControl;
    // Write new value to the local state store
    Windows.Storage.ApplicationData.current.localSettings.values["settingsToggleValue"] = (toggleControl.checked ? "on" : "off");
}

// To protect against untrusted code execution, all functions are required 
// to be marked as supported for processing before they can be used inside 
// a data-win-options attribute in HTML markup.
WinJS.Utilities.markSupportedForProcessing(settingsToggleChange);

function settingsSelectChange(changedEvent) {
    // Write new value to the local state store
    Windows.Storage.ApplicationData.current.localSettings.values["settingsSelectValue"] = changedEvent.target.options.value;
}

요약

이 빠른 시작에서는 설정 업데이트를 바로 커밋하는 방법을 살펴보았습니다.

다음을 통해 공유