탭 라이브러리 사용하기

위젯/가젯에 탭으로 표현되는 사용자 인터페이스를 추가하기 위해 tab라이브러리를 사용할 수 있습니다.
tab을 사용하기 위해서 위젯/가젯스펙에 최소한 아래 사항은 포함시켜야만 합니다.
  • <ModulePrefs> 하위에, <Require feature="tabs" /> 태그를 포함시켜서 탭 라이브러리를 로드합니다.
  • 탭을 구동하고, 동작시키기 위해 자바스크립트를 사용합니다.

탭의 구성요소

탭 라이브러리는 다음의 객체들 상에서 동작하는 함수들과 CSS로 구성됩니다.

  • TabSet 객체 : 탭 객체는 탭전체를 아우르는 부모 컨테이너에 위치합니다. 프로그램 상으로, 탭 객체는 각 탭 객체들의 배열입니다.
  • Tab 객체 : 하나의 탭 객체는 색인된 탭들의 배열 중 하나의 탭을 가리킵니다. 일반적인 HTML 구현은 "name container'로 API상에 언급된 <td> 요소로 구현됩니다. 이 HTML은 gadgets.Tab.getNameContainer() 함수를 통해 접근 가능합니다.
  • 콘텐츠 컨테이너 : 하나의 콘텐츠 컨테이너는 각각의 탭 객체를 가진 콘텐츠를 포함합니다. 일반적인 HTML 구현은 "content container"로 API상에 언급된, <div> 요소로 구현되고, gadgets.Tab.getContentContainer() 함수을 통해서 이 HTML에 접근 가능합니다.

동작방법

gadgets.TagSet() 생성자를 사용하여, 탭 객체(탭들의 set을 포함하는 객체)를 생성할 수 있습니다.

var tabs = new gadgets.TabSet(__MODULE)ID__, "Tab");

일단, 탭 객체를 생성했다면, 개개의 탭을 addTab() 함수를 사용해서 추가할 수 있습니다.
탭은 index, name과 unique ID 세개의 구성요소를 가집니다.

각각의 ID는 <div> 태그의 ID와 매칭됩니다. 그 <div>는 탭의 콘텐츠가 위치하는 곳에 기술됩니다. 만약, <div> 컨테이너를 제공하지 않는다면, 탭 라이브러리는 기본적으로 하나를 생성합니다.

addTab(String tabName, Object opt_params) 함수는 아래와 같은 파라미터가 필요합니다.

  • String tabName : 생성할 탭의 이름
  • Object opt_params : 선택적 파라미터 객체
    • contentContainer(선택적) : 현재 탭의 콘텐츠 컨테이너로써 사용되고 있는 HTML 부분들. 이 부분을 생략하면, 탭 라이브러리가 하나를 기본으로 생성.
    • callback(선택적) : 탭이 선택될 때 실행될 함수
    • index(선택적) : 탭에 삽입될 순서 번호. 생략하면 새로운 탭은 맨 끝으로 추가된다.

addTab()은 탭 컨테이너 id DOM을 포함하는 String을 반환한다.
아래와 같은 방법으로 탭들을 탭셋에 추가하고, 콘텐츠를 동작시킬 수 있습니다.

방법 1 : 생성한 탭의 ID를 인식해서, 탭에 대응하는 <div>에 콘텐츠를 추가하기 위해 ID를 사용한다.

var one_Id = tabs.addTab("One");
document.getElementById(one_Id).innerHTML = "Content for tab One.";
var one_Id = tabs.addTab('<div style="color: red; font-weight: bold; background-color:#ccf;">One</div>');
document.getElementById(one_Id).innerHTML = "첫번째 탭 공간입니다.";

* 탭의 이름을 HTML 코드로 정의해서 추가할 수도 있습니다.

방법 2 : 탭을 만들고, 위젯/가젯의 HTML 부분에 해당하는 <div>를 추가하는 방법 - 정적 콘텐츠를 <div>안에 위치시킨다.

tabs.addTab("Two", "two_id");
...
</script>
<div id="two_id" style="display:none">두번째 탭 공간입니다.</div>

방법 3 : 탭을 만들고, 위젯/가젯의 HTML 부분에 해당하는 <div>를 추가하는 방법 - 정적 콘텐츠를 <div>안에 위치시킨다. 추가로 정적 콘텐츠에 동적인 콘텐츠를 추가하기 위해서 콜백 함수를 사용합니다. 

tabs.addTab("Three", "three_id", callback);
...
function callback(tabId) {
...
}
</script>
<div id="three_id" style="display:none">세번째 탭 공간입니다.</div>

방법 4 : 탭 추가시 이름으로 사용하기 위해서, addTab(tabName, opt_params)을 사용한다.

tabs.addTab("Four", {
 contentContainer: document.getElementById("domId"),
 callback: func,
 tooltip: "Tab Four"
});

아래는 서로 다른 방법으로 탭을 추가하고, 콘텐츠를 추가하는 예제입니다.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Tabs Demo" height="140" scrolling="true" >
    <Require feature="tabs" />
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
    <script type="text/javascript">
    // 탭을 초기화하고, 기본으로 선택될 탭의 이름으 지정합니다. (Two 탭은 삽입되어야 합니다.)
    var tabs = new gadgets.TabSet(__MODULE_ID__, "Two");
    function init() {
        // 방법 1 : 생성한 탭의 ID를 인식해서, 탭에 대응하는 <div>에 콘텐츠를 추가하기 위해 ID를 사용한다.
        var one_Id = tabs.addTab('<div style="color: red; font-weight: bold; background-color:#ccf;">One</div>');      
        document.getElementById(one_Id).innerHTML = "스크립트로 생성한 1번탭";
        // 방법 2 : 탭을 만들고, 위젯/가젯의 HTML 부분에 해당하는 <div>를 추가하는 방법 - 정적 콘텐츠를 <div>안에 위치시킨다.     
        tabs.addTab("Two", {
           contentContainer: document.getElementById("two_id")
        });
        // 방법 4 : 탭 추가시 이름으로 사용하기 위해서, addTab(tabName, opt_params)을 사용한다.
        tabs.addTab("Four", {           
           contentContainer: document.getElementById("four_id"),
           callback: callback,           
           tooltip: "I'm special"         
        });
        // 방법 3 : 탭을 만들고, 위젯/가젯의 HTML 부분에 해당하는 <div>를 추가하는 방법 - 정적 콘텐츠를 <div>안에 위치시킨다.
        // 추가로 정적 콘텐츠에 동적인 콘텐츠를 추가하기 위해서 콜백 함수를 사용합니다.
        // 인덱스를 넣어 2번째(0번째부터 시작)탭으로 넣어준다. index가 없으면 제일 뒤에 추가된다.
        tabs.addTab("Three", {
           contentContainer: document.getElementById("three_id"),
           callback: callback,
           index : 2
        });
    }
    // 3번째와 4번째 탭에서 불릴 동적 콘텐츠 함수이다.
    function callback(tabId) {
      var p = document.createElement("p");
      // 선택된 탭을 받아옵니다.
      var selectedTab = tabs.getSelectedTab();
      p.innerHTML = '탭 "' + selectedTab.getName() + '"에서 불린 동적 콘텐츠';
      document.getElementById(tabId).appendChild(p);
    }
    // 위젯/가젯이 로딩될 때 init를 호출한다.
    gadgets.util.registerOnLoadHandler(init);
    </script>
   <div id="two_id" style="display:none">2번탭의 콘텐츠로 사용될 영역</div>
   <div id="three_id" style="display:none">3번탭의 콘텐츠로 사용될 정적 영역</div>
  ]]>
  </Content>
</Module>


 

저작자 표시 비영리
신고
Posted by 코멧'★

제작한 위젯 테스트 페이지 : http://widgetbank.daum.net/factory/widget/edit

구글 가젯 에디터 IGoogle에 추가 할 수 있는 페이지 :
 http://www.google.co.kr/ig/directory?url=www.google.com/ig/modules/gge.xml

가젯 개발 가이드 (출처 : 다음 위젯 뱅크)

기본 작성법

다음 가젯은 XML을 기반으로 제작 된다. 기본 인코딩 방식은 UTF-8 방식 사용
<?xml version="1.0" encoding="UTF-8" ?>

기본 가젯 소스 샘플
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="간단한 위젯 만들기" />
  <Content type="html">
     <![CDATA[
       안녕하세요, 위젯뱅크입니다.
     ]]>
  </Content>
</Module>

  • <Module> 태그는 XML 파일내에 위젯/가젯이 포함되어 있음을 나타냅니다.
  • <ModulePrefs> 태그는 위젯/가젯 정보(제목, 설명, 제작자 등)를 포함합니다.
  • <UserPrefs>영역은 개인별 설정값이 저장됩니다.
  • <Content type="html"> 태그는 위젯/가젯의 컨텐츠타입(HTML)을 지정합니다.
  • <!CDATA[...]]> 영역안에 표현하고자 하는 위젯/가젯의 내용을 담아주세요.
  • 위젯/가젯은 XML, HTML 및 JavaScript 같은 단순 스크립트로 구성되며 HTML에 대한 기본사항만 숙지하고 있어도 쉽게 제작이 가능합니다.

    • XML - 범용 마크업 언어로써 인간과 컴퓨터가 모두 읽고 쓸 수 있는 방식으로 구조화된 데이터입니다.
    • HTML - 인터넷 페이지의 형식을 지정하기 위한 마크업 언어입니다. 위젯/가젯의 정적 콘텐츠는 거의 HTML로 작성됩니다. HTML은 XML과 유사하지만 데이터 설명보다는 웹 문서의 형식을 지정하기 위해 사용됩니다.
    • JavaScript - 위젯/가젯에 동적 동작을 추가하기 위해 사용되는 스크립트 언어입니다.

    위젯/가젯 개발시 특수문자는 아래와 같이 치환하여 사용한다. (XML 규정)

    & -> &amp;
    < -> &lt;
    > -> &gt;
    " -> &quot;
    ' -> &apos;


    콘텐츠 영역 작성하기

    콘텐츠는 실제 위젯의 내용이 표현되는 부분을 작성합니다. 콘텐츠는 <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>

    <UserPref> 태그설명
    name : 개발자가 컨트롤할 name명
    display_name : 사용자가 위젯을 사용하기 위해 세팅을 할때 사용자에게 보여줄 이름
    datatype : 설정값의 데이터 형식 (string(문자), bool(논리), enum(선택), hidden(숨김), list(목록) 등)
                   데이터 타입을 설정하지 않을 경우 기본 string으로 지정됩니다.
    default_value : 사용자가 설정을 하지 않을 시 기본값으로 설정할 값

    사용자 환경 설정 값은 아래와 같이 작성시 사용자에게 셀렉트 박스 형식으로 설정 가능하게 하여 줍니다.
    <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>

    사용자 환경 설정 값의 사용

    자바스크립트로 아래와 같이 기술시 사용자 환경값을 사용할 수 있습니다.
    var prefs = new gadgets.Prefs();

    실제 위와 같이 가젯 값을 설정시 prefs.getString("name") 으로 설정값을 참조 할 수 있습니다.


    가젯 데이터 환경 설정

    <ModulePrefs> 태그로 위젯/가젯에 사용될 특징들을 기술할 수 있습니다.
    이부분에서 설정한 값은 일반 사용자가 수정하거나 변경할 수 없습니다.

    <!--StartFragment--><?xml version="1.0" encoding="UTF-8" ?>
    <Module>
      <ModulePrefs title="사용자 데이터 설정하기" height="400"/>



    탭 라이브러리 사용하기

    위젯/가젯에 탭으로 표현되는 사용자 인터페이스를 추가하기 위해 tab라이브러리를 사용할 수 있습니다.
    tab을 사용하기 위해서 위젯/가젯스펙에 최소한 아래 사항은 포함시켜야만 합니다.
    • <ModulePrefs> 하위에, <Require feature="tabs" /> 태그를 포함시켜서 탭 라이브러리를 로드합니다.
    • 탭을 구동하고, 동작시키기 위해 자바스크립트를 사용합니다.

    탭의 구성요소

    탭 라이브러리는 다음의 객체들 상에서 동작하는 함수들과 CSS로 구성됩니다.

    • TabSet 객체 : 탭 객체는 탭전체를 아우르는 부모 컨테이너에 위치합니다. 프로그램 상으로, 탭 객체는 각 탭 객체들의 배열입니다.
    • Tab 객체 : 하나의 탭 객체는 색인된 탭들의 배열 중 하나의 탭을 가리킵니다. 일반적인 HTML 구현은 "name container'로 API상에 언급된 <td> 요소로 구현됩니다. 이 HTML은 gadgets.Tab.getNameContainer() 함수를 통해 접근 가능합니다.
    • 콘텐츠 컨테이너 : 하나의 콘텐츠 컨테이너는 각각의 탭 객체를 가진 콘텐츠를 포함합니다. 일반적인 HTML 구현은 "content container"로 API상에 언급된, <div> 요소로 구현되고, gadgets.Tab.getContentContainer() 함수을 통해서 이 HTML에 접근 가능합니다.

    동작방법

    gadgets.TagSet() 생성자를 사용하여, 탭 객체(탭들의 set을 포함하는 객체)를 생성할 수 있습니다.

    var tabs = new gadgets.TabSet(__MODULE)ID__, "Tab");

    일단, 탭 객체를 생성했다면, 개개의 탭을 addTab() 함수를 사용해서 추가할 수 있습니다.
    탭은 index, name과 unique ID 세개의 구성요소를 가집니다.

    각각의 ID는 <div> 태그의 ID와 매칭됩니다. 그 <div>는 탭의 콘텐츠가 위치하는 곳에 기술됩니다. 만약, <div> 컨테이너를 제공하지 않는다면, 탭 라이브러리는 기본적으로 하나를 생성합니다.

    addTab(String tabName, Object opt_params) 함수는 아래와 같은 파라미터가 필요합니다.

    • String tabName : 생성할 탭의 이름
    • Object opt_params : 선택적 파라미터 객체
      • contentContainer(선택적) : 현재 탭의 콘텐츠 컨테이너로써 사용되고 있는 HTML 부분들. 이 부분을 생략하면, 탭 라이브러리가 하나를 기본으로 생성.
      • callback(선택적) : 탭이 선택될 때 실행될 함수
      • index(선택적) : 탭에 삽입될 순서 번호. 생략하면 새로운 탭은 맨 끝으로 추가된다.

    addTab()은 탭 컨테이너 id DOM을 포함하는 String을 반환한다.
    아래와 같은 방법으로 탭들을 탭셋에 추가하고, 콘텐츠를 동작시킬 수 있습니다.

    방법 1 : 생성한 탭의 ID를 인식해서, 탭에 대응하는 <div>에 콘텐츠를 추가하기 위해 ID를 사용한다.

    var one_Id = tabs.addTab("One");
    document.getElementById(one_Id).innerHTML = "Content for tab One.";
    var one_Id = tabs.addTab('<div style="color: red; font-weight: bold; background-color:#ccf;">One</div>');
    document.getElementById(one_Id).innerHTML = "첫번째 탭 공간입니다.";

    * 탭의 이름을 HTML 코드로 정의해서 추가할 수도 있습니다.

    방법 2 : 탭을 만들고, 위젯/가젯의 HTML 부분에 해당하는 <div>를 추가하는 방법 - 정적 콘텐츠를 <div>안에 위치시킨다.

    tabs.addTab("Two", "two_id");
    ...
    </script>
    <div id="two_id" style="display:none">두번째 탭 공간입니다.</div>

    방법 3 : 탭을 만들고, 위젯/가젯의 HTML 부분에 해당하는 <div>를 추가하는 방법 - 정적 콘텐츠를 <div>안에 위치시킨다. 추가로 정적 콘텐츠에 동적인 콘텐츠를 추가하기 위해서 콜백 함수를 사용합니다. 

    tabs.addTab("Three", "three_id", callback);
    ...
    function callback(tabId) {
    ...
    }
    </script>
    <div id="three_id" style="display:none">세번째 탭 공간입니다.</div>

    방법 4 : 탭 추가시 이름으로 사용하기 위해서, addTab(tabName, opt_params)을 사용한다.

    tabs.addTab("Four", {
     contentContainer: document.getElementById("domId"),
     callback: func,
     tooltip: "Tab Four"
    });

    아래는 서로 다른 방법으로 탭을 추가하고, 콘텐츠를 추가하는 예제입니다.

    <?xml version="1.0" encoding="UTF-8" ?>
    <Module>
      <ModulePrefs title="Tabs Demo" height="140" scrolling="true" >
        <Require feature="tabs" />
      </ModulePrefs>
      <Content type="html">
      <![CDATA[
        <script type="text/javascript">
        // 탭을 초기화하고, 기본으로 선택될 탭의 이름으 지정합니다. (Two 탭은 삽입되어야 합니다.)
        var tabs = new gadgets.TabSet(__MODULE_ID__, "Two");
        function init() {
            // 방법 1 : 생성한 탭의 ID를 인식해서, 탭에 대응하는 <div>에 콘텐츠를 추가하기 위해 ID를 사용한다.
            var one_Id = tabs.addTab('<div style="color: red; font-weight: bold; background-color:#ccf;">One</div>');      
            document.getElementById(one_Id).innerHTML = "스크립트로 생성한 1번탭";
            // 방법 2 : 탭을 만들고, 위젯/가젯의 HTML 부분에 해당하는 <div>를 추가하는 방법 - 정적 콘텐츠를 <div>안에 위치시킨다.     
            tabs.addTab("Two", {
               contentContainer: document.getElementById("two_id")
            });
            // 방법 4 : 탭 추가시 이름으로 사용하기 위해서, addTab(tabName, opt_params)을 사용한다.
            tabs.addTab("Four", {           
               contentContainer: document.getElementById("four_id"),
               callback: callback,           
               tooltip: "I'm special"         
            });
            // 방법 3 : 탭을 만들고, 위젯/가젯의 HTML 부분에 해당하는 <div>를 추가하는 방법 - 정적 콘텐츠를 <div>안에 위치시킨다.
            // 추가로 정적 콘텐츠에 동적인 콘텐츠를 추가하기 위해서 콜백 함수를 사용합니다.
            // 인덱스를 넣어 2번째(0번째부터 시작)탭으로 넣어준다. index가 없으면 제일 뒤에 추가된다.
            tabs.addTab("Three", {
               contentContainer: document.getElementById("three_id"),
               callback: callback,
               index : 2
            });
        }
        // 3번째와 4번째 탭에서 불릴 동적 콘텐츠 함수이다.
        function callback(tabId) {
          var p = document.createElement("p");
          // 선택된 탭을 받아옵니다.
          var selectedTab = tabs.getSelectedTab();
          p.innerHTML = '탭 "' + selectedTab.getName() + '"에서 불린 동적 콘텐츠';
          document.getElementById(tabId).appendChild(p);
        }
        // 위젯/가젯이 로딩될 때 init를 호출한다.
        gadgets.util.registerOnLoadHandler(init);
        </script>
       <div id="two_id" style="display:none">2번탭의 콘텐츠로 사용될 영역</div>
       <div id="three_id" style="display:none">3번탭의 콘텐츠로 사용될 정적 영역</div>
      ]]>
      </Content>
    </Module>


     

    저작자 표시 비영리
    신고
    Posted by 코멧'★

    티스토리 툴바