설정을 바로 커밋하는 방법
[ 이 문서는 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;
}
요약
이 빠른 시작에서는 설정 업데이트를 바로 커밋하는 방법을 살펴보았습니다.