Web Kontrolleri ve “Olay”lar
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 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.
| 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) <html><head><title>Kontroller ve Olaylartitle>head><body> |
|
Ö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
Web Kontrollerine Giriş
ASP ile ASP.NET arasında ne gibi farklar olduğu uzun süredir forumlarda yer alıyor. Yetersiz cevaplar nedeniyle de insanlar farkın dosya uzantısındaki "x" harfi olduğunu düşünebiliyor. Bazen ASP.NET ile PHP karşılaştırılıyor ve hangisi daha iyi anketleri düzenleniyor. Oysa bu üç web uygulama arayüzünün kategorileri farklı ve birbirleri ile kıyaslanmamaları gerekiyor. Klasik ASP ile PHP yi karşılaştırmak ne kadar akıllıca olsa da bunlardan birisinin ASP.NET ile karşılaştırılması çok zor ve mantıksız olur. Çünkü ASP.NET in çok farklı bir motoru ve çalışma ortamı var. ASP ve PHP kodları basit anlamda server ''da yorumlanıp html kodlarına dönüştürülüyor ve client ''e yollanıyordu. Gelen koddaki html kodlarını yorumlayan (interpret) tarayıcı sayfayı kodlayanın demek istediğini iletiyordu client ''a..
ASP.NET sayfaları ise ciddi anlamda inşa ediliyorlar (build). Bir ASP.NET sayfasın client tarafından talep edildiğinde (request) server''ın nasıl tepki (response) verdiğini kısaca özetlemeyi yeğliyorum. Şekilin de anlattıklarıma faydası olacaktır.
Client tarafından gelen talebi değerlendiren server gerekli dosyayı bulur. Dosyanın uzantısı ".aspx" ise işlenmek üzere (processing) ASP.NET moturuna gönderilir. Bu dosyaya gelen ilk talep ise veya dosyanın içeriği/kodu değiştirilmiş ise kod uygun dilin derleyicisi tarafından CLR (Common Language Runtime) ile yürütülmek üzere MSIL (Microsoft Intermediate Language) ''e çevrilir. Derlenmiş kod çalıştırılır. Sonuçta ortaya çıkan HTML kodu client ''e gönderilir.
Makalelerimde basit kod örnekleri verip ASP.NET ''in yeteneğini göstermeye çalışacağım. Bu amaçla da ilk olarak herkese tanıdık geleceğini düşündüğüm bir örneğe başvuracağım. Biliyorsunuz programlama dilleri hakkında hazırlanmış kitaplar ve tutorial/öğretici ''lerin dil hakkındaki ilk örnekleri çoğunlukla "hello,world" olur. Bu örnek uygulanarak programlamaya giriş yapılır. "Hello, world" uygulaması ne kadar basit olsa da dil hakkında çok şey söyler. İki elin parmaklarıyla sayılabilecek sayıda kod satırı içeren bu uygulama, ayrıntıya girmeden kısaca maddelediğim şu fikirleri edinmemizi sağlar.
Örneğin, C ile yazılmış bir "hello, world" kodundan şunları anlarız.
1. C dilinde programlar main() isimli fonksiyonun içeriğini yerine getirerek başlarlar.
2. printf() fonksiyonunu kullanmak için stdio.h dosyası include edilir.
3. Ekrana çıktı printf() fonksiyonu ile alınır.
4. Fonksiyon ve döngülerin başlangıç ve sonlarını { ve } ler belirtir.
Neden C ''de "hello, world" örneğinin yararlarından bahsediyorum ? Amacım C öğretmekmi, tabii ki hayır. Yazıya şöyle devam edelim. Bu örneği vermekteki amacım ASP.NET hakkında içine düşülen bir yanılgıyı işaret etmekti. "Hello, world" örneğinin icat edilme amacının "erkana birşeyler yazmak" değil örneği inceleyen kişinin (öğrenmek isteyen kişi oluyor) "demek ki bu iş böyle oluyormuş" demesi olduğunu göstermekti. Son zamanlarda deminden beri defalarca kez tekrar ettiğim iki kelimenin ekrana yazılmasıyla ilgilenen kodun ASP.NET versiyonlarını görüyorum ve bildiğini düşünenler bilmediğini düşünenlere bu kodu göstererek "işte ASP.NET böyle birşey" diyorlar. Fakat bu kodların klasik ASP ''den farklı bir yeri olmuyor. Belki de tek fark dosya uzantısının ".aspx" olması oluyor. Bahsettiğim kod en basit haliyle şu:
|
|
Acaba bu örnek bize gerçekende ASP.NET in nemenem birşey olduğunu gösterir mi ? Bu koddan response.write ifadesinin ASP.NET sayfalarında da kullanılabileceği sonucu çıkarabilecek olsak bile ASP.NET ''in nasıl birşey olduğu konusunda en küçük bir fikir alamıyoruz. Ekrana çıktı almak için kullandığımız kod klasik ASP ''nin en çok kullanılan deyimlerinden birisi ve, ASP açılış/kapanış tag lerimiz aynı ve diğer 4 satır HTML kodlarından oluşuyor. Bu koda ve title tag inde yazana saygı gösterirsek, ASP ile ASP.NET arasında fark olmadığını düşünebiliriz.
Peki gerçekten ASP.NET örneği diyebileceğimiz şekilde yazamazmıyız bu basit kodu. Yazalım ama kodun ilk bakışta ASP ''den farklı olduğunu gösterecek birşeyler ekleyelimki sayfamızın başlığı "İlk ASP.NET kodum" olabilsin.
|
<html><head><title>İlk ASP.NET kodum<body>
<asp:Label id="etiket" runat="server"/> <script language="VB" runat="server"> Sub Page_Load(Source As Object, E As EventArgs) etiket.Text = "hello, world" End Sub |
İşte ASP.NET ''te dünyaya selam vermenin prosedürü bu.. Yazdığım 10 satır kodu satır satır incelemeyi öneriyorum. Sadece açıklamam gereken satırları yazacağım.
3. satır : asp:Label bir web kontrolüdür ve sayfaya çıktı almak için kullanılır. Bu kontrolün genel kullanım amacı sayfaya statik değil dinamik çıktı vermektir. Bir düğmenin tıklanmasıyla değişen çıktı misali.. Dolayısıyla yazdığım koddaki label kontrolü kullanımı etik değildir 
Bu arada id attribute ''ünü kullanarak label kontrolümüze nasıl hitap edeceğimizi ve kontrolün server ''da çalışacağını belirttiğimizi gözden kaçırmayın. Server''da çalışma konusuna ileride değinebiliriz.
6 ve 10. satırlar : Bu satırlardaki html kodları tanıdık geliyor. İki fark var; scriptimizin dili Visual Basic (visual basic script değil), ve server ''da çalıştırılacak.
7 ve 9. satırlar : Page_Load olayı adından da anlaşılacağı üzere sayfanın yüklenmesiyle birlikte tetiklenen olaydır ve içine yazılacak kodlar sayfa yüklenirken yerine getirilir. Visual Basic kullanmış olanlar kodu tanır gibi olmakla beraber Page_Load olayını tanımışlardır ve selamlaşmışlardır. Sıklıkla başvurabileceğimiz diğer olaylara da ilerde kısaca bakabiliriz.
8. satır : etiket ismini verdiğimiz Label kontrolümüzün Text özelliğine atama yapıyoruz. Basit bir değer atama olayı..
Bu kodda size klasik ASP ''den farklı olan şeyleri yazmaya ve kısaca açıklamaya çalıştım. Sayfaya ASP.NET ''e özgü bir kontrol koyduk ve sayfanın Page_Load olayında bu kontrolün Text özelliğine değer atadık.
Örneği çalıştırdıktan sonra sayfanın kaynak koduna bakmanızı ve server ''da çalışan label kontrolünün neye dönüştüğünü ibretle izlemenizi istiyorum. Bu şekilde web kontrollerinde neden runat="server" ibaresi kullandığımız daha iyi anlaşılabilir.
Web kontrolleri Microsoft tarafından geliştirilmiş kullanışlı özellikleri olan yeni nesil kontrollerdir. Web kontrollerine asp:kontrol_ismi şeklinde ulaşılır (örnek: ). HTML de karşılığı bulunan web kontrollerinin dışında özel amaçlı web kontrolleri de vardır. "Calendar" ve "DataGrid" bunlara en iyi örnekler olabilir. ASP.NET motoru server ''da çalıştırılan bu web kontrollerini client ''e HTML koduna tercüme ettikten sonra gönderir. Örneğin bir "Calendar" kontrolü server''da çalıştırıldığında html koduna birçok
| etiketi eklenir. En çok kullanımına gerek duyulabilecek kontrollerden birisi "ListBox" kontrolü olabilir. ListBox kontrolünün HTML karşılığını SELECT etiketi olarak düşünebiliriz. Kullanım şekilleri ve amaçları hemen hemen aynı olduğu için bu benzetmeyi yapmamız yanlış olmaz. Kontrolün içerisinde seçenekler listelenir. Kullanıcı bu seçeneklerden programcının belirleyeceği şekilde bir veya birden fazlasını seçer ve yine programcının belirlediği süreç içerisinde bu seçimler işlemden geçirilir.
Bu mantıkla yazmış olduğum genel anlamda Web Kontrolleri ve lokal anlamda ListBox hakkındaki örneği makaleme eklemeyi uygun gördüm. Daha önceden ASP.NET hakkında veya web kontrolleri hakkında birşeyler biliyorsanız anlatacağım örneği önce kendiniz yapmayı deneyip bilginizi sınayabilirsiniz. Ama kendinizi yeterli hissetmiyorsanız hiç dikkatinizi dağıtmadan makaleyi okumaya devam etmenizi öneriyorum. Aksi bir durumda içinden çıkamazsanız ASP.NET e karşı antisempati oluşturabilirsiniz. Ki bu durumu hiç istemem Örneğimizde iki adet ListBox ve iki adet Button kontrolü kullanacağız. ListBox kontrollerimize kullanım kolaylığı için kısa isimler vereceğiz. "lbSol" isimli kontrolümüz içerisinde birkaç seçenek tutacak. "lbSag" isimli kontrolümüz ise başta boş olacak, onu biz dolduracağız. Button kontrollerimizden birisinin ismi "btnEkle" diğerinin ismi "btnCikart" olacak. lbSol ''dan seçim yapıp ekle butonuna bastığımızda seçtiğimiz "item" lbSol ''dan çıkartılıp lbSag ''a eklenecek. Çıkart butonumuz ise tersi yönde çalışacak.
|