Ext JS 4 – The Data Package (Veri Paketi) – Bölüm 1

Bu yazımda sizlere ext js 4 ile yenilenen ve daha da güçlenen, özellikle ORM’ ye aşina iseniz daha da seveceğiniz veri paketinden (data package) bahsetmek istiyorum.

Ext JS 4 veri paketleri tüm uygulamanızdaki verileri tutmak ve kaydetmek üzere hazırlanmıştır ve yaklaşık 41 sınıftan oluşmaktadır. Bu sınıflardan en önemli 3 tanesi Model, Store ve Proxy sınıflarıdır. Hemen hemen tüm uygulamalarda kullanılmaktadır ve çok sayıda sınıf tarafından desteklenmektedir.

Model’ler ve Store’lar

Modeller uygulamalarımızda bazı tip verileri temsil etmek için tasarlanmıştır. ORM’de genellikle Entity olarak adlandırılsa da en bilinen ismi Model’dir. Modeller örneğin bir elektronik ticaret uygulamasında ürünler, siparişler gibi kavramları temsil edebilirler. En temel haliyle modeller alanları (field), diğer modeller ile olan ilişkileri (association – relation), vekil bağlantıları (Proxy), doğrulama ve denetlemeleri (validations) içermektedir. Şimdi bir modelin ana bölümlerini aşağıdaki grafikten inceleyelim.

Şimdi yeni bir model oluşturalım:

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' }
    ]
});

Modeller genellikle, model referansını (instance) bir veri koleksiyonu olarak  Store’ larla birlikte kullanılır.

En basit haliyle store oluşturma ve verileri yüklemek için aşağıdaki satırları inceliyoruz:

Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
        type: 'ajax',
        url : 'users.json',
        reader: 'json'
    },
    autoLoad: true
});

Store’umuzun proxy ayarlarına, Ajax Prox ile verilen url’deki dönen değerleri yorumlaması için Json Reader‘ ı kullanıyoruz. Json Reader sunucudan donen JSON verilerini otomatik olarak decode ederek kullanmamızı sağlar. autoload:true seçeneği ise store’dan bir instance (referans) alındığı anda proxy parametrelerinde bulunan url parametresindeki ‘users.json‘ veri kaynagına otomatik olarak istek yapılmasını sağlar.

users.json kaynağından dönecek JSON verileri aşağıdaki gibi olmalıdır;

{
    success: true,
    users: [
        { id: 1, name: 'Ed' },
        { id: 2, name: 'Tommy' }
    ]
}

Yukarıdaki örneğin çalışan demosu için Simple Store adresine bakabilirsiniz.

Ön tanımlı verileri kullanmak (Inline Data)

Store’lar istenirse verileri ön tanımlı olarak da kullanabilirler. Store konfigurasyonunda bulunan data parametresi kullanılan Model‘e ve Reader‘a göre uygun verilerle doldurulursa,  instance (referans) alındığında bu veriler de yüklenmiş olur. Aşağıdaki örneği inceleyin:

Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { firstName: 'Ed',    lastName: 'Spencer' },
        { firstName: 'Tommy', lastName: 'Maintz' },
        { firstName: 'Aaron', lastName: 'Conran' },
        { firstName: 'Jamie', lastName: 'Avins' }
    ]
});

Yukarıdaki örneğin çalışan demosu için Inline Data Örneği adresine bakabilirsiniz.

Sıralama ve Gruplama

Store’lar lokal (statik) veri kaynaklarını sıralama, gruplama ve filtreleme gibi işlevlerinin yanı sıra uzak sunucudaki (remote) veri kaynaklarını da kullanarak bu işlemleri yerine getirebilirler.

Ext.create('Ext.data.Store', {
    model: 'User',

    sorters: ['name', 'id'],
    filters: {
        property: 'name',
        value   : 'Ed'
    },
    groupField: 'age',
    groupDir: 'DESC'
});

Burada sıralama alanları olarak ‘name‘ ve ‘id‘ alanları belirlenmiştir. Bu sayede veriler id veya name’e göre artan (ASC) veya azalan (DESC) şekild sıralanabilmektedir. Aynı zamanda veri kaynağında bulunan veriler ‘name‘ alanı ‘Ed‘ olanlar gelecek şekilde filtrelenmiş ve ’age‘ alanına göre gruplandırılmıştır.

Proxy’ ler

Proxy’ler modeller ve store’lar tarafından kullanılmaktadır. İki çeşit proxy bulunmaktadır. Birisi istemci taraflı diğeri ise sunucu taraflı. İstemci taraflı proxy’ler verileri tarayıcının “HTML 5 local storage (yerel depolama)” özelliğini kullanarak bellekte (memory) veya yerel depolama alanında tutarlar. Sunucu taraflı proxy’ler ise uzak sunucundan verileri Ajax, JsonP veya Rest servisleri kullanarak dinler ve alırlar.

Proxy’ler model’lere şu şekilde doğrudan tanımlanabilirler.

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'age', 'gender'],
    proxy: {
        type: 'rest',
        url : 'data/users',
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});

// User modelini ve ona bağl users rest proxy kullanılır
Ext.create('Ext.data.Store', {
    model: 'User'
});

Eğer proxy’leri yukarıdaki şekilde model’lere tanımlarsanız her User kaynağının her kullanımı için aynı proxy servisleri kullanılacağından User model’ in başka store’larda yada sınıflarda kullanılmasıyla kod tekrarından kaçınılmış olur.

// User değişkenine User modelinden bir referans alıyoruz
var User = Ext.ModelMgr.getModel('User');

// ed adından bir User oluşturuyoruz.
var ed = Ext.create('User', {
    name: 'Ed Spencer',
    age : 25
});

// Ed'i kaydetmeye çalıştığımız anda, ed store'a
// eklenir ve ve daha önceden konfigure ettiğimiz
// RestProxy' devreye girerek otomatik olarak sunucunun
// '/users' adresine RESTful bir POST istek yapar
ed.save({
    success: function(ed) {
        console.log("Saved Ed! His ID is "+ ed.getId());
    }
});

// Eğer kullanıcıyı yüklemek istersek
// ve 1 numaralı id parametresini geçersek sunucuya
// RESTful bir GET isteği '/users/1' adresine yapılır
User.load(1, {
    success: function(user) {
        console.log("Loaded user 1:" + user.get('name'));
    }
});

LocalStorage ve SessionStorage - HTML 5′in yeni yeteneklerinden yararlanmak için Proxy’ ler’e dahil edilmiştir. Ancak eski tarayıcılarda bu yeni HTML 5 API’ lerin desteği olmamasına rağmen, kalan diğer tüm özelliklerden bir çok uygulama yararlanabilecektir. Bu gibi durumlarda tarayıcı özelliklerini kontrol ederek alternatif senaryolar üretebilirsiniz.

Yukarıdaki örneğin çalışan demosu için  doğrudan proxy kullanan model örneği‘ni inceleyiniz.

Kaynak:
http://www.sencha.com/learn/the-data-package/

Bu makalenin devamı olan Bölüm – 2:
http://www.tayfunoziserikan.com/blog/ext-js-4-the-data-package-veri-paketi-bolum-2

Evet Ext JS 4 veri paketi konusunun birinci bölümününü burada tamamlıyorum.
Serinin ikinci yazısında görüşmek üzere.

About tayfun.ozis.erikan

Web Developer, Graphic & Web Designer Zend Framework, CodeIgniter, ExtJS & Sencha Touch User Kebab Framework Developer The co-founder of lab2023 - internet technologies
This entry was posted in Açık Kaynak, Akıl Defterim, Ext JS, JavaScript, Seminerler & Etkinlikler, Seminerler Notlarım and tagged , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>