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: Kodu kopyalamak için üzerine çift tıklayın!
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.
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
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.
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
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: Kodu kopyalamak için üzerine çift tıklayın!
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.
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
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: Kodu kopyalamak için üzerine çift tıklayın!
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: Kodu kopyalamak için üzerine çift tıklayın!
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: Kodu kopyalamak için üzerine çift tıklayın!
ValidateEMail('IWEDEPOSTA','IWLABEL5');
Eposta doğrulaması yapılıyor
onFocus için ise edUser ile aynı kodu giriyoruz.
Kod: Kodu kopyalamak için üzerine çift tıklayın!
var lblsonuc = document.getElementById('IWLBLSONUC');
lblsonuc.innerHTML = "";
JavaScript kodlamalarımız tamam gelelim bildiğimiz kodlamaya yani delphi kodlamasına
Kod: Kodu kopyalamak için üzerine çift tıklayın!
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: Kodu kopyalamak için üzerine çift tıklayın!
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: Kodu kopyalamak için üzerine çift tıklayın!
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.
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. Alıntıdır.
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.