며칠전에 위젯 하나를 만들었는데요.

제 홈페이지 제목 옆에 붙어있는 Dday를 표시해주는 위젯입니다.

위젯 다운로드 페이지. http://www.zeroboard.com/16412395

 

소스가 간단해서, 제로보드에서 위젯 만드는 프로세스를 대충 설명을 같이 해놓을까 합니다.

 

우선, 제로보드의 위젯들은

/widgets 디렉토리 아래에 들어가게 됩니다.

여기에 위젯으로 만드실 class 명을 적어주시면 되는데요. 예를 들면 위의 D-Day위젯은 dday라는 클래스명을 갖고 있기 때문에 /widgets/dday에 설치가 됩니다.

/widgets/dday 아래에는, 실제 프로세스를 처리하는 dday.class.php 파일과, conf directory, skins directory가 놓여지게 됩니다.

 

conf 디렉토리의 info.xml파일은 다른 모듈의 conf파일과 마찬가지로, author의 정보와 확장변수에 대한 정보들을 담고 있는데요. dday파일의 info.xml은 아래 처럼 생겼습니다.

 

1. <?xml version="1.0" encoding="utf-8"?>
   <widget version="0.1">
           <title xml:lang="ko">D-Day</title>
           <author email_address="haneul0318@gmail.com" link="http://seungyeop.kr">
                   <name xml:lang="ko">haneul</name>
                   <description xml:lang="ko">D-Day를 표시해줍니다.</description>
           </author>
           <extra_vars>
                   <var id="event_name">
                       <name xml:lang="ko">이벤트 이름</name>
                       <type>text</type>
                       <description xml:lang="ko">D-Day를 계산할 이벤트명을 정합니다.</description>
                   </var>
                   <var id="event_date">
                       <name xml:lang="ko">이벤트 날짜</name>
                       <type>text</type>
                       <description xml:lang="ko">D-Day를 계산할 이벤트 날짜를 정합니다.(YYYY-MM-DD)</description>
                   </var>
           </extra_vars>
   </widget>

지정된 확장 변수의 id를 이용해 변수의 설정값을 실제 프로시져함수에서 받아서 사용할 수 있게 됩니다.

실제 dday.class.php 코드를 보면,

 

1. <?php
           /**
            *  @class dday
            *  @author haneul (haneul0318@gmail.com)
            *  @version 0.1
            *  @brief dday를 계산해줌
            **/
   
           class dday extends WidgetHandler {
   
                   function proc($args) {
                           $widget_info->event_name = $args->event_name;
                           $eventdate = strtotime($args->event_date);
                           if($eventdate == -1 || $eventdate == FALSE) return;
                           $now = strtotime("now");
                           $dday = (int) (($now - $eventdate) /60/60/24);
                           if($dday == 0) $widget_info->dday = "-day!";
                           else if($dday > 0) $widget_info->dday = sprintf("+%d", $dday);
                           else $widget_info->dday=$dday;
                           Context::set('widget_info', $widget_info);
                           $tpl_path = sprintf("%sskins/%s", $this->widget_path, $args->skin);
                           $tpl_file = 'list';
                           $oTemplate = &TemplateHandler::getInstance();
                           $output = $oTemplate->compile($tpl_path, $tpl_file);
                           return $output;
                   }
           }
   ?>

 

간단한 클래스라서 실제 프로시져를 처리하는 proc함수 밖에 없는데요. 이 proc함수가 위젯을 보여줄 때 실제 불리게 되는 함수입니다. 이 함수에서는 $args라는 파라미터로 serialize된 확장변수의 값들을 받게 됩니다.

 

위에서 11번째줄이랑 12번째 줄에서 $args 에 세팅된 확장변수의 값들을 받고 있는 것을 보실 수 있는데요, 아까 conf에서 지정해준 id를 이용해서 받게 됩니다.

 

그리고 나면 위젯에서 실제로 해야하는 일들을 처리해준다음에 이를 $widget_info에 넣어서, 다시 Context에 setting해줍니다. 이렇게 하면 skin에서 {$widget_info->id}을 이용하여 접근해 사용할 수 있습니다.

 

그 뒤에는 템플릿 처리 부분인데요 skins/스킨명/list.html을 템플릿으로 사용하겠다는 내용입니다.

 

마지막으로 skin파일을 보시면, skin은 skins/스킨명 아래에 list.html과 skin.xml파일을 갖고 있는데요. skin.xml은 위젯의 info.xml과 비슷하게 스킨에 대한 정보들을 갖고 있습니다.

 

1. <span class="dday">[{$widget_info->event_name} D{$widget_info->dday}]</span>

 

list.html은 아주 간단합니다. 템플릿 코드를 이용해서 widget_info에 설정되어있는 event name과 아까 계산한 dday를 찍어주게 됩니다.

 

이렇게 하고, 레이아웃이나 페이지에다가 만드신 위젯을 골라서 넣어주시면 그 페이지나 레이아웃을 XE가 부를 때마다 위젯 처리를 (혹은 캐시에서 로딩을) 하게 되는 것이지요.

원본글 : http://seungyeop.kr/?mid=textyle&vid=blog&document_srl=3993

제가 자주 보고, 기록 저장 하는 곳이기 때문에 불펌했다고 생각하지 마세요^^;
XpressEngine(구 제로보드) 잘 활용하고자 하는 것이니~ ㅎㅎ

그리고 아직 글들이 분류가 제대로 되지 않았네요~ 과도기적인 시점이라서 -0-;
회사일도 있고 해서 -0-; 참고로 저는 asp 쪽이라 왔다 갔다 하는게 좀 힘들답니다. ㅋㅋ