Bu bölümde, bir çok önemli özelliği ile ön plana çıkan ve benzer kütüphanelere göre çok daha kabiliyetli olan ve kullanıcı arayüzü açısından oldukça başarılı bir javascript çatısı olan Ext JS den ve özelliklerinden bahsedeceğim.
1.Bölüm
Gerekli dosyalar
- Ext JS Kütüphanesi : Öncelikle http://www.sencha.com/products/js/download.php adresinden Ext JS kütüphanesinin en son sürümünü indirim. Ben bu yazıyı yazarken Ext JS nin indirilebilir en son sürümü 3.3.1 idi. Bu nedenle yazımızın devamında 3.3.1 diye bahsettiğimiz bölüm siz yeni bir sürüm ile çalışıyorsanız değişecektir.
- Web Sunucusu : Ext JS kütüphanesi, istemci tarafında çalışan javascript dosyalarından oluştuğu için html dosyalar ile herhangi bir web sunucusu olmadan da tarayıcılar tarafından çalıştırılabilir. Fakat biz çalışmamıza bir web sunucusu ile devam edeceğiz. Windows üzerinde çalışıyorsanız windows işletim sistemlerine Apache Web Sunucusu, MySQL veritabanı sunucusu ve PHP web programlama dili desteğini otomatik olarak kuran bir kaç paket bulunmaktadır. Bunlardan ikisini aşağıda belirttim. Bunlardan birini kullanarak web sunucunuzu yapılandırabilirsiniz.
- AppServNetwork -> http://www.appservnetwork.com
- WampServer -> http://www.wampserver.com
Kurulum
Web sunucunuzu kurduysanız web sunucusu kurulum sırasında belirttiğiniz adresin içine www klasörü oluşturmuştur. Bu klasörün içine örnek uygulamamız için myApp isimli bir klasör oluşturalım. Bu klasör içine indirdiğimiz Ext JS kütüphanesini kopyalayalım.
myApp klasörünün içine geliştireceğimiz uygulamalara ait dosyaları tutmak için application adında bir klasör daha oluşturalım.
Şimdi ext-3.3.1 klasörünün içindeki dosya ve klasörleri inceleyelim.
- adapter klasörü, prototype, jQuery, YUI and Ext JS gibi klasörlerin bulunduğu bir klasördür. Bu klasör ve içindekiler ileride daha detaylı incelenecektir.
- resources klasörü, içerisinde görseller, css dosyaları vs bulunur.
- ext-all.js dosyası, Ext JS nin bileşenlerinin bulunduğu javascript dosyasıdır.
Testing Ext JS Framework
Şimdi ilk html dosyamızı oluşturup ext kütüphanesini yükleyelim. Bunun için üç tane dosyanın <head></head> bloğunda çağrılması gerekir.
- ext-3.3.1/resources/css/ext-all.css
- ext-3.3.1/adapter/ext/ext-base.js
- ext-3.3.1/ext-all.js
Bun göre aşağıdaki html kodlarını sayfamızın <head></head> bloğuna yerleştirelim.
<link rel="stylesheet" type="text/css" href="../ext-3.3.1/resources/css/ext-all.css" /> <script type="text/javascript" src="../ext-3.3.1/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../ext-3.3.1/ext-all.js"></script>
Ext JS kütüphanesini test etmek için kütüphanemizin kullandığı onReady olayına bir dinleyici eklemek yeterlidir. onReady olayı tüm sistem yüklendikten sonra aktif olur. Örneğin, DOM kullanıma hazır hale geldiğinde kullanıcıya “Hoşgeldiniz.” diye bir mesaj verelim.
<script type=”text/javascript”>
Ext.onReady(function(){
alert(’Hoşgeldiniz.’);
});</script>
Buna göre, first.html olarak application klasörü içine oluşturduğumuz dosyanın içeriği aşağıdaki gibi olmalıdır.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Ext JS Library</title><link rel=”stylesheet” type=”text/css” href=”../ext-3.3.1/resources/css/ext-all.css” />
<script type=”text/javascript” src=”../ext-3.3.1/adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”../ext-3.3.1/ext-all.js”></script><script type=”text/javascript”>
Ext.onReady(function() {
alert(’Hosgeldiniz.’);
});
</script>
</head>
<body></body>
</html>
Bu dosyayı web tarayıcınız ile çalıştırdığınızda aşağıdaki gibi “Hoşgeldiniz.” mesajı verilecektir.
2.Bölüm
Bu bölümde yeni bir uygulama ile bir pencere oluşturalım. Pencere oluşturmak için
win = new Ext.Window({
title: ‘İlk Pencerem’, //pencerenin bağlığını belirtir.
width:500, //pencerenin genişliğini belirtir.
height:300, //pencerenin yüksekliğini belirtir.
minimizable: true,
maximizable: true,
closeAction:’hide’,
});
kodlarını kullanmamız gerekir. Burada önemli olan new Ext.Window komutu ile yeni bir pencere oluşturmaktır. Diğer seçenekler pencerenin özelliklerini düzenlemeye yarar.
Pencereyi oluşturmak pencereyi göstermek için yeterli değildir. Pencereyi göstermek için ayrıca win.show() fonksiyonunu çağırmamız gerekir.
Bu durumda yeni html sayfamız aşağıdaki gibi olacaktır.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Ext JS Library – İkinci Örnek</title><link rel=”stylesheet” type=”text/css” href=”../ext-3.3.1/resources/css/ext-all.css” />
<script type=”text/javascript” src=”../ext-3.3.1/adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”../ext-3.3.1/ext-all.js”></script><script type=”text/javascript”>
Ext.onReady(function() {
win = new Ext.Window({
title: ‘İlk Pencerem’, //pencerenin bağlığını gösterir
width:500,
height:300,
minimizable: true,
maximizable: true,
closeAction:’hide’,
});
win.show();
});
</script>
</head>
<body></body>
</html>
Bu sayfayı ben second.html olarak kaydedip çalıştıdığımda aşağıdaki gibi bir görüntü oluştu.
Örnekler
- Penceremize menü veya buton çubuğu eklemek istersek aşağıdaki kodu kullanabiliriz.
tbar: [{
text:'Yeni',
handler: function(){
Ext.Msg.alert('Bilgi', '"' + this.text + '"' + ' butonuna bastınız.');
}
},{
text: 'Sil',
disabled:true
}],
- Penceremize buton eklemek istersek aşağıdaki kodu kullanabiliriz.
buttons: [{
text:'Kaydet',
disabled:true
},{
text: 'Kapat',
handler: function(){
win.hide();
}
}],
- Penceremize sekme eklemek istersek aşağıdaki kodu kullanabiliriz.
items: new Ext.TabPanel({
renderTo: Ext.getBody(),
activeTab:0,
border:false,
items: [{
title: 'Birinci Sekme',
html: 'Birinci sekmenin içeriği burada görüntülenir.'
},{
title: 'İkinci Sekme',
html: 'İkinci sekmenin içeriği burada görüntülenecek. Bu bölüme istediğiniz bilgiyi ekleyebilirsiniz.'
}]
}),
- Bu eklemeleri birlikte de yapabiliriz.
cok tesekkurler
emeğinize sağlık . devamını bekleriz.
iyi çalışmalar
Makaleniniz yeni başlayanlari için çok iyi olmuş, ext.js ile ilgili yeni çalışmalarınızı merakla bekliyorum.
İyi çalışmalar.
Tesekkurler.Cok iyi .insAllah devami olur