Tam Sürümü Göster: Asp.Net 2.0 ve Temalar (Themes)
Sayfalar: 1
Asp.Net 2.0 ve Temalar (Themes) Gönderen: FetihlerFatihi Tarih: 24 October 2007 21:34:10
Bu makale csharpnedir.com'da C# dili için yazılmıştır. Delphi dili için tarafımdan düzenlenmiştir.
---
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.0’da 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.
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.
Eğer sayfamızı bu haliyle tarayıcıda açarsak aşağıdaki ekran görüntüsünü elde ederiz.
Bir tema oluşturmak için “File > New > Other� menüsü ile aşağıdaki pencereye ulaşıyoruz. “Skin File�yi işaretleyip, “OK�e tıklıyoruz.
Projede tema klasörünü oluşturmak için karşınıza bir onay penceresi çıkacaktır. Bu pencereye “Yes� dediğinizde Project Manager kısmında “App_Themes� isminde bir klasör ve tema klasörü ile birlikte tema dosyası da oluşturulacaktır.
“App_Themes� klasöründeki her klasör farklı bir temayı temsil eder. Bu klasörlerin içine skin dosyası resim ve css dosyaları eklenmektedir.
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 uygulamadaki 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ı, skin dosyamıza ait olup çeşitli sunucu kontrollerine görsel açıdan zenginlik katacak özelliklere sahiptir.
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 hangi bir 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.)
Ş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.
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 App_Themes klasörü altında pages takısını aşağıdaki syntax’ ı ile eklememiz gerekir.
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.50727\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.
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.
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.
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.
Ynt: Asp.Net 2.0 ve Temalar (Themes) Gönderen: jonjul Tarih: 25 October 2007 02:11:33
güzel bir konu. 2007'nin .net tarafını yoğun iş temposuyla kurcalayamadım hiç. ama .net 2.0 ın nimetlerini keşfetmek için sabırsızlanıyorum.
Yazı için teşekkürler
Ynt: Asp.Net 2.0 ve Temalar (Themes) Gönderen: kocaturk Tarih: 25 October 2007 03:19:20
Fatih kardeşim, eline koluna sağlık makale için TÜM SİTE ÜYELERİ
adına teşekkür ederim.
Bu makale csharpnedir.com'da C# dili için yazılmıştır. Delphi dili için tarafımdan düzenlenmiştir.
---
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.0’da 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.
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.
Eğer sayfamızı bu haliyle tarayıcıda açarsak aşağıdaki ekran görüntüsünü elde ederiz.
Bir tema oluşturmak için “File > New > Other� menüsü ile aşağıdaki pencereye ulaşıyoruz. “Skin File�yi işaretleyip, “OK�e tıklıyoruz.
Projede tema klasörünü oluşturmak için karşınıza bir onay penceresi çıkacaktır. Bu pencereye “Yes� dediğinizde Project Manager kısmında “App_Themes� isminde bir klasör ve tema klasörü ile birlikte tema dosyası da oluşturulacaktır.
“App_Themes� klasöründeki her klasör farklı bir temayı temsil eder. Bu klasörlerin içine skin dosyası resim ve css dosyaları eklenmektedir.
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 uygulamadaki 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ı, skin dosyamıza ait olup çeşitli sunucu kontrollerine görsel açıdan zenginlik katacak özelliklere sahiptir.
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 hangi bir 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#" Debug="true" Codebehind="Default.pas" Theme="Temam" AutoEventWireup="false" Inherits="Default.TDefault"%>
Ş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.
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 App_Themes klasörü altında pages takısını aşağıdaki syntax’ ı ile eklememiz gerekir.
:
<system.web>
<pages theme="Temam"></pages>
.
.
.
</system.web>
<pages theme="Temam"></pages>
.
.
.
</system.web>
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.50727\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>
.
.
.
</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.
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.
:
<pages theme=""></pages>
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"/>
Ynt: Asp.Net 2.0 ve Temalar (Themes) Gönderen: jonjul Tarih: 25 October 2007 02:11:33
güzel bir konu. 2007'nin .net tarafını yoğun iş temposuyla kurcalayamadım hiç. ama .net 2.0 ın nimetlerini keşfetmek için sabırsızlanıyorum.
Yazı için teşekkürler
Ynt: Asp.Net 2.0 ve Temalar (Themes) Gönderen: kocaturk Tarih: 25 October 2007 03:19:20
Fatih kardeşim, eline koluna sağlık makale için TÜM SİTE ÜYELERİ
adına teşekkür ederim.