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

Applies to Windows and Windows Phone

WinJS는 JavaScript로 작성된 Windows 스토어 앱용으로 디자인된 새 컨트롤 집합(예: WinJS.UI.DatePicker, WinJS.UI.FlipView, WinjS.UI.ListViewWinJS.UI.Rating 컨트롤)을 제공합니다. 여기에는 사용자의 앱에 Windows 8의 모양과 느낌을 제공하는 두 개의 스타일시트(어두운 색 구성표와 밝은 색 구성표)도 포함되어 있습니다.

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

주의  이 문서의 절차에서는 Windows Phone 8.1에서 지원되지 않는 DatePickerRating 컨트롤을 사용합니다. Windows Phone 8.1에서 지원되는 WinJS의 전체 목록을 보려면 Windows Phone 8.1의 WinJS API 변경 사항을 참조하세요.

사전 요구 사항

JavaScript용 Windows 라이브러리란?

WinJS는 CSS 및 JavaScript 파일로 구성된 라이브러리입니다. 여기에는 JavaScript를 사용하는 Windows 스토어 앱을 좀더 쉽게 만들 수 있도록 하기 위한 네임스페이스로 구성된 JavaScript 개체가 포함되어 있습니다. WinJS에는 활성화를 처리하고 저장소에 액세스하며 자신의 고유의 클래스와 네임스페이스를 정의하는 데 도움이 되는 개체가 포함되어 있습니다. 또한 다음과 같은 컨트롤도 들어 있습니다.

컨트롤설명

AppBar

명령을 표시합니다.

BackButton

사용자에게 뒤로 탐색을 제공하는 단추입니다.

DatePicker

사용자가 날짜를 선택할 수 있습니다.

FlipView

한 번에 한 개씩 항목 컬렉션을 표시합니다.

Flyout

사용자의 조작이 필요한 메시지를 표시합니다. 대화 상자와 달리 Flyout은 별도의 창을 만들지 않습니다.

ListView

항목 컬렉션을 표나 목록 레이아웃으로 표시합니다.

HtmlControl

HTML 페이지를 표시합니다.

ItemContainer

누르고, 살짝 밀고, 끌 수 있는 항목을 만듭니다.

Menu

명령을 표시하기 위한 메뉴 플라이아웃입니다.

NavBar

탐색 명령을 표시하는 AppBar의 유형입니다.

PageControl

페이지를 설명하는 HTML, JavaScript 및 CSS로 이루어진 집합입니다. PageControl로 이동하거나 이 컨트롤을 사용자 지정 컨트롤처럼 사용할 수 있습니다.

Rating

사용자가 항목을 평가할 수 있습니다.

Repeater

데이터 및 템플릿 집합에서 HTML을 생성합니다.

SearchBox

사용자가 검색 쿼리를 수행하고 검색 제안을 선택할 수 있게 해 줍니다.

SemanticZoom

사용자가 두 자식 컨트롤에 의해 제공되는 서로 다른 보기 간에 확대/축소할 수 있습니다. 한 자식 컨트롤은 축소 보기를 제공하고 다른 하나는 확대 보기를 제공합니다.

SettingsFlyout

사용자가 앱 설정에 빠르게 액세스할 수 있습니다.

TimePicker

사용자가 시간을 선택할 수 있습니다.

ToggleSwitch

항목을 사용하거나 사용하지 않습니다.

Tooltip

서식 있는 콘텐츠(예: 이미지 및 서식 있는 텍스트)를 지원하는 도구 설명을 표시하여 개체에 대한 자세한 정보를 제공합니다.

ViewBox

단일 자식 요소를 확대하여 크기 조정 없이 사용 가능한 공간을 채웁니다. 컨테이너 크기가 변경되거나 자식 요소 크기가 변경될 경우 이러한 변경이 컨트롤 작동에도 적용됩니다. 예를 들어 미디어 쿼리로 인해 가로 세로 비율이 변경되는 경우 이에 맞게 컨트롤이 작동합니다.

x-ms-webview

HTML 콘텐츠를 표시합니다. 이 컨트롤을 사용하여 앱에 웹 페이지를 표시합니다.

 

전체 컨트롤 목록은 컨트롤 목록을 참조하세요.

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

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

WinJS를 사용하려면 앱에 WinJS 파일이 포함되어 있고 WinJS 기능을 사용하는 각 페이지에 올바른 CSS 및 스크립트 참조가 있어야 합니다.


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

    <!-- WinJS code -->
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

Microsoft Visual Studio를 사용하여 JavaScript로 작성된 Windows 스토어 앱을 만드는 경우 사용자에게 필요한 파일이 앱에 자동으로 포함됩니다. 이 예제에서는 빈 앱 템플릿을 사용하는 프로젝트의 default.html을 보여 줍니다.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Adding WinJS controls and styles</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- AddingWinJSControlsAndStyles references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

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. 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="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
        <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.2.0/js/ui.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 컨트롤이 나타납니다.

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 컨트롤이 다음과 같이 표시됩니다.

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 컨트롤이 다음과 같이 표시됩니다.

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).gifrating 컨트롤의 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 스토어 앱의 고급 스타일 지정 접근 권한 값을 사용하는 방법에 대해 설명합니다. 특정 컨트롤에 대해 자세히 알아보려면 컨트롤 목록기능별 컨트롤 항목을 참조하세요.

샘플

관련 항목

컨트롤 목록
기능별 컨트롤
Windows 런타임 및 JavaScript용 Windows 라이브러리 API 참조

 

 

표시:
© 2014 Microsoft