Web Kontrolleri ve "Olay"lar
Web kontrollerinin kullanımı ve event-driven kavramının açıklamasıyla birlikte olayı özetleyen güzel bir örnek
24.05.2002
ASP.NET ile birlikte gelen Web kontrolleri uygulama geliştiricisinin (application developer) önüne çok büyük imkanlar seriyor. Web Formları olarak da adlandırılan bu teknoloji sayesinde form tasarlamak yerini form programlamak ya da geliştirmek kavramına bırakıyor. Programcı kontrolleri istediği şekilde dizayn edip sayfaya yerleştirebiliyor, ve kontrollerin stillerini dinamik olarak değiştirebiliyor.
ASP.NET in diğer bir yeniliği ise "event-driven" olması.. Ne demek oluyor ki bu? İşin içine mantık koymadan tercüme edersek "olay-sürülen" gibi bir anlam çıkıyor aslında. Ama biz bundan olay-tetikli gibi bir şey anlayabiliyoruz. Anlamamız gerekiyor desek daha doğru olur sanırım. Yani; uygulamalar, olaylar tarafından sürülebiliyorlar. Olaylar olduğunda programcının yazdığı kodlar yerine getiriliyor.
Çok basit ve güzel bir örnek vererek "event-driven" olmanın ne olduğunu tam olarak göstermek istiyorum.
Sub eve_girince(s As Object, e As eventargs) ışıklar.açık = "true" pencereler.açık = "false" haber.ver() End Sub |
"eve_girince" bir olay, ve meydana geldiğinde (occur) yerine getirilecek işler bu olaya ait Sub (alt-program) içerisinde.. Page_load ''u eve_girince olayına benzetebiliriz. İkisi de birbirine benzer olaylardır.
Olayların gidişine kendimizi daha fazla kaptırmadan asıl konumuza dönelim. Tanımlayacağımız olaylar sayesinde web kontrollerinin kendi kendilerini tetiklemelerini sağlayabiliriz. Kontrolleri kontrolümüz altına alabiliriz. Bir ListBox kontrolünde seçim yapıldığında, yapılan seçime göre başka işlerin yerine getirilmesini sağlayabiliriz mesela, ve bunun için ListBox ''un SelectedIndexChanged isimli olayını kullanırız. Ya da bir Button kontrolünün Click olayını kullanarak programı tetikleyebiliriz.
Tüm bunlar bize yazacağımız programın kullanıcının verebileceği her türlü tepkiyi hesaba katarak uygulamalar geliştirmemizi sağlar. Çeşitli Web kontrollerini ve bunlara ait olay veya yöntemleri kullanarak ziyaretçiye iş çıkarmayan, kullanışlı, görevine sadık, dinamik ve göze çok hoş görünen formlar hazırlayabiliriz. Programcının yapabilirliği artacağı için ortaya çıkan uygulama çok daha zengin olabilir.
Web Kontrollerini Nasıl Güzel Yaparız ?
Web kontrollerinin nasıl daha güzel görünümlü yapılabileceğinden kısaca bahsetmek ve konuya bir TextBox kontolü ile girmek istiyorum. Çünkü TextBox kontrolü ''in mirasçısı olması nedeniyle en çok kullanılacak kontrollerden birisi olacaktır. Sayfamıza bir TextBox kontrolü yerleştirmek için en basit hali ile şöyle bir kod kullanıyoruz.
<asp:TextBox id="txtMetin" runat="server"/> |
Bu kodu kullanarak sayfaya koyacağımız kontrol göze hoş görünmeyeceği için programlamadan önce veya sonra makyaj yapmak gerekecektir. Web kontrollerine üç şekilde makyaj yapabiliriz. Server bu kodu derleyip client ''a gönderdiğinde karşımıza şeklinde bir kod çıkar. Dolayısıyla sayfamızın style tanımlarında input tag ''i için belirteceğimiz her stil bu koda da uygulanacaktır. Bu demek oluyor ki; web kontrollerinin server''dan ne olarak döndüklerine göre stiller belirleyip makyaj yapabiliriz.
İkinci bir yöntem ise VS.NET ''in tercih ettiği gibi işi kontrollerin kendi içerisinde style tanımlamaları kullanmaktır. VS.NET aracılığıyla yapılan görünüm değişiklikleri koda style tag ''i ile yansıtılır. Style tag ''inin yazım kuralları ise HTML ''deki ile aynıdır.
<asp:TextBox id="txtMetin" runat="server" style="Font-Family:Verdana; Font-Size: 11px;" /> |
Diğer makyaj yöntemi ise kontrolün kendi attribute lerini kullanmaktır. Fakat form içerisinde çok fazla TextBox kontrolü kullanıyorsanız hepsi için tek tek aynı attribute leri yazmak sıkıcı ve zor olabilir. Seçim size kalmış deyip TextBox kontrolünün kendi attribute lerini kullanıyor ve makyaj yapıyorum. Kod aşağıda bakmanızı bekliyor..
<asp:TextBox id="txtMetin" runat="server" Font-Name="Verdana" Font-Size="8" Font-Bold="True" BorderStyle="Solid" BorderColor="Red" BorderWidth="1px" BackColor="Yellow" ForeColor="Blue" MaxLength="7" Width="90" ReadOnly="False" TextMode="SingleLine" /> |
Kullandığım 14 attribute ü görüp makyajdan nefret etmeyin sakın. Hepsini kullanmak zorunda değilsiniz, istediğiniz özelliği varsayılan (default) ayarında bırakabilirsiniz. ReadOnly özelliğinin değerini False yapmanıza gerek yok, varsayılan olarak değeri zaten False olacaktır. Veya tek satırlı bir (normal de diyebiliriz) TextBox için yeniden TextMode değeri belirtmenize gerek yoktur. Kodu çalıştırırsanız karşınıza g.saray ve f.bahçeye aynı uzaklıkta bir TextBox kontrolü çıkacaktır. TextBox da kullandığım özelliklerin ne anlama geldiğini eminim hemen anlamış ve kafanıza yazmışsınızdır. Ben yine de bazılarına kısaca değineceğim.
Font-Size : Bu özellikde kullandığım değer punto türünde, rakamın sonuna px ekleyerek pixel türünde değer verebilirsiniz.
Font-Bold : Varsayılan değeri False olan bu özelliği TextBox ''a yazılanların koyu görünmesini istediğinizde kullanabilirsiniz
BackColor : Adından da anlaşılacağı gibi kontrolün arka plan rengi..
ForeColor : Bu ise kontrolün içerdiği yazının rengi..
ReadOnly : Varsayılan değeri False olup içeriğinin ziyaretçi tarafından değiştirilememesini istediğiniz kontrollerde kullanabileceğiniz bir özellik..
TextMode : En can alıcı özelliklerden birisi.. Alabileceği üç değer var. Varsayılan değeri olan "SingleLine", TextBox ''u textarea yapan "MultiLine" ve "Password"..
Benim yukarıdaki TextBox kontrolünde kullandığım özelliklerin çoğunu diğer web kontrollerinde de kullanabilirsiniz. Font-Name, Font-Size, Font-Bold gibi özellikleri kullanarak yine çok kullanılacağını tahmin ettiğim Button, ListBox, DropDownListBox ve Label kontrollerinin görünümünü değiştirip sayfadaki duruşlarını ayarlayabilirsiniz.
Verdiğim örnek kodu bir ".aspx" dosyasına kaydedip çalıştırdığınızı tahmin ediyorum. ASP.NET motoru tarafından üretilip tarayıcıya gönderilen koda göz atarsanız TextBox için kullanılan tag ''inin son şeklini görebilirsiniz. ASP.NET görünüm ile ilgili özellikleri tag içerisine ekleyeceği style attribute ''ü ile uyguluyor. Yani bu için html ve css ''den farklı şeyler kullanılmıyor. ASP.NET motoru kontrol içine yazılan özellikleri prosedüre göre css kodlarına dönüştürüp ilgili tag ''e ekliyor.
Bu konuyu kapatmadan önce çok faydalı olacağını düşündüğüm bir yöntemden bahsetmek istiyorum. Önce senaryoyu yazıyım. Elinizde 6 adet TextBox kontrolünüz var. Kontrollerin görünüşü veya davranışlarıyla ilgili özelliklerini tek bir değeri değiştirerek ayarlamak istiyorsunuz. 6 kontrolün özelliklerini tek tek değiştimek sıkıcı olsa gerek. Bunu kontrollerin özelliklerine istediğiniz olay içinde değer vererek yapabilirsiniz. Senaryomuz için Button,ListBox ve Label kontrolleri kullanacağız.
Örneğimizin browser görünümü
| ornek2.aspx | |
<%@ Page Language="vb" Debug="true" %> <%@ Import Namespace="System.Drawing" %> <script language="VB" runat="server"> Sub Page_Load(Source As Object, E As Eventargs) If Not Page.IsPostBack Then With lstYazitipi.Items .Add("Arial") .Add("Verdana") .Add("Tahoma") End With With lstBuyukluk.Items .Add("8") .Add("10") .Add("12") End With With lstRenk.Items .Add("Blue") .Add("Red") .Add("Green") End With lstYazitipi.SelectedIndex = 0 lstBuyukluk.SelectedIndex = 0 lstRenk.SelectedIndex = 0 End If End Sub Sub btnYazi_onclick(Sender As Object, E As Eventargs) Dim strRenk As String = lstRenk.SelectedItem.Text Dim clrRenk As Color = ColorTranslator.FromHtml(strRenk) Dim strFontSize As String = lstBuyukluk.SelectedItem.Text lblYazi.Font.Name = lstYazitipi.SelectedItem.Text lblYazi.Font.Size = FontUnit.Parse(strFontSize) lblYazi.ForeColor = clrRenk End Sub script> <html><head><title>Kontroller ve Olaylartitle>head><body> <form runat="server"> <asp:ListBox id="lstYazitipi" runat="server" font-name="verdana" font-size="8"/> <asp:ListBox id="lstBuyukluk" runat="server" font-name="verdana" font-size="8"/> <asp:ListBox id="lstRenk" runat="server" font-name="verdana" font-size="8"/> <asp:Button id="btnYazi" runat="server" font-name="verdana" font-size="8" OnClick="btnYazi_onclick" text="OK"/><br><br> <asp:Label id="lblYazi" runat="server" text="Kontrolsüz güç, güç değildir"/> form> body>html> | |
Örneğimizde gördüğünüz gibi uzun bir kod yazmamız gerekti. 3 tane ListBox, 1 ''er tane de Button ve Label kontrolleri kullandık. Tüm bu kontrolleri tag i ile çevreleyip runat="server" demeyi unuttuk ama sonra düzelttik. Kontrollerin görünüşünü kendi içlerinde belirttiğimiz özelliklerle ayarladık. Sayfamızın yüklenişi sırasında 3 ListBox kontrolümüzün içlerini doldurduk. Bir "if" kontrolü ile de Page.IsPostBack olup olmadığına baktık. Bakmasaydık ne olurdu ? Sayfanın her yüklenişinde bu sub ''ın içeriği çalıştırılacağı için her seferinde aynı seçenekler listelere eklenir ve listeler şişerdi. Sayfa içerisindeki bir butonun tıklanmasıyla sayfanın yenilenmesi bir PostBack tir.
btnYazi isimli butonumuzun tıklanmasıyla tetiklenen olay olan btnYazi_onclick ''in içerisinde yabancı gelebilecek kodlar var. Bu arada sayfamızın başında System.Drawings isimli namespace ''i import ettiğimizi unutmayalım. Bu namespace ''i türü Color olan bir değişken tanımlamak için kullandık. Renk listesindeki seçimi bir string değişkene alıp if kontrolü ile rengi belirledik. Renk belirlemek için türü Color olacak şekilde tanımladığımız renk değişkeninin özelliklerini kullandığımıza dikkatinizi çekmek istiyorum. Daha sonra çok basit bir şekilde Label kontrolümüzün Font özelliğinin "Name" özelliğine değer atadık. "Size" özelliğine değer atarken lstBuyukluk kontrolunun seçili elemanının değerini FontUnit.Parse yönteminin parantezlerine teslim etmemiz gerekti. Ve son olarak ForeColor özelliğine clrRenk değişkenini atadık.
Font.Size ve ForeColor '' a atama yapmak için neden fazladan kod yazmamız gerektiğini sormuşsunuzdur belki. Her iki özelliğe String türünde atama yapmak isteyince hata alıyoruz. Onun yerine gerekli string değerleri atanacağı özelliğe göre değiştirmemiz gerekti. SDK ''da (Software Development Kit) yaptığım aramalar sonucu bu iki çözümü buldum ve örnekte uyguladım.
Sonuç ve Bir Öneri
Örnekte de gördüğünüz gibi kontrollerin özelliklerine olaylar içerisinden ulaşıp değerlerini değiştirebiliyoruz. Görünüş ile ilgili özellikleri aynı şekilde birçok kontrolde kullanabiliyoruz. Daha ayrıntılı ayarları yapabilmek için gereken özellikler ve yöntemler hakkındaki bilgiyi derleyip sizlere başka bir makalemde anlatacağım.
İlk makalemdeki örnek koddaki değişken isimlerinin ve özellik isimlerinin yazımlarına dikkat ettiyseniz belirli bir düzende yazmaya çalıştığımı farketmiş olmalısınız. Bu makalemdeki örnekte de görebileceğiniz gibi değişkenlere türlerine göre isimler veriyorum. String türü değişken isimlerine "str" ile başlıyorum. Color türü değişken isminin başına "clr" koymamda aynı nedenden dolayı. Böylece değişkenin türünü ismine bakarak çıkartabiliyorum. Bu hem uzun ve çok değişkenli kodların daha kolay anlaşılmasını sağlıyor, hem de yazılan kodu uzun süre sonra tekrar görünce olaya tam anlamıyla vakıf olmamızı sağlıyor. Ayrıca kontrol bloklarında veya gerektiği her yerde kodları girintili yazmakda okunuşu kolaylaştıyor.
Girintisiz yazılan, anlamsız değişken isimleri içeren birbirine girmiş kodlar okunuşu zorlaştırdığı gibi yazmayı da zorlaştırır. Bunun için web programlarını kendi kendimize koyduğumuz belli kurallar içerisinde yazmalı, değişik görevleri farklı Sub ''lara vermeli, kodun okunuşunu/anlaşılışını artırmalıyız.
İlk makalemde genel olarak ASP.NET hakkında kısa bilgi vermiştim. Makalemin sonunda ise Web Kontrollerinin kullanıldığı dinamik bir örnek vermiştim. Bu makalemde de Web Kontrollerine örnek vermenin doğru olacağını düşündüm. İlerde de kontroller hakkında yazacağım ve örnekler vereceğim. Yeterli olduğunu düşündüğüm zaman ise veritabanı bağlantısı konusuna gireceğim. Gelecek makalelerde görüşmek üzere..
