Being a Developer: Gadget

Showing posts with label Gadget. Show all posts

2012/06/20

SayRadio Windows Gadget

인터넷 서핑 중 SayRadio를 보고 블로그등의 웹페이지에 삽입할 수 있어 이를 Windows Gadget에 추가해 보았다.

작업은 그리 어렸지 않았다. Say Radio(http://saycast.sayclub.com/saycast/index/widget/sayclub)에서 Blog에 삽입하는 코드를 가져와서 Gadget의 본체에 넣어 주기만 하면 된다.

보기 좋게 크기 맞추고 스크롤바를 감춘 것이 모든 작업이다.

이 Gadget을 바탕화면에 추가하면 아래와 같이 보여진다.

2012/05/23 - [Dev Story/Tips] - Windows gadget 만들기 - Hello Widget

<

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

2012/05/24

Windows Gadget에 HTML5 적용하기

Windows Gadget에 HTML5를 적용하는 방법을 찾아 보았다.

검색을 해 보았지만 쉽게 나오지 않았다. 어렵사리 찾았는데 방법이 생각보다 쉬웠다. 레지스트리를 수정하는 것도 아니고 단순히 HTML 파일에 아래 내용만 더 기술하면 되는 것이였다.

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>

물론 시스템에 IE9가 설치 되어 있어야 한다.

HTML5의 중요한 속성중 하나인 Canvas를 테스트 해 봤다.

(HTML5 Canvas 소스 출처: http://www.w3schools.com/html5/html5_canvas.asp)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9"/>
        <meta http-equiv="Content-Type"    content="text/html;    charset=Unicode" />
        <style type="text/css">
        body
        {
            margin: 0;
            width: 200px;
            height: 100px;
            font-family: verdana;
            font-weight: bold;
            font-size: 20px;
        }
        #gadgetContent
        {
            margin-top: 0px;
            width: 100%: middle;
            text-align: center;
            overflow: hidden;
        }
        </style>
    </head>
    
    <body>
        <div id="gadgetContent">
        Canvas
        <canvas    id="myCanvas" width="200" height="50"></canvas>
        </div>
    </body>

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var grd=ctx.createLinearGradient(0,0,175,50);
    grd.addColorStop(0,"#FF0000");
    grd.addColorStop(1,"#00FF00");
    ctx.fillStyle=grd;
    ctx.fillRect(0,0,175,50);
</script>
</html>

실행한 결과 아래와 같이 HTML5 Canvas위에 그라데이션이 그려졌다.

&

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

2012/05/23

Windows gadget 만들기 - Hello Widget

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

Subscribe to: Posts ( Atom )