Web programcılarının en çok vaktini çalan unsur, hiç şüphesiz sayfalarda ki küçük ayrıntılarla uğraşmaktır. Ancak detaylara verdiğiniz önem, web sitenizin kullanım kolaylığını arttırırken kullanıcıların sitenizi tercih etme sebebi de olabilir. Hatırlarsanız, geçtiğimiz aylarda projelerimizde kullandığımız “Ajax Control Toolkit” araçları, değişik alanlarda bünyesinde bulundurduğu öğeler ile bizleri büyük bir zaman kaybından kurtarıyordu. Ajax ile entegre gelen Visual Studio 2008 ise Control Toolkit araçlarının kullanımını daha da kolaylaştırarak sayfamızdaki ASP.NET nesnelerini doğrudan bu araçlara bağlamamıza imkan veriyor.
Bizde şimdi Ajax tabanlı bir web sitesi kayıt formu hazırlayarak, hem bu araçları öğrenmeye devam edeceğiz hem de yeni platformun bizlere sağladığı kolaylıkları tanıma fırsatı bulacağız.

Üyelik sistemine sahip web siteleri, kullanıcı adı ve şifre dışında kullanıcılarıyla ilgili daha çok bilgi edinmek isteyebilirler. Yapmamız gereken kayıt sayfasında değişik kullanıcı giriş alanları barındıran bir form oluşturmak ve bu formdan gelen verileri veritabanımıza kaydetmek. Tabi bu formu hazırlarken ASP.NET’in Ajax yeteneklerinden faydalanarak kısa zamanda profesyonel bir tasarım yapmamız mümkün. Extender diye adlandırılan Control Toolkit kontrolleri Panel, TextBox, Image, DropDownList gibi çok kullanılan ASP.NET öğelerini geliştirerek onlara Ajax destekli özellikler katıyordu. Visual Studio 2008 ile araç kutusundan sayfamıza eklediğimiz bu nesnelerinin yanındaki bir ok tuşuyla “Extender Wizard” isimli sihirbaza erişiyor ve nesneleri otomatik olarak bu araçlara bağlayabiliyoruz.

Eklediğiniz nesnenin yanında beliren SmartTask menüsü ile Extender Sihirbazına ulaşabilirisiniz.

Geçtiğimiz aylarda “Bilişim Kahramanları Aramızda” lansmanlarıyla ülkemizde tanıtımı yapılan yeni sürüm Visual Studio ile hala tanışmadıysanız, http://msdn2.microsoft.com/en-us/vstudio/products/aa700831.aspx adresinden deneme sürümü yada ücretsiz Express versiyonlarını indirmeniz mümkün. Ajax eklentileri programla birlikte geldiği için tekrar kurmanıza gerek yok fakat projemizde kullanacağımız ControlToolkit öğelerini yüklemeye ihtiyacınız olacak. VS 2008 kurulumunu gerçekleştirdikten sonra http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=4923 adresindeki ControlToolkit paketini indirip, SampleWebSite\Bin klasörü altındaki “AjaxControlToolkit.dll” dosyasını araç kutusu üzerine sürüklerseniz, yeni Ajax oyuncaklarınız otomatik olarak Visual Studio uygulamasına kurulmuş olacak. Bütün adımları tamamlayınca, bazı toolkit elemanlarını kullanarak hazırlayacağımız örnek projemize başlayabilirsiniz.

AjaxControlToolkit.dll dosyasını sürükleyince kurulum otomatik gerçekleşiyor.

İŞLEMLERE BAŞLIYORUZ
VS 2008 altında Ajax eklentileri hazır geldiği için yeni web sitesi oluştururken sitenizin Ajax destekli olacağını belirtmenize gerek yok. ASP.NET web sitesi oluşturduktan sonra, Toolbar’ın “Ajax Extensions” sekmesi altındaki “ScriptManager” ve “UpdatePanel” nesnelerini sayfamıza sürükleyerek sayfamıza Ajax yetenekleri kazandırıyoruz. Formumuza ekleyeceğimiz nesnelerin güzel görünmesi için bir tablo altında tutulması tercih edilir. Ancak Control Toolkit’in sahip olduğu bazı görünüm araçları tablolar ile çalışamadığı için, bütün formu bir Panel içerisinde oluşturmamız iyi olacaktır. Sayfamıza bir Panel nesnesi ekledikten sonra boyutlarını ayarlayalım ve nesnenin yanında görünen ok tuşuna basarak “Add Extender” seçeneğine tıklayalım. Yukarıda sözünü ettiğimiz Extender sihirbazı Panel nesnesi için kullanabileceğiniz bütün araçlar ile karşınızda belirmiş olmalı.

Extender Wizard ile ekleyebileceğiniz bütün araçları görebiliyorsunuz.

Projemizde kullandığımız panelimiz için görsel araçlardan DropShadow ve RoundedCorners öğelerini seçiyoruz. Ekleme işleminden sonra, Extender nesnesi Panel ile otomatik bağlanıyor ve özellikleri Panel’in özellikleri altından değiştirilebiliyor. RoundedCorners kontrolü panelimizin yuvarlak kenarlara sahip olmasını sağlayarak bizi resim veya JavaScript kodlarıyla uğraştırmıyor. “Corners” özelliği ile hangi köşelerin biçimini değiştirmek istediğinizi belirliyebiliyor, Radius ile açı değeri verebiliyorsunuz. DropShadow ise kullanıldığı panele gölgelendirme yapmaya yarayan bir kontrol. Burada önemli olan, yuvarlak hatlara sahip panelimize uyması için DropShadow’un Rounded özelliğini “True” yapmak ve iki nesnenin açı değerlerinin aynı olduğundan emin olmak.

Extender kontollerinin özelliklerine bağlı olduğu nesnenin altında ulaşabilirsiniz.

Formumuzun arka planını süsleyecek olan panelimizi hazırladıktan sonra bir tablo yatarak içerisine form elemanlarını eklemeye başlayabiliriz. Kişisel bilgiler ve üyelik bilgileri olarak ayırdığımız üyelik formuna ilk önce isim, mail ve doğum tarihi için gerekli TextBox nesnelerini ekliyoruz. Tekrar Extender Wizard’a girecek olursak bu nesneler için desteklenen birçok aracın olduğunu görebiliriz. Öncelikle tasarımımız için kullanacağımız TextBoxWatermarkExtender öğesini tanıyalım. Bu kontrol ile TextBox objelerinin görünümünü değiştirebilir, başlık (caption) ifadelerinin kutunun içerisinde yer almasını ve dinamik olarak değişebilmesini sağlayabiliriz. WatermarkCssClass özelliği ile WatermarkExtender, harici bir css dosyasında veya önceden tanımladığınız stil nesnesini kullanarak TextBox’un seçili değilken nasıl görüntüleneceğini ayarlayabiliriz. Text özelliğine ise kutu seçili değilken içerisinde yazmasını istediğiniz metni girebilirsiniz. Biz örneğimizde aşağıdaki stili kullanacağız:

Açıklama: TextBoxWatermarkExtender örnek stili.


.secili {
height:18px;
width:148px;
}

.secili_degil {
height:20px;
width:150px;
padding:2px 0 0 2px;
border:1px solid #BEBEBE;
background-color:#F0F8FF;
color:gray;
}

ZAMANINIZ DEĞERLİDİR

Control Toolkit araçları içerisinde en çok kullanılanlardan biri olan CalendarExtender ile tarih girişlerini birkaç tıklamayla takvim üzerinden alabilirsiniz. Kodlanması çok uzun zaman alabilecek böyle bir kontrolün hazır gelmesi gerçekten çok kullanışlı. Seçtiğiniz TextBox’a bu aracı bağladıktan sonra, kullanıcıların tıkladığında açılan bir takvim hazırlanmış oluyor. Ancak bu opsiyonu bir resim veya buton ile çalıştırmak da mümkün. Örneğimizde doğum tarihi alanının yanına bir Image nesnesi ekliyoruz. Bu işlemden sonra, CalendarExtender’in PopupButtonID özelliğine Image nesnesinin ID’sini yazarak takvimin resim tıklandığında açılmasını sağlıyoruz. Takvim eklentisinin stilini ve döndürdüğü değeri ayarlamanız da mümkün. Format özelliği ile tarihsel formatlama yaparak kutuya yazılan gün (d), ay (M) ve yıl (y) biçimini belirleyebilirsiniz (örneğin dd.MMM.yyyy).

CalendarExtender ile birkaç tıklamayla takviminiz hazır.

Kullanıcılarınızın ileride kötü sürprizlerle karşılaşmaması için kendilerine iyi bir şifre seçmesi önemlidir. Ancak çoğu kullanıcı rahatlığına düşkündür ve güvenilirliği kendisine aktarılmazsa hafızasını yoracak şifrelerden kaçınır. İşte bu noktada PasswordStrengthExtender aracı devreye giriyor ve üyelik sırasında şifre girişinin yanında belirerek yazılan şifreye dair kullanıcıya bilgi veriyor. Text ve BarIndicator isminde iki tipi bulunan bu kontrol ile yazılı veya görsel olarak şifrenin sağlamlığını aktarabilirsiniz. Örneğimizde kullandığımız Text tipindeki kontrolün Prefix özelliğine bir tanım yazısı ekliyor ve TextStrengthDescriptions özelliğine “;” karakteriyle ayrılmış güvenlik seviyelerini yazıyoruz (düşük;orta;yüksek gibi). Bu nesne toplamda 10 farklı seviyeye kadar çalışabiliyor. Ayrıca üyelik sisteminize göre tercih edilen şifre uzunluğunu (PreferredPasswordLength), içermesi gereken minimum numerik, sembol ve büyük küçük harf sayısını belirliyebilir, CalculationWeightings özelliğiyle bu sayıların hesaplamadaki ağırlığını arada “;” karakterleri kullanarak değiştirebilirsiniz (ör: 10;5;5;10).

Kullanıcılarınızı şifrelerinin güvenliğine dair bilgilendirin.

Üyelik formlarında sık kullanılan diğer bir nesne olan CheckBox’lar için de değişik genişleme kontrolleri mevcut. Belirli CheckBox objelerinden sadece bir tanesinin seçilebilmesine izin veren MutuallyExclusiveCheckBox kontrolü bunlardan biri. Normalde çoktan seçmeli alanlar için RadioButton nesneleri kullanmaya aşinayız. Fakat bu nesneler seçildikten sonra iptal edilememesi ve bir seçeneğe sabitlenmesi nedeniyle bazı durumlarda kullanımı tercih edilmiyordu. Kullanıcıların doldurmasını zorunlu olmayan alanlarda kullandığımız CheckBox nesnelerine MutuallyExclusiveCheckBox kontrolü ekleyerek bir nevi radio button gibi davranmasını sağlayabilirsiniz. Bu sayede kullanıcı seçimini yaptıktan sonra alanı doldurmaktan vazgeçerse seçimini iptal edebilir. Örneğimizde doldurulması zorunlu olmayan cinsiyet alanında Erkek ve Bayan seçimleri CheckBox vasıtasıyla işaretleniyor. Ancak iki cinsiyeti seçmek çok anlamlı olmayacağından eklediğimiz extender kontrolü ile sadece bir tanesinin seçilebilmesini mümkün kılıyoruz. Bunu yapabilmek için farklı CheckBox’ların extender ayarlarındaki Key özelliğine aynı değeri vermeniz yeterli. Aynı Key değerine sahip CheckBox extender nesneleri arasından sadece birinin seçilmesine izin veriliyor. CheckBox için kullandığımız diğer araç ToggleButtonExtender ise nesnelerin görünümünü değiştirmemize imkan veriyor. Mevcut check box’lardan sıkıldıysanız, extender nesnesinin CheckedImageUrl ve UncheckedImageUrl özelliklerine seçtiğiniz bir resmin adresini yazarak seçimlerin resimlerle ifade edilebilmesini sağlayabiliyorsunuz.

Örnek projemizde Ülke, Şehir ve Semt girişlerini sağlayan DropDownList nesneleri için CascadingDropDown kontrolünü kullanabilirsiniz. Formunuzda birbirine bağıntılı DropDown öğeleri bulunuyorsa bu kontrol ile seçim sırasına göre nesneleri aktif hale getirebiliyorsunuz. Extender’i kullanmak için DropDown’ları dolduracak bir web servis hazırlamanız gerekli. Bu aşamadan sonra ParentControlID özelliğine kendinden önce gelmesi gereken nesnenin ID’sini yazarak aradaki bağlantıyı kuruyoruz. PromptText ileti seçili değilken yazacak metni belirlerken, ServiceMethod özelliğine mevcut listeyi dolduran web servis metodunun ismini yazmalısınız.

CONTROL TOOLKİT’İ KEŞFEDİN

Tasarladığımız kayıt formunu artık tamamlamış bulunuyoruz. ASP.NET Ajax altyapısı, hazırlanması saatler hatta günler sürebilecek birçok ayrıntıyı dakikalar içerisinde sitemize uygulamamızı sağladı. Sık kullanılan toolkit kontrollerine değindiğimiz bu proje üzerinde değişik tasarım, doğrulama ve güvenlik kontrollerini de ekleyerek daha profosyonel hale getirmeniz mümkün. ControlToolkit araçlarının kullanımını http://www.asp.net/AJAX/AjaxControlToolkit/ adresinden inceleyerek keşfetmenizi tavsiye ederim. Visual Studio 2008 ile kullanımı daha kolay hale gelen bu kontroller ile kodlaması uzun zaman alan birçok özelliği çok kısa bir sürede sitenize ekleyebiliyorsunuz. Sitenizin içeriği ve işlevselliği önemli olsa da, unutmayın ki şeytan ayrıntıda gizlidir.

Örnek uygulamayı indirmek için tıklayın: Uygulama

p.s. Bu yazı Mayıs 2008 tarihli PC Magazine dergisi makalemden derlenmiştir; kullandığım IDE ve toolkitlerin yeni versiyonlarını yüklemenizi tavsiye ederim.

Related posts:

  1. ASP.NET Ajax kullanarak iletisim formu hazirlamak
  2. ASP.NET Ajax Kullanarak Facebook Uygulamasi Gelistirmek
  3. ASP.NET AJAX ile dinamik RSS okuyucu hazirlamak