Улучшение пользовательского интерфейса с помощью Ajax

Автодополнение хэштегов при отправке твита

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

Мы имплементируем эту функцию предлагая преположительные варианты, когда пользователь вводит теги при отправке, но вместо того чтобы писать эту особенность с нуля, мы собираемся использовать плагин jQuery для его реализации .jQuery располагает большим и постоянно растущим списком плагинов, которые предоставляют разнообразные возможности Установка плагина является ничем не отличается от установки самого jQueiy. Вы скачиваете один (или более) файлов и привязываете их к вашему шаблону и вы должны написать несколько строк кода JavaScript, чтобы активировать плагин.

Вы можете просматривать список доступных jQuery плагинов, перейдя на http://docs.jquery.com/plugins. Найдите в списке плагин автозаполнения и скачайте его, или вы можете взять его непосредственно на http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/.

Вы получите zip-архив с большим количеством файлов в нем. Извлеките файлы (которые можно найти в каталоге jquery/autocomplete/scroll) в каталог static/js:

• jQuery. autocomplete.css
• Dimensions.js
• jQuery. bgiframe.min.js
• jQuery.autocomplete.js

Поскольку мы хотим предложить функцию автозаполнения на странице представления закладки, создайте пустой файл под названием tag_autocomplete.js в папке js. Затем откройте файл template/bookmark_save.html и и свяжите все предыдущие файлы в нем:

{% extends "base.html" %}
{% block external %}
<link rel="stylesheet"
href="/site_media/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript"
src="/site_media/dimensions.js"> </script>
<script type="text/javascript"
src="/site_media/j query.bgiframe.min.j s"> </script>
<script type="text/javascript"
src="/site_media/j query.autocomplete.j s"> </script>
<script type="text/javascript"
src="/site_media/tag_autocomplete.js"> </script>
{% endblock %}
{% block title %}Save Bookmark{% endblock %}
{% block head %}Save Bookmark{% endblock %}
[. . .1

Теперь мы закончили установку плагина, и, если вы прочитаете документацию о нем, вы обнаружите что что этот плагин активирован путем вызова метода с именем autocomplete () на выбранный элемент ввода. Функция autocomplete () принимает следующие параметры:

• URL-адрес со стороны сервера: для этого, плагин отправляет GET запрос по URL-адресу с тем, что было введено и ожидает от сервера возврата набора предложений.
• Объект, который может использоваться для указания различных параметров: Параметров, которые представляют интерес для нас множество. Этот параметр имеет логическое значение переменной, которое сообщает плагину, что поле ввода используется для ввода нескольких значений (Помните, что мы используем же текстовое поле для ввода всех тегов) и множества разделителей , которые обычно говорят плагину, какая строка отделяет несколько записей. В нашем случае это один пробел.

Перед активацией плагина, нам нужно написать представление, которое получает входные данные пользователя и возвращает набор предложений .Откройте файл tweets/view.py и добавьте следующее в конце:

def AJAX_tag_autocomplete(request): 
if request.GET.has_key(‘q’):):): 
tags = \
Tag.objects.filter(name istartswith=request.GET [‘q’]) [:10]
return HttpResponse('\n'.join(tag.name for tag in tags)) 
return HttpResponse()

Плагин autocomplete() отправляет пользовательский ввод в GET-переменную с именем q. Таким образом, мы можем убедиться, что эта переменная существует и построить список тегов, имена которых начинаются со значения этой переменной. Это сделано с помощью метода filter() и оператора istartswith, о котором мы узнали ранее в главе. Мы выберем только первые десять результатов чтобы избежать ошеломления пользователя предложениями и снизить расходы на пропускную способность и производительность. Наконец мы соединяем предложения в одну строку, разделенные знаками новой строки, переносим строки в объект HttpResponse и возвращаем его.

Так как представление готово, добавим запись о плагине в файл, как показано ниже:

urlpattems = patterns ('
# AJAX
(r'^AJAX/tag/autocomplete/$', AJAX_tag_autocomplete),
)

Теперь Активируйте плагин на поле ввода тегов, введя следующий код в файл js/tag_autocomplete.js:

$(document).ready(function () {
$("#id_tags").autocomplete(
'/AJAX/tag/autocomplete/',
{multiple: true, multipleSeparator:	1	'}
) ;
}>;

Код передает анонимную функцию методу $(document).ready (). Эта функция вызывает функцию autocomplete() на поле ввода тегов, передает аргументы, о которых мы говорили ранее.

Эти несколько строк кода - все, что нам нужно для того, чтобы имплементировать автоматическое заполнение тегов. Чтобы проверить новую функцию, перейдите к http: //127.0.0.l: 8000/save/ и попробуйте ввести символ или два в поле тегов. Предложения должны появиться основе тегов доступных в вашей базе данных.

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

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

Контрольные вопросы

1. Для чего нужен живой поиск для поиска твитов?
2. Что такое технология AJAX?
3. Перечислите приемущества технологии AJAX
4. Что такое обработчик событий?
5. Что такое jQuery?

Упражнения

Упражнение 1.

Добавьте живой поиск по твитам

Упражнение 2.

Измените код таким образом, чтобы результаты поиска отображались на отдельной странице

Упражнение 3.

Добавьте возможность поиска твитов с учетов даты

Упражнение 4.

Добавьте возможность регистрации пользователей

Список тем курсовых работ

• Прототипирование приложения для ведения блогов
• Создание прототипа приложения для сокращения ссылок
• Создание прототипа приложения для твитов с использованием альтернативного js-фреймворка
• Технология AJAX как современная веб-технология
• Создание прототипа проекта форума
• Разработка веб-почтового клиента(прототип)
• Создание прототипа приложения для хранения заметок
• Создание прототипа социальной сети
• Доработка приложения для твитов путем добавления возможности общения по электронной почте
• Прототипирование сервиса для хранения ссылок пользователей

Краткие итоги

• Создали страницу поиска твита
• Узнали об основных возможностях AJAX
• Дополнили приложение функцией автодополнения хэштегов
• Узнали о методах JQuery
• Узнали об особенностях фреймворка JQuery
• Научились обрабатыват ьсобытия
• Узнали о способе доступа к CSS и HTML атрибутам
• Создали класс для поиска твитов
• Создали js-скрипты
• Добавили в HTML-страницы возможность выполнения js-скриптов