Dojo, Dojo Vakfı tarafından geliştirilen ve pek çok açık kaynaklı projenin en temel taşı olan güçlü bir Javascript (JS) araç takımı. Coffescript (CS) ise benim gibi JS'nin iğrenç söz diziminden nefret edenlerin kolay anlaşılır JS yazmasını sağlayan minik bir derleyici.
CS'in kendisi de JS ile yazıldığından çalıştırabilmek için bir JS runtime aracına ihtiyaç var, Chrome'un JS runtime kütüphanesi olan Node.js kullanılabilir, zaten CS sitesindeki kurulum ve çalıştırma örnekleri bunun üzerinden verilmiş. (Kurulum Ubuntu türevlerinde basit, depoyu ekleyip paketi kurmak gerekiyor sadece, 2dk.)
Bugün biraz boş vakit bulup, bu iki harika araç ile bir Merhaba demek istedim, zamanım olursa sunucu tarafına en az bunlar kadar keyifli olan Tornado Web Server çalıştırarak küçük uygulamalar yapmayı düşünüyorum.
Aşağıdaki örnek için bir sunucuya ve Dojo'yu indirmenize gerek yok, dosyaları bir dizine alıp, CS dosyalarını derledikten sonra index.html'i tarayıcıda açmak yeterli. Derlemeyi şu komutla yaptım;
coffee --compile --bare *.coffee
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Örnek:Merhaba Dojo!</title>
<!-- Dojo'yu yükle -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" data-dojo-config="async: true"></script>
</head>
<body>
<h1 id="selam">Boş</h1>
<!-- Uygulamayı çalıştır -->
<script src="main.js"></script>
</body>
</html>
Buradaki data-dojo-config="async: true" değeri, Dojo 1.7'den itibaren kullanılan ve dojo modüllerinin hepsinin yüklenmesini önleyen bir sistemin kullanılmasını sağlıyor. Böylece modüller sadece ihtiyaç duyulduğunda yükleniyor ve uygulamanın ilk yüklenme performansı artıyor.
main.coffee
require { baseUrl : "/" }, [ "testModule" ], ( testModule ) ->
testModule.setText "selam"
HTML'den çağırdığımız işlev bu, { baseUrl : "/" } İle modüller için bir kök yolu belirtiyoruz, yoksa dojo'yu yüklediğimiz http://ajax.googleapis.com... altında arıyor modülümüzü, bu konuda dojoConfig = {} değeri ile ayrıntılı yol tanımlamaları ve alias işlemleri yapılabiliyor, sonraki örneklerde gerekli olur ama Merhaba demek için şimdilik bu kadarı yeterli.
Sonra bizim testModule'ü yükleyip bir işleve parametre olarak veriyoruz ve bu işlev içinde modülü kullanıyoruz.
testModule.coffee
define \ # Önce kullanılacak modüllerin listesi bir diziye yazılacak # İkinci parametre olan fonksiyona modüller parametre olarak geçirilmeli # "dojo/domReady!" Modüller yüklenene kadar bekletmeyi sağlıyor ["dojo/dom","dojo/domReady!"], (dom) -> setText : (id) -> dom.byId(id).innerHTML = "Merhaba Dojo"
CS, Python'daki gibi girintileri yorumluyor, yani girintili bloklar iç içe tanımlanmış işlevleri ifade ediyor, kodu okumayı kolaylaştırıyor. define Bloğu modülü tanımlıyor, main'de olduğu gibi modülleri tanımlayan bir dizi ve bunları kullanmak için bir işlev yazıyoruz, setText'de modüle ait bir işlev oluyor.
Dojo ( ve CoffeeScript ) ile basit bir panel oluşturma ve yerleşim örneği
Hiç yorum yok:
Yorum Gönder