ext-js-4-hero

Ext JS 4 Baslangıç Kılavuzu

On 11.10.11, In Yazılım, by

Uzun zaman boyunca 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 faydalanıldığını belirtmek isterim… 1. Gereksinimler (Requirements) 1.1 Web Tarayıcılar Ext [...]

Uzun zaman boyunca 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 faydalanıldığını belirtmek isterim…

1. Gereksinimler (Requirements)

1.1 Web Tarayıcılar

Ext JS 4 Google Chrome’um son sürümü, Internet Explorer 6 ve diğer tüm popüler web tarayıcıları desteklemektedir. Debugging (hata ayıklama) v.b. işlemleri daha kolay yapabilmeniz ve rahat bir geliştirme ortamı sağlaması açısından aşağıdaki tarayıcıları ve araçları kullanmanız önerilmektedir;

Bu makaledeki örnekler için sizlerde Google Chrome’un son versiyonunun kurulu olduğunu varsayacağız. Ayrıca Chrome Developer Tools‘u kullanacağız.
1.2 Web Sunucusu
Ext JS 4′ün çalışması için tıpkı JavaScript’te olduğu gibi bir web sunucusuna elbette gerek duyulmaz. Ancak kararlı bir şekilde XHR kullarak Ajax istekleri yapmak gerektiğinde bir web sunucusuna sahip olmanız önerilir. Eğer bir yerel web sunucusu makinenize kurulmamışsa Apache web sunucusunu kurmanızı öneririm.
1.3. Ext JS 4 Framework
Ext JS 4 Framework‘ ü indirin. Web sunucunuzun kök dizininde “extjs” adında yeni bir klasör açın. Eğer web sunucunzun kök dizini nerede bilmiyorsanız bunun için gerekli makalelere başvurabilirsiniz ancak Apache kullanıyorsanız genellikle aşağıdaki gibi olacaktır;
  • Windows – “C:\Program Files\Apache Software Foundation\Apache2.2\htdocs”
  • Linux – “/var/www/”
  • Mac OS X – “/Library/WebServer/Documents/”
2. Uygulama Dizin Yapısı (Application Structure)
2.1 Temel Yapı (Basic Structure)
Uygulamanızı esnek ve sürdürülebilir tutmak için önerilen temel Ext JS dizin yapısı aşağıdaki gibi olmalıdır.
- appname
    - app
        - namespace
            - Class1.js
            - Class2.js
            - ...
    - extjs
    - resources
        - css
        - images
        - ...
    - app.js
    - index.html
  • appname, uygulamanın tüm kaynak dosyalarını içeren dizindir.
  • app, tüm uygulama sınıflarını ve sistem namespace’ine (isim uzayı) uygun olarak konumlandırılmış sınıfları içerir.
  • extjs, bu dizin adından da anlaşılacağı üzere Ext JS 4 framework’ü içerir.
  • resources, uygulamaya ait tüm stil ve görsel dosyaları bu dizin içerisinde barıdındırılır. Ayrıca bu dizin statik XML ve JSON dosyalarını da barındırabilir.
  • index.html, uygulamanın çalışacağı başlangıç-noktası html dosyasıdır.
  • app.js, uygulamanızın temel mantığını içeren kaynak dosyasıdır.
Şu anda tüm bu dizinleri oluşturmak zorunda değilsiniz. Biz temel bir “Merhaba Ext JS 4″ uygulaması oluşturmak için aşağıdaki sadeleştirilmiş versiyonunu kullanacağız.
- helloext
    - app.js
    - index.html

Ardından helloext dizini altına Ext JS 4 framework’ü “extjs” şeklinde açın.

Tipik bir Ext JS uygulaması tek bir HTML belgesi (index.html) içerisinde yer alır. index.html dosyasına aşağıdakı satırları ekleyin;

<html>
<head>
    <title>Hello Ext JS 4</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
  • extjs/resources/css/ext-all.css ext js için gereken tüm stil bilgilerini içermektedir.
  • extjs/ext-debug.js Ext JS 4 ün çekirdek sınıflarının en minimal halini içerir.
  • app.js uygulamanıza ait kodları içerir.
Artık uygulamanızın ilk kodunu yazmak için hazırsınız. app.js dosyasını açın ve aşağıdaki satırları ekleyin;
Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    title: 'Hello Ext JS 4',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});

Şimdi tarayıcınızı açın ve http://localhost/helloext/index.html adresine gidin. Bu adrese gittiğinizde bir viewport oluşturulacak ve bunun içerisinde bulunan Panel’in başlığında “Hello Ext JS 4″ ve Panel içerisine “welcome” mesajını göreceksiniz.

2.2 Dinamik Yükleme (Dynamic Loading)

Şimdi Chrome Developer Tools’u açın ve ‘Network’ sekmesine gidin. Ardından Hello Ext JS 4 uygulamanızı yenileyin. Network sekmesinin son satırlarında, Ext Loader’ın “Viewport.js” dosyasını dinamik olarak yüklediğini göreceksiniz.

Ext JS 4 uygulamanızı çalıştırmak için gereken JavaScript kaynaklarını dinamik olarak yükleyen bir sistem ile gelmektedir. Bizim örneğimizde Ext.create Ext.container.Viewport sınıfından bir tane türetir. Ext.create çağırıldığında yükleyici (Ext.Loader) Ext.container.Viewport’ün yüklenip yüklenmediğini kontrol eder ve eğer bulamazsa Ext.container.Viewport sınıfına ait JavaScript dosyasını yüklemeye çalışır. Örneğimizde Viewport.js dosyası başarı ile yüklendiğinirken loader daha fazla sınıfı yükleme gereği duymaz. Ext.container.Viewport sınıfı sadece Viewport.js dosyasını talep ettiğinde bu yükleme uygulamanın çalışması sırasında kısa bir gecikmeye sebep olacaktır. Bu yükleme süresi uygulamanızda kullanacağınıs sınıfların sayısına bağlı olarak değişkenlik gösterecektir. Ancak tüm yüklemeler bittiğinde Ext.onReady() yani DOM.Ready olacaktır ve uygulama çalışmaya başlayacaktır.

Bu beklemelerin önüne geçmek için Ext.application çalıştırılmasından hemen öncekı satırlara aşağıdakı kodu ekleyin;

Ext.require('Ext.container.Viewport');

Bu satır uygulamayı çalıştırmadan önce Ext.Loader’ın devreye girmesini ve Ext.container.Viewport’ a ait Viewport.js dosyasının yüklenmesini sağlayacaktır.

2.3 Ext JS Sınıflarını Dahil Etme Yöntemleri (Library Inclusion Methods)

  • ext-debug.js Bu dosya sadece geliştirme (development) sırasında kullanılmak üzere hazırlanmış ve sıkıştırılmamıştır. Bu dosya ile Ext JS için gereken temel sınıflar dinamik olarak yüklenmektedir. Uygulamanız için gereken ek sınıflar için Loader dinamik olarak yükleme yapacaktır.
  • ext.js ext-debug.js ile  ile aynıdır, ancak ürününüzün son halinde (production) kullanılmak üzere hazırlanmış ve sıkıştırılmış bir halidir. Uygulamanızın app-all.js dosyası ile birlikte kullanılmak üzer tasarlanmıştır. (bkz: Bölüm 3)
  • ext-all-debug.js Bu dosya için, dinamik yüklemeye gerek kalmayacak şekilde tüm Ext JS sınıflarının tek bir dosyada toplanmış halidir diyebiliriz. Tabiki bu versiyonda development versiyonu olarak hazırlanmış ve sıkıştırılmamıştır.
  • ext-all.js ext-all-debug.js ile aynıdır, ancak ürününüzün son halinde (production) kullanılmak üzere hazırlanmış ve sıkıştırılmış bir halidir. Ancak bu şekilde kullanılması pek tavsiye edilmez. Az sonra 3. bölümde açıklayacağım özel bir yapı oluşturmak için tavsiye edilir.
  • bootstrap.js Bu dosya tarayıcının adres satırında index.html’ye vereceğiniz ?debug query string parametresini algılar ve extjs in -debug veya normal versiyonlarını dinamik olarak yükler.
3. Yayımlama (Deployment)
Sencha tarafından yeni duyurulan Sencha SDK Tools, her zamankinden daha kolay bir şekilde herhangi bir Ext JS 4 uygulamanızı yayımlamaya hazır hale getirir. Uygulamanızın ihtiyaç duyduğu tüm JavaScript bagımlılıklarını (dependency) bir JSB3 dosyası (JSBuilder dosya biçimi) şeklinde JSON formatında bir hale getirir.
Şimdi bir terminal penceresi açın; (Daha önce Sencha SDK Tools’u sorunsuzca kurup çalıştırıyor olduğunzu varsayıyorum)
cd path/to/web/root/helloext

Şimdi burada basit bir komut çalıştırarak uygulamanızın içerisinde bulunan tüm kaynakları bir JSB3 dosyası haline getireceğiz;

sencha create jsb -a index.html -p app.jsb3

Eğer uygulamanız PHP, Ruby, ASP v.b. dinamik bir sunucu-taraflı yapının üzerine inşaa edilmiş ise index.html dosyanızı gerçek bir URL ile yer değiştirebilirsiniz;

sencha create jsb -a http://localhost/helloext/index.html -p app.jsb3

Bu komut aslında index.html içerisinde bulunan tüm uygulama çatısı ve uygulamanıza ait dosyaları tarar ve bunları dinamik olarak koşar. Ardından Ext.Loader’ın davranış biçimine paralel olarak app.jsb3 adında bir JSB3 dosyasına uygulamanızın JavaScript kaynaklarını ekler. Bu dosya içerisinde namespace’e paralel olarak konumlandırılmış javascript dosyalarınızın yollarını göreceksiniz. Oluşturulan bu JSB3 dosyasını modifiye ederek kendinize ait özel başka dosyaları da deployment sürecine dahil edebilirsiniz.

Bunun ardından hemen bir ikinci komut ile sıkıştırma ve inşaa etme (build) süreci başlar;

sencha build -p app.jsb3 -d .

Bu komut 2 dosya oluşturacaktır.

  • all-classes.js - Bu dosya uygulamanıza ait tüm sınıfların sıkıştırılmış bir halidir. Bu dosya hata ayıklama (debugging) için elverişli bir dosya değildir. “Hello Ext JS 4″ ekstra javascript sınıfları içermediğinden bizim örneğimizde bu dosya boş olacaktır.
  • app-all.js – Bu dosya uygulamanızın çalışması için gereken tüm Ext JS sınıfları ve uygulamanıza ait tüm sınıfların barındırıldığı sıkıştırılmış ürününüzün son halinde kullanılmak üzere yayımlamaya hazır bir dosyadır. Kısaca all-classes.js + app.js in sıkıştırılmış halidir diyebiliriz.
Bu sürecin ardından ürünün son haline ait versiyon (production version) için ayrı bir index.html dosyası gerekecektir. Bu dosyada derlenmiş dosyalar bulunmalıdır. index-prod.html adında bir dosya oluşturup içerisine aşağıdaki satırları ekleyin;
<html>
<head>
    <title>Hello Ext JS 4</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext.js"></script>
    <script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>

Dikkat ederseniz ext-debug.js’in yerini ext.js, app.js’in yerini ise app-all.js dosyaları almıştır. Tarayıcınızda http://localhost/helloext/index-prod.js adresine giderseniz “Hello Ext JS 4″ uygulamanızın ürün haline getirilmiş versiyonun çalışan halini göreceksiniz.

Ayrıca yaz dönemi stajında bizimle birlikte çalışan ve ekibe çevirileriyle katkı sağlayan öğrenci kardeşimiz İsmail Teğiz‘e teşekkürler ederim.
….

Evet, konu ile ilgili olarak anlatacaklarım burada bitiyor. Bundan sonra hazırlamaya devam edeceğim diğer makaleleri aşağıdaki sırayla yazmayı düşünüyorum.

  1. Ext JS 4′ ün Yeni Sınıf Yapısı
  2. Ext JS 4 MVC Uygulama Mimarisi

Bir süre böyle orjinal makalelerden çevirilerle devam edeceğim. Sonrasında da kendi deneyimlerimden oluşan nispeten daha küçük lokmalar halinde hazırlanmış örnek ağırlıklı yazılar gelecektir.

İyi çalışmalar dilerim….