Tema Kullanımı
Web sitemizin görünümünde değişiklikler yapmak istediğimizde tüm sayfalar ile tek tek uğraşmayız. Tüm sayfaların görünümünü kolay yoldan değiştirmek için Asp.Net'te çeşitli teknikler geliştirilmiştir. Örneğin masterpage dosyası, harici css dosyası ya da user control dosyası kullanmak gibi.
Sayfaların görünümlerini tek bir yerden kontrol etmek için kullanılan yöntemlerden biri de temalardır. Asp.NET sitemizde tema oluşturarak sayfamızdaki nesnelerin nasıl görüneceklerini belirleyebilir, ve gerektiğinde kolayca değiştirebiliriz.
Ayrıca bir site için birden fazla tema oluşturarak, farklı durumlarda farklı temaların uygulanmasını sağlayabiliriz. Örneğin ziyaretçiye temayı seçme şansı verebiliriz.
Tema Oluşturma
Temalar App_Themes isimli özel klasörde tutulurlar. Bu yüzden sitemizde bu klasör henüz oluşturulmamış ise öncelikle bu klasörü oluşturmalıyız.
App_Themes klasörünü oluşturmak için Solution Explorer panelinde site adına sağ tıklayıp sırasıyla " Add - Add Asp.Net Folder - Theme " seçeneklerine tıklayınız.
App_Themes klasörü ve içerisine bir adet tema için klasör (Theme1) oluşturulacaktır. Theme1 ismini dilersek değiştirebiliriz çünkü bu isim temanın da ismi olacaktır.
Sitemizdeki temalara ait dosyalar, o temaya ait klasör içerisinde App_Themes altında tutulurlar.
Bir tema içerisinde dış görünüm dosyası ( skin file ) ve stil dosyası bulunabilir.
Skin File ( Dış Görünüm Dosyası )
Asp.Net sunucu kontrollerinin görünümleri bu dosyalarda belirlenir. Bir tema için tek bir skin dosyası ya da birden fazla skin dosyası oluşturulabilir.
Skin dosyası oluşturmak için o temaya ait klasör üzerinde sağ tıklayıp Add - Skin File komutlarına tıklayınız.
Oluşturulan skin dosyası içine yorum satırları halinde iki örnek kontrol eklenmiş olup, dilersek bu satırları silebiliriz.
Skin dosyaları içerisinde sunucu kontrollerinin görünümleri belirlenir. Örneğin:
<asp:Button runat="server" BackColor="red" ForeColor="yellow" />
şeklinde bir satırı skin dosyamıza eklersek, bu temanın uygulandığı sayfalardaki butonların hepsi belirtilen özelliklerde oluşturulacaktır.
Görüldüğü gibi sunucu kontrollerinin id özelliği haricinde tüm özellikleri burada belirlenip, temanın uygulandığı sayfalarda geçerli olması sağlanabilmektedir. Kontrollerin her birine web sayfaları içinde farklı birer id zaten verileceği için skin dosyası içerisinde id belirtmek yanlış olacaktır.
Skin dosyalarında intellisense özelliği çalışmaz yani kodları yazarken bize yardımcı olmaz. Kolaylık açısından kodları başka bir sayfada yazıp buraya kopyalayabiliriz.
SkinID Kullanımı
Skin dosyamızda bir kontrole ait birden fazla görünüm oluşturmak için SkinID özelliği kullanılır.
Örneğin buton kontrolü için skin dosyasında 4 ayrı görünüm oluşturalım. Bu görünümleri birbirinden ayırmak için 3 tanesinin SkinID özelliklerine b1, b2 ve b3 değerlerini verelim. Bir tanesinde ise SkinID kullanmayalım:
<asp:Button SkinID="b1" runat="server" BackColor="red" ForeColor="yellow" />
<asp:Button SkinID="b2" runat="server" BackColor="blue" ForeColor="yellow" />
<asp:Button SkinID="b3" runat="server" BackColor="black" ForeColor="white" />
<asp:Button runat="server" BackColor="white" ForeColor="black" />
SkinID uygulanan görünümlere Named Skin, uygulanmayan görünüme ise Default Skin denir. Bir kontrol için sadece bir tane Default Skin oluşturulabilir. Named Skin ise farklı isimler ile (SkinID) istendiği kadar oluşturulabilir.
Bu durumda temanın uygulandığı sayfa veya sayfalarda butonlar oluşturulurken o butona hangi görünümün uygulanacağı yine SkinID özelliği ile belirtilmelidir. Şayet belirtilmez ise o butona default skin uygulanır. Şayet default skin yoksa hiç bir görünüm uygulanmaz ve buton orjinal haliyle görüntülenir.
EnableTheming Özelliği
Tema uygulanmış bir sayfada bazen bir kontrolün hariç tutulması ve temadaki özelliklerin uygulanmaması istenebilir. Bu durumda o kontrolün EnableTheming özelliği False yapılarak tema uygulanmaması sağlanır.
<asp:Button id="Button1" runat="server" EnableTheming="False" />
Temaya CSS Uygulama
Skin dosyasında sadece sunucu kontrollerinin özellikleri ayarlanabilir, html elemanlarının özellikleri belirlenemez.
Html elemanlarının özelliklerini belirlemek amacıyla temaya ait bir css dosyası oluşturabiliriz.
Bunun için o temaya ait klasör üzerinde sağ tıklayıp Add - Style Sheet komutu tıklanmalıdır. Ardından bu dosya içerisine istediğimiz stilleri yazabiliriz.
Bu stil dosyası sadece o temanın uygulandığı sayfalarda geçerli olacaktır.
Sayfaya Tema Uygulama
Bir sayfaya tema uygulamak için o sayfanın page bildirim satırına Theme="Tema Adı" şeklinde bir ifade eklemek yeterlidir.
<%@ Page Title="Tema Kullanımı" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="temaliDosya.aspx.cs" Inherits="temaliDosya" Theme="Theme1" %>
Siteye Tema Uygulama
Sitenin tamamına yani tüm sayfalara aynı temayı uygulamak istersek bunu web.config dosyası içerisinde aşağıdaki gibi yapabiliriz.
Web.config dosyasındaki system.web düğümü içerisine altta kalın gösterilen satırı eklemek yeterli olacaktır.
<system.web>
<pages theme="theme1"></pages>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
Bu şekilde tüm siteye tema uyguladığımızda, bazı sayfaların hariç tutulmasını istersek, o sayfaların page bildirim satırında EnableTheming özelliği false yapılması yetecektir.
<%@ Page Title="Home Page" EnableTheming="false" ...
Temada belirtilen özellikler bu sayfada geçerli olmayacaktır.
asp.net tema kullanımı, web sitesinde birden fazla tema oluşturma kullanma, skinID ne işe yarar, default skin yok ise ne olur, temayı değiştirme
KONU İLE İLGİLİ ÖRNEKLER
Bu konu ile ilgili örnek bulunmamaktadır.
25124 kez okundu.