![]() |
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!"); [Ü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; 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'); onFocus için ise Kod: var lblsonuc = document.getElementById('IWLBLSONUC'); Eposta adresinin girileceği IwEdEposta IWEdit i içinde aynı olay işleyicilere kod giriyoruz onBlur için Kod: ValidateEMail('IWEDEPOSTA','IWLABEL5'); onFocus için ise edUser ile aynı kodu giriyoruz. Kod: var lblsonuc = document.getElementById('IWLBLSONUC'); Kod: procedure TfrmEposta.IWAppFormCreate(Sender: TObject); Kod: procedure TfrmEposta.IWAppFormRender(Sender: TObject); Kod: procedure TfrmEposta.SENDBTNClick(Sender: TObject); [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] |
Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şuanki Zaman: 15:31. |
Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2025, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO
Copyright ©2004 - 2025 IRCForumlari.Net Sparhawk