ArÅŸiv Anasayfa IntraWeb ile Web Uygulamaları

Sayfalar: 1

IntraWeb FrameWork ( JavaScript Kullanımı - 3) Gönderen: kocaturk Tarih: 07 July 2007 03:09:54



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.



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;

 
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 Bu adres te Tükçe kaynak 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.



 
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;

 
CheckEPosta ("IWEDEPOSTA");
 
 

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

 
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

 
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,



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.



uygulamayı çalıştırdıktan sonra oluşturduğum animasyon aşağıdadır.



Kısa bir süre sonra yayınlayacağım bir sonraki makalede Intraweb ile JavaScript kullanımı konusunu hepinizin çok beğeneceği bir finalle bitirip Intraweb in diğer güzel özelliklerini bildiğim kadarı ile sizinle paylaşmaya devam edeceğim.
DEvam Edecek ->

---

Ynt: IntraWeb FrameWork ( JavaScript Kullanımı - 3) Gönderen: babahayati Tarih: 07 July 2007 09:32:05
Oktay Abi coşmuşsun yine; bu fedakârlığını nasıl öderiz bilemiyorum, gerçekten ciddi ciddi mesai ayırıyorsun bizlere o kdar işinin gücünün arasında. hakkını helâl et.
Hepimizin çok beğeneceği şeyide biliyorum ben  

 

---

Ynt: IntraWeb FrameWork ( JavaScript Kullanımı - 3) Gönderen: sadettinpolat Tarih: 07 July 2007 20:12:02
intraweb yazilarini ilgiliyle okuyorum.
zaman ayirip bizlerle paylastigin icin saol

---

Ynt: IntraWeb FrameWork ( JavaScript Kullanımı - 3) Gönderen: kocaturk Tarih: 09 July 2007 13:43:09
hocam rica ederim ne demek sitede iki gündür aksilik vardı kaldığımız yerden devam edeceğiz inşallah

---

Ynt: IntraWeb FrameWork ( JavaScript Kullanımı - 3) Gönderen: ahmetkılıç Tarih: 12 July 2007 14:38:41
Sayın Kocatürk öncelikle eline ve yüreğine sağlık gerçekten makalelerinizi ilgiyle okuyrum. yapmış olduğunuz uygulamaları beyenmemek mümkündeğil. yanlız sizden ricam birde projeleri dll ye çevirip yayınlama konusunda yardımcı olursanız sevinirim. saygılarımla

---

Ynt: IntraWeb FrameWork ( JavaScript Kullanımı - 3) Gönderen: kocaturk Tarih: 12 July 2007 21:28:51

Aslında ben bu konuyu biraz daha geç vermekten yanaydım, şöyleki önce IW in becerilerinden biraz daha fazla bahsetmek istiyordum ama sizin bu talebiniz nedeni ile, çok zor ve fazla ayrıntılı bir mevzu olmaması sebebi ile IW uygulamalarının dağıtımı konusunda kısa ve öz bir makale  kaleme alıyorum bu gece biter kanısındayım biter bitmez siteye ekleyeceğim.
kolay gelsin.

---

Ynt: IntraWeb FrameWork ( JavaScript Kullanımı - 3) Gönderen: ahmetkılıç Tarih: 13 July 2007 09:29:33
Sayın Kocatürk ilginizden dolayı teşekkür ediyorum. size zahmet olmaz umarım. saygılarımla

---