빠른 시작: WinJS 컨트롤 및 스타일 추가(HTML)

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

WinJS(JavaScript용 Windows 라이브러리)는 페이지 컨트롤, promise 및 데이터 바인딩 같은 고품질 인프라, 컬렉션 가상화 같은 정교한 UI 기능, ListView, FlipViewSemanticZoom 같은 고성능 Windows 컨트롤을 제공합니다.

Windows 런타임 앱 및 웹 사이트에서 그리고 Apache Cordova와 같은 HTML 기반 앱 기술을 사용할 때 WinJS를 사용할 수 있습니다.

앱 기능 전체 프로세스 시리즈: Windows 스토어 앱 UI, 전체 프로세스의 일부로 이 기능의 작동 방법을 살펴보세요.

사전 요구 사항

JavaScript용 Windows 라이브러리란?

WinJS는 CSS 및 JavaScript 파일로 구성된 라이브러리입니다. 여기에는 멋진 모양의 앱을 더욱 쉽게 만들 수 있도록 설계되었으며 네임스페이스로 구성된 JavaScript 개체가 포함되어 있습니다. WinJS에는 활성화를 처리하고 저장소에 액세스하며 고유의 클래스와 네임스페이스를 정의하는 데 도움이 되는 개체가 포함되어 있습니다.

  • WinJS에서 제공하는 전체 컨트롤 목록은 컨트롤 목록을 참조하세요.

  • WinJS는 사용자가 사용하거나 다시 정의할 수 있는 CSS 스타일 및 클래스 형태의 스타일 지정 기능도 제공합니다. 컨트롤 스타일 지정은 빠른 시작: 컨트롤 스타일 지정에 설명되어 있습니다.

페이지에 JavaScript용 Windows 라이브러리 추가

앱 또는 웹 사이트에서 최신 버전의 WinJS를 사용하려면 다음을 수행합니다.

  1. WinJS 얻기에서 최신 버전을 다운로드하여 앱 또는 웹 사이트의 디렉터리에 복사합니다.
  2. WinJS 기능을 사용하는 앱 또는 웹 사이트의 각 페이지에 WinJS CSS 및 스크립트 참조를 추가합니다.

이 예제는 루트 디렉터리에 WinJS 파일을 포함하는 앱에 대한 참조가 어떤 모양인지 보여 줍니다.

    <!-- WinJS style sheets (include one) -->
    <link href="/WinJS/css/ui-dark.css" rel="stylesheet">
    <link href="/WinJS/css/ui-light.css" rel="stylesheet">

    <!-- WinJS code -->
    <script src="/WinJS/js/WinJS.js"></script>

WinJS 컨트롤을 태그 안에 추가

HTML 컨트롤과 달리, WinJS 컨트롤에는 전용 태그 요소가 없으므로, <rating /> 요소 등을 추가하여 Rating 컨트롤을 만들 수 없습니다. WinJS 컨트롤을 추가하려면 div 요소를 만들고 data-win-control 특성을 사용하여 원하는 컨트롤 유형을 지정합니다. Rating 컨트롤을 추가하려면 특성을 "WinJS.UI.Rating"으로 설정합니다.

또한 JavaScript 코드에서 WinJS.UI.processAll 함수도 호출해야 합니다. WinJS.UI.processAll은 태그를 구문 분석하고 찾은 WinJS 컨트롤을 인스턴스화합니다.

다음 예제 모음에서는 새 응용 프로그램 템플릿을 사용하여 만든 프로젝트에 WinJS 컨트롤을 추가하는 방법을 보여 줍니다. 새로운 새 응용 프로그램 프로젝트를 만들 경우 쉽게 따라할 수 있습니다.

Hh465493.wedge(ko-kr,WIN.10).gif새 응용 프로그램 템플릿을 사용하여 새 프로젝트를 만들려면

  1. Microsoft Visual Studio를 시작합니다.

  2. 시작 페이지 탭에서 새 프로젝트를 클릭합니다. 새 프로젝트 대화 상자가 열립니다.

  3. 설치됨 창에서 JavaScript를 확장하고 Windows 스토어 앱 템플릿 유형을 클릭합니다. JavaScript에 사용할 수 있는 프로젝트 템플릿이 대화 상자의 가운데 창에 표시됩니다.

  4. 가운데 창에서 새 응용 프로그램 프로젝트 템플릿을 선택합니다.

  5. 이름 텍스트 상자에 프로젝트 이름을 입력합니다.

  6. 확인을 클릭하여 프로젝트를 만듭니다. 이 작업에는 약간 시간이 걸릴 수 있습니다.

Hh465493.wedge(ko-kr,WIN.10).gifWinJS 컨트롤을 추가하려면

  1. 컨트롤을 추가할 div 요소를 만듭니다. data-win-control 특성을 만들려는 컨트롤의 정규화된 이름으로 설정합니다. 다음 예제에서는 앱의 시작 페이지(default.html 파일)에 Rating 컨트롤을 만듭니다.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Adding WinJS controls and styles</title>
    
        <!-- WinJS references -->
        <link href="/WinJS/css/ui-dark.css" rel="stylesheet">
        <script src="/WinJS/js/WinJS.js"></script>
    
        <!-- AddingWinJSControlsAndStyles references -->
        <link href="/css/default.css" rel="stylesheet">
        <script src="/js/default.js"></script>
    </head>
    <body>
    
        <p>Create a WinJS control in markup</p>
    
        <div id="ratingControlHost" data-win-control="WinJS.UI.Rating">
        </div>
    
    </body>
    </html>
    
  2. 이전 단계에서 만든 Rating 컨트롤을 초기화하려면 JavaScript 코드에서 WinJS.UI.processAll을 호출해야 합니다. 새 응용 프로그램 템플릿을 사용하는 경우 default.js 파일에 이미 WinJS.UI.processAll에 대한 호출이 포함되어 있습니다.

    (function () {
        "use strict";
    
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
        WinJS.strictProcessing();
    
        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());
            }
        };
    
        app.oncheckpoint = function (args) {
            // TODO: This application is about to be suspended. Save any state
            // that needs to persist across suspensions here. You might use the
            // WinJS.Application.sessionState object, which is automatically
            // saved and restored across suspension. If you need to complete an
            // asynchronous operation before your application is suspended, call
            // args.setPromise().
        };
    
        app.start();
    })();
    

    새 응용 프로그램 템플릿을 사용하지 않는 경우 또는 자신이 만든 페이지에 컨트롤을 추가하려는 경우 WinJS.UI.processAll에 대한 호출을 추가해야 할 수도 있습니다.

    • 앱 홈페이지(일반적으로 default.html 파일)에 컨트롤을 추가했으면 이전 예제처럼 onactivated 이벤트 처리기에 WinJS.UI.processAll에 대한 호출을 추가합니다.

    • 컨트롤을 페이지 컨트롤에 추가한 경우에는 WinJS.UI.processAll에 대한 호출을 추가할 필요가 없습니다. 페이지 컨트롤이 자동으로 이 작업을 수행합니다.

    • 앱의 홈페이지가 아닌 다른 페이지에 컨트롤을 추가한 경우에는 DOMContentLoaded 이벤트를 처리하고 해당 처리기를 사용하여 WinJS.UI.processAll을 호출합니다.

      function initialize() {
          WinJS.UI.processAll();
      }
      
      document.addEventListener("DOMContentLoaded", initialize(), false);
      

    WinJS.UI.processAll 함수는 문서를 처리하고 태그 안에 선언된 WinJS 컨트롤을 활성화합니다.

앱을 실행하면 div 호스트 요소가 추가되어 있는 Rating 컨트롤이 나타납니다.

평가 컨트롤

태그 안에서 WinJS 컨트롤 속성 설정

HTML 컨트롤을 만드는 경우 전용 특성을 사용하여 속성을 설정할 수 있습니다. 예를 들어 input 컨트롤의 type, minmax 속성을 설정하려는 경우 태그 안에서 type, minmax 특성을 설정할 수 있습니다.

<input type="range" min="0" max="20" />

HTML 컨트롤과 달리, WinJS 컨트롤에는 전용 요소나 특성 태그가 없으므로, Rating 컨트롤을 만들 수 없으며 다음 태그를 사용하여 해당 속성을 설정할 수 없습니다.

<!-- Not valid markup. -->
<rating maxRating="10" averageRating="6" />

대신 data-win-options 특성을 사용하여 태그 안에서 속성을 설정할 수 있습니다. 여기에는 하나 이상의 속성/값 쌍을 포함하는 문자열이 사용됩니다.

data-win-options="{propertyName: propertyValue}"

 

다음 예제에서는 Rating 컨트롤의 maxRating을 10으로 설정합니다.

<div id="ratingControlHost" data-win-control="WinJS.UI.Rating"
    data-win-options="{maxRating: 10}">
</div>

이 앱을 실행할 경우 Rating 컨트롤이 다음과 같이 표시됩니다.

평가 컨트롤이 10개별 등급 시스템을 표시합니다.

두 개 이상의 속성을 설정하려면 각각의 속성을 쉼표로 구분합니다.

data-win-options="property1Name: property1Value, property2Name: property2Value"

 

다음 예제에서는 Rating 컨트롤의 두 속성을 설정합니다.

<div id="ratingControlHost" data-win-control="WinJS.UI.Rating"
    data-win-options="{maxRating: 10, averageRating: 6}">
</div>

이 앱을 실행할 경우 Rating 컨트롤이 다음과 같이 표시됩니다.

평가 컨트롤이 별 10개 중 6개에 해당하는 등급을 표시합니다.

속성 값 자체가 문자열인 경우에는 data-win-options 특성을 설정할 때 사용한 것과는 다른 유형의 따옴표(' 또는 '')로 묶습니다. 다음 예제에서는 TimePicker 컨트롤의 current 속성을 설정하는 방법을 보여줍니다. 이 속성에는 문자열이 사용됩니다.

<div id="timepicker" data-win-control="WinJS.UI.TimePicker" 
    data-win-options="{current: '10:29 am'}">
</div>

오전 10시 29분을 표시하는 TimePicker 컨트롤입니다.

지정된 WinJS 컨트롤이 속성을 지원하는지 알아보려면 관련 참조 페이지를 참조하세요.

태그 안에 작성된 컨트롤 검색

WinJS 컨트롤의 속성을 프로그래밍 방식으로 설정할 수도 있습니다. 코드를 통해 컨트롤에 액세스하려면 호스트 요소를 검색한 다음 winControl 속성을 사용하여 해당 컨트롤을 검색합니다. 이전 예제에서 Rating 컨트롤의 호스트 요소는 "ratingControlHost"입니다.


var control = document.getElementById("ratingControlHost").winControl; 

경우에 따라 컨트롤을 검색하고 사용할 수 있게 되는 즉시 조작해야 할 수도 있습니다. 하지만, WinJS.UI.processAll 메서드는 비동기식으로 작동하므로 WinJS.UI.processAll이 완료되기 전에 이 메서드 뒤에 오는 모든 코드가 실행될 수 있습니다. 이 경우라면 컨트롤을 사용할 수 없으므로 즉시 조작을 시도하지 마세요.


WinJS.UI.processAll();

// Don't do this:
var control = document.getElementById("ratingControlHost").winControl; 
control.averageRating = 3; 
            

WinJS.UI.processAllWinJS.UI.processAll 메서드가 완료될 때 함수를 호출하는 데 사용할 수 있는 WinJS.Promise 개체를 반환합니다. 다음 예제에서는 이 컨트롤을 검색하고 컨트롤의 averageRating을 3으로 설정하는 전체 함수를 정의합니다.


// Do this instead:
WinJS.UI.processAll().then(function () {
    var control = document.getElementById("ratingControlHost").winControl;
    control.averageRating = 3; 
});

다음 섹션에서는 WinJS 컨트롤에 이벤트 수신기를 추가하는 방법을 설명합니다.

WinJS 컨트롤 이벤트 처리

HTML 컨트롤과 마찬가지로, WinJS 컨트롤에 대한 이벤트 수신기를 연결하는 기본적인 방법은 addEventListener 함수를 사용하는 것입니다. 하지만 WinJS 컨트롤 검색은 HTML 컨트롤 검색과는 조금 다릅니다.

이벤트를 처리하려면:

  1. JavaScript에서 컨트롤의 호스트 요소를 검색한 다음 해당 winControl 속성을 사용하여 컨트롤을 검색합니다.
  2. 컨트롤의 addEventListener 함수를 호출하고 이벤트 및 이벤트 처리기를 지정합니다.

다음 예제에서는 Rating 컨트롤의 change 이벤트를 처리하는 방법을 보여 줍니다.

Hh465493.wedge(ko-kr,WIN.10).gif평가 컨트롤의 change 이벤트를 처리하려면

  1. HTML 파일에서 단락을 추가하고 해당 단락에 "outputParagraph"라는 ID를 지정합니다. 그러고 나면 이벤트 수신기가 다음 단락을 출력합니다.

            <p>Create a WinJS control in markup</p>
    
            <div id="ratingControlHost" data-win-control="WinJS.UI.Rating"
                data-win-options="{maxRating: 10, averageRating: 6}">
            </div>
    
            <!-- This paragraph will be used to demonstrate event handling. -->
            <p id="outputParagraph"></p>
    
  2. JavaScript에서 하나의 매개 변수를 사용하는 이벤트 처리기 함수 ratingChanged를 만듭니다. 다음 예제에서는 이벤트 개체에 포함된 속성과 값을 표시하는 이벤트 처리기를 만듭니다.

    
        function ratingChanged(event) {
    
            var outputParagraph = document.getElementById("outputParagraph");
            var output = event.type + ": <ul>";
            var property;
            for (property in event) {
                output += "<li>" + property + ": " + event[property] + "</li>";
            }
    
            outputParagraph.innerHTML = output + "</ul>";
    
        }
    
  3. winControl 속성을 사용하여 호스트 요소에서 컨트롤을 검색하고 addEventListener 함수를 호출하여 이벤트 처리기를 추가합니다. 다음 예제에서는 컨트롤이 만들어지는 즉시 컨트롤을 검색하고 이벤트 처리기를 추가합니다.

        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().then(function () {
                    var control = document.getElementById("ratingControlHost").winControl;
                    control.addEventListener("change", ratingChanged, false); 
                }));
            }
        };
    

앱을 실행하고 등급을 변경하면 이벤트 정보 속성 및 값 목록이 만들어집니다.

change 이벤트의 출력입니다.

코드 안에 WinJS 컨트롤 추가

앞의 예에서는 태그 안에서 작성한 WinJS 컨트롤을 만들고 조작하는 방법을 보여 주었지만, JavaScript 코드를 사용하여 WinJS 컨트롤을 만들 수도 있습니다.

Hh465493.wedge(ko-kr,WIN.10).gif코드를 통해 WinJS 컨트롤을 작성하려면

  1. 태그에서 컨트롤을 호스트할 요소를 만듭니다.

    <div id="hostElement"></div>
    
  2. 코드에서(가급적이면 DOMContentLoaded 이벤트 처리기에서) 호스트 요소를 검색합니다.

    var hostElement = document.getElementById("hostElement");
    
  3. 생성자를 호출하고 호스트 요소를 생성자에 전달하여 컨트롤을 만듭니다. 다음 예제에서는 Rating 컨트롤을 만듭니다.

    var ratingControl = new WinJS.UI.Rating(hostElement); 
    

    프로그램을 실행하면 사용자가 만든 Rating이 표시됩니다.

    코드로 작성한 등급 컨트롤

    WinJS.UI.processAll을 호출할 필요는 없습니다. 태그에서 WinJS 컨트롤을 만드는 경우 WinJS.UI.processAll만 호출하면 됩니다.

요약 및 다음 단계

WinJS 컨트롤을 만드는 방법, 관련 속성을 설정하는 방법, 그리고 이벤트 처리기를 연결하는 방법을 살펴보았습니다.

다음 항목인 빠른 시작: 컨트롤 스타일 지정에서는 CSS(Cascading Style Sheet) 스타일시트와 JavaScript를 사용하는 Windows 스토어 앱의 고급 스타일 지정 접근 권한 값을 사용하는 방법에 대해 설명합니다. 특정 컨트롤에 대해 자세히 알아보려면 컨트롤 목록기능별 컨트롤 항목을 참조하세요.

샘플

거의 모든 WinJS 컨트롤 및 온라인 편집기의 라이브 코드 예제는 try.buildwinjs.com을 참조하세요.

관련 항목

WinJS 얻기

컨트롤 목록

기능별 컨트롤

Windows 런타임 및 JavaScript용 Windows 라이브러리 API 참조