DevExtreme ile Tab Panel Kullanımı
Herkese merhabalar, Bu yazıda sizlere DevExtreme ile tab panel nesnesinin nasıl kullanıldığını anlatacağım. Genel özelliklerinden ve kullanımından bahsedeceğim.İlk olarak Yapılandırmasına ve özelliklerine bakalım
activeStateEnabled Yapılandırması
Program başladığında nesnenin aktiflik veya pasiflik durumunu belirler. Bu durum true veya false cinsinden olur. Yani Boolean türündendir. Geçerli ayarı false durumundadır.
animationEnabled Özelliği
Nesneler arası geçiş yaparken herhangi bir animasyon yapsınmı anlamına gelir. Bu ayar türüde booleandır. Eğer true ise animasyon yapılır; eğer false ise animasyon yapılmaz.Geerli ayarı ise normal cihazlar için true; Generic cihazlar için false durumundadır. Gördüğünüz üzere yine buradada boolean tipinde değişkenler kullanılmaktadır.
dataSource Yapılandırması
Verilerinin gösterileceği kaynaktır. Bu bir dizide olabilir bir veritabanıda olabilir. Bu özelliği ayarladıktan sonra verilerimizin nereden geleceğini belirlemiş oluruz. Geçerli ayarı null'dur. yani herhangi bir kaynak yoktur. Burada kullanacağımız dizi veya Veri Kaynağı Dev Extreme'nin sağladığı kütüphanelerden olmalıdır.
Widget nesnelerini göstermek için template kullanılabilir. Bu template DevExtremenin sağladığı template de olabilir; harici template de olabilir.Daha fazla bilgi için DevExtreme'nin sitesini kontrol ediniz.
disabled Yapılandırması :
Yine hemen hemen her nesnede var olan disabled özelliği. Bu özellik sayesinde nesnenin tıklamalarda çalışıp çalışmayacağını belirleriz. Bu özelliğin geçerli ayarı fase durumundadır. Değişken türleri booleandır. Eğer true yapılırsa nesne disabled durumuna geçer ve çalışmaz.
focusStateEnabled Yapılandırması :
Nesne üzerinde odaklanma özelliğidir. Yani enter tuşuna basınca çalışsınmı durumunu ayarlarız. Geçerli ayarı false'tur. Değişken türü booleandır.
height
Hemen hemen her nesnede olduğu gibi bu nesneninde yükseklik değerlerini belirmek için kullanılan height özelliğidir. Numara string veya değer döndüren bir fonksiyon şeklinde olabilir. Bu değer- Numara olduğunda Pixel şeklinde olmalıdır. Örnek olarak : 33px, 33% şeklinde
- String ifade olduğunda CSS ayarı şeklinde olmalıdır. Örneğin : "33px" , "33%"
- fonksiyonda ise height:function() { return 10px; } şeklinde olabilir.
hoverStateEnabled Yapılandırması:
Nesnenin üzerindeyken nesnede herhangi bir değişiklik olsunmu olmasınmı diye ayarladığımız yapılandırmadır. Boolean türünde ifadeler kullanılır. Yani ya true dir yada false değerini alır. Geçerli ayarı false durumundadır.
itemHoldTimeout Özelliği:
Nesnenin basılı tutulma özelliğinin ne zaman aktifleşeceğini ayarlıyoruz. Yani ne kadar süre basılı tutulursa ondan sonra basılı tutulma durumuna geçeceğiniz ayarlıyoruz. Geçerli olan süre 750ms'dir.
items
Nesne İçerisinde gösterilecek olan nesnelerdir. Bu bir dizi şeklinde olur. Burada dizinin içerisindeki değerler gösterilir. Eğer istersek burada dataSource de kullanabiliriz. Bu şekilde daha basit şekilde daha karışık nesneleri gösterebiliriz.Bu nesnenin içerisindeki nesneleri gösterebilmek için geçerli durumdaki template kullanılır. Bu template nesneleri sade bir şekilde göstermeye ve üzerinde işlem yapmaya programlıdır. Eğer isterseniz bunu değiştirip daha başka templatelerde ekleyebilirsiniz. Daha fazla bilgi için lütfen Devextremenin resmi sitesini ziyaret ediniz.
loop Özelliği :
Nesne içerisindeki sekmelerin en sona gelindiğinde tekrar başa dönme durumunu ayarlarız. Geçerli ayarı true durumundadır. Boolean türündeki değişkenleri gireriz.
onContentReady Fonksiyonu :
İçeriği Hazır olunca çalışacak olan fonksiyon. Geçerli olarak bir fonksiyon çalışmaz ama isterseniz bir fonksiyon çalışır.
onDisposing Fonksiyonu:
Dispose durumu için fonksşyonlar yazılır. Normalde bir fonksiyon tanımlanmamıştır fakat istersek biz yazabiliriz. Dispose olayı ise : Sonlanma olayı diyebiliriz.
onInitialized Fonksiyonu:
Bu nesne başlatıldığında yüklenecek olan fonksiyondur. Normalde herhangi bir fonksiyon tanımlanmamıştır.
onItemClick
İçerisindeki bir nesneye tıklayınca çalışacak olan fonksiyondur. Tablar değişince çalışacak olan fonksiyonları buraya yazabiliriz. Mesela burada tıklamaya bağlı olarak farklı linkleri çekip içeide gösterebiliriz.
onItemHold Özelliği
Nesneye basılı tutulduğunda çalışacak olan fonksiyonu tanımlamamıza olanak tanır. Basılı tutma süresininin nasıl değiştirileceğini yukarıda anlatmıştım.
onSelectionChanged Fonksiyonu
Seçili olan nesnenin değiştirildiğinde çalışacak olan fonksiyonu tanımlamamızı sağlar.
onTitleClick Fonksiyonu:
Tab panel nesnemizin başlığına tıklayınca çalışacak olan fonksiyonu tanımlamamızı sağlar.
onTitleHold fonksiyonu:
Tab Panel nesnemizin başlığına basılı tutunca çalışacak olan fonksiyonu tanımlamamızı sağlar.
rtlEnabled Yapılandırması :
Nesnenin Right to Left Özelliğini aktif veya pasif yapar. Boolean türünde değişkenler alır. Geçerli ayarı false durumundadır. Bu özellik true olarak ayarlandığında nesne içerisindeki yazılar sağdan sola akmaya başlayacaktır.
selectedIndex Özelliği
Seçili olan veya gösterilen nesnenin dizi içerisindeki index değerini sayısal değer olarak döndürür.
selectedItem
Nesne içerisindeki seçilen nesnedir.
swipeEnabled
Nesnemiz sağdan sola veya soldan sağa doğru kayarak geçsinmi özelliğidir. Boolean türünde değişkenler alır. Geçerli olarak true olarak yapılandırılmıştır.
tabIndex
Nesnenin geçerli olan tab index değerini alırız. Sayısal değerler döndürür. Geçerli olarak 0 değerine ayarlanmıştır.
visible
Nesnenin görünme özelliğidir. Bu ayar ile nesnemiz görünsünmü görünmesinmi ayarlarını yaparız. Boolean değişken türleri alır. Geçerli olarak true değerine ayarlanmıştır.
width
Nesnemizingenişliğini ayarlarız. Sayısal fonksiyon ve CSS değeri şeklindede girebiliriz. Aşağıda örneklerine bakalım
numeric
- Sayısal girersek şekildeki gibi pixel ayarlarını gireceğiz. Örneğin : 33px 33% ... gibi...
- String şeklinde ise "33px" "33%" gibi gireceğiz
- Fonksiyon şeklinde ise değer döndüren metodlar şeklinde gireceğiz.
Buraya kadar olan kısım Nesnemizin Yapılandırma ve Özellikleri ile alakalıydı. Şimdide Metodlarına Bakalım
beginUpdate()
Nesnemiz endUpdate() metodu çağrılana kadar bir daha yenilenmez.
beginUpdate ve endUpdate fonksiyonları arasındaki süre içerisinde nesne üzerinde çalışmalar yapabilirsiniz. beginUpdate fonksiyonu çalıştırıldıktan sonra endUpdate fonksiyonu çağrılana kadar nesne üzerinde hiç bir refresh olayı yani yenilenme olmaz. Bu nesne üzerinde değişiklik yaparken ani yenilenmeleri engeller ve çalışmanızın kaybolmasını engeller.
element()
Nesnenin kök HTML element bilgilerini getirir. JQuery olarak geri dönüt verir.
endUpdate()
beginUpdate fonksiyonu çağrıldıktan sonra o sürenin durdurulmasını sağlar.
focus()
Nesneye odaklanır. Enter tuşuna basınca nesneye click yapar
instance()
Nesnenin içerisindeki ayarları döndürür. Mesela value text gibi ayarları döndürür.
off(fonksiyon)
İçerideki fonksiyonun çalışmasını durdurur ve hiç bir fonksiyon tarafından çağrılamaz
on(fonksiyon)
Yukarıdaki off işleminin tam tersini yapar.
option()
Nesnenin bütün geçerli yapılandırma ayarlarını döndürür.
option(deger)
Nesnenin girili olan ayarının geçerli olan değerini döndürür.
repaint()
Nesneyi en baştan tekrar oluşturur Bu metod ile girilen nesneyi tekrar oluşturma işlemi yapılır. Aslında nesneyi yenileme işlemide diyebilriz.
Bu yazımızda bu kadar. -- Takipte Kalın
Burak Hamdi Tufan
Comments