"ExtJS ve Coolite ne ola ki?" Yazı Dizisi Vol.1

Yazar: Mehmet Sencer KARADAYI
Kategori: ASP.NET
Eklenme Tarihi: 12.2.2010 07:44:49



JavaScript ve Ajax web programcılığı ile uğraşan herkesin aşikar olduğu olgulardır. Bu olguları harmanlayıp bize sunan bir kütüphaneden (ExtJS), bu kütüphaneyi temel alan ve bize .NET ortamında geliştirme özgürlüğü veren(Coolite) bir framework'ten bahsediyor olacağım. Bu makale uzun soluklu bir yazı dizisinin birinci bölümüdür, bilgilerinize.

Günümüz Web programcılığı alanında vazgeçemeyeceğimiz bir istemci-taraflı yorumlanan script dilidir JavaScript. Hayatımıza 1995'de Netscape 2.0 ile birlikte giren , önceleri  Mocha daha sonra LiveScript ve en son JavaScript adını alan (Sun Microsystems'ın Java sıyla bir alakası yok.) müthiş buluş diye tanımlayabiliriz bence JavaScript'i. Web ile uğraşan herkes, en azından bir kere kullanmıştır eminim. Özellikle görsel sunum tarafında, çok fazla varyasyon elde etmemize yardımcı oluryor. Hatırlıyorum da , küçükken bir site tasarımıyla uğraşıyordum ve sitede havai fişek gösterisi olsun istemiştim. O zamanlar da hazır JavaScript kodu bulabileceğimiz çok kaynak vardı. Birkaç saniye içinde, web sitesinde havai fişek gösterisi efektini yakalayabilmiştim. Hiç unutmam içimden : "Allah JavaScript'i başımızdan eksik etmesin!" demiştim.

Sadece görsellik ile bitmiyor JavaScript'in bu kadar popüler olmasındaki etmenler. AJAX(Asynchoronous JavaScript And XML) kavramının temeli, isminin açılımından da anlaşılacağı üzere, JavaScript'tir. XMLHttpRequest objesiyle (IFRAME de kullanılabilir) yapılan bilgi transferi sonrasında, bu bilgiyi dinamik bir şekilde kullanıcıya sunmak ve bilgiyle etkileşim halinde olmak için JavaScript kullanırız.

JavaScript'in yukarıda saydığım özelliklerini ve gücünü göz önüne alan firmalar, açık kaynaklı JavaScript kütüphaneleri oluşturdular. Bu çalışmaların en çok göz önünde olanı jQuery oldu. AJAX kullanımının artmasıyla jQuery kullanımı da arttı. Hakkında birçok makale ve kitap yazıldı. İlgilenenler jQuery.com adresinde, BOOKS ABOUT JQUERY bölümünü inceleyebilirler. Uğur Umutluoğlu'nun da "ASP.NET’te jQuery ile AJAX İşlemleri" başlıklı bir makalesi var.

jQuery'nin yanı sıra, Türkiye'de hakkında pek konuşulmayan; ama üstüne birçok firmanın framework'ler geliştirdiği bir kütüphane var : ExtJS. Şans eseri varlığından haberim oldu aslında. İş görüşmesine gittiğim firmada (şuan çalıştığım firma), görüşme sırasında adı geçti. Biraz ARGE çalışmasından sonra aslında ne kadar kullanışlı bir kütüphane olduğunun farkına vardık.

Tam JS kodlarına gömülmeye hazırlandığım sırada karşıma Coolite adında, efsane, birşey çıktı. Efsane olmasının nedeni .Net'de Markup kodu yazarak Ext objeleri yaratma gücü veren bir framework olmasıydı. Hatta, yarattığımız objelere C# ya da VB kodu yazarak ulaşma yolunu sunuyordu. Aramızda kalsın, JS kodu yazmaktansa C# ya da VB kodu yazmayı tercih ederim.

Bugün yaptığım bir araştırmaya göre de, TURKCELL TEKNOLOJIlabs ExtJS kütüphanesini referans alarak, Java için açık kaynaklı  bir framework geliştirmişler. Adı da ISOLA. Coolite'ın Java versiyonu. Güzel tarafı Türkcell'in bu framework'ü open source dağıtması. Coolite'ın ücretli bir framework olduğunu düşünürsek, bu nokta ISOLA'yı daha üstün kılıyor bence.

Tüm bu gelişmeler beni bu konularda makaleler dizisi yazmaya itti ve işte burdayız.

Genel akış içinde ExtJS ve Coolite nedir, kullanım alanları nelerdir, nasıl kullanırız, Sıkça Sorulan(bilecek) Sorular başlıklarının altına dallanarak gelişicek konularımız. Şuan kafamda oluşan plana göre, yazı dizisini yine geniş bir video dizisi seyredicek.Isola hakkında da yazmak isterdim; fakat Java konusunda okadar bilgiye sahip değilim ne yazık ki.

Yukarıdaki bölüm sadece giriş paragraflarından oluşuyor. Artık derinlere inmenin zamanı geldi.

Not (1) : JavaScript ve Ajax'ı bildiğinizi varsayarak başlıyorum. Eğer onları da yazmaya kalkarsam çok ama çok uzun bir yazı dizisi olur. Bu kavramlar hakkında bilgisi olmayan arkadaşlara Daron Yöndem'in ASP.NET AJAX ve ASP.NET 3.5 AJAX adlı kitaplarını öneririm.

Bölüm 1 : ExtJS'e Giriş

Kısaca tanımlamak gerekirse ExtJS, çoklu browser destekli, güçlü kullanıcı arayüzleri programlamanıza yardımcı, Ajax işlemlerini yapmanızı çok kolaylaştıran, Open Source ve Ticari lisansları olan bir JavaScript kütüphanesi.

Lisanslamalarına da dikkat çektim; çünkü eğer ticari bir ürün yaratmak için kullanmak istiyorsanız Ext kütüphanesini, ücretini verip almanız gerekiyor.

Çoklu Browser(cross-browser) destekli dedim; peki hangi browserları destekliyor diye bakıcak olursak,

  • Internet Explorer 6 ve sonraki sürümler
  • Firefox 1.5 ve sonraki sürümler
  • Safari 3 ve sonraki sürümler
  • Opera 9 ve sonraki sürümler

Bu maddelere ek olarak Google Chrome'da da güzel bir performans sunuyor.(Bizzat kendim denedim)

Çoklu Browser desteği özelliğini test ettiğimde (Puanlar 5 üzerindendir) :

  • Internet Explorer 8 'de 4 puanlık
  • Mozilla Firefox 3.5 'da 5 puanlık
  • Google Chrome 'da 4 puanlık

randıman aldım.Diğer browserları deneme şansım olmadı.Eğer siz denerseniz sonuçları benimle de paylaşın lütfen.

Arayüz programlama konusunda ise gerçekten çok geniş bir yelpaze sunuyor bize ExtJS kütüphanesi. Benim Ext'e, tabir yerindeyse, aşık olmamı sağlayan bir örnek vereyim size : Desktop örneği.


İşte Desktop

Bu görüntüyü elde etmek için yapmanız gerekenleri, yazmanız gereken JS kodlarını, bir sonraki makalemizde inceleyeceğiz.

Tanımda bahsettiğim bir başka nokta ise AJAX işlemlerini kolaylaştırdığıydı. Aşağıdaki örneklerden de anlaşılacağı üzere, jQuery ve Ext deki AJAX işlemleri çok da farklı değil. Hangi sayfaya istekte bulunacağını, işlem tamamlandığında hangi fonksiyona gideceğini, işlem tamamlanamadığında hangi fonksiyona gideceğini, varsa parametreleri tanımlayıp işlemi bitiriyoruz.

 [ExtJS]

Ext.Ajax.request({

           url: 'sayfa.aspx',

           success: fonksiyon1,

           failure: fonksiyon2,

           params: { ID: '1' }

});

 

undefined

 [jQuery]

 

        $.ajax({

            type: 'GET',

            url: 'sayfa.aspx',

            success: fonksiyon1

            },

            error: fonksiyon2

            }

        );

undefined

 

undefined

Böylece bu uzun soluklu yazı dizimizin ilk bölümünün sonuna geldik. 2.Bölüm ' de UI tasarlarken ne yapmalıyız, ExtJS 'nin bize sunduğu UI objelerini kullanarak neler yapabiliriz konuları üzerinde duruyor olacağız.

Temelde ExtJS kullanımını konuşucağız bir süre. Bu konulara hakim olduktan JS kodları arasında boğulmadan Coolite ile .NET tarafında ne sihirbazlıklar yapabiliceğimizi göreceğiz.

Merak etmeyin arayı soğutmayacağım, bu aralar müsaitim bol bol yazarım.

Bir sonraki bölümde görüşmek üzere.

 


Mehmet Sencer KARADAYI

2008 'den beri MCPD, MCTS ünvanlarını taşıyan yazar, Orta Doğu Teknik Üniversitesi 'nde Bilgisayar Mühendisliği bölümünde eğitimine devam etmektedir.

ramazan - 29.3.2012
Gerçekten güzel bir uygulama olur bunla. Bunu asp.net ile istediğimiz şekilde kullanabilirmiyiz. Bu uygulamayı banada gönderebilirmisiniz.

Aristo Lugat - 14.2.2010
Bu teknolojiyi öğrenirsem, benim için web'de bir dönüm noktası olucak sanırım. Merakla bekliyorum ikinci makaleyi. Teşekkürler

Yorumunuz