Tam Sürümü Göster: IntraWeb FrameWork ( JavaScript Kullanımı - 4)
Sayfalar: 1
IntraWeb FrameWork ( JavaScript Kullanımı - 4) Gönderen: kocaturk Tarih: 28 July 2007 01:09:21
Arkadaşlar bundan bir önceki Düzenli ifadelerin kullanımı ile ilgili makalemiz de bildiğiniz üzere bir E.Posta doğrulama örneği hazırlamıştık, bu ve bundan önceki örneklerin tümünde genellikle istemci taraflı JavaScript kodları ile bazı özel veya hata durumlarına hep.
gibi bir kod ile sürekli uyarı mesajları verdirdik. Bu gibi uyarı mesajları aslında beni çok sıkar çünkü zonk diye çıkarlar ve tamam a basmanızı beklerler. Net te gezerken bir çok gelişmiş sitede Form doldururken veya üye girişi yaparken giriş alanlarının yanında girdiğiniz bilginin doğruluğunu teyiden birer küçük resim bulunur örneğin aşağıdakiler gibi.
Girilen bilgi uygunsa yeşil olan değilse kırmızı olanı gözükür sizde buna göre bilgileri doğru olarak girersiniz .
şimdi diyorum ki daha önce verdiğimiz E.Posta doğrulama örneğini bu yönde geliştirelim biraz daha profesyonel bir uygulama geliştirelim. Bunun için çok fazla bir çaba gerekmeyecek yapacağımız şey önce projemizin bulunduğu dizine files adlı bir dizin oluşturmak daha sonra yukarıdaki simgelerin yeşil olanını success.png kırmızı olanını da error.png olarak kopyalayalım sonra eğer ServerController nesnemizin AllowSubFolders özelliği false ise bunu yukarıdaki resimleri kopyaladığımız files dizinine ulaşabilmek için bu özelliği True yapalım.
Bu işlemden sonra yapmamız gereken şey Ana formumuzda bir iki görsel değişiklik ve önceden yazdığımız Eposta doğrulama JavaScript kodunda biraz değişiklik yapmak olacaktır. Ben Forma birde kullanıcı adı girilmesi için bir IWLabel ve bir IWEdit daha ekledim eklediğim IWEdit in adını edUser yaptım daha sonrada girilen bilgilerin doğruluğunu onay için kullanacağımız simgelerimizin gösterilmesi için iki adet IWLabel(IWLabel4, IWLabel5) ı da editlerin sağına ekledim evet simgeleri IWLabel içerisinde göstereceğiz bildiğinizi gibi daha önce bahsetmiştim bir çok Intraweb Bileşeninin RawText özelliği vardır diye ve kullanımı konusunda da bilgi vermiştik işte IWLabel ların bu özelliğini kullanacağız.
şimdi buraya kadar anlattıklarımız ile formumuzun delphi tasarım modunda yeni görünümü aşağıdaki gibi olacaktır tabi siz kafanıza göre ayarlama yapabilirsiniz.
Formumuzun tasarım işlemi bitti işin en önemli püf noktası olan JavaScript kodumuzu hazırlamaktı ben aşağıdaki gibi bir kod hazırladım.
Birinci function için söylenecekler kanımca bu kadar ikinci function ise kullanıcı adının denetimi için kullanacağımız function ValidateUser( ValEdit, imgLabel ) şeklinde tanımlanan function bundada mantık aynı sadece editin boş olup olmadığına bakılıyor. Aslında tek bir function yazarak tüm editlerin doğrulama işlemini buradan yapılması sağlanılabilir, bunuda JavaScript i iyi bilen arkadaşlara bırakıyorum.
Son function ise function ValidateEdits( ) şeklinde tanımlanan function ımız bunun görevi ise başlangıçta tanımladığımız ve önceki iki function da değerlerine atama yapılan b1,b2 global değişkenlerinin toplamlarını kontrol ederek eğer toplamları -2- ise bilgileri sunucuya göndermek aksi halde kullanıcıyı girişleri doğru girmeye yönlendirmek olacaktır.
Bu function ile ilgili söylenecek önemli olduğunu düşündüğümbir iki şey var, birincisi daha önce de bahsetmemize rağmen SubmitClickConfirm( 'SENDBTN', '', true, '' ); kısmı bildiğiniz gibi bu kod ile SENDBTN IWButton ımızın sunucu taraflı (ServerSide) onClick olay işleyici kodunu çalıştırıyoruz bir diğeri de bilen bilir ama bilmeyen için tmpLabel.innerHTML = "<h4 style=\"color:red\">Tüm alanları doldurunuz!!!</h6> "; satırında bulunan \" işaretleri bu işaretler Unix kabuğunda program yazan arkadaşlarda hatırlarlar bir dize içerisinde kullanılan simgelerin tırnak işaretinin dizenin yapısından bağımsız basılmasını sağlar bildiğiniz gibi delphide de tek tırnağı #39 karakter kodu ile ayırıyoruz.
Function ların yazımı ve tanımı tamam olduğuna göre artık kullanımlarına geçelim.
Kullanıcı adının girileceği edUser IWEdit i için iki adet istemci taraflı olay işleyici kodu yazacağız bunlardan birincisi onBlur diğeri de onFocus
onBlur için
onFocus için ise
Eposta adresinin girileceği IwEdEposta IWEdit i içinde aynı olay işleyicilere kod giriyoruz
onBlur için
Eposta do�?rulaması yapılıyor
onFocus için ise edUser ile aynı kodu giriyoruz.
Formun onCreate olay işleyicisine bu kodu koymamın nedeni tasarım anında Label ların başlıklarını label ları görebilmem için dolu bırakmamdır böyleye label ları ekran görüntüsü alırken veya taşırken rahatlıkla fark edebilmek için yoksa tasarım anında 3 label ı da boş bırakıp bu kodu yazmaya bilirdik
Form un onRender olay işleyicisinde bu kodu yazmamın sebebi de malum sunucu tarafından gönderilen HTML kodları il form her Render edilişinde editleri temizlemek
son olarak SendBtn IWButton ının sunucu taraflı onClick olayı hatırlarsanız bu kod function ValidateEdits() function ı içerisindeki SubmitClickConfirm( 'SENDBTN', '', true, '' ); kodu ile tetikleniyordu. Buraya kadar her şey doğru ise sonuç aşağıdaki gibi olacaktır.
Ynt: IntraWeb FrameWork ( JavaScript Kullanımı - 4) Gönderen: babahayati Tarih: 28 July 2007 10:10:55
eline sağlık yine emeğini bizlerden esirgememişsin teşekkürler.
teşekkür ettikten sonra mesaj kalabalığı olmasın diye bir şey sormak istiyorum. Delphi For PHP, Delphi 2007 ve Delphi 2005 aynı makinada birbiriyle çakışabilirmi? bende bu üçü kurulu idi ve DPHP kilitlenip duruyordu, DPHP den vazgeöemeyeceğim için ve diğerleri de makinayı bayağı kastığı için second edition ve lite gibi sürümleri kurdum (DPHP düzeldi), ancak sadeleştirilmiş sürümler de de IW ve bir çok bileşen yok, buda işime gelmiyor. yani "ne senden geçerim ne meyhaneden" şarkısını söyleyip duruyorum, önerin yada yorumun varmıdır abi.
Ynt: IntraWeb FrameWork ( JavaScript Kullanımı - 4) Gönderen: kocaturk Tarih: 28 July 2007 16:03:26
Aslında olmaması lazım ama gel sen 2005 ile 2007 nin ortasını bul bir problemin kalmaz sanıyorum yani bende 2006 ve Delphi for php kurulu hiç bir problem yok ama ben genelde önce 2006 yı kurup sonra delphi for php yi kuruyorum gerçi kuruyorum. kolay gelsin
Ynt: IntraWeb FrameWork ( JavaScript Kullanımı - 4) Gönderen: babahayati Tarih: 28 July 2007 16:42:23
Delphi 2006 şırokkhko ediyşın diyosun yani
zaten seride bir o eksikti onuda bulayım bari, zaten google ı ben zengin ettim bu programcılık hevesine, o değilde şimdi system trydan size mesaj var msn iletileri, erotik bannerlar, greencart başvuruları, nerde alakasız şey varsa cebelleşecem yine, yoksa kendi IDE mimi yazsam 
Intraweb Uygulamalarında JavaScript kullanımı - 4
Uygulamalara görsel zenginlik katma
Arkadaşlar bundan bir önceki Düzenli ifadelerin kullanımı ile ilgili makalemiz de bildiğiniz üzere bir E.Posta doğrulama örneği hazırlamıştık, bu ve bundan önceki örneklerin tümünde genellikle istemci taraflı JavaScript kodları ile bazı özel veya hata durumlarına hep.
alert("Lütfen Geçerli bir E.Posta adresi giriniz!");
gibi bir kod ile sürekli uyarı mesajları verdirdik. Bu gibi uyarı mesajları aslında beni çok sıkar çünkü zonk diye çıkarlar ve tamam a basmanızı beklerler. Net te gezerken bir çok gelişmiş sitede Form doldururken veya üye girişi yaparken giriş alanlarının yanında girdiğiniz bilginin doğruluğunu teyiden birer küçük resim bulunur örneğin aşağıdakiler gibi.
Girilen bilgi uygunsa yeşil olan değilse kırmızı olanı gözükür sizde buna göre bilgileri doğru olarak girersiniz .
şimdi diyorum ki daha önce verdiğimiz E.Posta doğrulama örneğini bu yönde geliştirelim biraz daha profesyonel bir uygulama geliştirelim. Bunun için çok fazla bir çaba gerekmeyecek yapacağımız şey önce projemizin bulunduğu dizine files adlı bir dizin oluşturmak daha sonra yukarıdaki simgelerin yeşil olanını success.png kırmızı olanını da error.png olarak kopyalayalım sonra eğer ServerController nesnemizin AllowSubFolders özelliği false ise bunu yukarıdaki resimleri kopyaladığımız files dizinine ulaşabilmek için bu özelliği True yapalım.
Bu işlemden sonra yapmamız gereken şey Ana formumuzda bir iki görsel değişiklik ve önceden yazdığımız Eposta doğrulama JavaScript kodunda biraz değişiklik yapmak olacaktır. Ben Forma birde kullanıcı adı girilmesi için bir IWLabel ve bir IWEdit daha ekledim eklediğim IWEdit in adını edUser yaptım daha sonrada girilen bilgilerin doğruluğunu onay için kullanacağımız simgelerimizin gösterilmesi için iki adet IWLabel(IWLabel4, IWLabel5) ı da editlerin sağına ekledim evet simgeleri IWLabel içerisinde göstereceğiz bildiğinizi gibi daha önce bahsetmiştim bir çok Intraweb Bileşeninin RawText özelliği vardır diye ve kullanımı konusunda da bilgi vermiştik işte IWLabel ların bu özelliğini kullanacağız.
şimdi buraya kadar anlattıklarımız ile formumuzun delphi tasarım modunda yeni görünümü aşağıdaki gibi olacaktır tabi siz kafanıza göre ayarlama yapabilirsiniz.
Formumuzun tasarım işlemi bitti işin en önemli püf noktası olan JavaScript kodumuzu hazırlamaktı ben aşağıdaki gibi bir kod hazırladım.
Kodu biraz incelersek eğer ik tane global değişken tanımlamığım b1,b2 şeklinde üç adette function tanımlamışız,İlk function function ValidateEMail( ValEdit, imgLabel ) şeklinde tanımlı yaptığı iş kısaca şöyle ilk Eposta örneğinden hatırlayacaksınız girilen Eposta formatının geçerliliğini kontrol eden bir REgularExpression tanımlamıştık yine onu kullanıyoruz Function a iki parametre geçiliyor ValEdit ve imgLabel bunlardan birisi kontrol edilecek IWEdit i diğeri de hata veya doğruluk durumunda simgenin gösterileceği IWLabel i temsil ediyor eğer ValEdit parametresi ile belirtilen giriş denetimine girilen Eposta adresi geçerli değilse veya boş sa imgLabel ile belirtilen IWLabel denetimi içrisinde error.png gösterilecek ve b1 global değişkeninin değeri -0- a eşitlenecek, giriş doğru ise success.png gösterilecek ve b1 değişkeninin değeri -1- e eşitlenecek,( bu arada nesneleri bulurken dikkat ederseniz document.getElementById standart JavaScript methodunu kullanıyorum bildiğiniz gibi Intraweb de bunun için locateElement methodu var ama biz JavaScript kodu yazdığımıza göre orjinalini kullanmakta fayda var diye düşünüyorum )
var b1;
var b2;
function ValidateEMail( ValEdit, imgLabel )
{
var MRegExp = new RegExp( "^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.)+[a-z]{2,3}$", "g" );
var tmpEdit = document.getElementById( ValEdit );
var tmpLabel = document.getElementById( imgLabel );
if ( !MRegExp.test( tmpEdit.value ) || tmpEdit.value == "" )
{
tmpLabel .innerHTML = "<img src = /files/error.png></img>";
b1= 0;
}
else
{
tmpLabel .innerHTML = "<img src = /files/success.png></img>";
b1 = 1;
}
}
function ValidateUser( ValEdit, imgLabel )
{
var tmpEdit = document.getElementById( ValEdit );
var tmpLabel = document.getElementById( imgLabel );
if ( tmpEdit.value == "" )
{
tmpLabel .innerHTML = "<img src = /files/error.png></img>";
b2 = 0;
}
else
{
tmpLabel .innerHTML = "<img src = /files/success.png></img>";
b2 = 1;
}
}
function ValidateEdits( )
{
var tmpLabel = document.getElementById( 'IWLBLSONUC' );
if ( ( b1 + b2 == 2) )
{
SubmitClickConfirm( 'SENDBTN', '', true, '' );
}
else
{
document.getElementById( 'IWLABEL4' ).innerHTML = "<img src = /files/error.png></img>";
document.getElementById( 'IWLABEL5' ).innerHTML = "<img src = /files/error.png></img>";
tmpLabel.innerHTML = "<h4 style=\"color:red\">Tüm alanları doldurunuz!!!</h6> ";
}
}
Birinci function için söylenecekler kanımca bu kadar ikinci function ise kullanıcı adının denetimi için kullanacağımız function ValidateUser( ValEdit, imgLabel ) şeklinde tanımlanan function bundada mantık aynı sadece editin boş olup olmadığına bakılıyor. Aslında tek bir function yazarak tüm editlerin doğrulama işlemini buradan yapılması sağlanılabilir, bunuda JavaScript i iyi bilen arkadaşlara bırakıyorum.
Son function ise function ValidateEdits( ) şeklinde tanımlanan function ımız bunun görevi ise başlangıçta tanımladığımız ve önceki iki function da değerlerine atama yapılan b1,b2 global değişkenlerinin toplamlarını kontrol ederek eğer toplamları -2- ise bilgileri sunucuya göndermek aksi halde kullanıcıyı girişleri doğru girmeye yönlendirmek olacaktır.
Bu function ile ilgili söylenecek önemli olduğunu düşündüğümbir iki şey var, birincisi daha önce de bahsetmemize rağmen SubmitClickConfirm( 'SENDBTN', '', true, '' ); kısmı bildiğiniz gibi bu kod ile SENDBTN IWButton ımızın sunucu taraflı (ServerSide) onClick olay işleyici kodunu çalıştırıyoruz bir diğeri de bilen bilir ama bilmeyen için tmpLabel.innerHTML = "<h4 style=\"color:red\">Tüm alanları doldurunuz!!!</h6> "; satırında bulunan \" işaretleri bu işaretler Unix kabuğunda program yazan arkadaşlarda hatırlarlar bir dize içerisinde kullanılan simgelerin tırnak işaretinin dizenin yapısından bağımsız basılmasını sağlar bildiğiniz gibi delphide de tek tırnağı #39 karakter kodu ile ayırıyoruz.
Function ların yazımı ve tanımı tamam olduğuna göre artık kullanımlarına geçelim.
Kullanıcı adının girileceği edUser IWEdit i için iki adet istemci taraflı olay işleyici kodu yazacağız bunlardan birincisi onBlur diğeri de onFocus
onBlur için
onBlur ilgili denetimden çıkıldığında tetiklenir yani bizim VCL de onExit e denk düşer kod açık girilen bilginin doğruluğu kontrol ediliyor
ValidateUser('EDUSER','IWLABEL4');
onFocus için ise
bu kod da malum hatalar vs sonucunda değiştirilen IWLabelSonuc etiketini temizler.
var lblsonuc = document.getElementById('IWLBLSONUC');
lblsonuc.innerHTML = "";
Eposta adresinin girileceği IwEdEposta IWEdit i içinde aynı olay işleyicilere kod giriyoruz
onBlur için
ValidateEMail('IWEDEPOSTA','IWLABEL5');
Eposta do�?rulaması yapılıyor
onFocus için ise edUser ile aynı kodu giriyoruz.
JavaScript kodlamalarımız tamam gelelim bildiğimiz kodlamaya yani delphi kodlamasına
var lblsonuc = document.getElementById('IWLBLSONUC');
lblsonuc.innerHTML = "";
procedure TfrmEposta.IWAppFormCreate(Sender: TObject);
begin
IWLblSonuc.Caption := '';
IWLabel4.Caption := '';
IWLabel5.Caption := '';
end;
Formun onCreate olay işleyicisine bu kodu koymamın nedeni tasarım anında Label ların başlıklarını label ları görebilmem için dolu bırakmamdır böyleye label ları ekran görüntüsü alırken veya taşırken rahatlıkla fark edebilmek için yoksa tasarım anında 3 label ı da boş bırakıp bu kodu yazmaya bilirdik
procedure TfrmEposta.IWAppFormRender(Sender: TObject);
begin
edUser.Text := '';
IWedEPosta.Text := '';
end;
Form un onRender olay işleyicisinde bu kodu yazmamın sebebi de malum sunucu tarafından gönderilen HTML kodları il form her Render edilişinde editleri temizlemek
procedure TfrmEposta.SENDBTNClick(Sender: TObject);
begin
IWLblSonuc.Caption := '<h3 style="color:green;">Girilen Eposta Adresi : ' + IWEdEPosta.Text + '</h5>';
IWLblSonuc.Visible := TRue;
end;
son olarak SendBtn IWButton ının sunucu taraflı onClick olayı hatırlarsanız bu kod function ValidateEdits() function ı içerisindeki SubmitClickConfirm( 'SENDBTN', '', true, '' ); kodu ile tetikleniyordu. Buraya kadar her şey doğru ise sonuç aşağıdaki gibi olacaktır.
Ynt: IntraWeb FrameWork ( JavaScript Kullanımı - 4) Gönderen: babahayati Tarih: 28 July 2007 10:10:55
eline sağlık yine emeğini bizlerden esirgememişsin teşekkürler.
teşekkür ettikten sonra mesaj kalabalığı olmasın diye bir şey sormak istiyorum. Delphi For PHP, Delphi 2007 ve Delphi 2005 aynı makinada birbiriyle çakışabilirmi? bende bu üçü kurulu idi ve DPHP kilitlenip duruyordu, DPHP den vazgeöemeyeceğim için ve diğerleri de makinayı bayağı kastığı için second edition ve lite gibi sürümleri kurdum (DPHP düzeldi), ancak sadeleştirilmiş sürümler de de IW ve bir çok bileşen yok, buda işime gelmiyor. yani "ne senden geçerim ne meyhaneden" şarkısını söyleyip duruyorum, önerin yada yorumun varmıdır abi.
Ynt: IntraWeb FrameWork ( JavaScript Kullanımı - 4) Gönderen: kocaturk Tarih: 28 July 2007 16:03:26
Aslında olmaması lazım ama gel sen 2005 ile 2007 nin ortasını bul
bir problemin kalmaz sanıyorum yani bende 2006 ve Delphi for php kurulu hiç bir problem yok ama ben genelde önce 2006 yı kurup sonra delphi for php yi kuruyorum gerçi kuruyorum. kolay gelsinYnt: IntraWeb FrameWork ( JavaScript Kullanımı - 4) Gönderen: babahayati Tarih: 28 July 2007 16:42:23
Delphi 2006 şırokkhko ediyşın diyosun yani
zaten seride bir o eksikti onuda bulayım bari, zaten google ı ben zengin ettim bu programcılık hevesine, o değilde şimdi system trydan size mesaj var msn iletileri, erotik bannerlar, greencart başvuruları, nerde alakasız şey varsa cebelleşecem yine, yoksa kendi IDE mimi yazsam