사용자 인터페이스 만들기

이 문서에서는 다양한 사용자 인터페이스 요소를 가젯에 추가하는 방법에 대해 설명합니다.

목차

    1. 여러 콘텐츠 섹션 포함하기
    2. 뷰 연결
    3. 현재 가젯 뷰 결정
    4. 모든 사용 가능한 뷰 가져오기
    5. 다른 뷰로 이동
    6. equestNavigateTo를 통한 데이터 전달()
  1. 가젯 높이 조정
  2. 가젯 제목 설정
    1. tabs 개체 해부
    2. 기본원리
    3. 색인별로 탭 조작
    4. 탭 표시 맞춤설정
  3. 미니메시지
    1. 기본원리
    2. 다양한 위치에서 메시지 작성
    3. DOM 메서드를 사용한 메시지 작성
    4. 타이머 메시지 작성
    5. 정적 메시지 작성
    6. 미니메시지 표시 맞춤설정
  4. Flash
    1. Flash 예

뷰는 컨테이너에서 가젯이 표시되는 위치로서, 뷰마다 서로 다른 특성을 갖습니다. 예를 들어 컨테이너에는 페이지의 일부분에 가젯을 표시하는 뷰와 전체 페이지에 가젯을 표시하는 뷰가 있을 수 있습니다. 컨테이너가 지원하는 뷰 목록을 보려면 컨테이너 문서을 참조하시기 바랍니다.

예를 들어 iGoogle 샌드박스에서 가젯은 홈 뷰 모드("작은 모드")로 표시됩니다. 즉, 다른 가젯들과 함께 단으로 표시됩니다. 가젯 영역 전체를 차지하도록 가젯을 수평으로 확장하는 캔버스("큰 모드") 뷰를 만들려면 다음과 같이 "캔버스" 뷰 유형에 대해 <Content> 섹션을 정의해야 합니다.

<Content type="html" view="canvas"> 

iGoogle을 타겟으로 한 가젯의 캔버스 뷰에 대해 <Content> 섹션을 정의하려면 홈 뷰에서 제대로 표시되도록 하기 위한 <Content> 섹션도 섹션도 만들어야 합니다. 이것은 "기본값"이나 "홈"이 될 수 있습니다. 여러 <Content> 섹션을 지원하는 가젯 작성에 대한 자세한 논의는 여러 콘텐츠 섹션 포함하기를 참조하시기 바랍니다.

다음은 "홈" 및 "캔버스"에 대해 <Content> 섹션 뷰를 정의하는 Hello World 가젯 버전입니다. 너비는 홈 뷰 또는 캔버스 뷰로 표시하느냐에 따라 달라집니다.

<?xml version="1.0" encoding="UTF-8" ?>
<Module> 
  <ModulePrefs title="Hello World!">
    <Require feature="opensocial-0.8" />
  </ModulePrefs>
  <Content type="html" view="home">
    <![CDATA[
      Hello, small world!
    ]]>  
  </Content>
  <Content type="html" view="canvas"> 
    <![CDATA[
      Hello, big world!
    ]]> 
  </Content>
</Module>

여러 콘텐츠 섹션 포함하기

가젯 XML 파일에 두 개 이상의 <Content> 섹션을 포함할 수 있습니다. 이 때 각 <Content> 섹션에서는 렌더링이 수행될 뷰를 선언합니다. 모든 <Content> 섹션은 문서 트리에서 같은 가지에 있어야 하며 선택사항인 매개변수 view=를 사용하여 렌더링이 수행될 뷰를 정의할 수 있습니다.

두 콘텐츠 섹션

다음은 "프로필"용 콘텐츠 섹션과 "캔버스"용 콘텐츠 섹션이 있는 가젯을 보여주는 간단한 예입니다. 두 뷰 모두 orkut 컨테이너에서 지원합니다.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Multiple Content Sections (version 1)">
    <Require feature="opensocial-0.8" />
  </ModulePrefs>
  <Content type="html" view="profile">
  <![CDATA[
    <h1>Profile</h1>
  ]]>
  </Content>
  <Content type="html" view="canvas">
  <![CDATA[
    <h1>Canvas</h1>
  ]]>
  </Content>
</Module>

출력 결과는 다음과 같습니다.

프로필 뷰

<h1>Profile</h1>

캔버스 뷰

<h1>Canvas</h1>

캔버스나 프로필이 아닌 기타 뷰

no content is displayed

여러 뷰가 지정된 콘텐츠 섹션

콘텐츠 섹션은 여러 뷰를 쉼표로 구분하여 지정할 수 있습니다.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Multiple Content Sections (version 2)">
    <Require feature="opensocial-0.8" />
  </ModulePrefs>
  <Content type="html" view="canvas,profile">
  <![CDATA[
    <h1>Canvas and Profile</h1>
  ]]>
  </Content>
</Module>

출력 결과는 다음과 같습니다.

프로필 뷰

<h1>Canvas and Profile</h1>

캔버스 뷰

<h1>Canvas and Profile</h1>

캔버스나 프로필이 아닌 기타 뷰

no content is displayed

뷰가 지정되고 기본 콘텐츠 섹션이 없는 콘텐츠 섹션

뷰 매개변수로 콘텐츠 섹션을 지정하면 콘텐츠 섹션이 해당 뷰에만 표시됩니다. 기본 콘텐츠 섹션을 지정하지 않으면 다른 뷰에 아무 콘텐츠도 표시되지 않습니다.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>  
  <ModulePrefs title="Multiple Content Sections (version 3)">
    <Require feature="opensocial-0.8" />
  </ModulePrefs>
  <Content type="html" view="profile">
  <![CDATA[
    <h1>Profile</h1>
  ]]>        
  </Content>
</Module>

출력 결과는 다음과 같습니다.

프로필 뷰

<h1>Profile</h1>

캔버스 뷰

no content is displayed

캔버스나 프로필이 아닌 기타 뷰

no content is displayed

뷰가 지정되고 기본 콘텐츠 섹션이 있는 콘텐츠 섹션

기본 콘텐츠 섹션을 지정하려면 뷰 매개변수 없이 콘텐츠 섹션을 정의하면 됩니다.

<Module>  
  <ModulePrefs title="Multiple Content Sections (version 4)">
    <Require feature="opensocial-0.8" />
  </ModulePrefs>
  <Content type="html" view="profile">
  <![CDATA[
    <h1>Profile</h1>
  ]]>        
  </Content>
  <Content type="html">
  <![CDATA[
    <h1>Default</h1>
  ]]>
  </Content>
</Module>

출력 결과는 다음과 같습니다.

프로필 뷰

<h1>Profile</h1>

캔버스 뷰

<h1>Default</h1>

캔버스나 프로필이 아닌 기타 뷰

<h1>Default</h1>

전체 예

하나의 가젯에서 이러한 기술을 모두 사용할 수 있습니다.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Multiple Content Sections (version 5)">
    <Require feature="opensocial-0.8" />
  </ModulePrefs>
  <Content type="html" view="profile">
  <![CDATA[
    <h1>Profile</h1>
  ]]>
  </Content>
  <Content type="html" view="canvas">
  <![CDATA[
    <h1>Canvas</h1>
  ]]>
  </Content>
  <Content type="html" view="canvas,profile">
  <![CDATA[
    <h2>This shows up in canvas and profile views</h2>
  ]]>
  </Content>
  <Content type="html">
  <![CDATA[
    <h1>Default</h1>
    <h2>The content in this section only shows up if no other content sections are applicable</h2>
  ]]>
  </Content>
</Module>

출력 결과는 다음과 같습니다.

프로필 뷰

<h1>Profile</h1>
<h2>This shows up in canvas and profile views</h2>

캔버스 뷰

<h1>Canvas</h1>
<h2>This shows up in canvas and profile views</h2>

캔버스나 프로필이 아닌 기타 뷰

<h1>Default</h1>
<h2>The content in this section only shows up if no other content sections are applicable</h2>

뷰 연결

뷰는 오픈소셜 컨테이너 전체에서 지원되지만 각 컨테이너는 다른 뷰들을 지원할 수 있습니다. 예를 들어 iGoogle은 home이라는 작은 뷰를 가지지만 orkut에서 작은 뷰는 profile로 불립니다.

iGoogle의 home과 orkut의 profile에 대해 동일하게 표시되는 가젯을 작성하려 한다고 가정해 보면, 중복되는 <Content> 섹션을 만드는 대신 다음과 같이 단일 <Content> 섹션에 대해 뷰를 연결할 수 있습니다.

<Content type="html" view="home,profile">

이 기술을 서로 다른 컨테이너 간 또는 동일한 컨테이너 내에서 사용할 수 있습니다. 예를 들어 단일 <Content> 섹션에서 크기가 서로 다른 뷰에 대해 프리젠테이션 로직을 취급하는 가젯은 view="home,canvas"를 선언하여 해당 지원을 캔버스 페이지로 확장할 수 있습니다.

현재 가젯 뷰 결정

현재 뷰를 가져오는 가장 쉬운 방법은 가젯 모듈 환경설정에 "뷰" 기능을 포함하는 것입니다.

<ModulePrefs title="Views example"> 
  <Require feature="views" />
</ModulePrefs>
    

뷰 기능이 포함되면 gadget.util.getCurrentView() 함수를 호출하여 현재 뷰를 가져올 수 있습니다.

다음 예는 현재 뷰를 가져오고 반환된 값에 대해 조건에 따라 코드를 실행하는 것을 보여줍니다.

function getViewName() {
  return gadgets.views.getCurrentView().getName();
}

if (getViewName() == "canvas") {
  /* Do canvas specific stuff here */
}

if (getViewName() == "home") {
  /* Do home specific stuff here */
}
    

모든 사용 가능한 뷰 가져오기

gadgets.views.getSupportedViews() 함수를 호출하여 사용 가능한 View 개체를 가져옵니다.

var supported_views = gadgets.views.getSupportedViews();
    

getSupportedViews 호출로 반환된 개체에는 iGoogle에서 사용 가능한 모든 뷰를 나타내고 뷰 이름으로 색인생성된 gadgets.views.View 개체가 들어 있습니다.

다른 뷰로 연결되는 링크를 제공하려면 gadgets.views.View 개체를 gadgets.views.requestNavigateTo() 메서드로 전달해야 합니다. getSupportedViews() 호출에 의해 반환된 개체 중 하나를 사용하도록 선택할 수 있습니다. 다음 코드 샘플에서 이 메서드를 보여줍니다.

  function navigateTo(dest) {
    var supported_views = gadgets.views.getSupportedViews();
    gadgets.views.requestNavigateTo(supported_views[dest]);
  };

  /**
   * When called, this method asks the container to switch to the canvas
   */
  function gotoCanvas() {
    navigateTo("canvas");
  };

  /**
   * When called, this method asks the container to switch to the home
   */
  function gotoHome() {
    navigateTo("home");
  };
    

또 다른 방법은 새로운 View 개체를 수동으로 만든 다음 이를 사용하여 탐색을 시작하는 것입니다. 다음 코드 샘플은 새로운 gadgets.views.View 개체를 만들어 gadgets.views.requestNavigateTo() 메서드에 전달하는 것을 보여줍니다.

  /**
   * When called, this method asks the container to switch to the canvas
   */
  function gotoCanvas() {
    var canvas_view = new gadgets.views.View("canvas");
    gadgets.views.requestNavigateTo(canvas_view);
  };

  /**
   * When called, this method asks the container to switch to the home
   */
  function gotoHome() {
    var home_view = new gadgets.views.View("home");
    gadgets.views.requestNavigateTo(home_view);
  };
    

다음은 "Hello World" 가젯을 기반으로 한 완전한 예입니다.

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs height="100" title="Navigation">
    <Require feature="views" /> 
  </ModulePrefs>
  <Content type="html" view="home">
  <![CDATA[ 
  <div>Hello world Home view</div>
  <script type="text/javascript">
  
    function goToView(dest) {
      var supported_views = gadgets.views.getSupportedViews();
      gadgets.views.requestNavigateTo(supported_views[dest]);
    };
  </script>

  <a href="javascript:goToView('canvas')" >Go to canvas view</a><br><br>

  ]]> 
  </Content>
  <Content type="html" view="canvas">
  <![CDATA[ 
  <div>Hello world Canvas view</div>
  <script type="text/javascript">
  
    function goToView(dest) {
      var supported_views = gadgets.views.getSupportedViews();
      gadgets.views.requestNavigateTo(supported_views[dest]);
    };
  </script>
  <a href="javascript:goToView('home')" >Go to home view</a><br><br>
  ]]> 
  </Content>
  </Module>

    

equestNavigateTo를 통한 데이터 전달()

gadgets.views.requestNavigateTo() 호출을 사용하는 경우 새 페이지로 전달될 데이터가 들어 있는 선택사항 매개변수를 제공할 수 있습니다.

다음 코드는 두 개의 변수 foobar를 현재 가젯의 캔버스 표면으로 전달합니다.

  function gotoCanvas(params) {
    var canvas_view = new gadgets.views.View("canvas");
    gadgets.views.requestNavigateTo(canvas_view, params);
  };

  var my_params = {
    foo : 12345,
    bar : "Bar value"
  };

  gotoCanvas(my_params);
    

캔버스 뷰의 다음 코드에서 이러한 값을 확인하시기 바랍니다.

  var prefs = gadgets.views.getParams();
  var foo = prefs["foo"];
  /* foo contains 12345 */

  var bar = prefs["bar"];
  /* bar contains "Bar value" */<sup class="changed">New!</sup>
    

가젯 높이 조정

기본적으로 가젯의 높이는 200픽셀입니다. <ModulePrefs> 속성 height="nn"을 사용하여 기본값보다 더 크거나 작은 적정 높이를 지정할 수 있습니다. 콘텐츠 높이로 인해 가젯의 높이가 지정된 높이를 초과할 경우 <ModulePrefs> 속성 scrolling="true"를 사용하여 가젯에 수직 스크롤 막대가 생기도록 할 수 있습니다.

하지만 높이를 동적으로 변경해야 하는 가젯도 있습니다. 예를 들어 목록의 내용에 따라 높이가 확장 또는 축소되어야 하는 목록 가젯의 경우 사용자가 목록에 항목을 추가함에 따라 가젯이 커지며 목록을 지우면 가젯은 다시 원래의 높이로 돌아갑니다. 다음은 실행 중인 가젯의 모습입니다.

식료품 목록 가젯

가젯이 스스로 크기를 변경할 수 있도록 하려면 다음 항목을 가젯 명세에 추가해야 합니다.

  • 가젯에 dynamic-height 라이브러리를 로드하도록 지시하는 <Require feature="dynamic-height"/> 태그(<ModulePrefs> 아래).
  • 콘텐츠가 변경되거나 가젯의 크기가 자동으로 변경되어야 하는 다른 이벤트가 발생할 경우 자바스크립트 함수 gadgets.window.adjustHeight() 호출.

예를 들어 다음은 식료품 목록 가젯용 가젯 명세입니다.

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="Dynamic Height" 
    height="100"> 
    <Require feature="dynamic-height"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
    <script type="text/javascript">
    // This example lets users add items to a grocery list and then clear the list.
    // When items are added or cleared, the gadget resizes itself.
    var mylist = "";
    var flag = 0;

    // Function that is invoked whenever user clicks the Add button to add an
    // item to the list.
    function addToList (form) {
        var input = _trim(form.inputbox.value);
        if (input == "") {
            return;
        }

        // Make alternating lines green/white, depending on value of flag variable.
        if(flag == 0){
            mylist += "<div style='padding-left: 5px;background-color: #E6FFE6; font-family:Arial, Helvetica;'>" +input + "</div>";
            flag = 1;
        }
        else {
            mylist += "<div style='padding-left: 5px;font-family:Arial, Helvetica;'>" +input + "</div>";
            flag = 0;
        }

        // Call setContent to output HTML to div and resize gadget
        setContent(mylist);
    }

    // Clear the list
    function clearList(form) {
        // Call setContent to remove all items from the list and resize the gadget
        setContent("");
    }

    // Outputs content to the div and resizes the gadget
    function setContent(html) {
        document.getElementById('content_div').innerHTML = html;

       // Tells gadget to resize itself
       gadgets.window.adjustHeight();
    }
    </script>
  <FORM NAME="myform" ACTION="" METHOD="GET"><BR>
  <INPUT TYPE="text" NAME="inputbox" VALUE="">
  <INPUT TYPE="button" NAME="button" Value="Add" onClick="addToList(this.form)">
  <INPUT TYPE="button" NAME="button2" Value="Clear" onClick="clearList(this.form)">
  </FORM>
  <div id="content_div"></div>
  ]]>
  </Content>
</Module>

가젯의 너비 및 높이 테스트에 대한 가이드라인을 보려면 너비 및 높이 테스트를 참조하시기 바랍니다.

가젯 제목 설정

gadgets.window.setTitle() 함수를 사용하여 프로그램에서 가젯 제목을 설정할 수 있습니다. 이 함수를 사용하려면 가젯 명세에 다음을 포함해야 합니다.

  • 가젯에 settitle 라이브러리를 로드하도록 지시하는 <Require feature="settitle"/> 태그(<ModulePrefs> 아래).
  • 가젯 제목을 설정하기 위한 gadgets.window.setTitle() 호출.

이 예에서는 사용자가 가젯 제목을 설정할 수 있는 입력란이 있습니다.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Set Title Example">
    <Require feature="settitle"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
    <script type="text/javascript">
    function changeTitle(form) {
      var newTitle = form.inputbox.value;
      gadgets.window.setTitle(newTitle);	 
    }
    </script>
<FORM NAME="myform" ACTION="" METHOD="GET">Change the Gadget Title: <BR><BR>
<INPUT TYPE="text" NAME="inputbox" VALUE=""><BR><BR>
<INPUT TYPE="button" NAME="button" Value="Change Title" onClick="changeTitle(this.form)">
</FORM>
<div id="content_div"></div>
  ]]>
  </Content>
</Module>

탭 라이브러리를 사용하여 탭 모양의 사용자 인터페이스를 가젯에 추가할 수 있습니다. 탭을 사용하려면 가젯 명세에 다음을 반드시 포함해야 합니다.

  • 가젯에 tabs 라이브러리를 로드하도록 지시하는 <Require feature="tabs"/> 태그(<ModulePrefs> 아래).
  • 탭을 구성하고 탭에 콘텐츠를 넣기 위한 자바스크립트. 자세한 내용은 기본원리를 참조하시기 바랍니다.

사용자가 마지막으로 선택한 탭을 가젯이 지속적으로 저장할 수 있도록 setprefs 라이브러리를 포함하는 것이 일반적입니다. 그런 다음 사용자가 페이지를 떠났다가 다시 돌아오면 가젯이 기억해 둔 탭을 로드합니다. 이 기능을 이용하려면 가젯 명세에 다음 두 행의 코드를 삽입합니다.

<Require feature="setprefs"/>
...
<UserPref name="selectedTab" datatype="hidden"/>

tabs 개체 해부

탭 라이브러리에서는 다음 개체에서 작동하기 위한 함수와 CSS를 제공합니다.

  • TabSet 개체. tabs 개체는 모든 탭을 둘러싸는 상위 컨테이너입니다. 프로그램 관점에서 볼 때 tabs 개체는 개별 탭 개체의 배열입니다. 기본 HTML 구현은 보통 <table> 요소이며 API에서 "헤더 컨테이너"라고 불립니다. gadgets.TabSet.getHeaderContainer() 함수를 통해 이 HTML에 액세스할 수 있습니다.
  • tab 개체. tab 개체는 색인생성된 탭의 배열 안에 있는 단일 탭입니다. 기본 HTML 구현은 보통 <td> 요소이며 API에서 "이름 컨테이너"라고 불립니다. gadgets.Tab.getNameContainer() 함수를 통해 이 HTML에 액세스할 수 있습니다.
  • 콘텐츠 컨테이너. 콘텐츠 컨테이너는 개별 tab 개체의 콘텐츠를 보관합니다. 기본 HTML 구현은 보통 <div> 요소이며 API에서 "콘텐츠 컨테이너"라고 불립니다. gadgets.Tab.getContentContainer() 함수를 통해 이 HTML에 액세스할 수 있습니다.

기본원리

gadgets.TabSet() 생성자를 사용하여 tabs 개체(즉, 색인생성된 탭 집합이 들어 있는 개체)를 만듭니다. 예:

// Initialize tabs, designate the tab named "Two" as 
// the tab selected by default. 
var tabs = new gadgets.TabSet(__MODULE_ID__, "Two"); 

tabs 개체가 만들어지면 addTab() 함수를 사용하여 여기에 개별 탭을 추가할 수 있습니다. 개별 탭의 세 가지 주요 구성요소는 색인, 이름, 해당 <div>의 ID와 일치하는 고유 ID입니다. <div>는 탭의 콘텐츠가 놓이는 곳입니다. 사용자가 <div> 컨테이너를 제공하지 않는 경우 탭 라이브러리에서 컨테이너를 대신 생성합니다.

addTab() 메서드는 다음 인수를 필요로 합니다.

  • String tabName -- 만들 탭의 이름.
  • Object opt_params -- 매개변수 개체(선택사항)이며 다음을 포함할 수 있습니다.
    • contentContainer -- 탭 콘텐츠 컨테이너로 사용될 기존 HTML 요소. 없으면 탭 라이브러리에서 하나를 만듭니다.
    • callback --해당 탭이 선택되면 실행될 mA callback 함수.
    • tooltip-- 사용자가 마우스를 탭으로 가져가면 팝업으로 표시되는 도구 설명.
    • index -- 탭을 삽입할 색인. 없으면 새 탭이 끝에 추가됩니다.

addTab()은 탭 컨테이너의 DOM ID가 들어있는 문자열을 반환합니다.

다음 방법을 사용하여 탭을 tabs 개체에 추가하고 탭에 콘텐츠를 넣을 수 있습니다.

기술 #1: 탭의 ID가 만들어지면 기록했다가 이 ID를 사용하여 콘텐츠를 탭의 해당 <div>에 추가합니다.

var one_Id = tabs.addTab("One"); 
document.getElementById(one_Id).innerHTML = "Content for tab One.";

이러한 접근 방식의 변형은 HTML에서 탭 이름을 정의하는 것입니다. 예:

var one_Id = tabs.addTab('<div style="color: red; font-weight: bold; background-color:#ccf;">Cool Tab</div>');
document.getElementById(one_Id).innerHTML = "Content for tab One.";

기술 #2: 탭을 만들고 해당 <div>를 가젯의 HTML 부분에 추가합니다. 정적 콘텐츠를 <div>에 놓습니다.

tabs.addTab("Two", "two_id");
...
</script>     
<div id="two_id" style="display:none">Content for tab Two.</div>

기술 #3: 탭을 만들고 해당 <div>를 가젯의 HTML 부분에 추가합니다. 정적 콘텐츠를 <div>에 놓습니다. callback 함수를 사용하여 동적 콘텐츠를 정적 콘텐츠에 추가합니다.

tabs.addTab("Three", "three_id", callback); 
...
function callback(tabId) {
var p = document.createElement("p");
p.innerHTML = "This is dynamic content generated in callback.";
document.getElementById(tabId).appendChild(p);
} ...
</script>
<div id="three_id" style="display:none">This is static content for tab Three.</div>

기술 #4: addTab(tabName, opt_params) 함수를 사용하여 탭을 이름별로 추가합니다. 예:

tabs.addTab("Tab", { 
     contentContainer: document.getElementById("domId"), 
     callback: func, 
     tooltip: "Popup description" 

}); 

다음은 탭을 추가하고 탭을 콘텐츠로 채우는 다양한 방법을 보여주는 예제 가젯입니다.

<?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">
    // Initialize tabs, designate the tab named "Two" as
    // the tab selected by default.
    var tabs = new gadgets.TabSet(__MODULE_ID__, "Two");
    function init() {
        // Technique #1: Capture the tab's ID when you create it, and use the ID 
        // to add content to the tab's corresponding <div>.        
        var one_Id = tabs.addTab('<div style="color: red; font-weight: bold; background-color:#ccf;">Cool Tab</div>');       
        document.getElementById(one_Id).innerHTML = "Content for tab One.";

        // Technique #2: Create the tab and define a corresponding <div> in the
        // HTML portion of the gadget. Add static content to the <div>.      

        tabs.addTab("Two", {
           contentContainer: document.getElementById("two_id")
        });

        // Technique #3: Create the tab and define a corresponding <div> in the
        // HTML portion of the gadget. Add static content to the <div>.
        // Use a callback function to add dynamic content to the static content.

        tabs.addTab("Three", {
           contentContainer: document.getElementById("three_id"),
           callback: callback
        });

        // Technique #4: Create the tab with a tooltip message. If specified <div>
        // doesn't exist, tabs library creates one.   
        // Invoke callback function.        
        tabs.addTab("Four", {            
           contentContainer: document.getElementById("four_id"),
           callback: callback,            
           tooltip: "I'm special"          
        });
    }

    // Callback that provides content to tabs Three and Four
    function callback(tabId) {
      var p = document.createElement("p");
      // Get selected tab
      var selectedTab = tabs.getSelectedTab();
      p.innerHTML = "This is dynamic content generated in callback for tab " + selectedTab.getName();
      document.getElementById(tabId).appendChild(p);
    }

    // Call init function to initialize and display tabs.
    gadgets.util.registerOnLoadHandler(init);
    </script>

   <div id="two_id" style="display:none">Content for tab Two.</div>
   <div id="three_id" style="display:none">This is static content for tab Three.</div>
  ]]>
  </Content>
</Module>

색인별로 탭 조작

탭 API는 색인별로 탭을 조작하게 해 주는 함수도 포함합니다. 탭의 색인은 0부터 n까지 만들어지며 0이 첫 번째 탭이 됩니다. 예를 들어 3개의 탭이 있다면 그 색인은 0, 1 및 2입니다. 이 색인을 사용하여 프로그램에서 탭을 선택하고 두 탭의 위치를 전환할 수 있습니다.

탭의 ID는 일정하게 유지되지만 탭의 색인은 그렇지 않습니다. 예를 들어 세 번째 탭을 첫 번째 위치로 옮기면 색인이 2에서 0으로 바뀝니다.

다음은 프로그램에서 탭을 선택하는 예입니다. 다음의 짧은 코드의 링크를 만듭니다. 사용자가 링크를 클릭하면 사용자가 두 번째 탭을 직접 클릭한 것처럼 두 번째 탭이 선택됩니다.

<script>
...
function selectTab() {
tabs.setSelectedTab(1);
}
</script> <a href="javascript:void(0)" onclick="selectTab()">Select Second Tab</a>

다음은 프로그램에서 탭을 옮기는 예입니다. 다음의 짧은 코드는 링크를 만듭니다. 사용자가 링크를 클릭하면 가젯이 첫 번째 탭과 두 번째 탭의 위치를 전환합니다.

<script>
...
function switchTabs() {
tabs.swapTabs(0, 1);
} </script> <a href="javascript:void(0)" onclick="switchTabs()">Switch Tabs</a>

탭 표시 맞춤설정

이 섹션에서는 CSS 또는 자바스크립트로 탭의 모양을 맞춤설정하는 법을 설명합니다.

CSS로 탭 맞춤설정

탭 CSS는 탭을 배치하는 HTML 요소에 적용되는 클래스를 정의합니다.

다음 CSS 클래스를 사용하여 기본 설정을 무시하고 탭의 모양과 분위기를 수정할 수 있습니다.

CSS 클래스 설명
.tablib_table 탭을 포함하는 HTML 표에 적용됩니다.
.tablib_selected 선택한 탭에 적용됩니다.
.tablib_unselected 모든 선택취소한 탭에 적용됩니다.
.tablib_spacerTab 각 탭 간의 공백 요소에 적용됩니다.
.tablib_emptyTab 탭 주위의 시작 및 끝 공백을 제어합니다.
.tablib_navContainer 상위 컨테이너에 적용됩니다. 이 상위 컨테이너에는 모든 탭 관련 콘텐츠(즉, 탭 헤더 및 모든 개별 콘텐츠 컨테이너)가 들어 있습니다.

다음은 무시할 수 있는 기본 CSS 클래스 및 설정입니다.

.tablib_table {
width: 100%;
border-collapse: separate;
border-spacing: 0px;
empty-cells: show;
font-size: 11px;
text-align: center;
}
.tablib_emptyTab {
border-bottom: 1px solid #676767;
padding: 0px 1px;
}
.tablib_spacerTab {
border-bottom: 1px solid #676767;
padding: 0px 1px;
width: 1px;
}
.tablib_selected {
padding: 2px 0px;
background-color: #ffffff;
border: 1px solid #676767;
border-bottom-width: 0px;
color: #3366cc;
font-weight: bold;
width: 80px;
cursor: default;
}
.tablib_unselected {
padding: 2px 0px;
background-color: #dddddd;
border: 1px solid #aaaaaa;
border-bottom-color: #676767;
color: #000000;
width: 80px;
cursor: pointer;
}
.tablib_navContainer {
width: 10px;
vertical-align: middle;
}
.tablib_navContainer a:link, .tablib_navContainer a:visited, .tablib_navContainer a:hover {
color: #3366aa;
text-decoration: none;
}

예:

<![CDATA[ 
  <style type="text/css"> 
   .tablib_selected { color: #FF0000; }
   .tablib_unselected { color: #660099; }
   .tablib_table { font-size:20px; }
   .tablib_emptyTab { padding:2px 5px; }
   .tablib_spacerTab { padding:0px 5px; }
</style>
<script...>

또한 자바스크립트를 사용하여 CSS 스타일을 탭 헤더 컨테이너에 적용할 수 있습니다. getHeaderContainer() 함수는 원하는 대로 수정할 수 있는 탭 HTML 표를 반환합니다.

예를 들어 다음의 짧은 코드는 글꼴 크기를 변경하고 상단에 여백을 추가합니다.

var tabs = new gadgets.TabSet();
...

var table = tabs.getHeaderContainer();
table.style.fontSize = "10px";
table.style.marginTop = "15px";

개별 탭 요소를 가져와서 속성을 수정하여 개별 탭 헤더의 스타일을 맞춤설정할 수 있습니다. 다음은 첫 번째 탭의 스타일을 고유하게 만드는 예입니다.

var tabs = new gadgets.TabSet();
tabs.addTab("Unique");
...
var firstTab = tabs.getTabs()[0].getNameContainer();
firstTab.style.backgroundColor = "#999999";
firstTab.style.color = "#ffffff";

탭 정렬 변경

추가된 탭은 기본적으로 중앙에 위치합니다. 하지만 탭이 3개 미만이거나 4개이면 왼쪽이나 오른쪽으로 정렬할 수도 있습니다. 이것은 alignTabs() 함수를 사용하면 가능합니다. 여기에는 값이 left, right 또는 center인 매개변수 하나가 필요합니다. 탭을 왼쪽이나 오른쪽으로 정렬하려는 경우 왼쪽이나 오른쪽에서의 오프셋 너비를 나타내기 위해 전달할 수 있는 추가 매개변수(선택사항)가 있습니다. 기본 크기는 3픽셀입니다.

예:

var tabs = new gadgets.TabSet();
...
// Align tabs to the left and offset it by 10 pixels
tabs.alignTabs("left", 10);

탭 숨기기

displayTabs() 함수를 사용하여 탭과 탭 컨텐츠의 표시/숨김을 전환할 수 있습니다. 이 함수는 Boolean 값 true 또는 false을 필요로 합니다.

다음은 탭을 표시하거나 숨기는 버튼을 만드는 예입니다.

<input onclick="toggleTabs()" type="button" value="Show/Hide"/>
<script>
var tabs = new gadgets.TabSet();
...
var showTabs = true;
function toggleTabs() {
showTabs = !showTabs;
tabs.displayTabs(showTabs);
}
</script>

미니메시지

미니메시지는 가젯 내부로부터 사용자에게 표시되는 임시 메시지입니다. 미니메시지는 프로그램이나 사용자에 의해 해제되도록 지정할 수 있습니다. 미니메시지의 기본 유형은 다음과 같습니다.

  • 사용자가 [x]를 클릭하여 삭제할 수 있는 해제 가능한 메시지.
  • 지정된 시간(초)이 경과하면 사라지는 타이머 메시지.
  • 프로그램에서 해제해야 하는 정적 메시지.

미니메시지를 사용하려면 가젯 명세에 다음을 포함해야 합니다.

  • 가젯에 미니메시지 라이브러리를 로드하도록 지시하는 <Require feature="minimessage"/> 태그(<ModulePrefs> 아래).
  • 미니메시지 동작을 설명하는 자바스크립트 함수. 미니메시지 라이브러리에 있는 함수의 전체 목록을 보려면 참조를 참조하시기 바랍니다.

다음과 같은 경우 미니메시지를 사용할 수 있습니다.

  • 홍보: 미니메시지를 사용하여 가젯에 홍보 메시지를 표시할 수 있습니다.
  • 상태: 대부분의 가젯이 보이지 않게 데이터를 가져와서 로드합니다. 미니메시지를 사용하여 "로드 중..." 또는 기타 상태 관련 메시지를 표시할 수 있습니다.
  • 디버그/오류: 가젯에 오류가 발생하면 오류가 발생했다는 사실을 미니메시지를 통해 사용자에게 알릴 수 있습니다.
  • 기타: 가젯의 유형(예: 달력, eBay)에 따라 사용자에게 알림 메시지를 표시할 수도 있습니다. 미니메시지는 작고 해제가 가능하므로 특별한 정보를 전달하는 데 사용할 수 있습니다.

기본원리

미니메시지를 가젯에 추가하는 기본 단계는 간단합니다.

1. 미니메시지 라이브러리를 가져옵니다.

<Require feature="minimessage"/>

2. gadgets.MiniMessage() 생성자를 사용하여 새 미니메시지 개체를 인스턴스화합니다.

var msg = new gadgets.MiniMessage(__MODULE_ID__);

대부분의 경우 모든 범위에서 액세스할 수 있는 단일 글로벌 개체로 만드는 것이 좋습니다.

3. 텍스트가 있는 새 미니메시지를 만듭니다.

msg.createDismissibleMessage("Please close me when you're done reading me.");

이렇게 하면 연결된 [x]가 있는 해제 가능하고 형식이 미리 지정된 메시지가 가젯 상단에 추가됩니다. 사용자가 [x]를 클릭하면 메시지가 닫힙니다.

그러면 작업이 완료되어 다양한 유형의 해제 가능한 메시지 중 하나가 만들어집니다.

다양한 위치에서 메시지 작성

기본적으로 메시지는 가젯 상단에 있는 컨테이너 HTML 요소 내부에 놓입니다. 각각의 연속된 메시지는 위에서 아래로 하위 요소로 컨테이너에 추가됩니다. 하지만 모든 메시지 또는 단 하나의 메시지에 대해 이러한 동작을 수정할 수 있습니다.

모든 메시지의 위치 설정

HTML 요소(<div> 선호)를 생성자에 전달하여 메시지 컨테이너 요소의 기본 위치를 무시할 수 있습니다. 이 요소는 메시지가 삽입되어 표시되는 메시지 컨테이너가 됩니다.

예를 들어 다음의 짧은 코드에서 <h3> 메시지 "I'm on top now!"는 가젯 상단에 표시되며 미니메시지는 그 아래에 메시지가 추가된 순서대로 messageBox <div>에서 표시됩니다.

<div>
<h3>I'm on top now!</h3>
</div>
<div id="messageBox"></div>
<script type="text/javascript"> // In the constructor, state that messages should be be displayed // in the messageBox <div> rather than at the top of the gadget. var msg = new gadgets.MiniMessage(__MODULE_ID__, document.getElementById("messageBox")); msg.createDismissibleMessage("I'm the first message."); msg.createDismissibleMessage("I'm the second message."); msg.createDismissibleMessage("I'm at the bottom."); </script>

단일 메시지의 위치 설정

메시지 컨테이너에서 끝에 추가하는 대신 지정된 위치에서 해제 가능한 메시지를 만들 수 있습니다. 이를 수행하려면 가젯의 HTML 부분 내에서 메시지를 마크업한 다음 해당 HTML 요소(<div> 선호)를 첫 번째 매개변수로 createDismissibleMessage()에 전달하면 됩니다.

예를 들어 다음 짧은 코드에서는 메시지가 status <div> 내에 표시됩니다.

<div id="status" style="color:#B30000;">
<b>Check out our new API documentation!</b> -- <a href="http://www.google.com/apis/gadgets" target="_blank">Read</a>
</div>
<script type="text/javascript"> var msg = new gadgets.MiniMessage(__MODULE_ID__); // Pass the HTML element to createDismissableMessage() to indicate // where the message should be displayed. msg.createDismissibleMessage(document.getElementById("status")); </script>

DOM 메서드를 사용한 메시지 작성

HTML DOM 메서드를 사용하여 해제 가능한 메시지를 생성하려는 경우가 있을 수 있습니다. 메시지는 DOM에 존재하지 않으므로 기본적으로 메시지 컨테이너에 추가됩니다.

예:

<script type="text/javascript"> 
  var msg = new gadgets.MiniMessage(__MODULE_ID__);
  // Generate the message using DOM methods
  var div = document.createElement("div");
  div.innerHTML = "New message created by W3C DOM methods.";
  // Set some DOM properties
  div.onmouseover = function() {
    div.style.backgroundColor = "green";
  };
  div.onmouseout = function() {
    div.style.backgroundColor = "";
  };
  msg.createDismissibleMessage(div);

</script>

타이머 메시지 작성

타이머 메시지는 지정된 시간이 경과하면 사라지는 미리 형식이 지정된 메시지입니다. createTimerMessage() 함수는 두 개의 매개변수 즉, 메시지 문자열과 메시지가 표시되어야 하는 시간(초)을 나타내는 숫자를 필요로 합니다. 예:

var msg = new gadgets.MiniMessage(__MODULE_ID__);
msg.createTimerMessage("I'm going to disappear in 5 seconds.", 5);

정적 메시지 작성

정적 메시지는 형식이 미리 지정된 메시지로서 메시지가 프로그램에서 dismissMessage() 함수에 의해 해제될 때까지 표시됩니다. 이것은 가젯이 콘텐츠 가져오기와 같은 백그라운드 작업을 수행하는 동안 사용자에게 정보를 계속 알려주는 알림 메시지를 표시하는 데 유용합니다. 예:

  var msg = new gadgets.MiniMessage(__MODULE_ID__);
  var loadMessage = msg.createStaticMessage(document.getElementById("loading"));

미니메시지 표시 맞춤설정

미니메시지의 기본 모습을 변경하는 방법에는 두 가지가 있습니다.

  • 개별 메시지의 모습 변경.
  • 모든 메시지를 한꺼번에 변경.

개별 메시지의 스타일 변경

메시지의 스타일을 변경하려면 DOM 함수를 사용합니다. 해제 가능한 새 메시지를 작성하면 HTML 요소가 반환됩니다. 반환된 HTML 요소의 스타일 속성을 설정하여 메시지의 모습을 수정할 수 있습니다. 예:

<script type="text/javascript">
  var msg = new gadgets.MiniMessage(__MODULE_ID__);
  var statusMsg = msg.createDismissibleMessage("This is a critical error!");
  // Change the message's background color to red
  statusMsg.style.backgroundColor = "red";
  statusMsg.style.color = "white";
</script>

참고: 이 예는 메시지의 전체 배경색을 변경하는 올바른 방법을 보여줍니다. 메시지가 들어있는 <div>의 배경색을 설정해도 전체 배경색은 바뀌지 않습니다.

모든 메시지의 스타일 변경

모든 메시지의 스타일을 한꺼번에 변경하려면 CSS를 사용합니다. CSS는 미니메시지를 정의하는 HTML 요소에 적용되는 클래스를 정의합니다.

다음 CSS 클래스를 사용하여 기본 설정을 무시하고 메시지의 모양과 분위기를 수정할 수 있습니다.

CSS 클래스 설명
.mmlib_table 메시지를 포함하는 HTML 표에 적용됩니다.
.mmlib_xlink 메시지를 해제하는 데 사용되는 [x] 링크에 적용됩니다. 해제 가능한 메시지에만 적용되는 설정입니다.

예를 들어 다음을 수행하면 배경은 진한 남색으로, 전경은 흰색으로 바뀝니다.

<![CDATA[
   <style>
     .mmlib_table__MODULE_ID__ {
       background-color: #000066;
       color: #ffffff;
     }
   </style>
<script...>

다음은 무시할 수 있는 기본 CSS 클래스 및 설정입니다.

.mmlib_table {
  width: 100%;
  font: bold 9px arial,sans-serif;
  background-color: #fff4c2;
  border-collapse: separate;
  border-spacing: 0px;
  padding: 1px 0px;
  }
.mmlib_xlink {
  font: normal 1.1em arial,sans-serif;
  font-weight: bold;
  color: #0000cc;
  cursor: pointer;
  }

Flash

flash 라이브러리를 사용하여 Flash 동영상(구체적으로 .swf 파일)을 가젯에 삽입할 수 있습니다. Flash 콘텐츠를 삽입하려면 가젯 명세에 다음을 반드시 포함해야 합니다.

  • 가젯에 flash 라이브러리를 로드하도록 지시하는 <Require feature="flash"/> 태그(<ModulePrefs> 아래).
  • 가젯에 .swf 파일을 삽입하고 지정된 위치에 표시하기 위한 gadgets.flash.embedFlash() 호출. 이 기능을 사용하려면 모든 리소스가 .swf 파일에 번들로 들어 있어야 합니다.

flash 라이브러리에는 다음 함수가 포함되어 있습니다.

함수 설명
gadgets.flash.embedFlash(swf_url, swf_container, swfVersion, opt_params)

swf_url로 지정된 .swf 파일을 삽입하고 swf_container로 지정된 위치에서 가젯에 표시합니다. 매개변수 opt_params는 유효한 html 매개변수가 들어 있을 수 있는 하나의 개체(선택사항)입니다.

성공적이면 R true를 반환하고 그렇지 않으면 false를 반환합니다.

참고: 성능 문제가 발생하거나 캐럿이 표시되지 않으면(때로 Firefox 2.0에서 발생하는 문제) 다음과 같이 wmode"window"로 명확히 설정하시기 바랍니다. gadgets.flash.embedFlash("example.swf", "wrapper", {wmode: "window"});

gadgets.flash.embedCachedFlash(swf_url, swf_container, swfVersion, opt_params) 캐시된 Flash 파일을 DOM 트리에 삽입합니다. 매개변수 및 반환 값은 embedFlash() 메서드와 동일합니다.
gadgets.flash.getMajorVersion() Flash Player의 상위 버전을 반환하거나 Flash Player를 찾지 못할 경우 0을 반환합니다.

Flash 예

이 예제 가젯에서 버튼을 클릭하면 해당 .swf 파일이 재생됩니다. Stop을 클릭하면 가젯이 스틸 사진을 표시합니다.

다음은 이 예에 대한 가젯 명세입니다.

<?xml version="1.0" encoding="UTF-8" ?> 
<Module> 
<ModulePrefs title="Trevor Does Tricks" height="300">
  <Require feature="flash" />
</ModulePrefs>
<Content type="html">
<![CDATA[

<style type="text/css">
  input.mybutton
  {
     background-color:#FFCC99;
     border-style:solid;
     border-color:#000000;
     font-family:Comic Sans MS,sans-serif;
     font-size:14px;
  }
</style>

<div id="flashcontainer" style="text-align: center;"></div> 

<script type="text/javascript">

  // Display still photo.
  function showPhoto() {
    document.getElementById("flashcontainer").innerHTML = "<img src='http://doc.examples.googlepages.com/Trevor.JPG' />";
  }

  // Play .swf file for specified trick.
  function doTrick(trick) {

    // The URL for the .swf file that shows the specified trick.
    var url = "http://doc.examples.googlepages.com/Trevor-"+trick+".swf";

    // Play .swf file.
      gadgets.flash.embedFlash(url, "flashcontainer", {
      swf_version: 6,
      id: "flashid",
      width: 300,
      height: 250
    })
  }

  // When gadget first loads, display still photo.
  gadgets.util.registerOnLoadHandler(showPhoto);
  </script>
  <br />
  <div style="text-align: center;"> 
    <input type=submit class="mybutton" value="Spin" onClick="doTrick('spin')">
    <input type=submit class="mybutton" value="Speak" onClick="doTrick('speak')">
    <input type=submit class="mybutton" value="Sit" onClick="doTrick('sit')">
    <input type=submit class="mybutton" value="Down" onClick="doTrick('down')">
    <input type=submit class="mybutton" value="Stop" onClick="showPhoto()">
  </div>
  ]]>
</Content>
</Module>

맨위로