Çevrimdışı

Arkadaşlar IW Makalelerine uzun bir ara verdikten sonra şunu düşündüm, aslında IntaWeb in tüm bileşenlerini tek tek inceleyip burada paylaşacaktım fakat çok basit şeylerle forumu şişirmek yerine biraz daha kaydadeğer ve programcılara IntraWeb i sevdirecek şeylerden bahsetmek daha mantıklı diye düşündüm.
Tabiki yeri gelince Standart ve Veri duyarlı IW bileşenleri ile ilgili açıklamalar ve örnek ler vereceğiz hatta beraber sağlam biruygulama da yazacağız ama kanımca Intraweb in yeteneklerini bir çok arkadaşımız bilmediğinden belki uzak duruyorlar işte bu ve
devam eden makalelerde bu yakınlaşmayı sağlamaya çalışacağım.
Internet te javascript ve CSS kullanmayan bir web sitesi bulmak çok zordur herhalde, siteler sayfalarını, kullanıcı dostu görsel olarak etkileyici,minimum alanda maksimum bilgiyi gösterecek şekilde bilgilerin tipine göre tasnif edilmiş ve farklı görünüm ve farklı yazı tiplerinde sitenin bütününde tek bir noktadan kontrol etmek için CSS den yardım alırlar.
Örneğin bir sayfada A sınıfı tabloların zemin rengi kırmızı yazı rengi siyah ve yazıtipi italik olsun B sınıfı bir tabloda ise zemin rengi mavi yazı rengi beyaz ve yazı tipi de klın olsun istiyoruz ayrıca A ve B tablolarından 10 larca var işte bu noktada CSS imdadımıza yetişiyor oluşturulacak HTML tabloların sadece sınıflarını Sınıf_A ve Sınıf_B gibi basit bir tanımlama ile önceden tanımladığımız CSS sınıflarını atayarak istediğimiz sonucu alabiliriz.

CSS başlıbaşına bir ihtisas konusudur, benimde bu konuda yeterli bilgim yok ama kendi işimi halledecek kadar biliyorum ve devam eden makalelerde bununla ilgili de güzel örnekler vermeye çalışacağım.

Bu konuda sitemizde ilgili bölümde gerekli bilgileri bulabilirsiniz.

JavaScript ise web programlamanın vazgeçilmezlerindendir. Bir websitesinde bilgiler statik ise JS kanımca siteye hoş şeyler katmak için kullanılır hatta çok güzel bir görsel tasarımla statik web sitelerinde beklide JS e gerek bile yoktur.
Günümüzde statik web siteleri artık yok denecek kadar az,ubunun yanında milyonlarca dinamik site varki bunlar hemen hemen her konuda bilgi içeriyor ve kullanıcısı ile etkileşimli olarak hareket ediyorlar.
Örneğin bir site düşünelim bir firmanın ürün bilgileri tutuyor site ziyaretçisi ürünleri istediği kriterlere göre tasnif edilerek listelenmesini istiyor ziyaretçinin yapacağı her sorgu tarayıcı aracılığı ile sunucuya bir dizi komutlar gönderilmesine ve sunucunun da bu komutları işleyerek istemciye sonuç göndermek için bir efor sarfetmesine neden olur, aynı anda binlerce kişinin sunucudan talepte bulunması halinde de sunucu da bir yoğunluk yaşanacak ve talepler geç ulaşacak hatta bazen timeout olup ulaşamayacak bile işte bu durumlarda en ufak bir bilgi denetim veya teyidi için sunucuya talep göndermek sunucunun işini zorlaştıracaktır.

Örneğin bir kullanıcı kayıt formu doldurulduğunu düşünün kullanıcının E.Posta alanının geçerli bir E.Posta ifadesi içermesi gerekir bu ifadenin geçerliliğini sunucudan kontrol ettirmeye çalışmak sunucuyu yoracaktır ama bunu istemci taraflı JavaScript kodları ile denetlemek sunucuya talep gönderilmeden kontrolün istemcide yapılamsını sağlayacak bu da hem kullanıcıyı sunucuya talebin gidip gelmesini beklemekten hemde sunucuyu istemci taraflı yapılabilecek angaryalardan kurtaracaktır.

Aslında bu durumun önemi bu kadar kısa bir paragrafla anlatılamayacak kadar fazladır ama sanıyorum bu makale için yeterli bir açıklamadır.

Intraweb ile kayda değer uygulamalar hazırlamak istiyorsak mutlaka JS ve CSS yi kullanmalıyız. Intraweb uygulamalarında JS ve CSS kullanımı düşünüldüğü kadar zor değildir.

Intraweb de diğer Web script yapıları gibi kullanıcının talepleri doğrultusunda geriye HTML ve HTML ile halledilemeyen kısımlarda bolca JS kodu ve biçimlendirmeler içinde CSS kodları oluşturarak gönderir ve biz bunun farkında bile olmayız, Bu kodları görmek için intraweb uygulamaları ie oluşturduğunuz basit bir sayfanın tarayıcıda kaynak koduna bakmanız yeterlidir.

İşte biz bu noktada intraweb e hazır JS veya CSS ile yardımcı olursak yukarıda da kısaca değindiğimiz performans kayıplarını en aza indirmiş oluruz.
Tabi intraweb her istdiğimizide karşılayamaz nasıl ki delphi ile uygulamalar geliştirken bazen 3.parti bileşenlere bazende muadili olmayan şeyleri kendi kodlarımızla hallediyorsak intraweb içinde bunu bu şekilde JS, CSS,3.parti IW bileşenleri ile hatta kendi yazacağımız bileşenler ile halletme yoluna gideceğiz.

Intraweb bize kod içerisinde bir çok yerde JavaScript kodları eklememiz için imkanlar sunar.Aşağıda intraweb de JavaCript tanımlaması yapılabilecek yerler ve açıklamalarını vermeye çalıştım.

TIWControl.ScriptEvents
Neredeyse tüm Intraweb bileşenlerinin ilgili bileşen bazında bazı olaylarının JS kodları ile kontrol edilmesinde kullanılır örneğin TIWEdit, TIWButton v.s gibi bileşenlerin OnLoad, ONMouseMove OnBlur, OnClick gibi olaylarında JS kodu çalıştırarak istemci taraflı denetmeler yapabiliriz. Örneğin form üzerindeki bir TIWEdit bileşeninin ObjectInpector den ScriptEvents


Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.


Özelliğini açınca aşağıdaki gibi bir çok olay için JavaScript kodu tanımlayabileceğinizi göreceksiniz.


Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.


Intraweb Bileşenlerinde bazı olayların hem sunucu taraflı hem de istemci taraflı olay işleyicileri vardır. Sunucu taraflı olay işleyiciler(Event Handlers) bildiğimiz standart VCL bileşenlerinde ki olay işleyicilerle aynı olanlarıdır yani ObjectInspector de Events Sekmesinde gördüğümüz işleyiciler, ama istemci taraflı olay işleyiciler ise yukarıdaki resimde görülen olay işleyicilerdir aralarındaki farklar sunucu taraflı olay işleyicilerde native delphi kodu ile kodlama yapılır istemci taraflı olay işleyicilieride ise JavaScript kodlaması yapılır.

Sunucu taraflı olay işleyiciler de istemciden sunucuya bir talep gider ve sunucudan bir cevap beklenir ama istemci taraflı olay işleyiciler sadece istemci tarafında denetlenir ve sunucuya bir talep gönderilmez dolayısı ile sayfa refresh edilmeden gerçekleştirilmek istenilen eylemler gerçekleştirilebilir. Bu da doğal olarak sunucunun fazladan performans harcamasına engel olur.

Şimdi isterseniz bununla ilgili örnekler vermeye başlayalım;

Diyelim ki bir firmanın ürün web sitesinde ziyaretçinin talep ettiği ürün miktarını girmesi gereken bir IWEdit denetimimiz var fakat biz bu denetime ziyaretçinin sadece rakam girmesini istiyoruz yani 0 ile 9IWEdit1 in text özelliğini basit bir döngü içerisinde sorgulayarak içerisinde rakamsal olmayan bir girdi olup olmadığını kontrol ederiz örneğin ben aşağıda bu işi kotaran bir kod yazdım


Dikkat ederseniz kodda IWEdit1 bileşeninin Text özelliği karakter karakter denetlenip tüm karakterlerin 0 ile 9 arasındaki rakamlardan oluşup oluşmadığına bakılıyor eğer rakam olmayan bir karakter varsa kullanıcıya bir uyarı veriliyor ve işlem durduruluyor, yok tüm karakterler rakamlardan oluşuyorsa UrunMiktari sunucu uygulama ve bu sebeple hem zaman hem performans kaybımız oluyor oysa bu işi istemci tarafında pek ala halledebiliriz nasıl mı çok basit daha önce dedik ya Intraweb bileşenlerinin istemci taraflı olay işleyicileri vardır diye işte şimdi IWEdit1 denetiminin ObjectInspector den ScriptEvents Özelliğine tıklayarak


Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.


Event Script editorünü açıp aşağıdaki JavaScript kodunu KeyPress olay işleyicisine ekleyeceğiz;


JS kodunu ekledikten sonra Event Script editörünün görünü aşağıdaki gibi olacaktır


Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.


Script Editör penceresinde ki kodu biraz açıklayacak olursak IWEdit içerisinde herhangi bir karaktere basıldığında eğer karakter #13(ENTER) veya #48(SIFIR) ile #57(DOKUZ) arasında ise kabul edecek bu değerler dışında ise kabul etmeyecektir bunun doğrulaması aşağıda ASCII karakter tablosunda gözükmektedir.


Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.


Event Scripts Editörümüzde OK düğmesine basıyoruz ve kodumuzu derliyoruz tabi Button ımızın OnClick olay kodu da
aşağıdaki gibi oluyor.


Kodu derleyip uygulamayı çalıştırdığınızda tarayıcı penceresinde IWedit1 denetimi içerisine rakam yazdığınızda hiç tepki vermeden kabul ettiğini fakat herhangi bir harf girmeye çalıştığımızda ise harfi kabul etmeyip bir uyarı penceresi ile bizi uyardığını öreceksiniz. Herşeyden önemlisi de bu kontrolu sunucudan bağımsız yapıyor olmasıdır. Bu benim çok hoşuma gidiyor.
Burada dikkat edilmesi gereken bir iki nokta var şimdi buraya kadar anlattıklarımızdan özet olarak şu yargıya varabiliriz.

TIWButton1.OnClick = Sunucu taraflı olay işleyicisi
TIWButton1.ScriptEvents.onClick = İstemci taraflı olay işleyiciyi

Yukarıda görüldüğü gibi bir button için iki taraflı click olayı tanımlayabiliyoruz peki tarayıcı bunu nasıl algılayacak?
Diyelim ki bir Form dolduruyoruz ve bu formu doldurduktan sonra sunucuya göndermek için bir button ımız var başlangıçta button ın caption ı “Gönder” olsun ve biz button a basınca caption ı “Lütfen bekleyiniz…” olsun ve sunucu da şlemler bitene kadar button tıklanamaz hale gelsin.
Bunu sunucu taraflı TIWButton.OnClick olay işleyicisinde yapmaya çalışalım bence yapmayın niye mi şunun için sunucu button ına bastıktan sonra gerekli işemleri tamamlayıp response gönderecektir ve sayfa render edildiğinde her
şey olup bitmiş olacağından siz değişiklikleri fark edemeyeceksiniz bile, diyelim ki Button ının Onclick(sunucu taraflı) olay işleyicisinde aşağıdaki gibi bir kod tanımladık.


Normalde bu bir Windows uygulamasında olsa nasıl bir tepki vereceğini anlatmamıza gerek yok sanırım, malum basılan button caption ı değişiyor disable ediliyor 5000 ms bekleniyor etiketin caption ı değiştirilip button ın caption ı eski haline dönüyor ve tekrar enable oluyor tabi biz tüm bu tepkileri Windows form uygulamasında gözelmliyoruz. Aynı kodu Intraweb uygulamasında kullandığımızda ise sadece

sleep(5000);

kodunun tepkisini gözlemleyebiliriz yukarıda da dediğim gibi sayfa render edildiğinde her şey bittiğinden button ın enable ve caption özellikleri başlangıç değerlerine döndüğünden hiçbir değişikliği fark edemeyiz. Bu durumda yapılacak bir iki değişiklik ile bu durumu halledebiliriz, yapacağımız tek şey IWButton1 in ScriptEvents özelliğinde istemci taraflı Click olayına iki satır JavaScript kodu yazmak


Event Scripts Editor de ki görünüm


Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.


yukarıdaki JS kodunda this ile ifade edilen nesne bizim IWButton1 imiz dikkat ederseniz Value ile caption ı değiştiriyoruz ve button ı tıklanamaz hale getiriyoruz, buraya kadar olan şeyler rutin şeyler bu kodun en önemli ayağı;

return true;

eğer bu satırı tanımlamazsanız tarayıcıda Button a tıkladığınızda ilk iki satır JS kodu işletilip o şekilde kalacaktır. Mantık olarak tarayıcı önce istemci taraflı komutları yani bizim IWButton1.ScriptEvents.Click olayında tanımladığımız JS kodlarını sonrada sunucu taraflı IWButton1.Onclick olay işleyicisinde tanımlanan kodları işletecektir tarayıcı istemci taraflı JS kodunundan dönen olumlu veya olumsuz sonuca göre sunucuya request gönderecek veya göndermeyecektir.

return true;

kodu ile tarayıcının sunucuya request i göndermesini talep ediyoruz aksi taktirde bu kod satırını kullanmazsak sadece istemci taraflı çalışacaktır.

Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

__________________