sencha

Geliştirme Bizden Sorulur

Koca bir eylül ayını yazısız geçirmenin verdiği üzüntüyle beraber, 'artık yazmalıyım' dürtüsüne boyun eğiyorum. İşler yoğun, yazılım geliştirici olarak işsiz kalmıyoruz, çok şükür. Bazen tabii geliştir geliştir nereye kadar dediğimiz de olmuyor değil. İnsanın aklı da bir yere kadar götürüyor, arada sırada yeter be naraları atmak istiyoruz. Tabii ki bu böyle gitmez. Ama gidinceye kadar yolu var.

Spring ve ExtJS, işyerinde kurumsal olarak kullandığımız iki önemli framework. Bizden önce birileri bunları seçmiş ve iyi de yapmış. ExtJS artık adı da biraz daha Sencha olarak bilinen Javascript çatısı. Az önce gördüğüm Spring sunumunda Sencha'nın marifetleri anlatılıyordu. Spring konferansında Javascript kütüpanesinin ne işi var? Sunumda buna da cevap vermişler. Bu noktada önemli bir slayt dikkatimi çekti:

Yani diyor ki;
- Genelde yönetim kademesinde şu tipte bir anlayış var: Programı yapan sen değil misin? Ekranın görselliğini de sen yapacaksın elbette.

O halde aynı mantıkla veritabanını da ben işleyeyim, uygulama sunucusunu da ben yöneteyim, network işlerini de ben yapayım. O da yetmediyse bilgisayarları da ben kurayım. Bazı yerlerde işler biraz böyle yürüyor. ( https://en.wiktionary.org/wiki/wear_too_many_hats ) Böyle olunca her işi aynı adam yapıyor, "iş bölümü" kavramı olması gereken yerden çok uzaklara gidiyor.

Halbuki yapılan yazılım işlerinde "önyüz tasarımcısı" diye bir kavram gelişti. Yazılımların büyük bir bölümü internet ortamında olduğundan yani browser üzerinde çalıştığından, önyüz işleri de aslında arkada işleyen sunucu yazılımından ayrı olan HTML-CSS-Javascript üçlüsüne dönüyor. Bazıları kapsamı genişleterek "UI/UX design" (Kullanıcı Arayüz Tasarımı / Kullanıcı Deneyimi Tasarımı) kavramlarından bahsediyorlar. Bu adamlar "kişi sitemize girdiğinde nereye bakarlar, nereye tıklarlar, nereye tıkladıklarında en anlamlı olarak neyi ararlar ve neyi bulmalılar" sorularına cevap veren kişiler aslında.

Dünya UX designer'lara yelken açadursun, biz asıl görevi yazılım geliştirmek olanlar, ExtJS ile fazla HTML-CSS öğrenmeye gerek kalmadan ekranlarımızı tasarlayalım, formlarımızı yapalım, uygulamalarımızı kullanıcılarımızla buluşturalım.

Peki bu iyi bir şey mi? Bence değil. Ama belki de iyidir. Ne bileyim...

Tüm sunuma ulaşmak için adres: http://www.slideshare.net/senchainc/spring-sencha

ExtJS Paging (Sayfalama)

Paging (Sayfalama) Nedir?

Bir grid'e çok fazla kayıt geldiğinde hem bağlantı hem browser açısından performans düşüklüğü oluşabilir. Sunucu tarafında da performansı arttırmak gereksinimi ortaya çıkabilir. Bu yüzden browser üzerinde sayfalama yaparak alınan veri sayısı kısıtlanır. Örneğin 1000 kayıt gelmesi yerine her sayfada 100 kayıt gelecek şekilde bir yapı oluşturulur ve bu şekilde 10 sayfa gerektikçe ajax istekleriyle doldurulur. Buna ExtJS'de paging yani sayfalama denir.

Yapılacaklar

Bunun için ihtiyacımız olan şeyler;

  1. Grid'e ait store'un autoloadfalse olmalı, daha sonra biz load fonksiyonuyla dolduracağız.
  2. Ext.PagingToolbar nesnesi oluşturulur.
  3. Oluşturulan paging nesnesi Grid'in bbar özelliğine eklenir.
  4. load fonksiyonlarımıza start ve limit değerleri verilir.
  5. store'a totalProperty vermemiz gerekiyor
  6. baseParams özelliğini vermemiz gerekiyor ki her ajax sorgusunda bu bilgiler ayrıca verilmeye gerek kalmadan gitsin
  7. Sunucudan gelecek cevabı ayarlayalım.

Parmaklar Çalışsın

  1. Store'umuzu oluşturalım. Örnek olarak bir JsonStore kullandım. Değerlerin geleceği adres de myAjaxUrl.ajax olsun. JSON biçiminde gelecek sunucu cevabı (response) içinde bir kayıtları barındıran bir liste (json array) olacak. Bu listenin adı 'list' olsun. myRecord adında da bir fieldlerimizi saklayan bir Record olsun. Store otomatik ajax isteği yapıp dolmasın diye autoload: false değerini verelim.
  2. var myRecord = new Ext.data.Record.create([
    	{name:'tip',type:'int'},
    	{name:'sehir',type:'string'},
    	{name:'adres',type:'string'}
    ]);
    
    var myStore = new Ext.data.JsonStore({ 
    	url: 				"myAjaxUrl.ajax",
    	root: 				'list',
    	fields: 			myRecord,
    	autoload: 			false
    });
  3. PagingToolbar nesnesini oluşturalım.
  4. var myPaging = new Ext.PagingToolbar({
    	pageSize:	100,
    	width:		600,
    	store:		myStore,
    	displayInfo: 	true,        
    	displayMsg: 	'Toplam Kayıt: {2}, (Gösterilen:{0}-{1})',
    	emptyMsg: 	"Görüntülenecek kayıt yok."
    });
  5. PagingToolbar'ı grid'e eklemek için grid'in bbar özelliğine atıyoruz.
  6. bbar:	myPaging
  7. start değeri başlangıç kayıt numarası, limit değeri ise her sayfada gelecek kayıt sayısıdır
  8. myStore.load({params:{start:0, limit:100}});

  9. Store'a totalProperty değerini verelim. totalCount yerine farklı bir değer de verilebilir, önemli olan sunucudan gönderdiğimiz anahtar kelime
  10. totalProperty: 'totalCount'

  11. Store'a baseParams değerini atayalım.
  12. myStore.baseParams = {
    	sehir: 'Ankara',
    	tip: 1
    };
  13. Bundan sonra sunucudan gelecek değer yazdıklarımızla uyumlu olmalı. Sunucuda kullandığınız teknolojiye göre bunu kendimiz programlayacağız. Ext tarafında önemli olan gelecek cevabın uygun olması. Öncelikle json formatlı bir dizi (array) bekliyoruz. myStore'da root olarak verdiğimiz değer bu dizinin 'key'i olacak. Yani bir obje olacak, içinde de bir dizi olacak, örneğimizde bu key 'list'. Buna göre beklediğimiz değer şunun gibi:
  14. {list:[obje1,obje2,obje3,...]}

    Bunun yanında totalProperty değeri de root değerinin yanında bir obje olarak gelmeli. Örneğimizde 'totalCount' olarak verdiğimize göre şöyle olmalı;

    {list:[obje1,obje2,obje3,...],totalCount:500}

    Yani 'list' adlı dizideki objeler sayfada görünecek, diğerleri Ext tarafına aktarılmayacak. Toplamda da (örneğimize göre) 500 adet listelenecek obje var, buna göre sadece params olarak gönderdiğimiz parametrelerden 'limit' değeri kadar (örneğimize göre 100 adet) sayfada görünecek. hangi sayfada olduğumuz bilgisini ise Ext, sunucu tarafından aldığı bilgiye göre gösterecek.

Demo şu an mevcut değil. İş yoğunluğundan vakit bulabilirsem demoyu da hazırlamayı düşünüyorum.

Yazılımcının Yılbaşı Kutlaması Böyle Olur

Konu:

Önceden ExtJS olarak tanıyıp bildiğimiz Javascript Framework'ü Sencha'dan bir yılbaşı kutlama mesajı geldi. Tam yazılımcılara has.

Subscribe to RSS - sencha