DevExtreme ile Tab Panel Kullanımı

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. 

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


Tags


Share this Post

Send with Whatsapp

Post a Comment

Success! Your comment sent to post. It will be showed after confirmation.
Error! There was an error sending your comment. Check your inputs!

Comments

  • There is no comment. Be the owner of first comment...