Теги: Google Mashup

Google mashups

Машапы (mashups) — шаблоны простых веб-функций, предназначенные для многократного использования, в последние полгода-год стали очень популярны как среди веб-мастеров, так и среди обычных пользователей. Вот и Google предлагает свой сервис. Он сейчас находится в стадии бета-тестирования, и для доступа к нему требуется регистрация, которая, впрочем, предоставляется практически каждому обладателю почтового ящика в службе Google Mail.

Как создать простейший машап

В отличие от ставшего уж достаточно популярным сервиса Popfly от Microsoft, Google представляет не визуализированные объекты, а собственный метаязык, предназначенный для работы веб-программистов. Машап-фрагмент должен быть заключен в паре тегов <gm:page> и </gm:page>. Префикс gm в принципе означает принадежность любого тега к языку описания Google mashup. Посмотрим, как выглядит традиционная первая страничка «Здравствуй, мир!», созданная в Google mashup:

<gm:page title="Пример «Здравствуй, мир!»" authenticate="false"> <h1<Здравствуй, мир!</h1> </gm:page>

Конечно, использовать машап для создания «Здравствуй, мир!», мягко говоря, наивно. Посмотрим, какие полезные возможности и шаблоны предоставляются пользователям сервиса. Атомарные функции, выполняющие специализированные операции, в Google получили название feeds. Перечислим некоторые основные элементы (те самые feeds):

page — веб-страница;
template — шаблон;
list — список;
data — данные;
handleEvent — обработка событий на странице;
form — форма для ввода данных, идентична форме в HTML;
search — поиск средствами Google;
map — карта (Google Maps);
целый ряд других элементов, состав которых регулярно пополняется и обновляется.

Теперь посмотрим примеры использования машапов. Начнем с простого перечня новостей в RSS-ленте. Вначале необходимо создать шаблон отображения данных на веб-странице. Для этого используем стандартные средства HTML и CSS. Необходимо только разместить фрагмент HTML-кода в паре тегов <gm:template> и </gm:template>. Например, шаблон может выглядеть таким образом:

<gm:template id="myListTemplate"> <table class="blue-theme" style="width:50%"> <tr repeat="true"> <td style="padding-bottom:10px"> <gm:text ref="atom:title"/> </td> </tr> </table> </gm:template>

Параметр repeat тега <tr> указывает на повторение данного и дочерних узлов по мере отображения данных. Обратите внимание на тег отображения информации: <gm:text ref="atom:title"/>. По желанию можно использовать любое стилевое оформление. Осталось указать источник данных, то есть RSS-ленту. Однако это действие выполняем уже вне шаблона:

<gm:list id="myList" template="myListTemplate" data="http://www.msn.com/rss/index.xml" pagesize="10"/>

Рис. 2. RSS-лента

Таким образом, в качестве источника данных указана лента MSN. Атрибут pagesize указывает, какое количество записей размещать на одной странице. Завершим формирование машапа, проставив ссылки на подробную информацию, и посмотрим на результат (рис. 2). Для этого запустим функцию Test и перейдем на вкладку Sandbox.

Работа с формами

Ввод информации возможен как посредством простых форм, так и с использованием различных современных устройств. Начнем обзор средств общения с пользователем с создания обычной HTML-формы и обработки результатов ее заполнения. Для этого воспользуемся шаблоном Form Input, который предоставлен Google. Создадим пример формы отправки запроса с указанием даты и ведением лога (рис. 3).

Рис. 3. Пример работы с формой

Текстовое поле описывается тегом <gm:text ref="atom:text"/>. Поле выбора даты из календаря — <gm:date ref="gd:when/@startTime"/>. Кнопки отправки и сброса данных формы задаются тегом <editButtons>.

Для отображения данных формы создадим шаблон и зададим в нем построчный показ данных:

<tr repeat="true"> <td style="width:25%"><gm:text ref="atom:title"/></td> <td style="width:20%"><gm:date ref="gd:when/@startTime"/></td> <td style="width:55%"><gm:text ref="atom:text"/></td> </tr>

Обработка пользовательских событий на странице

Посмотрим, как в Google mashups реализована поддержка клиентских событий. Воспользуемся тегом <handleEvent>. Атрибут event указывает на событие, которое необходимо обработать, а src — на идентификатор элемента, вызвавшего событие. В этом случае клик по элементу вызывает указанное событие.

Рис. 4. Машап поиска

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

<gm:search id="mySearch" data="${base}" ref="atom:title" param="model" hint="Enter Search Text"> <gm:param name="make" value="Enter Search Text"/> </gm:search>

Выше приведен фрагмент формы поиска на странице. Результаты поиска будут отображены в списке, задаваемом таким тегом:

<gm:list id="myList" data="${mySearch}"/>

На рис. 4. показана форма поиска, которую можно встроить на свой сайт.

Работа с картами Google

Конечно же, возможности машапов не ограничиваются простейшими функциями работы с формами, отображения списков или поиска. Разработаны базовые шаблоны для работы с Google Maps, Wiki, Google projects. Для работы с картами можно воспользоваться примерами Maps Mashup и Map Wiki. Связывание с картой Google производится шаблоном map. Подключив его в свой машап, получаем возможность использовать карту по требованию. Разнообразные атрибуты позволяют как передавать данные в машап, так и получать информацию о действиях пользователя и обрабатывать ее. На представленном примере (рис. 5), который создан на основе Maps Wiki, посетитель страницы может проголосовать за выбранный регион или город, проставив ему от 1 до 5 баллов.

Рис. 5. Использование Google Maps

Вообще, стоит отметить, что предложенный сервис существенно сложнее для использования, чем его аналог и, видимо, конкурент — Microsoft Popfly. Это связано с отсутствием визуальной составляющей и собственным языком разметки в отличие от возможности работы в Popfly в визуальном режиме или с языком XAML. Использование собственного языка в то же время позволяет обеспечить большие возможности для разработчиков. Дополнительно представлен обширный сервис справки с примерами использования каждого из шаблонов. В целом Google mashup services — это еще один современный и очень многообещающий инструмент для создания интерактивных решений в стиле Web 2.0.