Спонсор: Microsoft
Опубликован: 19.07.2010 | Доступ: свободный | Студентов: 1448 / 67 | Оценка: 4.07 / 3.43 | Длительность: 20:59:00
Самостоятельная работа 6:

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

< Самостоятельная работа 5 || Самостоятельная работа 6: 12 || Лекция 12 >

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

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

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

  1. Для выполнения данного задания необходимо с помощью Visual Web Developer 2008 Express (запускается от имени Администратора) создать веб-сайт, например http://localhost/OpenSearch/:

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

    Рис. 17.1. Создание нового веб-узла (веб-сайта)
  2. Для описания поставщика поиска необходимо создать в созданной папке 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> , выбрав соответствующий шаблон файла:

     Создание нового ASP.NET файла

    Рис. 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)
        {
    
        }
    }
  3. Для установки собственного поставщика поиска в браузере необходимо добавить на веб-странице кнопку или гиперссылку для установки поставщика сервиса, например, можно создать страницу 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. Автообнаружение нового поставщика поиска на веб-странице
  4. После установки вашего поставщика поиска его можно использовать 2 способами:

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

    Рис. 17.5. Выбор поставщика поиска из списка доступных
    Эскизное окно предварительного просмотра поиска

    увеличить изображение
    Рис. 17.6. Эскизное окно предварительного просмотра поиска

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

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

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

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

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

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

    Рис. 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 символов либо эквивалентов символов.

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

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

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

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

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

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

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

< Самостоятельная работа 5 || Самостоятельная работа 6: 12 || Лекция 12 >
Наталья Алмаева
Наталья Алмаева
Россия
Андрей Лучицкий
Андрей Лучицкий
Россия