Asp.Net 2.0 Temalar (Themes)

Asp.Net 2.0 Temalar (Themes)

Temaları genel olarak, bir uygulamanın nasıl görüneceğini belirleyen yapılar olarak tanımlayabiliriz. Temaların kullanıldığı her yerde bu tanımı da kullanabiliriz. Örneğin işletim sistemi temasını ele alacak olursak bir tema masaüstünüzün nasıl görüneceğinden başlayıp pencere renklerine kadar tüm ayarları belirliyor keza cep telefonları için de durum aynıdır, seçtiğiniz temaya göre telefonunuz bambaşka bir görünüm alabiliyor. Asp.Net"te de durum bundan farklı değildir. Temaları kullanarak sitenin tamamının, belirli sayfaların ya da belirli kontrollerin görünümünü tek bir yerden kontrol edebiliyoruz.

Asp.Net"te temaları kullanabilmek için tema kullanılmak istenilen uygulamaya ilk olarak temaların özel klasörü olan App_Themes klasörünü eklemek gerekiyor. Bu işlemi Visual Studio 2005 ile Proje üzeine sağ tıklayıp Add ASP.NET Folder seçeneğinden Theme seçeneğine tıklayarak gerçekleştirebiliriz. Bu işlemden sonra projemize App_Themes klasörü eklenecektir ve bir tane Theme1 adında Theme klasörü bizim için oluşturulacaktır. Theme klasörleri adından da anlaşılacağı gibi temalar için ayarların yapılabileceği App_Themes klasörü içinde bulunan özel klasörlerdir, aslında temaların ta kendisidir. Her klasör bir tema anlamına gelmektedir. Buradan da anlıyoruz ki sitemiz için birden fazla tema tanımlayabiliyoruz. Bir site için neden birden fazla tema kullanılabilir şeklinde bir soru kafanızı kurcalıyor olabilir. Gerçek hayata uyarlamak açısından bu konuya şöyle bir örnek vermek istiyorum;

Bir giyim firması için web sitesi hazırladığınızı düşünelim. Kullanıcılar sitenizden her mevsim için değişik kıyafetler almak isteyeceklerdir, ve sitenize genellikle bu amaçla gelip yeni ürünlerinize göz atmak isteyeceklerdir. Yeni sezon ürünleri sitede yerini aldığında, yeni sezon için sitenin görünümü değişse kullanıcılar açısından dikkat çekici ve akılda kalıcı bir değişiklik olacağı kesindir. Kış aylarına girerken daha beyaz, yaz aylarına girerken ise yazın sıcağına uygun daha sıcak renkler ve kontroller kullanmak oldukça dikkat çekici olacaktır. Bu da size müşteri memnuniyeti ve tabi ki ekstra satış olarak geri dönecektir.

Bu örnek sanırım temaları nerede kullanacağınız konusunda size az da olsa fikir vermiş olmalı. Şimdi konumuza geri dönelim. En son Theme klasöründen yani temanın kendisinden bahsetmiştik. Şimdi bu konuyu biraz daha açıp Theme klasörü neler içerebilir bundan biraz bahsedelim. Theme klasörünün en önemli elemanlarından biri Skin dosyalarıdır. Skin dosyaları Web Server Kontrolleri için sitillerin tanımlandığı dosyalardır. Bu dosya içinde tıpkı Web Form"da kontrol tanımlar gibi kontrolü tanımlayıp gerekli biçimlendirme ayarlarını yapıyorsunuz. Makalenin ilerleyen bölümlerinde Skin dosyasını daha detaylı bir şekilde ele alacağız. Theme klasörü içinde bulunabilecek bir diğer dosya da Cascading Style Sheets (CSS) dosyalarıdır. CSS dosyaları hepimizin yıllardır bildiği standart HTML kontrollerinin sitillerini belirleyebildiğimiz özel dosyalardır. Theme klasörü içine css dosyası ekleyip temanın uygulandığı tüm sayfalarda bu CSS"in etkin olmasını sağlayabiliyoruz. Burada CSS dosyalarından biraz daha bahsetmek istiyorum. Aslında CSS dosyaları mantık olarak temaların temelini oluşturmaktadır. CSS kavramı hayatımıza oldukça uzun zaman önce girdi. Sadece HTML"den oluşan sitelerde bile CSS kullanmak mümkün olmaktadır. CSS içinde tüm siteye uygulanacak olan biçimlendirme tanımlanıyor ve ilerleyen zamanlarda sitenin tasarımını değiştirmek istenildiğinde CSS içinden gerekli oynamalar yapılarak tasarım oldukça kolay bir şekilde değiştirilebiliyor. Temalara ne kadar benziyor değil mi? Theme klasörü içinde yeni klasörler de oluşturabiliyoruz. Örneğin bu klasörden biri Images klasörü olabilir. Grafik kullanan bazı web server kontrolleri vardır, TreeView kontrolü bu kontrollerden biridir, düğümler görüntülenirken yanlarında daha hoş bir görüntü açısından küçük resimler gösterilir. TreeView için bir skin yazmak istersek hoş bir görüntü oluşması açısından bir takım resimler kullanmamız gerekecektir. İşte bu resimleri Temanın klasörü içinde bulunan Images klasörü altına koyarak kolayca kullanabilir ve oldukça etkileyici görüntüler oluşturabiliriz.

Skin nedir?

Skin"i Web Server Kontrolleri için tanımlanan biçimlendirme olarak açıklayabiliriz. Aşağıda TextBox server kontrolü için tanımlanmış olan bir tane Skin görüyorsunuz.

Bu Skin"in uygulandığı tüm TextBox"ların arka plan rengi lacivert, çerçevesi sarı, yazısı kalın ve sarı vb. gibi özelliklerde olacaktır. Skin"e daha yakından bakacak olursak Web Form"da tanımladığız TextBox kontrolü ile neredeyse aynı olduğunu görmekteyiz. İki tane farka dikkat etmiş olmalısınız ilki ID özelliği yok. Skin"lerde ID özelliği diye bir özellik bulunmaz Skin"lerde SkinID şeklinde ne anlama geldiğini az sonra açıklayacağım bir özellik mevcuttur. Diğer fark ise kapatma tag"i. Normal bir TextBox kontrolü tagi ile kapanırken . Skin "/>" tagi ile kapanmaktadır. Skinlerin bir diğer özelliği de eğer altına eksta özellik almıyorsa bir Skin "/>" tagi ile kapanmalıdır.

SkinID

SkinID özelliği, bir kontrol için birden fazla Skin tanımlanıyorsa kullanılan bir özelliktir. SkinID özelliği ile aynı kontrol için tanımlanan farklı skin"ler birbirinden ayrılıyor. Yukarıdaki tanımlamaya dikkat edecek olursanız SkinID özelliğinin olmadığını fark etmiş olmalısınız. Bir kontrole birden fazla skin tanımlanmıyorsa SkinID kullanılmasına gerek yoktur. Hatta birden fazla skin tanımlandığında da tema uygulandığında varsayılan olarak uygulanması istenilen Skin"e SkinID özelliği verilmeyerek bu Skin"in varsayılan Skin olması sağlanır. Aşağıda TextBox kontrolü için tanımlanmış olan iki adet Skin görmektesiniz. Bunlardan ilkinde SkinID yoktur. Ama alttakinin SkinID özelliği FB olarak ayarlanmıştır. Eğer sayfa içindeki kontrollerde bunu kullanmak istiyorsak tema uygulandıktan sonra kontrolün SkinID özelliğini FB olarak ayarlamamız gerekecektir. Kontrolde SkinID belirtmezsek varsayılan olarak üstteki Skin karşımıza gelecektir.

Siteye Tema Uygulamak

Theme ve Skin kavramlarından bahsettikten sonra dilerseniz şimdi de sitemize tema uygulayarak temalar hakkında bilgi vermeye devam ediyor olalım. Siteye temayı iki farklı yolla uygulayabiliriz. İlki uygulama düzeyinde ikincisi ise sayfa düzeyinde. Aslında bir üçüncü ayar daha var, kontrol düzeyinde de tema ayarı yapabiliriz. Ancak önce Tema"nın bu iki yoldan herhangi biri ile siteye uygulanmış olması gerekmektedir.

Uygulama Düzeyinde Tema Uygulamak

Tahmin edeceğiniz gibi tüm sitemize tema uygulamak için bu ayarı Web.config dosyasından yapmamız gerekiyor. Web.config dosyasında ... taglari arasına aşağıdaki kodu eklersek Theme1 isimli tema sitemizde bulunan tüm sayfalara uygulanacaktır.

Sayfa Düzeyinde Tema Uygulamak

Tüm siteye olduğu gibi sitemizde bulunan sayfalara da ayrı ayrı Tema uygulayabiliyoruz. Bunun için sayfamızın Page direktifine aşağıdaki kodu eklemek yeterli olacaktır.

Theme="Theme1" Uygulanan Temayı İptal Etmek

Siteye veya sayfaya Tema uygulayabildiğimiz gibi zaman zaman bir kontrolden veya bir sayfadan bu temayı kaldırmak da isteyebiliriz, hayatta sıklıkla karşılaşabileceğimiz bir durumdur bu bunun için; temayı iptal etmek istediğimiz kontrolde veya sayfada aşağıdaki kodu eklemek yeterli olacaktır. Temayı bir sayfa için iptal etmek istersek bu kodu Page direktifine, kontrol için iptal etmek için de bu kodu kontrolün özelliklerine yazmak gerekecektir.

EnableTheming="false" Bir Kontrolün Skin"ini Belirlemek

Az önce SkinID özelliğinden bahsetmiştik. Bir kontrol için birden fazla Skin tanımladığımızda devreye SkinID özelliği giriyordu. Bu Skin"lerden herhangi birini istediğimiz herhangi bir kontrole uygulamak istediğimizde de  kontrolde bulunan SkinID özelliği ile istediğimiz Skin"i kontrole bildirebiliyoruz. Sayfaya Tema uygulandıktan sonra Visual Studio"da SkinID özelliğine tıklayarak ilgili kontrol için tanımlanmış olan tüm Skin"leri görüp istediğimizi kolayca seçebiliriz. Visual Studio bizim için aşağıdaki kodları oluşturacaktır.

Theme vs StylesheetTheme

Sayfaya tema uygularken bunu iki türlü ekleyebiliyoruz. Bunlardan ilki az önce bahsettiğim Theme komutu diğeri ise StylesheetTheme komutudur. Bu iki kod arasında ne fark olduğundan bahsetmeden önce şöyle bir senaryo çizmek istiyorum;

Sayfamıza temayı Theme kodu ile ekledik. Sayfamıza bir tane de TextBox sürükleyip bıraktığımızda projemizi çalıştırıp göz attığımızda TextBox"ın arka planı gri olarak gelecektir. Sayfamızda birden fazla TextBox olduğunu düşünelim ve bunlardan sadece birinin arka plan rengini mavi yapmak için ilgili kontrolün arka plan rengini özelliklerinden mavi olarak ayarlayıp projemizi çalıştıralım ve sonuca göz atalım.

Sonuç pek istediğimiz gibi gelmedi. En alttaki TextBox"ın arka plan resmini mavi olarak ayarladım ama çalışma anında temadan gelen ayar uygulandı. Bu kontrolün arka plan rengin de son uyguladığımız ayarı görmek için kontrolün özelliklerinde EnableTheming="false" kodu ile bu kontrol için temayı iptal edebiliriz ya da daha ilk baştan siteye temayı uygularken Theme komutu ile değil StylesheetTheme komutu ile sayfaya uygulayabiliriz.

StylesheetTheme komutu ile sayfaya temayı uyguladığınız anda sayfa içinde yaptığınız değişiklikler temadakilerin üzerine yazılıp son yapılan ayarlar geçerli olacaktır. StylesheetTheme komutunun Theme komutuna göre bir diğer farkı da Theme komutu ile temayı uyguladığımızda Theme çalışma anında sayfaya uygulanıyordu ama StylesheetTheme ile uyguladığımızda ise tema sanki bir css gibi dizayn anında sayfaya uygulanıyor olacaktır.

Döküman Arama

Başlık :

Kapat