ASP.NET'te temalarla çalışmak - 1
Merhaba. Bu yazımızda ASP.NET web projelerinizde tema kullanımının nasıl yapıldığı hakkında size fikir verecek kısa açıklamalar paylaşacağım.
Hazır blog sitelerinin çoğunda kullanıcıya tema seçtirme özelliği bulunmaktadır. Böylece sitedeki tüm kontrollerin ve div katmanlarının davranış biçimlerinin değiştiğini görürsünüz. Örnek : bloger.com, blogcu.com projelerinde olduğu gibi.
CSS biçimlendirme yöntemi ile sayfalarınızdaki div katmanlarını, html etiketlerini biçimlendirebilirsiniz. Peki ASP.NET'te bir textbox kontrolünü ya da bir literal kontrolünü, label kontrolünü nasıl biçimlendirirsiniz ? Burada devreye server taraflı kontrollerin biçimlendirilmesi konusu giriyor. Yani TEMALAR
Tema Oluşturmak
Yeni bir web projesi oluşturun. Proje dizininde "Add New İtem" komutu ile bir SkinFile dosyası ekleyin. Örneğimizde bir mavi.skin bir de kirmizi.skin dosyası ekliyoruz. Proje ana dizininde App_Themes klasörü altında skin dosyalarının oluşturulduğunu göreceksiniz.
Projeme test amaçlı bir test.aspx dosyası ekliyorum. Dosyaya da bir label kontrolü bırakıyorum. Label kontrolüne properties ekranından çeşitli biçimlendirmeler yapıyorum ve HTML kodlarını alıyorum.
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Italic="True"
Font-Names="Arial" Font-Size="XX-Large" ForeColor="Blue" Text="Label"></asp:Label>
Bu kodları mavi.skin dosyasının içine ekliyorum ve ID="Label1" özelliğini kaldırıp onun yerine SkinID="mavi_label" yazıyorum ve Text özelliğini siliyorum.
<asp:Label SkinID="mavi_label" runat="server" Fon-Bold="True" Font-Italic="True"
Font-Names="Arial" Font-Size="XX-Large" ForeColor="Blue"></asp:Label>
Son değişikliklerin aynısını kirmizi.skin dosyasına da ekliyorum. Sadece ForeColor özelliğini Red olarak ayarlıyorum.
Şimdi projemize iki dosya ekleyelim. Biri kirmizi.aspx diğeri de mavi.aspx olsun. Ardından kirmizi.aspx ve mavi.aspx sayfalarının HTML kod tarafında @Page direktifine aşağıdaki gibi tema özelliğini her iki sayfa için de belirtelim.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="mavi.aspx.cs" Inherits="mavi" Theme="mavi" %>
Her iki dosyaya da birer label kontrolü ekleyelim. Bu kontrollerin SkinID özelliğine kirmizi.aspx dosyası için kirmizi_label, mavi.aspx dosyası için mavi_label olarak tanımlayalım.
Sırayla her iki dosyayı çalıştırdığımızda sonuç aşağıdaki gibi olacaktır.
Peki biz bu işi zaten CSS ile halletmiyor muyduk ? Label kontrolüne CSS class atayabildiğimize göre bu şekilde çalışarak hayatımızda ne değişti ? Yazı dizisinin devamında skin dosyaları yanında bir de StyleSheet dosyası ekleyerek ASP.NET'te tema konusunu nasıl geliştirebileceğimizi görelim.
17 Kasım 2009 Salı öğleden sonra 15:21
Mesajınızı yazabilirsiniz