WinJS 컨트롤을 지역화하는 방법(HTML)

아티클
01/28/2016

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

WinJS 컨트롤의 레이블과 아이콘을 앱의 나머지 콘텐츠와 함께 지역화합니다.

사전 요구 사항

속성 지역화

WinJS 컨트롤에는 다음과 같이 지역화가 필요한 특성이 포함될 수 있습니다.

앱 바 명령의 레이블 및 아이콘
메뉴 항목 레이블
설정 플라이아웃의 토글 스위치 레이블
접근성에 사용되는 ARIA 레이블

지역화된 문자열을 참조하려면 WinJS 컨트롤의 태그에 리소스 식별자를 추가합니다.

아래의 앱 바 예제에서 data-win-res 특성은 다음 패턴에 따라 각 앱 바 명령에 추가됩니다.

data-win-res="{winControl: {propertyName1:'resourceID1',propertyName2:'resourceID2'}}"

각 propertyName은 컨트롤의 속성(예: 레이블, 제목 등) 중 하나에 매핑하고 resourceID는 리소스 파일에서 로드될 문자열의 리소스 식별자를 참조합니다. 아래 strings/en-US/resources.resjson의 예제를 참조하세요.

이 태그와 함께 제공되는 JavaScript 코드에서 리소스 문자열이 있는 각 data-win-res 특성의 특성 및 속성을 바꾸기 위해 HTML을 로드하는 경우 WinJS.Resources.processAll 함수를 호출해야 합니다.

앱 바 예제

이 예제는 앱 바에서 명령 문자열을 지역화하는 방법을 보여 줍니다.

<div data-win-control="WinJS.UI.AppBar" data-win-options="">
<button data-win-control="WinJS.UI.AppBarCommand" 
     data-win-res="{winControl: {label:'command1Label',tooltip:'command1Tooltip'}}"
     data-win-options="{id:'cmdCommand1',icon:'add',section:'global'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
     data-win-res="{winControl: {label:'command2Label',tooltip:'command2Tooltip'}}"
     data-win-options="{id:'cmdCommand2',icon:'remove',section:'global'}">
</button>
</div>

(function () {

    "use strict";
    var page = WinJS.UI.Pages.define("/html/localize-appbar.html", {
    ready: function (element, options) {
        // Load resources.
        loadResources();
        // Enable listener so they get updated when user changes language selection.
        WinJS.Resources.addEventListener("contextchanged", loadResources);
    }
});

// Handle loading of resources.
function loadResources() {
    WinJS.Resources.processAll();
}

})();

리소스 파일

strings/en-US/resources.resjson

{
    "command1Label"            : "en-US Command1",
    "command1Tooltip"          : "en-US Command1 Tooltip",

    "command2Label"            : "en-US Command2",
    "command2Tooltip"          : "en-US Command2 Tooltip"
}

strings/fr-FR/resources.resjson

{
    "command1Label"            : "fr-FR Command1",
    "command1Tooltip"          : "fr-FR Command1 Tooltip",

    "command2Label"            : "fr-FR Command2",
    "command2Tooltip"          : "fr-FR Command2 Tooltip"
}

strings/de-DE/resources.resjson

{
    "command1Label"            : "de-DE Command1",
    "command1Tooltip"          : "de-DE Command1 Tooltip",

    "command2Label"            : "de-DE Command2",
    "command2Tooltip"          : "de-DE Command2 Tooltip"
}

메뉴 예제

이 태그는 메뉴 컨트롤을 지역화하는 방법을 보여 줍니다. 이 태그에도 앱 바 예제와 유사한 JavaScript 및 리소스 파일이 필요합니다.

<div id="headerMenu" data-win-control="WinJS.UI.Menu">
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-res="{winControl: {label:'item1Label'}}" 
        data-win-options="{id:'firstMenuItem'}">
    </button>
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-res="{winControl: {label:'item2Label'}}" 
        data-win-options="{id:'secondMenuItem'}">
    </button>
    <hr data-win-control="WinJS.UI.MenuCommand" 
        data-win-options="{id:'separator',type:'separator'}" />
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-res="{winControl: {label:'itemNLabel'}}" 
        data-win-options="{id:'lastMenuItem'}">
    </button>
</div>

토글 스위치 예제

이 태그는 ToggleSwitch 컨트롤을 지역화하는 방법을 보여 줍니다. 이 태그에도 앱 바 예제와 유사한 JavaScript 및 리소스 파일이 필요합니다.

<div data-win-control="WinJS.UI.ToggleSwitch" 
    data-win-res="{winControl: {labelOn:'switch1LabelOn',labelOff:'switch1LabelOff',
    title:'switch1Title'}}"
    data-win-options="">
</div>