Makale Özeti

ASP.NET 2.0 sadece yeni kontroller ve yeni sınıflar ile değil, yazılım geliştirme sürecinde yaşadığımız birçok konuya da çözüm getirmiş durumda. İşte bu konulardan 2 tanesi: Temalar ve Tarayıcıya göre davranış. Her 2 konunun da yazılım geliştirme süreci ile ilişkilerini kısaca açıklamak gerekirse: Temalar tüm ekranların standart bir görüntüye ve standart özelliklere sahip olması açısından; bu konuyla ilgili yapılması gereken kontrolleri minimum düzeye indirmiş durumda. Tarayıcıya göre davranış konusu ise, bazı web sitelerinin Internet Explorer’da düzgün görünmesi fakat Mozilla tabanlı tarayıcılarda sorun çıkartması; bunların testleri, sorunların giderilmeye çalışılması gibi konuları içeren süreci gerçekten maksimum seviyede kontrol altına almamızı sağlıyor.

Makale


ASP.NET 2.0 - Temalar ve Tarayıcıya Göre Davranış


Makalenin kapsadığı konular:
  1. Temalar
  2. Tarayıcıya Göre Davranış
ASP.NET 2.0 sadece yeni kontroller ve yeni sınıflar ile değil, yazılım geliştirme sürecinde yaşadığımız birçok konuya da çözüm getirmiş durumda. İşte bu konulardan 2 tanesi: Temalar ve Tarayıcıya göre davranış. Her 2 konunun da yazılım geliştirme süreci ile ilişkilerini kısaca açıklamak gerekirse:

Temalar tüm ekranların standart bir görüntüye ve standart özelliklere sahip olması açısından; bu konuyla ilgili yapılması gereken kontrolleri minimum düzeye indirmiş durumda.
Tarayıcıya göre davranış konusu ise, bazı web sitelerinin Internet Explorer'da düzgün görünmesi fakat Mozilla tabanlı tarayıcılarda sorun çıkartması; bunların testleri, sorunların giderilmeye çalışılması gibi konuları içeren süreci gerçekten maksimum seviyede kontrol altına almamızı sağlıyor.


ASP.NET 1.0 ve 1.1 ile geliştirdiğimiz web uygulamalarında yaşadığımız en büyük sorunlardan birisi kontrollerin uygulama standartlarına uygun olarak kullanılmasıydı. Birkaç ekranda bu standartlara uyulsa da, bir noktadan sonra standartların takibi başlı başına bir süreci oluşturuyordu.

CSS (Cascading Style Sheets) dosyalarının oluşturulması, tüm ekranlarda bu stil tanımlamalarının düzgün olarak ilgili kontrollere atanması gibi zahmetli bir süreci kapsayan bu durum, programcıların gereksiz olarak ter dökmesine sebep olurdu.

İşte bu noktada, ASP.NET 2.0 tam ihtiyacımız olan özelliklerle, standartların takibini bile gerektirmeyecek bir şekilde bize en optimum çözümü sundu: Temalar.

Normal olarak CSS ile çalıştığımız zamanlarda, bizim görevimiz ekranlardaki kontrollere uygun stil tanımlamalarını yapıp, kontrollerin kendi stillerini CSS dosyasındaki tanımlara uygun olarak almasını sağlamaktı. Şimdi tek yapmamız gereken ise, kontrollerin bulunduğu ekrana stil tanımlarında standart olarak kullanacağı özellikleri hangi tema dosyası içerisinde tanımladığımızı söylemek. Hatta bu tanımlamayı tüm ekranlarımız için ortak kullanılmak üzere web.config dosyasında tanımlamamız bile mümkün!

Hemen ilk örneğimize geçelim ve temaların uygulama geliştirme sürecimizdeki ekran standartlarını yakalamak adına bize ne kadar yardımcı olduğunu görelim.


Öncelikli olarak yeni bir ASPX dosyası yaratalım ve dosyamıza bir takvim kontrolü, bir Label ve üzerine tıklandığında Label kontrolünün içerisine takvim kontrolünde seçilmiş olan tarihi yazacak olan bir Button kontrolü ekleyelim.

Sayfamızı çağırdığımızda ve butonumuza bir kere tıkladığımızda, karşımıza aşağıdaki şekilde, hiçbir stil özelliği olmayan ekran çıkacaktır:



Şimdi projemize aşağıdaki adımları izleyerek yeni bir tema ekleyelim:





Not: Projeniz "App_Themes" isminde bir klasöre sahip değilse, "Add" menüsünden, "Theme" seçeneğini seçtiğiniz anda bu klasör otomatik olarak eklenecektir.

Temanın ismini "Coskun" olarak değiştiriyorum:



Tema klasörüne sağ tıklayıp "Add New Item" seçeneğine tıklıyorum:



Açılan ekrandan "Skin File" dosya tipini seçip, dosya ismini "Kontroller.skin" (Bu dosyanın uzantısı "skin" olarak kalmalıdır) olarak değiştiriyorum:



Ve tema dosyamız, içeriğinde aşağıdaki birkaç açıklamayla birlikte eklendi:



Bu noktada birkaç önemli bilgi vermek istiyorum. ASP.NET 2.0'ın sahip olduğu tüm kontrollere "SkinID" isminde string tipinde bir özellik eklenmiştir. Bu "SkinID" özelliği, skin tanımlaması yapılırken belirtilen "SkinID" ile eşdeğer atanarak, tek bir tema içerisinde farklı durumlarda farklı stiller alması gereken kontroller oluşturulabilir. Tema ve skin tanımlamaları yapılırken aşağıdaki noktalarda dikkat edilmesi gerekmektedir:

  • Temalar kendi içlerinde birçok skin, resim, XML, XSD, CSS dosyası ve text dosyası barındırabilirler ve asıl amaçları bunların hepsinin birden barındırılabildiği bir tema oluşturmaktır.
     
  • Skin dosyaları temalar için birer tamamlayıcıdır. Bir tema birden fazla skin dosyası barındırabilir. Gerektiği taktirde her bir kontrol tek bir skin dosyasında tanımlanabildiği gibi, tüm kontroller farklı farklı skin dosyalarında da tanımlanabilir.
     
  • Az sonra örneklerini göreceğimiz skin dosyaları içerisinde, kontrollere özel skin tanımlamaları sırasınra, tanımlamaların sahip olabileceği "SkinID" özelliği herbir kontrol için tekil (unique) olmalıdır. Yani TextBox kontrolü için 5 tane skin tanımlanabilir fakat bu 5 skin tanımının 5'i de ayrı SkinID özelliklerine sahip olmalıdır. Bununla birlikte bir TextBox'ın SkinID'si "abc" ise, başka bir Button kontrolü için tanımlanan bir skin tanımında da "abc" kullanılabilir; fakat "abc" bir Button tanımında kullanıldıktan sonra, 2. bir Button tanımında kullanılamaz. Yani SkinID özelliği kontrol basında tekil olmak zorundadır.
     
  • Bir tanımlama yapılırken, SkinID özelliği belirtilmezse, bu tanımlama default tanımlama olarak bilinir. Tüm tema tanımları içerisinde, yine kontrol bazında, tek bir tane default skin tanımlanabilir.
     


Şimdi sırası ile Calendar, Label ve Button kontrollerimiz için skin tanımlamalarımızı yapalım. Ekran görüntüsünde dikkatinizi çekecektir, temalar ile sadece renk, font gibi özelliklerle değil, kontrolün sahip olduğu tüm özellikler ile oynayabiliyoruz. Örneğin aşağıdaki örneğimizde Calendar kontrolünün "DayNameFormat" özelliğini dahi tanımladık:



Bir üstteki ekran görüntümüzde de görebileceğiniz üzere, skin tanımlamamız sırasında herhangi bir "SkinID" özelliği vermedik. Çünkü tanımlamalarımızın default tanımlamalar olmasını istiyoruz.

Sıra geldi sayfamıza kullanacağı temayı belirtmeye (Bu özelliği çalışma zamanında "Page.Theme" özelliğini kullanarak da atayabilirsiniz) :



Gördüğünüz gibi son derece güçlendirildiğini iddia ettiğimiz IntelliSense yine karşımıza çıktı ve bize kullanabileceğimiz temaların bir listesini sundu.

Şimdi temamızı tam olarak tanımlayalım:



Belki görmek isteyenler olur diye, Calendar kontrolümüzün tanımlandığı satırlara hiçbir stil tanımlaması yapılmadığını görelim:



Sayfamızı tekrar çağıralım:



Ve işte sonuç. Artık sayfanıza ne kadar Calendar kontrolü eklerseniz ekleyin, sonuç hiç değişmeyecek ve tüm Calendar kontrolleriniz, ekran görüntümüzdeki kontrolle aynı renklere sahip olacaktır. Hem de ekstradan hiçbir tanımlama yapmadan.

Son olarak web.config dosyasını kullanarak tüm projemizin tamamını, belirttiğimiz temayı kullanması için nasıl ayarlayabileceğimizi görelim:




ASP.NET 2.0'a kadar, şimdiye kadar web uygulamalarımızın tarayıcıya göre davranışıyla ilgili tüm durumları JavaScript ile tarayıcının tipine ulaşıp uygun methodları yazarak ve ya BrowserCap.DLL dosyasını kullanarak belirliyorduk. Fakat ASP.NET 2.0 bu sorunumuza o kadar basit bir çözüm getirdi ki, artık tarayıcıya göre davranış gösterecek bir uygulama yazmak neredeyse çocuk oyuncağı. Bir örnek ile yapının genel kullanımını inceleyelim:


Projemizin "App_Browsers" klasörüne (ASP.NET 2.0'da bulunan yeni dosya ve klasör tipleri bu makale dizisinin 2. makalesinde incelenmiştir), yeni bir ".browser" dosyası ekleyelim:



Dosyamızın ismini "InternetExplorer.browser" olarak belirleyelim ve dosyamızı ekleyelim:



Visual Studio 2005 bizim için bir şablon oluşturdu:



Dikkat ettiyseniz, InternetExplorer.browser dosyamızın en üst kısmında, "<WindowsKlasoru>\Microsoft.NET\Framework\<DotNetSurumu>\CONFIG\Browsers" klasöründe ".browser" dosyaları için daha fazla şablon bulabileceğimiz konusunda bir cümle bulunmakta. Şimdi bu klasörün içerisinde bulunan dosyalara göz atalım:



Tam 25 adet ".browser" dosyasına sahibiz. Bunlardan 2 tanesini projemizde kullanalım. Ben "ie.browser" ve "mozilla.browser" dosyalarını seçtim. Bu dosyalardan "ie.browser" ismindekinin içeriğini daha önceden yaratmış olduğum "InternetExplorer.browser", "mozilla.browser" dosyasının içeriğini ise yeni yaratacağım "Firefox.browser" dosyasına kopyalayacağım.

Bu işlemi tamamladıktan sonra, yeni bir ASPX dosyası yaratıyorum ve içerisine de bir "Label" kontrolü ekleyip, Label kontrolüne aşağıdaki gibi özellikler ekliyorum:



Şimdi de sayfamı Internet Explorer kullanarak çağırıyorum:



Görmüş olduğunuz gibi tarayıcımızda "Internet Explorer tarayıcısını kullanmaktasınız." yazdı. Şimdi ise sayfamı Firefox kullanarak çağırıyorum:



Örneğimizi biraz daha genişletip, yazılarımızın tarayıcıya göre renk almasına ne dersiniz? O halde Internet Explorer kullanan bir kullanıcıya "mavi", Firefox kullanıcılarına ise "kırmızı" renkte yazı gösterelim. Öncelikli olarak kodumuzu aşağıdaki gibi değiştirmemiz gerekiyor:



Sayfamızı Internet Explorer kullanarak çağıralım:



Sayfamızı Firefox kullanarak çağıralım:



Sonuç olarak oldukça basit bir yöntemle, oldukça sağlıklı çalışan ve tarayıcının türüne göre davranabilen bir "Label" kontrolüne sahip olduk.

Not: Label kontrolünün özelliklerine ön ek olarak eklenen "IE:" ve "Mozilla:" kelimeleri; ".browser" dosyamızda yaptığımız tanımlamaya göre adlandırılmaktadır:



Unutmadan eklemek istiyorum; "<WindowsKlasoru>\Microsoft.NET\Framework\<DotNetSurumu>\CONFIG\Browsers" klasörü altında bulunan "ie.browser" dosyasının içeriğini incelerseniz, dosya içerisinde Internet Explorer için isimleri "IE, IE5to9, IE5, IE50, IE55, IE5to9Mac, IE6to9" gibi birden fazla tanımlama yapıldığını göreceksiniz. Bu tanımlamalar sayesinde, sadece tarayıcıya göre değil, ek olarak tarayıcının sürümüne göre de davranış durumları belirleyebilirsiniz.


Makale ile ilgili tüm soru ve sorunlarınızı http://net.tr.gen.tr/index.php/32,coskun,22,06,2005,11,01,58,aspnet-20-temalar-ve-tarayiciya-gore-davranis adresinde yorum olarak sorabilirsiniz.

Coskun SUNALI
http://net.tr.gen.tr