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.
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.
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.
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.
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}?}&
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!
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.