Qooxdoo JavaScript / AJAX Framework İle Merhaba Dünya'dan Biraz Öteye

0
muhuk
muhuk
26 Ekim 2008 , 12 dakika okuma süresi

Aşağıdaki eğitsel burada yayınlanan (İngilizce) aslından çeviridir. Gerek benim yeteneksizliğim gerekse Türkçe'nin bilişim terimleri konusunda zayıf olması sebebiyle kötü bir çeviri olmuştur. Çeviri için özür diliyor ve mümkünse aslını okumanızı rica ediyorum.

Qooxdoo özellikle masaüstü benzeri GKA'lar yaratmakta kuvvetli bir AJAX çatısı. Tkinter veya GTK gibi, ama daha çok swing'e benziyor. İyi hazırlanmış belgeler ve temiz bir API ile geliyor. Yapılandırma ve ilklendirme için küçük bir Python programı var. Çok geniş bir kütüphaneye sahip olduğu için geliştirme sürecinde kısmen derlenmiş kaynak üzerinde çalışıp, bitirdiğinizde yine bu programı kullanıp tek (aslında iki, bir de yükleyici oluşturuyor), az yer kaplayan bir dosya oluşturabilirsiniz.

Aşağıdaki Qooxdoo (kısaca qx) için giriş seviyesinde ama Merhaba Dünya'dan biraz öteye gitmeye çalışan bir eğitseldir. Bu nesne yönelimli programlama kavramlarını açıklayan bir eğitsel değildir, bunları zaten bildiğinizi varsayıyorum.

Taslağı Yaratalım

Basit, hesap makinesi benzeri bir uygulama yaratacağız. Kaynağı indirdiğinizi (bugün itibariyle 0.8 sürümü) ve qxtut gibi bir dizine açtığınızı varsayıyorum. İlk yapacağımız uygulamamız için aşağıdaki komutla bir taslak yaratmak:

./qooxdoo-0.8-sdk/tool/bin/create-application.py --name basicmath

Bu komut bizim için ./basicmath içerisinde aşağıdaki dizin yapısını oluşturdu:

qxtut/
  qooxdoo-0.8-sdk/
  basicmath/
    source/
    build/
    cache/
    api/
    config.json
    Manifest.json

Aslında, bazı dizinler (build & cache) henüz yok, ama devam ettikçe oluşacaklar. Şimdilik sadece uygulamanın dosya yapısına dikkatinizi çekmek istiyorum. config.json ve Manifest.json yapılandırma aracı için ayar dosyaları. Bu eğitsel için ayar dosyalarında değişiklik yapmamıza gerek yok.

İlk yapılandırma (veya derleme) işlemimizi gerçekleştirelim:

cd basicmath
./generate.py source

Eğer şimdi ./source/index.html'yi tarayıcınızda açarsanız bir Merhaba Dünya uygulaması göreceksiniz. Birazdan bunu kendi programımızla değiştireceğiz. Ancak başlamadan birkaç noktaya dikkatinizi çekmek isterim:

  • Sınıflarımızı tanımlarken qx.Class nesnesi üzerindeki define fonksiyonunu kullanıyoruz ve (tam) sınıf adımızla birlikte içeriği parametre olarak veriyoruz. Yani Qooxdoo'nun nesne yönelimli programlama özelliklerinden faydalanmak için sınıflarımızı prototype kullanarak tanımlamıyoruz.
  • Qooxdoo tekli kalıtım (mixin'lerle birlikte) destekliyor. Sınıfımızın içeriğinde, eğer varsa, extend anahtarını kullanarak üst sınıfımızı belirliyoruz.
  • Nesne üyeleri members anahtarı içinde, sınıf üyeleri de statics anahtarı içinde tanımlanıyor.
  • construct ve destruct, ilklendirme ve temizlik için iki özel fonksiyon.
  • Qooxdoo property'leri de destekliyor, ancak bu eğitselin kapsamı dışındalar.
  • Son olarak "#asset(basicmath/*)" satırı yapılandırma programına qxtut/basicmath/source/resource/basicmath dizinindeki kaynakları (resim vs) dahil etmesini söylüyor.

Kendi Sınıflarımız

Uygulamamızı inşa etmeye başlayalım. Application.js'nin fazlalıklarından arındırılmış hali aşağıdadır:

/* ************************************************************************
#asset(basicmath/*)
************************************************************************ */

qx.Class.define("basicmath.Application", {
    extend: qx.application.Standalone,
    members: {
        main: function()
        {
            this.base(arguments);
            if (qx.core.Variant.isSet("qx.debug", "on")) {
                qx.log.appender.Native;
                qx.log.appender.Console;
            }
            // Our code will come here
        }
    }
});

Şimdi Operation adındaki kendi sınıfımızı yaratacağız. Bu sınıf içerisinde iki değişken, bir (temel) işlem ve işlemin değişkenler üzerinde uygulanmasıyla elde edilen sonuç olacak. Daha sonra bu sonucu raporlama yeteneğini de ekleyeceğiz. Aşağıdaki kodu Operation.js olarak yapıştırın:

/* ************************************************************************
#asset(basicmath/*)
************************************************************************ */

qx.Class.define("basicmath.Operation", {
    extend: qx.ui.container.Composite,
    construct: function() {
        this.base(arguments);
        var layout = new qx.ui.layout.HBox(6);
        this.setLayout(layout);
        this.operand1 = new qx.ui.form.TextField("0");
        this.operator = new qx.ui.form.SelectBox();
        this.operator.add(new qx.ui.form.ListItem("add"));
        this.operator.add(new qx.ui.form.ListItem("subtract"));
        this.operator.add(new qx.ui.form.ListItem("multiply"));
        this.operator.add(new qx.ui.form.ListItem("divide"));
        this.operand2 = new qx.ui.form.TextField("0");
        this.result = new qx.ui.basic.Label("0");
        this.add(this.operand1);
        this.add(this.operator);
        this.add(this.operand2);
        this.add(this.result);
    },
    members: {
        operand1: null,
        operator: null,
        operand2: null,
        result: null
    }
});

Kodun açıklama gerektirmemesi gerek. Burada operand1, operator, operand2 ve result üyelerine dikkatinizi çekmek istiyorum. Bunlara sınıf gövdesinde (members içinde) değil de constructor içinde ilk değerlerini atıyoruz. Bunun nedeni aldıkları değerlerin primitif olmayan Object tipinden türemiş olması. Eğer üyelere sınıf gövdesinde primitif olmayan değerler (örneğin [1, 2, 3] dizisini) atarsak bu sınıftan yaratılan tüm nesneler aynı değerleri (nesneleri) gösterecektir.

Şimdi bu sınıfı uygulamamıza bağlayalım. "// Our code will come here" satırını aşağıdaki gibi değiştirin:

this.getRoot().add(new basicmath.Operation);

Tekrar derleyip index.html'i çalıştırdığımızda bileşenleri görmemiz gerekiyor.

Basit Davranışlar

Bileşenimizin işlemi hesaplamasını ve sonucu göstermesini istiyoruz. Operation'ın üyeler kısmını aşağıdaki gibi değiştirelim:

members: {
    operand1: null,
    operator: null,
    operand2: null,
    result: null,
    updateResult: function() {
        var v1 = this.cleanField(this.operand1);
        var v2 = this.cleanField(this.operand2);
        var r;
        switch(this.operator.getValue()) {
            case "add": r = v1+v2; break;
            case "subtract": r = v1-v2; break;
            case "multiply": r = v1*v2; break;
            case "divide": r = v1/v2; break;
        }
        this.result.setContent(String(r));
        this.operand1.setValue(String(v1));
        this.operand2.setValue(String(v2));
    },
    cleanField: function(field) {
        var val = parseInt(field.getValue());
        return isNaN(val) ? 0 : val;
    }
}

updateResult ve cleanField diye iki yeni fonksiyon ekledik. Şimdi construct'ı aşağıdaki gibi değiştirerek bunlardan faydalanalım:

construct: function() {
    this.base(arguments);
    var layout = new qx.ui.layout.HBox(6);
    this.setLayout(layout);
    this.operand1 = new qx.ui.form.TextField("0");
    this.operand1.addListener("input", this.updateResult, this);
    this.operator = new qx.ui.form.SelectBox();
    this.operator.add(new qx.ui.form.ListItem("add"));
    this.operator.add(new qx.ui.form.ListItem("subtract"));
    this.operator.add(new qx.ui.form.ListItem("multiply"));
    this.operator.add(new qx.ui.form.ListItem("divide"));
    this.operator.addListener("changeValue", this.updateResult, this);
    this.operand2 = new qx.ui.form.TextField("0");
    this.operand2.addListener("input", this.updateResult, this);
    this.result = new qx.ui.basic.Label("0");
    this.add(this.operand1);
    this.add(this.operator);
    this.add(this.operand2);
    this.add(this.result);
}

Değişkenler veya işlem türü değiştiğinde sonucu güncellemek için üç dinleyici (event listener) eklemiş olduk:

this.operand1.addListener("input", this.updateResult, this);
this.operator.addListener("changeValue", this.updateResult, this);
this.operand2.addListener("input", this.updateResult, this);

Dinleyiciye verdiğimiz son parametre (this) çağrının (ikinci parametre) kapsamını belirliyor.

Tekrar derleyip çalıştıralım. İşlemin sonucunun değişiklik yaptıkca güncelleniyor olmalı.

Hepsini Olaylarla Bağlayalım

Önce kodun bitmiş halini verip, daha sonra detayları üzerinde durmak istiyorum. Aşağıdaki Operation.js:

/* ************************************************************************
#asset(basicmath/*)
#asset(qx/icon/Oxygen/*)
************************************************************************ */

qx.Class.define("basicmath.Operation", {
    extend: qx.ui.container.Composite,
    construct: function() {
        this.base(arguments);
        var layout = new qx.ui.layout.HBox(6);
        this.setLayout(layout);
        this.operand1 = new qx.ui.form.TextField("0");
        this.operand1.addListener("input", this.updateResult, this);
        this.operator = new qx.ui.form.SelectBox();
        this.operator.add(new qx.ui.form.ListItem("add"));
        this.operator.add(new qx.ui.form.ListItem("subtract"));
        this.operator.add(new qx.ui.form.ListItem("multiply"));
        this.operator.add(new qx.ui.form.ListItem("divide"));
        this.operator.addListener("changeValue", this.updateResult, this);
        this.operand2 = new qx.ui.form.TextField("0");
        this.operand2.addListener("input", this.updateResult, this);
        this.result = new qx.ui.form.TextField("0");
        this.result.setReadOnly(true);
        var close_button = new qx.ui.form.Button(null, "qx/icon/Oxygen/16/actions/application-exit.png");
        close_button.addListener("execute", function(e) {
            this.fireDataEvent("changeResult", 0, parseFloat(this.result.getValue()), false);
            this.destroy();
        }, this);
        this.add(this.operand1);
        this.add(this.operator);
        this.add(this.operand2);
        this.add(new qx.ui.basic.Label("="));
        this.add(this.result);
        this.add(new qx.ui.core.Spacer(8));
        this.add(close_button);
    },
    events: {
        "changeResult": "qx.event.type.Data"
    },
    members: {
        operand1: null,
        operator: null,
        operand2: null,
        result: null,
        updateResult: function() {
            var v1 = this.cleanField(this.operand1);
            var v2 = this.cleanField(this.operand2);
            var r;
            switch(this.operator.getValue()) {
                case "add": r = v1+v2; break;
                case "subtract": r = v1-v2; break;
                case "multiply": r = v1*v2; break;
                case "divide": r = v1/v2; break;
            }
            this.fireDataEvent("changeResult", r, parseFloat(this.result.getValue()), false);
            this.result.setValue(String(r));
            this.operand1.setValue(String(v1));
            this.operand2.setValue(String(v2));
        },
        cleanField: function(field) {
            var val = parseInt(field.getValue());
            return isNaN(val) ? 0 : val;
        }
    }
});

Ve Application.js;

/* ************************************************************************
#asset(basicmath/*)
#asset(qx/icon/Oxygen/*)
************************************************************************ */

qx.Class.define("basicmath.Application", {
    extend : qx.application.Standalone,
    members : {
        main : function()
        {
            this.base(arguments);
            if (qx.core.Variant.isSet("qx.debug", "on")) {
                qx.log.appender.Native;
                qx.log.appender.Console;
            }
            var layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));
            var layout_footer = new qx.ui.container.Composite(new qx.ui.layout.HBox(6));
            var total = new qx.ui.basic.Label("0");
            var add_button = new qx.ui.form.Button("Add New", "qx/icon/Oxygen/16/actions/list-add.png");
            add_button.addListener("execute", function(e) {
                var new_operation = new basicmath.Operation();
                layout.addBefore(new_operation, layout_footer);
                new_operation.addListener("changeResult", function(e) {
                    var old_total = parseFloat(total.getContent());
                    var new_total = old_total - e.getOldData() + e.getData();
                    total.setContent(String(new_total));
                }, this)
            }, this);
            layout_footer.add(add_button);
            layout_footer.add(total);
            layout.add(layout_footer);
            add_button.execute();
            this.getRoot().add(layout);
        }
    }
});

Yukarıdan aşağıya doğru değişiklikleri incelemeye başlayalım. Application.js içinde:

var layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));
this.getRoot().add(layout);

Bileşenlerin davranışlarını özelleştirmemiz için her seferinde alt sınıf yaratmamız gerekmiyor. Operation'ı tekrar tekrar kullanmak istediğimden dolayı ayrı bir sınıf oluşturdum. Diğer yandan uygulamanın yerleşimi için Application.main içerisinde birkaç nesne yaratıp bunları özelleştirdim. Burada layout kök bileşen, diğer tüm bileşenleri onun içerisine yerleştiriyoruz. Bunlar bir veya daha fazla Operation ve en altta genel toplamı gösteren bir alan. VBox yerleşim modeli alt bileşenleri üstüste yerleştiriyor, HBox ise yan yana.

var layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));
var layout_footer = new qx.ui.container.Composite(new qx.ui.layout.HBox(6));
var total = new qx.ui.basic.Label("0");
var add_button = new qx.ui.form.Button("Add New", "qx/icon/Oxygen/16/actions/list-add.png");
add_button.addListener("execute", function(e) {
    var new_operation = new basicmath.Operation();
    layout.addBefore(new_operation, layout_footer);
    new_operation.addListener("changeResult", function(e) {
        var old_total = parseFloat(total.getContent());
        var new_total = old_total - e.getOldData() + e.getData();
        total.setContent(String(new_total));
    }, this)
}, this);

Tüm işlemlerin genel toplamını göstermesi için total isminde bir Label tanımlıyoruz ve yeni işlemler yaratabilmekiçin bir düğme ekliyoruz. 7. satırdaki closure'a dikkat; Qooxdoo'nun sunduğu nesne yönelimli programlama avantajlarından yararlanabilmek için kendimizi biraz sınırlandırsak da dinamik bir ortamdayız. Son olarak tüm bileşenleri birbirlerine bağlıyor ve layout'u uygulamanın köküne ekliyoruz.

add_button.execute();

Bu bizim için ilk işlemi ilklendiriyor. Aynı kodu iki kere yazmamak için bunu düğmeyi ateşleyerek yapıyoruz (bkz. add_button'ın "execute" dinleyicisi).

Şimdi Operation.js'deki değişikliklere göz atalım. result Label'ını bir TextField ile değiştirdim (bağımlılıklar her değiştiğinde. "generate.py source"u çalıştırmayı unutmayın). TextField'in changeValue olayındaki getOldData fonksiyonundan yararlanmak istedim. Fakat görünüşe göre bu olay eski verileri içermiyor. Yine de (salt okunur olarak ayarlayıp) TextField olarak bıraktım.

Sonra Operation'ın sonuç değiştikçe bir sinyal vermesine karar verdim ve changeResult adındaki kendi olayımı ekledim:

events: {
    "changeResult": "qx.event.type.Data"
}

Bu olay Operation.updateResult içerisinde tetikleniyor:

this.fireDataEvent("changeResult", r, parseFloat(this.result.getValue()), false);

İkinci parametre e.getData ile, üçüncü parametre ise e.getOldData ile döndürülüyor. Böylece genel toplamı tüm Operation'ları ziyaret etmeden aşağıdaki gibi hesaplayabiliyoruz:

var new_total = old_total - e.getOldData() + e.getData();

Bir Operation'u yoketmeden önce changeResult'u ateşleyip genel toplamı düzeltmek önemli bir nokta:

close_button.addListener("execute", function(e) {
    this.fireDataEvent("changeResult", 0, parseFloat(this.result.getValue()), false);
    this.destroy();
}, this);

Toplayacak Olursak

Şimdi uygulamamız istediğimiz gibi çalışıyor olmalı. Tam bir derleme yapalım:

./generate.py build

Bu komut bir yükleyici (~150kb) ve bir uygulama betiği (~400kb) oluşturur. Artık Qooxdoo kaynak dosyalarını ihtiyacımız kalmadı, build dizinindeki dosyaları sunucumuza yüklememiz uygulamamızın çalışması için yeterli.

Böylece Qooxdoo ile Merhaba Dünya'dan biraz öteye eğitselimizi tamamlamış oluyoruz. Kolay gelsin :)

kitap
3
Linkedin Facebook Twitter Google plus

Görüşler

FZ
0
FZ
Bizi kırmayıp kendi yazını tercüme ettiğin ve buraya yolladığın için çok teşekkürler ve tabii ki eline sağlık! :)
KiPSOFT_
0
KiPSOFT_
Bence Qooxdoo geliştirilmiş en sağlam Frameworklerden biri ve JavaScript'e güç katıyor ayrı yeten Delphi For Php 'ye verdiği destekle Php içinde güzel şeyler gelişmesine yardımcı oluyor.

Yazı için teşekkürler.
efendyl1
0
efendyl1
Bu yorumu yaparken neye dayanarak "Qooxdoo geliştirilmiş en sağlam Frameworklerden biri" dediniz merak ettim. Herhangi bir projenizde hangi ağırlıkta qooxdoo kullandınız veya stabilitesini nasıl ölçtünüz?

İnsanları yanlış yönlendirmeyelim.
Görüş belirtmek için giriş yapın...

İlgili Yazılar

Küçük mucidin el kitabı :)
conan
22 Temmuz 2001, 4 dakika okuma süresi

Siz de benim gibi evde bulduğunuz herhangi bir maddeden işe yarar (ya da yaramaz) şeyler yaratmayı sever misiniz bilemeyecegim. Ama sanırım ben bu dünyada varsam, benim gibilerinin de olması muhtemel.

İşte bu tip seyleri yaparken karşılaştığım şeyleri paylaşmak istedim bir anda sizlerle. Ama öncelikle sanırım konuyu biraz daha açmalıyım.

Projelerde Hata Takip Düzeni - ITracker
malkocoglu
23 Ocak 2004, 1 dakika okuma süresi

Yazılım projelerinin test safhasında ortaya çıkan hataları, bir iş akışı altında kontrol etmek programcılara ve idarecilere rahatlık sağlıyor. Şu anda içinde bulunduğumuz projemiz için ITracker adlı J2EE bazlı serbest yazılımı seçtik (projemiz tarafından Türkçeleştirilmiştir). Hata takip için gereken düzeni, ITracker üzerinde anlattığımız bu yazının yararlı olacağını umarız.

Projelerde Hata Takip Düzeni

ITracker

PHP-Nuke 5.5 ve Windows 2000 Server
anonim
12 Mayıs 2002, 6 dakika okuma süresi

Bu makale Windows IIS Server de  PHP-Nuke 5.5 kurulumunun nasıl yapılacağı anlatılmıştır.Makelenin orjinali ingilizce olup buradan izlenebilir

1) Gerekli Dosyalar:
PHP-Nuke 5.5 - PHP-Nuke Dosyası
mySQL 3.23.49 - PHP Nuke İçin veri tabanı
PHP 4.2.0 installer - Windows ISS Server de PHP Kodlarının Çalışması için gerekli olan dosya.

Yeni Programcılara Müjde - bilgidata.com
anonim
15 Eylül 2002, 1 dakika okuma süresi

Temel teknikler, bilgi ve en önemlisi tecrübe paylaşımı için Türkçe bir site başlattık. www.bilgidata.com sitesinden yazılım proje yonetimi, tasarım yöntemleri, teknoloji püf noktaları hakkında yazılarımız var. Konular Java, ANT, Tomcat, Oracle, SQL, Extreme Programming hakkında. Programcıların beğeneceğini umuyorum.

Dr. Cem Say´la Yapay Zekâ ve Doğal Dil İşleme Üstüne
FZ
29 Mart 2004, 15 dakika okuma süresi

Boğaziçi Üniversitesi Bilgisayar Mühendisliği öğretim görevlilerinden Dr. Cem Say ile bilgisayar dünyasının popüler ve bir o kadar da zorlu konuları olan yapay zekâ, doğal dil işleme ve kuantum bilgi işlem üzerine söyleştik.

FZ: Hocam, yapay zekânın hangi alanlarında, ne kadar süredir çalışıyorsunuz?

CS: Doktora zamanından beri yapay zekâ (YZ) ile ilgileniyorum. Doktora konum, İngilizcesi "Qualitative Reasoning" olan ve "Nitel Uslamlama" olarak Türkçeye çevirebileceğimiz konu idi, ne olduğunu birazdan açıklayacağım. Demek ki, işte 1980'lerin sonlarından bu yana YZ ile ilgileniyormuşum. Ayrıca yukarıda bahsi geçen konuya ek olarak Doğal Dil İşleme özellikle Türkçe dil işleme ile bir süredir ilgileniyorum. YZ konusunda ilgilendiğim temel iki alan bu ikisi.