Избранное | Русский | Войти

Руководство по API встраивания волн

  1. Введение
  2. "Hello, World" для Google Wave
    1. Загрузка API встраивания волн Google
    2. DOM-элементы волн
    3. Объект WavePanel
    4. Загрузка волны
    5. Инициализация волны
  3. Добавление участников в волну
  4. Настройка пользовательского интерфейса волны

Введение

Основополагающим элементом всех приложений API Google Wave является так называемая волна, которая хранится в объекте WavePanel. В этом руководстве рассказано, как создать объект WavePanel и сохранить в нем волну.

"Hello, World" для Google Wave

Проще всего понять принципы API Google Wave, рассмотрев простой пример. В результате выполнения следующего кода на главной странице API Wave отображается волна "Welcome":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Wave Embed API Example: Simple Wave</title>
    <script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
    <script type="text/javascript">
    function initialize() {
      var wavePanel = new WavePanel('http://wave.google.com/a/wavesandbox.com/');
      wavePanel.loadWave('wavesandbox.com!w+waveID');
      wavePanel.init(document.getElementById('waveframe'));
    }
    </script>
  </head>
  <body onload="initialize()">
    <div id="waveframe" style="width: 500px; height: 100%"></div>
  </body>
</html>

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

Даже в таком простом примере следует обратить внимание на некоторые вещи:

  1. Добавление кода JavaScript API Wave осуществляется с помощью тега script.
  2. Для хранения волны создается элемент <div> с названием waveframe. На самом деле волна будет представлена в этом элементе как <iframe>.
  3. Объект WavePanel создается с помощью специально написанной функции JavaScript.
  4. Для загрузки определенной волны используется ее уникальный идентификатор.
  5. С помощью метода init() объект WavePanel инициализирутся, а затем прикрепляется к элементу <div>.
  6. Инициализация всего кода в разделе <body> выполняется по событию onload.

Ниже эти действия рассмотрены более подробно.

Загрузка API встраивания волн Google

<script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>

URL http://wave-api.appspot.com/public/embed.js указывает местоположение файла JavaScript, содержащего все символы и определения, необходимые для использования API Google Wave. Страница должна содержать тег <script>, указывающий на этот URL, причем этот тег <script> должен предшествовать коду JavaScript, в котором используются такие символы.

DOM-элементы волн

<div id="waveframe" style="width: 500px; height: 100%"></div>

Для отображения волны на веб-странице нужно выделить для нее место. Обычно это можно сделать, создав именованный элемент div и получив ссылку на него в модели объекта документа (DOM) браузера. В приведенном выше примере определен элемент <div> с названием waveframe, а его размер задан с помощью атрибутов style. Как правило, следует выделять область достаточной ширины, чтобы участники волны могли использовать ее соответствующим образом.

Объект WavePanel

var wavePanel = new WavePanel("http://wave.google.com/a/wavesandbox.com/");

Волна хранится в классе JavaScript WavePanel. Объекты этого класса могут содержать только одну волну на странице. (Можно создать несколько экземпляров этого класса. При этом каждый объект будет определять отдельную волну на странице.) Экземпляр этого класса можно создать с помощью оператора JavaScript new.

При создании экземпляра волны в качестве ее контейнера следует указывать узел DOM на странице (чаще всего используется элемент div). HTML-узлы являются потомками объекта JavaScript document. Ссылку на этот элемент можно получить с помощью метода document.getElementById().

Функция WavePanel() выполняет роль конструктора. Ее определение (полная версия которого дана в Справочном руководстве по API встраивания Google Wave) представлено ниже:

Конструктор Описание
WavePanel (Wave server instance) Создает панель Wave c помощью указанного экземпляра Wave server instance. Для целей разработки этот экземпляр будет представлен здесь: http://wave.google.com/a/wavesandbox.com/. (Обратите внимание, что последняя косая черта в URL-адресе обязательна.)

Загрузка волны

wavePanel.loadWave("wavesandbox.com!w+waveID");

Создав волну с помощью конструктора WavePanel(), необходимо загрузить ее, используя исходную волну. (В настоящее время в этой среде не разрешается создавать волны с нуля.) Загрузка выполняется с помощью метода loadWave(), который принимает уникальный идентификатор нужной волны.

В настоящее время получить идентификатор волны в Google Wave можно следующим образом: выберите волну, а затем выберите Отладка –> Получить идентификатор текущей волны. Обратите внимание, что для доступа к данной волне нужно быть ее участником (что невозможно реализовать для общедоступного веб-сайта). В данном случае можно предоставить общий доступ к волне, добавив к ней специальный зарезервированный адрес для участников (public@a.gwave.com). В настоящее время "общий доступ" разрешен только пользователям, у которых есть доступ к тестовой среде Google Wave.

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

Инициализация волны

wavePanel.init(document.getElementById('waveframe'));

В процессе отображения HTML-страницы формируется модель объекта документа (DOM), и все внешние изображения и скрипты объединяются в объект document. Чтобы гарантировать, что волна будет отображена только после полной загрузки страницы, нужно выполнить функцию, которая создает объект WavePanel, только после получения события onload элементом HTML-страницы <body>. Это позволит избежать непредсказуемого поведения и даст возможность лучше контролировать отображение волны.

Добавление участников в волну

Волна является интерактивным объектом. Люди, группы и роботы могут работать с волной, если они получили приглашение или иным образом были авторизованы на доступ к ней. Эту функциональность планируется добавить непосредственно в API встраивания волн в ближайшем будущем. Однако на данный момент необходимо заранее настроить управление доступом в волне. Чтобы разрешить доступ к волне всем пользователям, добавьте специальный адрес public@a.gwave.com в качестве участника волны.

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

С помощью метода setUIConfig() можно изменить внешний вид встроенной волны. Этот метод принимает набор строк, используемых для настройки цвета фона и характеристик шрифта волны в процессе ее инициализации. Обратите внимание, что вызов этого метода после метода init() ни к чему не приведет.

В следующем фрагменте кода цвет фона волны изменяется на зеленый, цвет текста – на белый, а шрифт – на Arial:

setUIConfig('green', 'white', 'Arial', '12pt');

Более подробную информацию об API встраивания можно найти в Справочном руководстве по API встраивания.

К началу