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

ACM Bilgisayar Bilimleri Klasik Kitaplar Listesi
nec
18 Ocak 2008, 1 dakika okuma süresi

ACM, kendi portalında, okuyucu anketiyle belirlenen, içinde "201 Principles of Software Development", "Anatomy of LISP" gibi kitapların olduğu bir klasikler listesi yayınlamış. Listede Dijkstra, Minsky gibi isimlerin de kitapları var.

Bazı kitapların tamamına PDF olarak erişilebiliyor siteden. Yazdığına göre eksik olanlar için de izin almaya çalışıyorlarmış. Takip edilesi.

Türkiye Bilişim Ansiklopedisi
FZ
3 Temmuz 2006, 1 dakika okuma süresi

Editörlüğünü Prof. Dr. Tuncer Ören, Tuncer Üney ve Dr. Rifat Çölkesen'in üstlenmiş oldukları Türkiye Bilişim Ansiklopedisi yayınlandı.

1248 sayfalık ansiklopedide bilgisayar bilimleri, bilgisayar mühendisliği gibi alanlardaki öğretim görevlilerinden telekomünikasyon, yazılım ve donanım şirketlerinde çalışan mühendislere kadar pek çok deneyimli yazar geniş bir yelpazede teknik konuları derinlemesine ele alıyor. Hesaplamaya dayalı geometriden genetik algoritmalara, konuşma ve ses sıkıştırma sistemlerinden örüntü tanımaya dek pek çok konunun alandaki yetkin isimler tarafından ele alındığı ansiklopedinin dikkat çekici özelliklerinden biri de Türkçe terim konusundaki hassasiyeti.

Kitap paylaşmanın eğlenceli yolu..
dasgin
20 Mart 2006, 1 dakika okuma süresi

"Amacımız, basit, tüm dünyayı kütüphaneye çevirmek."

"BookCrossing.com size kitaplarınızı dünyayla paylaşmak ve sonsuza kadar izlediği yolu takip edebilmek için basit bir yöntem sunuyor."

Okuduğunuz ve diğer insanlarla paylaşmak istediğiniz kitapları "www.bookcrossing.com" adresinden temin ettiğiniz bir kimlik numarası ile kayıt altına alıyorsunuz. Sonra mı?

rsync ile Windows makinelerin Debian/GNU Linux'a yedeklenmesi
ctengiz
16 Aralık 2004, 1 dakika okuma süresi

Uzunca bir süredir ağ içerisinde yer alan kullanıcılara ait MS Windows makinelerinin yedeklenmesi için bir çözüm arayışı içerisindeydim. Sistemin sahip olması gereken özellikleri şu şekilde sıralayabilirim :
  1. Yedek makinesinin yönetimi kolay olmalı.
  2. Sistem ağ üzerinden çalışmalı.
  3. Yalnızca değişen dosyaları yedekleyecek kadar akıllı olmalı.
  4. Çok fazla ağ trafiğine sebep olmamalı.
  5. GNU/GPL yazılımlar ile minumum maliyete sahip olmalı.
  6. Son kullanıcı için kullanımı kolay olmalı.
  7. Kendi başına zamanlanmış yedekler alabilmeli.
Bu yazıda bu hedeflere nasıl ulaşılabilineceği anlatılyor.

Python Paradoksu
FZ
18 Ağustos 2004, 3 dakika okuma süresi

Paul Graham, geçenlerde (2004 Ağustos'unda) kısa bir makale yazmış, bakalım ne demiş:

"Kısa bir süre önce gerçekleştirdiğim bir konuşmada pek çok insanı hayalkırıklığına uğratan bir laf ettim: Python tabanlı bir proje için bulabileceğiniz programcılar, Java tabanlı bir projeye çekebileceğiniz programcılardan daha zeki olacaktır.

Kast ettiğim Java programcılarının aptal olduğu değil. Kast ettiğim şey, Python programcılarının daha akıllı olduğu. Yeni bir programlama dilini sıfırdan öğrenmek çaba gerektirir. Ve insanlar Python'u yeni bir iş bulabilirler diye öğrenmiyorlar; insanlar Python'u öğreniyor çünkü gerçekten programlamayı seviyorlar ve halihazırda kullandıkları dillerden memnun değiller.