[Noenemy]'s microgroove

지난 시간에는 Gadget의 Flyout 기능을 구현하고, Gadget과 Flyout 간에 서로 연동하는 방법에 대해서 간단히 살펴 보았습니다. 이번에는 Gadget의 실행에 필요한 환경 설정 기능을 구현할 수 있는 Settings 기능을 구현하는 방법을 알아보도록 하겠습니다.

전체적으로 지난 회에 작성한 예제를 그대로 이용하되 Hello.html 페이지에 보여지는 내용을 좌에서 우로 글자가 흐르는 전광판 효과 기능을 추가로 구현하고자 합니다. 그리고 Settings 페이지 기능을 담당할 Settings.html 페이지를 추가로 제작할 것입니다. Flyout.html 페이지는 기존 예제의 것을 그대로 이용합니다. 관련 내용을 확인하려면 Windows Sidebar Gadget 만들기 #2 – Flyout 문서를 참고하시기 바랍니다.

우선 Settings에 사용되는 여러 설정 정보들을 저장하고 저장된 값을 불러오는 기능이 필요합니다. 설정 값을 저장하기 위해서 System.Gadget.Settings.write 또는 System.Gadget.Settings.writeString 함수를 사용하면 되고, 저장된 값을 불러오기 위해서는 System.Gadget.Settings.read 또는 System.Gadget.Setting.readString 함수를 이용하면 됩니다. 보다 자세한 내용은 아래 MSDN 문서를 참고하시기 바랍니다.

System.Gadget.Settings Object
http://msdn.microsoft.com/en-us/library/ms723661(VS.85).aspx

자. 이제 실제 예제를 통해서 구현하는 방법을 알아보도록 하겠습니다. Gadget의 주 기능을 담당하는 Hello.html 페이지를 다음과 같이 작성하였습니다.

전체 구조는 지난 번에 작성한 코드와 동일합니다. 페이지 초기화를 담당하는 Init() 함수, 전광판 효과로 문장을 화면에 출력하는 DisplayMessage() 함수, Settings 창이 닫혔을 때 이에 대한 이벤트를 처리하는 SettingsClosed() 함수가 추가로 작성되었습니다.

Hello.html

우선 script에서 다음 코드는 현재 Gadget의 Settings 페이지로 ‘Settings.html’을 사용하겠다는 것을 의미합니다.

    // settingsUI로 사용할 페이지 등록
    System.Gadget.settingsUI = "Settings.html";

이렇게 settingsUI 속성에 특정 페이지를 지정하면 Gadget에서 Settings 설정을 이용할 수 있도록 활성화됩니다. 다음과 같이 Gadget에서 Settings 화면을 보려면 우측에 위치한 도구 모양의 아이콘을 클릭하거나, Gadget을 오른쪽 마우스 버튼으로 클릭한 뒤에 컨텍스트 메뉴에서 ‘Options’ 항목을 선택하면 됩니다.

[그림] settingsUI를 실행시키는 방법

Init() 함수는 Gadget 실행을 위한 초기 환경을 설정하는 역할을 담당합니다. 화면에 표시할 문자열 정보가 “Message”라는 이름으로 저장되어 있는지 확인하고 없으면 default 문자열을 저장합니다. 이번 예제에서 Settings 페이지에서는 default 문자열을 사용자가 원하는 문자열로 변경할 수 있도록 해주는 역할을 담당합니다.

script의 상단부에 보면 다음과 같이 onSettingsClosed 속성에 SettingsClosed 함수를 등록하였는데, Settings 창이 오픈 되었다가 close 될 때의 이벤트를 Gadget에서 받아서 처리할 수 있도록 여기에 등록된 함수를 호출해 줍니다.

    // settings 윈도우가 close 될 때의 이벤트 처리를 담당할 핸들러
    System.Gadget.onSettingsClosed = SettingsClosed;

Settings 페이지에서는 간단히 사용자로부터 전광판에 출력하고 싶은 문자열을 입력 받도록 되어 있는데, SettingsClosed() 이벤트 핸들러에서는 단순히 Init() 함수를 재호출함으로써 수정된 내용을 반영하도록 구현되어 있습니다.

DisplayMessage() 함수는 긴 문자열을 우측에서 좌측으로 물 흐르듯이 전광판처럼 출력해주는 기능을 구현합니다. 문장이 길 경우에 좌우 폭이 좁은 Gadget에서는 한 줄에 다 보여줄 수 없는 경우가 있기 때문에 nMaxLength 수만큼의 글자수에 해당하는 문자만 보여지도록 스트링을 처리하는 로직이 구현되어 있습니다. 사실 이 부분은 글자체나 사용하는 언어에 따라서 글자폭이 다를 수 있기 때문에 의도한 것처럼 보여지지 않을 수 있습니다.

자, 이제 Settings 페이지를 구현해보도록 하겠습니다.

Settings.html

위 코드에서 script의 시작부분에 보면 다음과 같이 Settings 창이 종료될 때의 이벤트를 처리할 함수를 등록하는 부분이 있습니다. 이 예제에서는 SettingsClosing() 함수를 이벤트 핸들러로 등록하였습니다.

   // Settings 창 close를 처리할 핸들러 등록
    System.Gadget.onSettingsClosing = SettingsClosing;

SettingsClosing() 함수의 구현부를 보시면 사용자가 ‘OK(commit)’ 버튼을 클릭한 경우에 사용자가 입력한 텍스트를 “Message”라는 이름으로 저장하는 것을 확인할 수 있습니다. 이렇게 저장된 값은 Hello.html 페이지의 Init 함수에서 다시 읽어서 사용하므로 결과적으로 사용자가 설정한 문자열을 이용해서 전광판에 표시하는 효과를 얻을 수 있도록 구현한 것입니다.

[그림] Settings.html의 실행 결과

이로써 지난 시간에 이어 Flyout과 Settings을 구현하는 방법을 간단한 예제를 통해 알아 보았습니다.

지난 시간에 만들었던 Hello Gadget 예제에 Flyout 기능을 추가해보도록 하겠습니다.

Flyout이란 원래 있는 Gadget 으로부터 숨겨져 있던 페이지가 좌우로 펼쳐지는 것을 의미합니다. 일반적으로 Gadget이 Sidebar에 도킹되어 있고 이 경우에는 화면에 보여지는 크기가 제한적입니다. 따라서 Gadget에는 아주 간단한 요약된 정보만을 보여주게 됩니다.

따라서 이러한 Gadget의 제한된 크기 때문에 충분한 정보를 보여주지 못하는 경우가 발생합니다. 우리가 게시판에서 게시물의 제목을 클릭해서 본문 내용을 확인하는 것과 같은 방법으로 보다 세부적인 내용을 보여줄 필요성이 있습니다. 이러한 경우에 Flyout 페이지를 이용해서 확장된 내용을 사용자에게 보여줄 수 있습니다.

Gadget에서는 System.Gadget.Flyout 객체를 통해서 Flyout을 제어할 수 있습니다. 예를 들어서 다음 코드는 Flyout에 사용할 페이지를 지정하고 이를 보여주도록 하는 코드 입니다. (작성시 element와 property, method의 대소문자를 잘 구분해서 입력해야 합니다.)

위 예제 코드에서 짐작할 수 있듯이 Flyout에 보여지는 내용도 역시 HTML 페이지라는 것을 알 수 있습니다. 여기서는 ‘flyout.html’이라는 파일을 예로 사용했습니다. 즉, 위 코드 내용은 flyout.html 이라는 페이지를 Flyout으로 지정하고 이를 화면에 보여지게 해라라는 의미입니다.

지난번에 작성했던 Hello.html에 Flyout 관련해서 코드를 다음과 같이 추가해봅시다.

Hello.html

위와 같이 작성할 경우 화면에 보여지는 Hello gadget의 모습은 다음과 같습니다. Gadget의 하단부에 ‘Show Flyout’이라는 링크가 새롭게 추가되었는데, 이를 선택하면 위 코드에서 작성한 ShowFlyout()이라는 javascript 함수를 호출하도록 구현하였습니다.

ShowFlyout() 함수에서 주요 내용을 살펴보면 다음과 같습니다.

우선 본 예제에서 Flyout 으로 사용할 페이지 flyout.html이라는 페이지로 지정 하였습니다. 해당 페이지에 대한 내용은 곧 설명 드리도록 하겠습니다.

       System.Gadget.Flyout.file = "flyout.html";

그 다음 코드를 살펴보도록 하겠습니다. Flyout 객체의 show 속성을 참고함으로써 현재 Flyout이 보여지고 있는 상태인지 확인하는 if 구문이 있습니다. 일종의 토글 스위치와 같은 역할을 하고 있는데, Flyout이 보여지고 있는 상태이면 이를 숨기고, 숨겨진 상태이면 이를 보여지게 하는 코드입니다. 그리고 각 상황에 맞게끔 Gadget 페이지에 보여지는 내용을 ‘Show Flyout’ 또는 ‘Hide Flyout’으로 변경하는 코드입니다.

        if (System.Gadget.Flyout.show == true)
       {
            System.Gadget.Flyout.show = false;
            System.Gadget.document.getElementById("strFlyoutCommand").innerText = "Show Flyout";    
       }

자 그럼. 이제 Flyout 페이지의 내용을 작성해보도록 하겠습니다. 다음과 같이 코드를 작성하고 hello.html 페이지가 위치한 동일한 폴더에 flyout.html 이름으로 저장합니다.

Flyout.html

Flyout 을 구현하는데 있어서 가장 궁금한 부분은 Flyout과 Gadget 간의 상호 연동하는 방법에 대한 것일 겁니다. 예를 들어 웹 브라우저에서 parent window와 child window 간에 서로 데이터 교환이나 창을 제어하는 등의 작업이 필요하듯이 Gadget과 Flyout도 서로 밀접하게 사용되는 일이 많을 것이기 때문입니다.

현재 페이지가 Flyout인데 Gadget 객체에 접근하려면 간단히 System.Gadget 객체를 이용하면 됩니다. 그리고 Flyout 페이지에서도 System.Gadget.Flyout 객체를 이용해서 접근해야 한다는 것만 이해하시면 나머지는 HTML DOM 객체를 계층적으로 접근하면 됩니다.

다음은 위 코드 예제에서 Flyout에서 Flyout을 숨기는 방법과 Gadget의 element에 접근해서 내용을 수정하는 예를 보여주고 있습니다.

    function HideFlyout()
    {
        System.Gadget.Flyout.show = false;
        System.Gadget.document.getElementById("strFlyoutCommand").innerText = "Show Flyout";   
    }

그리고 다음 코드는 Flyout 페이지에서 Gadget 페이지의 배경색을 변경하는 코드입니다. System.Gadget.document 로 Gadget의 document element에 접근하고 그 하위에 있는 body.style.backgroundColor 속성에 접근해서 배경색을 지정하는 코드 예입니다.

    function ChangeColor(strColor)
   {
        System.Gadget.document.body.style.backgroundColor = strColor;
   } 

이제 작성된 코드를 실행한 결과를 확인해보겠습니다.

[그림] Flyout을 확장한 모습

[그림] Flyout 페이지에서 Gadget 페이지의 배경색을 변경한 모습

[그림] Flyout이 숨겨진 모습

다음 회에서는 Option 페이지를 추가하는 방법에 대해서 알아보도록 하겠습니다.

컴퓨터를 이용해서 영화를 많이 보기 때문인지 와이드 스크린을 가진 디스플레이 장치가 보편화 되고 있습니다. 전통적인 4:3 비율의 화면 크기에 익숙한 사람들은 16:9 비율의 화면을 보면 좌우로 넓어서 뭔가 좀 허전하게 느껴지기도 합니다. 하지만 Windows Vista에서 소개하고 있는 Windows Sidebar를 잘 활용하면 바탕화면을 보다 다양한 정보로 그리고 필요한 정보를 바로 바로 확인할 수 있습니다. 개인적으로 와이드 스크린 디스플레이 장치를 이용할 경우 보다 자연스러운 화면 구성이 가능한 것 같습니다.

다음은 제가 사용중인 노트북의 Windows Vista에서 우측 바탕화면에 자리잡고 있는 Windows Sidebar입니다. 달력이나 시계, 이미지 뷰어와 같은 작은 응용 프로그램들이 동작 중인데 Sidebar에서 실행되는 작은 프로그램을 가젯(Gadget)이라고 합니다. 이러한 Gadget은 실제로 html page와 java script를 이용해서 구현된 일종의 웹 페이지 입니다. 앞으로 연재를 통해서 Windows Sidebar Gadget을 만드는 방법을 간단한 예제를 통해서 알아보도록 하겠습니다.

[그림] Windows Sidebar와 실행중인 Gadget들

먼저 그 첫번째 순서로서 ‘Hello, Gadget!’라는 메시지를 보여주는 간단한 샘플을 만들고 이 gadget을 추가하는 방법을 알아보도록 하겠습니다.

Gadget을 저장할 폴더 만들기

Gadget은 특정 사용자에게만 보여질 것인지, 아니면 해당 시스템을 사용하는 모든 사용자에게 보여질 것인지에 따라 저장되는 위치가 결정됩니다. 아래 위치에 가보면 기본적으로 설치된 Gadget 들의 내용을 확인이 가능합니다.

각각의 Gadget은 위 저장위치에서 독립적인 폴더명을 가지는데 이때 반드시 ‘name.gadget’이라는 이름으로 저장되어야 합니다.

우선 Hello gadget 샘플을 위해 C:\Users\[username]\AppData\Local\Microsoft\Windows Sidebar\Gadgets\Hello.gadget 이라는 이름의 폴더를 생성하였습니다.

Hello.html 파일 만들기

앞서서 Gadget은 기본적으로 웹 페이지 형식으로 구현된다고 설명 드린바 있습니다. 화면에 간단히 Hello, Gadget이라는 인사문구를 보여주는 Gadget을 만들려고 합니다. 아래와 같이 웹 페이지를 만들고 앞서 만든 폴더에 ‘hello.html’이라는 이름으로 저장합니다.

Hello.html

Gadget XML 정의 파일 만들기

이제 저희가 만든 Hello Gadget을 Windows Sidebar에 어떻게 등록하는지 알아보도록 하겠습니다. Gadget들을 Hosting해서 실행시켜 주는 것은 Sidebar.exe라는 프로세스입니다. 이 Sidebar 프로세스에 새로운 Gadget을 추가하려면 해당 Gadget에 대한 기본적인 정보를 알려줘야 합니다.

작성한 Gadget에 대한 정보를 Sidebar.exe 프로그램이 인식할 수 있도록 XML 파일의 형태로 제작되어야 하는데, 다음과 같이 XML 파일을 작성하고 앞에서 생성한 폴더에 gadget.xml 파일로 저장합니다.

gadget.xml

위 XML 문서 내용을 보면 name, author, icons 등과 같은 여러 속성 정보를 제공하고 있는 것을 알 수 있습니다. 이러한 정보들이 어떻게 사용되는 지는 위 XML 문서 내용과 아래 Gadget 추가 윈도우에서 보이는 정보를 비교해보면 쉽게 이해가 되실 겁니다. 이 XML 파일에 대한 보다 자세한 설명은 아래 문서 내용을 참고하시기 바랍니다.

Gadgets for Windows Sidebar Manifest
http://msdn.microsoft.com/ko-kr/library/aa965879(en-us,VS.85).aspx

자. 이제 만든 Hello gadget을 등록해보겠습니다. Sidebar의 여백을 오른쪽 마우스버튼으로 클릭하고  컨텍스트 메뉴에서 ‘Add Gadgets’를 선택합니다.

현재 추가할 수 있든 Gadget의 리스트를 확인할 수 있습니다. 저희가 생성한 Hello Gadget의 정보도 확인 가능합니다. 아래 그림처럼 gadget.xml 파일의 속성 정보가 어떻게 사용되고 있는지 확인할 수 있습니다.

다음과 같이 Hello, Gadget!! 이라는 문장을 보여주는 Gadget이 실행됩니다.

다음에는 Flyout 기능을 구현하는 방법을 알아보도록 하겠습니다.