IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası - IntraWeb FrameWork (JavaScript Kullanımı-4)

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.

Kod:

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.

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

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.

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

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

Kod:

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> ";

      }

}

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 )
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. [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

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

Kod:

ValidateUser('EDUSER','IWLABEL4');

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

onFocus için ise

Kod:

var lblsonuc = document.getElementById('IWLBLSONUC');

lblsonuc.innerHTML = "";

bu kod da malum hatalar vs sonucunda değiştirilen IWLabelSonuc etiketini temizler.

Eposta adresinin girileceği IwEdEposta IWEdit i içinde aynı olay işleyicilere kod giriyoruz

onBlur için

Kod:

ValidateEMail('IWEDEPOSTA','IWLABEL5');

Eposta doğrulaması yapılıyor

onFocus için ise edUser ile aynı kodu giriyoruz.

Kod:

var lblsonuc = document.getElementById('IWLBLSONUC');

lblsonuc.innerHTML = "";

JavaScript kodlamalarımız tamam gelelim bildiğimiz kodlamaya yani delphi kodlamasına

Kod:

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

Kod:

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

Kod:

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.

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Alıntıdır.

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]