1부: "Hello, world" 앱 만들기(HTML)

1부: "Hello, world" 앱 만들기(HTML)

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

이 자습서에서는 JavaScript를 사용하여 간단한 "Hello, world" Windows 스토어 앱을 만드는 방법에 대해 설명합니다. 이 자습서는 Windows 스토어 앱을 빌드하기 위해 알아야 할 사항을 설명하는 5부 시리즈 중 첫 번째 자습서입니다.

이 자습서에서는 다음에 대해 알아봅니다.

  • 새 프로젝트 만들기
  • 시작 페이지에 HTML 콘텐츠 추가
  • 터치, 펜 및 마우스 입력 처리
  • 밝은 스타일시트 및 어두운 스타일시트 간 전환
  • 고유한 사용자 지정 스타일 만들기
  • JavaScript용 Windows 라이브러리 컨트롤 사용

자습서를 통해 HTML, JavaScript 및 CSS를 사용하여 Windows 스토어 앱을 만드는 방법을 안내합니다.

  

자습서를 건너뛰고 바로 코드를 보려면 JavaScript 시작: 자습서 시리즈의 전체 코드(영문)를 참조하세요.

 

시작하기 전에...

  • 이 자습서를 완료하려면 Windows 8.1 및 Microsoft Visual Studio Express 2013 for Windows가 필요합니다. 다운로드하려면 다운로드 페이지를 참조하세요.
  • 또한 개발자 라이선스도 필요합니다. 자세한 방법은 개발자 라이선스 얻기를 참조하세요.

1단계: Visual Studio에서 새 프로젝트 만들기

HelloWorld라는 새 앱을 만들겠습니다. 방법은 다음과 같습니다.

  1. Visual Studio Express 2013 for Windows를 시작합니다.

    Visual Studio Express 2013 for Windows 시작 화면이 나타납니다.

    앞으로 Visual Studio Express 2013 for Windows를 간단히 "Visual Studio"라고 하겠습니다.

  2. 파일 메뉴에서 새 프로젝트를 선택합니다.

    새 프로젝트 대화 상자가 나타납니다. 대화 상자의 왼쪽 창에서 표시할 템플릿 유형을 선택할 수 있습니다.

  3. 왼쪽 창에서 설치됨, 템플릿을 차례로 확장한 다음 JavaScript를 확장하고 Windows 스토어 템플릿 유형을 선택합니다. (Visual Studio 2013 업데이트 2 이상을 사용하는 경우 JavaScript > 스토어 앱을 확장한 후 Windows Apps 템플릿 유형을 선택합니다.) 대화 상자의 가운데 창에 JavaScript용 프로젝트 템플릿 목록이 표시됩니다.

    새 프로젝트 창

    이 자습서에서는 Blank App 템플릿을 사용합니다. 이 템플릿은 컴파일과 실행은 가능하지만 사용자 인터페이스 컨트롤이나 데이터는 포함되지 않은 최소한의 Windows 스토어 앱을 만듭니다. 이러한 자습서를 진행하면서 이 앱에 컨트롤과 데이터를 추가하게 됩니다.

  4. 가운데 창에서 Blank App 템플릿을 선택합니다.
  5. Name 텍스트 상자에 "HelloWorld"를 입력합니다.
  6. 솔루션용 디렉터리 만들기 확인란의 선택을 취소합니다.
  7. 확인을 클릭하여 프로젝트를 만듭니다.

    Visual Studio에서 프로젝트를 만들고 솔루션 탐색기에 표시합니다.

    HelloWorld 프로젝트의 솔루션 탐색기

Blank App은 최소한의 템플릿이지만 여러 개의 파일이 포함되어 있습니다.

  • 이름, 설명, 타일, 시작 페이지, 시작 화면 등 앱에 대한 설명과 앱에 포함된 파일의 목록이 수록되어 있는 매니페스트 파일(package.appxmanifest)
  • 시작 화면에 표시되는 크고 작은 로고 이미지(logo.png 및 smalllogo.png)
  • Windows 스토어에서 해당 앱을 나타낼 이미지(storelogo.png)
  • 앱 시작 시 표시되는 시작 화면(splashscreen.png)
  • WinJS에 대한 CSS 및 코드 파일(참조 폴더 내).
  • 앱 시작 시 실행되는 시작 페이지(default.html) 및 관련 JavaScript 파일(default.js)

해당 파일을 보고 편집하려면 솔루션 탐색기에서 해당 파일을 두 번 클릭합니다.

이러한 파일은 JavaScript를 사용하는 모든 Windows 스토어 앱에 필수적입니다. Visual Studio에서 만든 모든 프로젝트에는 해당 파일이 포함됩니다.

2단계: 앱 시작

이제 매우 간단한 앱을 만들었습니다. 앱의 모양이 궁금한 경우 F5 키를 눌러 앱을 빌드, 배포 및 시작합니다. 먼저 기본 시작 화면이 나타납니다. 시작 화면은 이미지(splashscreen.png)와 배경색(앱의 매니페스트 파일에 지정됨)으로 정의됩니다. 여기서는 이에 대해 다루지 않지만 시작 화면은 손쉽게 사용자 지정할 수 있습니다. 방법을 알아보려면 시작 화면 추가를 참조하세요.

시작 화면이 사라진 다음 앱이 나타납니다. 여기에는 검은색 화면에 "Content goes here" 텍스트가 표시됩니다.

HelloWorld 앱

앱을 닫는 단추나 명령은 없습니다. 앱을 닫으려면 화면의 위쪽 가장자리에서 아래쪽 가장자리로 밀거나 Alt+F4를 누릅니다. 시작 화면으로 이동합니다. 앱을 배포하면 시작 화면의 마지막 그룹에 타일이 추가됩니다. 앱을 다시 실행하려면 시작 화면에서 해당 타일을 탭 또는 클릭하거나 Visual Studio에서 F5 키를 눌러 디버거에서 앱을 실행합니다.

아직 기능은 많지 않지만 첫 Windows 스토어 앱이 작성되었습니다. 축하합니다.

앱 디버깅을 중지하려면 Alt+Tab을 눌러 Microsoft Visual Studio로 돌아갑니다. Visual Studio에서 디버그 > 디버깅 중지를 클릭하여 앱을 닫습니다. 디버깅 중에는 Visual Studio에서 편집할 수 없습니다.

Visual Studio에서 앱을 실행하는 다른 방법에 대한 자세한 내용은 Visual Studio에서 Windows 스토어 앱 실행 를 참조하세요.

3단계: 시작 페이지 수정

Visual Studio가 만드는 파일 중 하나는 앱의 시작 페이지인 default.html입니다. 앱이 실행되면 시작 페이지의 콘텐츠가 표시됩니다. 시작 페이지에는 앱의 코드 파일과 스타일시트에 대한 참조도 포함되어 있습니다. 다음은 Visual Studio에서 생성한 시작 페이지입니다.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorld</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>

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

default.html 파일에 새로운 콘텐츠를 몇 가지 추가해 보겠습니다. 다른 HTML 파일에 콘텐츠를 추가하는 것과 같이body 요소 내에 콘텐츠를 추가합니다. 몇 가지 예외를 제외하고 HTML5 요소를 사용하여 앱을 만들 수 있습니다. 이는 h1, p, button, divimg와 같은 HTML5 요소를 사용할 수 있음을 의미합니다.

Hh986964.wedge(ko-kr,WIN.10).gif시작 페이지를 수정하려면

  1. body 요소의 기존 콘텐츠를 "Hello, world!"라는 첫 번째 수준 제목과 사용자의 이름을 묻는 텍스트, 사용자의 이름을 수용할 input 요소, buttondiv 요소로 바꿉니다. input, buttondiv에 ID를 할당합니다.

    
    <body>
        <h1>Hello, world!</h1>
        <p>What's your name?</p>
        <input id="nameInput" type="text" />
        <button id="helloButton">Say "Hello"</button>
        <div id="greetingOutput"></div>
    </body>
    
    
  2. 앱을 실행합니다.

    새 콘텐츠가 포함된 HelloWorld 앱

    input 요소에 쓸 수는 있지만 지금은 button을 클릭해도 아무것도 수행되지 않습니다. 일부 개체(예: button)는 특정 이벤트가 발생할 때 메시지를 보낼 수 있습니다. 이러한 이벤트 메시지는 이벤트에 응답하여 어떤 작업을 수행할 수 있는 기회를 제공합니다. 이벤트 처리기 메서드에서 이벤트에 응답할 코드를 넣습니다.

    다음 단계에서 button에 대해 개인 설정 인사말을 표시하는 이벤트 처리기를 만들고 이벤트 처리기 코드를 default.js 파일에 추가하게 됩니다.

4단계: 이벤트 처리기 만들기

새 프로젝트를 만들었을 때 Visual Studio가 /js/default.js 파일을 만들었습니다. 이 파일에는 2부: 앱 수명 주기 및 상태 관리에서 설명한 개념인 앱의 수명 주기를 처리하기 위한 코드가 포함되어 있습니다. 또한 default.html 파일에 대화형 작업을 제공하는 추가 코드도 여기에 작성합니다.

default.js 파일을 엽니다.

코드 추가를 시작하기 전에 먼저 파일에 있는 코드의 처음과 마지막 몇 줄을 살펴보겠습니다.



(function () {
    "use strict";

     // Omitted code 

 })(); 

무엇을 하는 것인지 궁금할 것입니다. 이 몇 줄의 코드는 default.js 코드의 나머지를 자체 실행 익명 함수로 래핑합니다.

어떤 작업을 수행하는지는 확인했으므로 이제 코드를 자체 실행 익명 함수로 래핑하는 이유가 궁금할 것입니다. 이렇게 하면 이름 충돌이나 의도하지 않은 값을 실수로 수정하는 일을 손쉽게 예방할 수 있기 때문입니다. 또한 글로벌 네임스페이스에서 불필요한 식별자를 없애 성능을 향상할 수 있습니다. 조금 이상해 보이지만 좋은 프로그래밍 방식입니다.

다음 줄의 코드는 JavaScript 코드를 위해 strict 모드를 설정합니다. strict 모드는 코드에 대해 추가적인 오류 검사를 제공합니다. 예를 들어 암시적으로 선언된 변수를 사용하거나 읽기 전용 속성에 값을 지정하는 것을 방지합니다.

default.js에 있는 나머지 코드를 살펴보시기 바랍니다. 이러한 코드는 앱의 activatedcheckpoint 이벤트를 처리합니다. 나중에 이러한 이벤트에 대해 보다 자세히 살펴보겠습니다. 지금은 앱이 시작될 때 activated 이벤트가 발생한다는 것만 알아 두세요.

button에 대한 이벤트 처리기를 정의하겠습니다. 새 이벤트 처리기는 nameInput input 컨트롤에서 사용자의 이름을 가져와 지난 섹션에서 만든 greetingOutput div 요소로 인사말을 출력하는 데 사용합니다.

터치, 마우스 및 펜 입력에 대해 작동하는 이벤트 사용

Windows 8.1에서는 터치, 마우스 및 기타 포인터 입력 형태 간의 차이에 대해 염려할 필요가 없습니다. click과 같이 이미 알고 있는 이벤트를 사용할 수 있으며 그러한 이벤트는 모든 형태의 입력에 대해 작동합니다.

   또한 앱은 터치, 마우스 및 펜 입력에 대해 작동하고 이벤트를 트리거한 장치에 대한 추가 정보를 제공할 수 있는 MSPointer*MSGesture* 이벤트도 사용할 수 있습니다. 자세한 내용은 사용자 조작에 응답제스처, 조작 및 조작 방식을 참조하세요.
 

계속해서 이벤트 처리기를 만들겠습니다.

Hh986964.wedge(ko-kr,WIN.10).gif이벤트 처리기를 만들려면

  1. default.js에서 app.oncheckpoint 이벤트 처리기 뒤, app.start에 대한 호출 앞에 eventInfo라는 이름의 단일 매개 변수를 사용하는 buttonClickHandler라는 이름의 click 이벤트 처리기 함수를 만듭니다.
    
        function buttonClickHandler(eventInfo) {
     
        }
    
    
  2. 이 이벤트 처리기 내에서 nameInput input 컨트롤에서 사용자의 이름을 읽어 온 다음 이를 사용해 인사말을 만듭니다. greetingOutput div 를 사용하여 결과를 표시합니다.
    
        function buttonClickHandler(eventInfo) {
            var userName = document.getElementById("nameInput").value;
            var greetingString = "Hello, " + userName + "!";
            document.getElementById("greetingOutput").innerText = greetingString; 
        }
    
    

default.js에 이벤트 처리기를 추가했습니다. 이제 이벤트 처리기를 등록해야 합니다.

5단계: 앱 시작 시 이벤트 처리기 등록

이제 이벤트 처리기를 단추에 등록하기만 하면 됩니다. 권장되는 이벤트 처리기 등록 방법은 코드에서 addEventListener를 호출하는 것입니다. 이벤트 처리기를 등록하기에 좋은 위치는 앱이 활성화될 때입니다. 다행히 Visual Studio에서 default.js 파일 내에 앱의 활성화를 처리하는 app.onactivated 이벤트 처리기에 대한 일부 코드를 생성했습니다. 이 코드를 살펴보겠습니다.



    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    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());
        }
    };

onactivated 처리기 내에서 코드는 어떤 유형의 활성화가 발생했는지 확인합니다. 활성화 유형에는 여러 가지가 있습니다. 예를 들면, 사용자가 앱과 연결된 파일을 열려고 할 때 그리고 사용자가 앱을 실행할 때 앱이 활성화됩니다. 자세한 내용은 응용 프로그램 수명 주기를 참조하세요.

여기서는 launch 활성화를 살펴보아야 합니다. 앱은 실행되고 있지 않다가 사용자가 활성화할 때마다 시작됩니다.



    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.
            }


그런 다음 WinJS.UI.processAll을 호출합니다.




            args.setPromise(WinJS.UI.processAll());           
        }
    };

코드는 앱이 과거에 종료되었는지 또는 이번에 처음으로 시작되는 것인지 여부에 관계없이 WinJS.UI.processAll을 호출합니다. WinJS.UI.processAllsetPromise 메서드 호출에 포함되어 있으며, 앱의 페이지가 준비될 때까지 시작 화면이 없어지지 않도록 합니다.

  WinJS.UI.processAll 함수는 default.html 파일에서 WinJS 컨트롤을 검색하고 이를 초기화합니다. 지금까지는 이러한 컨트롤을 추가하지 않았지만 나중에 추가하고자 하는 경우에 대비하여 이 코드를 남겨두는 것이 좋습니다. WinJS 컨트롤에 대한 자세한 내용은 빠른 시작: WinJS 컨트롤 및 스타일 추가를 참조하세요.
 

WinJS가 아닌 컨트롤에 대해 이벤트 처리기를 등록하기 좋은 위치는 WinJS.UI.processAll 호출 바로 뒤입니다.

Hh986964.wedge(ko-kr,WIN.10).gif이벤트 처리기를 등록하려면

  • default.js의 onactivated 이벤트 처리기에서 helloButton을 검색하고 addEventListener를 사용하여 click 이벤트에 대해 이벤트 처리기를 등록합니다. 이 코드를 WinJS.UI.processAll에 대한 호출 뒤에 추가합니다.

    
        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());
    
                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", buttonClickHandler, false);
    
            }
        };
    
    

다음은 업데이트된 default.js 파일의 전체 코드입니다.


// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    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());

            // Retrieve the button and register our event handler. 
            var helloButton = document.getElementById("helloButton");
            helloButton.addEventListener("click", buttonClickHandler, false);
        }
    };

    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().
    };

    function buttonClickHandler(eventInfo) {

        var userName = document.getElementById("nameInput").value;
        var greetingString = "Hello, " + userName + "!";
        document.getElementById("greetingOutput").innerText = greetingString;
    }

    app.start();
})();

앱을 실행합니다. 텍스트 상자에 자신의 이름을 입력하고 단추를 클릭하면 앱에서 개인 설정 인사말을 표시합니다.

HelloWorld 앱의 개인 설정 인사말

참고   HTML에서 onclick 이벤트를 설정하지 않고 코드에서 addEventListener를 사용하여 이벤트를 등록하는 이유가 궁금하다면 기본 앱 코딩에서 자세한 설명을 참조하세요.
 

6단계: 시작 페이지 스타일 지정

앱의 모양과 느낌은 손쉽게 사용자 지정할 수 있습니다. Windows 스토어 앱에서는 웹 사이트에서와 같이 CSS3(Cascading Style Sheets, Level 3)를 사용할 수 있습니다.

Visual Studio가 만든 default.html에는 WinJS 스타일시트에 대한 참조가 포함되어 있습니다.



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


이 스타일시트는 어떤 작업을 하나요? 상당히 많은 것을 수행합니다. 이 스타일시트는 다음과 같은 이점을 제공합니다.

  • 앱을 Windows 8  이상 버전의 모양과 느낌에 자동으로 어울리게 만드는 스타일 집합입니다. 스타일시트만 포함해도 컨트롤이 훨씬 더 멋있어 보이고 터치 기반 디스플레이에서도 훌륭하게 작동합니다.
  • 고대비 모드를 자동으로 지원합니다. 이러한 스타일은 고대비를 고려하여 디자인되었으므로 고대비 모드의 장치에서 앱을 실행하는 경우에도 스타일이 올바르게 표시됩니다.
  • 다른 언어를 자동으로 지원합니다. WinJS 스타일시트는 Windows 8에서 지원하는 모든 언어에 대해 올바른 글꼴을 자동으로 선택합니다. 동일한 앱에서 여러 언어를 사용할 수도 있으며 이러한 언어가 올바르게 표시됩니다.
  • 다른 읽기 방향을 자동으로 지원합니다. HTML과 WinJS 컨트롤, 레이아웃 및 스타일을 오른쪽에서 왼쪽으로 작성되는 언어에 맞게 자동으로 조정합니다.

기본적으로 프로젝트의 각 HTML 페이지에는 어두운 스타일시트에 대한 참조가 들어 있습니다. WinJS는 밝은 스타일시트도 제공합니다. 테스트해 보고 어떻게 보이는지 확인해 보겠습니다.

Hh986964.wedge(ko-kr,WIN.10).gif밝은 스타일시트로 전환하려면

  1. default.html 파일에서 어두운 스타일시트에 대한 참조를
    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    다음으로 대체합니다.

    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    
    
    
  2. 앱을 실행합니다. 이제 밝은 스타일시트를 사용합니다.

    밝은 스타일시트를 사용하는 HelloWorld 앱

어떤 스타일시트를 사용해야 할까요? 어느 것이든 원하는 것을 사용하면 됩니다. 대부분의 이미지 또는 비디오를 표시하는 앱에는 어두운 색 스타일시트를 사용하는 것이 좋으며, 텍스트가 많이 들어 있는 앱에는 밝은 스타일시트를 사용하는 것이 좋습니다. 사용자 지정 색 구성표를 사용하려는 경우 앱의 모양과 느낌에 가장 잘 맞는 스타일시트를 사용하세요.

직접 스타일 만들기

앱의 모양과 느낌을 사용자 지정하려는 경우 WinJS 스타일을 무시하고 처음부터 다시 만들 필요가 없습니다. 변경할 스타일을 다시 정의하여 조금씩 변경하는 편이 작업하기 쉽습니다.

실제로 자신의 고유 스타일을 만드는 것보다 WinJS 스타일을 재정의하는 것이 더 낫습니다. 앱을 고대비 모드로 실행하는 경우 고대비를 지원하는 색 구성표에서 기본 스타일 색의 변경 사항을 자동으로 다시 정의합니다.

고유의 스타일시트를 만들어서 WinJS 스타일시트 뒤에 포함하여 기본 스타일시트의 스타일을 재정의할 수 있습니다. Blank App 템플릿은 이를 수행하는 것입니다. 이 템플릿은 개발자가 고유의 스타일을 만드는 데 사용할 수 있는 default.css라는 이름의 스타일시트를 만듭니다.



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

    <!-- HelloWorld references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>


직접 스타일을 만들어 보겠습니다.

  1. 먼저 스타일 지정을 쉽게 하기 위해 몇 가지 div 요소와 클래스를 HTML에 추가합니다.
    1. Visual Studio에서 default.html 파일을 엽니다.
    2. 페이지 머리글의 class 특성을 "headerClass"로 설정합니다. div 요소를 만들어서 페이지의 기본 내용을 포함하는 데 사용합니다. 이 요소에 "mainContent"의 class 설정을 지정합니다.
      
      
      <body>
          <h1 class="headerClass">Hello, world!</h1>
          <div class="mainContent">
              <p>What's your name?</p>
              <input id="nameInput" type="text" />
              <button id="helloButton">Say "Hello"</button>
              <div id="greetingOutput"></div>
          </div>
      </body>
      
      
      
  2. 이제 스타일을 정의하겠습니다. default.css 파일을 엽니다.

    지금은 거의 비어 있습니다.

    
    body {
    }
    
    
    
  3. 제목은 위쪽 여백이 45픽셀, 왼쪽 여백이 120픽셀입니다. 콘텐츠 영역도 왼쪽 여백이 120픽셀, 위쪽 여백이 31픽셀, 아래쪽 여백이 50픽셀입니다.

    이러한 지침에 따라 headerClassmainContent 클래스를 정의하고 여백을 설정합니다. 또한 높이를 20픽셀, 아래쪽 여백을 40픽셀로 설정하는 greetingOutput div에 대한 스타일을 만듭니다. 자세한 내용은 앱 페이지 레이아웃을 참조하세요.

    
    
    body {
    }
    
    .headerClass {
        margin-top: 45px;
        margin-left: 120px; 
    }
    
    .mainContent {
        margin-top: 31px;
        margin-left: 120px;
        margin-bottom: 50px; 
    }
    
    #greetingOutput {
        height: 20px; 
        margin-bottom: 40px;
    }
    
    
  4. 앱을 실행합니다. 간격이 변화되었습니다.

    여백이 있는 Hello, world 앱

Windows 스토어 앱은 CSS3를 지원하므로 앱을 사용자 지정할 수 있는 여지가 많습니다. 앱의 스타일 지정에 대한 자세한 내용은 빠른 시작: 컨트롤의 스타일 지정을 참조하세요.

7단계: JavaScript용 Windows 라이브러리 컨트롤 추가

JavaScript로 작성된 Windows 스토어 앱은 표준 HTML 컨트롤 외에도 WinJS.UI.DatePicker, WinJS.UI.FlipView, WinjS.UI.ListViewWinJS.UI.Rating 컨트롤 등 WinJS의 새로운 컨트롤을 모두 사용할 수 있습니다.

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

Rating 컨트롤을 앱에 추가하겠습니다.

  1. default.html파일에서 labelRating 컨트롤을 greetingOutput div 뒤에 추가합니다.

    
    
    <body>
        <h1 class="headerClass">Hello, world!</h1>
        <div class="mainContent">
            <p>What's your name?</p>
            <input id="nameInput" type="text" />
            <button id="helloButton">Say "Hello"</button>
            <div id="greetingOutput"></div>
            <label for="ratingControlDiv">
                Rate this greeting: 
            </label>
            <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
            </div>
        </div>
    </body>
    
    
    

    Rating을 로드하려면 페이지에서 WinJS.UI.processAll을 호출해야 합니다. 앱에서 Visual Studio 템플릿을 사용하므로, 5단계에서 설명한 대로 default.js에는 이미 WinJS.UI.processAll에 대한 호출이 포함되어 있습니다. 따라서 코드를 추가할 필요가 없습니다.

  2. 앱을 실행합니다. 새로운 Rating 컨트롤을 살펴봅니다.

    Hello, world 앱 및 JavaScript용 Windows 라이브러리 컨트롤

지금 Rating 컨트롤을 클릭하면 등급이 변경되지만, 다른 것은 바뀌지 않습니다. 사용자가 등급을 변경할 때 수행될 일을 위해 이벤트 처리기를 사용하겠습니다.

8단계: JavaScript용 Windows 라이브러리 컨트롤용 이벤트 처리기 등록

WinJS 컨트롤용 이벤트 처리기 등록은 표준 HTML 컨트롤용 이벤트 처리기 등록과 약간 다릅니다. 앞에서, onactivated 이벤트 처리기가 WinJS.UI.processAll 메서드를 호출하여 태그에서 WinJS를 초기화하는 것에 대해 설명했습니다. WinJS.UI.processAllsetPromise 메서드에 대한 호출에 둘러싸입니다.



            args.setPromise(WinJS.UI.processAll());           


Rating이 표준 HTML 컨트롤이면 WinJS.UI.processAll에 대한 이 호출 뒤에 이벤트 처리기를 추가할 수 있습니다. 그러나 Rating과 같은 WinJS 컨트롤에서는 좀 더 복잡합니다. WinJS.UI.processAll은 자동으로 Rating을 만들기 때문에, WinJS.UI.processAll에서 처리를 완료할 때까지 Rating에 이벤트 처리기를 추가할 수 없습니다.

WinJS.UI.processAll이 일반 메서드이면 호출 후에 Rating 이벤트 처리기를 등록할 수 있습니다. 그러나 WinJS.UI.processAll 메서드는 비동기식으로 작동하므로 WinJS.UI.processAll이 완료되기 전에 이 메서드 뒤에 오는 코드가 실행될 수 있습니다. 이 경우 어떻게 해야 할까요? WinJS.UI.processAll이 완료될 때 알림을 받기 위해 Promise 개체를 사용합니다.

모든 비동기 WinJS 메서드처럼 WinJS.UI.processAllPromise 개체를 반환합니다. Promise는 미래에 뭔가가 발생할 것이라는 "약속"입니다. 이것이 발생하면 Promise가 완료되었다고 할 수 있습니다.

Promise 개체에는 "completed" 함수를 매개 변수로 사용하는 then 메서드가 있습니다. Promise는 완료 시 이 함수를 호출합니다.

코드를 "completed" 함수에 추가하고 Promise 개체의 then 메서드에 전달하면, WinJS.UI.processAll이 완료된 후 코드가 실행되도록 할 수 있습니다.

  1. 사용자가 등급을 선택할 때 등급 값이 출력되도록 하겠습니다. default.html 파일에서, 등급 값을 표시하기 위한 div 요소를 만들고 id "ratingOutput"을 지정합니다.
    
    
    <body>
        <h1 class="headerClass">Hello, world!</h1>
        <div class="mainContent">
            <p>What's your name?</p>
            <input id="nameInput" type="text" />
            <button id="helloButton">Say "Hello"</button>
            <div id="greetingOutput"></div>
            <label for="ratingControlDiv">
                Rate this greeting: 
            </label>
            <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
            </div>     
            <div id="ratingOutput"></div>
        </div>
    </body>
    
    
    
  2. default.js 파일에서 Rating 컨트롤의 change 이벤트(이름은 ratingChanged)에 대한 이벤트 처리기를 만듭니다. eventInfo 매개 변수에는 새로운 사용자 등급을 제공하는 detail.tentativeRating 속성이 포함되어 있습니다. 이 값을 검색하고 출력 div에 표시합니다.

    
    
        function ratingChanged(eventInfo) {
    
            var ratingOutput = document.getElementById("ratingOutput");
            ratingOutput.innerText = eventInfo.detail.tentativeRating; 
        }
    
    
    
  3. then 메서드에 호출을 추가하고 여기에 completed 함수를 전달함으로써 WinJS.UI.processAll을 호출하는 코드를 onactivated 이벤트 처리기에서 업데이트합니다. completed 함수에서 Rating 컨트롤을 호스팅하는 ratingControlDiv 요소를 검색합니다. 그런 다음 winControl 속성을 사용해 실제 Rating 컨트롤을 검색합니다. (이 예제에서는 completed 함수를 인라인으로 정의합니다.)

    
                args.setPromise(WinJS.UI.processAll().then(function completed() {
    
                    // Retrieve the div that hosts the Rating control.
                    var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                    // Retrieve the actual Rating control.
                    var ratingControl = ratingControlDiv.winControl;
    
                    // Register the event handler. 
                    ratingControl.addEventListener("change", ratingChanged, false);
    
                }));
    
    
  4. HTML 컨트롤용 이벤트 처리기를 WinJS.UI.processAll에 대한 호출 뒤에 등록할 수 있지만, completed 함수 내부에 등록할 수도 있습니다. 단순한 처리를 위해 모든 이벤트 처리기 등록을 then 이벤트 처리기 내부로 이동하겠습니다.

    업데이트된 onactivated 이벤트 처리기는 다음과 같습니다.

    
        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 completed() {
    
                    // Retrieve the div that hosts the Rating control.
                    var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                    // Retrieve the actual Rating control.
                    var ratingControl = ratingControlDiv.winControl;
    
                    // Register the event handler. 
                    ratingControl.addEventListener("change", ratingChanged, false);
    
                    // Retrieve the button and register our event handler. 
                    var helloButton = document.getElementById("helloButton");
                    helloButton.addEventListener("click", buttonClickHandler, false);
    
                }));
    
            }
        };
    
    
  5. 앱을 실행합니다. 등급 값을 선택하면 Rating 컨트롤 아래에 수치 값이 출력됩니다.
참고   이 섹션과 마지막 섹션에서는 WinJS 컨트롤을 사용하기 시작할 때 알아야 할 내용을 가볍게 다루었습니다. 자세한 내용을 알아보고 컨트롤 목록을 보려면 빠른 시작: WinJS 컨트롤 및 스타일 추가를 참조하세요.
 

요약

축하합니다. 이 자습서를 마쳤습니다! 지금까지 Windows 스토어 앱에 콘텐츠를 추가하는 방법을 알아보았습니다. 또한 대화형 작업을 추가하는 방법과 앱의 스타일을 지정하는 방법도 알아보았습니다.

샘플 다운로드

난관에 봉착했나요? 또는 작업의 확인이 필요하세요? 이 경우 JavaScript 시작 샘플을 다운로드(영문)하세요.

다음 단계

이 자습서 시리즈의 다음 부분에서는 앱 수명 주기의 작동 방법과 앱의 상태를 저장하는 방법에 대해 자세히 배우게 됩니다. 2부: 앱 수명 주기 및 상태 관리로 이동합니다.

관련 항목

JavaScript 시작: 자습서 시리즈의 전체 코드
HTML, CSS 및 JavaScript를 사용하여 Windows 8 앱 프로그래밍(전자책)

 

 

표시:
© 2017 Microsoft