배너위젯 제작법

|
위젯뱅크에 등록된지 벌써 한분기가 지났는데 이놈의 귀차니즘때문에 이제야 제작기를 올리게 되네요.

일단 배너위젯에 필요한 설정은 3개이다.


이미지경로, 링크경로, 툴팁으로 띄울 링크이름
이 설정들을 UserPref로 추가한다.
   <UserPref name="img" display_name="이미지경로"
        default_value="http://pimg.daum-img.net/widgetbank/img_banner.gif"/>
  <UserPref name="link" display_name="링크경로"
        default_value="http://widgetbank.daum.net" />
  <UserPref name="tooltip" display_name="링크이름"
        default_value="배너 위젯"/>
셋 다 텍스트 형태라 datatype은 없어도 된다.

이제 컨텐츠 영역을 만든다.
   <script type="text/javascript">
  
   ...
  
   </script>
   <div id="bannerArea"></div>
데이터를 가져와서 html 코드를 만들 script영역과 실제로 배너를 띄울 div만 있으면 된다.

이제 스크립트 코드 차례

   function setBanner() {
     var prefs = new gadgets.Prefs();
     var img = prefs.getString("img");
     var link = prefs.getString("link");
     var tooltip = prefs.getString("tooltip");

     var html = "";
     html += '<a href="' + link + '" target="_blank">';
     html += '<img src="' + img + '" alt="' + tooltip +  '" title="' + tooltip + '" border="0" width="166px" height="64px" /></a>';

     _gel('bannerArea').innerHTML = html;
   } 

배너를 셋팅하는 setBanner 함수를 만든다.
prefs에 사용자 설정을 얻어오는 객체를 생성하고,
img, link, tooltip에 데이터들을 받아온다.
<a> 태그의 href 속성에 link를 셋팅하고,
<img> 태그의 src 속성에는 img를, alt와 title속성에는 tooltip을 셋팅한다.
좀 더 이쁘게 보이도록 border는 0으로 했다.
그리고 위에서 만든 'bannerArea' div에 생성한 html을 집어넣으면 된다.

실제 기능을 하는 녀석들은 끝났고, 이제 위젯이 돌아갈때 이녀석을 부르기만 하면된다.

    gadgets.util.registerOnLoadHandler(setBanner);

setBanner를 실행하라는 구문이다.

이로써 기본적인 기능은 끝이다.
참 쉽죠~ 근데 이게 끝이 아니다.
몇가지 예외상황을 처리해줘야 한다.

이글루스에서는 몇몇 레퍼를 차단하고 있었다.
그래서 혹시나 이글루스에 포스팅된 이미지를 이미지 경로에 집어넣으면 이미지가 로딩이 되지 않고 엑박이 떠버린다.

그래서 이런 경우는 걸러줘야 하겠다.
이글루스의 이미지 파일 경로는 http://pds{서버번호}.egloos.com/pds ... 이런식으로 시작하니 이런 경우는 다른 이미지를 띄워주면 되겠다.

  if (img.search('http://pds.*egloos.com/pds.*')  == 0) {
     img = "http://pimg.daum-img.net/widgetbank/img_error.gif";
  }

img 내용중 'http://pds.*egloos.com/pds.* 이런 녀석이 있으면 이미지 로딩 배너로 주소를 재설정해준다.

이글루스의 포스팅 이미지로 이미지 경로를 세팅한경우 이미지 로딩 에러 배너가 나타나고 있다.

문제가 하나 더 생겼다. 일부 사용자들의 경우 http://를 입력하지 않는 경우가 있다.
그래서 그냥 주소만 입력한 경우에는 어휴~
이렇게 링크도 깨지고 이미지도 엑박이 뜬다.

http://로 시작하지 않는 경우는 앞에 http://를 붙여줘야 한다.

   if (link.substr(0, 7) != 'http://') {
      link = "http://" + link;
   }
   if (img.substr(0, 7) != 'http://') {
      img = "http://" + img;
   }

link와 img의 값의 처음 7자리가 http://가 아니면 앞에 http://를 붙여주는 부분이다.
완벽한 수행은 못하겠지만 대부분의 사용자 설정 오류를 잡아줄 것이다.

아래는 완성된 위젯코드

츠암~ 쉽죠잉~
저작자 표시 동일 조건 변경 허락
신고

'일상 > 일터' 카테고리의 다른 글

태극기 휘날리며!!  (2) 2009.07.14
배너위젯 제작법  (4) 2009.04.15
나만의 배너 설정방법  (60) 2009.01.23
톡틴게임 모음 위젯 제작기 Ver. 0.1  (0) 2009.01.06
Trackback 0 And Comment 4