Internet Explorer 8.0 için Search Provider ve Search Suggestions sistemlerini hazırlamak.

0 dakikada yazıldı

8652 defa okundu

Düzenle

Internet Explorer 7.0 ile beraber alıştığımız "Search Providers"
yapısına IE 8.0 içerisinde bazı eklemeler yapıldı. Bu eklemelerin içinde
en dikkati çeken özellik "Search Suggestions" özelliği. Aslında biz
yazılımcıların uzun süredir AJAX ile hazırladığımız ve AutoComplete
adını verdiğimiz sistemin ta kendisi.

IE 8.0 içerisinde Search Suggestions örneği.
IE 8.0 içerisinde Search Suggestions örneği.

Artık IE içerisinde arama için siz bir şeyler yazdıkça o an seçtiğiniz
"Search Provider" eğer "Search Suggestion" destekliyorsa otomatik olarak
sonuçlar anında yukarıdaki gibi karşınıza gelecektir.

Search Provider nasıl hazırlanır?

Search Provider'lar aslında birer XML dosyası şeklinde hazırlanır. Bu
XML dosyası içerisinde arama motoru ile ilgili tarayıcının ihtiyaç
duyduğu bilgiler yer alır. Düşündüğümüzde bunlar tabi ki arama motorunun
adı, adresi ve tarayıcıda gösterilecek olan ikonundan farklı bilgiler
değiller.

<?xml
version="1.0" encoding="UTF-8"?>

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">

    <ShortName>AramaMotoruAdı</ShortName>

    <Url
type="text/html"
template="http://localhost:49438/WebSite2/?aranacak={searchTerms}"/>

    <Image
height="16" width="16" type="image/icon">http://localhost:49438/WebSite2/aramaikonu.ico</Image>

</OpenSearchDescription>

Yukarıda görmüş olduğunuz XML formatı
OpenSearch
standartlarına uygun şekilde hazırlanmalıdır. ShortName tagları
arasında arama motorunun adı, URL taglarının template özelliğine
arama motorunun adresi yazılır. Adresi yazarken dikkat etmeniz gereken
nokta aranacak terimler yerine denk gelen noktaya {searchTerms}
yazmanız. Tarayıcı içerisinde kullanıcının arattığı herhangi bir şey
doğrudan bu adresteki {searchTerms} yazının yerine konarak verilen adres
çalıştırılacaktır. Son olarak isterseniz arama motorunuzun ikon
dosyasını da bir Image tagı içerisine adresini yazarak
iletebilirsiniz.

Yukarıdaki şekilde Search Provider dosyanızı hazırladıktan sonra artık
geriye kalan tek şey kullanıcıların bu dosyayı bir Search Provider
olarak bilgisayarlarına eklemelerini sağlayacak JavaScript kodunu
yazmak.

<a

  href="#"

  onclick="window.external.AddSearchProvider('http://localhost:49438/WebSite2/arama.xml')">

  Search Provider Ekle

</a>

window.external.AddSearchProvider metoduna doğrudan XML dosyasının
konumunu verirseniz yukarıdaki gibi bir linke tıklandığında Search
Provider ekleme ekranının gelmesini sağlayabilirsiniz. Artık
kullanıcılar sizin Search Provider'ınızı kullanabilirler.

Peki ya Search Suggestions?

Search Suggestions sistemi tabi ki Search Provider'ların üzerine eklenen
bir sistem. O nedenle yukarıdaki gibi elinizde hazır bir Search
Provider'ın zaten bulunması gerekiyor. Sonrasında eklemeler ile Search
Provider'ınızı Search Suggestions destekli hale getirebiliyorsunuz.

<?xml version="1.0"
encoding=
"UTF-8"?>

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">

  <ShortName>AramaMotoruAdı</ShortName>

  <Url type="text/html"

      template="http://localhost:49438/WebSite2/?aranacak={searchTerms}"/>

  <Url
type="application/x-suggestions+json"

      template="http://localhost:49438/WebSite2/json.ashx?aranacak={searchTerms}"/>

  <Url
type="application/x-suggestions+xml"

      template="http://localhost:49438/WebSite2/xml.ashx?aranacak={searchTerms}"/>

  <Image height="16"

        width="16"

        type="image/icon">http://localhost:49438/WebSite2/aramaikonu.ico</Image>

</OpenSearchDescription>

Bir önceki örneğimizdeki arama.xml dosyasına iki URL daha ekliyoruz. Bu
sefer eklediğimiz URL'lerin type özellikleri text/html değil de
application/x-suggestions+json veya
application/x-suggestions+xml olabiliyor. Her iki özelliği beraber
kullanmanın herhangi bir anlamı yok. Amacımız Search Suggestion
esnasından gösterilecek AutoComplete bilgisinin alınacağı adresi
belirlemek. Bu adreslerden ya XML ya da JSON formatında veri aktarımı
yapılabiliyor. Yine bu adresler içerisinde de aranan kelime doğrudan
{searchTerms} kısmına yerleştiriliyor. XML veya JSON döndüreceği için en
mantıklısı bu adreslerde ASHX (Generic Handler) kullanmak.

<SearchSuggestion>

  <Query>asp.net</Query>

  <Section>

    <Item>

      <Text>Sonuç 1</Text>

      <Description>Açıklama</Description>

      <Url>http://sonucadresi.com</Url>

    </Item>

  </Section>

</SearchSuggestion>

Yukarıdaki örnekte ASHX dosyamıza aranan parametresi olarak
asp.net metnini gönderdiğimizde ortaya çıkan sonucu görebiliriz.
Query tagları arasına doğrudan aranan parametresi tekrar yazdırarak
tarayıcıya iletmemiz gerekiyor. Böylece tarayıcı gerçekten aranan şeyin
sonucunun gelip gelmediğini kontrol edebiliyor. Sonrasında bir
Section açarak içerisine tek tek item tagları içerisinde her
arama sonucunun Text (metin), Description (Açıklama) ve Url
(Adres) bilgisini veriyoruz. Bizim örneğimizde şimdilik sadece tek sonuç
var. Tarayıcı en fazla 10 adet sonuç gösterebiliyor.

İlk Search Suggestion denememizin sonucu.
İlk Search Suggestion denememizin sonucu.

Yukarıdaki ekran görüntüsünde de inceleyebileceğiniz üzere XML'den
gönderdiğimiz tek sonuç bilgisi otomatik olarak tarayıcı tarafından
gösterilmiş durumda. Eğer kullanıcı gelen sonuçlardan herhangi birine
tıklarsa o sonuca ait Url tagları ile gelen adrese yönlendirilir.
Şimdi sıra geldi bu sonuçlara biraz da görsellik eklemeye.

Son bir defa tekrar yukarıdaki ekran görüntüsüne bir göz atalım.
Dikkatinizi çektiyse en üstte "AramaMotoduAdı Suggestions" yazıyor. Bu
başlık otomatik olarak arama motorunun adı alınarak sonuna "Suggestions"
eklenerek oluşturuluyor. İşin güzel tarafı biz istersek alt başlıklar
oluşturabiliyoruz.

<SearchSuggestion>

  <Query>asp</Query>

  <Section>

    <Separator
****
title="Bölüm
1
" />

    <Item>

      <Text>Sonuç 1</Text>

      <Description>Açıklamaa</Description>

      <Url>http://sonucadresi.com</Url>

    </Item>

    <Separator
****
title="Bölüm
2
" />

    <Item>

      <Text>Sonuç 2</Text>

      <Description>Açıklamaa</Description>

      <Url>http://sonucadresi.com</Url>

    </Item>

  </Section>

</SearchSuggestion>

Yukarıdaki XML içerisinde Separator tagları dikkatinizi çekecektir.
Bu taglar title özelliklerindeki yazılarla beraber Search Suggestion
içerisinde farklı bölümlemelerin oluşmasını sağlayacaktır.

İki bölümlü Search Suggestion.
İki bölümlü Search Suggestion.

Son olarak gelelim bu sonuçların yanına ufak birer de görsel
yerleştirmeye. Böylece çok daha hoş bir görüntü oluşacaktır. Aslında tek
yapmamız gereken her bir sonucu tanımlayan item elementinin
içerisine bir de image elementi yerleştirerek sonuçla ilgili resmin
adresini vermek.

<SearchSuggestion>

  <Query>asp</Query>

  <Section>

    <Separator title="Bölüm 1"
/>

    <Item>

      <Text>Sonuç 1</Text>

      <Image
source="http://localhost:49438/WebSite2/dock.jpg"

            alt="Bir resim"

            width="75"

            height="50" />

      <Description>Açıklamaa</Description>

      <Url>http://sonucadresi.com</Url>

    </Item>

    <Separator title="Bölüm 2"
/>

    <Item>

      <Text>Sonuç 2</Text>

      <Description>Açıklamaa</Description>

      <Url>http://sonucadresi.com</Url>

    </Item>

  </Section>

</SearchSuggestion>

Daha önceki arama sonucunu tanımlayan XML dosyamızdaki ilk item
tagının içerisine bir de Image tagı yerleştiriyoruz. Bu Image
tagının aslında HTML'den bildiğimiz Image tagından neredeyse hiçbir
farklı yok. Source özelliğine gösterilecek olan fotoğrafın adresini,
alt özelliğine ToolTip metnini, width ve height
özelliklerine de resmin gösterilecek olan boyutunu belirtmemiz yeterli
olacaktır.

Search Suggestion içerisinde fotoğraf gösterimi.
Search Suggestion içerisinde fotoğraf gösterimi.

Bizim örneğimizde resmin boyutları XML içerisinde tanımlı şekilde. Bu
boyutları sabit tutabileceğiniz gibi isterseniz dinamik olarak da
ayarlayabilirsiniz. Bunun için Search Provider'ın XML tanımındaki URL
bilgisinde ufak bir değişiklik yapmak gerekiyor.

  <Url
type="application/x-suggestions+xml"

      template="http://localhost:49438/WebSite2/xml.ashx?aranacak={searchTerms}?}&amp;\

maxgenislik={maxWidth}&satiryuksekligi={rowHeight}&bolumyuksekligi={sectionHeight}"/>

ASHX dosyasına ek olarak gönderebileceğiniz {maxWidth}, {rowHeight}
ve {sectionHeight} bilgileri tarayıcı tarafından otomatik olarak
doldurulacaktır. {maxWidth} Search Suggestion barının genişliğini,
{rowHeight} her bir sonucun gösterildiği satırının yüksekliğini,
{sectionHeight} ise varsa bir bölümün toplam yüksekliğini
verecektir. Bu bilgileri kullanıcının çözünürlüğüne göre değişeceği için
sizde ASHX dosyanıza gelen parametrelere uygun şekilde XML yaratırken
Image taglarının boyutlarını belirleyebilirsiniz.

Gelin işin bir de sunucu tarafına göz atalım ve son örneğimizdeki XML
kodunu oluşturacak ASHX'ın arkasına bakalım.

[VB]

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

        context.Response.ContentType = "text/xml"

 

        Dim XMLFeed As New
XDocument(New XDeclaration("1.0", "utf-8", "yes"))

        XMLFeed.Add(New XElement("SearchSuggestion", _

                      New
XElement("Query",
context.Request.QueryString("aranacak")), _

                        New
XElement("Section", _

                          New
XElement("Separator", _

                            New
XAttribute("title", "Bölüm 1")), _

                          New
XElement("Item", _

                            New
XElement("Text", "Sonuç 1"), _

                            New
XElement("Image", _

                              New
XAttribute("source", "http://localhost:49438/WebSite2/dock.jpg"),
_

                              New
XAttribute("alt", "Bir resim"), _

                              New
XAttribute("width", "75"), _

                              New
XAttribute("height", "50")), _

                            New
XElement("Description", "Açıklamaa"), _

                            New
XElement("Url", "http://sonucadresi.com")), _

                          New
XElement("Separator", _

                            New
XAttribute("title", "Bölüm 2")), _

                          New
XElement("Item", _

                            New
XElement("Text", "Sonuç 2"), _

                            New
XElement("Description", "Açıklamaa"), _

                            New
XElement("Url", "http://sonucadresi.com")))))

        context.Response.Write(XMLFeed)

    End Sub

[C#]

    public void ProcessRequest (HttpContext context) {

        context.Response.ContentType = "text/xml";

 

        XDocument XMLFeed = new
XDocument(new XDeclaration("1.0", "utf-8", "yes"));

        XMLFeed.Add(new XElement("SearchSuggestion",

            new XElement("Query",
context.Request.QueryString["aranacak"].ToString()),

            new XElement("Section",

                new XElement("Separator",

                    new
XAttribute("title", "Bölüm 1")),

                    new XElement("Item",

                        new
XElement("Text", "Sonuç 1"),

                        new
XElement("Image",

                            new
XAttribute("source", "http://localhost:49438/WebSite2/dock.jpg"),

                            new
XAttribute("alt", "Bir resim"),

                            new
XAttribute("width", "75"),

                            new
XAttribute("height", "50")),

                        new
XElement("Description", "Açıklamaa"),

                        new
XElement("Url", "http://sonucadresi.com")),

                new XElement("Separator",

                    new
XAttribute("title", "Bölüm 2")),

                    new XElement("Item",

                        new
XElement("Text", "Sonuç 2"),

                        new
XElement("Description", "Açıklamaa"),

                        new
XElement("Url", "http://sonucadresi.com")))));

 

        context.Response.Write(XMLFeed.ToString());

    }

Tabi tüm yukarıdaki kodun bir veritabanına bağlanması ve uygun şekilde
For döngüleri ve LINQ sorguları ile birden çok item
elementlerinin yaratılması gerekiyor.

İşin JSON tarafına baktığımızda maalesef programatik olarak kullanımı
çok daha bir sistem söz konusu. Ayrıca JSON tarafında Separator ve Image
nesneleri şu an için desteklenmiyor. O nedenle JSON kullanımı pek uygun
değil.

Her Search Provider aynı anda bir Accelerator!

Internet Explorer 8.0 ile beraber gelen bir diğer yenilik de eski adıyla
"Activities" olan "Accelerator"lar. Accelerator'ların detayına
girmeyeceğiz, bunun için ayrı bir makale çok daha uygun olur fakat her
Search Provider'ın aslında otomatik olarak da bir Accelerator olduğunu
söyleyebiliriz. IE içerisinde herhangi bir web sayfasını açtıktan sonra
bir metin seçip fare ile sağ tıkladığınızda Accelerator menüsünden
Search Provider'ları görebilirsiniz.

Her Search Provider aynı anda bir Accelerator!
Her Search Provider aynı anda bir Accelerator!

Bu otomatik Accelerator yapısının oluşması için ek bir işlem yapmak
gerekmiyor. İsterse kullanıcı rahatlıkla "Manage Accelerators"
bölümünden arama motorunu ilk sağ tık ile gelen menüye de alabiliyor.

Search Provider'ı bulunabilir hale getirmek?

JavaScript kodu ile Search Provider ekleme işlemini görmüştük. Bunun
haricinden tarayıcıların sayfanıza girildiği gibi uygun Search
provider'ı otomatik olarak bulabilmesi için de aşağıdaki kodu sayfanın
head bölümüne yerleştirebilirsiniz.

<link
title="AramaMotoruAdı"

      rel="search"

      type="application/opensearchdescription+xml"

      href="AramaMotoruAdı">

Burada önemli olan nokta Search Provider'ı tanımlayan XML dosyası
içerisinde ShortName ile bu tag içerisindeki title'ın kesinlikle
aynı olması gerektiği. Aksi halde birleştirme işlemi yapılamayacaktır.
link tagı içerisinde href özelliği doğrudan Search Provider'ın
XML dosyasını göstermelidir.

Hepinize kolay gelsin.