ASP.NET / Asp.Net 2.0 Tema Oluşturmak
Temalarla ilgili bir önceki makalemizde ASP.NET 2.0'daki tema kavramına giriş yapıp temel kavramlardan bahsetmiştik. Bu makalemizde ise Visual Studio 2005 ortamında yeni bir tema oluşrurup bunun nasıl kullanıldığına göz atacağız.
App_Themes klasörünü eklemek
Projeye App_Themes klasörünü eklemek için. Proje üzerinde sağ tıklıyoruz ve açılan menüden Add ASP.NET Folder seçeneği üzerine geliyoruz. Yeni açılan alt menüden Theme seçeneğini seçiyoruz. Visual Studio 2005 bizim için App_Themes klasörünü oluşturup bu klasörün içine de bir tane Theme klasörü koyacaktır. Her şeyi kendimiz yapmak için şimdilik Visual Studio'nun oluşturduğu Theme klasörünü silelim. Bir sonraki adımda kendimiz ekleyeceğiz.
App_Themes klasörü içine yeni bir Tema eklemek
App_Themes klasörü içine Theme klasörü eklemek için resimde de gördüğünüz gibi App_Themes klasörü üzerine sağ tıklıyoruz ve bir önceki adımdaki gibi benzer şekilde Theme seçeneğini seçiyoruz. Bu işlemden sonra Visual Studio bizim için bir tane Theme klasörü oluşturacaktır. Klasörün varsayılan ismini değiştirelim ve FB yapalım. Sitemiz tahmin edeceğiniz gibi Sarı-Lacivert renklere bürünecektir. Bunu bir Futbol Portalı olarak düşünrsek. bir kaç tane daha Theme ekleyip bunları da GS,BJK,TS ... gibi belirleyebiliriz. Şu anda FB bizim için yeterli olacaktır.
Temaya Skin eklemek
Theme klasörünü ekledikten sonra şimdi sıra geldi. Bu temanın skinlerini eklemeye. Temamıza skin eklemek için ilk olarak bir tane Skin dosyası eklememiz gerekiyor. Bir önceki makaleden de bildiğimiz gibi Skin dosyaları skinleri taşıyacak olan .skin uzantılı özel dosyalardı. Theme klasörüne Skin dosyası eklemek için Theme klasörü üzerinde sağ tıklayıp Add New Item seçeneğini seçiyoruz.
Karşımıza yukarıdaki resimde gördüğünüz şekilde bir tane pencere açılacaktır. Burada Theme klasörü içine ekleyebileceğimiz dosya tipleri görünmektedir. Buradan Skin File'ı seçip bir isim belirleyip Add buttonuna tıklıyoruz.Skin File eklenip yeni skin ekleyebilmemiz için açılacaktır. Yeni Skin eklemeden önce Skin File'ı biraz inceleyelim. Skin File içinde yeni bir skin eklemek için örnekler ve açıklamalar comment halinde bize gösteriliyor. Bunlardan ilki bir önceki makalede de değindiğimiz SkinID özelliğinden ikinci örnek ise varsayılan Skin'den bahsediyor.
Skin File dosyasını eklediğimize göre şimdi sıra geldi yeni skinleri eklemeye. Sadece TextBox'lar için Skin ekleyelim dilerseniz. İki adet skin ekleyelim bunlardan ilki varsayılan olsun ikinci eklediğimize ise özel bir ad verelim. Skin File içinde IntelliSense çalışmayacaktır. Tüm kodları kendiniz yazmak durumundasınız. Ama üzülmeyin bunun da kolayı var. Hemen bir tane boş Web Form açalım. Bu Web Form'un içine bir tane TextBox kontrolü sürükleyip bırakalım ve kod yazmadan Visual Studio'nun Properties menüsünden istediğimiz özelliklerini ayarlayalım. Daha sonra Web Form'umuzda Source tarafına geçip TextBox'ı olduğu gibi kopyalayalım.
TextBox'ın kodlarını Skin File'a yapıştırıp bunu bir skin haline getirelim. Bir önceki makaleden de hatırladığımız gibi bir skinde id diye bir şey yoktu ve elemanı yoksa </KontrolAdi> şeklinde değil /> şeklinde bitiyordu. Gerekli özellikleri ayarlayıp kodları aşağıdaki hale dönüştürüyorum.
BorderStyle="Double" Font-Bold="True" Font-Italic="True" Font-Names="Tahoma"
ForeColor="White" Width="200px" />
Bu eklediğimiz Skin'in SkinID özelliğini belirtmediğimiz için bu Skin TextBox kontrollerinin varsayılan Skin'i olacaktır. Şimdi TextBox'lar için benzer şekilde bir tane daha skin tanımlayıp bunun SkinID özelliğini Yellow olarak belirleyelim.
<asp:TextBox SkinID="Yellow" runat="server" BackColor="Yellow" BorderColor="#0000C0"
BorderStyle="Solid" Font-Bold="True" Font-Italic="True" Font-Names="Tahoma"
ForeColor="#0000C0" Width="200px" />
FB temasının uygulandığı formlar içinde bulunan TextBox'ların SkinID özelliğini Yellow olarak ayarladığımızda yeni eklediğimiz Skin uygulanacaktır.
Bir önceki makaleden hatırlayacağınız gibi sitemize iki şekilde tema uygulayabiliyorduk. Hem uygulama düzeyinde hem de sayfa düzeyinde tema uygulayabiliyorduk. Biz burada ikinci yöntemi seçelim. Az önce yeni TextBox'ların stillerini ayarladığımız WebForm umarım duruyordur. Bu sayfanın Page direktifine Theme="FB" özelliğini ekleyerek bu sayfaya FB temasını uygulamış oluyoruz.
Şimdi bu sayfamızın Design bölümüne geçip üst üste iki adet TextBox ekleyelim ve alttakinin SkinID özelliğini Yellow olarak belirleyelim. Visual Studio'da TextBox'ın özelliklerinden direkt belirleyebilirsiniz. Kod yazmanıza gerek yok!
Şimdi uygulamazı çalıştırıp sonuçlara göz atalım.
Gördüğünüz gibi üstteki TextBox varsayılan ayarlarla alttaki ise Yellow Skin'ine göre biçimlendirildi...
Tema'ya CSS Eklemek
Asp.Net Server kontrollerine skinleri nasıl eklediğimiz gördük. Genellikle siteye veya sayfaya tema uygulandığında sadece Server kontrollerini değil aynı zamanda HTML kontrollerini ve HTML Tag'lerini de biçimini ayarlamak isteriz. HTML stillerini taşıyan dosyalar CSS dosyalarıdır. Bu işlem için temamıza bir tane CSS dosyası ekleyelim.Bu işlem içinde Theme üzerine sağ tıklayıp Add New Item'ı seçiyor ve açılan pencereden StyleSheet'i seçip bir isim verip Add'e tıklıyoruz.
Tıkpı skin dosyasında olduğu gibi karşımıza bir tane Css dosyası gelecektir. CSS dosyasının içini doldurmak oldukça çaba gerektiren ve can sıkıcı bir durumdur. Ama Visual Studio 2005 ile işler oldukça kolaylaşıyor. Bu alanda da temanın uygulandığı alanlarda bağlantılarımızın nasıl görüneceğini belirliyor olalım.
Bu işlem için StyleSheet dosyamızın içinde sağ tıklayıp Add Style Rule seçeneğini seçelim. Tüm HTML tagleri bizim için listelenecektir.
Element bölümünden A Tag'ini seçip > buttonu ile sağ tarafa ekleyelim ve OK seçeneği ile bu kuralı CSS dosyamıza ekleyelim. Şimdi sıra geldi A elemanının sitilini belirlemeye. Bunun içinde aşağıda gördüğünüz gibi kuralın üzerinde sağ tıklıyor ve Build Style diyoruz.
Açılan pencereden gerekli ayarları yapıp Ok tuşuna basıyoruz ve Visual Studio bizim için gerekli kodları yazıyor.
Şimdi dilerseniz yazdığımız bu stili test edelim. Az önce TextBox eklediğimiz sayfaya dönüp bir tane bağlantı ekleyelim.
Şimdi sayfamızı çalıştırıp test edebiliriz...
Bağlantımıza az önce belirlediğimiz stil uygulandı...
Bu makalede bir uygulamaya en basit haliyle tema eklemeyi anlatmaya çalıştım. Sadece bir kontrol için ve bir HTML Tag'i için stil belirledik, bütün siteyi düşündüğümüzde pek çok kontrol ve HTML Tag'i için bir şeyler daha yazmamız gerekecek ama yapacağımız işlem burada anlattıklarımdan daha farklı ve daha zor değil. Bir sonraki makale de görüşmek dileğiyle..