Being a Developer: Windows gadget 만들기

Windows 7 에서 Gadget을 어떻게 만드는지 살펴 보았다.

Windows의 Gadget은 HTML 과 CSS 그리고 Javascript로 구성된다.

Windows의 Gadget은 종류에 따라 존재하는 위치가 다르다.

Windows gadget은 %programfiles%\Windows Sidebar\Gadgets

공유 gadget은 %programfiles%\Windows Sidebar\Shared Gadgets

그리고 사용자가 만든 User gadget은 %LOCALAPPDATA%/Microsoft/Windows Sidebar/Gadgets 에 위치한다.

Gadget은 Gadgets 폴더 안에 {Gadget Name}.gadget 형태로 구성되고, .gadget 폴더 안에는 Gadget의 Manifest를 기술한 gadget.xml 파일과 Gadget의 본체인 .html 파일들로 구성된다.

간단하게 Hello Gadget 이라는 문구를 출력하는 Gadget을 만들어 보았다.

사용자 Gadgets 폴더에 HelloGadget.gadget 폴더를 만들고 Manifest 파일인 gadget.xml 파일과 Gedget의 본체인 HelloGadget.html 파일을 위치시켰다.

HelloGadget.gadget

gadget.xml

HelloGadget.html

Gadget의 전반적인 구성을 기술한 Manifest 파일은 XML 형태로 작성되며 Gadget의 정보와 본체를 기술한 HTML 파일을 담고 있다.

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
  <name>Hello Gadget</name>
  <namespace>neodreamer.gadget</namespace>
  <version>0.0.0.1</version>
  <author name="NeoDreamer">
    <info url="http://neodreamer.tistory.com" />
    <logo src="logo.png" />
  </author>
  <copyright>© NeoSoft.</copyright>
  <description>Hello Gadget Example</description>
  <icons>
    <icon height="48" width="48" src="icon.png" />
  </icons>
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="HelloGadget.html" />
      <permissions>Full</permissions>
      <platform minPlatformVersion="1.0" />
      <defaultImage src="icon.png" />
    </host>
  </hosts>
</gadget>

Manifest에 담겨있는 각각 태그 항목의 의미는 아래 이미지와 같다.

Manifest의 태그 설명 (출처: MSDN)

태그에 대한 보다 자세한 설명은 MSDN을 참고 하면 된다.

http://msdn.microsoft.com/en-us/library/ff486356(v=vs.85)

Gadget의 본체를 구현한 HTML 파일은 아래처럼 간단한 내용을 담고 있다.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
        <style type="text/css">
        body
        {
            margin: 0;
            width: 130px;
            height: 75px;
            font-family: verdana;
            font-weight: bold;
            font-size: 20px;
        }
        #gadgetContent
        {
            margin-top: 20px;
            width: 130px;
            vertical-align: middle;
            text-align: center;
            overflow: hidden;
        }
        </style>
    </head>
    
    <body>
        <div id="gadgetContent">
        Hello Gadget!!
        </div>
    </body>
</html>

이렇게 작성 된 Gadget을 사용하려면 바탕화면에서 오른쪽 버튼을 클릭하면 나오는 메뉴에서 Gadgets 메뉴를 선택한다. 그러면 나타나는 Gadget목록 대화상자가 보여진다.

바탕화면 오른쪽 팝업 메뉴

Gadget 목록 대화상자

목록 중 원하는 Gadget에서 오른쪽 버튼을 클릭하여 나오는 메뉴에서 Add 메뉴를 선택하면 바탕화면에 추가한 Gadget이 보여진다.

Gedget 팝업 메뉴

추가된 Hello Gadget!!

Gadget은 시스템의 Sidebar에 생성이 되는 것으로 Vista에서는 출력 영역이 제한되었었지만 Windows 7으로 넘어오면서 제한이 풀려 바탕화면 어디에나 위치할 수 있다.

Gadget을 편집하기 위해서는 먼저 바탕화면에서 Gadget을 제거하고 수정한 다음 다시 추가해야 한다. 그렇지 않고 바탕화면에 추가된 상태에서 HTML 파일을 수정하면 반영이 되지 않는다.

HTML과 CSS 그리고 Javascript로만 구성되어 구현 범위가 상당히 제한적이지만 HTML5나 ActiveX 를 이용한다면 좀 더 확장할 수 있을 것 같다.

<

Original Post : http://neodreamer-dev.tistory.com/655

Being a Developer

2012/05/23

Windows gadget 만들기 - Hello Widget

No comments :

Post a Comment

Blog Archive