İNTERNET PROGRAMLAMA 2 A S P. N E T Marmara Teknik Bilimler MYO / Hafta 9 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ı, HARİCİ 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. 2
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. 3
4
Skin File ( Dış Görünüm Dosyası ) Asp.NET sunucu kontrollerinin görünümleri bu dosyalarda belirlenir. Bir tema için 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. 5
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. 6
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" /> 7
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. 8
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="Sayfa.aspx.cs" Inherits="Sayfa" Theme="Theme1" %> 9
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"... 10
ÖRNEK1 Sayfa eklenen MAVİ ve KIRMIZI butonlarına basıldığında sayfanın temasını seçilen renkte değiştirecek asp.net sayfa kodlamasını yapınız. 11
ÖRNEK1 MAVİ buton nesnesinin click olayına aşağıdaki kodlar yazılır. KIRMIZI buton nesnesinin click olayına aşağıdaki kodlar yazılır. 12
ÖRNEK1 PreInit olayı Page_Load olayından daha önce gerçekleştiği için sayfa nesneleri henüz yüklenmemiş oluyor. Dolayısı ile Tema seçimi buton yerine RadioButton vb form elemanları kullanılarak yapılırsa nesnelerin Value değerlerine ulaşılamayacaktır. Bu nedenle tema seçim işlemi QueryString kullanılarak gerçekleştirilmiştir. QueryString ile gelen bilgiyi okumak için Page_ PreInit olayına aşağıdaki kodları yazıyoruz. 13
ÖRNEK1 Add - Add Asp.NET Folder Theme seçeneği kullanılarak THEME klasörü projeye ekleyiniz. İsmini kirmizi olarak değiştiriniz. kirmizi üzerinde sağ tuşa tıklayarak Add New Item Style Sheet yolunu kullanarak kirmizi.css dosyasını ekleyiniz. kirmizi üzerinde sağ tuşa tıklayarak Add New Item Skin File yolunu kullanarak kirmizi.skin dosyasını ekleyiniz. Aynı işlemleri mavi teması için tekrar gerçekleştiriniz. 14
ÖRNEK1 kirmizi.css dosyasına aşağıdaki kodları ekleyiniz. kirmizi.skin dosyasına aşağıdaki kodları ekleyiniz. 15
ÖRNEK1 mavi.css dosyasına aşağıdaki kodları ekleyiniz. mavi.skin dosyasına aşağıdaki kodları ekleyiniz. 16
ÖRNEK1 Uygulamayı çalıştırıyoruz 17