Bir internet sitesini önemli kılan
özellikler, sayfalarının font, renk, nesne yerleşimleri ile kontrollere
ait görsel özellikleri açısından birbirleriyle olan uyumluluklarıdır. Bu
anlamda, çoğu zaman sayfalara CSS stilleri uygulanır ve web
uygulamasındaki tüm görsel öğelerin aynı font, renk vb özelliklere sahip
olması sağlanır. Asp.Net 2.0, bu tarz stillerin çeşitli seviyelerde
uygulanmasını sağlayacak yeni bir özellik sağlamaktadır. Themes
(Temalar). İşte bu makalemizde, Asp.Net 2.0da yer alan temaların, hangi
seviyelere, nasıl ve ne şekilde uygulanabileceğini incelemeye
çalışacağız.
Bir tema, aslında işletim sistemlerinde
uygulanan temalardan çok da farklı değildir. Pek çoğumuz kullandığı
işletim sistemine temalar uygulamıştır. Uygulanan temalar, çoğunlukla
sistemdeki font özelliklerini, pencerelere ait çeşitli renkleri, duvar
kağıtlarını, sembolleri vb öğeleri görsel açıdan belirli bir standarta
göre değiştirirler. Ancak internet projelerinin tasarlanması söz konusu
olduğunda, temaların uygulanacağı seviyeler kavramı öncelikli olarak
devreye girmektedir. Asp.Net 2.0 ile, makine seviyesinde, web uygulaması
seviyesinde, sayfa seviyesinde ve sunucu kontrolü seviyesinde temalar
uygulanabilmektedir.
Şekil 1 Tema Seviyeleri.
Biz bu makalemizde, temaların bu
seviyelere nasıl uygulandığını incelemek amacıyla, basit bir tema
oluşturacak ve bu temayı çeşitli seviyelere uygulayarak sonuçlarını
incelemeye çalışacağız. Bu amaçla ilk olarak bir web uygulması açalım.
Bu web uygulamamızın default.aspx sayfasını aşağıdaki ekran görüntüsüne
sahip olacak şekilde oluşturalım. Bu sayfada bir kaç sunucu kontrolünü
kullanacağız.
Şekil 2. Sayfamızın Varsayılan Hali.
Eğer sayfamızı bu haliyle tarayıcıda
açarsak aşağıdaki ekran görüntüsünü elde ederiz.
Şekil 3. Sayfamızın ilk halinin
tarayıcadaki görüntüsü.
Şimdi uygulamamıza bir tema
ekleyeceğiz. Bunun için öncelikle solution ımıza Theme isimli bir
folder eklememiz gerekiyor. Bu klasör, bir önceki makalemizde bahsetmiş
olduğumuz Code klasörü gibi, solution için özel anlam ifade eden bir
yapıya sahiptir. Nitekim bu klasör altına, uygulamaya ait font, renk
gibi stillerin nasıl olacağını belirten css dosyaları ve sunucu
kontrollerine ait görsel ayarların yapıldığı skin dosyaları ile çeşitli
resimler eklenebilir. Theme klasörünü oluşturduktan sonra kullanacağımız
tema için bir isim belirlemeli ve bu isimle yeni bir alt klasör
açmalıyız. Artık skin ve css dosyalarımızı bu klasör altında
oluşturabiliriz. Böylece, uygulamamızda oluşturduğumuz alt klasör
ismindeki temayı uygulayabiliriz. Klasör yapımız aşağıdaki şekildeki
gibi olmalıdır. Bu hiyerarşik düzen aynı zamanda, bir solution için
birden fazla tema oluşturulabileceğinide göstermektedir.
Şekil 4. Temamız için uygulamamız
gereken klasör hiyerarşisi.
Şimdi sunucu kontrollerimizin nasıl
görüneceğini belirleyeceğimiz özellikleri taşıyacak bir skin dosyası
oluşturacağız. Bu dosyamızı Temam klasörü altında geliştireceğiz.
Skinler özelikle temalar için tasarlanmış tipteki dosyalardır. Ancak,
Asp.Net 2.0 ın Beta sürümünde bu dosya tipi tanımlanmamıştır.
Dolayısıyla, klasörümüz altında Add New Item seçeneği ile skin eklemek
istiyorsak, Text File tipini seçmemiz ve dosya ismimizin uzantısı skin
olacak şekilde belirtmemiz gerekmektedir.
Şekil 5. Skin eklenmesi.
Bir skin dosyası, aslında sunucu
kontrollerinin görsel açıdan özelleştirilmiş halini içerir. Dolayısıyla,
bir web uygulamasına bir temanın uygulanması sonucu, bu uygulamdaki
sunucu kontrolleri için skin dosyaları içerisindeki sunucu
kontrollerinin görsel özellikleri uygulanır. Bunu aşağıdaki kod
satırlarından daha iyi anlayabiliriz. Aşağıdaki kod satırları,
Gorsel.skin dosyamıza ait olup çeşitli sunucu kontrollerine görsel
açıdan zenginlik katacak özelliklere sahiptir.
<asp:Label
Runat="server" Font-Bold="False" Font-Names="Forte"
Font-Size="Large" ForeColor="Red"></asp:Label>
<asp:TextBox Runat="server" Font-Names="Verdana"
Font-Size="Small" ForeColor="#C000C0" BackColor="#FFC080"
BorderColor="#C00000" BorderStyle="Solid" BorderWidth="2px"
></asp:TextBox>
<asp:Button Runat="server" Font-Bold="True"
ForeColor="White" BackColor="OrangeRed" BorderColor="#C04000"
BorderStyle="Solid" BorderWidth="3px" />
<asp:DropDownList Runat="server" Font-Names="Bookman Old
Style" Font-Size="Small" BackColor="#FFE0C0"
Font-Italic="True"></asp:DropDownList>
<asp:ListBox Runat="server" Width="100px" Height="70px"
Font-Bold="True" ForeColor="Gold"
BackColor="SteelBlue"></asp:ListBox> |
Bu kodlara dikkatlice bakacak
olursanız, Label, Button, TextBox, DropDownList, ListBox gibi
kontrollerin çeşitli font, renk özellikleri ile tanımlanmış olduklarını
göreceksiniz. İşte bu noktadan sonra, her hangibir tema seviyesinde,
Temam temasını uygularsak, sunucu kontrolleri burada belirtilen görsel
özelliklere sahip olacaktır. Bu dosyanın oluşturulması ile birlikte ilk
temamızı hazırlamış oluyoruz. Şimdi bu temanın, bahsetmiş olduğumuz
seviyeler için nasıl uygulanacağını inceleyelim.
Öncelikle sayfa seviyesinde bu temayı
default.aspx için nasıl uygulayacağımıza bakalım. Bunun için,
default.aspx sayfasının, page direktifine ait, Theme özelliğinden
yararlanacağız. Tek yapmamız gereken, theme özelliğine, oluşturduğumuz
temanın bulunduğu klasörün ismini atamak olacaktır. (Dolayısıyla temanın
ismini.)
| <%@ Page Language="C#"
CompileWith="Default.aspx.cs" ClassName="Default_aspx"
Theme="Temam" %> |
Şimdi default.aspx sayfamızın
tarayıcıdaki görünümüne tekrar bakacak olursak, aşağıdaki ekran
görüntüsünü elde ederiz.
Şekil 6. Temamızın sayfaya
uygulanmış hali.
Görüldüğü gibi, default.aspx
çalıştığında, page direktifindeki theme özelliğinin sahip olduğu değerin
belirttiği klasör, web uygulamasının Themes klasörü altında aranmış ve
bulunduktan sonra, ilgili skin dosyasındaki kontrollere ait font ve renk
özellikleri yüklenmiştir. Bu örneğimizde temamız, web sayfası
seviyesindedir. Yani, uygulamamıza aşağıdaki ekran görüntüsüne sahip
ikinci bir form eklediğimizde, page direktifinin theme özelliğine
temamızı atamadığımız sürece, sunucu kontrollerinin varsayılan
görünümlerine sahip olduğunu farkederiz.
Şekil 7. Theme özelliği ayarlanmamış
sayfanın tasarım hali.
Şekil 8.
Theme özelliği ayarlanmamış sayfanın
çalışan hali.
Bu durumda karşımıza şöyle bir soru
çıkar. Temalarımızı, web uygulamasının içerdiği tüm sayfalara uygulamak
istersek ne olacak? İşte bu sorunun cevabı her zaman olduğu gibi,
uygulamanın tamamına ait ayarlamaları yapabileceğimiz web.config dosyası
ile ilgilidir. Sorunun çözümü için, web.config dosyasına pages takısını
aşağıdaki syntax ı ile eklememiz gerekir.
<system.web>
<pages theme="Temam"></pages>
.
.
.
</system.web> |
Böylece, web uygulamasındaki tüm
sayfaların, Temam isimli temayı uygulamasını sağlamış oluruz. Başka bir
deyişle web uygulaması seviyesinde tema uygulatmış oluruz. Bu noktadan
sonra default2.aspx sayfamızın çalışmasına bakarsak, sunucu
kontrollerinin temayı uyguladığını görürüz.
Şekil 9. Uygulama seviyesinde tema
kullanılmasının sonucu.
Diğer bir seviye olarakta, makine
seviyesinin olduğundan bahsetmiştik. Makine seviyesinde yapılan tema
uyarlamaları, sistemde geliştirilen tüm web uygulamalarına, bu
uygulamalardaki tüm web sayfalarına ve bu sayfalardaki tüm sunucu
kontrollerine uygulanmaktadır. Makine seviyesinde tema uyarlamasını
gerçekleştirmek için, windows 2000 işletim sistemleri için
C:\WINNT\Microsoft.NET\Framework\v2.0.40607\CONFIG adresinde yer alan
machine.config dosyasında yine pages takısındaki theme özelliğini
aşağıdaki syntax ta olduğu gibi ayarlamamız gerekmektedir.
<pages theme="Temam">
.
.
.
</pages> |
Ancak burada dikkat etmemiz gereken
özel bir nokta vardır. Machine.config doysasına ekelenen
temanın(temaların) sistemdeki tüm web uygulamalarına uyarlanabilmesi
için C:\Inetpub\wwwroot\aspnet_client\system_web\2_0_40607 \Themes
adresi altında oluşturulması veya var olan temaların buraya kopyalanması
gerekmektedir. Temam isimli klasörümüzü içeriği ile birlikte buraya
kopyalarsak ve machine.config de yukarıda bahsettiğimiz ayarlamayı
yaparsak, sistemdeki tüm web uygulamalarının bu temayı uyguladığını
görürüz.
Şekil 10. Temamızı global kullanıma
açtığımız klasör.
Temalar ile ilgili önemli bir diğer
noktada, üst seviyedeki temaların geçersiz kılınması işlemidir. Makine
seviyesinde tema uyguladığımızı düşünürsek, herhangibir web
uygulamasında bu temayı uygulamak istemiyebiliriz. Bu durumda tek
yapmamız gereken, web.config dosyasındaki page takısının theme
özelliğine ya başka bir temayı atamak yada boş bırakmak olacaktır.
Böylece web uygulaması, makine
seviyesinde belirtilen temayı geçersiz kılacaktır. Eğer sayfa
seviyesinde, uygulama seviyesindeki yada makine seviyesindeki bir temayı
geçersiz kılmak istersek, bu kez ilgili sayfanın page direktifindeki
theme özelliğinde ya başka bir temayı belirtmemiz yada EnableTheming
özelliğine false değerini vermemiz gerekecektir.
| <%@ Page Language="C#"
EnableTheming="false"%> |
EnableTheming özelliği, sunucu
kontrolleri içinde geçerlidir. Dolayısıyla, bir temayı uygulayan bir web
sayfasındaki herhangibir kontrol için tema özelliklerini geçersiz
kılabiliriz. Bunun için tek yapmamız gerken sunucu kontrolünün
EnableTheming özelliğine false değerini atamaktır. Örneğin,
geliştirdiğimiz web uygulmasındaki Temam temasını göz önüne alalım. Eğer
button kontrolünün EnableTheming özelliğini false yaparsak sayfamızı
çalıştırdığımızda aşağıdaki ekran görüntüsünün oluştuğunu ve Button
kontrolüne tema özelliklerinin uygulanmadığını görürüz.
| <asp:Button ID="Button1"
Runat="server" Text="Göster" EnableTheming="false"/> |
Şekil 11. Bir kontrol için temanın
geçersiz kılınması.
Böylece Asp.Net 2.0 ile gelen tema
tekniğinin nasıl kullanıldığını kısaca incelemiş olduk. Bir sonraki
makalemizde görüşmek dileğiyle hepinize mutlu günler dilerim.
Burak Selim ŞENYURT
selim@bsenyurt.com
Makale:
Asp.Net 2.0 ve Temalar (Themes) ASP.NET Burak Selim Şenyurt
|