Bizim Blog - Internet Explorer 8.0 için Accelerator nasıl hazırlanır.

Internet Explorer 8.0 için Accelerator nasıl hazırlanır.

Internet Explorer 8.0 ile beraber yazılımcılar olarak karşılaştığımız bir diğer uygulama geliştirme alanı da "Accelerators" yapısı. Accelerator'lar ile tarayıcı içerisinde kullanıcıların farklı konumlarda sadece sağ tuşa tıklayarak hızlıca bazı içeriklere veya işlevselliklere ulaşmasını sağlayabiliyoruz. Gelin ilk olarak canlı bir örnek üzerinden bir Accelerator'ın ne olduğuna göz atalım.

Accelerator nedir?

Internet Explorer'ı bilgisayarınıza ilk yüklediğinizde varsayılan ayarları ile beraber LiveMaps'in Accelerator eklentisi de yüklenmiş olacaktır. Bu Accelerator bize herhangi bir web sitesine bir adresi seçip sağ tıkladığımızda o adresin doğrudan hızlı bir şekilde haritada görebilmemizi sağlıyor. Bu işlem için herhangi bir şekilde LiveMaps web sitesine gitmemiz gerekmiyor. Eğer ki adresi doğrudan LiveMaps'de görmek isterseniz bu sefer de herhangi bir adresi seçip sağ tuş ile gelen LiveMaps Accelerator'ını seçmeniz yeterli. Böylece hızlı bir şekilde kullanıcının LiveMaps gibi bir uygulamaya herhangi bir site adresi yazmadan kullanabilmesini sağlayabiliyoruz.

LiveMaps Accelerator uygulaması.

Kendi Accelerator'ımızı yazalım.

Yapacağımız uygulamayı öğrenirken konu mankeni olarak zargan.com sitesini kullanalım. İngilizceden Türkçeye ve Türkçeden İngilizceye çeviri yapan sitede herhangi bir kelimeyi arattığınız aşağıdaki şekilde bir adres ile karşılaşıyoruz.

http://www.zargan.com/sozluk.asp?Sozcuk=deneme

Aslında bizim farklı aramalar yaptırabilmemiz için siteye bu şekilde adresler göndermemiz yeterli olacaktır. Zargan'ın sistemini anladıktan sonra şimdi geçelim Accelerator'ların yapısını incelemeye ve eldeki siteye uygun bir Accelerator nasıl yazarız sorusunu cevaplamaya.

Her Accelerator bir XML dosyası içerisinde "OpenService Format" denilen bir standarda uygun şekilde yazılır. Accelerator'ın tüm çalışma yapısı bu XML içerisinde saklıdır. Hemen sizinle Zargan için çalışacak olan XML'i paylaşacağım.

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

<openServiceDescription

    xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">

    <homepageUrl>http://www.zargan.com/</homepageUrl>

    <display>   

        <name>Zargan ile cevir</name>

        <icon>http://www.zargan.com/favicon.ico</icon>

    </display>

    <activity category="translate">

        <activityAction context="selection" >

            <preview action="http://www.zargan.com/sozluk.asp">

                <parameter name="Sozcuk" value="{selection}" />

            </preview>

            <execute action="http://www.zargan.com/sozluk.asp">

                <parameter name="Sozcuk" value="{selection}" type="text" />

            </execute>

        </activityAction>

    </activity>

</openServiceDescription>

Yukarıdaki gibi bir XML'i accelerator.xml gibi bir dosyaya kaydedip sitenize koyduktan sonra artık tek yapmanız gereken bu XML'in bir Accelerator olarak yüklenmesini sağlayacak JavaScript kodunu yazmak.

        <button onclick="window.external.addService('accelerator.xml')">Zargan Accelerator Ekle</button>

Artık kullanıcılar yukarıdaki düğmeye tıkladıklarında doğrudan Accelerator'ı yükleyebilecek ve Internet Explorer içerisinde herhangi bir metni seçip sağ tuşa bastıklarında gelen "Zargan ile çevir" komutunu verirlerse seçtikleri kelimenin çevirisini gösteren zargan.com sayfası otomatik olarak açılacaktır.

Daha da ileri gidip eğer "Zargan ile çevir" menüsünün üzerinde biraz dururlarsa ufak bir pencere içerisinde aynı LiveMaps Accelerator'ında olduğu gibi seçilen kelimenin arandığı sayfa da gösterilecektir. Tabi şu an için Zargan'ın bahsettiğimiz çerçeveye uygun tasarımda bir sayfası olmadığı için ortaya pek hoş bir manzara çıkmıyor fakat önemli olan bizim uygulayabilmiş olmamız.

Peki nedir bu XML'dekilerin anlamı?

Şimdi gelin çalışan XML'i parçalayarak bölüm bölüm neyin ne olduğuna ve ne anlama geldiğine bir göz atalım. İlk olarak XML'in ana yapısındaki hizmet sağlayıcı ile ilgili bilgileri içeren kısma bir bakalım.

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

<openServiceDescription

    xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">

    <homepageUrl>http://www.zargan.com/</homepageUrl>

    <display>   

        <name>Zargan ile cevir</name>

        <icon>http://www.zargan.com/favicon.ico</icon>

    </display>

    <activity category="translate">

        <activityAction context="selection" >

            <preview action="http://www.zargan.com/sozluk.asp">

                <parameter name="Sozcuk" value="{selection}" />

            </preview>

            <execute action="http://www.zargan.com/sozluk.asp">

                <parameter name="Sozcuk" value="{selection}" type="text" />

            </execute>

        </activityAction>

    </activity>

</openServiceDescription>

homepageUrl içerisinde hizmeti sağlayan sitenin tam adresini girmemiz gerekiyor. Bu adres kullanıcılar Accelerator'ı sistemlerine eklerken göreceklerin adresin ta kendisi, bir anlamda hizmet sağlayıcının kimliğinin bir kanıtı olarak da kabul edebiliriz. Name tagları arasında yer alan metin doğrudan Accelerator'ın sağ tuş ile gelen menülerde gözükecek olan adı. Aynı şekilde icon tagları arasında adresi verilen ikon da sağ tuş ile gelen menülerde gösterilecektir.

Gelelim Accelerator'ımızın yapacağı işlere. Bizim Accelerator örneğimiz sayfada seçili olan metni alarak http://www.zargan.com/sozluk.asp adresine Sozcuk parametresi olarak göndermekle yükümlü. Bunun için ilk olarak Accelerator altında bir Activity tanımlıyoruz.

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

<openServiceDescription

    xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">

    <homepageUrl>http://www.zargan.com/</homepageUrl>

    <display>   

        <name>Zargan ile cevir</name>

        <icon>http://www.zargan.com/favicon.ico</icon>

    </display>

    <activity category="translate">

        <activityAction context="selection" >

            <preview action="http://www.zargan.com/sozluk.asp">

                <parameter name="Sozcuk" value="{selection}" />

            </preview>

            <execute action="http://www.zargan.com/sozluk.asp">

                <parameter name="Sozcuk" value="{selection}" type="text" />

            </execute>

        </activityAction>

    </activity>

</openServiceDescription>

Yarattığımız activity tagının category özelliğine farklı değerler verebiliyoruz. Bu değerler Internet Explorer'ın kategoriye göre Accelerator'ları sıralayabilmesini sağlıyor. Kendi istediğiniz değerleri verebileceğiniz gibi olabildiğince genel geçer olması olası değerleri vermekte fayda var. Şu an için map (harita), blog (günlük), define (ansiklopedi), add (Bookmarking) ve translate (Çeviri) gibi kategoriler genel olarak kullanılanlar arasında.

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

<openServiceDescription

    xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">

    <homepageUrl>http://www.zargan.com/</homepageUrl>

    <display>   

        <name>Zargan ile cevir</name>

        <icon>http://www.zargan.com/favicon.ico</icon>

    </display>

    <activity category="translate">

        <activityAction context="selection" >

            <preview action="http://www.zargan.com/sozluk.asp">

                <parameter name="Sozcuk" value="{selection}" />

            </preview>

            <execute action="http://www.zargan.com/sozluk.asp">

                <parameter name="Sozcuk" value="{selection}" type="text" />

            </execute>

        </activityAction>

    </activity>

</openServiceDescription>

Bir sonraki adımda bir activityAction tanımlıyoruz. activityAction'ın context değeri için farklı seçenekler mevcut. Bizim örneğimizde herhangi bir metin seçilerek sağ tuşa basıldığında işlem yapılacağı için selection değeri atanmış durumda. İsterseniz buraya link değerini de verebilirsiniz, böylece herhangi bir linke tıklandığında yapılacak işlemi belirleyebilirsiniz.

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

<openServiceDescription

    xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">

    <homepageUrl>http://www.zargan.com/</homepageUrl>

    <display>   

        <name>Zargan ile cevir</name>

        <icon>http://www.zargan.com/favicon.ico</icon>

    </display>

    <activity category="translate">

        <activityAction context="selection" >

            <preview action="http://www.zargan.com/sozluk.asp">

                <parameter name="Sozcuk" value="{selection}" />

            </preview>

            <execute action="http://www.zargan.com/sozluk.asp">

                <parameter name="Sozcuk" value="{selection}" type="text" />

            </execute>

        </activityAction>

    </activity>

</openServiceDescription>

Sıra geldi execute tagları ile artık doğrudan yapılacak işleme karar vermeye. Sağ tuş ile tıklanarak gelen menüden Accelerator'a tıklandığında çalıştırılacak olan işlem bir POST veya GET olabilir. Execute taglarına method özelliği vererek POST ve GET arasında bir seçim yapabilirsiniz. Varsayılan değeri GET olduğu için ve bizim örneğimize bu seçenek uyduğu için method özelliğini ayarlamamıza gerek kalmadı. Action kısmına ise gidilecek adresi veriyoruz. Geriye Zargan'a gönderilecek olan parametre kaldı. Parametrenin adı (Name) Sozcuk, tipi (Type) metin (text) değeri ise kullanıcının seçtiği metin ({selection}) olmalı. Böylece XML içerisinde yapıyı da sanırım aydınlatmış olduk.

Seçili metni {selection} ile alarak parametre haline getirebildiğiniz gibi daha bir çok bilgiyi de elde edebilirsiniz.

• documentDomain -Kullanıcının Acceleator'ı çalıştırdığı alan adı
• documentTitle - Accelerator'ın çalıştırıldığı sayfanın Title (başlık) bilgisi.
• documentUrl -  Accelerator'ın çalıştırıldığı sayfanın tam adresi.
•  link - Eğer bir linke tıklanarak Acceleratır çalıştırılıyorsa linkin adresi.
• linkDomain - Eğer bir linke tıklanarak Acceleratır çalıştırılıyorsa linkin alan adı.
• linkRel - Eğer bir linke tıklanarak Acceleratır çalıştırılıyorsa linkin rel özelliği.
• linkText - Eğer bir linke tıklanarak Acceleratır çalıştırılıyorsa linkin metni.
• linkType - Eğer bir linke tıklanarak Acceleratır çalıştırılıyorsa linkin tipi.

Son olarak gelelim Accelerator'ın yanında gözüken önizleme ekranının XML kodlarına.

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

<openServiceDescription

    xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">

    <homepageUrl>http://www.zargan.com/</homepageUrl>

    <display>   

        <name>Zargan ile cevir</name>

        <icon>http://www.zargan.com/favicon.ico</icon>

    </display>

    <activity category="translate">

        <activityAction context="selection" >

            <preview action="http://www.zargan.com/sozluk.asp">

                <parameter name="Sozcuk" value="{selection}" />

            </preview>

            <execute action="http://www.zargan.com/sozluk.asp">

                <parameter name="Sozcuk" value="{selection}" type="text" />

            </execute>

        </activityAction>

    </activity>

</openServiceDescription>

Ön izleme ekranı yaratmak için preview taglarını kullanmamız gerekiyor. Aynı execute taglarında olduğu gibi burada da action ve gönderilecek olan parametrenin ayarlanması gerekiyor. Normal şartlarda burada yönlendirilen sayfa (action) ile arama sonuçlarının doğrudan gösterileceği sayfanın tasarım olarak farklı olması gerekir. Buradaki sayfanın özellikle ön izleme penceresinin boyutlarına (320*240px) sığacak şekilde tasarlanması çok daha hoş bir kullanım deneyimi sağlayacaktır.

Hepinize kolay gelsin.
Daron Yöndem