본문 바로가기

ETC

Microsoft MVP 커뮤니티 링크용 위젯을 만들어보자.

반응형

티스토리로 옮겨탄지 일주일이 채 안되었다.

가만히보니, 메뉴에 위젯이 없네??

네이버에서는 환율, 시계, 달력 등을 사용했는데...

아무래도 이번에는 기술적인 부분에서 많은 사용이 예상되므로

Microsoft 관련 위젯이 있으면 넣어야지~ 하는 맘으로 검색을 하였다.

 

 

 

 

어라?? 관련 위젯이 하나 있는데, Windows7 에 대한 정보를 주는것이다. (위의사진 참조)

일단 이거라도 추가하지뭐...

 

 

이건 또 뭔가?;;

사정이 뭔지는 모르겠지만, 퍼가기를 제한한다네....

으음;;

티스토리를 운영하는 사람들이 많은지 모르겠지만...

개인적으로 관련분야가 아닌담에는 정보를 잘 모르는것이 다반사..

 

그래서 생각했다.

http://www.krmvp.co.kr 을 좀 더 많은사람들에게 홍보하는 배너같은 위젯을 제작하면 어떨까...

(사실 별것도 아닌생각이다만...)

 

위젯을 만들어본적이 없었기에 잠시나마 공부...

 

아래는 다음위젯 테스트페이지..

 

 

콘텐츠영역 작성하기

콘텐츠는 실제 위젯의 내용이 표현되는 부분을 작성합니다. 콘텐츠는 <Content>영역 안에 작성되면 HTML, JavaScript, Flash 등으로 작성할 수 있습니다. HTML로 작성 될 경우 HTML의 내용은 <html>, <head>, <body> 태그를 제외한 실제 <body>태그 안에 작성되는 내용만을 작성합니다.

 

HTML 코드로 작성된 위젯 샘플 (이미지 클릭시 새창으로 링크를 여는 위젯)

<?xml version="1.0" encoding="UTF-8" ?>
 <Module>
   <ModulePrefs title="Go to Photo Album" height="100" scaling="false" />
   <Content type="html">
   <![CDATA[
    <div style="text-align:center"><a
       id="widgetbankBlog" title="Widgetbank Blog" target="_blank"
      href="http://blog.daum.net/widgetbank">
       <img border="0" alt="Photo" src="http://pimg.daum-img.net/widgetbank/widgetbank_beta.gif"
      title="Click Here."></a>
     </div>
   ]]>
  </Content>
 </Module>

 

<UserPrefs> 태그로 사용자가 위젯 설정시 환경값을 사용할 수 있게 할 수 있습니다.
사용가능한 데이터 타입은 string, bool, enum, hidden, list 등이 있습니다.

 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
   <ModulePrefs title="사용자 데이터 설정하기" height="150"/>
  <UserPref name="myname" display_name="이름" default_value="위젯뱅크"/>
   <UserPref name="myphoto" display_name="이미지" default_value="http://pimg.daum-img.net/widgetbank/widgetbank_beta.gif"/>
   <UserPref name="mychoice" display_name="이미지 선택" datatype="bool" default_value="true"/>
   <UserPref name="mycolor" display_name="배경색" default_value="White" datatype="enum" >
     <EnumValue display_value="빨간색" value="Red" />
     <EnumValue display_value="노란색" value="Yellow" />
     <EnumValue display_value="흰색" value="White" />
    </UserPref>
    <Content type="html"><![CDATA[
    <div id="content_div"></div>
    <script type="text/javascript">
    // 사용자 데이터를 가져옵니다.
    var prefs = new gadgets.Prefs();
 
   function displayGreeting () {
       var html = "";
  
     var element = document.getElementById('content_div'); 
     element.style.height='150px';
      // 사용자가 설정한 배경색을 가져옵니다.
      element.style.backgroundColor=prefs.getString("mycolor");

     // 사용자가 설정한 이름을 가져옵니다.
      html += "<br>반가워요! " + prefs.getString("myname") + "";
 
     // "이미지 선택"을 선택하면 이미지를 보여줍니다.
      if (prefs.getBool("mychoice") == true) {
        html += '<img src="' + prefs.getString("myphoto") + '">';
      }
      element.innerHTML = html;
    }
    gadgets.util.registerOnLoadHandler(displayGreeting);
 
   </script>
   ]]> 
  </Content>
 </Module>

 

 

 

위젯등록용 이미지는 손수제작했고...

요것을 사용해서 등록신청했다.

심사가 끝나면, 티스토리에 사용~~ ^^

근데, MVP 리더님께 한번 여쭤봐야할듯 ;;

내맘대로 MVP 커뮤니티를 링크걸어쓰면 안되니까....

문의해봐야겠다.

 

일단 사용법은 이런데,

위젯에서 모든게 컨트롤되도록 좀 더 공부해봐야겠다.

이상~

반응형