ASP.NET ile Kendi Toolbar ımızı Yapalım
Bildiğiniz gibi ASP.NET de textbox, button, listbox vs. gibi pek çok hazır kontrolü kullanabiliyoruz. Ayrı işlevselliği olan bu kontrollerin yaygın olarak kullanılanları, .net geliştiricileri tarafından oluşturulup kullanımımıza sunulmuştur.
Aslında bu kontrollerin bir çoğu tecrübeli kullanıcı ve yazılımcıların bildiği arabirimler, sadece alt yapı .net leştirilmiş.
.NET aynı zamanda diğer şahısların oluşturduğu ve yine .net platformu için hazırlanmış kontrolleri kabul ediyor. Daha basit anlatmak gerekirse, sizde bir kontrol oluşturup, bunu kolayca proje ve uygulamalarınızda kullanabilirsiniz. Yapmanız gereken, kullanıcı kontrolü oluşturma sistematiğine sadık kalmanız. Eskisi ile kıyaslandığında bu sistematik o kadarda karmaşık değil (ama basit de değil).
Ancak bu yazımda ben bir kullanıcı kontrolünün nasıl oluşturulduğuna girmeyeceğim.
Bir kontrolün projemize nasıl dahil edileceğini ve nasıl kullanılacağını anlatacağım.
Bunun için yine microsoft’un ürettiği fakat .NET kütüphanesi içinde doğrudan gelmeyen “internet Explorer web kontrollerinden” Toolbar’ı seçtim.
Toolbar ile yapılmış basit bir uygulama geliştireceğiz.
Bu uygulamanın arabirimi aşağıdaki gibi olacak:
Sayfa içindeki toolbarın “web sayfam” butonuna basıldığında herhangi bir sayfaya yönlendirme olacak. Excel butonuna basıldığında bir Excel sayfası açılacak.
”Kırmızı”, “mavi” ve “yeşil” butonlarından herhangi biri tıklandığında, yazı çerçevesinin rengi bu renklerden biri ile yer değiştirecek.
Dropdownlist den seçtiğimiz herhengi bir elemana ait mesaj sayfada görüntülenecek.
Son olarak “textbox” a yazdığımız bir yazı göster butonuna bastığımızda sayfada görüntülenecek.
“IE Toolbar” bildiğimiz toolbarın, internet Explorer da kullanabileceğimiz ve VS.NET de kolayca düzenliyebileceğimiz bir biçimi. Bir toolbar’da bulunabilecek her şey mevcut ve bunlar çok kolayca düzenlenip özelleştirilebiliyor.
Şimdi adım adım kendi toolbarımızı oluşturalım.
Öncelikle IE web konrolünü bulup projemize dahil etmeliyiz.
İnternet Explorer Web Controlleri:
Bu kontroller şimdilik dört adettir: “Multipage”, “Tabstrip”, “toolbar” ve “Treeview”.
Hepsi bir assembly de (dll de) toplanmış, kullanışlı ve yetenekli kontrollerdir.
Bu kontroller uygulamamızı geliştirirken çok büyük yetenek, esneklik ve kolaylık sağlarlar.
Ben bugün bunlardan “toolbar” ı enine boyuna incelemek istedim. Diğerlerini daha sonra inceliyebiliriz. Öncelikle gereken assembly i uygulamamıza dahil etmeliyiz.
Bunun için asp.net sitesindeki http://www.asp.net/IEWebControls/Download.aspx?tabindex=0&tabid=1
Adresinden kontrollerin alt yapısını oluşturan kodları indirmeliyiz. Gelen dosya IEWebControls.exe isminde 360 kb lık bir exe dosyası. Exe olduğuna bakmayın, komponentlerin kaynak kodlarını oluşturan dosyaları bir klasöre açıyor ve webctrl_client isimli klasörün içinde bulunan kullanıcı taraflı scriptleri uygulamanızın kök dizininine (bildiğiniz gibi bu eğer değiştirmediyseniz wwwroot dur) ekliyor.
Yoksa herhangi bir “register” işlemi yapmıyor. Sizin için önemli olan “Microsoft.Web.UI.WebControls.dll” isimli dosyayı elde etmek. Diğer bir ifade ile bir hosting firmasından hizmet alıyorsanız, bu firmaya herhangi bir program yükletme talebiniz olmayacak sadece “Microsoft.Web.UI.WebControls.dll” isimli assembly nizi “bin” uygulama dizininize eklemeniz ve webctrl_client klasörünü kök dizine kopyalamanız yeterli. Ancak bu dll i elde etmek için indirdiğiniz dosyaların bazılarını “build” etmeniz gerekiyor. Exe yi çalıştırdığınızda klasöre açılan dosyalar aşağıdakilerdir:
Yapmanız gereken build.bat çalıştırıp dll iniz elde etmek. Ancak gelen bat dosyasında aşağıdaki gibi bir bir değişiklik yapmanız gerekecek:
@if "%_echo%"=="" echo off
if not exist build mkdir build
C:\WINNT\Microsoft.NET\Framework\v1.1.4322\csc.exe /out:build\Microsoft.Web.UI.WebControls.dll @IEWebControls.rsp
xcopy src\Runtime build\Runtime /E /Y /I /Q
Şimdi çalıştırırsanız, dll iniz build klasörü içinde elde edeceksiniz.
Bütün bunlarla uğraşmak istmiyorsanız bu dll i ve webctrl_client klasörünü
http://www25.brinkster.com/zaferdemirkol/Microsoft.Web.UI.WebControls.zip
Adresinden indirip kullanabilirsiniz.
VS.NET de Internet Explorer Web Kontrolleri kullanımı
Artık elimizde kontrollerimizin alt yapısını oluşturan “assembly” miz var. Yapmamız gereken bunu uygulamamıza dahil etmek. Uygulamamıza dahil etmek gayet kolay. Bunun için “Microsoft.Web.UI.WebControls.dll” dosyamızı uygulamamızın “bin” dizinine kopyalamalıyız veya taşımalıyız. Hepsi bu kadar. Artık kontrollerimizİ uygulamamız da kullanabiliriz.
Eğer VS.NET kullanıyorsanız, kontrollerin arabirim, özellik ve şekilleri gözükür.
Tabii ki VS.NET kullanmak hayatımızı oldukça kolaylaştırır. VS.NET de yapmamız gereken “Microsoft.Web.UI.WebControls.dll” dosyasını sürükleyerek, “Toolbax” daki herhangi bir tab’a (mesela general tab ı içine ) bırakmak. Bunun sonucunda toolbax’ta kontrollerimiz görünür olacak ve tabi ki “bin” dizini içine “Microsoft.Web.UI.WebControls.dll” dosyası otomatik olarak eklenecek.
Kontrolleri eklemek için Başka yöntemlerde mevcut ancak birtanesini bilmemiz yeterli.
Bu şekilde projeye dahil etme işlemi sadece Internet Explorer Web kontrolleri için değil diğer bütün kontroller içinde geçerlidir.
Sonuçta toolbax taki görüntü şu şekilde olmalı:
Artık kontrollerimiz kullanımımıza hazır. Yapmamız gereken istediğimiz kontrolü sürükle bırak ile sayfaya dahil etmek. Yazımın konusu Toolbar olduğuna göre, toolbar’ı sayafaya dahil edelim.
IE Toolbar:
Toolbar’ı sayfaya dahil edip, properties penceresini incelersek kontrolümüzü düzenlememizi sağlayacak bütün özellikleri görürüz. Bu özellikler daha çok toolbar’ın şekilselliğini düzenlemeye yarayan renk, yazı tipi gibi özelliklerdir. Bunların içinde toolbar’a herhangi bir eleman (buton, textbox vs) eklemeye yarayan özellik ise: items’tır.
Buraya gelip butona tıklarsak karşımıza aşağıdaki gibi bir pencere çıkar
Buradan toolbarın nesnelerini kolayca ekleyip çıkarabilirsiniz. Aşağıya doğru açılan mönüde 7 ayrı çeşit toolbar kontrolü olduğunu görüyorsunuz. Bunlar her biri toolbar mantığı içinde oluşturulmuş kontroller. Şimdi kısaca bunları inceliyelim. Benim bu yazı için oluşturduğum toolbarın görüntüsü aşağıdaki gibidir. Diğer bir ifade ile son resmimizdeki elemanların oluşturduğu görüntü aşağıdaki gibi:
Gördüğnüz gibi tipik bir toolbar ama bir farkla, her şeyini biz oluşturuyoruz, istediğimiz gibi düzenliyoruz.
Son iki resimden de anlaşılacağı gibi toolbarımızda 11 tane eleman var. Bunlardan 5 tanesi seperator. Geri kalan 6 tanesi ise nitelikli elemamanlar. Biz uygulamamızda “Toolbarlabel” dışında bütün kontrolleri kullanıyoruz.
Elemanları yakından incelersek .
Toolbarbutton: bildiğimiz butona karşılık geliyor.
ToolbarCheckButton: Normal butona çok benzer ancak tıkladığınız zaman eski haline dönmez. Basılmış şekilde durur. eski haline dönmesi içi, tekrar tıklamanız gerekir.
ToolbarCheckGroup: ToolbarCheckButton benzer, ancak, gruptaki butonlar bir bütün oluşturur. Gruptaki herhangi bir butona tıklandığında, daha önce tıklanmış olan buton, eski haline döner.
Toolbarseperator: kontroller arasındaki ayırım çizgisini oluşturur.
ToolbarLabel, Toolbartextbox ve Toolbardropdownlist, toolbar için düzenlenmiş kendi adlarındaki kontrollere çok benzeyen kontrollerdir. Bunların nasıl kullanıldığını birazdan göreceğiz.
Olayların Yakalanması:
Toolbar kontrolünü şekilsel olarak düzenlemek için uzman veya tecrübeli bir yazılımcı olmanıza gerek yok. Toolbar’a nesnelerin eklenmesi ve düzenlemesi son derece basittir.
Biraz zaman ayrırsanız kolayca yapabilirsiniz. Esas sorun bu nesnelere programatik olarak hakim olabilmek. Diğer bir ifade ile kullanıcının bu nesnelerle etkileşimini sağlamak.
Bunu diğer bir anlatımı “olayları yakalamak” tır.
Toolbar ve ve diğer “ie web kontrolleri” açık kod’dur. Biraz önce indirdiğimiz “exe” ile oluşturduğumuz klasörden bu kodları görebilir ve düzenliyebilirsiniz. “ie web kontrollerinin” esas sorunu yeterince kaynak bulunamamasıdır. Örneğin Toolbarın, “ToolbarLabel”, “Toolbartextbox” ve “Toolbardropdownlist” gibi elemanlarının olaylarının nasıl yakalanacağına dair herhangi bir kaynak bulmak bu yazının yazıldığı tarih itibari ile mümkün değildi. Yada bu kaynaklara ben ulaşamadım.
Örneğin asp.net, msdn ve bilinen diğer kaynak ve forumlar da örneğin “Toolbardropdownlist” den seçilen herhangi bir elemana ait bir işlem yaptırmanın nasıl olacağına dair bir bilgiyi doğrudan bulmanız mümkün değil(di?)
Biraz zaman harcayarak toolbar elemanlarının olaylarını kendi başıma çözdüm. Birazdan bunları sizinle paylaşacağım. Yukarıdaki uygulamamızın çalışması için bu olayları bilmek gerekir.
Öncelikle uygulamamın görünen yani HTML biçimini aşağıda veriyorum:
Kod kısmı ise aşağıdadır:
Yukarıdaki kodlar ile ilgi çok fazla detaya girmeye gerek yok.
Butonlar’ın temel olayı “ButtonClick” dir buna göre gerek grup butonları olsun gerekse müstakil butonlar, sonuçta her biri bu olayın yordamında değerlendirilebilir. Buna göre örneğin bir müstakil butona ait tıklama olayı, o butonun “id” sinin elde edilip
If sender.id.ToString = "ws" Then
Şeklinde karşılaştırması yapılarak elde edilebilir.
Söz konusu olan grup butonlar veya checkbuttonlar ise, onlarında tıklanıp tıklanmadığı bilgisine
If sender.selected() Then
Karşılaştırması ile ulaşılabilir.
Böylece buton seçili ise, yani butona basılı durumda ise işlem yapılır.
Son olarak dropdownlist deki seçilmiş elemana ve textbox a yazılan bir yazıyı elde etmek için yapılanlara geldi sıra.
Buradaki mantıkta gayet basit, öncelikle toolbar kalemleri içindeki ulaşmak istediğimiz kontrolün indeks sırasını bilmeliyiz, bizim örneğimizdeki
Toolbar1.Items(8)
şeklindeki bir ifade toolbardaki toolbardropdownlist’i temsil eder.
daha sonra bunu bir nesne değişkenine atamalıyız
Dim drop As Object
drop = Toolbar1.Items(8)
artık bu nesnemiz Toolbardropdownlist temsil etmektedir. Toolbardropdownlist nesnesininde en önemli özelliği selectedindex() dir. Sonuçta Toolbardropdownlist deki hangi elemanın seçildiğini
If drop.selectedindex() = 0 Then
Label2.Text = "sinema seçtin"
End If
Şeklinde indeks numarasına göre elde edebiliriz. Ve bunun da örneğin sayfa yeniden yüklendiğinde yapılmasını isteyebiliriz.
Aynı şeyleri textbox içinde söyliyebiliriz. Textbox ında en önemli özelliği “text” dir. Bunuda aynı mantıkla elde ediyoruz ve yandaki butona basılıp tekrar yüklendiğinde, textbox içindeki metin elde edilip, yazdırılıyor.
Son olarak, Autopostback lerin nerelerde kullanıldığına dikkat ediniz.