윈도우8 & WP Tip

[Windows 8] JavaScript Metro style app에서 C#라이브러리 참조하기 Linus 평점: 없음 조회: 3426
Windows  8 부터는 HTML5와 JavaScript, CSS로 윈도우 8의 Metro style App을 개발할 수 있고, XAML과 C# /VB/ C++과 같은 언어들을 이용해서도 Metro style App을 개발할 수 있습니다.

[Windows 8의 아키텍쳐]


위 그림은 Windows 8의 아키텍쳐입니다. 보시면 Metro style Apps 영역에 WinRT라는 런타임이 있고 그 위에 XAML과 네이티브 언어로 개발할 수 있는 환경과 HTML/CSS와 JavaScript로 개발할 수 있는 환경을 제공하는 것을 볼 수 있습니다.

그 중에서도 저는 HTML5와 JavaScript를 이용한 Metro style App개발에 대해 포스팅 하도록 하겠습니다.

하지만 이 두가지를 혼합하여 사용 할 수도 있는데요.
C#라이브러리를 JavaScript에서 가져다 사용할 수 도 있습니다.

오늘은 C#으로 만든 라이브러리를 JavaScript용 Metro style App에서 가져다 사용하는 방법을 알아보겠습니다.

먼저 Visual Studio 11을 실행하고
1. New Project -> Visual C#에서 Windows Metro style 템플릿 선택 -> Class Library를 생성합니다.



2. 프로젝트가 만들어 지면 Person 클래스를 추가하고 Name, Age, Gender 프로퍼티를 생성합니다.

(Class의 한정자로 반드시 sealed 선언을 하셔야 합니다.)


[샘플 코드]

    public sealed class Person

    {

        public string Name { getset; }

        public int Age { getset; }

        public bool Gender { getset; }

    }


그리고 프로젝트 속성으로 가셔서 Output Type을 WinMD file로 바꾸고 컴파일 합니다.
Output Type을 WinMD로 바꾸시면 이 라이브러리들을 Javascript를 사용하는 Metro style App에서 가져다 사용할 수 있게 됩니다.

[Output Type을 Win MD로 바꾸시고 컴파일 해주세요~]


다음으로 Javascript를 사용하는 Metro 프로젝트를 만듭니다.

3. New Project -> Other Language -> JavaScript -> Windows Metro style 템플릿에 Blank Application을 선택합니다.

4. 프로젝트가 생성되면 Add reference를 하고 ClassLib를 참조 합니다.
 
5. JavaScript 프로젝트에서 default.js에 다음과 같이 코딩합니다.
   

[샘플 코드]

var app = WinJS.Application;

    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {

            if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize 
                // your application here.
                var person = new ClassLib.Person();
                person.name = "Yun";
                person.age = 24;

                          person.gender = true;

                          document.getElementById("name").textContent = person.name;
                          document.getElementById("age").textContent = person.age;
                          document.getElementById("gender").textContent = person.gender;

            } else {
                // TODO: This application has been reactivated from suspension. 
                // Restore application state here.
            }
            WinJS.UI.processAll();
        }

 
자세한 코드 설명은 나중에 하기로 하고 지금은 C#라이브러리로 만든 클래스를 JavaScript에서 사용하는 부분에 초점을 맞추어서 보시기 바랍니다.

ClassLib.Person 클래스는 C#으로 만든 클래스이고 이것을 자바스크립트에서 만들어 값을 채우고 HTML의 h 태그에 값을 뿌리는 코드를 간단하게 만들어 보았습니다.

디버그 실행모드를 Simulator로 바꾸시고 실행하시면 다음과 같은 결과를 보실 수 있습니다.



감사합니다.

출처 : ryunad.tistory.com
태그 : 참조하기 app에서 c#라이브러리 Javascript Metro Style
작성자 정보
Linus
Level 61
 [EXP.21/250]

메일:  비공개

글등록 +12 1920 덧글등록 +3 1260
자기소개
글 공유하기 |
  tweet facebook
2012-05-16 오후 11:51:43
나도한마디
사용자
HOONS            [2012-05-17]
Level 99
 [EXP.만랩]
필수 정보네요 (^^)
사용자
오백만원            [2012-07-11]
Level 36
 [EXP.29/80]
신기합니다 ㅎㅎ 기존 닷넷유저라 윈8 접근하는데 수월할 것 같네요 ㅎㅎ
태그로 엮인글
[ASP.NET Q&A] visual studio 2010 javascript intellisense 안될때[1]  똑순아
[ASP.NET Q&A] api 개발 중 입니다. javascript 호출 관련해 조언 부탁드립니다.[1]  쑥쑥♥
[구인&교육정보] 안녕하세요. 엄준일 입니다. 한번씩 읽어주세요.  땡초
[ASP.NET Q&A] javascript에서 비하인드 코드 메소드 실행하는법[1]  덩하니
[WPF Q&A] 스타일에서 BasedOn 사용 중 오류가 납니다. [1]+1  개발자
[C#.NET Q&A] HttpWebRequest 를 사용해 읽어온 자바스크립트를 객체로 변환 질문[1]  초보자
[ASP.NET Q&A] javascript에서 ASP.NET 페이지를 호출하여 데이터를 리턴받으려고 합니다.  bncpride
[WPF Q&A] ComboBox Style을 정의했는데, 디자인에서 BorderThickness 를 유동적으로 사용하려합니다.  비가와요
[WPF Q&A] 이 두개의 TextBox 네모 박스 모양이 왜 다르게 표현될까요...?[3]+3 파일첨부 비가와요
[C#.NET Q&A] 비주얼스튜디오 에 html 이나 자바스크립트 개발가능한툴이 있나요?[4]  엿장수
글리스트
[windows8] 혹시나마 저같은 고생하시는분에게[1]  박기완
[Windows8] 1주차 아주아주 작은 팁이에요[2]  박기완
[Window 8] 스터디 1주차 숙제의 힌트예요![3]  상큼체리귤
[Window 8] 스터디 1주차 자료입니다.[6]  귤신
[RE] [Window 8] 스터디 1주차 자료입니다.[2]  Belgio
[Windows 8]WebView 컨트롤로 Html Text 표현하기 [4]+2  Linus
Windows 8에서 인터넷 연결 상태 체크하기[2]  Linus
Windows 8 CP에서 RP로 변경되면서 수정 사항들[1]+2  귤신
vmware player에서 Windows 8 RC 설치하기[3]+1  sa2랑
[Windows 8]XML을 JSON으로 변환해주는 Windows8용 라이브러리를 공개합니다.[2] 파일첨부 Linus
 ★현재글->   [Windows 8] JavaScript Metro style app에서 C#라이브러리 참조하기 [2]  Linus
Phone gap이 windows phopne 7 을 지원합니다.[2]  Linus
Windows Phone SDK 7.1 Beta 2 설치 가이드 라인[1]  달콤한만두
Mango 업데이트 후 Database 사용하기 [실전][2] 파일첨부 뱀미
Mango 업데이트 후 Database 사용하기[4]  뱀미
망고가 달지않은 분들을 위한 팁[3]+3  꿀대두
[MIX11] WP7에 맞게 새롭게 디자인 하기 Part2[1]+1  달콤한만두
[MIX11] WP7에 맞게 새롭게 디자인 하기 Part1 [1]+1  달콤한만두
[MIX11] 윈도우즈 폰의 XNA Framework에 어떠한 것들이 추가되는가? [1]+2  달콤한만두
[MIX11] 윈도우즈 폰의 실버라이트에 어떠한 것들이 추가되는가?   달콤한만두
[MIX11] 윈도우즈 폰 개발툴이 어떻게 새로워지는가?  달콤한만두