 | Уровень сложности: средний Джек Д Херрингтон, главный инженер-программист, Leverage Software Inc.
17.02.2009 Появление Web 2.0 повысило внимание к пользовательскому интерфейсу. В частности, разрабатываются новые способы взаимодействия с информацией и представления ее пользователям. Часто эти новые интерфейсы называются виджетами, и для связи с сервером в них используется язык Asynchronous JavaScript + XML (Ajax). В статье рассматриваются пять виджетов, которые вы можете использовать для повышения интерактивности вашего сайта.
Революция Web 2.0 открыла новые и оригинальные способы взаимодействия с пользователями Web-сайтов. Многие из этих инновационных технологий заключаются в использовании графики и виджетов, получающих данные с сервера и отображающих их. Я покажу вам пять таких виджетов, как с открытыми исходными кодами, так и лицензионных, которые используют для общения с сервером Ajax и XML:
-
Карусель: это прокручивающийся виджет для просмотра рисунков. Пользователи пролистывают список элементов, представленных в виде маленьких картинок. Что произойдет, когда пользователь нажмет мышкой на элемент виджета – решать вам. Карусель можно увидеть вживую на сайте Flikr и в интерфейсе iTunes от Apple. Виджет "карусель" бесплатен, он основывается на JavaScript-оболочке jQuery.
-
SWF/Charts: этот элемент управления от Adobe основан на технологии Flash. Он читает находящийся на сервере файл XML, получая из него данные для диаграммы и настройки стилей, после чего отображает соответствующую диаграмму. Интерфейс настолько элегантен, а файл XML с данными создаётся настолько легко, добавление динамических графиков на сайт не составляет никакого труда.
-
SWF/Gauge: Этот виджет на Flash, родственный SWF/Gauge, используя находящийся на сервере XML, отображает полностью настраиваемый и видоизменяемый стрелочный индикатор. Индикатор может быть похож на автомобильный спидометр, авиационный прибор или что-либо еще более стильное. Выбирать вам.
-
Редактирование на месте: хотя окошко редактирования на месте – не совсем виджет, это интуитивный, интерактивный и простой путь получения информации от желающих её предоставить пользователей. Функциональность редактирования на месте опирается на оболочку Scriptaculous, основанную на библиотеке prototype.js.
-
Окна DHTML: механизм создания окон DHTML позволяет размещать немодальные плавающие окна поверх содержимого страницы. Пользователи могут их двигать, изменять размер и закрывать. Содержимое окон может быть как указано на странице посредством JavaScript, так и взято с сервера посредством Ajax. В такой тип окошек идеально помещать разные предупреждения или небольшие формы, для которых перезагрузка страницы не нужна.
Я начну с виджета SWF/Charts, поскольку считаю, что с ним работать проще всего. Ещё он даёт наибольшую отдачу.
Виджет SWF/Charts
Нельзя не согласиться со старой поговоркой - "Лучше один раз увидеть, чем сто раз услышать", особенно, когда речь идёт о графиках. Но создание графиков на страницах всегда было сложной задачей. Большинство Web-сред не имеет готовых инструментов для создания графиков, хотя в некоторых есть графические примитивы для создания картинок. В результате с графиками приходится маяться самому.
Правда, будет замечательно, если виджет будет сам отображать закодированные в XML данные? Такой виджет есть - это SWF/Charts. Чтобы установить его, я загрузил с сайта файлы SWF, которые виджет использует. Потом я установил файлы на свой сайт, и как показано в листинге 1, добавил на страницу ссылку на виджет.
Листинг 1. Chart_page.html
<html><body>
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub.../swflash.cab#version=6,0,0,0"
width="400" height="250">
<param name="movie"
value="charts.swf?xml_source=chart_data.xml&library_path=charts_library">
<embed
src="charts.swf?xml_source=chart_data.xml&library_path=charts_library"
width="400" height="250"
type="application/x-shockwave-flash"
pluginspace="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
</body></html>
|
Файлу Charts.swf передаются два параметра: каталог с его библиотеками и адрес данных в XML. Формат данных XML чрезвычайно прост. В листинге 2 показан простой пример.
Листинг 2. Chart_data.xml
<chart>
<chart_type>bar</chart_type>
<chart_data>
<row>
<null/>
<string>2005</string>
<string>2006</string>
</row>
<row>
<string>Projected</string>
<number>500</number>
<number>700</number>
</row>
<row>
<string>Actual</string>
<number>600</number>
<number>900</number>
</row>
</chart_data>
</chart>
|
В файле содержатся данные для диаграммы, а также некоторая необязательная визуальная информация. Тип диаграммы в данном случае – гистограмма. На сайте, откуда я загрузил файл SWF, доступно множество других опций и разновидностей графиков.
Просматривая файл в браузере Firefox, я вижу показанный на рисунке 1 график.
Рисунок 1. Диаграмма в действии
Как видите, диаграмма с цветовой схемой по умолчанию выглядит великолепно. И даже шаг значений по осям выбран разумно. Отличный результат - при небольших усилиях.
Кроме того, файл graph_data.xml можно заменить динамической страницей: лишь бы формат данных был правильным. Это касается и остальных примеров из статьи. Фактически все примеры можно запускать в Web-браузере на локальных файлах без использования сервера (такого как Apache Tomcat или IBM® WebSphere® Application Server) и без использования языков интернет-программирования (например, PHP, Microsoft® ASP.NET, Java™ 2 Enterprise Edition [Java EE]).
Виджет SWF/Gauge
Еще один заманчивый способ - представлять данные в виде стрелочного индикатора. Лично я не очень люблю стрелочные индикаторы, потому что они занимают много места, представляя мало информации. Однако такие индикаторы полезны на инструментальных панелях, поэтому возможность создавать их быстро и легко я приветствую.
Однако если в Web-приложении нелегко создать диаграмму, то круговой индикатор – и подавно. Так что я опять обратился к создателям SWF/Charts, и что же вы думаете? Они предоставляют решение и для индикаторов: SWF/Gauge.
Я начну с показанной в листинге 3 страницы, на которой установлен виджет SWF/Gauge.
Листинг 3. Gauge_page.html
<html><body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/.../swflash.cab#version=6,0,0,0"
width="110" height="55">
<param name=movie VALUE="gauge.swf?xml_source=gauge_data.xml">
<embed src="gauge.swf?xml_source=gauge_data.xml"
width="110" height="55" type="application/x-shockwave-flash"
pluginspace="http://www.macromedia.com/go/getflashplayer">
</embed></object>
</body></html>
|
Файл gauge.swf принимает один аргумент: расположение данных. В данном случае они находятся в представленном в листинге 4 в файле gauge_data.xml.
Листинг 4. Gauge_data.xml
<gauge>
<circle fill_color="888888" start="275" fill_alpha="100"
line_color="555555" line_thickness="3" line_alpha="90"
radius="50" x="55" end="445" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="90"
line_thickness="4" line_alpha="20" radius="45" x="55"
end="440" y="55"/>
<circle fill_color="666666" start="317" fill_alpha="100"
line_color="333333" line_alpha="0" radius="44" x="55"
end="322" y="55"/>
<circle fill_color="666666" start="337" fill_alpha="100"
line_color="333333" line_alpha="0" radius="44" x="55"
end="342" y="55"/>
<circle fill_color="666666" start="357" fill_alpha="100"
line_color="333333" line_alpha="0" radius="44" x="55"
end="362" y="55"/>
<circle fill_color="666666" start="377" fill_alpha="100"
line_color="333333" line_alpha="0" radius="44" x="55"
end="382" y="55"/>
<circle fill_color="666666" start="397" fill_alpha="100"
line_color="333333" line_alpha="0" radius="44" x="55"
end="402" y="55"/>
<circle fill_color="666666" start="417" fill_alpha="100"
line_color="333333" line_alpha="0" radius="44" x="55"
end="422" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="100"
radius="40" x="55" end="440" y="55"/>
<circle fill_color="FF4400" start="280" fill_alpha="100"
radius="44" x="55" end="310" y="55"/>
<circle fill_color="44FF00" start="50" fill_alpha="100"
radius="44" x="55" end="80" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="80"
radius="40" x="55" end="440" y="55"/>
<circle fill_color="333333" start="270" fill_alpha="100"
line_alpha="0" radius="20" x="55" end="450" y="55"/>
<rotate start="280" shake_span="2" shadow_alpha="15"
step="1" x="55" span="0" y="55" shake_frequency="20">
<rect fill_color="ffff00" fill_alpha="90" line_alpha="0"
height="40" x="53" width="4" y="13"/>
</rotate>
<circle fill_color="111111" start="270" fill_alpha="100"
line_thickness="5" line_alpha="50" radius="15" x="55"
end="450" y="55"/>
</gauge>
|
Как видите, в этом виджете применён иной подход. Вместо того, чтобы указывать данные для индикатора, я фактически построил его из таких графических примитивов, как круги, дуги и квадраты.
Если честно, мне больше нравятся готовые стрелочные индикаторы, в которые мне достаточно было бы внести данные. Впрочем, этот способ тоже работает и оставляет простор для фантазии.
Открывая страницу в браузере, я вижу то, что показано на рисунке 2.
Рисунок 2. Виджет Gauge в действии
Может показаться, что в возможности указания графических примитивов в этом виджете ничего особо нет. Это не так. В примитивы включены простые анимационные технологии, так что вы можете заставить указатель перемещаться, издавать звуки и задавать определённые зоны, при нажатии на которые пользователь переходит по ссылке. Кроме того, данный элемент можно использовать не только для создания стрелочных индикаторов, но и для создания картинок и несложной анимации.
Редактирование на месте
Пользователи привыкли использовать в программах редактирование на месте, однако в интернете эта возможность до сих пор встречалась редко. В Web 2.0 интерактивность играет ключевую роль, а потому и редактирование на месте начинает встречаться чаще.
Можно написать скрипт для редактирования на месте самостоятельно, а можно переложить тяжёлую работу на одну из оболочек JavaScript. Одна из наиболее популярных оболочек – это Scriptaculous, основанная на библиотеке prototype.js. С библиотекой Scriptaculous создание элемента для редактирования на месте становится простым делом.
Простенький файл HTML с редактированием на месте показан в листинге 5.
Листинг 5. Inplace.html
<html><head>
<script src="prototype.js"></script>
<script src="effects.js"></script>
<script src="controls.js"></script>
<script src="scriptaculous.js"></script>
</head><body>
<table width="100%">
<tr><th width="10%">Name</th>
<td width="90%"><p id="name">Candy bar</p></td>
</tr></table>
<script>
new Ajax.InPlaceEditor('name', 'submitted.html' );
</script>
</body>
</html>
|
В начале файла Inplace.html включены все необходимые исходные коды JavaScript. После этого я собрал простенькую таблицу с абзацем с редактируемыми данными. Затем в конец файла я вставил маленький скрипт, создающий для редактируемого абзаца объект InPlaceEditor.
В качестве аргументов конструктор InPlaceEditor принимает ID абзаца и адрес страницы, которой отправляется результат. В данном случае эта страница - submitted.html; однако на практике это будет страница ASP.NET, Java EE или PHP, или ещё какая-нибудь динамическая интернет-технология.
В листинге 6 показан простой файл submitted.html.
Листинг 6. Submitted.html
Перейдём к тестированию. Сначала я открываю в браузере мой файл HTML и вижу в нем исходный текст. При подведении курсора мыши текст выделяется желтым, что отображено на рисунке 3.
Рисунок 3. Начало редактирования на месте
Жёлтая подсветка – указание для пользователя, что, нажав на поле, его можно отредактировать. Я и нажимаю на кнопку, получая в ответ поле Name, а также кнопки ok и cancel, показанные на рисунке 4.
Рисунок 4. Редактирование текста после щелчка на нём
Изменив текст и нажав кнопку ok, я отправляю данные серверу (или как в данном случае, странице submitted.html). Сервер возвращает HTML-страницу, в которой замещается оригинальный текст. Я отправил значение Name changed! (как видно из рисунка 5);
на практике это будет новое значение данных.
Рисунок 5. После нажатия кнопки "ок" содержимое изменяется
Такое простое изменение в интерфейсе, как эта вставка, может в корне изменить всё ваше приложение. Ожидание загрузок страниц, особенно с медленных серверов, создает ощущение неуклюжего старомодного интерфейса. При этом простые инструменты, подобные такому редактированию на месте, позволяют просто и эффективно повысить динамичность страницы.
Окна DHTML
Пожалуй, даже хорошо, что браузеры затрудняют вставку в страницы модальных окон. Однако иногда такие маленькие окошки нужны. В них можно показывать предупреждения и небольшие формы. Ещё они хорошо подходят для показа назойливой рекламы поверх содержимого окна. Хотя нет, забудьте об этом.
Однако, как я уже сказал, встроить в динамические страницы (DHTML) окна непросто. И я был счастлив, когда нашёл этот замечательный, основанный на библиотеке Protoype.js, интерфейс для построения окон. Он не только прост в использовании, но ещё и работает в любом браузере. В листинге 7 показана страница window.html.
Листинг 7. Window.html
<html>
<head>
<link href="default.css" rel="stylesheet" type="text/css" />
<script src="prototype.js"></script>
<script src="window.js"></script>
</head>
<body>
<script>
var win = new Window( 'myPopup', {
title: "Terms and Conditions",
top:70, left:100, width:300, height:200,
resizable: true, url: "terms.html",
showEffectOptions: { duration: 3 }
}
);
win.show();
</script>
</body>
</html>
|
Сначала я вставил в заголовок исходные коды prototype.js и window.js. Потом, указав такие нужные мне параметры, как размер, местоположение, заголовок и адрес страницы, с которой виджету предстоит брать необходимые мне данные, я создал всплывающий объект. Впрочем, загружать содержимое на страницу можно не только посредством Ajax; его можно указывать динамически кодом JavaScript или взять из существующего на странице тега <div>.
В данном случае я ссылаюсь на показанный в листинге 8 файл terms.html.
Листинг 8. Terms.html
<html><body bgcolor="white">
<h1>Terms and Conditions</h1>
<p>In order to use this site you must comply
with the following conditions...</p>
</body></html>
|
Запуская страницу в своём браузере, я вижу окно, показанное на рисунке 6.
Рисунок 6. Исходное окно
Нет, это не два расположенных одно на другом макинтошевских окна. Это похожее на макинтошевское фальшивое окно DHTML, расположенное в настоящем окне браузера Firefox. Но выглядит оно вполне настоящим.
Как видно из рисунка 7, я могу растягивать окошко, и двигать его.
Рисунок 7. Окошко после перемещения и изменения размера
Для написания данной статьи и своей работы я изучил несколько библиотек DHTML, позволяющих создавать окна, и эта мне понравилась больше всех. Другие окна плохо или не полностью отображались браузерами либо же плохо себя вели при изменении размеров. А это похоже на настоящее окно, только ограниченное рамками браузера.
Виджет-карусель
Любой занимавшейся проработкой пользовательских интерфейсов, скажет вам, что экранное пространство чрезвычайно важно. Нужно уметь вставить в данное пространство кучу данных, причём так, чтобы они не казались сжатыми. И я был очень впечатлён, когда впервые увидел карусель в Apple iTunes
Карусель показывает несколько рисунков в ограниченной области. На левом и правом краях области – стрелки налево и направо. При нажатии на них рисунки сдвигаются налево или направо, а вместо них появляются новые. В iTunes рисунками были обложки альбомов, а для каждого жанра была своя карусель.
Экономия пространства очень значительна: 30 обложек альбомов помещаются на месте трех, и при этом они сохраняют приличные размеры. Управление этим элементом интуитивно понятно, он похож на упрощённую полосу прокрутки.
Обратная сторона каруселей – их не так уж и просто сделать, в первую очередь из-за анимации в процессе прокрутки картинок. Поэтому я был рад найти созданную на основе оболочки jQuery на JavaScript карусель, которая так и называется - carousel.
На странице из листинга 9 я установил простенькую карусель.
Листинг 9. Carousel.html
<html>
<head>
<script type="text/javascript" src="js/jquery-1.0.3.js"></script>
<script type="text/javascript" src="js/jcarousel.js"></script>
<style type="text/css">
#mycarousel { display: none; }
.jcarousel-scope { position: relative; width: 255px;
-moz-border-radius: 10px; background: #D4D0C8;
border: 1px solid #808080; padding: 20px 45px; }
.jcarousel-list li { width: 81px; height: 81px;
margin-right: 7px; }
.jcarousel-list li img { border: 1px solid #808080; }
.jcarousel-list li a { display:block; outline: none;
border: 2px solid #D4D0C8; -moz-outline:none; }
.jcarousel-list li a:hover { border: 2px solid #808080; }
.jcarousel-next { position: absolute; top: 45px;
right: 5px; cursor: pointer; }
.jcarousel-next-disabled { cursor: default; }
.jcarousel-prev { position: absolute; top: 45px;
left: 5px; cursor: pointer; }
.jcarousel-prev-disabled { cursor: default; }
.loading { position: absolute; top: 0px;
right: 0px; display: none; }
</style>
<script type="text/javascript">
function loadItemHandler( carousel, start, last, available ) {
if (available) { carousel.loaded(); return; }
var cr = carousel;
jQuery.get("data.xml", function(data) { appendItemCallback(cr, start, last, data); });
};
function appendItemCallback( carousel, start, last, data ) {
var items = data.match( /(\<img .*?\>)/g );
for (i = start; i <= last; i++) {
if ( items[ i - 1 ] == undefined ) break;
var item = carousel.add( i, getItemHTML( items[i-1]) );
item.each(function() {
jQuery("a.thickbox", this).click(function() {
var t = this.title || this.name || null;
var g = this.rel || false;
TB_show(t,this.href,g);
this.blur();
return false;
});
});
}
carousel.loaded();
};
function getItemHTML( item ) {
var found = item.match( /href=\"(.*?)\"/ );
var url = jQuery.trim(found[1]);
var title = jQuery.trim(found[1]);
var url_m = url.replace(/_s.jpg/g, '_m.jpg');
return '<a href="' + url_m +
'" title="' + title +
'" class="thickbox"><img src="' + url +
'" width="' + 75 + '" height="' + 75 +
'" alt="' + title + '" /></a>';
};
var nextOver = function() {
jQuery(this).attr("src", "img/horizontal-ie7/next-over.gif"); };
var nextOut = function() {
jQuery(this).attr("src", "img/horizontal-ie7/next.gif"); };
var nextDown = function() {
jQuery(this).attr("src", "img/horizontal-ie7/next-down.gif"); };
function nextButtonStateHandler(carousel, button, enabling) {
if (enabling) {
jQuery(button).attr("src", "img/horizontal-ie7/next.gif")
.mouseover(nextOver).mouseout(nextOut).mousedown(nextDown);
} else {
jQuery(button).attr("src", "img/horizontal-ie7/next-disabled.gif")
.unmouseover(nextOver).unmouseout(nextOut).unmousedown(nextDown);
}
}
var prevOver = function() {
jQuery(this).attr("src", "img/horizontal-ie7/prev-over.gif"); };
var prevOut = function() {
jQuery(this).attr("src", "img/horizontal-ie7/prev.gif"); };
var prevDown = function() {
jQuery(this).attr("src", "img/horizontal-ie7/prev-down.gif"); };
function prevButtonStateHandler(carousel, button, enabling) {
if (enabling) {
jQuery(button).attr("src", "img/horizontal-ie7/prev.gif")
.mouseover(prevOver).mouseout(prevOut).mousedown(prevDown);
} else {
jQuery(button).attr("src", "img/horizontal-ie7/prev-disabled.gif")
.unmouseover(prevOver).unmouseout(prevOut).unmousedown(prevDown);
}
}
jQuery(document).ready(function() {
jQuery().ajaxStart(function() { jQuery(".loading").show(); });
jQuery().ajaxStop(function() { jQuery(".loading").hide(); });
jQuery("#mycarousel").jcarousel({
itemVisible: 3, itemScroll: 2, wrap: true,
loadItemHandler: loadItemHandler,
nextButtonStateHandler: nextButtonStateHandler,
prevButtonStateHandler: prevButtonStateHandler
});
});
</script></head><body><div id="mycarousel">
<div class="loading">
<img src="img/loading.gif" width="16" height="16" border="0" />Loading...</div>
<img src="img/horizontal-ie7/prev.gif" border="0" class="jcarousel-prev" />
<img src="img/horizontal-ie7/next.gif" border="0" class="jcarousel-next" />
<ul></ul>
</div></body></html>
|
Да, повозиться здесь надо больше, чем в предыдущих примерах. Но большая часть кода уходит на обработку графики и интерпретацию полученных с сервера данных Ajax. Фактически большая часть кода здесь базируется на загруженных вместе с виджетом примерах. Таким образом, для использования этого элемента мне не пришлось углубляться в документацию.
Данные для карусели показаны в листинге 10.
Листинг 10. Data.xml
<images>
<img href="pics/image1.jpg" />
<img href="pics/image2.jpg" />
<img href="pics/image3.jpg" />
<img href="pics/image4.jpg" />
</images>
|
Это обычный файл в формате XML с тегом <images> и набором тегов <img>, в которых хранятся адреса рисунков. Поскольку этот виджет не встроен в Ajax, вы можете использовать тот формат, который вам больше нравится. Я написал код, интерпретирующий XML и создающий все прокручивающиеся элементы. Результат – на рисунке 8.
Рисунок 8. Карусель на странице
Я могу нажать мышкой на рисунке и перейти на страницу с этим рисунком (или по указанному мною адресу). Или же, нажав стрелку направо или налево, я могу прокрутить карусель и увидеть остальные рисунки. Эффект и в самом деле впечатляющий.
Заключение
Я показал вам несколько виджетов и инструментов, которые можно найти в Интернете – некоторые бесплатно, некоторые за деньги. Многие инструменты, которые попадались мне в процессе поисков, не используют Ajax и потому не подходят к теме данной статьи. Однако они и без этого стоят внимания. Я был поражён количеством высококачественных доступных для загрузки WYSIWYG-редакторов с открытыми исходными кодами. Я часто видел пользователей, недовольных тем, что им для размещения содержимого на своих сайтах приходится для указания жирных, курсивных шрифтов, ссылок, рисунков и прочего использовать в окнах редактирования теги HTML. Эти редакторы прячут весь HTML и дают пользователю возможность почувствовать себя в обычном текстовом редакторе.
| |
Кроме редакторов WYSIWYG вы можете найти решения для создания индикаторов выполнения, диалоговых окон с закладками, элементов управления с множеством панелей, часов, приёмников данных, интерпретаторов RSS и Outline Processor Markup Language (OPML) – и даже интерактивных терминальных окон. Само собой, прежде чем начинать создавать собственные элементы на DHTML или Flash, стоит посмотреть на то, что есть в Интернете (зачастую - бесплатно). Располагая такими виджетами, вы ценой совсем небольших усилий можете значительно повысить интерактивность своего сайта.
Ресурсы Научиться
Получить продукты и технологии
-
JCarousel: взгляните на карусель, созданную на оболочке jQuery.(EN)
-
SWF/Gauge и SWF/Charts: загрузите виджеты SWF/Gauge и SWF/Charts, разработанные maani.us. Здесь же вы найдёте разработанный на Flash виджет XML Слайдшоу.(EN)
-
Окна DHTML: поэкспериментируйте с лучшим из найденных мною пакетов для создания окон DHTML.(EN)
-
Scriptaculous: загрузите библиотеку Scriptaculous и узнайте о ней подробнее на сайте script.aculo.us site. (EN)
Обсудить
Об авторе
Выскажите мнение об этой странице
| |
