Обзор
В symfony есть Ajax хелпер, который позволяет очень быстро и просто создавать продуманные пользовательские интерфейсы. Это руководство покажет, как шаг за шагом создать Ajax-powered приложение, используя symfony, всего за 10 минут.

Вступление
Для лентяев, которых утомляет чтение, есть видео-пример, который показывает ниже изложенные действия.

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

Ajax позволяет приблизить метафорическое добавление товара в корзину в Интернет магазине к фактическому (как например вы это делаете в супермаркете). Подобный эффект достигается добавлением drag&drop возможности и моментальной перерисовки вышей корзины.

Описываемы в статье пример является портом примера корзины на сайте script.aculo.us. В примере используется JavaScript фреймворк prototype (который входит в состав symfony) и несколько скриптов из библиотеки script.aculo.us, которые входят в состав JavaScript хелпера.

Настройка
Для начала, создайте проект sfdemo, приложение app и модуль card:

$ cd /home/steve
$ mkdir sfdemo
$ cd sfdemo
$ symfony init-project sfdemo
$ symfony init-app app
$ symfony init-module app cart

Настройте ваш веб-сервер, чтобы был доступ к вашему новому приложению (неважно как вы этого добьётесь используя виртуальный хост или alias’ы (в unix-like системах с помощью этой команды создается псевдоним какого-либо скрипта или приложения), как описано в главе настройки веб-сервера в документации). Давайте предположим, что модуль card доступен отсюда:

http://localhost/cart/

Ваше приложение должно иметь доступ к symfony JavaScript библиотекам. Если приложение не работает, проверти доступ к библиотекам через браузер (зайдите на http://localhost/sf/js/prototype.js, например). Если страница не загрузилась, есть три способа решения этой проблемы:

Главная страница
Сначала нужно создать список продуктов, выставленных на продажу. Доступ к этому списку будет осуществляться через метод getProducts() action класса card. Корзина будет является полем объекта sfUser, устанавливаемый через Attribute parameter holder. Измените sfdemo/app/modules/cart/actions/actions.class.php на:


class cartActions extends sfActions
{
public function executeIndex()
{
$this->getUser()->setAttribute('cart', array());
$this->products = $this->getProducts();
}
private function getProducts()
{
return array('iPod black', 'iMac', 'iMac RC', 'iPod');
}
}


Главная страница модуля card будет содержать список товаров и место, куда они будут перетаскиваться (drop zone). Это место и будет корзиной. Итак, откройте шаблон sfdemo/app/modules/cart/templates/indexSuccess.php и впишите туда следующие:

symfony Apple store demo

Теперь товары будут отображаться в виде картинок. Эти картинки можно скачать в этом архиве, их следует положить в sfdemo/web/images/. Часть стилей уже сделаны, так что стоит их просто забрать отсюда, и положить в sfdemo/web/css/ также нужно добавить файл view.yml в sfdemo/app/modules/cart/config/ со следующим содержанием:

all:
stylesheets: [cart]

(Обратитесь к документации, если вас смущают *.yml)

Смотрим результат:

http://localhost/cart/

Фокусируемся на корзине.
Содержание корзины будет меняться, как только вы перенесете туда товар. Это значит что содержание корзины будет вынесено в отдельный файл шаблона. Для этого используем хелпер include_partial(). Товары в корзине будут «сохраняться» в div’ы со стилем float:left, а дальше после корзины нужно не забыть добавить стиль clear:both. (для тех, кто не понял зачем это смотрим спецификации) Измените конец шаблона indexSuccess.php на:

Cart:

Хелпер include_partial() заинклудит файл sfdemo/app/modules/cart/templates/_cart.php, который должен содержать следующее:

< ?php foreach($sf_user->getAttribute(’cart’) as $product_id => $quantity): ?>

< ?php if (!$sf_user->getAttribute(’cart’)): ?>
nothing yet in your shopping cart.
< ?php endif ?>

Если в корзине есть товар, то он отображается в виде картинок столько раз, сколько он туда добавлен. После группы товаров будет отображаться счетчик (переменная $quantity).
Можно опять посмотреть на нашу корзину:

http://localhost/cart/

На самом деле изменений не много, выглядит по-прежнему пусто… Настало время AJAX’a. (в оригинале «It’s time to make things AJAX».)

Добавляем JavaScript’овые события.
Добавьте в indexSuccess.php загрузку JavaScript хелпера:

< ?php use_helper(’Javascript’) ?>

Теперь нужно сделать картинки перетаскиваемыми (draggable), для этого нужно добавить вызов draggable_element:

< ?php foreach($products as $id => $title): ?>
< ?php echo image_tag(’product’.$id, array(
‘id’ => ‘product_’.$id,
‘class’ => ‘products’
)) ?>
< ?php echo draggable_element(’product_’.$id, array(’revert’ => true)) ?>
< ?php endforeach ?>

Этим мы добавим ко всем картинкам возможность перетаскивания. Опция revert добавляет возврат картинки на старую позицию, как только ее отпустят.

Теперь нужно определить, что будет происходить, как только пользователь бросит (перетащит) иконку товара в нашу корзину. Для этого укажем, какая часть шаблона должна обновится, какой action за это событие будет отвечать, и какие из перетаскиваемых элементов можно будет перетащить в корзину. Воспользуйтесь drop_receiving_elements хелпером для этого:

< ?php echo drop_receiving_element(’cart’, array(
‘update’ => ‘items’,
‘url’ => ‘cart/add’,
‘accept’ => ‘products’,
)) ?>

Снова можно проверить результат, попробуйте перетащить иконку товара в корзину, должно работать. Как только иконка перетаскивается в корзину, XMLHTTPRequest отправляет запрос add action’у, и результат отображается в div’е items. Только дело в том, что action add модуля card мы еще не создали…

Создаем action обновления.
Добавьте add action в sfdemo/app/modules/cart/actions/actions.class.php:

public function executeAdd()
{
$tmp = split('_', $this->getRequestParameter(’id’, ”));
$product_id = $tmp[1];

$cart = $this->getUser()->getAttribute(’cart’);
if (!isset($cart[$product_id]))
{
$cart[$product_id] = 1;
}
else
{
++$cart[$product_id];
}
$this->getUser()->setAttribute(’cart’, $cart);
$this->products = $this->getProducts();
}

Action разбирает присланные параметры (id товара) и добавляет этот товар в корзину.

Результатом работы action’а add будет шаблон addSuccess.php. Здесь простой инклуд (используя include_partial) _cart.php, только в этот раз необходимо передавать список товаров в параметрах:

< ?php include_partial(’cart’, array(’products’ => $products)) ?>

Шаблон не должен использовать глобальное расположение, чтобы изменить это отредактируйте sfdemo/app/modules/cart/config/view.yml, вписав следующие:

addSuccess:
has_layout: off

all:
has_layout: on
stylesheets: [cart]

Посмотрите результат: теперь элементы должны добавляться в корзину без проблем.

Фокусируемся на юзабилити.
Можно остановиться на этом, но есть один большой недостаток: пока корзина обновляется, интерфейс не меняется и это может смутить пользователя. Выход из этой ситуации – добавление индикатора, который показывает, что запрос в процессе обработки. И еще, пользователь может не понять, что перетаскиваемые элементы будут приняты «корзиной», поэтому стоит добавить стиль hover к слою cart.

Отредактируйте шаблон indexSuccess.php:

Сохраните картинку в файл sfdemo/web/images/indicator.gif

Теперь, нужно изменить в этом же шаблоне вызов хелпера drop_receiving_element(): добавить отображение индикатора и hover стиль:

< ?php echo drop_receiving_element(’cart’, array(
‘update’ => ‘items’,
‘url’ => ‘cart/add’,
‘accept’ => ‘products’,
’script’ => ‘true’,
‘hoverclass’ => ‘cart-active’,
‘loading’ => "Element.show(’indicator’)",
‘complete’ => "Element.hide(’indicator’)"
)) ?>

Заключение.
Полный код статьи можно скачать отсюда, также доступен рабочий пример он-лайн.

Пока полная документация по JavaScript хелперу не дописана, можно воспользоваться документацией script.aculo.us.

Оригинальная статья.

© AJAX Planet, 2007. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме AJAX, Библиотеки и фреймворки.

Это перевод статьи Джоана Хуртадо (Juan Hurtado) “GWT Small Guide”. Оригинал доступен на испанском и английском. Возможно перевод получится грубым, так как я очень торопился, буду рад узнать ваше мнение насчет качества перевода.

Потапов Геннадий (TermiT)

© AJAX Planet, 2007. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме AJAX, Google, Java, Библиотеки и фреймворки, Технологии.

© AJAX Planet, 2007. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме AJAX, Microsoft, atlas, Библиотеки и фреймворки.

Сегодня появился первый публичный релиз проекта “PHP for Microsoft AJAX Library, небольшой библиотечки, которая призвана облегчить использование Microsoft AJAX Library в приложениях, написанных на PHP. Проект открытый, базируется на и выпущен под Microsoft Permissive License.

Пока лишь альфа-релиз, и, при наличии множества конкурирующих библиотек, судьба проекта туманна. В качестве примера приведу код с использованием PHP for Microsoft AJAX Library, работающий с веб-сервисом. По построению на ASP.Net было бы то же самое:

HelloService.php:

< ?php

index.html:

© AJAX Planet, 2007. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме AJAX, Microsoft, atlas, Библиотеки и фреймворки.

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

Этот список скопирован из моего блога: Alex Bosworth’s Weblog: Ajax Mistakes

Не согласны? Готовы назвать еще одну ошибку? Что ж, эта статья имеет свою страницу на сайте SWiK.net

Так же рекомендую посетить страницу wiki  places to use Ajax

Заметки

Использование Ajax ради Ajax.

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

Поломка кнопки «Назад».

Кнопка «Назад» – огромная функциональная возможность стандартного пользовательского интерфейса веб-сайта. К сожалению, она плохо работает с JavaScript. Сохранение функциональности кнопки «Назад» – главная причина для того, чтобы не делать веб-приложение только на JavaScript.

Отсутствие видимого сигнала о происходящем действии.

Если я кликаю по кнопке, вызывающей Ajax-функцию, вы должны дать мне визуальный сигнал, что что-то происходит. Пример этого – сообщение о загрузке на GMail, расположенное справа вверху. Всякий раз, когда я делаю что-нибудь в GMail, маленький красный прямоугольник в верхнем правом углу показывает, что страница загружается. Он замещает стандартную функцию пользовательского интерфейса браузера – отображение процесса загрузки новой страницы, т.к. Ajax этого не поддерживает.

Оставляя офлайн пользователей позади.

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

Тем не менее, люди, имеющие нестабильное соединение с Интернетом, или люди, которые не хотят переходить на веб-приложения, должны иметь те же возможности при работе с новым поколением Ajax приложений, что и все остальные. То, что технология передовая, не означает, что люди готовы и желают работать с ней. При проектировании веб-приложений, в крайнем случае, надо предполагать оффлайн доступ. У GMail это POP, Backpackit имеет интеграцию с SMS. В Enterprise это веб-сервисы.

Не заставляйте меня ждать Ajax.

Со вкладками FireFox’а я могу управлять различным задержками на веб-сайтах и обычно я вынужден ждать только загрузки страницы. В случае AJAX-приложения и плохого соединения с Интернетом я могу получить действительно ужасное время взаимодействия с интерфейсом, потому что каждый раз, когда я что-либо делаю, я должен ждать ответа сервера. Помоги мне Боже, если я должен обратиться к диску сервера, прежде чем продолжить. Такие приложения могут даже заставить меня думать, что Ajax — это не круто.

Отправление важной информации в открытом виде.

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

Разработка AJAX приложений – это разработка для одной платформы.

Создание Ajax приложений – это кросс-платформенная разработка. Код Ajax выполняется JavaScript-движком IE, Rhino (JavaScript-движок мозиллы), или другим, менее популярным движком, который, тем не менее, может внезапно стать популярным. То есть, соответствия только со стандартным JavaScript недостаточно, необходимо тестирование для большинства приложений. Большая трудоёмкость создания хорошего Javascript кода вызвана глючностью реализации JavaScript в IE, хотя есть утилиты для облегчения разработки кода JavaScript под IE.

Слишком много кода замедляет браузер.

Ajax представляет возможность сделать JavaScript приложения более интересными. К сожалению, «интересными» часто означает больше выполняющегося кода. Больше кода – больше работы для браузера, а это значит, особенно для некоторых плохо написанных скриптов, что вам нужен более производительный центральный процессор, чтобы функциональность оставалось «живой». Производительность CPU раньше действительно была ограничением функциональности JavaScript, и то, что компьютеры стали быстрее, не означает, что проблема исчезла.

Отсутствие альтернатив для тех, у кого нет или отключен JavaScript.

Согласно статистике W3C по использования браузеров, которая неизбежно показывает перекос в сторону популярных браузеров, у 11 % пользователей JavaScript отключен. Так что, если ваше приложение полностью зависит от JavaScript, вы сразу же теряете десятую часть вашей аудитории.

Изобретение нового в пользовательском интерфейсе.

Главная ошибка, которую легко сделать, используя Ajax: “щелкни по этой непонятной штуке и получи неочевидный результат”. Конечно, пользователи, которые используют приложение некоторое время, могут выучить, что если по этой области кликнуть и удерживать кнопку нажатой, то эту область можно перетащить и оставить на новом месте. Но пока эта возможность не станет общей для большинства пользователей, вы лишь увеличите сложность и время на изучение вашего приложения, а это большой минус для любой программы.

Изменение состояний с помощью ссылок (GET запросы).

Как я отметил в предыдущей заметке, Ajax приложения создают множество проблем для пользователей, который полагают, что GET операции не меняют состояние приложения. Зависимость состояния приложения от ссылки – проблема не только для поисковых роботов, но и для пользователей, которые привыкли к навигации по ссылкам – они будут озадачены тем, что ссылки используются для смены состояния.

Неожиданное мигание и изменение элементов страницы.

Первая буква А в Ajax означает асинхронный. Проблема асинхронных сообщений в том, что вполне можно сбиться с толку, когда они вдруг выскакивают. Изменения на асинхронной странице должны происходить в строго определенном месте, и они должны быть ожидаемы. Вспыхивающие и мигающие сообщения, на которых я не хочу концентрироваться, напоминают о html-теге «blink».

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

Другая великолепная возможность веб-сайтов: я могу переслать ссылки другим людям, и они увидят то же, что вижу я. Ещё я могу сохранить адрес в закладках и позже вернуться к нему. JavaScript и Ajax приложения, могут создать множество проблем при такой схеме использования. Как только JavaScript начинает вместо сервера динамически генерировать страницу, её адрес больше не может использоваться для навигации. Очень нежелательно терять такую возможность, и многие Ajax приложения имеют специально сконструированные ссылки, чтобы избежать этого.

Не применение локальных изменений к другим частям страницы.

Так как Ajax/JavaScript дает вам потрясающий контроль над содержанием страницы, то легко можно сфокусироваться на одной области страницы и совсем забыть об общей картине. Например, заголовок на Backpackit. Если вы меняете заголовок страницы в Backpackit, он немедленно заменяется в правой части страницы, но не меняется главный заголовок (тег title). При работе с Ajax вы должны думать о картине в целом, даже когда делаете локальные изменения.

Асинхронное выполнение групповых операций.

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

Прокрутка страницы и потеря места чтения.

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

Блокирование поисковых машин.

Ajax приложения, которые загружают много текста без перезагрузки страницы, могут стать большой проблемой для поисковых машин. Это похожу на проблему с адресами. Если пользователи могут приходить с поисковых машин, некоторый текст приложения должен быть статичным, чтобы поисковые роботы могли его индексировать.

© AJAX Planet, 2007. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме AJAX, Технологии.

Стабильная версия Atlas будет выпущена в конце этого года. “Atlas” останется лишь кодовым названием продукта, более того, текущая версия будет разделена на составляющие: отдельно будет выпущено “ядро”, расширения будут выкладываться отдельно. Детального списка того, что войдет в “ядро” пока нет.

Будут выделены следующие компоненты:

1. Microsoft AJAX Library — клиентская javascript-библиотека, которая будет работать в любом браузере и сможет взаимодействовать с любым бэкэндом (в данный момент уже появились посты, описывающие взаимодействие с PHP и ColdFusion).
2. ASP.NET 2.0 AJAX Extensions — серверная часть сегодняшнего “Atlas”, отвечающая за интеграцию с ASP.NET. В частности это проявится в том, что официальный тег-префикс для атласовских контролов сменится с atlas: на asp:. В дальнейшем базовый функционал и основные контролы войдут в следующую версию ASP.NET.
3. ASP.NET AJAX Control Toolkit — то, что сегодня называется “Atlas” Control Toolkit, т.е. набор бесплатных контролов и компонент с открытым исходным кодом, позволяющих более полно использовать возможности ASP.NET AJAX Extensions.

Также обещано море вкусностей, связанных с готовящейся к выпуску в следующем году Visual Studio “Orcas”.

© AJAX Planet, 2006. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме AJAX, Microsoft, atlas, Библиотеки и фреймворки.

© AJAX Planet, 2006. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме AJAX, Библиотеки и фреймворки.

© AJAX Planet, 2006. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме AJAX, Google, Office, Текстовые редакторы.

Простой пример — корзина заказа. На странице выводится список предзаказанных товаров, происходит окончательная проверка, а затем — непосредственно отправка заказа. Предположим, что мы хотим при отправке спросить, действительно ли клиент уверен, что все поля заполнены правильно. Естественным выбором, если вы используете Atlas, будет ConfirmButtonExtender. Одна беда — а что, если у нас в корзине нет товаров и, соответственно, отсутствует кнопка “заказать”, к которой привязывается ConfirmButtonExtender? Он, конечно же, будет выдавать ошибку. Значит, нам придется проверять, есть ли в форме эта кнопка и динамически добавлять контрол. Беда только в том, что в документации примера нет, но ничего обойдемся.

Итак, есть кнопка btnOrder, расположенная внутри UpdatePanel upButton. И есть наш контрол ConfirmButtonExtender, который принимает 2 параметра: TargetControlID (ID кнопки, на которую вешаем подтверждение) и ConfirmText (вопрос, который мы задаем пользователю). Итак:

//создаем новый ConfirmButtonExtender
AtlasControlToolkit.ConfirmButtonExtender cbeOrderBtn = new AtlasControlToolkit.ConfirmButtonExtender();

//добавляем контрол в панель upButton
upButton.Controls.Add(cbeOrderBtn);


Ну вот и все =)

© AJAX Planet, 2006. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме AJAX, atlas, Библиотеки и фреймворки, Статьи про MS Atlas.

На текущий момент в Atlas Control Toolkit входит 21 контрол. В последний релиз вошли несколько новинок, в том числе NumericUpDown, который я вчера начал делать сам =). Что интересно, Atlas Toolkit разрабатывается в духе open source на сайте CodePlex и в этот релиз включены первые контролы от сторонних разработчиков — PasswordStrengthExtender (автор Paul Glavich) и FilteredTextBox (Christian Wenz). Похоже, Microsoft чему-то учится. Приятно. К концу года обещано 50 контролов.