AJAX Planet » Технологии

Выпущена мобильная версия Google Docs

Boris Bogdanov — Wed, 17 Oct 2007 21:08:46 +0000

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

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

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

На самом деле, для таких инфоманьяков, как я, способов применения можно придумать бесконечное число, в том числе и самые экзотичные. Скажем, списки покупок, которые заботливая жена составляет для своего бестолкового мужа-программиста.

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

По следам СПИКа

Boris Bogdanov — Sun, 20 May 2007 20:01:11 +0000

Прошедшая неделя была совершенно безумной — сертификация по Битриксу, подготовка к Санкт-Петербургской Интернет Конференции, да и ведение проектов никто с меня не снимал… Неделя получилась очень утомительной, напряженной, но и интересной. В качестве завершающего аккорда в пятницу прошел СПИК. Скажу честно, на самих выступлениях я практически не был — не до того, но зато по завершению очень хорошо посидел с Андроником Назаретяном из компании EnterNetica. Час бесед про семантику и прагматику интерфейсов — это что-то.

На СПИКе EnterNetica показывала свои технологии — то, что они называют трехмерным интернетом. Ребята умудрились создать достаточно качественную и быструю трехмерную графику, которая работает непосредственно в браузере. Понятно, что требуется установить ActiveX-компонент, и работает пока только в Internet Explorer, но результат действительно того стоит. Работает вся эта красота с DirectX 7, либо OpenGL 2.0. На самом деле, судя по нашей беседе и имеющимся демкам, сейчас эта компания вполне может создать, скажем, что-то подобное SecondLife, но не требующее установки десктопного ПО.

По ощущению, имеющаяся на данный момент ситуация, очень напоминает то, что было с Flash буквально несколько лет назад — технология с огромным потенциалом, который еще мало кто увидел, и применения которому пока не придумано, так что развитие идет практически на ощупь…

Update:
Единственной сессией, на которой я на СПИКе был лично, была секция по нестандартному продвижению. Если верить тем, кто был и на других выступлениях, это было едва ли не самое яркое зрелище на всей прошедшей конференции. Выступления трех Алексеев — Новикова, Саминского и Довжикова были действительно впечатляющими. Алексей Саминский, простите уж меня за такой сленг, “зажег” со страшной силой. Действительно, очень ярко и выразительно.

Update 2:
На сайте конференции появились презентации докладов.

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

It’s time to make things Ajax или Ajax используя symfony

TermiT — Mon, 23 Apr 2007 06:00:22 +0000

Symfony
Symfony – это мощный опен-сорсный PHP фреймворк. На сайте проекта можно найти множество статей (перевод одной, вы сейчас читаете), видео-примеры, обширную документацию и достаточно объемную книгу, доступную on-line. Одна особенность статьи, что пример разработки, ведется на unix-like системе, думаю, это никого не испугает, а наоборот привлечет внимание.

Обзор
В 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, например). Если страница не загрузилась, есть три способа решения этой проблемы:

настроить Apache используя следующий alias:

Alias /sf /$data_dir/symfony/web/sf

сделать символическую ссылку sf в вашем веб-катологе

$ cd /home/steve/sfdemo/web $ ln -sf /$data_dir/symfony/web/sf sf

скопировать JavaScript файлы в

$ cd /home/steve/sfdemo/web $ mkdir -p sf/js $ cp /$data_dir/symfony/web/sf/js/*.js sf/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`



Products:

< ?php foreach($products as $id => $title): ?>

< ?php echo image_tag(’product’.$id, array(

‘id’    => ‘product_’.$id,

‘class’ => ‘products’

)) ?>

< ?php endforeach ?>

Cart:

Теперь товары будут отображаться в виде картинок. Эти картинки можно скачать в этом архиве, их следует положить в 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:`




      < ?php include_partial(’cart’) ?>

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

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



  < ?php for($i = 1; $i <= $quantity; $i++): ?>

    < ?php echo image_tag(’product’.$product_id, array(

      ‘class’ => ‘cart-items’,

      ‘id’    => ‘item_’.$product_id.’_’.$i,

      ’style’ => ‘position:relative’

    )) ?>

  < ?php endfor ?>

  (< ?php echo $quantity ?> < ?php echo $products[$product_id] ?>)

< ?php endforeach ?>

< ?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:



< ?php echo image_tag(’indicator.gif’) ?> updating cart…

Сохраните картинку в файл 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, Библиотеки и фреймворки.

Онлайновое видео…

Boris Bogdanov — Fri, 16 Mar 2007 08:32:08 +0000

Традиционно считается, что Рунет отстает от западного (преимущественно американского) интернета на 3-5 лет.

В Штатах в последние пару лет мы наблюдаем просто взрывной рост сервисов, связанных с видео. Онлайновое видео становится привычным для пользователей интернета, более того, приходит и на обычные телевизоры. Онлайновое видео используется для самых неожиданных занятий – от липовых видео-дневников провинциальной нимфетки до трансляции новостей, проведения благотворительных компаний и предвыборной агитации (посмотрите, скажем, перепевку знаменитого ролика Apple). Видео может служить и просто важным инструментом увеличения продаж. Интересны результаты последних исследований в данной области: «онлайновое видео оказывается едва ли не самым эффективным способом продаж при работе с IT-специалистами. < ...> Онлайновое видео обеспечивает маркетологов мощным инструментом для повышения качества технологического контента».

Популярность видео дошла до того, что появляются сервисы, по онлайновому редактированию видео (скажем, JumpCut, eyespot и новоявленный Adobe Remix). Еще не утихли войны вокруг необходимости онлайновых текстовых редакторов, а появляются редакторы для видео. Создание видео-контента становится всё проще. Понятно, что это приведёт к появлению моря любительского контента отвратительного качества, но, по закону больших чисел, появится и множество талантливых и интересных работ.

Таким образом, видео уже перешагнул уровень игр энтузиастов и техно-гиков и стремительно превращается в привычный инструмент, который признан пользователями и создателями контента от блоггеров до крупных корпораций и политиков. Вспомните презентацию iPhone: её видели все, подавляющее большинство – в онлайне. На каждом онлайновом видео-сервисе вы встретите несколько вариантов этой записи, и каждый – с солидным числом просмотров. Активно использует видео и заклятый противник Apple, Microsoft, проводя видео-трансляции встреч и семинаров (вебинаров).

Покупка за баснословную сумму в 1,65 миллиардов долларов YouTube -– яркое подтверждение признания популярности и перспективности видеосервисов. Что ж, Уильям Гибсон, живой классик киберпанка еще раз доказал свою прозорливость…

Если судить по российским видео-сервисам, например, rutube.ru, у нас онлайновое видео пока используется максимум как еще один из способов распространения приколов. Такой вариант «Сам себе режиссер», только лишенный цензуры и хоть какого-нибудь отбора, что неизбежно сказывается на качестве.

В данный момент в России примеры удачного использования онлайнового видео для бизнеса очень и очень редки. Одним из немногих является блог Финама. Впрочем, данный случай вообще стоит выделить особо: это не столько просто видео и мультипликация, сколько интересный и креативный метод популяризации концепции ПИФов. Пожалуй, еще одним интересным примером может быть использование видео на сайте Банк24. Практика появления видео с отчетами по результатам встреч/конференций/семинаров пока очень редка, а немногие примеры, пусть и достаточно интересны, но больше напоминают пробу пера, а не отработанный канал для работы с целевой аудиторией.

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

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

Новые формы HTML5

TermiT — Fri, 16 Mar 2007 05:39:41 +0000

Небольшое вступление
В свете новых событий вокруг отказа W3C от продолжения работы над XHTML (ознакомится с этим событием можно в статье Ивана Сагалаева – W3C возвращается к HTML) я решил выяснить, чем же HTML5 будет полезен для разработчика, использующего AJAX…

Итак представляю вам с вольный перевод коротенькой заметки «Improve your forms using HTML5!», которая, кстати, была написана еще до всех этих событий вокруг консорциума и HTML5…

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

Советы от dev.opera.com.
С момента релиза HTML4 в 1998 году язык совсем не обновлялся. Несмотря на это? начиная с 2004 года, участники WHATWG community (объединение разработчиков браузеров Safari, Opera, FireFox) продолжали работу над HTML, в итоге были добавлены новые возможности (некоторые из них, в принципе, давно уже напрашивались).

В данной статье будет рассмотрена функциональность форм HTML5, так называемые Web Forms 2. (Приведенные примеры отлично работаю в Opera, FireFox и Safari)

autofocus и пропуск атрибутов
Новые вебформы позволяют производить валидацию данных и много других интересных вещей, которые упрощают работу программистам/верстальщикам. Например, рассмотрим следующий код:


Search:



< !–остальная часть формы–>

Его можно заменить, используя новые формы следующим кодом:


Search:


  < !–остальная часть формы –>

Часть кода из первого примера исчезла, и добавился новый атрибут autofocus. Благодаря атрибуту autofocus мы избавились от javascript’a и атрибута id, по которому обращался к input тот самый javascript. Атрибут method тэга form можно опустить, т.к. метод GET для формы будет установлен по умолчанию. Аналогично, input по умолчанию получит тип text. Также работая с Web Forms 2 мы можем опустить action в тэге form, эффект будет такой же, как если бы мы указали action пустую строку.

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



Name:


E-mail:


URL:


Comment:

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

В коде использовались новые компоненты url и email, а также новый атрибут required. Кроме того, в Web Forms 2 добавлены следующие элементы dates, time, numbers, add, remove. Примеры их работы можно посмотреть тут.

Стили
Задать стиль элементу очень просто, достаточно воспользоваться новыми псевдо-классами :

input:required { background:yellow }

Аналогично и с отключенными элементами (disabled control), отмеченными чекбоксами (checked checkboxe), кнопками отправки формы (default submit button),read-only элементами и т.д.:

input:disabled { … } input:checked + label { … } input[type=button]:default { … } input:read-only { … }

Пример формы в действии.

Заключение
Web Forms 2 это только малая часть того, что реализовано и еще будет реализовано в HTML 5. Например, появляется замечательный тэг , который позволяет веб-разработчикам создавать двумерные рисунки при помощи JavaScript. (есть интересная статейка о использовании canvas: AJAX, HTML-холст, и Суперпоезд). Советую всем ознакомится с черновиком спецификации HTML 5

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

Доля рынка Google Reader

Boris Bogdanov — Sun, 18 Feb 2007 09:33:30 +0000

В середине мая 2006 года появилась статистика по популярности различных сервисов Google. Google Reader, выпущенный 7 октября 2005, тогда даже не вошел в двадцатку. Впрочем, новая версия аггрегатора, запущенная в сентябре 2006, была настолько успешной (см. обзор в Интернетных Штучках), что достаточно быстро набрала популярность. Я и сам вскоре после выхода нового ридера пересел на него с NewsGator Inbox.

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

В пятницу эта ситуация изменилась. Google Reader наконец-то стал показывать статистику по количеству подписчиков на тот или иной фид. Статистика оказалась действительно впечатляющей.

По данным FeedBurner на AJAX Planet RSS через Google Reader читают 42% подписчиков. Правда, должен отметить, что это не только доля Google Reader, но и Google Personalized Homepage.

Что интересно, и на других сайтах картина ровно такая же. Для англоязычных блогов доля Google Reader колеблется в пределах от 30 до 60% (!).

Интересно было бы получить статистику в целом по числу пользователей Google Reader. Уже практически нет сомнений, что Google Reader — самый популярный аггрегатор в мире. При этом я вполне готов поверить, что и до сих пор идет постоянный рост числа пользователей, пусть и не такой стремительный, как осенью 2006, так что вскоре Google Reader вполне может занять больше 50% рынка.

Интересна эта тема? Посмотрите архив сообщений по теме Google, Office, RSS.

Google Web Toolkit. Небольшое руководство

TermiT — Mon, 29 Jan 2007 05:35:17 +0000

0. О статье.

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

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

1. Введение.

1.1. Презентация
Я написал это небольшое руководство для людей, которые хотят научится создавать динамические приложения пользуясь GWT (Google Web Toolkit) в AMP (Apache MySQL PHP) среде. Основная идея в том, чтобы написать небольшой и очень простое приложение с использованием PHP и MySQL на стороне сервера, GWT для реализации интерфейса, JSON для обмена данными между клиентской и северной частями.

1.2. О JSON
JSON (JavaScript Object Notation) – это легкий и удобный формат обмена данными. Отличительной чертой является то, что он прост и понятен для человека. Этот формат легко обрабатывается и генерируется программами. Он основан на языке JavaScript, Standard ECMA-262 3rd Edition — December 1999. JSON — это текстовый формат, не зависящий от языка программирования. JSON использует соглашения близкие к Си-подобным языкам, включая C, C++, C#, Java, JavaScript, Perl, Python, и много других. Все это делает JSON идеальным языком для обмена данными. Вы можете найти много полезной информации о JSON здесь www.json.org (и тут: ru.wikipedia.org/wiki/JSON)

1.3. О GWT
GWT (Google Web Toolkit) – это инструмент позволяющий легко создавать AJAX (ru.wikipedia.org/wiki/AJAX) приложения на языке JAVA, проще говоря, GWT “переводит” ваш JAVA код в HTML и JavaScript. Подробнее о GWT можно прочесть по адресу http://code.google.com/webtoolkit/

1.4. Об этом руководстве
Мы сделаем небольшое приложение для поиска информации по сотрудникам в базе данных MySQL, используя в качестве параметра поиска имя сотрудника.

2. Работа над серверной частью.

2.1. База данных
Нам нужна всего одна таблица, которая будет называться ‘directory’, и которую мы заполним информацией о сотрудниках:

2.2. PHP скрипт
Для доступа к данным базы напишем PHP скрипт. Он будет выбирать данные и преобразовывать в JSON формат. Для этого будем использовать JSON PHP class, который можно скачать отсюда http://pear.php.net/pepr/pepr-proposal-show.php?id=198. Этот класс позволяет преобразовывать значения из PHP в JSON формат и отправлять их браузеру. Файл ‘index.php’ будет содержать следующий код:

< ?


// вызов JSON.php

require_once(”JSON.php”);
// коннект к базе
$conector = mysql_connect(’localhost’, ‘root’, ‘juan’) or die(mysql_error());

mysql_select_db(’JSONPHP’) or die(mysql_error());
//формируем запрос
$sqlQuery = “SELECT * FROM directory WHERE name LIKE ‘”. $_REQUEST[’tosearch’]. “%’”;

$dataReturned = mysql_query($sqlQuery) or die(mysql_error());

$i = 0;
while($row = mysql_fetch_array($dataReturned)){
// заполняем массив $value данными.
$value{”item”}{$i}{”Employe Number”}= $row[’enumber’];

$value{”item”}{$i}{”Name”}= $row[’name’];

$value{”item”}{$i}{”Position”}= $row[’position’];

$value{”item”}{$i}{”Phone Number”}= $row[’phnumber’];

$value{”item”}{$i}{”Location”}= $row[’location’];

$i++;

}
// использую JSON.php конвертируем данные в JSON формат и отправляем в браузер
$json = new Services_JSON();

$output = $json->encode($value);

print($output);

?>

И это весь код. Вывод этого php скрипта должен быть похож на следующие:{"item":[{ "Employe Number":"110009", "Name":"Juan Hurtado", "Position":"System Analist", "Phone Number":"81001121", "Location":"Monterrey City"}] }Теперь пора заняться интерфейсом и GWT.

3. Работа над клиентской частью.

3.1 Пример с JSON RPC
На сайте http://code.google.com/webtoolkit/ есть несколько примеров использования GWT. Один из них показывает, как использовать GWT в связке с JSON для доступа к сервису Yahoo. Мы возьмем за основу нашего интерфейса пример JSON RPC, который можно скачать тут.

3.2 Создание нового приложения
Используя projectCreator.cmd (этот файл находится в дистрибутиве GWT) создадим новый проект:
C:\>projectCreator.cmd -eclipse PHPJSON -out PHPJSON Created directory PHPJSON\src Created file PHPJSON\.project Created file PHPJSON\.classpath
Теперь создадим новый проект для eclipse с помощью applicationCreator.cmd:
C:\>applicationCreator.cmd -eclipse PHPJSON -out PHPJSON com.juan.client.PHPJSON

Created directory PHPJSON\src\com\juan
Created directory PHPJSON\src\com\juan\client
Created directory PHPJSON\src\com\juan\public
Created file PHPJSON\src\com\juan\PHPJSON.gwt.xml
Created file PHPJSON\src\com\juan\public\PHPJSON.html
Created file PHPJSON\src\com\juan\client\PHPJSON.java
Created file PHPJSON\PHPJSON.launch
Created file PHPJSON\PHPJSON-shell.cmd
Created file PHPJSON\PHPJSON-compile.cmd

Пример JSON RPC содержит классы, которые позволяют обрабатывать иформацию в формате JSON. (Тут говорится о старой версии примера JSON RPC; в новой версии примера JSON RPC эти файлы не идут в дистрибутиве примера, так как эти классы стали стандартными в новой версии GWT. Но никто не мешает вам следовать примеру, все это будет работать и с новой версией GWT) Скопируем из примера следующие файлы в папку PHPJSON\src\com\juan\client:

JSONArray.java
JSONBoolean.java
JSONException.java
JSONNumber.java
JSONObject.java
JSONParser.java
JSONString.java
JSONValue.java

Во всех файлах нужно заменить строчку с данными о пути пакета. (в нашем случае нужно заменить package com.google.gwt.sample.json.client; на package com.juan.client;) Также исправьте пути в файле JSONParser.java. Затем импортируем наш проект в Eclipse как написано в документации по GWT. Запустите Eclipse и кликните в меню File -> Import. В появившемся окне выберите пункт ‘Existing Projects into Workspace’, укажите путь к файлу .project в следующем окне. После этого вы должны увидеть ваш GWT проект:

Создадим класс JSONRequester и опишем следующие метод:

public Widget initializeMainForm() { /* * Иницилизация и установка панели, которая будет содержать * поисковую форму и вывод результата */

FocusPanel fpn = new FocusPanel();
Grid gd = new Grid(1,2);

b1.setText(”Search”);
b1.addClickListener(new SearchButtonClickListener());

gd.setWidget(0, 0, txtBox);
gd.setWidget(0, 1, b1);

gdOut.setWidget(0,0,gd);

gdOut.setBorderWidth(1);
gdOut.setWidth(”500px”);

childGrid.setCellPadding(0);
childGrid.setCellSpacing(0);
childGrid.setWidth(”490px”);

fpn.add(gdOut);

return fpn;
}

Как вы видете создается элемент FocusPanel, затем мы прикрепляем эелемент Grid(Сетка), на этой сетке располагаем все нужные элементы. В обработчике клика по кнопке создается класс SearchButtonClickListener, которые будет содержать следующие строки:

private class SearchButtonClickListener implements ClickListener {

public void onClick(Widget sender) {
/*
* Когда пользователь нажимает кнопку мы получаем URL.
*/
itemNumber = 0;
doFetchURL();
}

private void doFetchURL() {
/*
* Получаем URL и вызываем обработчик
*/
b1.setText(”Searching …”);
if (!HTTPRequest.asyncGet(DEFAULT_SEARCH_URL + “?tosearch=” + txtBox.getText(),

new JSONResponseTextHandler())) {

b1.setText(”Search”);
}
}
}

Этот класс содержит метод doFetchURL(), с помощью которого находится URL и вызывается класс JSONResponseTextHandler() для выполнения операций над JSON документом:

private class JSONResponseTextHandler implements ResponseTextHandler {

public void onCompletion(String responseText) {
/*
* После того, как полученны данные в формате JSON мы
* обрабатываем их и выводим результат
*/

JSONObject jsonObject;
try {
jsonObject = JSONParser.parse(responseText);
displayJSONObject(jsonObject);

} catch (JSONException e) {

}

b1.setText(”Search”);

}

private void displayJSONObject(JSONObject jsonObject) {
/*
* Очищаем Grid(сетку) и заполняем новыми результатами
*/

childGrid.clear();
requestChildrenGrid(jsonObject);
gdOut.setWidget(1,0,childGrid);

}

private void requestChildrenGrid(JSONValue jsonValue){
/*
* Заполнение Grid(сетки)
*/

JSONObject jsonObject;
if(jsonValue.isArray() != null){
for(int i = 0; i < jsonValue.isArray().size();i++){
requestChildrenGrid(jsonValue.isArray().get(i));
childGrid.setWidget(itemNumber,0,new HTML(”

”));
childGrid.setWidget(itemNumber,1,new HTML(”

”));

itemNumber++;
int resizeNumber = itemNumber + 1;
childGrid.resize(resizeNumber,2);
}
} else {

if ((jsonObject = jsonValue.isObject()) != null) {
String[] keys = jsonObject.getKeys();

for (int i = 0; i < keys.length; ++i) {
String key = keys[i];
childGrid.setWidget(itemNumber,0,new HTML(””+ key +”:”));
childGrid.setWidget(itemNumber,1,new HTML(jsonObject.get(key).toString()));
requestChildrenGrid(jsonObject.get(key));

itemNumber++;
int resizeNumber = itemNumber + 1;
childGrid.resize(resizeNumber,2);
}
} else if (jsonValue != null) {
//

} else {
//
}

}
}

}

Все эти методы из файла JSON.java гугловкого примера JSON RPC. Метод requestChildrenGrid(JSONValue jsonValue) разбивает JSON документ на ключи и значения, ключи обрамляются тэгами “”и прикрепляются к Grid(сетке), которая в свою очередь прикрепляется к FocusPanel. И наконец, в файле PHPJSON.java мы выводим результат на главную панель:

public void onModuleLoad() { /* * Для красоты используем TabPanel */ TabPanel tp = new TabPanel(); JSONRequester myJson = new JSONRequester();

tp.add(myJson.initializeMainForm() ,”Corporate Directory”);

tp.selectTab(0);

RootPanel.get().add(tp);
}

Вот как должно выглядеть приложение в результате:

Вы можете скачать код клиентской и серверной части отсюда. Надеюсь, это небольшой пример вам помог.

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

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

Выпущен ASP.NET AJAX 1.0

darius — Wed, 24 Jan 2007 07:43:12 +0000

Вчера официально зарелизился ASP.NET AJAX 1.0. В принципе, никаких неожиданностей, всё происходит в полном соответствии с давно объявленными планами. Подробно о релизе можно прочесть в блоге Скотта Гатри (Scott Guthrie)

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

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

PHP for Microsoft AJAX Library

Boris Bogdanov — Wed, 24 Jan 2007 07:23:02 +0000

Как известно, ASP.NET AJAX, ранее известный как Atlas, про который я достаточно много писал, исходно создавался для работы с ASP.Net. Впрочем, сама библиотека Microsoft AJAX Library — это чистый JavaScript, который можно скачать отдельно и попытаться использовать независимо от ASP.Net.

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

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

HelloService.php:

< ?php
require_once ‘../../dist/MSAjaxService.php’; class HelloService extends MSAjaxService { function SayHello($name) { return "Hello, " . $name . "!"; } } $h = new HelloService(); $h->ProcessRequest(); ?>

index.html:

Name: Response from server:

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

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

Ошибки при работе с Ajax

2tl — Mon, 22 Jan 2007 09:34:17 +0000

Наш читатель Илья Колесников (2tl) перевел и прислал уже достаточно старую, но от того не менее важную и интересную серию заметок Алекса Босворта (Alex Bosworth). Сейчас мы уже несколько свыклись с такой технологией, как AJAX, но всё же зачастую видно его использование просто ради самого использования, или применения без оглядки на удобство для пользователей. Надеюсь, что статья будет пусть не нова, но полезна для многих разработчиков.

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, Технологии.