티스토리 뷰

Previous Platforms/Samples

Hello Windows Metro style apps with JavaScript

kaki104 2012. 1. 16. 12:09
반응형

윈도8에서 돌아가는 메트로UI 엡이라는 새로운 것을 만들어 보았다. 윈도8에서는 엡을 C#, VB, C++, JavaScript으로 만들 수 있는데, 간단하게 JavaScript로 만들은 Hello World를 살펴보자

참고자료
Getting started with Windows Metro style app development
http://msdn.microsoft.com/en-us/library/windows/apps/br211386

* 이 예제는 Windows 8 Preview가 설치 되어 있어야지만, 만들고 실행이 가능하다. 그래서, 각 단계별 화면 설명은 생략한다.
(개발자라면 다들 기본적인 것은 알고 있지 않을까 하는..ㅎㅎ)

1. 프로젝트 만들기
File -> New Project -> 템플릿 중 JavaScript -> Windows Metro style를 선택 -> Blank Application을 선택 -> Name 입력 후 -> OK


2. 프로젝트가 만들어 지고 나면
화면에 default.html, default.js 2개의 파일이 열려 있는 것을 볼 수 있다. default.html은 View, default.js는 ViewModel, default.css는 Presenter의 역활을 하게 되는 것으로, 이제 JavaScript프로젝트도 MVVMP가 적용이 되는 것이다.


3. default.html 수정

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorldWinWebAppJava</title>
    <!-- WinJS references                            dark를 light로 변경-->
    <link rel="stylesheet" href="/winjs/css/ui-light.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    <!-- HelloWorldWinWebAppJava references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
</head>
<body>
    <button onclick="click">Click me!</button>
    <p id="myText" />
</body>
</html>


4. 실행을 하면,
시물레이터가 뜨거나 로컬 머신에 바로 실행 하거나 2개 중에 하나의 작업을 하는데,
시물레이터가 실행되면 결과 확인 후 시물레이터를 죽여야, 다음에 실행시 오류가 나지 않으며, 로컬 머신에서 실행이 될때는 Alt+F4키를 눌러서 엡을 닫고 Alt+Tab으로 화면을 전환해야 다음에 실행시 오류가 나지 않는다.


5. 화면을 확인하면
버튼 하나 뜨고 눌러도 아무 동작도 되지 않는다. 이벤트 코딩을 추가해야하는데, default.js로 넘어가자

(function () {
    'use strict';
    // Uncomment the following line to enable first chance exceptions.
    // Debug.enableFirstChanceException(true);

    WinJS.Application.onmainwindowactivated = function (e) {
        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // TODO: startup code here
            document.addEventListener("click", function () {
                myText.innerText = "Hello Windows Metro style apps with JavaScript!";
            });
        }
    }

    WinJS.Application.start();
})();

다큐먼트에 이벤트 리스너를 추가해 준다. 이제 버튼의 크기와 출력되는 글씨의 크기를 조정해 보도록 하자.

6. 블랜드 5를 실행한다.
이제 블랜드 5는 xaml 디자인 툴이 아니라 HTML 디자인 툴이다. xaml은 VS2011에서 블래드 4와 같은 방식으로 작업이 가능하다.
버튼을 선택 -> CSS Properties 선택 -> button, button.... 선택 -> Sizing -> width : 300px, height : 170px 입력

myText 선택 -> abbr, acronym, address... 선택 -> Text -> font-size : xx-large 선택


F5 눌러서 실행(시물레이터 화면)


7. 간단하게 Windows 8환경에서 WinWebApp을 만들어 보았다.
HTML5 + JavaScript + WinRT기반의 엡이라는 신기한 모양의 엡이 앞으로 어떤 변화를 주게 될지 기대가 된다.
반응형
저작자표시 비영리

'Previous Platforms > Samples' 카테고리의 다른 글

Using MEF in Windows 8 CP Metro style app  (2) 2012.04.02
XAML AppBar control sample  (0) 2012.03.29
Create your first Metro style app using C# or Visual Basic  (0) 2012.03.12
Hello World in Windows 8 Metro style app  (0) 2012.03.01
BindableApplicationBar 사용하기  (0) 2012.01.27
댓글