Создание пользовательского интерфейса

Этот документ описывает добавление в гаджет различных элементов пользовательского интерфейса.

Содержание

  1. Виды
    1. Добавление нескольких разделов содержания
    2. Объединение видов
    3. Определение текущего вида гаджета
    4. Получение всех доступных видов
    5. Переход к другому виду
    6. Передача данных через requestNavigateTo()
  2. Определение высоты гаджета
  3. Создание названия гаджета
  4. Вкладки
    1. Строение объекта Tabs
    2. Как это работает
    3. Управление вкладками с помощью индекса
    4. Настройка отображения вкладок
  5. MiniMessage
    1. Как это работает
    2. Создание сообщений в различных местах
    3. Создание сообщений с помощью методов DOM
    4. Создание сообщения-таймера
    5. Создание статического сообщения
    6. Настройка отображения MiniMessage
  6. Flash
    1. Пример Flash

Виды

Вид – это место в контейнере, где отображается гаджет. Различные виды имеют разные характеристики. Например, контейнер может иметь вид, показывающий гаджет в уменьшенном формате, и вид гаджета на полную страницу. Список видов, поддерживаемых определенным контейнером, можно найти в документации контейнера.

В тестовой среде iGoogle гаджет по умолчанию отображается в rомпактном виде ("маленький режим"), то есть он появляется в столбцах вместе с другими гаджетами. Для создания фонового вида ("большого режима"), в котором гаджет расширяется по горизонтали, занимая всю область гаджетов, необходимо определить раздел <Content> для вида "canvas", cледующим образом:

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

Допустим, вы определеяете раздел <Content> для фонового вида гаджета для iGoogle. Тогда нужно также создать раздел <Content>, чтобы гаджет правильно отображался в компактном виде. Это может быть "default" или "home". Подробное обсуждение создания гаджетов, поддерживающих несколько разделов <Content> см. в главе Добавление нескольких разделов содержания.

Вот версия гаджета "Hello World", определяющая виды разделов <Content> для "home" и "canvas". Его ширина изменяется в зависимости от того, отображается он в компактном или фоновом виде.

<?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=, чтобы определить, на каких видах они должны строиться.

Два раздела содержимого

Вот простой пример, показывающий гаджет с двумя разделами содержания, одним для "profile" и вторым – для "canvas". Это виды, поддерживаемые контейнером 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>

Все другие виды

содержимое не отображается

Разделы содержимого с несколькими видами

Разделы содержимого могут задавать несколько видов, разделенных запятыми:

<?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>

Все другие виды

содержимое не отображается

Раздел содержимого с заданным видом и без раздела содержимого по умолчанию

Если раздел содержимого задается с параметром вида, этот раздел будет показан только в этом виде. Если раздел содержимого по умолчанию не задан, другие виды не будут отображать содержимого.

<?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>

Фоновый вид

содержимое не отображается

Все другие виды

содержимое не отображается

Раздел содержимого с заданным видом и с разделом содержимого по умолчанию

Раздел содержимого по умолчанию задается просто разделом содержимого без параметра вида:

<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>

Объединение видов

Виды поддерживаются во всех контейнерах OpenSocial, но каждый контейнер может поддерживать свой набор видов. Например, на iGoogle есть маленький вид под названием home, а на Orkut маленький вид называется profile.

Допустим, вы собираетесь написать гаджет, одинаково отображающийся в home на iGoogle и в profile на Orkut. Вместо того, чтобы создавать копии разделов <Content>, можно соединить виды для одного раздела <Content>, вот так:

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

Этот подход можно использовать в разных контейнерах или в одном контейнере. Например, гаджеты, обрабатывающие логику представления для видов различного размера в одном разделе <Content>, могут расширить поддержку и на страницу фона, объявив view="home,canvas".

Определение текущего вида гаджета

Самый простой способ узнать текущий вид – включить функцию "views" (просмотры) в настройки модуля гаджета:

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

Если функция views включена, текущий вид можно получить, вызвав функцию 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 */
}
    

Получение всех доступных видов

Получите доступные объекты View, вызвав функцию gadgets.views.getSupportedViews().

var supported_views = gadgets.views.getSupportedViews();
    

Объект, возвращаемый вызовом getSupportedViews, содержит объекты gadgets.views.View, представляющие все доступные в iGoogle виды, индексированные по названию вида.

Если вам нужно обеспечить ссылки на другие виды, нужно передать объект 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>

    

Передача данных через requestNavigateTo()

Если вы используете вызовы gadgets.views.requestNavigateTo(), можно предоставить дополнительный параметр, содержащий данные, которые надо передать на новую страницу.

Следующий код передает две переменных: foo и bar поверхности фона текущего гаджета:

  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".

Некоторые гаджеты должны уметь динамически изменять высоту. Например, представим себе гаджет со списком, который должен растягиваться и сжиматься в зависимости от содержания списка. Гаджет растет по мере добавления пользователем предметов в список. При очистке списка гаджет восстанавливает исходную высоту. Работающий гаджет может быть примерно таким:

Гаджет списка покупок

Обеспечить возможность изменения размера гаджета можно, добавив в его спецификации следующие вещи.

  • Тег <Require feature="dynamic-height"/><ModulePrefs>) для загрузки гаджетом библиотеки dynamic-height.
  • Вызов к функции JavaScript 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(). Для этого спецификации гаджета должны включать следующее.

  • Тег <Require feature="settitle"/>, в <ModulePrefs>, для загрузки гаджетом библиотеки settitle.
  • Вызов 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>

Вкладки

Для добавления в гаджет пользовательского интерфейса со вкладками можно использовать библиотеку вкладок. Для этого спецификации гаджета должны включать как минимум следующее.

  • Тег <Require feature="tabs"/>, под <ModulePrefs>, для загрузки гаджетом библиотеки tabs.
  • JavaScript для сборки вкладок и заполнения их содержанием. Подробности см. в разделе Как это работает.

Обычно также добавляют библиотеку setprefs, чтобы гаджет мог сохранять последнюю выбранную пользователем вкладку. После этого, если пользователь покидает страницу, а потом возвращается обратно, гаджет загружает эту вкладку. Для использования этой функции вставьте в спецификации гаджета две строчки кода:

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

Строение объекта Tabs

Библиотека вкладок (tabs) обеспечивает функции и CSS для работы со следующими объектами.

  • Объект TabSet. Объект tabs – родительский контейнер для всех вкладок. С программной точки зрения объект tabs – это массив отдельных объектов tab. Обычно в HTML оно реализуется с помощью элемента <table>, называемого в API "контейнером заголовка".Получить доступ к этому HTML можно с помощью функции gadgets.TabSet.getHeaderContainer().
  • Объект Tab. Объект tab – это одна вкладка из массива индексированных вкладок. Обычно в HTML оно реализуется с помощью элемента <td>, называемого в API "контейнером содержания".Получить доступ к этому HTML можно с помощью функции gadgets.Tab.getNameContainer().
  • Контейнер содержания. Контейнер содержания несет в себе содержание отдельного объекта tab. Обычно в HTML оно реализуется с помощью элемента <div>, называемого в API "контейнером содержания".Получить доступ к этому HTML можно с помощью функции gadgets.Tab.getContentContainer().

Как это работает

Объект tabs (то есть объект, содержащий набор индексированных вкладок) создается с помощью конструктора gadgets.TabSet(). Например:

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

Получив объект tabs, можно добавлять к нему отдельные вкладки, используя функцию addTab(). Вкладка имеет три главных компонента: индекс, название и уникальный идентификатор, совпадающий с идентификатором соответствующего <div>. <div> – это место размещения содержания вкладки. Если вы не указываете контейнер <div>, библиотека вкладок создаст его сама.

Метод addTab() принимает следующие аргументы:

  • String tabName – ярлык вкладки, которую нужно создать.
  • Object opt_params – объект дополнительного параметра. Он может включать следующее.
    • contentContainer – существующий элемент HTML, который следует использовать как контейнер содержимого вкладки. Если пропущен, его создает библиотека вкладок.
    • callback – callback-функция, которую нужно выполнить при выборе вкладки.
    • tooltip – описание инструмента, всплывающее при наведении курсора мыши на вкладку.
    • index – индекс, куда следует вставить вкладку. Если пропущен, новая вкладка добавляется в конец.

addTab() возвращает строку, содержащую идентификатор DOM контейнера вкладки.

К объекту tabs можно добавить вкладку и заполнить ее содержанием одним из следующих способов.

Способ №1: Записать идентификатор вкладки при ее создании и использовать его для добавления содержания в соответствующий <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 – первая вкладка. Например, если есть три вкладки, их индексы – 0, 1 и 2. Индексы можно использовать для программного выбора вкладки и для перестановки положений двух вкладок.

Заметьте, что индекс вкладки, в отличие от идентификатора, не постоянен. Например, при перемещении третьей вкладки в первое положение ее индекс сменяется с 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 или JavaScript.

Настройка вкладок с помощью 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 к контейнеру заголовка вкладок можно использовать JavaScript. Функция 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(). Эта функция принимает логические значения 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>

MiniMessage

MiniMessage – это временное сообщение, показываемое пользователям в гаджете. MiniMessage разработаны так, что они исчезают либо в результате действия пользователя либо самостоятельно. Основные типы MiniMessage таковы.

  • Удаляемые сообщения, которые пользователь может убрать, нажав [x].
  • Сообщения-таймеры, которые исчезают через определенное количество секунд.
  • Статические сообщения, которые нужно удалять программно.

Для использования MiniMessages спецификации гаджета должны включать следующее.

  • Тег <Require feature="minimessage"/>, под <ModulePrefs>, для загрузки гаджетом библиотеки MiniMessage.
  • Функции JavaScript, описывающие поведение MiniMessage. Полный список функций в библиотеке MiniMessage можно найти в справке.

Вот несколько причин использовать MiniMessage.

  • Реклама: MiniMessage можно использовать для отображения рекламных сообщений в гаджете.
  • Состояние: Многие гаджеты получают и загружают данные. MiniMessage можно использовать для отображения сообщения "Загрузка..." или других сообщений, связанных с состоянием.
  • Отладка и ошибки: Если в гаджете возникает ошибка, MiniMessage может уведомить об этом пользователя.
  • Другое: В зависимости от типа гаджета (например: календарь, eBay) может быть нужно отображать для пользователей уведомления. Т.к. MiniMessage небольшого размера и могут быть закрыты, это позволяет использовать их для передачи специальной информации.

Как это работает

Основные этапы добавления в гаджет MiniMessage просты.

1. Импортировать библиотеку minimessage:

<Require feature="minimessage"/>

2. Создать экземпляр объекта MiniMessage с помощью конструктора gadgets.MiniMessage():

var msg = new gadgets.MiniMessage(__MODULE_ID__);

В большинстве случаев вам нужно, чтобы это был глобальный объект, к которому можно получить доступ изо всех областей.

3. Создать новый MiniMessage с каким-нибудь текстом:

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

Это добавляет удаляемое заранее отформатированное сообщение с кнопкой [x] наверху гаджета. Когда пользователь нажимает на [x], сообщение закрывается.

Готово! Вы создали один из множества типов удаляемых сообщений.

Создание сообщений в различных местах

По умолчанию сообщения размещаются в элементе контейнера HTML на самом верху гаджета. Каждое последующее сообщение добавляется сверху вниз как дочернее по отношению к контейнеру. Это поведение можно изменить как для всех сообщений, так и для какого-нибудь одного.

Установка положения для всех сообщений

Расположение элемента контейнера сообщений по умолчанию можно изменить, передав конструктору элемент HTML, предпочтительно <div>. Этот элемент становится контейнером сообщений, в который вставляются и в котором отображаются сообщения.

Например, в этом фрагменте кода сообщение <h3> "I'm on top now!" появляется наверху гаджета. MiniMessage отображаются под ним в 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"));

Настройка отображения MiniMessage

Есть два способа изменить внешний вид MiniMessage по умолчанию.

  • Изменить внешний вид отдельных сообщений.
  • Изменить вид всех сообщений в целом.

Изменение стиля отдельных сообщений

Для изменения стиля сообщения можно использовать функции 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, определяющим MiniMessage.

Для перезаписи параметров по умолчанию и изменения вида и стиля сообщений можно использовать следующие классы 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-содержания спецификации гаджета должны включать как минимум следующее:

  • Тег <Require feature="flash"/>, под <ModulePrefs>, для загрузки гаджетом библиотеки flash.
  • Вызов к gadgets.flash.embedFlash() для встраивания в гаджет и отображения в указанном месте файла .swf. Заметьте, что для использования этой функции все ресурсы должны быть собраны в файл .swf.

Библиотека flash включает следующие функции.

Функция Описание
gadgets.flash.embedFlash(swf_url, swf_container, swfVersion, opt_params)

Встраивает файл .swf , заданный swf_url, и отображает его в гаджете в положении, указанном 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 либо ноль, если проигрыватель Flash не обнаружен.

Пример 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>

В начало