Dragomanos’un browser eklentilerini hazırlarken, “iGoogle widgeti de hazırlayıver” gibisinden bir istek aldık. O ne kidir dedim, hiç kullanmamıştım daha önce. Browser için açılış sayfası yapılabilecek bir sayfadan ibaret. Widgetleri ana ekranınıza sürükleyip bırakıyorsunuz, gerekli araçlar vs. diziliyor.

Mantıklı bir şeymiş. Buna sözlükte arama eklentisi yazmak için giriştim işe. Çok da basitmiş. Örnek koda buyurun bari.

Olay bildiğiniz HTML aslında. Normal bir web sayfası yapıyormuş gibi kodu yazıyorsunuz. Sonrasında, iGoogle widget için gerekli XML dosyasını hazırlıyorsunuz ki, XML içerisinde widgetin adı sanı, adresi, logosu, ekran görüntüsü, gereksindiği izinler (açıklayacağım) vb. gibi bilgiler yer alıyor.

Ben işi tamamlayabilmek adına, en basit şekilde işimi gördüm. Normalde iGoogle developer sayfalarında dikkat edilecek hususlar, şunu yapsanız daha iyi olur gibisinden bir sürü öneri bulunmakta; ben çok hızlıca göz gezdirdim. Kodum optimize edilebilir; özellikle ufacık AJAX isteği için koca jQuery libraryi çağırma kısmı.. Dediğim gibi, kolayıma böyle geldi. Ayrıyeten çağırdığımız lib de Google’ın CDN’leri üstünden geldiği için çok da etki etmeyecektir; ayrıca CDN’den gelen data Cache-Control: max-age olduğu için; ziyaretçi zaten büyük ihtimalle o libi daha önceden indirmiştir 🙂

Bir kere $ diye yazmaya alıştığınızda, bir daha document.getElementById’a geri dönmek zor geliyor. $ olayının daha lightweight çözümleri var ama, çok uzatmayayım mevzuyu, iGoogle diyorduk…

Widgetimiz sözlükte arama yapıyor, sonuçları ekrana basıyor. Sözlük engine’i ile bağlantıda JSONP kullanmayı tercih ettim. [ Sondaki P paddingin kısaltması. JSONP basitçe cross-site yapabilen JSON. Biz de Google’dan Dragomanos’u çağıracağımız için bu bir cross site referansı oluyor. JSON normalde Same Origin Policy’e tabidir; P’lisi değil diyebiliriz. ]

Kullanıcıya logo ve arama kutusu çıkartıyoruz, yazılan şey aranıyor ve kutumuzun içine dökülüyor. iGoogle widget sisteminin izin verdiği, dynamic height özelliğini de kullanıyoruz; sonuçlar kutudan daha uzunsa; kutumuz da uzuyor. Takdir ettim Google’ı.

Çalışırken şöyle gözüküyor el-widget:

Peki nasıl yaptık bunu? Kod gelsin.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Dragomanos Sözlük" 
               author="Hazar Karabay" 
			   author_email="Hazar'ın iş emaili"
			   title_url = "http://www.dragomanos.com" 
			   screenshot = "http://www.dragomanos.com/images/ss.jpg"
			   thumbnail = "http://www.dragomanos.com/images/icons/ig_th.gif"
			   description="Dragomanos İngilizce Türkçe Terim Sözlüğü. Kategorik listeleme yaparak hata yapmanızı önler. Kendimi hatalı hissediyorum diyenlere tavsiye edilir." >
  <Require feature="dynamic-height" />
  <Icon>http://www.dragomanos.com/favicon.ico</Icon>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
<!-- iGoogle için Widget örneği / Hazar Karabay / hazarkarabay.com / 2010 -->
<style type="text/css">
#osform {
	text-align:center;
	display:block
}
#oshead {
	background:#c3d9ff;
	font-weight:bold;
	padding: 2px;
}
#daha {
	text-align:right;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
    $('#osla').submit(function() {
 	 $("#oscont").html('<strong>Bulunuyor...</strong><div style="width:220px; margin:0 auto"><img src="http://www.dragomanos.com/images/ajax-loader.gif" width="220" height="19" /></div>');						   
	 var aranacak = $('#aranacak').val();
	 var link = "<div id='daha'><a href='http://www.dragomanos.com/bul/"+ aranacak + "?utm_source=igoogle&amp;utm_medium=devami&amp;utm_campaign=ig' target='_blank'> devamı ve daha fazlası için &raquo; </a></div>";
     $.getJSON("http://www.dragomanos.com/cokgizlibirpath/?s=" + aranacak + "&callback=?", 
       function(data){
		 var html = "";
		 html += "<div id=\"oshead\">" + aranacak + " teriminin Dragomanos.com'daki karşılıkları:</div>";
          $.each(data.data, function(i,item){
			html += "<div>- <strong>" + item.dil1Terim + "</strong>: " + item.dil2Terim + "</div>";
           });
      if (data.data.length > 0){
		html += link;
	  } else {
	  	html += "Bu aramanızla ilgili sonuç bulunamamıştır. <a href='http://www.dragomanos.com/?utm_source=igoogle&amp;utm_medium=devami&amp;utm_campaign=ig' target='_blank'>Aramanızı Dragomanos.com'da yapmak için tıklayınız.</a>";
	  }
	  $("#oscont").html(html);
	  gadgets.window.adjustHeight();
     });
	});
   }); 
  </script>
<div style="position:relative; font-family: Arial, Helvetica, sans-serif; font-size:12px; width: 95%; margin:0 auto">
  <div id="osform">
    <p style="padding-top:0; margin-top:0"><img src="http://www.dragomanos.com/images/logo_ig.gif" width="140" height="50" /></p>
    <form action="javascript:void(0)" name="osla" id="osla">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="74%" align="right"><input type="text" id="aranacak" style="width:100%; border:1px solid #999" /></td>
		  <td width="1%">&nbsp;</td>
          <td width="25%" align="center"><input type="submit" class="button" value="Dragomanos'ta Bul!" style="font-family:Arial, Helvetica, sans-serif; font-size:13px" /></td>
        </tr>
      </table>
    </form>
  </div>
  <div style="clear:both; height:1px; overflow:hidden">&nbsp;</div>
  <div id="oscont">&nbsp;</div>
</div>


  ]]>
  </Content>
</Module>

iGoogle Widget XML yapısını rahatlıkla görebilirsiniz. En yukarılarda Widgetin iGoogle directory’de aramalarda çıkabilmesi için gerekli datalar mevcut. Ondan sonra bir content tagı ve içinde CDATA ile beraber bildiğiniz HTML var. HTML biraz kirli, inline olarak bir sürü stil tanımlamak zorunda kaldım cross browser desteği için. Her zamanki gibi herşey Opera’da düzgün gözükürken IE, Firefox ve Chrome’da ayrı telden çalıyordu. Sonra, durumun Google’ın aşırı cachelaması yüzünden olduğunu keşfettim, fakat bayağı uğraştım düzelteceğim diye.

Kolay gele.