Статьи Новости Контакты

17.10.2006
Анатолий Крысов

Динамические таблицы в Spry Framework

пример работы с динамическими таблицами в Spry Framework

Spry Framework

Начну с проблемы, упомянутой в анонсе к сегодняшней статье. Я говорю о проблеме гибкой и надежной схемы работы с данными и динамическим их представлением пользователю в рамках веб-приложений. В качестве инструмента была выбрана Spry Framework как одно из наиболее удобных и простых в обращении решений на ниве AJAX-библиотек. Суть примера: у нас есть источник данных (в нашем случае — обычный XML-файл), есть программный код, который отвечает за весь механизм, и есть простейшее визуальное представление данных — таблица в HTML.

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

<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html  xmlns="http://www.w3.org/1999/xhtml"  xmlns:spry="http://ns.adobe.com/spry">  
<head>  
<meta  http-equiv="Content-Type"  content="text/html;  charset=win-1251"  />  
  
<title>Пример  статичной  таблицы</title>  
</head>  
<body>  
<table  border="1">  
    <tr>  
        <th  scope="col">№</th>  
        <th  scope="col">Фамилия</th>  
        <th  scope="col">Имя</th>  
        <th  scope="col">Телефон</th>  
        <th  scope="col">Логин</th>  
    </tr>  
    <tr>  
        <td>001</td>  
        <td>Иванов</td>  
        <td>Иван</td>  
        <td>(495)  111-12-34</td>  
        <td>ivan_durak</td>  
    </tr>    
</table>  
</body>  
</html>

На самом деле код был бы больше за счет большего количества записей, но я решил его сократить, ибо для иллюстрации хватит шапки и одной строки. Теперь разберем сам код. Вначале идет !DOCTYPE — назначение этой строки, думаю, объяснять нет нужды. Обращу внимание сразу на следующую строку, где мы добавили атрибут xmlns:spry, — это заготовка на будущее. Дальше идет заголовок документа, теги head, title, body и table. В самой таблице у нас есть две строки: заголовок и запись. Больше наш код ничего не содержит — все максимально просто.

Простота — отличительная черта Spry

Поэтому, чтобы не терять время, сразу обратимся к источнику данных. Формат XML для статьи мы выбрали не зря: он позволит фактически исключить серверную часть из разбора, ибо браузер может обращаться к этим файлам напрямую. В самой же базе данных у нас будут три человека, а файл мы назовем people.xml.

<?xml  version="1.0"  encoding="win-1251"?>  
<entries  xmlns="http://hostinfo.ru/people">  
    <entry  id="001">  
        <lastname>Иванов</lastname>  
        <firstname>Иван</firstname>  
        <phone>(495)  111-12-34</phone>  
        <username>ivan_durak</username>  
    </entry>  
  
    <entry  id="002">  
        <lastname>Петров</lastname>  
        <firstname>Петр</firstname>  
        <phone>(495)  222-12-34</phone>  
        <username>petr_1y</username>  
    </entry>  
  
    <entry  id="003">  
        <lastname>Васильев</lastname>  
        <firstname>Василий</firstname>  
        <phone>(495)  333-12-34</phone>  
        <username>vasilisa</username>  
    </entry>  
</entries>

Spry Framework Schema
Схема работы Spry Framework

Как называть nodes внутри XML-документа, практически не имеет значения для конечного результата. Важно, чтобы структура источника данных совпадала со структурой того, как мы будем представлять эти данные пользователю. Теперь нам нужно подключить Spry Framework в основной файл, чтобы затем использовать его возможности для работы с данными. Делается это всего двумя строчками в рамках тега head.

<script  type="text/javascript"  src="../../includes/xpath.js"></script>  
<script  type="text/javascript"  src="../../includes/SpryData.js"></script>

Следующий шаг — создание объекта data set и загрузка в него данных из необходимого файла. Добавляем соответствующий код сразу после двух предыдущих тегов script.

<script  type="text/javascript">  
var  dsPeople  =  new  Spry.Data.XMLDataSet("people.xml",  "entries/entry");  
</script>

Разберемся с этим кодом подробнее. Для создания объекта мы используем функцию XMLDataSet с двумя аргументами. Первый сообщает движку путь к источнику данных; в нашем случае это статичный XML-файл, но на его месте может быть любое серверное веб-приложение, генерирующее динамичный ответ. Второй аргумент функции XMLDataSet — это выражение XPath, которое сообщает движку, какие именно данные нас интересуют. В рамках материала вся информация содержится в кодах entry, поэтому мы и используем выражение entries/entry.

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

[  
    {  "@id":  "001",  "lastname":  "Иванов",  "firstname":  "Иван",  "phone":  "(495)  111-12-34",  "username":  "ivan_durak"  },  
  
    ...  
  
    {  "@id":  "003",  "lastname":  "Васильев",  "firstname":  "Василий",  "phone":  "(495)  333-12-34",  "username":  "vasilisa"  }  
]

Однако, для того чтобы Spry Framework автоматически транслировал данные в нужные нам HTML-контейнеры, придется добавить еще немного кода. Причем делать это движок будет самостоятельно по мере загрузки или обновления данных.

<div  spry:region="dsPeople">  
<table  border="1">  
    <tr>  
        <th  scope="col">№</th>  
        <th  scope="col">Фамилия</th>  
        <th  scope="col">Имя</th>  
        <th  scope="col">Телефон</th>  
        <th  scope="col">Логин</th>  
    </tr>  
    <tr>  
        <td>{dsPeople::@id}</td>  
        <td>{dsPeople::lastname}</td>  
        <td>{dsPeople::firstname}</td>  
        <td>{dsPeople::phone}</td>  
        <td>{dsPeople::username}</td>  
    </tr>  
</table>  
</div>

Многие вещи в Spry делаются автоматически

Во-первых, мы заключили нашу таблицу внутри контейнера div с атрибутом spry:region="dsPeople". Это сообщает движку, что здесь у нас находится динамический регион. А значение атрибута spry:region указывает на data set, который привязан к региону. Иными словами, когда data set меняется, то движок должен обновить и динамический регион. Более того, мы можем привязать регион к нескольким data set, и тогда синтаксис будет выглядеть, к примеру, так: spry:region="dsPeople1 dsPeople2 dsPeople3".

Для того чтобы Spry Framework поняла, куда добавлять данные и какие именно мы используем выражения вроде этого: {dsPeople::lastname}. Иными словами, синтаксис подобных выражений выглядит следующим образом: {<название data set>::<название колонки>}. Если же мы используем лишь один источник данных, то тогда выражение можно сделать короче.

<tr>  
    <td>{@id}</td>  
    <td>{lastname}</td>  
    <td>{firstname}</td>  
    <td>{phone}</td>  
    <td>{username}</td>  
</tr>

Spry Framework Gallery
Разработка галерии изображений так же проста, как и пример в материале

Но если попробовать запустить пример в браузере прямо сейчас, то приложение покажет лишь одну строку с данными, хотя в источнике у нас содержится целых три человека. Причина проста: движок лишь подставляет первые по списку значения вместо указанных выражений и на этом останавливается. Для того чтобы транслировать всю необходимую информацию, нам придется создать конструкцию loop. Это делается с помощью атрибута spry:repeat, которому в качестве значения устанавливается нужный data set.

<tr  spry:repeat="dsPeople">  
    <td>{@id}</td>  
    <td>{lastname}</td>  
    <td>{firstname}</td>  
    <td>{phone}</td>  
    <td>{username}</td>  
</tr>

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

Объект data set в Spry Framework имеет отличный встроенный метод sort, который без каких-либо проблем отсортирует необходимые нам данные. Посмотрим код, который я приведу без сокращений (полностью весь динамический регион), чтобы была видна цельная картина.

<div  spry:region="dsPeople">  
<table  border="1">  
    <tr>  
        <th  scope="col"  onclick="dsPeople.sort('@id');">№</th>  
        <th  scope="col"  onclick="dsPeople.sort('lastname');">Фамилия</th>  
        <th  scope="col"  onclick="dsPeople.sort('firstname');">Имя</th>  
        <th  scope="col"  onclick="dsPeople.sort('phone');">Телефон</th>  
        <th  scope="col"  onclick="dsPeople.sort('username');">Логин</th>  
    </tr>  
    <tr  spry:repeat="dsPeople">  
        <td>{@id}</td>  
        <td>{lastname}</td>  
        <td>{firstname}</td>  
        <td>{phone}</td>  
        <td>{username}</td>  
    </tr>  
</table>  
</div>

Приложения на Spry легко расширяются

Как видно из примера, сортировка данных будет проводиться по нажатии пользователем на заголовки колонок, как это и реализовано в подавляющем большинстве случаев. Таким образом, наш динамический регион будет обновляться автоматически каждый раз, когда мы вызываем сортировку данных. Причем ничего больше писать в коде не надо: в этом-то и кроется главная прелесть Spry Framework для разработчиков. Здесь автоматизировано почти все, что только поддается автоматизации. Как бы то ни было, посмотрим еще один, последний, пример.

Очень часто в рамках разработки веб-приложения требуется одновременная работа с несколькими источниками данных, причем без перезагрузки страницы. К слову, именно это и считается основой AJAX, а совсем не красивые графические эффекты и везде прикрученный drag&drop. Представим ситуацию, что нам необходимо предоставить пользователю выбор из нескольких списков людей, которые обновлялись бы по выбору из выпадающего списка. Со Spry Framework нам потребуется добавить лишь несколько строк кода прямо перед динамическим регионом.

<select  onchange="dsPeople.setURL(this.value);  dsPeople.loadData();">  
    <option  value="people01.xml"  selected="selected">Список  первый</option>  
    <option  value="people02.xml">Список  второй</option>  
</select>

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

Ссылки по теме




Скоро на сайте

  • Wordpress

    Серия статей о плагинах к движку WordPrress
  • AJAX

    Проекты и продукты, ориентированные на AJAX
  • Новые сервисы Google

    Обзор новых сервисов Google
 

Copyright © 2003—2018 Все права защищены

При использовании материалов сайта ссылка на hostinfo.ru обязательна

  • хостинг от .masterhost
  • Rambler's Top100