Post on 12-Jan-2015
description
JEE bilgisi (HttpServlet) Temel Javascript, html ve css bilgisi JEE Eclipse Apache Tomcat 6 Firefox (Firebug ve WebDeveloper) Ext JS 4.0.7 kütüphane dosyaları
bootstrap.js ext-all.js resources/ docs/ examples/
Gereksinimler
Sınıf
function Bilet () {this.adet = 0;this.tip = null;this.getAdet = function (){
return this.adet;};this.toString = function (){
return "Adet: " + this.adet;};
}
Nesneye Yönelik Javascript
Nesne
var bilet = new Bilet();
ya da
var bilet = {adet: 0,‘tip’: null,getAdet : function (){
return this.adet;};toString : function (){
return "Adet: " + this.adet;
};}
var bilet = new Object();bilet.adet = 0;bilet[‘tip’] = null;Bilet.getAdet = function (){…};Bilet.toString = function (){…}
Nesneye Yönelik Javascript
Kalıtım (prototype)
Piyango.prototype = new Bilet();
Piyango.prototype.constructor = Bilet;
function Piyango (){
this.tip = 'PIYANGO';
this.toString = function (){
return "Adet: " + this.adet;
};
}
Bilete getTip adlı bir metod eklediğimizde Piyango’da da görünmesini istiyoruz.
Bilet.prototype.getTip = function (){
return this.tip; }
var piyango = new Piyango();piyango.getTip();
Kod örneğini görebiliriz (NY)
Nesneye Yönelik Javascript
‘super’ metodları çocuk sınıftan çağırmakPiyango.prototype.getTip = function (){
Bilet.prototype.getTip.call(this);
}
Funcation.call javascript’in sağladığı bir özelliktir. Eğer çalıştırılan metod parametre alıyorsa “this”’den sonra sırasıyla gönderilmelidir.
Kod örneğini görebiliriz (NY)
Nesneye Yönelik Javascript
• Javascript metodlarında override, overload yoktur. Bir bağlam içinde, aynı isimli (parametreler önemli değildir) birden fazla metod yazıldığında hata vermez.
function method1(p1, p2) {
//...geçersiz
}
function method1(abc) {
//...
}
• Tip kontrolü yoktur• Metod çağırırken parametre sayısı önemli değildir.
Çalışma zamanında önemlidir.
Nesneye Yönelik Javascript
• Ext JS 4 SDK • Ext JS 3 ile Ext JS 4 arasındaki farklar
– Sınıfların paketleri değiştirildi. Sınıflar paketlerde toplandı.
– Ext JS 4’te sınıf isimleri değiştirildi. Ext JS 3’ün sınıf isimleri 4’te korundu (alternateClassName).
• Ext JS 4 Yeni sınıf sistemi
Ext JS 4 Giriş
ext-all.js: Bu js dosyası bütün Framework kodlarının bulunduğu dosyadır.ext.js: Temel ext js kodlarının bulunduğu dosyadır.Bu dosyalar, gerçek ortama yüklenmesi gereken dosyalardır.
docs: Buradaki dosyaları yerel bir web sunucusuna yükleyebilirsiniz. Internet erişimi gerekmenden API’lere bakabilirsiniz.
jsbuilder: Bu dizindekileri kullanarak kodlarımızı sıkıştırabilir ve saklayabiliriz.
builds:ext-core.js: Ext JS’nin temel sınıflarının bulunduğu dosyadır.
Not: -debug dosyaları, sıkıştırılmamış dosyalardır. Test ve hata ayıklamak için kullanılabilirler.
Ext JS 4 SDK
ext.js ve ext-all.js arasındaki fark• ext.js sadece gerekli olan dosyaları yükler (src dizininin
sunucuda olması gerekir). ext-all.js’de bütün kütüphane kodları mevcuttur. Gerçek ortam için ext-all.js kullanılabilir.
bootstrap.js• Bu dosya ext-all.js veya ext-all-debug.js dosyasının
yüklenmesini kodların atıldığı sunucunun özelliklerine göre ayarlamaktadır. ext-all-debug.js aşağıdaki koşullara göre yüklenecektir.– Sunucu ismi localhost ise– Sunucu ismi IP(v4) adresiyse.– Protokol file ise
Diğer durumlarda ext-all.js yüklenecektir.
Ext JS 4 SDK
• Çalışma– Dokümana bir tane düğme (Ext.button.Button) ekleyelim.– Düğmeye bastığımızda “Merhaba Dünya” mesajı verelim. – Mesajı ilk önce alert’le daha sonra Ext.MessageBox’ı kullanarak verelim.
Sayfaya aşağıdakileri ekleyelim
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script src="../extjs/bootstrap.js"></script>
Ext.onReady(function(){Ext.create(‘Ext.button.Button’, {
handler: function (){alert (‘MERHABA’);}}).render(document.body);
});
Merhaba Dünya
Bileşen Modeli
• Ext JS Bileşen modeli (Component Model) bileşenlerin ortak işlemlerini yöneten merkezi model olarak adlandırılabilir.
• Bileşenlerde bir dizi işlem ortaktır. Bu aynı zamanda bir bileşenin yaşam döngüsüdür.
– İlklendirme (initialize)
– Ekrana çizilmesi (render)
– Kaldırılması (destroy)
• Bütün bileşenler Ext.Component sınıfından türemiştir.
Bileşen Modeli
Ext.ComponentDatePicker
Button
Container
Panel
Window
Grid
Bütün bileşenler modelin zorladığı kurallar uymak zorundadır.
Örneğin her bileşeninitComponent metodunu gerçekleştirmek zordundadır.
Bileşen ModeliYaratma
Bileşen modeli iki türlü nesne yaratmayı sağlar
•Doğrudan yaratma
var metin = Ext.create(‘Ext.form.field.Text’, {fieldLabel: ‘Ad’
})
•Sonradan yaratma [Deferred (Lazy) initialization] (performansı arttırır)
var metin = { xtype: ‘textfield’}Ext.create(‘Ext.form.Panel’, { items: [metin]});
Ext.create(‘Ext.form.Panel’, { items: [{ xtype: ‘textfield’ }]});
Bileşen ModeliYaşam Döngüsü
İlklendirmeİlklendirme
Ekrana çizmeEkrana çizme KaldırmaKaldırma
• Ayarlar atanır• ComponentMgr kayıt• Olaylar tanımlanır• Çizilmeden önceki işlemler
• beforeRender, onRender, afterRender olayları tetiklenir
• Bileşende alt bileşenler (items) varsa onlar için birer div tanımlanır
Not: En çok cpu burada harcanır
• beforeDestroy, onDestry, afterDestroy olayları tetiklenir
• ComponentMgr silme• destroy olayı tetiklenir• Dinleyiciler silinir
Extjs 3’te Ext.namespace(‘MB’);MB.Window = Ext.extend(Ext.Window, { title: ‘Merkez Bankası Pencere’, initComponent: function (){ //ilklendirmeleri yap MB.Window.superclass.initComponent. apply(this, arguments); }});new MB.Window().show();
Extjs 4’teMB.Window = Ext.define(Ext.Window, { //namespace (MB.Window) otomatik //tanımlanıyor extend: ‘Ext.Window’, initComponent: function (){ //ilklendirmeleri yap this.callParent(arguments); }});//new MB.Window().show() //olarak da kullanılabilir.Ext.create(‘MB.Window’).show();
Extjs 4’te Ext.create ve Ext.define nesne ve sınıf yaratmaya yarayan metotlardır.Ext.define(‘MB.Sinif', {
//sınıfın metotları ve özellikleri});
Mixins (Daha sonra ayrıntılı olarak işlenecek)Dinamik sınıf yükleme (Daha sonra ayrıntılı olarak işlenecek)Statikler (Daha sonra ayrıntılı olarak işlenecek)
Ext JS 4 Yeni Sınıf Sistemi
Ext.ElementBütün görsel bileşenlerin Ext.Element tipinde bir öğesi bulunur. Dokümanın DOM yapısındaki yerini gösterir.
Ext.CompositeElementExt.Element’lerin dizisi olarak kabul edebiliriz. Ext.Element’in bütün metodları tanımlı. Çağrıldığında dizideki bütün elemanlara bu metod uygulanıyor.
Ext.DomHelperHtml node’ları oluşturmayı, node’ları değiştirmeyi sağlar.
Ext.DomQueryAdından da anlaşılacağı üzere DOM içinde CSS selector kullanılarak, bileşenleri arar.
Kod örneğini görebiliriz (TS)
Temel Sınıflar
Ext JS 4’te uygulama yazma metodunda yeni bir yaklaşım.
• Yeni MVC uygulama mimarisi• Ext.ComponentQuery ve
Ext.container.Container• Extjs 3’e göre uygulama • Extjs 3 uygulamasının MVC’ye göre yazılması• MVC yazarken gözetilmesi gerekenler• Gerçek ortam için uygulamanın hazırlanması
Ext JS 4MVC Uygulama Mimarisi
MVC nasıl çalışıyor?• Bir MVC uygulaması tanımlanırken,
uygulamanın adı ve yolu belirtilir. Belirtilen yola göre gerekli olan sınıflar ve bu sınıflara ait dosyalar namespace’e göre dinamik olarak yüklenir.
• MVC aşağıdaki bileşenlerden oluşur– Uygulama (Application)– Kontrol Sınıfları (Controller)– Görsel bileşenler (Views)– Veri Kaynakları (Stores)– Modeller (Models)
Yeni MVC Uygulama Mimarisi
MVC yazarken gözetilmesi gerekenler
init metodu: Controller’ın view’lerle iletişimini bu metotda tanımlayabiliriz.
control metodu: Burada controller, Ext.ComponentQuery’yi kullanarak sayfada bulunan bileşenlere erişebiliyor. Örneğin bir düğmenin click olayına. Örnekte görülebilir.NOT: Bu yöntem, controller ilk çağrılışta bileşenlerin
sorgulanacağı için ilk başta ek bir işlem maliyeti getirir.
Not: Bu yazış şeklini değiştirebiliriz. En iyi uygulama pratiklerinde görülebilir.
MVC Mimari Özeti
Controller [0..n] controllers
Views [0..n] views
Stores [0..n] stores
Models [0..n] models
Application Ext.app.Application
requires
Dinamik yükleme özelliği Uygulama, (Appliaction) controller’ları ve controller’larda tanımlanan görünüm, veri depoları ve modelleri yüklemekle yükümlüdür. constructor metodunda bu işlemler gerçekleşir.
Ext.require ile bütün requires sınıfları yüklenir.
Not: Kullanılmayacak sınıfların dosyaları yüklenecektir. Bu performansı düşüren bir durumdur.
Örnek (MVC)
Olay Yönetimi
• Javascript temel olaylarına örnek
Bir düğmenin üstüne tıklanması, farenin düğmenin üstüne gelmesi ve farenin düğmenin sınırlarından çıkması hep olaydır.
<input type="button" value="örnek1" onclick="alert('düğmeye tıklandı')">
<input type="button" value="örnek2" onmouseover="document.getElementById('sonuc').innerHTML += 'üstüne
geldi'">
Örnek (OY1)
Extjs olay tabanlı uygulama geliştirme yöntemini çok yoğun kullanan bir kütüphanedir.
Görsel bileşenlerin değişimlerinin ve Loader, Store vb. gibi asenkron işlemleri kullanan sınıfların değişimlerinin yönetilmesi olay tabanlı yöntemin kullanılmasıyla gerçekleşmektedir.
Ext JS Ext.util.Observable sınıfı yardımıyla olay yönetimlerini gerçekleştirmektedir.
Ext JS sınıfları, tanımlanan durumlarda olay üretirler. Bu üretilen olayın sonucunda ne yapmak istiyorsanız, olayı üreten nesneye bir dinleyici (Listener) eklemeniz gerekir. addListener ya da on
Eklenen dinleyici silmek istediğimizde removeListener ya da un
Button’da üretilen olayları görelim
Olay Yönetimi
• Örneğin; store yüklendiği zaman alert üretelim.
function doOnLoad(st, recs, succ, op, eOpts ) { alert(‘Store yüklendi. Kayıt sayısı: ’ + recs.length);};
var store = Ext.create(‘Ext.data.Store’, {fields: [‘adi’, ‘soyadi’],proxy: {
url: ‘Servlet?c=kisiYukle’},listeners: { load: doOnLoad }
});
//ya dastore.addListener(‘load’,doOnLoad);
Olay Yönetimi
Olay Yönetimi (Örnek) Kişi
Bir pencere içindeki tablonun çift kliğine bir dinleyici ekleyeceğiz.
Örnek kod aşağıda gösterilmektedir.
Kisi Model
Ext.define ('MB.data.model.Kisi', {
extend: 'Ext.data.Model',
fields: ['ad', 'soyad'],
getAdSoyad: function (){
return Ext.String.format('{0} {1}',
this.data.ad,
this.data.soyad);
}
});
Olay Yönetimi (Örnek) Grid
Kisi GridExt.define ('MB.grid.Kisi', {
extend: 'Ext.grid.Panel',
alias: 'widget.kisigrid',
initComponent: function () {
this.columns = [{text:'Ad', dataIndex: 'ad'},
{text:'Soyad', dataIndex: 'soyad'}];
this.store = {
model: 'MB.data.model.Kisi',
data: [{ad:'Ayşe', soyad: 'Soyad1'},
{ad:'Ali', soyad: 'Soyad2'}]
};
this.callParent(arguments);
}
});
Kisi Grid Window
Ext.define ('MB.window.Kisi', {extend: 'Ext.window.Window',initComponent: function (){
this.addEvents['kisisecildi'];this.items = [{
xtype: 'kisigrid', listeners: {
itemdblclick: function(view, r) { view.up('window').fireEvent('kisisecildi', r);
} }}];//diğer ilklendirmelerthis.callParent(arguments);
}});
Olay YönetimiWindow
Olay YönetimiAtama
var win = Ext.create('MB.window.Kisi', {width: 300,height: 100,listeners: {
kisisecildi: function (r){alert(r.getAdSoyad());
}}
});win.show();
Olay Yönetimi Dinleyicileri Ekleme Silme
Bir olay için birden fazla dinleyici ekleyebiliriz– bilesen.addListener(‘olayismi’, metod1)– bilesen.addListener(‘olayismi’, metod2)
Eklenen dinleyicileri bileşenden kaldırmak için– bilesen.removeListener(‘olayismi’, metod1)– bilesen.removeListener(‘olayismi’, metod2)
Bir sonraki sayfadaki örneği inceleyelim.
Olay Yönetimi
var win = Ext.create('MB.window.Kisi', {width: 400,height: 200,listeners: {
kisisecildi: doKisiSecildi1},buttons: [{
text: 'Dinleyici Sil',handler: function (){
//kısa hali win.unwin.removeListener('kisisecildi', doKisiSecildi1);
}}, {
text: 'Dinleyici Ekle',handler: function (){
//kısa hali win.onwin.addListener('kisisecildi', doKisiSecildi1);
}}, {
text: 'Başka Dinleyici Ekle',handler: function (){
win.addListener('kisisecildi', doKisiSecildi2);}
}]});
Kod örneğini görebiliriz (OY2)
Veri Paketi ve Doğrulama
• Model (pojo)
• Modelde ilişkiler (1-n, n-1)(Associations)
• Doğrulamalar
• Store
• Proxy
• Store’lar üzerinde işlemler
Ext.data paketi.
Veri Paketi ve Doğrulama (Model)
• Ext.data.Model sınıfı’nın– Alanları (Ext.data.Field)
• Tip• Doğrulama (Validation)
– İlişkileri (HasMany, BelongsTo)
– Metodları– Proxy aracılığıyla verileri
yükleme ve kaydetme (Ext.data.Proxy)
Özellikleri vardır.
Ext.define('MB.data.model.Kisi', { extend: 'Ext.data.Model', fields: [ {name: 'ad'},//auto type,string'e çevrilecektir {name: 'soyad', type: 'string'}, {name: 'yas', type: 'int'}, {name: 'kayitliMi', type: 'boolean'}, {name: 'dogumTarihi', type: 'date', dateFormat: 'd/m/Y'}, {name: 'okul', type: Ext.data.Types.STRING}, {name: 'cinsiyet', type: 'string'} ] });
var kisi = Ext.create('MB.data.model.Kisi', {ad: 'Fatma',soyad: 'Baydur',yas: 25,dogumTarihi: '16/03/1987'okul: 'Hacettepe',cinsiyet: 'K'
});
Not: fields’a eklenen her config{} Ext.data.Field nesnesine dönüştürülür.
Not: type için Ext.data.Types sınıfında sabitler tanımlanmıştır.
Ext.data.Types.INT, Ext.data.Types.DATE, …
Veri Paketi ve Doğrulama (Model Doğrulama)
• Ext.data.Model’i doğrulamak için validations özelliğini model tanımına eklememiz gerekir.
• 5 tip doğrulama tipi vardır– presence– length– format– inclusion– exclusion
validations: [{type: 'presence', field: 'ad'},{type: 'presence', field: 'soyad'},{type: 'length', field: 'yas', min: 5, max: 20},{type: 'inclusion', field: 'cinsiyet', list: ['K','E']}
]//…var kisi = Ext.create('MB.data.model.Kisi‘, {..});var hatalar = kisi.validate(); //Ext.data.Errorshatalar.isValid(); //boolean hatalar.items //{{field: ‘ad’, message: ‘must be present’},{..},..}
Örnek (VPD1) ***Çalışma form düzenle, hataları göster
Veri Paketi Ve DoğrulamaVerinin Yüklenmesi, Kaydedilmesi
• Model proxy tanımlayarak verinin yüklenmesini ve kaydedilmesini sağlayabilir.
Örnek (VPD2) ***Çalışma java servlet düzenle
Ext.define('MB.data.model.Kisi', { proxy: { type: 'rest', url: '../MBServletRest', //format: 'json', // MBServletServlet.json'a veriler json string şeklinde post edilecek //format girmezsek /MBServletRest’e gönderilir istekler reader: { type: 'json' }}
var kisi = Ext.create('MB.data.model.Kisi', ..);kisi.save();MB.data.model.Kisi.load(1101); kisi.destroy();
Proxy
• İki tip proxy var.– Client
• LocalStorageProxy• SessionStorageProxy• MemoryProxy
– Server• Ajax Rest• JsonP• Direct
• Proxy hem Model için hem de Store için tanımlanabilir. Model’e niçin proxy tanımladığımızı önce görmüştük.
• Store için, store’a yüklenecek modellerin nereden nasıl yükleneceğini proxy ile belirleyebiliriz.
Not: Önceki örneklerde store tanımlamıştık fakat veriyi statik nesne dizilerinden almıştık.
Sayfa Düzenleri
• Kütüphanenin en güçlü tarafı sayfa düzenleri– Esnek– Hızlı
• Esneklikten kasıt istediğimiz gibi bileşenleri yerleştirebilmemiz– Buna yönelik Component
Layouts eklenmiştir Ext JS 4’e.
• Ext JS 4’te yeni gelen sayfa düzenleri– DockLayout– ToolbarLayout– FieldLayout
Sayfa Düzenleri
• Ext JS 4’e ComponentLayout ve ContainerLayout eklenmiştir. Form Layout Ext JS 4’te yok onun yerine varsayılan anchor layout.
• Ext JS 4’te iki farklı sayfa düzeni olarak ayrılmıştır sayfa düzenleri.– Container Layout
• Border• Box (HBox, VBox, Accordion)• Fit• …
– Component Layout• Dock• Toolbar• Field• TriggerField
Container Sayfa Düzenleri Örnekler
Sık kullanılan sayfa düzenleri
• Hbox (flex)• Vbox (flex, width)• Border (center, north, south, east, west)
– region• Table (colspan, rowspan)
– Columns• Card Layout (sekmeli, tek görünüm)
– activeItem
Tablo, Ağaç ve Form
• En çok kullanılan bileşenler tablo, ağaç ve formlardır.– Tablo Ext.grid.Panel (MVC)– Ağaç Ext.tree.Panel (MVC)– Form Ext.form.Panel
Ext.panel.Panel
Ext.form.Panel
Ext.panel.Table
Ext.grid.Panel
Ext.tree.Panel
Form
• Form paneli – Panel, kendisine eklenen
bileşenleri form şeklide düzenleyebilir.
– Post edilebilir html form (Ext.form.Basic) özelliğini sağlar
– Herhangi bir web kaynağına formu post edebiliriz. Bu asenkron bir işlemdir.
form.getForm().submit({url: ‘Servlet?cmd=kaydet’
});
Ext.create('Ext.form.Panel', {title: 'Kişi',width: 300,frame: true,items: [{
xtype: 'textfield',fieldLabel: 'Ad',name: 'ad'
},{xtype: 'textfield',fieldLabel: 'Soyad',name: 'soyad'
}],buttons: [{
text: 'Kaydet'}]
});
Form
• Forma aşağıdaki tiplerde bileşen ekleyebiliriz
•form Ext.form.Panel•checkbox Ext.form.field.Checkbox•combo Ext.form.field.ComboBox•datefield Ext.form.field.Date•displayfield Ext.form.field.Display•field Ext.form.field.Base•fieldset Ext.form.FieldSet•hidden Ext.form.field.Hidden•htmleditor Ext.form.field.HtmlEditor•label Ext.form.Label•numberfield Ext.form.field.Number•radio Ext.form.field.Radio•radiogroup Ext.form.RadioGroup•textarea Ext.form.field.TextArea•textfield Ext.form.field.Text•timefield Ext.form.field.Time•trigger Ext.form.field.Trigger
Bütün bileşen tiplerini görebiliriz
Form Doğrulama (Validation)
• allowBlank• minLength• maxLength• regex• vtype (tanımlanmış
regex)
{xtype: 'textfield',fieldLabel: 'Ad',name: 'ad',allowBlank: false
}
Form Gönderme ve Yükleme (submit, load)
• getForm().submit• getForm().load• getForm().loadRecord
var f = this.up('form');f.getForm().submit({
url: 'Servlet?cmd=kaydet'})
f.getForm().load({url: 'Servlet?cmd=getir'
})
Not: load formun anlayacağı yapıda bir json string dönmeliyiz.
var m = Ext.create('TAF.KisiModel',{ad: 'Merkez',soyad: 'Bankası'
});f.getForm().loadRecord(m);
Ext.define ('TAF.KisiModel',{extend: 'Ext.data.Model',fields: ['ad', 'soyad']
});
Tablo
• Grid paneli – Tablo şeklinde gösterilen verileri ele
alan paneldir.– Plugin ve Feature ile tabloya birçok
özellik ekleyebiliriz.– Store ve View’i ayrılmış şekildedir.
Bu panele de MVC pattern’iuygulanır.
• store• view
– store ve columns grid’in en önemli iki parçasıdır.
Store ve dolayısiyle Model tablonun verisini oluşturan elemandır. Store’suz bir tablo (grid) yaratamayız.
Ext.create('Ext.grid.Panel', { title: 'Kişi Listesi', width: 300, columns: [ {
text:'Ad', dataIndex: 'ad‘
}, {
text:'Soyad', dataIndex: 'soyad‘ } ], store: { model: 'MB.data.model.Kisi', data: [{ad:'Aysel', soyad: 'Demir'}, {ad:'Fuat', soyad: 'Bakır'}, {ad:'Suna', soyad: 'Akın'}]
}});
Tablo kolonları (columns)• columns tabloda hangi kolonları göstereceğimizi belirlediğimiz grid
alanıdır. Kolonlar Ext.grid.Column paketinde toplanmıştır.
columns: {
text:'Ad',
dataIndex: 'ad‘
},
{
text:'Soyad',
dataIndex: 'soyad‘
},
{
text: ‘Yaş’,
xtype: ‘numbercolumn’
dataIndex: ‘yas’
}
Tablo Kolonları
Örnekte 3 kolon görünmektedir. Kolonlara herhangi bir tip verilmediği durumda varsayılan kolon düşünülür, veri string olarak hücreye yazılır.
xtype’ı numbercolumn olan kolon sayısal verileri göstermek için kullanılır, yaş, para vb. numbercolumn gibi boolean ve date tipinde kolonlar da vardır. Bunların dışında kolon tipi olarak
‘templatecolumn’: Ext.grid.column.Template
‘actioncolumn’: Ext.grid.column.Action
‘rownumberer’: Ext.grid.RowNumberer
Tablo’nun “config” özelliği olarak selModel tanımlanabilir. selModel CheckboxSelectionModel tanımlandığında tabloda ilk kolon olarak seçme kutusu görünecektir. Bu tablo verisi olarak işlem görmez.
Not: selModel olarak Ext.selection.Model’den türeyen bir sınıf tanımlanabilir. API’de açıklanmaktadır.
Tablo kolonlarıönemli “config” özellikleri
• renderer
Tablodaki alanı, farklı göstermek istiyorsak renderer ile araya girerek görünen veriyi değiştirebiliriz
Örnekteki “Kayıtlı Mı” alanına bakılabilir. ([true, false]->[evet, hayır])• format (datecolumn için)
Tarih tipindeki alanları genelde veri tabanlarında yyyymmdd şeklinde tutarız. Bu tip alanları gösterirken formatlamamız gerekir. renderer’a benzer, ama datecolumn’a özgü bir “config” özelliği olarak eklenmiştir.
Örnekteki “Doğum Tarihi” alanına bakılabilir.• flex
Tablodaki kolonların genişliklerini oransal olarak ayarlar.
Kod örneğini görebiliriz (TAF3)
Tablo Features ve Plungins
Tablo feature’ı bize tablo’ya plugin yazmamız için gerekli arayüzü sağlar. Bunun yanıdan Ext.grid.feature paketine 7 tane sınıf bulunmaktadır.
– AbstractSummary– Grouping– GroupingSummary– Summary– Chunking– Feature– RowBody
Bir featture aşağıdaki gibi tanımlanabilir
Ext.create(‘Ext.grid.Panel’, { features: [{ groupHeaderTpl: 'Okul {okul}', ftype: 'grouping’ }], //diger özellikler…})
Tablo Features (Grouping)
• Tablodaki kayıtları gruplamak için kullanılır
– Tablo’nun store’una groupField özelliğini tanıtmamız gerekir. Modeldeki bir alan olmalıdır.
– Grid’e feature ekleyebiliriz
store: {groupField: 'okul', model:
'MB.data.model.Kisi',data: [
{okul: ‘..’, ..}, {okul: ‘..’, ..}]}
features: [{groupHeaderTpl:
'Okul {okul} Kişi Sayısı: {rows.length}',
ftype: 'grouping’}]
Not: {[values.rows.length > 10 ? “bold" : ""]}
Kod örneğini görebiliriz (TAF4)
Tablo Features(GroupingSummary)
• Tablo’yu gruplamanın yanında grup özetini grubun sonunda göstermemizi sağlar.
• Bir önceki örnekte okula göre gruplamıştık. Ek olarak grup içindeki kişilerin yaş ortalamasını grubun özetinde gösterelim.
{ text: 'Yaş', dataIndex: 'yas’, xtype: 'numbercolumn’, flex: 1, summaryType: 'average’, summaryRenderer: function (value){ return '<font color="red">' + value + '</font>'; }}
features: [{ groupHeaderTpl: 'Okul {okul} Kişi Sayısı: {rows.length}', ftype: 'groupingsummary’}]
Kod örneğini görebiliriz (TAF5)
Tablo Features (RowBody)
• Her satırın altına bir bölme oluşturur. İstediğimiz bilgiyi yazabiliriz.
{ ftype: 'rowbody', //Ext.grid.feature.FeatureView.getAdditionalData getAdditionalData: function (data, index, record, o) { return { rowBody: '<div style="color: green; padding: 5px;">' + record + '</div>’ } }}
Tablo Plugins CellEditing ve RowEditing
• Tablo üzerinde veri değiştirmemizi sağlarlar.
– CellEditing
– RowEditing
• Her ikisi için de değişebilir kolonlar için editor tanımlamamız gerekir.
{text: 'Doğum Tarihi',dataIndex: 'dogumTarihi',xtype: 'datecolumn',format: 'd/m/Y',editor: {
xtype: 'datefield'}
}
Ext.create ('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1})
Ext.create ('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1})
Kod örneğini görebiliriz (TAF6)
Ağaç
• Ağaç da Grid gibi Ext.panel.Table’dan türemektedir.• store zorunludur (Ext.data.TreeStore)
Ext.create('Ext.tree.Panel', { title: ’Okul/Öğrenciler', width: 200, store: Ext.creat('Ext.data.TreeStore', { root: { expanded: true, children: [{ text: ‘..’, children: [{ text: ‘..’ leaf: true }]}
Node özelliklerini görelim NodeInterface //TODO link?
Kod örneğini görebiliriz (TAF7)
Ağaç Seçme Kutulu (checkbox)
• Checkbox olan bir ağaç yapabilmek için ağacı doldurduğumuz veri’ye checked (boolean) alanını eklememiz yeterli olacaktır.
• Bir önceki örnekteki ağacın store’unda aşağıdaki değişikliği yaparsak
{text : "Papatya",leaf : true,checked: true
}
Ağaç Feature Drag and Drop
• Sürükle bırak özelliği ile node’ların yerlerini değiştirebilirsiniz. Bunun için Ağacın viewConfig özelliğine plugins tanımlamak gerekecektir (tablo’da da bu şekilde).
viewConfig: {plugins: [{ ptype: 'treeviewdragdrop'}]
}
Kod örneğini görebiliriz (TAF7)
Ağaç Tablo (TreeGrid)
• Tablo şeklinde ağaç gibi açılıp kapanan bileşen. Bunun için Ext.tree.Panel yaratırken Grid’deki gibi columns özelliği girmemiz gerekiyor. Sadece ilk kolonun xtype’ı ‘treecolumn’ olmalı.
Kod örneğini görebiliriz (TAF8)
Tablo ve Ağaç’ta Diğer Özellikler
• Sıralama (Sorting)– Lokal sıralama– Remote sıralama
• Sayfa sayfa gösterme (Paging)– remote store tanımlama
• Tablo’da kolonların yerinin değiştirilmesi ve görünür/görünmez yapılması
*** Uygulama
Faydalı Fonksiyonlar
Ext sınıfı içindeki metodlar• onReady• apply• applyIf• isEmpty• isNumeric• isNumber• widget (Ext.create(‘widget.bilesen’))
Ext.JSON içindeki metodlar• decode• encode
Ext.DomHelper içindeki metodlar
• insertHtml
• Ext.Ajax.request– Ext.Ajax
(event)
requestexception(conn, response, options, eOpts)
Bunun örneği En iyi uygulama pratiklerinde.
Faydalı Fonksiyonlar
Ext.Array• merge
Ext.Date• format• parse
Ext.Loader• setConfig• require• syncRequire
Ext.String• format
Faydalı Fonksiyonlar
Sınıf Sistemi
• Sınıf tanımlama • Create, Extend• Bileşen genişletme• Ext Core• Sınıf yükleme (Class Loading)• mixins• statics• config
• TanımlamaExt.define('Talep', {
adet: 0,
talepTipi: 'P',
constructor: function (config){
console.log('Talep constructor');
this.callParent(config);
}
});
Ext.define’la tanımlanan her sınıf Ext.Base’den türemektedir.
Sınıf Sistemi Sınıf Tanımla
• Yaratma
var talep = Ext.create('Talep',
{
adet: 10
});
• Genişletme
Ext.define('PiyangoTalep', {
extend: 'Talep',
constructor: function (config){
this.callParent(arguments);
this.tip = 'P';
}
});
Sınıf Sistemi Yaratma ve Genişletme
• Bileşen genişletme de herhangi bir Ext JS bileşeninin (Ext.form.field.Text )genişletilmesiyle olmaktadır.
• Aşağıdaki kod, metin kutusuna kırmızı renkle yazmamızı sağlar.
<script src="ss.js"></script>
Ext.define ('YeniMetinKutusu', {extend:
'Ext.form.field.Text',alias: 'widget.yenimetin’,initComponent: function (){
this.callParent();this.fieldCls =
'onemli’;}
});
Ext.create('YeniMetinKutusu')Ext.widget('yenimetin')new YeniMetinKutusu()
Sınıf Sistemi Bileşen Genişletme
• Javascript’te sınıftan nesne yaratmak için sınıfın bulunduğu js dosyası dokümanda yüklenmiş olması gerekir.
• Bunun için js dosyasını <script src=“”> olarak belirtebiliriz.
• Büyük uygulamalarda birçok dosya olacağı için bu işlem performansı düşürür ve karmaşıklığı arttırır.
• Bunun için Ext JS Loader ve Ext.require ile bu işlemi kontrollü şekilde ve kod’la bu işlemi yapmamızı sağlar.
Sınıf Sistemi Sınıf Yükleme
• Bir önceki örneğe bakarsak– ss.js dosyası kullanılan bloktan önce yüklenmiştir– ss.js’yi yüklemediğimizi düşünelim
new YeniMetinKutusu()
YeniMetinKutusu is not defined hatası alınır
Ext.create('YeniMetinKutusu')
Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: YeniMetinKutusu
Ext.Loader.setConfig({
enabled: true
});
Ext.require('YeniMetinKutusu', function() { //YeniMetinKutusu.js
var metinKutusu = new YeniMetinKutusu();
metinKutusu.render(document.body);
});
Örneği Firefox debugger’ı kullarak görebiliriz.
Sınıf Sistemi Sınıf Yükleme
• mixins (çoklu kalıtım)
Ext.define(’MB.mixins.Gunluk', {
yaz: function() {
console.log(’...');
}
});• statics Sınıflara static metot tanımlar
statics: {
PI: 3.14,
ortalama: function (dizi){
//…
}
}• config
– set– get– reset– Apply (set ile çalışır, kendi kodunuzu yazabilirsiniz)
mixins: { yaz: ’MB.mixins.Gunluk'}
Sınıf Sistemi mixins, statics, config
SürükleSürükle
Sürüklenebilir mi?
Sürüklenebilir mi?
Hedef geçerli mi?
Hedef geçerli mi?
Evet
GösterGöster
Evet
BırakBırak
Bırakma gerçerli mi?
Bırakma gerçerli mi?
Bırakmayı
sonlandır
Bırakmayı
sonlandır
Evet
Evet
Eski yerine gönder
Eski yerine gönder
Hayır
Sürükle Bırak (Drag & Drop)
• Ext JS’de tanımlanmış DD sınıfları (plugin).– treeviewdragdrop (tablo, ağaç, form bölümü)– gridviewdragdrop
Tanımlanan iki plugin için API’de kullanımlarına bakalım.
• Kendi sürükle bırak gerçekleştirimini yapabiliriz. Bunun için sürükleyeceğimiz alanı ve bırakılacak alanları tanımlamalıyız.
Ext.dd.DropTarget
Ext.dd.DragTarget• Ext.Component.draggable özelliği Ext.Component’dan türeyen her bileşene
sürüklenme özelliği vermemizi sağlar.
{draggable: true}
Kod örneğini görebiliriz (SB1) draggable kullanımı
Sürükle Bırak (Drag & Drop)
• Bileşen yapınızın oluşturulması– Temel sınıfların formpanel, gridpanel, treepanel vb. sınıfların projeye
göre veya kurum/şirket yapısına göre genişletilmesi• MVC örüntüsünde controls yerine controller’ın mixins ile
görüntülere (views) eklenmesi• Modeller’in (örn: java pojo’ları) extjs model sınıfılarına
eklemlenmesi. (Özelliklerinin fields dizisi olarak)• Editable Grid Panel’in post edilmesi için faydalı metodlar
(toJsonString)• Validation özelliğinin java annotation’larıyla istemci tarafına
getirilmesi.• Ext.Ajax sınıfının olaylarına dinleyici atanması.• Kendi Store sınıfımızın yazılması
En İyi UygulamaPratikleri
• View’lere controller eklenmesiBir mixin tanımlanıp ilgili bileşene eklenebilir. Böylelikle view ’lerin içinden controller metodlarına doğrudan erişebilirsiniz. Bu controls yazmanın başka bir şekli olarak görülebilir.
Ext.define(‘MB.mixins.Controller', {cont: null, //Stringapp: null, //Ext.app.ApplicationgetCont : function() {
if (this.app && this.contName && Ext.getClassName(this.app) === 'Ext.app.Application') {
return this.app.getController(this.cont);} else {
alert(“controller dönülemedi. bileşenin mixins’lerini kontrol ediniz”);}
}});
Ext.define(‘MB.bil.GridPanel', {extend: 'Ext.grid.Panel',alias: “mbgridpanel",width: '100%',anchor: '100%',mixins: {
controller: ‘MB.mixins.Controller'},initComponent: function (){
//kod}
});
• xxxx
En İyi UygulamaPratikleri
Ext.Ajax sınıfının olaylarına dinleyici atanması.
Ext.Ajax.on('requestexception', function(conn, response, options) {
switch (response.status) {case 401: //alert zaman aşımı break;case 0:
//alert İstek zaman aşımına uğradı. break;
case 910 /*KOD_KULLINICI_BULUNAMADI*/: //alert MSG_WARN_OTURUM_DOLDU break; default:
alert (response.responseText); break;}});
En İyi UygulamaPratikleri
Kendi Store Sınıfımızın Yazılması
Ext.define(‘MB.bil.Store', {extend: 'Ext.data.Store',
constructor: function(config) { config = config || {}; this.callParent([config]); this.proxy.actionMethods = Ext.apply(this.proxy.actionMethods, {
read : 'POST'});
if (!config.listeners) { this.addListener('load', function (store, records, successful, operation, eOpts ){ if (!successful) { //hata mesajı ver } });
this.addListener('beforeload', function (store, operation, eOpts){return store.checkForLoad();
}); }},
/** * true veya false döner bu metodu override etmeniz gerekir işlevi olması için için beforeload'dan önce çalışır * Örneğin return !Ext.isEmpty(this.proxy.extraParams.xxxx); gibi */checkForLoad: function (){ return true;},
/** * get all records * @return Model Array */getAll: function (){
return this.getRange(0, this.getCount() - 1);},
getErrorMsg: function (){return (this.proxy.reader.jsonData && this.proxy.reader.jsonData.msg) ? this.proxy.reader.jsonData.msg :
"";}
});
Örnek MVCUygulaması
Konu: Milli Piyango İdaresi bünyesindeki şubelerin bilet taleplerinin gerçekleştirilmesi.
İşlevsel Gereksinimler
**Şubeler çekilecek piyango ve hemen kazan biletleri için merkezden bilet talebinde bulunurlar. Taleplerini aşağıdaki bilgilere göre kaydederler.•Piyango için
– Talep TarihiString (YYYYMMDD)– Çekiliş Tarihi: String (YYYYMMDD)– Adet: Integer (en az 100, en çok 1000 olabilir)– Bilet Serisi (Tam: [T], Yarım [Y, U], Çeyrek [R, H, N, K]): char
•Hemen Kazan için– Talep TarihiString (YYYYMMDD)– Çekiliş Tarihi: String (YYYYMMDD)– Adet: Integer (en az 10, en çok 1000 olabilir)– Bilet Serisi (A, B): char
• Merkez bu talepleri göz önüne alarak istekte bulunan şubelere bilet tahsis eder.
Talepleri aşağıdaki kriterlere göre listeler– Talep Tarih Aralığı– Bilet Tipi (Piyango, Hemen Kazan)– Talebin karşılanıp karşılanmadığı– Şube
• Listelenen talepler üzerinde talebi karşılayarak talebin durumunu değiştirir.– Şubenin talep ettiği adet sayısını azaltabilir.
• Liste üzerinde sayfa yapısının olması gerekir.• Görünen kayıtlar üzerinde bilet tipine göre gruplama ve grubun altbilgisinde toplam adet sayısının
görünmesi gerekir.• Şubeler taleplerini, talepler onaylanıp tahsis edilene kadar, güncelleyebilir ya da silebilirler.• Şubeler taleplerini listeler
Talepleri aşağıdaki kriterlere göre listeler– Talep Tarih Aralığı– Bilet Tipi (Piyango, Hemen Kazan)– Talebin karşılanıp karşılanmadığı
• Liste üzerinde, talep ya da talepleri silebilir, seçilen talebi güncelleyebilir.
Örnek MVCUygulaması
Görsel Gereksinimler
•Merkezin talep sorgulama formunda, şube, birden çok seçilebilir. Bu seçme işlemi sürükle–bırak şeklinde kullanıcı dostu olması gerekir. Seçilen şube silinebilmeli ve bütün seçimler tek bir işlemle kaldırabilmelidir.
•Sunucuyla olan her bilgi alışverişinde işlem günlüğü ekranın en altında okunabilir bir şekilde (çözünürlüğe göre kaybolmayacak şekilde) görünmelidir.
•Kullanıcı ekranları sekmeli yapıda görebilmelidir. Örneğin yeni talep kaydı için liste ekranını kapatıp talep kaydetme ekranını açmamalıdır. Sekmeli yapıda olması gerekir.
Örnek MVCUygulaması
• Ext JS’de tanımlanmış 4 tane tema var
– ext-all.css (default)
– ext-all-access.css
– ext-all-gray.css
– ext-all-scopped.css
Tema değiştirmek için temanın css dosyasını head içinde vermeliyiz.<link rel="stylesheet" type="text/css"
href="extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
href="extjs/resources/css/ext-all-access.css" />
• Intenetten paralı ve parasız temalar indirilebilir. Örneğin;
– extthemes.com/extjs4/
• Sencha’nın kendi temamızı oluşturumamız için aracı var
– www.sencha.com/learn/theming/
Temalar