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...