IntraWeb FrameWork (JavaScript Kullanımı-2)
 

Intraweb Uygulamalarında JavaScript kullanımı makale serimizin bu bölümünde 1. bölümle bağlantılı ama biraz daha hoş şeyler yazmaya çalışacağım. Yazmak derken birazcık iddialı oldu galiba, benimkine pek yazmak denemez, imla kurallarından bi-haber edebi bir yaklaşım sergilemeden karşımda sanki birisi varmış gibi irticalen anlatmaya çalışıyorum. Yapmak istediğim sadece anlatmak istediğimi en anlaşılır şekilde aksettirmek. Umuyorum bundan öncekilerde anlatmak istediğimi anlatabilmişimdir.

Bu bölümde hatta izleyen bir kaç bölümde de birazcık daha fazla istemci taraflı JavaScript kodu kullanmayı düşünüyorum, daha öncede söylemiştim JavaScript konusunda bende siz ne kadar biliyorsanız o kadar biliyorum ama burada ve izleyen sonraki bölümlerde vereceğim JavaScript kodlarını Delphi yi bilen herkes çok rahat anlayacaktır.
Şimdi işe koyulma zamanı, ilk bölümde anlattıklarımızın bir harmanı olarak bu bölümde IntraWeb ile web tabanlı basit bir KDV hesaplama uygulaması geliştireceğiz.
Eminim hepiniz buna benzer çok daha karmaşık Win32 uygulamaları geliştirdiniz hatta ASP.NET ile çok ötesinde şeyler yapabilen kardeşlerimiz, arkadaşlarımız var biz de bunu biraz saklı kalmış Intraweb ile yapalım diyorum.

Delphinin File menüsünden File->New->Other… sırasını takip ederek Delphi New Items penceresini açalım sol daki TreeView den IntraWeb i tıklayalım ve sağ taraftaki ögelerden IntraWeb Application Wizard ı seçip OK Button ına tıklayalım ve açılan IntraWeb Application Wizard penceresinde Application Type bölümünde StandAlone Application radiobutton ını seçelim sağ taraftaki Options bölümündeki tüm CheckBox ların işaretini kaldıralım Project Name kısmına KDVProj yazıp diğer ayarlara dokunmadan OK i tıklayalım.

Not : Default olarak uygulama ….\Belgelerim\Borland Studio Projects\ dizininde oluşturulacaktır eğer Project Directory kısmındaki dizginin sonuna IWKDVProj ilave ederseniz delphi sizin için ….\Belgelerim\Borland Studio Projects\IWKDVProj dizinini oluşturacak ve projeyi buraya kaydedecektir.

Eğer bir aksilik yoksa projemiz Delphi 2006 IDE sinde sağ üst köşede bulunan Project Explorer da aşağıdaki gibi görünecektir.



Şimdi Unit1 de tanımlı olan IWForm1 in adını frmMain olarak değiştirip unit imizi uMain.pas adıyla kaydedelim.
Kayıt işleminden sonra frmMain üzerine 6 adet TIWLabel bileşeni, 5 adet TIWEdit bileşeni ,1 Adet TIWHRule bileşeni ve son olarak ta 1 adet TIWButton ekleyip IWEdit lerin Alignment özelliklerini taRightJustify yapalım sonra IWLabel1 in Caption ını “IntaWeb istemci taraflı JS Uygulama Örneği KDV Hesaplama” olarak değiştirip bgColor özelliğni clSkyBlue yapalım Font.size özelliğini 13 yapıp diğer IWLabel lar ve IWButton da gerekli değişiklikleri yapıp bileşenleri aşağıdaki gibi frmMain üzerinde yerleştirelim.


Buraya kadar yapılması gerekenleri yaptıktan sonra Türkçe karakterlerin sağlıklı çıkması için ServerController ımızın CharSet özelliğini Windows-1254 yapalım son olarak projemizi kaydedelim ve bir kez çalıştırıp tarayıcıdaki görünümüne baktıktan sonra kapatıp kodlama işlemine başlayalım.

Kodlamaya başlamadan önce bir iki hususun altını çizmekte fayda var Formumuzda biz sadece Adet ve Birim Fiyat verilerini gireceğiz Toplam, KDV ve Genel Toplam verileri ise otomatik olarak hesaplanacaklar, dolayısı ile Adet ve Birim Fiyat alanları boş olamaz ve sadece rakam girişine izin vermeliyiz bununla birlikte Toplam, KDV ve Genel Toplam alanlarına da veri girişini kesinle önlemeliyiz.

Bu tespitleri yaptıktan sonra artık kodlarımızı yazmaya başlayalım;

Öncelikle Adet ve Birim Fiyat alanları temsil eden IWEdit1 ve IWEdit2 nin ScriptEvents.OnKeyPress istemci taraflı olay işleyicilerinde daha önceki makalede de kullandığımız sadece rakamsal veri girişine izin veren JavaScript kodunu girelim ki hesaplama yaparken sadece rakam girilebilsin.

Bu kod için daha önce açıklama yapmıştık fakat burada ilave olarak BACKSPACE tuşunun key kodunuda ekledim (event.keyCode == 8) çünkü girilen değerlerin silinme ihtiyacı duyulabilir.

Gelelim IWEdit3,IWEdit4,IWEdit5 in istemci taraflı kodlarına aslında burada üçü için de aynı kodu gireceğiz sadece verdikleri uyarılar için farklı ifadeler ekleyeceğiz.


IWEdit3.ScriptEvents.OnKeyPress için

IWEdit4.ScriptEvents.OnKeyPress için

IWEdit5.ScriptEvents.OnKeyPress için

Dikkat ederseniz kodlarda nümerik, alfanümerik herhangi bir karakter giriş kontrolü yapmıyoruz bir uyarı verip dönen değeri false yapıyoruz çünkü buraya kullanıcı tarafından herhangi bir veri girilmesini istemiyoruz.
Gelelim IWButton1 imizin istemci taraflı OnClick olay işleyici kodlarını yazmaya;
Aşağıdaki kodları IWButton1 in ScriptEveents.OnClick olay işleyicisine ekleyelim

Kodu kısaca bir incelersek eğer edit1,2,3,4,5 şeklinde toplam 5 adet javascript nesnesi tanımlıyoruz ve JavaScript LocateElement() yerleşik function ı ile bizim IWEdit1,2,3,4,5 i bir nevi assign ediyoruz ve artık kod içerisinde IWEdit lerimizi temsilen edit1-5 i kullanıyoruz aslında bu nesneleri tanımlamadan direk function dan dönen değeri de kullanabilirdik ama kodun okunabilirliğini artırmak için bu nesneleri tanımladık.
Daha sonra adet ve bfiyat yerel değişkenlerini tanımlayıp bunlara JavaScript ParseInt() yerleşik function ı ile edit1.value ve edit2.value dolayısı ile bizim IWEdit1.Text (Adet) IWEdit2.Text (Birim fiyat) değerlerini Integer veri tipine dönüştürüp değer ataması yapıyoruz. (Bunu bizim delphide sürekli kullandığımız StrToInt function ına benzetebiliriz yaptıkları iş aynı.)

Kodun devamında toplam ve topkdv adlı iki değişkene de değerleri matematiksel işlemler sonucu atıyoruz ve son olarak sonuçları gösteriyoruz.
Sonuçları gösterirken kullandığımız edit3.value=(toplam).toString(); şeklindeki kullanımıda delphi de örneğin Table1.FieldByName(ALAN_ADI).AsString method una benzetebiliriz.

Tüm bu işlemlerden sonra eğer kodların tanımlanmasında bir eksiklik ve hata yoksa kodlarımızı yani projemizi kaydediyoruz ve çalıştırıp tarayıcıda sonuçları gözlemliyoruz. Bir aksilik olmazsa Adet ve Birim Fiyat alanlarına gerekli değerleri girip "KDV Hesapla" başlıklı IWButton1 e tıkladığımızda aşağıdaki gibi bir sonuç alacağız.


Umuyorum benzer sonuçları almışsınızdır. Almamanız için hiçbir neden de yok. Dikkat ederseniz sayfa hiç yenilenmeden hesaplamayı yaptık.

Uygulamanın buraya kadarki kısmını temsilen oluşturduğum gif animasyon aşağıda


Şimdi uygulamamızı biraz daha geliştirip hesaplamaları yaptıktan sonra sonucu işlenmek üzere sunucuya gönderelim ve işlenmiş sonucu başka bir sayfada gösterelim.

Bunun için Delphi ana menüsünden File->New->Other… yolunu izleyip projeyi ilk oluştururken yaptığımız gibi açılan New Items penceresinde Sol TreeView den IntraWeb i ve sağ taraftan da NewForm u seçip OK buton ına tıklayalım karşımıza IntraWeb yeni form sihirbazı(New Form Wizard) çıkacaktır.


Resimdeki gibi Application Form RadioButton ı seçiliyken OK i tıklayalım Delphi bizim için boş bir IW uygulama formu oluşturacaktır. Formumuzun adını frmSonuc olarak değiştirelim ve forma 2 tane IWLabel bir tane de IWButton ekleyip IWLabel1 in Caption özelliğini “Genel Toplam =” olarak değiştirelim IWLabel2 nin ise adını(IWLabel2.Name) “IWLblToplam” olarak değiştirelim, IWButton1 in Caption özelliğini “Kapat” olarak değiştirip üzerine çift tıklayarak açacağımız Sunucu Taraflı OnClick olayişleyicisine aşağıdaki kodu yazalım;

Bu kod Sonuç formumuzu kapatıp ana forma dönmemizi sağlayacaktır.
Sonuç formu ile ilgili işimiz bitti artık formu projemizin diğer kodlarının bulunduğu dizine uSonuc.pas olarak kaydedelim. Bu aşamadan sonra uSonuc.pas unitinin Delphi 2006 IDE sinde tasarım Modunda görünümü aşağıdakine benzer bir şekilde olacaktır.


Şimdi ana formumuzda yapmamız gereken bazı değişiklikler var; ilk olarak IWButton1 den başlayalım önce IWButton1 in Caption ını “Gönder” olarak değiştirelim ve daha önce KDV hesaplamak için kullandığmız istemci taraflı OnClick olay kodunu silelim evet sileceğiz çünkü hesaplamayı başka yerde yapıp IWButton1 ile sunucuya işlemesi için bir bilgi göndereceğiz JavaScript kodunu sildikten sonra IWButton1 in Enabled özelliğini ObjectInspector den False yapalım böylece sunucuya gereksiz gönderide bulunulmasını engellemiş olalım tüm istemci taraflı kontrolleri yaptıktan sonra JavaScript kodu içerisinden tekrar Enable yapacağız.
Ana formumuzun Implementation bloğu altına

şeklinde oluşturduğumuz sonuç formuna bir referans ekliyoruz, referansı ekledikten sonra IWButton1 üzerine çift tıklayıp açılan kod penceresinde Button ımızın Sunucu Taraflı OnClick olay işleyici kodunu aşağıdaki gibi yazalım.

Kod açık, az önce düzenleyip kaydettiğimiz frmSonuc formunu Create ediyoruz ve Form üzerinde bulunan IWLblToplam label ının Caption özelliğine

şeklinde istemci taraflı hesaplanacak Genel Toplam bilgisi atayarak frmSonuc formunu gösteriyoruz. Burada bir şey dikkatinizi çekmiştir, Formu önce Create edip sonra gösteriyoruz normalde Win32 uygulamalarında ilgili Formları Delphi default olarak Proje kodu içerisinde proje başlatılırken oluşturulacak şekilde ayarlar aslında bunun sistem kaynaklarını tüketen iyi bir yaklaşım olmadığını IntraWeb sunucu uygulmanın sistem kaynaklarını çabuk tüketmemesi için Proje kodunda sadece Ana Form u Create eder diğer kodları gerek duyduğumuzda Create ederiz aşağıda bizim projenin kodunu görebilirsiniz.

Evet gelelim şimdi KDV hesaplama işlemini nerede yapacağımıza; Ben bu işi Birim Fiyat bilgisini temsil eden IWEdit2 nesnesine veri girilirken dinamik olarak hesaplamak istiyorum. Tahmin edeceğiniz gibi bu işi IWEdit2 nin istemci taraflı OnKeyPress olay işleyicisinde halledeceğiz.
IWEdit1 için herhangi bir değişiklik yok ayrıca IWEdit3-4 ve 5 in kodlarında da bir değişiklik yapmıyoruz çünkü onlar yine otomatik hesaplanıyorlar yalnız kodumuz biraz daha havalı olsun diye Ana formumuza bir Temizle buton ı eklemek istiyorum.
Bunun için IWButton1 in sol tarafına bir IWButton daha ekleyip Caption özelliğini “Temizle” olarak ayarlayalım.
Ana formumuzun son hali Delphi IDE sinde aşağıdaki gibi olacaktır.


Daha sonra IWButton2.ScriptEvents.OnClick istemci taraflı olay işleyicisine aşağıdaki JavaScript kodlarını girelim.

böylece Temizle button ına her bastığımızda tüm IWEditler temizlenecek Gönder button ı da disable edilecek.

IWEdit2 nin ScriptEvents.OnKeyPress olay işleyicisini ise aşağıdaki gibi değiştireceğiz.

Önce hazırladığım JavaScript kodunu ekleyelim ve daha sonrada kodu açıklayalım;

Kod içerisinde bir çok kısmı zaten yukarıda anlatmıştık sadece anlatmadığımız kısımlara bir değinelim
Dikkat ederseniz btn1 adlı bir JS nesnesi daha ekledik ve IWButton1 i assign ettik bunun nedeni başlangıçta veya temizleme işleminden sonra disable edilen Gönder button ının tekrar Enable etmek

Hesaplama işlemini dinamik yapacağımıza göre Adet alanına mutlaka bir veri girilmeli yoksa nasıl hesap yapacağız işte bu kod bloğunda IWEdit1 e girilen değerin en az 1(bir) e eşit olma şartını arıyoruz aksi takdirde işlem yaptırmayacağız.

Bir alt kısımda eğer bu koşul doğru ise yani IWEdit1 e girilen değer 1 veya birden büyükse IWEdit2 ye girilen değerin rakamsal olup olmadığı kontrol ediliyor değilse temizlenip tekrar giriş yapılması bekleniyor, eğer rakamsal değer girilirse istediğimiz koşullar tamamdır artık hesaplama işlemine geçebiliriz yani ikinci else den sonraki kısım, bu kısım ı daha önce açıklamıştık zaten tek fark ilave olarak Gönder button ı doğru koşullar sağlanınca enable oluyor. Artık kodumuzu kaydedip çalıştıralım ve tarayıcıda ki sonuçlarına bakalım aşağıda eklediğim gif animasyonunda bir önceki gif animasyonundan sonra yazdığım herşeyin özetini görebilirsiniz.

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