Теория и практика разработки современных клиентских веб-приложений

Спецификация OpenSearch и визуализация поиска в браузере

Разбить на страницы
Показывать лекцию целиком

Теоретический материал

В Internet Explorer 8 для поддержки поиск реализованы следующие функции:

  • Подсказки поиска и поставщики поиска. Пользователи могут выполнить нужный поисковый запрос намного быстрее. Для описания подсказок поиска поддерживаются формат JSON и расширенный формат OpenSearch XML.
  • Визуальные подсказки поиска. Интегрированный поиск рисунков и другого наглядного содержимого.
  • Улучшенный пользовательский интерфейс. С помощью раскрывающегося списка быстрого выбора и контекстного меню ускорителей можно легко выбирать установленные поставщики поиска и переключаться между ними. Кроме того, с помощью поиска в журнале, можно автоматически находить недавно просмотренные веб-страницы, не закрывая окна поиска.
    •

    Таким образом, пользователи могут выполнять поиск непосредственно из Internet Explorer, не переходя на сайты поисковых систем. Поставщик поиска по умолчанию также используется для выполнения поиска из адресной строки. Чтобы добавить поставщика поиска в IE 8, нужно позволить пользователям подключить ваш веб-сайт в качестве поставщика поиска в поле поиска. Для этого:

  • создается файл описания OpenSearch для поставщика поиска;
  • файл описания размещается на веб-сайте, чтобы пользователи смогли установить себе поставщика поиска.
    •

    Создание файла описания OpenSearch

    Файлы описания OpenSearch - это небольшие XML -файлы, описывающие поставщика поиска для IE 8. В следующей таблице перечислены значения в файле описания OpenSearch 1.1.

    Значение Описание
    Краткое имя (обязательно) Наименование поставщика поиска, отображаемое в поле быстрого поиска, если выбран этот поставщик
    URL (обязательно) URL поставщика поиска для базовых поисковых запросов. Требуется указать абсолютный URL
    Рисунок (необязательно) Указатель на файл значка для поставщика поиска на веб-сайте. Этот значок отображается в поле быстрого поиска рядом с именем поставщика поиска. Значок должен быть допустимым ярлыком файла значка, иначе будет использован стандартный значок
    URL файла подсказок поиска в формате JSON (необязательно) URL -адрес, по которому предоставляются подсказки поиска в формате JSON.
    URL файла подсказок поиска в формате XML (необязательно) URL -адрес, по которому предоставляются подсказки поиска в формате XML.
    URL страницы предварительного просмотра (необязательно) URL -адрес для отображения результатов в окне предварительного просмотра ускорителя

    Добавление подсказок поиска в файлы описания OpenSearch

    В IE 8 поддерживается отображение подсказок (вариантов) поиска. С помощью подсказок поиска можно быстро предлагать пользователям более эффективные поисковые запросы. Чтобы предоставить пользователям подсказки поиска в формате JSON или XML, следует добавить в файл описания следующие элементы.

    >
<Url type="application/x-suggestions+json" 
template="http://suggestions.example.com/search.aspx?q={searchTerms}"/>

    или

    <Url type="application/x-suggestions+xml" 
template="http://suggestions.example.com/search.aspx?q={searchTerms}"/>

    При добавлении дополнительных элементов URL следует убедиться, что тип text/html перечислен первым. Это необходимо для обратной совместимости. Прочие типы могут следовать в произвольном порядке. По умолчанию в Internet Explorer используется URL -адрес типа text/html в качестве универсального URL -адреса поиска, если варианты поиска недоступны или не поддерживаются в более ранних версиях. Однако если существуют URL -адреса для вариантов поиска и в формате XML, и в формате JSON, в Internet

    Поддержка предварительного просмотра результатов поиска

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

    <ie:PreviewUrl type="text/html" template="http://suggestions.example.com/search.aspx?q={searchTerms}/>

    Если добавить этот элемент в файл описания и наведет указатель мыши на наименование поставщика поиска, то откроется эскизное окно просмотра (размером 320 x 240 пикселей) с результатами поиска.

    Элемент ie:PreviewUrl использует пространство имен, предоставленное объявлением пространств имен Internet Explorer. При использовании этой функции нужно убедиться, что объявление определено в теге OpenSearchDescription: xmlns:ie="http://schemas.microsoft.com/Search/2008/".

    Продвижение поставщиков поиска

    После создания файла описания OpenSearch службу поиска можно предложить пользователям. Существует два способа продвижения поставщиков поиска:

  • предоставить пользователям ссылку или кнопку, указывающую на файл описания. Пользователям придется выполнить ряд действий для установки данного поставщика.
  • помочь пользователям обнаружить поставщика. Для этого требуется всего одна строка кода в верхней части веб-страницы. В этом случае браузер Internet Explorer 8 сможет обнаружить данного поставщика поиска при просмотре сайта.
    •

    Следующий код добавляет поставщика поиска в список, когда пользователь щелкает ссылку.

    <a href="#"    onclick="window.external.AddSearchProvider
('http://www.example.com/provider.xml')">
Add Search Provider Example</a>

    Данный код вызывает метод AddSearchProvider. Метод AddSearchProvider доступен из внешнего объекта окна. При выполнении этого кода с HTML -страницы в IE8 открывается диалоговое окно "Добавление поставщика поиска".

    Поддержка обнаружения поставщиков поиска

    Второй способ продвижения поставщика поиска - помочь его обнаружить. Спецификация OpenSearch описывает уведомление о наличии поставщиков поиска путем добавления элемента link в раздел head веб-страницы. Следующий код позволит браузеру Internet Explorer 8 обнаружить поставщика поиска:

    <link title="My Provider" rel="search"    
type="application/opensearchdescription+xml" href="http://www.example.com/provider.xml">

    Атрибут rel должен иметь значение search, а атрибут type - application/opensearchdescription+xml. Значение атрибута title отображается в раскрывающемся меню поля быстрого поиска. Атрибут href содержит абсолютный или относительный URL -адрес, указывающий расположение файла описания OpenSearch.

    Порядок выполнения работы.

    Для выполнения данной лабораторной работы необходимо иметь установленный веб-сервер IIS 7.

    Задание 1. Создание визуального поиска на собственном ресурсе.

  • Для выполнения данного задания необходимо с помощью :

    (рис 17.1) Создание нового веб-узла (веб-сайта)

  • Для описания поставщика поиска необходимо создать в созданной папке OpenSearch (с помощью комбинации клавиш <CTRL+N> или через меню File > New File) XML -файл provider.xml следующего содержания:

    <?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
 xmlns:ie="http://schemas.microsoft.com/Search/2008/">
  <ShortName>Мой собственный поиск</ShortName>
  <Image height="16" width="16"  type="image/icon">
  http://localhost/OpenSearch/mysearch.ico</Image>
 <Url type="text/html" template="
 http://localhost/OpenSearch/results.aspx?q={searchTerms}
  <Url type="application/x-suggestions+xml" template="
  http://localhost/OpenSearch/suggestions.xml?q={searchTerms}"/>
  <ie:PreviewUrl type="text/html" template="
  http://localhost/OpenSearch/previews.aspx?q={searchTerms}"/>
</OpenSearchDescription>

    Как видно из кода в той же папке OpenSearch потребуется создать еще несколько файлов:

  • mysearch.ico - иконка вашего поставщика поиска (для того, чтобы отличить его от других поставщиков поискового сервиса)
  • suggestions.xml - файл, содержащий подсказки (отображаются при введении запроса или его части в поле поиска браузера)
  • results.aspx - ASP.NET код, возвращающий результаты поиска для введннного запроса
  • previews.aspx - ASP.NET код, возвращающий содержимое эскизного окна, предварительного просмотра результатов поиска (фактически эскизное окно ускорителя поиска)
    •

    Все эти файлы (за исключением иконки) можно добавить в проект через <CTRL+N> , выбрав соответствующий шаблон файла:

    (рис 17.2) Создание нового ASP.NET файла

    Для создания *.aspx файлов используйте шаблон Web Form.

    Ниже приведено содержимое трех последних в списке файлов.

    results.aspx:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="results.aspx.cs" 
Inherits="_Default" %>

<!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">
<head runat="server">
    <title>my site search results</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>Обрабатывается запрос:</h1>
    <%=Request.ServerVariables["QUERY_STRING"] %>
    </div>
    </form>
</body>
</html>

    results.aspx.cs:

    using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

    suggestions.xml:

    <?xml version="1.0"?>
<SearchSuggestion xmlns="http://schemas.microsoft.com/Search/2008/suggestions">
  <Query>xbox</Query>
  <Section>
    <Item>
      <Text>Xbox 360</Text>
      <Description>The official Xbox website from Microsoft</Description>
      <Url>http://www.xbox.com</Url>
    </Item>
    <Item>
      <Text>Xbox cheats</Text>
      <Description>Codes and walkthroughs</Description>
      <Url>http://www.example.com/xboxcheatcodes.aspx</Url>
    </Item>
    <Item>
      <Text>Xbox 360 games</Text>
      <Description>Games and accessories</Description>
      <Url>http://www.example.com/games</Url>
    </Item>
  </Section>
</SearchSuggestion>

    previews.aspx:

    <%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="previews.aspx.cs" Inherits="_Default" %>
<!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">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>Обрабатывается запрос:</h1>
    <%=Request.ServerVariables["QUERY_STRING"] %>
    </div>
    </form>
</body>
</html>

    previews.aspx.cs:

    using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

  • Для установки собственного поставщика поиска в браузере необходимо добавить на веб-странице кнопку или гиперссылку для установки поставщика сервиса, например, можно создать страницу Promote.html:

    <!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">
<head></head>
<body>
<a href="#"   onclick="window.external.AddSearchProvider
('http://localhost/OpenSearch/provider.xml')";
   >Пример поискового сервиса</a>
</body>
</html>

    При активации гиперссылки в браузере появится окно для добавления поставщика поиска:

    (рис 17.3) Окно добавления нового поставщика поиска

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

    <!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">
<head>
<link title="Мой поисковый сервис" rel="search"
   type="application/opensearchdescription+xml"
   href="http://localhost/OpenSearch/provider.xml"/>    
</head>
<body>
<h1>Обнаружение вашего поставщика поиска </h1>
</body>
</html>

    При загрузке данного документа справа от поля ввода поискового запроса стрелка станет оранжевой. Нажав на нее можно добавить вашего поставщика поиска (в т.ч. сделать его используемым по умолчанию).

    (рис 17.4) Автообнаружение нового поставщика поиска на веб-странице

  • После установки вашего поставщика поиска его можно использовать 2 способами:

  • Выбрать из списка поставщиков в верхнем правом углу браузера этого поставщика, а затем ввести запрос в строку поиска
  • Выделить фрагмент текста на странице и в контекстном меню выбрать ускоритель, связанный с вашим поставщиком поиска.
    • (рис 17.6) Выбор поставщика поиска из списка доступных (рис 17.5) Эскизное окно предварительного просмотра поиска

    Обратите внимание, что во втором случае загружается эскизное окно предварительного просмотра результатов поиска.

  • Создание подсказок поиска.

    Файл описания поставщика поиска provider.xml содержит ссылку

    <Url type="application/x-suggestions+xml" 
template="http://localhost/OpenSearch/suggestions.xml?q={searchTerms}"/>

    на файл suggestions.xml, содержащий описание подсказок поиска в формате XML.

    (рис 17.7) Отображение статических подсказок поиска (на основе XML/JSON).

    Помимо формата XML имеется также возможность описания подсказок в формате JSON. Для этого в файле описания поставщика поиска необходимо заменить ссылку на файл подсказок на следующую:

    <Url type="application/x-suggestions+json" 
template="http://localhost/OpenSearch/suggestions2.xml?q={searchTerms}"/>

    Файл suggestions2.xml должен содержать описание подсказок поиска в формате JSON, например:

    ["xbox",
["Xbox 360", "Xbox cheats", "Xbox 360 games"],
["The official Xbox website from Microsoft", "Codes and walkthroughs", "Games and accessories"],
["http://www.xbox.com","http://www.example.com/xboxcheatcodes.aspx", "http://www.example.com/games"]
]

    После переустановки поставщика поиска в браузере, он будет использовать подсказки теперь из данного файла.

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

    В этом случае, необходимо заменить ссылку на файл подсказок поиска:

    <Url type="application/x-suggestions+json" template="
http://localhost/OpenSearch/suggestions.aspx?q={searchTerms}"/>

    Сам файл suggestions.aspx должен содержать код, который динамически формирует текст подсказок по заданному запросу из поля ввода, например:

    <%@ Page ContentType="text/xml" Language="C#" %> 
<%@ OutputCache Location="None" %><?xml version="1.0"?>
<SearchSuggestion xmlns="http://schemas.microsoft.com/Search/2008/suggestions">
  <Query><%=HttpUtility.HtmlEncode(Request["q"])%></Query>
  <Section>
    <Item>
      <Text>Вы ввели: <%=HttpUtility.HtmlEncode(Request["q"])%></Text>
    </Item>
    <Separator/>
    <Item>
      <Text>Искать <%=HttpUtility.HtmlEncode(Request["q"])%> в Bing:</Text>
      <Description>Bing Search</Description>
      <Url>http://www.bing.com/search?q=<%=Request["q"]%></Url>
    </Item>    
    <Item>
      <Text>Искать <%=HttpUtility.HtmlEncode(Request["q"])%> в Яндексе:</Text>
      <Description>Yandex Search</Description>
      <Url>http://yandex.ru/yandsearch?text=<%=Request["q"]%></Url>
    </Item>
    <Item>
      <Text>Искать <%=HttpUtility.HtmlEncode(Request["q"])%> в Google:</Text>
      <Description>Google Search</Description>
      <Url>http://www.google.ru/search?q=<%=Request["q"]%></Url>
    </Item>
  </Section>
</SearchSuggestion>

    Как видно из кода, для формирования содержимого элементов <Query>, <Text> и <Url> использован элемент глобального массива Request и метод HtmlEncode класса HttpUtility, который преобразует символьную строку в последовательность допустимых в HTML символов либо эквивалентов символов.

    (рис 17.8) Отображение динамических подсказок поиска (на основе ASP.NET)

    • Контрольное задание.

    Подсказки для поставщика поиска в IE8 могут содержать не только текст и гиперссылки, но также и картинки.

    Для этих целей элемент <Item> , описывающий один вариант подсказки, может содержать вложенный элемент < Image> следующего формата:

    <Image source="URL файла с картинкой" alt="альтернативный текст картинки" 
width="ширина в пикселах" height="высота в пикселах" align="выравнивание" />

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

    Страницы:

    Теоретический материал

    В Internet Explorer 8 для поддержки поиск реализованы следующие функции:

  • Подсказки поиска и поставщики поиска. Пользователи могут выполнить нужный поисковый запрос намного быстрее. Для описания подсказок поиска поддерживаются формат JSON и расширенный формат OpenSearch XML.
  • Визуальные подсказки поиска. Интегрированный поиск рисунков и другого наглядного содержимого.
  • Улучшенный пользовательский интерфейс. С помощью раскрывающегося списка быстрого выбора и контекстного меню ускорителей можно легко выбирать установленные поставщики поиска и переключаться между ними. Кроме того, с помощью поиска в журнале, можно автоматически находить недавно просмотренные веб-страницы, не закрывая окна поиска.
    •

    Таким образом, пользователи могут выполнять поиск непосредственно из Internet Explorer, не переходя на сайты поисковых систем. Поставщик поиска по умолчанию также используется для выполнения поиска из адресной строки. Чтобы добавить поставщика поиска в IE 8, нужно позволить пользователям подключить ваш веб-сайт в качестве поставщика поиска в поле поиска. Для этого:

  • создается файл описания OpenSearch для поставщика поиска;
  • файл описания размещается на веб-сайте, чтобы пользователи смогли установить себе поставщика поиска.
    •

    Создание файла описания OpenSearch

    Файлы описания OpenSearch - это небольшие XML -файлы, описывающие поставщика поиска для IE 8. В следующей таблице перечислены значения в файле описания OpenSearch 1.1.

    Значение Описание
    Краткое имя (обязательно) Наименование поставщика поиска, отображаемое в поле быстрого поиска, если выбран этот поставщик
    URL (обязательно) URL поставщика поиска для базовых поисковых запросов. Требуется указать абсолютный URL
    Рисунок (необязательно) Указатель на файл значка для поставщика поиска на веб-сайте. Этот значок отображается в поле быстрого поиска рядом с именем поставщика поиска. Значок должен быть допустимым ярлыком файла значка, иначе будет использован стандартный значок
    URL файла подсказок поиска в формате JSON (необязательно) URL -адрес, по которому предоставляются подсказки поиска в формате JSON.
    URL файла подсказок поиска в формате XML (необязательно) URL -адрес, по которому предоставляются подсказки поиска в формате XML.
    URL страницы предварительного просмотра (необязательно) URL -адрес для отображения результатов в окне предварительного просмотра ускорителя

    Добавление подсказок поиска в файлы описания OpenSearch

    В IE 8 поддерживается отображение подсказок (вариантов) поиска. С помощью подсказок поиска можно быстро предлагать пользователям более эффективные поисковые запросы. Чтобы предоставить пользователям подсказки поиска в формате JSON или XML, следует добавить в файл описания следующие элементы.

    >
<Url type="application/x-suggestions+json" 
template="http://suggestions.example.com/search.aspx?q={searchTerms}"/>

    или

    <Url type="application/x-suggestions+xml" 
template="http://suggestions.example.com/search.aspx?q={searchTerms}"/>

    При добавлении дополнительных элементов URL следует убедиться, что тип text/html перечислен первым. Это необходимо для обратной совместимости. Прочие типы могут следовать в произвольном порядке. По умолчанию в Internet Explorer используется URL -адрес типа text/html в качестве универсального URL -адреса поиска, если варианты поиска недоступны или не поддерживаются в более ранних версиях. Однако если существуют URL -адреса для вариантов поиска и в формате XML, и в формате JSON, в Internet

    Поддержка предварительного просмотра результатов поиска

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

    <ie:PreviewUrl type="text/html" template="http://suggestions.example.com/search.aspx?q={searchTerms}/>

    Если добавить этот элемент в файл описания и наведет указатель мыши на наименование поставщика поиска, то откроется эскизное окно просмотра (размером 320 x 240 пикселей) с результатами поиска.

    Элемент ie:PreviewUrl использует пространство имен, предоставленное объявлением пространств имен Internet Explorer. При использовании этой функции нужно убедиться, что объявление определено в теге OpenSearchDescription: xmlns:ie="http://schemas.microsoft.com/Search/2008/".

    Продвижение поставщиков поиска

    После создания файла описания OpenSearch службу поиска можно предложить пользователям. Существует два способа продвижения поставщиков поиска:

  • предоставить пользователям ссылку или кнопку, указывающую на файл описания. Пользователям придется выполнить ряд действий для установки данного поставщика.
  • помочь пользователям обнаружить поставщика. Для этого требуется всего одна строка кода в верхней части веб-страницы. В этом случае браузер Internet Explorer 8 сможет обнаружить данного поставщика поиска при просмотре сайта.
    •

    Следующий код добавляет поставщика поиска в список, когда пользователь щелкает ссылку.

    <a href="#"    onclick="window.external.AddSearchProvider
('http://www.example.com/provider.xml')">
Add Search Provider Example</a>

    Данный код вызывает метод AddSearchProvider. Метод AddSearchProvider доступен из внешнего объекта окна. При выполнении этого кода с HTML -страницы в IE8 открывается диалоговое окно "Добавление поставщика поиска".

    Поддержка обнаружения поставщиков поиска

    Второй способ продвижения поставщика поиска - помочь его обнаружить. Спецификация OpenSearch описывает уведомление о наличии поставщиков поиска путем добавления элемента link в раздел head веб-страницы. Следующий код позволит браузеру Internet Explorer 8 обнаружить поставщика поиска:

    <link title="My Provider" rel="search"    
type="application/opensearchdescription+xml" href="http://www.example.com/provider.xml">

    Атрибут rel должен иметь значение search, а атрибут type - application/opensearchdescription+xml. Значение атрибута title отображается в раскрывающемся меню поля быстрого поиска. Атрибут href содержит абсолютный или относительный URL -адрес, указывающий расположение файла описания OpenSearch.

    Порядок выполнения работы.

    Для выполнения данной лабораторной работы необходимо иметь установленный веб-сервер IIS 7.

    Задание 1. Создание визуального поиска на собственном ресурсе.

  • Для выполнения данного задания необходимо с помощью :

    (рис 17.1) Создание нового веб-узла (веб-сайта)

  • Для описания поставщика поиска необходимо создать в созданной папке OpenSearch (с помощью комбинации клавиш <CTRL+N> или через меню File > New File) XML -файл provider.xml следующего содержания:

    <?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
 xmlns:ie="http://schemas.microsoft.com/Search/2008/">
  <ShortName>Мой собственный поиск</ShortName>
  <Image height="16" width="16"  type="image/icon">
  http://localhost/OpenSearch/mysearch.ico</Image>
 <Url type="text/html" template="
 http://localhost/OpenSearch/results.aspx?q={searchTerms}
  <Url type="application/x-suggestions+xml" template="
  http://localhost/OpenSearch/suggestions.xml?q={searchTerms}"/>
  <ie:PreviewUrl type="text/html" template="
  http://localhost/OpenSearch/previews.aspx?q={searchTerms}"/>
</OpenSearchDescription>

    Как видно из кода в той же папке OpenSearch потребуется создать еще несколько файлов:

  • mysearch.ico - иконка вашего поставщика поиска (для того, чтобы отличить его от других поставщиков поискового сервиса)
  • suggestions.xml - файл, содержащий подсказки (отображаются при введении запроса или его части в поле поиска браузера)
  • results.aspx - ASP.NET код, возвращающий результаты поиска для введннного запроса
  • previews.aspx - ASP.NET код, возвращающий содержимое эскизного окна, предварительного просмотра результатов поиска (фактически эскизное окно ускорителя поиска)
    •

    Все эти файлы (за исключением иконки) можно добавить в проект через <CTRL+N> , выбрав соответствующий шаблон файла:

    (рис 17.2) Создание нового ASP.NET файла

    Для создания *.aspx файлов используйте шаблон Web Form.

    Ниже приведено содержимое трех последних в списке файлов.

    results.aspx:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="results.aspx.cs" 
Inherits="_Default" %>

<!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">
<head runat="server">
    <title>my site search results</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>Обрабатывается запрос:</h1>
    <%=Request.ServerVariables["QUERY_STRING"] %>
    </div>
    </form>
</body>
</html>

    results.aspx.cs:

    using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

    suggestions.xml:

    <?xml version="1.0"?>
<SearchSuggestion xmlns="http://schemas.microsoft.com/Search/2008/suggestions">
  <Query>xbox</Query>
  <Section>
    <Item>
      <Text>Xbox 360</Text>
      <Description>The official Xbox website from Microsoft</Description>
      <Url>http://www.xbox.com</Url>
    </Item>
    <Item>
      <Text>Xbox cheats</Text>
      <Description>Codes and walkthroughs</Description>
      <Url>http://www.example.com/xboxcheatcodes.aspx</Url>
    </Item>
    <Item>
      <Text>Xbox 360 games</Text>
      <Description>Games and accessories</Description>
      <Url>http://www.example.com/games</Url>
    </Item>
  </Section>
</SearchSuggestion>

    previews.aspx:

    <%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="previews.aspx.cs" Inherits="_Default" %>
<!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">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>Обрабатывается запрос:</h1>
    <%=Request.ServerVariables["QUERY_STRING"] %>
    </div>
    </form>
</body>
</html>

    previews.aspx.cs:

    using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

  • Для установки собственного поставщика поиска в браузере необходимо добавить на веб-странице кнопку или гиперссылку для установки поставщика сервиса, например, можно создать страницу Promote.html:

    <!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">
<head></head>
<body>
<a href="#"   onclick="window.external.AddSearchProvider
('http://localhost/OpenSearch/provider.xml')";
   >Пример поискового сервиса</a>
</body>
</html>

    При активации гиперссылки в браузере появится окно для добавления поставщика поиска:

    (рис 17.3) Окно добавления нового поставщика поиска

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

    <!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">
<head>
<link title="Мой поисковый сервис" rel="search"
   type="application/opensearchdescription+xml"
   href="http://localhost/OpenSearch/provider.xml"/>    
</head>
<body>
<h1>Обнаружение вашего поставщика поиска </h1>
</body>
</html>

    При загрузке данного документа справа от поля ввода поискового запроса стрелка станет оранжевой. Нажав на нее можно добавить вашего поставщика поиска (в т.ч. сделать его используемым по умолчанию).

    (рис 17.4) Автообнаружение нового поставщика поиска на веб-странице

  • После установки вашего поставщика поиска его можно использовать 2 способами:

  • Выбрать из списка поставщиков в верхнем правом углу браузера этого поставщика, а затем ввести запрос в строку поиска
  • Выделить фрагмент текста на странице и в контекстном меню выбрать ускоритель, связанный с вашим поставщиком поиска.
    • (рис 17.6) Выбор поставщика поиска из списка доступных (рис 17.5) Эскизное окно предварительного просмотра поиска

    Обратите внимание, что во втором случае загружается эскизное окно предварительного просмотра результатов поиска.

  • Создание подсказок поиска.

    Файл описания поставщика поиска provider.xml содержит ссылку

    <Url type="application/x-suggestions+xml" 
template="http://localhost/OpenSearch/suggestions.xml?q={searchTerms}"/>

    на файл suggestions.xml, содержащий описание подсказок поиска в формате XML.

    (рис 17.7) Отображение статических подсказок поиска (на основе XML/JSON).

    Помимо формата XML имеется также возможность описания подсказок в формате JSON. Для этого в файле описания поставщика поиска необходимо заменить ссылку на файл подсказок на следующую:

    <Url type="application/x-suggestions+json" 
template="http://localhost/OpenSearch/suggestions2.xml?q={searchTerms}"/>

    Файл suggestions2.xml должен содержать описание подсказок поиска в формате JSON, например:

    ["xbox",
["Xbox 360", "Xbox cheats", "Xbox 360 games"],
["The official Xbox website from Microsoft", "Codes and walkthroughs", "Games and accessories"],
["http://www.xbox.com","http://www.example.com/xboxcheatcodes.aspx", "http://www.example.com/games"]
]

    После переустановки поставщика поиска в браузере, он будет использовать подсказки теперь из данного файла.

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

    В этом случае, необходимо заменить ссылку на файл подсказок поиска:

    <Url type="application/x-suggestions+json" template="
http://localhost/OpenSearch/suggestions.aspx?q={searchTerms}"/>

    Сам файл suggestions.aspx должен содержать код, который динамически формирует текст подсказок по заданному запросу из поля ввода, например:

    <%@ Page ContentType="text/xml" Language="C#" %> 
<%@ OutputCache Location="None" %><?xml version="1.0"?>
<SearchSuggestion xmlns="http://schemas.microsoft.com/Search/2008/suggestions">
  <Query><%=HttpUtility.HtmlEncode(Request["q"])%></Query>
  <Section>
    <Item>
      <Text>Вы ввели: <%=HttpUtility.HtmlEncode(Request["q"])%></Text>
    </Item>
    <Separator/>
    <Item>
      <Text>Искать <%=HttpUtility.HtmlEncode(Request["q"])%> в Bing:</Text>
      <Description>Bing Search</Description>
      <Url>http://www.bing.com/search?q=<%=Request["q"]%></Url>
    </Item>    
    <Item>
      <Text>Искать <%=HttpUtility.HtmlEncode(Request["q"])%> в Яндексе:</Text>
      <Description>Yandex Search</Description>
      <Url>http://yandex.ru/yandsearch?text=<%=Request["q"]%></Url>
    </Item>
    <Item>
      <Text>Искать <%=HttpUtility.HtmlEncode(Request["q"])%> в Google:</Text>
      <Description>Google Search</Description>
      <Url>http://www.google.ru/search?q=<%=Request["q"]%></Url>
    </Item>
  </Section>
</SearchSuggestion>

    Как видно из кода, для формирования содержимого элементов <Query>, <Text> и <Url> использован элемент глобального массива Request и метод HtmlEncode класса HttpUtility, который преобразует символьную строку в последовательность допустимых в HTML символов либо эквивалентов символов.

    (рис 17.8) Отображение динамических подсказок поиска (на основе ASP.NET)

    • Контрольное задание.

    Подсказки для поставщика поиска в IE8 могут содержать не только текст и гиперссылки, но также и картинки.

    Для этих целей элемент <Item> , описывающий один вариант подсказки, может содержать вложенный элемент < Image> следующего формата:

    <Image source="URL файла с картинкой" alt="альтернативный текст картинки" 
width="ширина в пикселах" height="высота в пикселах" align="выравнивание" />

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

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^