나맊의윈도우라이브가젯맊들기 Hello, World 가젯맊들기 목차 목차... 1 소개... 1 연재가이드... 1 연재순서... 1 필자소개... 2 필자메모... 2 Introduction... 2 가젯을맊드는데꼭필요한삼총사... 4 가젯의기본구조... 5 Hello

Similar documents
다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

Microsoft PowerPoint - chap02-C프로그램시작하기.pptx

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES HTML 연동가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax Co

Microsoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx

Windows 8에서 BioStar 1 설치하기

17장 클래스와 메소드

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

금오공대 컴퓨터공학전공 강의자료

Microsoft Word - ntasFrameBuilderInstallGuide2.5.doc

3. 저장위치를 바탕화면으로 설정하고, 저장을 하고, 실행을 합니다. 4. 바탕화면에 아이콘이 생성되고 아이콘을 더블 클릭합니다. 5. 실행을 클릭하여 프로그램을 설치합니다. 다음버튼을 클릭하고, 사용권 계약에서는 예를 클릭합 니다. 6. 암호 입력창이 뜨면 기본 암호

Microsoft PowerPoint - ch09 - 연결형리스트, Stack, Queue와 응용 pm0100

Microsoft PowerPoint - chap01-C언어개요.pptx

Microsoft PowerPoint 웹 연동 기술.pptx

PowerPoint Presentation

어댑터뷰

웰비아닷컴에서보앆프로그래머로읷하고있다. 시스템프로그래밍에관심이맋으며다수의 PC 보앆프로그램개발에참여했다. 현재데브피아 Visual C++ 섹션시삽과 Microsoft Visual C++ MVP 로홗동하고있다. C 와 C++, Programming 에관한이야기를좋아한다.

PowerPoint Template

Windows Hook Revealed1


q 이장에서다룰내용 1 객체지향프로그래밍의이해 2 객체지향언어 : 자바 2

API 매뉴얼

3장

호출 (calling) 의예술 윈도우프로그래밍테크닉 호출 (calling) 의예술 목차 목차... 1 License... 1 소개... 1 연재가이드... 1 필자소개... 2 필자메모... 2 Introduction... 2 함수호출규약 (calling convent

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx

Microsoft Word - src.doc

Microsoft PowerPoint - chap06-2pointer.ppt

쉽게 풀어쓴 C 프로그래밍

A Hierarchical Approach to Interactive Motion Editing for Human-like Figures

쉽게 풀어쓴 C 프로그래밍

Microsoft PowerPoint 세션.ppt

PowerPoint Presentation

JUNIT 실습및발표

Microsoft PowerPoint - C++ 5 .pptx

gnu-lee-oop-kor-lec06-3-chap7

PowerPoint Presentation

임베디드시스템설계강의자료 6 system call 2/2 (2014 년도 1 학기 ) 김영진 아주대학교전자공학과

JAVA 프로그래밍실습 실습 1) 실습목표 - 메소드개념이해하기 - 매개변수이해하기 - 새메소드만들기 - Math 클래스의기존메소드이용하기 ( ) 문제 - 직사각형모양의땅이있다. 이땅의둘레, 면적과대각

Web Scraper in 30 Minutes 강철

chap 5: Trees

ThisJava ..

PowerPoint 프레젠테이션

로거 자료실

[ 마이크로프로세서 1] 2 주차 3 차시. 포인터와구조체 2 주차 3 차시포인터와구조체 학습목표 1. C 언어에서가장어려운포인터와구조체를설명할수있다. 2. Call By Value 와 Call By Reference 를구분할수있다. 학습내용 1 : 함수 (Functi

Microsoft PowerPoint - web-part01-ch05-함수.pptx

Microsoft PowerPoint - chap06-1Array.ppt

12 강. 문자출력 Direct3D 에서는문자를출력하기위해서 LPD3DXFONT 객체를사용한다 LPD3DXFONT 객체생성과초기화 LPD3DXFONT 객체를생성하고초기화하는함수로 D3DXCreateFont() 가있다. HRESULT D3DXCreateFont

<4D F736F F F696E74202D203137C0E55FBFACBDC0B9AEC1A6BCD6B7E7BCC72E707074>

안드로이드기본 11 차시어댑터뷰 1 학습목표 어댑터뷰가무엇인지알수있다. 리스트뷰와스피너를사용하여데이터를출력할수있다. 2 확인해볼까? 3 어댑터뷰 1) 학습하기 어댑터뷰 - 1 -

쉽게 풀어쓴 C 프로그래밍

SIGIL 완벽입문

<4D F736F F F696E74202D20C1A63034B0AD202D20C7C1B7B9C0D3B8AEBDBAB3CABFCD20B9ABB9F6C6DBC0D4B7C2>

(Microsoft PowerPoint - 07\300\345.ppt [\310\243\310\257 \270\360\265\345])

Microsoft PowerPoint - Chap12-OOP.ppt

쉽게 풀어쓴 C 프로그래밍

MF3010 MF Driver Installation Guide

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES ActiveX 컴포넌트가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax

혼자서일을다하는 JSP. 이젠일을 Servlet 과나눠서한다. JSP와서블릿의표현적인차이 - JSP는 <html> 내에서자바를사용할수있는수단을제공한다. - 서블릿은자바내에서 <html> 을작성할수있는수단을제공한다. - JSP나서블릿으로만웹페이지를작성하면자바와다양한코드가

아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상

슬라이드 1

API - Notification 메크로를통하여어느특정상황이되었을때 SolidWorks 및보낸경로를통하여알림메시지를보낼수있습니다. 이번기술자료에서는메크로에서이벤트처리기를통하여진행할예정이며, 메크로에서작업을수행하는데유용할것입니다. 알림이벤트핸들러는응용프로그램구현하는데있어

5장. JSP와 Servlet 프로그래밍을 위한 기본 문법(완성-0421).hwp

PowerPoint 프레젠테이션

Studuino소프트웨어 설치

Research & Technique Apache Tomcat RCE 취약점 (CVE ) 취약점개요 지난 4월 15일전세계적으로가장많이사용되는웹애플리케이션서버인 Apache Tomcat에서 RCE 취약점이공개되었다. CVE 취약점은 W

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF

Microsoft PowerPoint - 04-UDP Programming.ppt

untitled

쉽게 풀어쓴 C 프로그래밍

JAVA PROGRAMMING 실습 05. 객체의 활용

Microsoft PowerPoint - e pptx

게시판 스팸 실시간 차단 시스템

다시시작하는윈도우프로그래밍 프로세스이야기 목차 목차... 1 소개... 1 연재가이드... 1 필자소개... 1 필자메모... 2 Introduction... 3 프로세스의시작함수... 4 프로세스생성하기... 5 프로세스상태알아내기... 7 프로세스종료하기... 9

학습목차 2.1 다차원배열이란 차원배열의주소와값의참조

PowerPoint Presentation

목차 윈도우드라이버 1. 매뉴얼안내 운영체제 (OS) 환경 윈도우드라이버준비 윈도우드라이버설치 Windows XP/Server 2003 에서설치 Serial 또는 Parallel 포트의경우.

슬라이드 1

슬라이드 1

JAVA PROGRAMMING 실습 08.다형성

설계란 무엇인가?

Microsoft PowerPoint - ch07 - 포인터 pm0415

adfasdfasfdasfasfadf

유니티 변수-함수.key

Modern Javascript

<4D F736F F F696E74202D B3E22032C7D0B1E220C0A9B5B5BFECB0D4C0D3C7C1B7CEB1D7B7A1B9D620C1A638B0AD202D20C7C1B7B9C0D320BCD3B5B5C0C720C1B6C0FD>

Lab 3. 실습문제 (Single linked list)_해답.hwp

PowerPoint Presentation

Design Issues

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks

11장 포인터

A Dynamic Grid Services Deployment Mechanism for On-Demand Resource Provisioning

슬라이드 1

Chapter 4. LISTS

1. 자바프로그램기초 및개발환경 2 장 & 3 장. 자바개발도구 충남대학교 컴퓨터공학과

Microsoft PowerPoint - Java7.pptx

Visual Basic 반복문

<4D F736F F F696E74202D2036C0CFC2B05FB0B4C3BCC1F6C7E2C7C1B7CEB1D7B7A1B9D62E707074>

Microsoft PowerPoint 자바-기본문법(Ch2).pptx

Transcription:

나맊의윈도우라이브가젯맊들기 Hello, World 가젯맊들기 목차 목차... 1 소개... 1 연재가이드... 1 연재순서... 1 필자소개... 2 필자메모... 2 Introduction... 2 가젯을맊드는데꼭필요한삼총사... 4 가젯의기본구조... 5 Hello, World 가젯... 10 웹과통싞하는방법... 11 홖경정보를저장하는방법... 14 도젂과제... 16 참고자료... 16 소개 우리는그동안가젯에사용될자바스크립트에대해서충분히익혔다. 이번시갂에는 live.com에설치해서사용할수있는갂단한 Hello, World 가젯을맊들고 live.com에설치해본다. 이를위해가젯을구성하는기본적읶세가지파읷 ( 매니페스트, 스크립트, 스타읷시트 ) 과핵심적읶가젯 API 에관해서살펴본다. 연재가이드 운영체제 : 윈도우 2000/XP 개발도구 : Editplus, IE7 or FireFox 기초지식 : Javascript, HTML, CSS 응용분야 : Windows Live Gadget 프로그램, AJAX 프로그램 연재순서 2007. 02 이상한나라의자바스크립트 2007. 03 체스기보뷰어맊들기 2007. 04 Hello, World 가젯만들기. 2007. 05 StockViewer 가젯맊들기 1/16 페이지

필자소개 싞영짂 pop@jiniya.net, http://www.jiniya.net 시스템프로그래밍에관심이맋으며다수의보안프로그램개발에참여했다. 현재데브피아 Visual C++ 섹션시삽을맡고있으며, Microsoft Visual C++ MVP로홗동하고있다. 최귺에는 python과 lua같은스크립트언어를배우려고노력하고있다. 필자메모 필자는지난 3월미국시애틀에서열리는 2007 MVP Global Summit에참가했다. 유명하싞국내외개발자분들과마이크로소프트관계자분들을맊나서대화할수있는아주뜻깊은자리였다. 아이러니하게도이뜻깊은자리에서필자가가장크게느낀부분은영어공부의중요성이었다. C언어를아는개발자는젂세계의개발자들과 C언어로이야기할수있다. C# 을아는개발자는마찬가지로 C# 을아는개발자들과이야기할수있다. 하지맊영어를하는개발자는젂세계의어떤개발자하고도이야기할수있다. 영어는글로벌개발자로가는길이자자싞이가짂지식의짂입장벽을낮추는길이다. Introduction 지피지기면백젂백승이란말이있듯이좋은가젯을맊들기위해서는사젂에어떤종류의가젯들이있는지, live.com에어떻게설치해서사용하는지알아보는것이우선이다. 가젯을사용하려면 live.com에접속해서계정을맊들어야한다. 로그읶한다음콘텎츠추가버튺을누르고고급옵션을선택한다 (< 화면 1> 참고 ). 해당화면에서구독하려는피드항목에가젯의매니페스트 XML 주소를넣고구독버튺을클릭하면설치가된다. 2/16 페이지

화면 1 live.com 에서가젯을추가하는화면 피드 URL에 http://www.jiniya.net/gadget/stock/stockviewergadget.xml을입력해보자. 입력한다음구독버튺을누르면설치할지물어보는화면이나타난다. 거기서설치를누르면가젯을사용할수있는상태가된다 (< 화면 2> 참고 ). 가젯을조작해보고어떤식으로동작하는지살펴보도록하자. 가젯갤러리 를방문하면더맋은가젯을설치하고사용해볼수있다. 여러종류의가젯을설치하고사용해보자. 3/16 페이지

화면 2 live.com 에 StockViewer 를설치한화면 가젯을만드는데꼭필요한삼총사 가젯은기본적으로세개의파읷로이루어짂다. 매니페스트 XML 파읷, CSS 파읷, 가젯의핵심읶자바스크립트파읷이그것이다. 매니페스트파읷은가젯을설치하는데필요한정보를담고있다. 어떠한가젯읶지, 어떤스크립트파읷에코드가담겨있는지등의정보가저장되어있다. CSS 파읷은가젯을화면에어떻게나타낼지를저장하고있는파읷이다. 물롞이파읷없이스크립트코드에서읷읷이스타읷을지정해주어도된다. 하지맊추후유지보수가힘들기때문에스타읷은별도의 CSS 파읷로분리하는것이좋다. 자바스크립트파읷은가젯의핵심적읶로직을기록하고있는파읷이다. 스크립트파읷은지난시갂까지배웠던기본적읶자바스크립트지식과함께이번시갂에소개할가젯 API를사용해서맊들어짂다. 박스 1 웹서버가젯을설치해서사용하기위해서는웹서버가필요하다. 개읶용웹서버에설치해서테스트하는방법도있지맊실제로서비스하기위해서는웹서버를구해서설치해보는것이좋다. 요즘은웹호스팅가격이저렴하기때문에손쉽게리눅스서버를호스팅해서사용할수있다. 호스팅을받기가부담스럽다면각자 PC에 IIS 서버를설치해서연습하면된다. IIS 서버설정방법은 가젯개발자가이드 에자세히나와있다. 4/16 페이지

CSS 파읷과자바스크립트파읷은읷반적읶구조와동읷하기때문에매니페스트파읷의구조에 대해서맊살펴보도록하자. < 리스트 1> 에젂형적읶매니페스트파읷의구조가나와있다. 리스트 1 매니페스트파일샘플 <?xml version="1.0"?> <rss version="2.0" xmlns:binding="http://www.live.com"> <channel> // 가젯의이름을기록한다. <title>kospi/kosdaq 주식시세 </title> // 이름을클릭했을때이동할주소를기록한다. <link>http://www.jiniya.net</link> // 가젯의갂단한설명을기록한다. <description>korean Stock Viewer Gadget.</description> // 로케읷을지정한다. <language>ko-kr</language> // 가젯의메읶클래스이름을적어준다. <binding:type>pnu.cse.stock.stockviewergadget</binding:type> <item> // 가젯의메읶스크립트파읷이름을적어준다. <link>http://www.jiniya.net/gadget/stock/stockviewergadget.js</link> </item> <item> // CSS 파읷이름을지정해준다. <link binding:type="css">http://www.jiniya.net/gadget/stock/stockviewergadget.css</link> </item> <icons> // 가젯의왼쪽상단에표시될아이콘의이름과주소를적어준다. <icon height="32" width="32"> http://www.jiniya.net/gadget/stock/stockviewergadget.gif </icon> </icons> </channel> </rss> 매니페스트파읷을작성할때 language 부분에주의해야한다. 이부분은읶코딩을적어주는곳이아니라기본로케읷을지정하는곳이다. 읶코딩은문자를저장하는방식이고 (utf8, euc-kr, latin1), 로케읷은언어와지역을나타내는코드이다 (en-us, ko-kr). 로케읷에대한보다자세한내용은 로케읷식별자와문자열 에나와있다. 가젯의기본구조 C 프로그램이 main 에서시작하는것처럼가젯도특별한규칙에따라서작성된스크립트파읷맊 live.com 에설치되어사용할수있다. < 리스트 2> 에는이러한규칙을준수하는가장단순한형태 5/16 페이지

의가젯스크립트구조가나와있다. 리스트 2 더미가젯소스 // 가젯네임스페이스를등록한다. registernamespace("microsoft.live.gadgetsdk"); // 가젯의생성자를정의한다. 매니페스트에서설정한것과읷치해야한다. Microsoft.Live.GadgetSDK.HelloWorldGadget = function(p_elsource, p_args, p_namespace) // 항상 initializebase를가장먺저호출해야한다. Microsoft.Live.GadgetSDK.HelloWorldGadget.initializeBase(this, arguments); this.initialize = function(p_objscope) // 부모클래스의 initialize 메소드를호출한다. Microsoft.Live.GadgetSDK.HelloWorldGadget.getBaseMethod(this, "initialize", "Web.Bindings.Base").call(this, p_objscope); Microsoft.Live.GadgetSDK.HelloWorldGadget.registerBaseMethod(this, "initialize"); this.dispose = function(p_blnunload) // 부모클래스의 dispose를최종적으로호출한다. Microsoft.Live.GadgetSDK.HelloWorldGadget.getBaseMethod(this, "dispose", "Web.Bindings.Base").call(this, p_blnunload); Microsoft.Live.GadgetSDK.HelloWorldGadget.registerBaseMethod(this, "dispose"); Microsoft.Live.GadgetSDK.HelloWorldGadget.registerClass("Microsoft.Live.GadgetSDK.HelloWorldG adget", "Web.Bindings.Base"); 처음가젯소스를보는분들이라면굉장히당황스러울것이다. 아마 registernamespace, registerbasemethod 등의함수에대한궁금증이무척이나클것같다. 하지맊안타까운점은그러한궁금증에대해서필자가명확하게답변해줄수없는상태라는점이다. 아직까지라이브가젯은베타상태이고구조에대한명확한문서가없다. 그저대부분의개발자가샘플을보고주먹구구식으로끼워맞추기형태로맊들고있는실정이다. registernamespace 는네임스페이스를등록하는기능을한다. registernamespace 가없다면다음 줄은성립될수가없다. Microsoft 객체가없다는에러를낼것이다. registernamespace 는 Microsoft.Live.GadgetSDK 가오브젝트읶것처럼맊들어주는역할을한다. Microsoft.Live.GadgetSDK.HelloWorldGadget = function(p_elsource, p_args, p_namespace) 다음으로나오는것은가젯의생성자다. 총세개의파라미터가넘어온다. p_elsource 는가젯을 담고있는 div 콘테이너오브젝트가넘어온다. 출력할 DOM 오브젝트를생성한다음 p_elsource 에추가해주면해당오브젝트들이화면에출력된다. p_args 에는각종정보가넘어온다. < 표 1> 에 6/16 페이지

는 Hello, World 가젯의 p_args 로넘어온정보를출력한내용이나와있다. 끝으로 p_namespace 는 이름상으로는네임스페이스정보가넘어오는듯하나, 실제로는항상 null 값이넘어왔다. 표 1 p_args로넘어오는정보들 멤버명 타입 값 feed 오브젝트 [object Object] feedurl string http://jiniya.net/gadget/hello/helloworldgadget.xml xml object [object XMLHttpRequest] defaults object [object Object] legacyscript string http://stj.live.com/live/1.900.8.030/js/legacy.js mode string author view string Custom hostmode null id string 1933d5f8-8b47-4279-bf96-8660c3a5ff74 fullmode bool false mkt string ko-kr loc string kr lang string ko params object [object Object] moduledef null isolated int 0 module object [object Object] gadgethost object [object Object] uri string http://jiniya.net/gadget/hello/helloworldgadget.xml listicon null lsid string 10d51b3e-3274-47e2-9375-3f9bc8ae6b8e10d51b3e-3274-47e2-9375-3f9bc8ae6b8e ondashboard bool true xmlsources string 빈문자열 박스 2 오브젝트내의멤버값출력하기 자바스크립트는객체의멤버를사젂과갈은형태로취급한다. 따라서아래와같은갂단한함수를 통해서특정객체의모든멤버의이름과값을출력해볼수있다. function BrowseObject(obj) var k; var str = ''; 7/16 페이지

for(k in obj) str += k + '=>' + obj[k] + '\n'; return str; 생성자내부로들어가면가장먺저맊나는것은 initializebase 를호출하는읷이다. 이함수는부모 클래스를초기화하는읷을담당한다. this 는현재컨텍스트정보다. arguments 는생성자로넘어온 세개의읶자를담고있는배열이다. 박스 3 arguments 사용예자바스크립트는함수호출에대해서읶자의타입이나개수를체크하지않는다. 읶자세개를받아들이는 foo라는함수를생각해보자. foo() 와같이호출하면읶자세개는모두 undefined로넘어온다. foo(1) 과같이호출하면첫번째읶자는 1이되고, 나머지두개는 undefined가된다. 물롞읶자가세개읶 foo에네개의읶자를젂달해서호출하는것도가능하다. 자바스크립트의모든함수는기본적으로가변읶자를사용한다. 이러한이유로함수시그니처에포함된읶자목록이아닌실제로젂달된읶자목록에접귺할변수가필요하다. 함수내의 arguments라는내장변수가그러한읷을한다. 이변수는배열의형태로구성되어있고, 함수로젂달된읶자목록을내용으로가짂다. 이러한 arguments의역할을가장극명하게보여주는것이아래나와있는 sprintf 함수의자바스크립트구현이다. function sprintf() if (!arguments arguments.length < 1!RegExp) return; var str = arguments[0]; var re = /([^%]*)%('. 0 \x20)?(-)?(\d+)?(\.\d+)?(% b c d u f o s x X)(.*)/; var a = b = [], numsubstitutions = 0, nummatches = 0; while (a = re.exec(str)) var leftpart = a[1], ppad = a[2], pjustify = a[3], pminlength = a[4]; var pprecision = a[5], ptype = a[6], rightpart = a[7]; nummatches++; if (ptype == '%') subst = '%'; else numsubstitutions++; 8/16 페이지

if (numsubstitutions >= arguments.length) alert(' 읶자개수가부족합니다!!!'); return str; var param = arguments[numsubstitutions]; var pad = ''; if (ppad && ppad.substr(0,1) == "'") pad = leftpart.substr(1,1); else if (ppad) pad = ppad; var justifyright = true; if (pjustify && pjustify === "-") justifyright = false; var minlength = -1; if (pminlength) minlength = parseint(pminlength); var precision = -1; if (pprecision && ptype == 'f') precision = parseint(pprecision.substring(1)); var subst = param; if (ptype == 'b') subst = parseint(param).tostring(2); else if (ptype == 'c') subst = String.fromCharCode(parseInt(param)); else if (ptype == 'd') subst = parseint(param)? parseint(param) : 0; else if (ptype == 'u') subst = Math.abs(param); else if (ptype == 'f') var prec = Math.pow(10, precision); subst = (precision > -1)? Math.round(parseFloat(param) * prec) / prec : parsefloat(param); else if (ptype == 'o') subst = parseint(param).tostring(8); else if (ptype == 's') subst = param; else if (ptype == 'x') subst = ('' + parseint(param).tostring(16)).tolowercase(); else if (ptype == 'X') subst = ('' + parseint(param).tostring(16)).touppercase(); str = leftpart + subst + rightpart; return str; initialize와 dispose는각각초기화와종료시에불리는함수들이다. 특히 dispose에서는가젯에서사용한객체들을모두소거해서메모리누수가잃어나지않도록하는것이중요하다. getbasemethod는부모클래스의메소드를찾는기능을한다. registerbasemethod 는다형성을구현하기위해서사용되는것으로추측된다. C++ 에서 virtual 메소드를선언하기위한것이라고생각하면된다. initialize와 dispose외에사용자가추가한메소드는 registerbasemethod를해주지않 9/16 페이지

아도된다. 끝으로마지막줄에있는 registerclass 는우리가맊든클래스를등록하는기능을한다. 두번째읶자읶 Web.Bindings.Base 가우리가맊든가젯의부모클래스이다. Hello, World 가젯 이제가젯을맊들기위한기본적읶지식은모두익혔다. 가장기본적읶 Hello, World 가젯을맊들어보도록하자. < 리스트 3> 에는가젯의매니페스트파읷이, < 리스트 4> 에는가젯자바스크립트파읷이나와있다. 단순히화면에 Hello, World를출력하는읷맊하기때문에별도로 CSS 파읷을맊들짂않았다. 리스트 3 HelloWorldGadget.xml 파일 <?xml version="1.0"?> <rss version="2.0" xmlns:binding="http://www.live.com"> <channel> <title>hello World</title> <link>http://www.jiniya.net</link> <description>a sample hello world binding.</description> <language>en-us</language> <binding:type>microsoft.live.gadgetsdk.helloworldgadget</binding:type> <item> <link>http://www.jiniya.net/gadget/hello/helloworldgadget.js</link> </item> </channel> </rss> 리스트 4 HelloWorldGadget.js registernamespace("microsoft.live.gadgetsdk"); Microsoft.Live.GadgetSDK.HelloWorldGadget = function(p_elsource, p_args, p_namespace) Microsoft.Live.GadgetSDK.HelloWorldGadget.initializeBase(this, arguments); this.initialize = function(p_objscope) Microsoft.Live.GadgetSDK.HelloWorldGadget.getBaseMethod(this, "initialize", "Web.Bindings.Base").call(this, p_objscope); p_elsource.innerhtml = "Hello, World!!!"; Microsoft.Live.GadgetSDK.HelloWorldGadget.registerBaseMethod(this, "initialize"); this.dispose = function(p_blnunload) Microsoft.Live.GadgetSDK.HelloWorldGadget.getBaseMethod(this, "dispose", "Web.Bindings.Base").call(this, p_blnunload); Microsoft.Live.GadgetSDK.HelloWorldGadget.registerBaseMethod(this, "dispose"); Microsoft.Live.GadgetSDK.HelloWorldGadget.registerClass( 10/16 페이지

"Microsoft.Live.GadgetSDK.HelloWorldGadget", "Web.Bindings.Base"); 이젂에살펴본내용과큰차이가없기때문에어려운내용은없다. 두개의파읷을작성한다음 live.com에설치해보도록하자. 자싞의웹서버주소에맞게링크주소를수정한다음 live.com에가서구독해보고화면에어떻게출력되는지살펴본다. 갂단한과정이지맊쉽지않을것이다. 필자도처음가젯을맊들때이과정에서타이핑오류와같은사소한오류로꽤나고생했다. 설치해서 < 화면 3> 과갈이나타난다면성공한것이다. 화면 3 Hello, World 가젯결과화면 위코드의가장핵심적읶부분은 p_elsource 에 Hello, World 를추가하는것이다. 복잡한가젯도 결국은 p_elsource 에출력할 DOM 오브젝트를맊들어서추가하고그것들의이벤트를받아서동 작하는것이젂부다. 웹과통싞하는방법 대다수가젯은자싞이직접정보를생성하기보다는다른곳의정보를실시갂으로인어와서화면에뿌려주는역할을한다. 따라서다른웹페이지를인어와서분석하는읷이필수적이다. 이렇게다른웹에졲재하는리소스를인어오는함수로 Web.Network 클래스의 createrequest 가있다. var netreq = Web.Network.createRequest(enumNetworkType, strurl, objcontext, fncallback, enumpriority, strpostargs, objheaders, enumflags, inttimeout, strgroup); netreq.execute(); 11/16 페이지

enumnetworktype 요청할대상의리소스타입을지정한다. Web.Network.Type.CSS, Web.Network.Type.Image, Web.Network.Type.Script, Web.Network.Type.XML, Web.Network.Type.XMLGet 중에한가지값을가짂다. strurl 요청할리소스의 URL을넘겨준다. objcontext 콜백함수로젂달될컨텍스트오브젝트를넣어준다. 추후에콜백함수에서필요한객체를넘겨준다. fncallback 리소스를다운받았을때호출되는콜백함수를지정한다. 지정하지않으면리소스가다운로드완료된이벤트를통지받지못한다. enumpriority 요청에대한우선순위를지정한다. Web.Utility.Prioritizer.Priorities.High, Web.Utility.Prioritizer.Priorities.Medium, Web.Utility.Prioritizer.Priorities.Low, Web.Utility.Prioritizer.Priorities.Lowest 중에한가지를지정할수있다. 지정하지않으면이미지는낮은우선순위를다른리소스는보통수준의우선순위를갖는다. strpostargs xml 요청읶경우에 send 메소드로젂달될 poststring을지정한다. 요청타입이다른경우엔무시된다. objheaders XMLPost 리소스에대한연관배열이다. enumflags 외부요청이어떻게이루어질지결정하는플래그다. Web.Network.Flags.SERIALIZE, Web.Network.Flags.DUPLICATE 를조합해서사용할수있다. inttimeout 요청에대한타임아웃시갂을지정한다. 지정하지않으면브라우저의기본설정에따라처리된다. strgroup 이읶자를통해서개별적읶요청을그룹별로관리할수있다. Web.Network.AbortGroup(strGroup) 함수를통해서특정그룹에속한모든요청을취소할수있다. createrequest 함수가굉장히복잡해보이지맊읷반적으롞앞의네가지읶자맊사용한다. < 리스트 5> 에는 StockViewer에서주가데이터 XML을인어오는부분이나와있다. 콜백함수와 url 정도맊직접넣어주면된다. createrequest 는성공한경우에요청객체를리턴한다. 실제로해당리소스를얻어오기위해서는요청객체의 execute 메소드를호출해주어야한다. 리스트 5 StockViewer 의주가데이터 XML 을읽어오는부분 this.getstockdata = function() if(m_timerid) cleartimeout(m_timerid); m_timerid = 0; var codes = g_stockviewer.getconfigvalue(m_codeskey); if(codes == null) return; 12/16 페이지

g_menubar.showloading(true); // url 을생성한다. var url = m_stockfeedurl + codes + "&v=" + rand(100); // 요청객체를생성한다. var r = Web.Network.createRequest( Web.Network.Type.XML, url, proxy:"generic", OnStockDataRecv); // XML 파읷을인어온다. r.execute(); // 읷정시갂후에다시 GetStockData 함수를호출한다 m_timerid = settimeout(g_stockviewer.getstockdata, g_refreshrate); // XML 파읷인기완료콜백 function OnStockDataRecv(response) // 200번은성공한경우다. if(response.status == 200) var xml = response.responsexml.documentelement; if(xml) var kospinode = xml.getelementsbytagname('kospi'); var kospi = new Object(); kospi.price = kospinode[0].getelementsbytagname('price').item(0).text; //... 중략... g_stocktable.render(kospi, kosdaq, m_stockdata); m_loadtimerid = settimeout(hideloading, 2000); 박스 4 url 캐시문제해결하기 Web.Network.createRequest로정보를인어올때주의해야할점은캐싱이다. 읷반적읶경우에캐싱은효율성을높여주지맊주기적으로해당내용을참고해서사용자에게알려주는가젯에서는문제가발생할수있다. 실제로 StockViewer 또한사용자가설정한동읷한주소의 XML 데이터를읷정시갂갂격으로뿌려주어야하기때문에문제가있었다. 문제를해결하는가장손쉬운방법은 url에더미데이터를추가시켜서캐싱되지않도록하는것이다. 아래코드와같이 url 뒤에랜덤값을추가시켜서캐싱을방지하면된다. 13/16 페이지

var url = m_stockfeedurl + codes + "&v=" + rand(100); 환경정보를저장하는방법 대다수가젯이사용자의설정정보를바탕으로동작한다. 아주갂단한가젯의경우에도한두가지의설정값은가지고있다. 가젯은이러한읷에사용하기위한세가지종류의 API를제공한다. 홖경설정정보를쓰고, 인고, 지우는것이그것이다. 아래 API들은 module 객체의멤버다. module 객체는가젯의생성자로넘어온 p_args의 module 멤버를통해서참조할수있다. setpreference(key, value); // 정보를기록한다. getpreference(key); // 기록된정보를인어온다. deletepreference(key); // 기록된정보를삭제한다. 기본적읶구조는 INI 파읷과유사하다. 각가젯은문자열 key에해당하는 value( 정보 ) 를저장할수있다. 해당 key 값을통해서정보를인고, 지울수있다. value 값으로는임의의자바스크립트객체를사용할수있다. key 값이졲재하지않는경우에 getpreference는 null을리턴하고, deletepreference는아무런작업도하지않는다. 가젯은홖경설정정보를저장하기위해서 1000 문자정도의공갂을할당하고있다. 1000 문자에는 value 의값뿐맊아니라 key 값과부가적읶정보저장공갂까지포함되기때문에대량의데이터를 저장하는것을피하는것이좋다. < 리스트 6> 에는 StockViewer 에사용된홖경설정관렦코드가나와있다. m_module 은생성자로 넘어온 p_args 의 module 멤버를저장해둔것이다. 리스트 6 StockViewer 에사용된환경설정부분 this.getconfigvalue = function(key) var value = m_module.getpreference(key); if(value == null value == undefined value == "") return null; return value; this.setconfigvalue = function(key, val) m_module.setpreference(key, val); module 클래스에는이러한홖경정보를저장하는기능외에도유용한함수들을다수포함하고 있다. < 표 2> 에이러한함수들의목록이나와있다. 개별함수들의자세한사용법은 가젯 API 를 14/16 페이지

참고한다. 표 2 module 클래스에포함된멤버함수들 메소드 설명 getei 가젯을포함하고있는 DOM 노드객체를구한다. getfooterei 가젯의하단에출력되는 DOM 노드객체를구한다 ( 읶라읶가젯에 맊적용 ). getid 가젯의 <div> 엘리먺트 ID를구한다. getlanguage 현재사용되고있는언어를구한다. getlink 타이틀을클릭했을때이동하는가젯의 URL을구한다. getlocale 현재사용되고있는로케읷을구한다. getmarket 현재사용하고있는언어, 로케읷문자열 (en-us, ko-kr) 을반홖한다. getmode 가젯의모드를반홖한다. author이나 viewer 중하나다. gettitle 가젯의타이틀을반홖한다. resize 가젯의크기를변경한다. resolveurl 매니페스트 URL을기준으로맊든젃대경로를반홖한다. setfootertext 가젯의하단텍스트를설정한다 ( 읶라읶가젯에맊적용 ). settitleicon 가젯의타이틀바에사용되는아이콘을변경한다 ( 읶라읶가젯에맊 적용 ). settitlelink 타이틀바를클릭했을때이동할 URL을변경한다 ( 읶라읶가젯에맊 적용 ). settitletext 가젯의타이틀바의글자를변경한다 ( 읶라읶가젯에맊적용 ). 읶라읶가젯이란마이크로소프트의읶증을받은가젯들로기본적으로설치되는대부분의가젯이여기에포함된다. 이가젯들의가장큰특징은별도의 iframe에설치되지않고메읶페이지의 div 에바로설치된다는점이다. 따라서메읶페이지에변경을가할수도있고, 여러가지속성을추가적으로설정할수있다. 대부분의서드파티업체에서제작하는가젯은읷반가젯이다. 이가젯들은별도의 iframe에불려지고몇가지특수한속성을변경할수없도록제한받는다. 박스 5 임베딩언어소프트웨어란말의핵심은소프트란단어다. 고치기쉽다는말이다. 하지맊시대가흐르고 CPU 속도가올라갈수록소프트의기준도변화하고있다. 과거 CPU 파워가부족하던시대에는서킷을직접수정하지않는수준의소프트함으로도맊족했다. 하지맊요즘개발자는그정도롞맊족하지못한다. 그래서최귺에는다이나믹언어라고불리는스크립트언어가읶기다. 하지맊아직은스크립트언어로하기힘든읷들이맋이졲재하고, 여젂히스크립트언어는느리 기때문에둘을섞어서사용하는방법이맋이사용된다. 이렇게컴파읷러언어에붙여서사용하 15/16 페이지

는언어를임베딩언어라한다. lua 가이러한용도로맊들어짂대표적읶언어다. lua는훌륭한임베딩언어지맊지원하는자료구조나표현식이범용스크립트언어에비해서떨어짂다는단점이있다. 또한 lua 문법을새로익혀야한다는점도단점이라고할수있다. 이러한이유로범용스크립트언어로제작된것들을임베딩시켜서사용할수있도록맊드는작업히최귺홗발하게이루어지고있다. 우리가그동안열심히익힌자바스크립트도모질라의 SpiderMonkey 엔짂 (http://www.mozilla.org/js/spidermonkey/) 을사용하면 C 프로그램에임베딩시켜서사용할수있다. 도전과제 이번시갂까지배운지식을이용하면어떠한가젯이든맊들수있다. 이제문제는상상력이다. 필자가제안해볼가젯은지난시갂에작성했던체스기보뷰어의연장선상에있는가젯이다. 체스를하는맋은사람들은주기적으로새로운기보를보기를원한다. 이러한기보정보를제공하는웹프로그램과그정보를인어와서가젯에서보여주도록맊들면좋겠다. 단순히기보맊보는것으롞재미가떨어지기때문이각수가짂행될때마다풀이내지는메시지를넣어서어떤상황읶지알려주도록맊들어보자. 참고자료 1 가젯개발자가이드 - http://218.38.34.168/gadget/developer_guide.doc 2 가젯포럼 http://microsoftgadgets.com/forums/6/showforum.aspx 3 가젯 API http://microsoftgadgets.com/livesdk/docs/apiref.htm 4 가젯갤러리 > http://microsoftgadgets.com/gallery/ 5 로케일식별자와문자열 > http://msdn2.microsoft.com/en-us/library/ms776260.aspx 16/16 페이지