[AS3] - Sayfalama Sistemi - 2
Yağız Gürgül Tarih: 24/08/2008 Yorum: 1 adet
Okunma : 1257 Tutanlar: Bu yazıyı 5 kişi tuttu.
Geldik dersimizin ikinci bölümüne :) Bu bölümde ufak bir sayfalama sistemi yapacağız. Ürünlerimiz bir dizide olacak ve biz bu ürünleri sayfalayacağız.
Şimdi öncelikle ilk dersimizdeki tüm kodları ben bir sınıf altında topladım:
package {
///////// Gazing /////////
/////////////////////////////
public class Paging {
public var currentPage:int;
public var itemPerPage:int;
public var totalPage:int;
public var totalItem:int;
//
private var p0:int;
private var p1:int;
private var i:int;
//
public var pageChange:Function;
public var loopFnc:Function;
public var firstPage:Function;
public var lastPage:Function;
public var noFirstLast:Function;
//
public function Paging(_totalItem:int,_itemPerPage:int) {
totalItem=_totalItem;
totalPage=Math.ceil(_totalItem/_itemPerPage);
itemPerPage=_itemPerPage;
}
//
public function gotoPage(id:int) {
if(id>=0 && id<=totalPage) {
if(pageChange!=null) pageChange();
p0=id*itemPerPage;
p1=p0+itemPerPage;
//
currentPage=id;
for(i=p0; i<p1; i++) {
if(i<totalItem) {
if(loopFnc!=null) loopFnc(i);
}
}
//
if(currentPage==0) {
if(firstPage!=null) firstPage();
}
if(currentPage==totalPage-1) {
if(lastPage!=null) lastPage();
}
if(currentPage!=0 && currentPage!=totalPage-1) {
if(noFirstLast!=null) noFirstLast();
}
}
}
}
}
-
Bu kodları Paging.as şeklinde kaydedin ve bu dosyanın bulunduğu yere bir Flash dosyası açın.
Ekrana bir List bir de NumericStepper componentlerini ekliyelim. Bunların instance nameleri:
List - icerik
NumericStepper - numeric
Olarak belirtelim. numeric componentinin parametre bölümüne gelerek min değerini 1 olarak ayarlıyalım ve kodlarımıza geçelim:
var urunler:Array = new Array();
urunler.push("Başlık - 1");
urunler.push("Başlık - 2");
urunler.push("Başlık - 3");
urunler.push("Başlık - 4");
urunler.push("Başlık - 5");
urunler.push("Başlık - 6");
urunler.push("Başlık - 7");
urunler.push("Başlık - 8");
urunler.push("Başlık - 9");
urunler.push("Başlık - 10");
Evet ilk kod bloğumuz bu. Bir dizi yaratarak içine ürünlerimizi ekledik:
var sayfa:Paging = new Paging(urunler.length, 3);
Şimdi bu satırda sayfa adındaki değişkenimizi Paging sınıfına eşitledik. Bu sınıfın sizin de gördüğünüz gibi iki parametresi var. İlk parametre toplam ürün sayısı. İkinci parametre ise bir sayfada gösterilecek ürün sayısı.
Şimdi şu kodları yazalım:
sayfa.loopFnc = dongu;
sayfa.pageChange = sayfaDegisti;
sayfa adındaki Paging sınıfımızın içindeki iki tane fonksiyonu kendi fonksiyonlarımıza eşitledik. loopFnc sayfa değişitken sonra her zaman kullandığımız for döngülerini belirtiyor. pageChange ise sayfa değiştiğinde çalışıyor.
Hemen altına şu kodları yazalım:
function dongu(id:int) {
icerik.addItem({label:urunler[id]});
}
function sayfaDegisti() {
icerik.removeAll();
}
İşte bu iki fonksiyonu biz sınıf içine ekledik. Sayfa değiştiğinde sayfaDegisti çalışacak, döngü olarak da bizim dongu fonksiyonumuzu çalıştıracak.
Döngü fonksiyonunu oluştururken dikkat etmeniz gereken bir konu var. Bu fonksiyon mutlaka int türünde bir parametre almalı. Sonuçta döngünüzde kullanacağınız id bu fonksiyonun parametresidir.
Sayfa değişme kodunda ise iceriği temizliyoruz. Mantık şöyle:
Sayfa Değişti > Eski Bilgileri Sil > Yeni Bilgiler Ekle
Sayfa Değişti > Eski Bilgileri Sil > Yeni Bilgiler Ekle
Sayfa Değişti > Eski Bilgileri Sil > Yeni Bilgiler Ekle
....
Sayfa Değişti > Eski Bilgileri Sil > Yeni Bilgiler Ekle
Şimdi ise kodlarımızın altına şu satırı yazalım:
sayfa.gotoPage(numeric.value-1);
Bu noktada test edebilirsiniz. İlk sayfanın ürünleri list componentine eklenmiş durumda. Parametre olarak numeric componentinin içindeki değeri baz aldık. -1 dememizin nedeni sayfalama sistemimizin ilk sayfasının id numarası 1'den değil 0'dan başlamasıdır.
Kodlarımızın altına şu numeric kodumuzu da ekliyelim:
numeric.addEventListener(Event.CHANGE,sayfaDegis);
function sayfaDegis(e:Event) {
sayfa.gotoPage(numeric.value-1);
}
Burası biraz AS3 bilgisi gerektiriyor. Önce numeric componentine değişme eventi ekliyoruz. Böylece içindeki değer değiştinde belirttiğimiz fonksiyonu çağıracak.
sayfaDegis fonksiyonunun içindeki kod ise, sınıfımızın sayfasını değiştirmemize yarıyor. Parametre olarakta numeric componentinin değerini baz alıyoruz.
Çalışmayı test edin ve sayfayı değiştirin :)
Çok güzel gözüküyor ama bir kaç eksiklikler. Öncelikle toplam 4 sayfamız var ve biz de numeric componentinin max değerinin 4 olmasını istiyoruz. Bunun için sınıfımıza başvurucaz.
Kodlarımıza şu satırı ekleyin:
numeric.maximum=sayfa.totalPage;
Gördüğünüz gibi sınıf içindeki totalPage değişkeni ile toplam sayfa sayısına ulaşabiliriz.
Ayrıca sınıf içinde bir kaç event türü fonksiyon tanımı var. Özellikle ileri geri butonlarının enabled özelliklerini kontrol etmede birebirler :)
firstPage
lastPage
noFirstLast
Test etmek isterseniz sayfa.gotoPage(numeric.value-1); satırının hemen üstüne şu kodları yazın:
sayfa.firstPage= ilkSayfa;
sayfa.noFirstLast = ortadaBirYerde;
sayfa.lastPage = sonSayfa;
function ilkSayfa() {
trace("ilk sayfa");
}
function ortadaBirYerde() {
trace("Ne sondayız ne baştayız");
}
function sonSayfa() {
trace("ve son");
}
Çalışan örneğin, sınıfın bulunduğu zip dosyasını buradan indirebilirsiniz.
Evet arkadaşlar Sayfalama konusunda ikinci dersim de bitti :) Bundan sonraki dersimde ürünleri XML'den alacağız ve bunu komponent kullanmadan yapacağız. :)
Kolay gelsin...
Haber
Etkinlikler
Toplantı
Özgür Yazılım ve Linux Günleri '10
Özgür Yazılım ve Linux Günleri '10
İstanbul Bilgi Üniversitesi Bilgisayar Bilimleri Bölümü ve Linux Kullanıcıları Derneği'nin 9 yıldır düzenlemekte oldukları etkinlikler bu yıl `Özgür Y...
Kategori:
Toplantı
Kimler Burada? 
Son 1 dakika içinde MMIstanbul' da 59 (50 kayıtlı, 9 ziyaretçi) kullanıcı varmış. Login durumda olanlar aşağıda:
MMIstanbul Blog'undan
Blog Bölümü Blogevi.com'a Taşınıyor
Selam arkadaşlar MMIstanbul'da , tasarımcı ve programcıların blog yazılarını "feedleyerek" MMIstanbul okurlarını MMIstanbul dışın ...
7.500'üncü üyemiz Cem Koç!
Neler Yapılabilir?
500 Hatası Hakkında!
Reklam, MMIstanbul ve Yeni Projeler (Durumumuz Bu Tarzında)










yine çok yararlı bir ders. sayfalama konusundaki sıkıntılarım böyle daha da hafifliyor. fakat beklemek yerine xml konusu bir halletmeye çalışayım :) diğer dersinizi de sabırsızlıkla bekliyorum...
Saat 20:26 Dediğim gibi boş durmadım. Xml ile bağlantısını sağlayabildim :)