Bu sürümde Ext JS 4′ün yeni MVC yapısının tüm nimetlerinden yararlanadık. Ayrıca os görünümü için unity ve mac-os x den esinlenmeler ve uygulamalara ait SVG iconlar kullanarak daha esnek bir kullanım oluşturmaya çalışıyoruz.

Geliştiriciler açısından da uygulama oluşturma için Ext JS’e ait MVC yapısını parçalara bölerek H-MVC yapısını uyguladık. Dolayısı ile bir uygulamayı desktop’dan bağımsız olarak tasarlayıp son haline getirdikten sonra Kebab Uygulaması haline getirip web-os masaüstünde kullanıcıya sunmak sadece birkaç dakika zamanımızı alıyor. Bu sayede Sencha Designer gibi araçlar kullanarak da rahatça uygulamalarımızı birbirinden bağımsız olarak tasarlayabileceğiz.

Ayrıca i18n (multi language) desteği ve config desteği ile birlikte uygulamaların cevirileri ve ayarlamaları kolayca yönetmek mümkün.

Son olarak Kebab Bootstrap adını verdiğimiz sistemle tüm MVC uygulamarınızı tek bootstrap dosyası ve basit bir configurasyonla yüklemeniz ve Ext Loader’ile tüm bağımlı sınıfların yüklenerek uygulamanın çalışır duruma gelmesi ve deploy süreçleri kolaylaştırıldı.

Henüz development versiyonunda olan Kebab 2.0 client web-os  Ext JS ‘in önceki gün beta-2 olarka duyurulan Ext JS 4.1.0-beta-2 versiyonu ile de test edilerek daha iyi bir performans ve esnek bir yapıda hazırlamak için elimizden geleni yapıyoruz. Özellikle belirtmek isterim ki Kebab’ı kendi üretim süreçlerimizde ve geliştirdiğimiz ürünlerin paralelinde iyileştirmeye ve geliştirmeye devam edeceğiz.

GitHub adresi ve kaynak kodlar :

 https://github.com/kebab-project/client-web-os

Konuyla ilgili ekran görüntüleri aşağıdadır…

Herkese iyi çalışmalar.

Kebab Project’in v.1.5.0.rc2 sürümü yayınlandı.

Detaylı bilgiyi http://kebab-project.2299591.n4.nabble.com/Kebab-Project-1-5-0-rc2-has-been-released-tt4123892.html adresinden görebilirsiniz

İyi çalışmalar.

We decided to use rspec for test at Kebab Revolution on last month. We wrote 25 test for Tenant and Usermodels. If you want to see the test code, look at Github. You can see the test result at test result html file. We continue to write test for Kebab 2.x Revolution.

Best Regards.

Test çıktısı: http://lab2023.com/wp-content/uploads/2011/11/Test-Results-spec.html
Kaynak kodlar: https://github.com/kebab-project/server-ror/tree/master/spec/models
Haberin orjinal kaynağı; http://lab2023.com/kebab-revolution-first-rspec-tests/

Test temelli geşiştirici ve konuyla ilgililere duyurulur.

Uzunca bir zamandır planlayıp iş yogunlugundan nihayet kolları sıvama fırsatı bulabildiğim Sass ve Compass artık alet çantama bizzat alınmış bulunuyor.

Burada sizlere kısaca nasıl kurup nasıl kullanabileceğinizi anlatmak istiyorum. Henüz çok yeni olsamda, bu konuda uzmanlaştıkça daha detaylı yazılar gelecektir.

Orjinali  gelistiricigunlugu.com‘da bulunan makalelerden alıntı ve yazıların tam adresleri aşağıdadır;

Sass nedir ?

Merhaba dostlar,

Uzunca bir zamandır planlayıp iş yogunlugundan nihayet kolları sıvama fırsatı bulabildiğim Sass ve Compass artık alet çantama bizzat alınmış bulunuyor. Burada sizlere kısaca nasıl kurup nasıl kullanabileceğinizi anlatmak istiyorum. Henüz çok yeni olsamda, bu konuda uzmanlaştıkça daha detaylı yazılar yazmaya devam edeceğim. Birbirinin devamı niteliğinde olan bu iki konunun ilki olan Sass ile anlatıma başlamak istiyorum. Ayrıca ilişkili olarak Compass nedir ? malaesini de okumanızı tavsiye ederim.

Yazının devamı için: http://www.gelistiricigunlugu.com/sass-nedir/ adresini ziyaret ediniz.

———-

Compass nedir ?

Bir önceki makalem olan Sass nedir ? konusuna paralel olarak okumanızı tavsiye edeceğim bu yazımda, kısaca Compass’ın ne olduğundan ve Sass‘ a neler kazandırdığından, sisteminize nasıl kurulacağından ve basitçe nasıl kullanacağınızdan bahsetmek istiyorum.

Yazının devamı için: http://www.gelistiricigunlugu.com/compass-nedir/ adresini ziyaret ediniz.

İyi çalışmalar dilerim.

Bazı sevdiğim web-yazılım geliştirici dostlarım ile birlikte içerik oluşturmak için kolları sıvadığımız gelistiricigunlugu.com‘da yayınlanan, aşağıda kısa bir alıntısını bulacağınız yeni makalemi sizlerle paylaşmak istiyorum.

Merhabalar,

Uzunca bir zaman Ext JS 3 ile projeler geliştirdikten sonra, yakın zamanda bir çok yeni beta versiyonu çıkan Ext JS 4 ile çalışmaya başladım. Bu makalemde sizlerle Ext JS 4 için hızlı bir başlangıç klavuzu oluşturmaya çalışacağım. Makalenin hazırlanmasında Sencha Learning Center‘da bulunan ilgili makalelerden faydalandığımı belirtmek isterim..

Yazının devamı için:http://www.gelistiricigunlugu.com/ext-js-4-baslangic-kilavuzu/ adresini ziyaret ediniz.

İyi çalışmalar dilerim.

Bir önceki Ext JS 4 veri paketi (Data package) – Bölüm 1 ile ilgili yazımın devamı olan bölüm 2′ ye hoş geldiniz. Bu bölümde sizlere ilişkiler (assocations), iç içe verilerin yüklenmesi (nested data), geçerlilik ve doğrulama (validations) konularını aktarmaya çalışacağım.

İlişkiler (Assocations)

Model’ler Assocations API yardımıyla birbirleri ile bağlantılı hale getirilebilirer. Birçok uygulamada pek çok model kullanılır ve genellikle bu modeller birbirleri ile ilişki halinde olurlar. Örneğin bir blog yazma uygulamasında kullanıcılar (Users), yazılan makaleler (Posts) ve yorumlar (Comments) bu durum için iyi bir örnek teşkil eder. Her kullanıcı yeni makaleler yazabilir ve bu makaleler için yorumları alabilir. Bu ilişkileri aşağıdaki gibi ifade edebiliriz;

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

    // kısaltma olarak { model: 'Post', name: 'posts' }
    hasMany: 'Post'
});

Ext.define('Post', {
    extend: 'Ext.data.Model',
    fields: ['id', 'user_id', 'title', 'body'],

    proxy: {
        type: 'rest',
        url : 'data/posts',
        reader: {
            type: 'json',
            root: 'posts'
        }
    },

    // her bir makale sadece bir kullanıcıya aittir
    belongsTo: 'User',
    hasMany: { model: 'Comment', name: 'comments' }
});

Ext.define('Comment', {
    extend: 'Ext.data.Model',
    fields: ['id', 'post_id', 'name', 'message'],

    // her bir yorum sadece bir makaleye aittir
    belongsTo: 'Post'
});

Bu uygulamada farklı modeller arasında zengin ilişkileri ifade etmek çok kolay görünmektedir. Her bir modelin diğer modeller ile ilişkisi herhangi bir sayıda olabilir ve modeller herhangi bir sıralamada tanımlanabilir. Bir modeli ilişkili olarak tanımladığımızda diğer modellere ve bunların verilerine rahatça erişebiliriz. Örneğin; Belirli bir kullanıcıya ait tüm makaleleri ve onlara bağlı yorumları tek seferde dökmek yada konsola basmak istersek aşağıdaki gibi bir yöntemi kullanabiliriz;

// ID'si 1 olan kullanıcının yüklenmesi başarılı olursa
// ona bağlı tüm makaleleri ve makalelere bağlı yorumları
// konsola basar
User.load(1, {
    success: function(user) {
        console.log("User: " + user.get('name'));

        user.posts().each(function(post) {
            console.log("Comments for post: " + post.get('title'));

            post.comments().each(function(comment) {
                console.log(comment.get('message'));
            });
        });
    }
});

Bu durumda her modele otomatik olarak ilişkide olduğu model’ in çoğul hali isminde bir fonksiyon eklenir. user.posts() fonksiyonu ile bir kullanıcının birden fazla makalesi (hasMany) kuralıyla ilişkili verilerine ulaşabileceğimiz store objesi döndürülür. Buna bağlı olarak Post modeline tamımladığımız her bir makale bir kullanıcıya bağlıdır (belongsTo) ve her makalenin birden fazla yorumu olabilir (hasMany) kuralıyla ilişkili Comments modeli, yine otomatik olarak oluşturulan posts.comments() fonksiyonu sayesinde Comments store’ unu ve bağlı verileri döndürülür.

İlişkileri verileri yüklemekten ziyade ilişkili yeni kayıtlar oluşturmak için daha kullanışlıdır:

user.posts().add({
    title: 'Ext JS 4.0 MVC Mimarisi',
    body: 'Bu büyük fikir Ext JS uygulamarınızı MVC mimarisini kullanarak inşaa etmenizi sağlar'
});

user.posts().sync();

Kullanıcıya yeni makale verisi eklenirken otomatik olarak user_id alanına kullanıcıya ait ID’ de eklenir. sync() fonksiyonu ise, yapılandırılmış proxy üzerinden yeni makaleyi kaydeder. Eğer bu kaydetme işlemi tamamlandığında haberdar olmak isterseniz bir callback (geri çağırma) ile işlemin başarılı yada başarısız oldugunu kontrol edebilirsiniz.

BelongsTo ilişkisi ise model’de bağlı olduğu modele ait yeni bir fonksiyonlar oluşturur. Aşağıda nasıl kullanıldığını görelim;

// kulllanıcıya ait referansı her bir makalenin bir kullanıcısı olur
// ilişkisi ile (belongsTo) alalım
post.getUser(function(user) {
    console.log('Posta ait kullanıcının referansı: ' + user.get('name'))
});

// makalenin kullanıcısını değiştirmeyi deneyelim
post.setUser(100, {
    callback: function(product, operation) {
        if (operation.wasSuccessful()) {
            console.log('Makaleye ait kullanıcı güncellendi');
        } else {
            console.log('Makalete ait kullanıcı güncellenemedi');
        }
    }
});

Bu sefer getUser() fonskiyonu kullanarak kullanıcı bilgilerini asenkron olarak yüklenebildiğini görüyoruz. setUser() fonksiyonu makale (Post) modelinde bulunan yabancı anahtar (foreign key) olan user_id alanını 100 olarak günceller. Her zamanki gibi işlem tamamlandığında callback yöntemi ile başarılı yada başarısız sonuçları takip edebiliriz.

İç İçe Verileri (Nested Data) Yüklemek

Users.load fonksiyonu kullanarak ve yukarıda anlatılan proxy ve ilişkileri tanımlayarak iç içe işlemler sayesinde bir kullanıcıya ait tüm ilişkili verileri geri döndürebilirsiniz. Bu durumda iç içe çağırılan methodlar ve bunların ilişkileri sayesinde sunucuya birden fazla istek gönderilecektir. Bunun başka bir yolu olup olmadığını merak ediyor olabilirsiniz. Bu durum yerine verilerinizi sunucuda aşağıdaki gibi bir yapıda tek seferde döndürmek alternatif bir çözümdür. Bu durumda daha önce tanımlanan model ilişkileri tüm bu veriyi de algılayacaktır.

{
    success: true,
    users: [
        {
            id: 1,
            name: 'Ed',
            age: 25,
            gender: 'male',
            posts: [
                {
                    id   : 12,
                    title: 'All about data in Ext JS 4',
                    body : 'One areas that has seen the most improvement...',
                    comments: [
                        {
                            id: 123,
                            name: 'S Jobs',
                            message: 'One more thing'
                        }
                    ]
                }
            ]
        }
    ]
}

Tüm bu veriler uygulama çatısında otomatik olarak ayrıştırılır. Modellere vekil’ ler (proxy) aracılığı ile neredeyse heryerden veri yüklemek oldukça kolaydır ve okuyucular (readers) json, xml v.s. herhangi bir dönüş tipini okuyabilirler.

İlişkiler ve validasyonlara ait çalışan demoyu inceleyiniz.

Modeller aracılığı ile tabiki iç içe olmayan verileri de yüklemek mümkündür. Tembel yükleme (lazy loading) denilen bu yöntem  sadece ilişkisel verileri yüklemek için yararlı olabilir. Önce normal yöntemle kullanıcıları yüklüyoruz ve işlem başarılı olduktan sonra devamında kullanıcılara ait olan makaleleri yüklüyoruz ve buna ait callback yöntemi ile geri döndürülen makalelerin içerisinde Ext.each yöntemi ile dönerek her bir makaleye ait yorumlara da erişebiliriz.

Tembel ilişkilendirme (Lazy Assocations) yöntemini çalışan demosundan inceleyiniz.

Doğrulama ve Geçerlilik Denetimi (Validations)

Ext JS 4 modelleri doğrulama özelliği sayesinde çok daha zengin özelliklere büründü. Bunu göstermek için daha önceki örneklerimizde tanımladığımız ilişkisel modelleri kullanarak doğrulamaları bunların  üzerine inşa edeceğiz. İlk olarak User model’ine bazı validasyonlar tanımlıyoruz:

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ...,

    validations: [
        {type: 'presence', name: 'name'},
        {type: 'length',   name: 'name', min: 5},
        {type: 'format',   name: 'age', matcher: /\d+/},
        {type: 'inclusion', name: 'gender', list: ['male', 'female']},
        {type: 'exclusion', name: 'name', list: ['admin']}
    ],

    proxy: ...
});

Doğrulama alan tanımlamaları field (alan) tanımlamalarıyla benzerlik göstermektedir. Her iki durumda da alanı ve doğrulama tipini belirleriz. Yukarıdaki örneğimizde ‘name‘ alanı en az 5 karakter olabilir, ‘age’ alanı sadece numara olabilir, ‘gender‘ alanı ‘male‘ veya ‘female‘ olabilir ve ‘username‘ admin dışındaki herşey olabilir. Bazı dogrulamalar ‘lenght’ alanında oldugu gibi minimum veya maksimum değerleri alabilir. Yerleşik olarak 5 adet doğrulama bulunmasına karşın ‘format‘ alanındaki gibi kurallı ifadeler (REGEX) kullanarak yada birçok kombinasyon uygulayarak birçok geçerlilik doğrulamasını yapabilirsiniz.

• persence varlığın sadece bir tane olduğunu yani tekil olduğunu garantiler ve doğrular ancak string alanın boş olmasını kabul etmez
• lenght varlığın minimum veya maksimim değerler arasında kalmasını garanti eder ama her iki durumu birden kullanmak isteğe bağlıdır.
• format varlığın verilen kurallı ifade ile doğrulanmasını garanti eder. (Kurallı ifadelerle ilgili daha ayrıntılı araştırma yapmanızı öneririm)
• inclusion varlıgın verilen dizi içerisindeki değerlerden birisi olmasını garanti eder. (Enum veri tipine benzetebiliriz)
• exclusion varlığın verilen dize içerisindeki değerler dışında tutulmasını sağlar. (Örneğin ‘admin’ gibi bir verinin bloklanmasını önlemek için)

Şimdi farklı olasılıklarla bir kullanıcıyı oluşturup doğrulamarı test edelim. Burada doğru yada yanlış veriler girip validasyonları çalıştırarar ne şekilde sonuçlar döndürdüğünü inceleyeceğiz:

// şimdi hatalı veriler içeren bir kullanıcı oluşturmaya çalışalım
var newUser = Ext.create('User', {
    name: 'admin',
    age: 'twenty-nine',
    gender: 'not a valid gender'
});

// oluşturduğumuz yeni kullanıcı için validasyonları çalıştırıyoruz
// ve errors değişkenine atıyoruz
var errors = newUser.validate();

// doğrulama hatası varsa 'false' döndürülür
console.log('Kullanıcı doğrulandı mı?', errors.isValid());

// Modelde bulunan tüm hataları bir dizi olarak döndürür
console.log('Tüm hatalar:', errors.items);

// Age alanı ile ilgili hataları döndürür
console.log('Age alanı hataları:', errors.getByField('age'));

validate() fonksiyonu modelde bulunan tüm tanımlanmış validasyonları çalıştırır ve geriye Errors adında bir obje döndürür. Bu basıt obje içinde herhangi bir hata varsa barındırır, ve genel olarak tüm doğrulamaların geçerli olup olmadığını isValid() fonksiyonuyla kontrol etmemizi sağlar. Eğer ‘true‘ dönerse herhangi bir alanda herhangi bir hata bulunmakatadır anlamına gelir. Ancak getByField() fonksiyonuyla belirli bir alana ait hatalara da ulaşabiliriz.

İlişkilendirilme ve doğrulamaların birlikte kullanıldığı demoyu inceleyiniz.

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

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

Evet gördüğünüz gibi birçok yeni işlevsel özelliği bünyesinde barındıran Ext JS 4 Veri Paketi (Data Package) işleri oldukça kolaylaştırıyor ve Ext JS 4 kullanarak hazırlanmış JavaScript uygulamalarınızı daha da güçlendiriyor. ORM ile ilişkili olan bu konuyu ağırlıklı olarak Ext JS’in eğitim merkezinde (learning center)  bulunan ilişkili makalesinden yararlanarak ve kendi yorumumu katarak hazırlamaya çalıştım. Diğer konular için de bu adresi yakından takip etmenizi tavsiye ederim.  Umarım sizlere faydası olmuştur.

İyi çalışmalar dilerim.

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.

Ben ve ortağım / kardeşim Onur Özgür ÖZKAN,  her yıl Yeditepe Üniversitesi’ nde düzenlenen ve bizce çok verimli bir etkinlik olan Özgür Web Teknolojileri Günleri‘ nde Kebab Project ile Web Uygulamaları Geliştirme adlı atölye çalışması düzenleyeceğiz.

Açık kaynak ve web teknolojilerine ilgi duyan arkadaşları aramızda görmekten mutluluk duyarız.

Konuşmacılar: Onur Özgür Özkan & Tayfun Öziş Erikan

Başlık: Kebab Project ile Web Uygulamaları Geliştirme

Açıklamalar: Kebab Project, php ve javascript dillerinde yazılan cloud, cdn, rest teknolojilerini destekleyen hızlı uygulama geliştirmeye yarayan projedir. Seminer boyunca Kebab Project’in kurulumu, doctrine orm kütüphanesi ile veri katmanın hazırlanması, kullanıcı yetkilerinin ayarlanması, basit crud bir uygulama için gerekli olan rest servislerinin yazılması, ExtJS kütüphanesi ile mvc yapısında bir kebab uygulamasının hazırlanması, rest servisler için arayüzlerin hazırlanması ve kebab project ile yapılmış açık kaynaklı bazı uygulamalar gösterilecektir.

Etkinlik Sayfası: http://www.ozgurwebgunleri.org.tr/

Etkinlik Programı: http://www.ozgurwebgunleri.org.tr/2011/etkinlik-programi/

İyi çalışmalar.

Kimi zaman uygulamanızı kullanan kullanıcının hangi platformdan girdiğini bilmek ve genellikle uygulama arayüzünüzü buna göre düzenlemek isteyebilirsiniz. Bu gibi durumlarda javascript’te bulunan Navigator  objesi size ziyaretçi hakkındaki öğrenmek isteyeceiğiniz bazı bilgileri verecektir.

Navigator objesini consola bastığınızda aşağıdaki gibi bir hash görmeniz gerekir;

console.log(navigator);

1. appCodeName: “Mozilla”
2. appName: “Netscape”
3. appVersion: “5.0 (X11; Linux x86_64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.159 Safari/535.1″
4. cookieEnabled: true
5. geolocation: Geolocation
6. language: “en-US”
7. mimeTypes: DOMMimeTypeArray
8. onLine: true
9. platform: “Linux i686″
10. plugins: DOMPluginArray
11. product: “Gecko”
12. productSub: “20030107″
13. userAgent: “Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.159 Safari/535.1″
14. vendor: “Google Inc.”
15. vendorSub: “”
16. __proto__: Navigator

Yukarıda göreceğiniz üzere her değer açıkça ne içerdiğini anlatmakta.

navigator.userAgent’i kullanmak

Konuyu kısa ve öz bir örnekle açıklıyorum;

/**
* Check is mobile for Apple products
*/
var isMobile = function() {
    try {
        return (navigator.userAgent.match(/iPhone/i))
            || (navigator.userAgent.match(/iPod/i))
            || (navigator.userAgent.match(/iPad/i)) ?
        true : false;
    } catch(e) {
        return false;
    }
};

// output true or false
console.log(isMobile());

Yukarıdaki örnekte navigator objesindeki userAgent string değerini match methud ve regex kullanarak eşleştiriyoruz ve ilgili değerimizi bulduğumuzda true yada false döndürerek kullanıcının platformunu anlamış oluyoruz. Eski ensil tarayıcılar da sorun yaşamamak veya uyumsuzlup problemi yaşamamak için kodu try/catch bloğuna almayı unutmuyoruz. Yukarıdakı navigator.userAgent.match(/XXX/i) kısmını || (OR) ile biden fazla platofmr için tekrarlayabilirsiniz.

Hepsi bu kadar.
İyi çalışmalar.

Eğer Ext JS 4 kullanarak büyük JavaScript ugulamarı geliştiriyorsanız kodlarınızda JSDoc kullanmanız hayati önem arzeder. Eğer kodlarınızı diğer yazılımcılar ile paylaşıp ekip çalışması yapıyorsanız bu durum daha da önemli hale gelir. Bu gibi durumlarda eğer disiplinli davranıp classlarınızı, methodlarınızı, değişkenlerinizi, dosyalarınızı v.b. güzel dokümante ettiyseniz proje tamamlandıkça bu dokulanları bir API dokumanı haline getirmek gerekir ve bu aşamada çoğu zaman bir araca ihtiyaç duyarız. Biz lab2023 – internet teknolojileri olarak bu sorunun üstesinden gelmek için kendimize Sencha Labs tarafından geliştirilen kendi API dokumantasyonlarını oluşturmak için kullandıkları JSDuck‘ u araç olarak belirledik. JSDuck kullanarak oluşturacağınız API dokumantasyonları Ext JS’ in API dokumantasyonu gibi olacaktır.

       ,~~.
      (  6 )-_,
 (\___ )=='-'
  \ .   ) )
   \ `-' /    hjw
~'`~'`~'`~'`~

Aracın kullanımı ve kurulumu gerçekten çok basit ve temiz. Şimdi size kurulum ve kullanımı ile ilgili birkaç bilgi vereceğim.

JSDuck GitHUB sayfası

https://github.com/senchalabs/jsduck

JSDuck kurulumu

JSDuck bir RubyGem’ dir. Öncelikle sisteminizde ruby programlama dilinin kurulu olması gerekir. Ruby hakkında daha detaylı bilgi için  http://www.ruby-lang.org/tr/ adresini ziyaret edebilirsiniz. RubyGems için ise http://docs.rubygems.org/read/chapter/3 adresi işinizi görecektir.

Ruby’ nin sisteminizde kurulu ve çalışır durumda olduğunu var sayarak, şimdi terminalden aşağıdaki komutu çalıştırın.

$ [sudo] gem install --pre jsduck

Eğer bir sorun yaşamazsanız jsduck gem’i sisteminize kurulacak ve kullanıma hazır hale gelecektir.

Eğer windows kullanıcısı iseniz şu adresi ziyaret ediniz: https://github.com/senchalabs/jsduck/downloads

JSDuck’ın kullanımı

JSDuck sisteminizde bulunan javascript dosyalarınızın bulunduğu tüm alt dizinleri tarar ve içinde js dosyalarını ayrıştırarark yazılmıs JSDoc’ ları Ext JS API dokumantasyonundaki gibi bir arayüz haline saniyeler içerisinde getirir.

jsduck jsduck your/project/js --verbose --output your/docs

Yukarıdakı komutu çalıştırdığınızda jsduck proje dizininizi tarar ve tum JSDoc satırlarını yorumlayarak your/docs dizininize bir Ext JS uygulaması olarak API dokümantasyonunuzu oluşturur.

Buradaki –verbose parametresi dokumanın oluşturulması sırasında konsola çıktıyı basar ve olan biten hakkında sizi bilgilendirir. –ignore-global, global sınıf yaratılmasını önlerken, –exclude Error ise hataların gizlenmesini sağlayacaktır.

(Açıkcası bu parametreleri şimdilik test etmedim  ve ingilizcemin yettiği kadarıyla buraya çevirmeye çalıştım. daha sonra test edip burayı güncelleyeceğim)

JSDuck için kodlarınızın dokümante edilmesi

Şu adreste kullanabileceğiniz JSDoc tagları listelenmektedir.  Ama ben yinde aşağıda da listeledim.  JavaScript sınıflarınızı bu kaynakta belirtilen şekilde dokümante ederseniz JSDuck ile çok kullanışlı API dokümantasyonları hazırlayabilir, daha da önemlisi kodlarınızı yorumlayan diğer geliştiricilerin sizi daha rahat anlamasını sağlayabilirsiniz.

• @class
• @extends
• @singleton
• @cfg
• @constructor
• @property
• @type
• @method
• @event
• @param
• @return
• @static
• @inheritable
• @author
• @docauthor
• @xtype
• @member
• @mixin
• @alternateClassName
• {@link}
• {@img}

Lisanslama ve Kullanım