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

Intraweb Uygulamalarında JavaScript kullanımı - 3

Düzenli ifadeler(Regular Expressions)

Tekrar merhaba arkadaşlar yazı dizimizin bu bölümünde JavaScript düzenli ifadelerini InraWeb uygulamalarında kullanmayla ilgi bir örnek vereceğim.
JavaScript te düzenli ifadeler konusunda fazladan bir açıklama yapmak istemiyorum bu konuda .NET te Türkçe veya diğer dillerde yeterince kaynak var, bir bakıma bizim delphi de kullandığımız Mask olayı gibi düşünün yani bir bilgi girişi sırasında girilen bilginin Mask e uygun olup olmadığının kontrolu yapılır. Burada da biz bu işlemi yine istemci taraflı JavaScript ile halledeceğiz. Şimdi bu işi kotaracak Intraweb Uygulamamızı geliştirmeye başlayalım.
Düzenli ifadelerle giriş kontrolü yaparken Tarih, telefon no Eposta v.s gibi bir çok farklı konuda giriş kontrolü yapılabilir, ben burada biraz daha kompleks olduğu için Eposta girişini kontrol eden bir uygulama geliştirmek istiyorum. Yani girilen Eposta adresinin geçerli bir Eposta adresi olup olmadığını IntraWeb uygulamamız da istemci taraflı kontrol edeceğiz.

Daha önce bir IntraWeb uygulaması nasıl oluşturulur anlatmıştık o yüzden bildiğinizi kabul ederek devam ediyorum.

Delphi de yeni bir Intraweb uygulaması oluşturalım ve uygulamamızı IWEPosta olarak kaydedelim. Ben alışkanlık olduğu için Unit1.pas unitini uMain.pas olarak ServerController ı değiştirmeden ve project1 i de IWEposta olarak kaydettim, projemizin zaten tek olan uMain formunu tasarım moduna aldıktan sonra form üzerine bir adet IWEdit bir adet IWButton ve 3 adet IWLabel bileşeni ekleyelim. IWEdit1 bileşeninin adını IWEdEPost, IWButton1 in adını SendBtn IWLable3 ün adını IWLblSonuc olarak değiştirelim IWLable1 in Caption özelliğine “IW Uygulamalarında İstemci Taraflı E.Posta Doğrulama” IWLabel2 nin Caption özelliğine “E.Posta Adresi :” girdikten sonra IWLblSonuc nesnesinin Visible özelliğni False yapalım, RawText özelliğni True yapalım sonra bileşenlerimizi aşağıdakine benzer bir yapıda formumuz üzerine yerleştirelim.

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

Formumuzun görünümünü tamamladıktan sonra geldik işin JavaScript kodlaması ve çağrılmasına.
Daha öncede bahsettiğimiz gibi IntraWeb formların özel JavaScipt kodları girilebilmesi için hazırlanmış JavaScript adlı TStringList tipinde bir özelliği bulunmakta, bu uygulamada diğerlerinden farklı olarak IntraWeb formalarının JavaScript özelliğinde global JavaScript function ları yazıp bunları Form üzerindeki diğer IW bileşenlerinin ScriptEvents özelliği ile tanımlanan istemci taraflı olay işleyicilerinden çağırma yöntemini kullanacağım. Böylece InraWeb in ne kadar esnek bir yapı olduğunu da göstermiş olacağız.
Şimdi kaldığımız yerden devam edelim IWFormumuzun JavaScript özellik editörünü açıp aşağıdaki kodları girelim;

Kod:

function CheckEPosta (MyEPosta)

{

 var MyRegExp=new RegExp("^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.)+[a-z]{2,3}$","g");

 if (!MyRegExp.test(LocateElement(MyEPosta).value))

  {

    alert("Lütfen Geçerli bir E.Posta adresi giriniz!");

    return false;

  }

else

    SubmitClickConfirm('SENDBTN','', true, '');

}

Kodu biraz açıklayalım; Delphi de yaptığımız gibi bir function tanımladık function ımızın adı CheckEPosta ve function a MyEPosta adlı bir parametre geçtik daha sonra MyRegExp adlı bir JavaScript düzenli ifadesi(RegExp) tanımladık düzenli ifadenin mask ini geçerli bir Eposta adresi girilmesini denetleyecek şekilde ayarladık bir sonraki satırda JavaScript nesnesi olarak tanımladığımız MyRegExp düzenli ifadesinin test (ayrıca exec,search replace,split gibi yordamlar için [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] bulabilirsiniz) yordamını kullanarak MyEPosta parametresi ile belirlediğimiz yani bizim uygulamada IWEdEPosta editinin Text özelliğini geçerli bir Eposta adresi girdisimi diye test ediyoruz, eğer geçerli bir Eposta adresi girilmemişse uyarı verip function dan False döndürüyoruz eğer girilen ifade geçerli bir eposta ifadesi ise Önceden tanımlı IW JavaScript Function ı olan SubmitClickConfirm function ı ile bizim form üzerindeki SENDBTN buttonunun sunucuya bilgi göndermesini sağlıyoruz.

SubmitClickConfirm('SENDBTN','', true, '');

satırı önemli, bu satır ilgili nesnenin sunucu taraflı olay işleyicisinin JavaScript kodu ile tetiklenmesini sağlamaktadır bu function ın kullanımı hakkında ileride biraz daha fazla ayrıntı vereceğim ama şimdilik sadece şunları söyleyeyim

function SubmitClickConfirm(AObjectName, AParam, ADoValidation, AConfirmation)

4 adet parametre alır

sunucu taraflı click olayı tetiklenecek nesne
sunucuya geçilecek prametre
Doğrulama yapılıp yapılayacağının kontrolü
Kod işletilmeden önce kullanıcıyı uyarmak için girilecek mesaj

Kodumuz özellik editöründe aşağıdaki gibi gözüküyor.

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

Gelelim yazdığımız CheckEPosta function ını çağırmaya bunuda SENDBTN button ımızın ScriptEvents özelliğinde tanımlı istemci taraflı OnClick olay işleyicisinde yapacağız burada kullanacağımız kod tek satır olacak;

Kod:

CheckEPosta ("IWEDEPOSTA");

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

Aslında global bir function yerine SENDBTN button ımızın istemci taraflı OnClick olay işleyicisinde de kod yazarak bu işi gayet rahat halledebilirdik bunun örneklerini daha önceki yazılarımızda da vermiştik ama bu işi bu şekilde yapmamızın bir iki ufak ayrıntısı var, nasıl ki Delphi de aynı işi yapan birden çok bileşenin kodlarını yazarken her birisi için ayrı ayrı kod yazmak yerine bir tane ortak function veya procedure yazarak kodumuzda hem okunurluğu artırıyoruz hemde fazla satır kod yazmaktan kurtuluyoruz burada da aynı şeyi düşünmeke fayda var, burada bir önemli nokta daha varki dikkat etmek gerekir, düşünün IWForm üzerinde onlarca IWEdit var ve bunların her birisi için ayrı ayrı doğrulama JS kodları yazıyoruz daha sonra sunucu uygulamayı derliyoruz ve tarayıcıda açıyoruz kodlarda problem yoksa doğal olarak uygulama eksiksiz çalışacak fakat tarayıcıda sayfanın kaynağına baktığınızda bir sürü kod göreceksiniz bu da doğal olarak sayfa ilk kez render edilirken tarayıcı penceresinde geç açılmasına sebep olacaktır bu durumu da hiç birimiz istemeyiz doğrusu. O yüzden tek bir global doğrulama function ı yazıp gerekli parametreleri kullanarak sayfamızın kod satır sayısını azaltarak tarayıcıda daha çabuk açılmasını sağlamaya çalışmalıyız.
Aşağıda bu işi SENDBTN nin istemci taraflı OnClick olay işleyicisinde kotaracak koduda veriyorum sonra yorumu size bırakıyorum

Kod:

var MyRegExp=new RegExp("^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.)+[a-z]{2,3}$","g");

 if (!MyRegExp.test(LocateElement(“IWEDEPOSTA”).value))

  {

    alert("Lütfen Geçerli bir E.Posta adresi giriniz!");

    return false;

  }

else

 return true;

JavaScript kodlamamız bittikten sonra uygulamamızı test etmek için SENDBTN nin sunucu taraflı OnClick olay işleyicisini yazalım bunun için button üzerine tasarım anında çif tıklayıp Delphi editör de aşağıdaki kodları girelim

Kod:

procedure TfrmEposta.SENDBTNClick(Sender: TObject);

begin

IWLblSonuc.Caption := 'Girilen Eposta Adresi : <b>' + IWEdEPosta.Text +'</b>';

IWLblSonuc.Visible := TRue;

end;

kod gayet açık istemci tarafında eğer her şey yolunda giderse ve SubmitClickConfirm ile yukarıdaki kod tetiklenirse demek ki girilen Eposta adresi uygun formatta bir Eposta dolayısı ile IWLblSonuc etiketimizin Caption ı değiştirilip Visible özelliği True yapılarak sayfamız yeniden Render edilecektir.
IWLblSonuc nesnemizin hatırlarsanız RawText özelliğini başlangıçta True yapmıştık yine önceki makalelerden hatırlayacağınız gibi RawText özelliği IW görsel bileşenlerinde HTML kodlarının işletilmesini ve çıktı olarak ta gösterilemsini sağlamaktay dı burada

IWLblSonuc.Caption := 'Girilen Eposta Adresi : ' + IWEdEPosta.Text +'';

Satırında bulunan ve malumunuz HTML tag leri ve arasında bulunan metni kalın punto basmaya yarar, işte bizde hem öğrendiklerimizi unutmamak için hemde formda şık bir görünüm elde etmek için bu imkandan faydalandık.

Eğer bir aksilik yoksa programı çalıştırıp tarayıcıda açtığınızda E.Posta Adresi alanına geçersiz bir bilgi girdiğiniz de uyarı alacaksınız,

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

Geçerli bir Eposta bilgisi girdiğiniz de ise sunucuya bilgi talep gönderilip cevap alınacak ve girdiğiniz Eposta adresi sayfada basılacaktır.

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

uygulamayı çalıştırdıktan sonra oluşturduğum animasyon aşağıdadı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...]