Makale Özeti

IE 7.0 ile alıştığımız Search Provider yapısının üzerine IE 8.0'da gelen Search Suggestions ile arama esnasından anında sonuçları gösterebilen yapıların çalışma sistemini ve programatik olarak oluşturulmasını inceliyoruz.

Makale

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}&amp;satiryuksekligi={rowHeight}&amp;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.