در این مقاله، ایجاد داینامیک تم ها و نحوه استفاده ا زآن در صفحات وب را با یک مثال بررسی خواهیم کرد.

مقدمه:

تم امکان تنظیم ویژگی های کنترل های سمت سرور را می  دهد و استفاده از آن، پایداری فرمت کل وب سایت را فراهم می کند. به این معنی که، تمام کنترل ها یک فرمت یکپارچه را حفظ می کنند. برای مثال، رنگ دور تمام دکمه ها در وب سایت قرمز باشد. هر تم، حداقل باید یک فایل پوسته (skin file) داشته باشد. یک وب سایت می تواند یک و یا چند تم داشته باشد و با استفاده از تم، ظاهر سایت در ظرف چند ثانیه به طور کامل تغییر کند. به عنوان مثال، یک وب سایتی که CD موسیقی می فروشد را در نظر بگیرید که می خواهد دو هفته عید نوروز هر سال، تم خود را عوض کند و پس از آن دوباره به تم قبلی برگرداند. این کار به راحتی با دو تم Normal و Norouz به طور مثال امکان پذیر است.

ایجاد تم:

در ASP.Net، تمام تم ها در فولدر App-themes دسته بندی می شوند. برای ایجاد تم روی نام پروژه کلیک می کنیم، مانند شکل زیر، از زیرمنوی  Add ASP.Net Folder، گزینه theme را انتخاب می کنیم.

بعد از اینکه تم را ایجاد کردیم، می توانیم فایل های skin و css را به آن اضافه کنیم. skin اطلاعات مربوط به فرمت کنترل های سمت سرور را فراهم می کند، در حالی که  css این اطلاعات را برای عناصر HTML  فراهم می کند. بنابراین، فرمت دهی از Skin روی سرور استفاده می شود و فرمت دهی css روی مرورگر کاربر ظاهر می شود. فایل های skin و css را می توان، مطابق شکل زیر با استفاده از Add New Item، اضافه کرد.

بعد از ایجاد skin و css، شروع به استایل دهی در css می کنیم.

در ابتدا رنگ پس زمینه را انتخاب می کنیم که ما برای این کار از کد زیر استفاده کردیم:

background-color: #ffff99;

سپس یک lable و یک button در صفحه Default.aspx ایجاد کرده و یک سری ویژگی به آنها اضافه می کینم.

تنظیمات Lable به صورت زیر در آمده است:

تنظیمات button نیز به این شکل در می آید:

سپس کدهای asp ایجاد شده برای این کنترل ها را از این صفحه cut کرده و در فایل skin جایگزین کدهای پیش فرض داخل آن می کنیم. به این شکل:

به این ترتیب، می خواهیم تمام Lableها و Buttonهای درون صفحه چنین ظاهری داشته باشند، بنابراین تنها صفات عمومی و مشترک بین همه کنترل ها را نگه می داریم و مابقی آنها را حذف می کنیم و کد بالا به شکل زیر درمی آید.

حال اگر چند Lable و Button به صفحه اضافه کنیم، می بینیم که همه آنها یک فرمت و شکل واحد خواهند داشت.

استفاده از :skinId

همان طور که در قسمت قبل مشاهده کردید، تم Normal ایجاد شد و روی صفحه Default.aspx تست شد. چند کنترل به صفحه اضافه کردیم که همگی یک فرمت ظاهری داشتند. فرض کنید، می خواهیم یک header lable به فرم اضافه کنیم که ظاهری متفاوت با بقیه Lable ها داشته باشد. برای این کار، باید از skinId استفاده کنیم. فایل skin برای هر یک از انواع کنترل، فقط یک فرمت ظاهری ورودی دارد، یعنی فرمت ظاهری برای دکمه یکبار وارد می شود، جزییات برای Lable یکبار ظاهر می شود و الی آخر. برای وارد کردن دو نوع فرمت برای یک کنترل خاص، از skinId استفاده می شود. در این مثال، می خواهیم تم ما قابلیت نگه داشتن دو فرمت مختلف را داشته باشد، یکی برای  header lable و دیگری برای lable های معمولی. کنترل روی صفحه به این skin id ارجاع داده می شود تا جزییات فرمت مخصوص به خود را از فایل skin بگیرد.

در ادامه می خواهیم سه Lable به صفحه اضافه کنیم که یکی از آنها فرمت header lable و دو تای دیگر فرمت معمولی داشته باشند.

برای این کار در صفحه Default.aspx یک Lable جدید اضافه می کنیم و به عنوان مثال، font-Size آن را روی "X-Large" تنظیم می کنیم. سپس کد Asp آن را نیز مانند مرحله قبل در فایل skin می گذاریم و تنها صفات مشترک را نگه می داریم بعلاوه font-size، و به هر یک از کنترل ها یک ID می دهیم، بنابراین skin ما به صورت زیر در می آید:

حال به صفحه Default.aspx رفته و سه Lable گفته شده را اضافه می کنیم. اگر به properties هر یک از کنترل ها برویم، می توانیم گزینه SkinId را ببینیم که در حال حاضر، دو گزینه Header و Normal را دارد.

حال میخواهیم یک مثال با دو تم بسازیم که خروجی آن به شکل زیر خواهد بود:

زمانی که سایت را باز می کنید، صفحه اصلی نشان داده خواهد شد. شما می توانید یکی از محصولات را انتخاب کرده و دکمه "ثبت" را بزنید و به صفحه "ثبت سفارش" منتقل شوید. این صفحه، Lableهایی برای "پیام ثبت سفارش" و همچنین لینکی به صفحه اصلی دارد. از صفحه اصلی، می توانید به صفحه Webadmin بروید که در آنجا می توان، تم دلخواه خود را انتخاب کرد. از این صفحه نیز، با استفاده از لینک صفحه اصلی می توان دوباره به صفحه اصلی برگشت.

هر سه صفحه سایت، از دو تم Desert و Ocean استفاده می کنند. به طور پیش فرض، زمانی که سایت برای اولین بار باز می شود، هیچ تمی روی آن نیست و باید به صفحه WebAdmin رفته و تم دلخواه خود را انتخاب کرد. کد نوشته شده در WebAdmin از یک session variable برای نمایش دمو استفاده می کند. برای وب سایت های واقعی باید از session application استفاده کنید.

تم های Ocean و Desert:

همان طور که گفتیم، این سایت سه صفحه و دو تم دارد که می توانید در Solution Explorer ببینید.

توجه داشته باشید که هر تم شامل یک skin file و یک css می باشد و فولدر Images شامل تصاویر استفاده شده در صفحه Default.aspx است.

Code Behind مربوط به صفحه Web Admin:

1. رویداد CheckedChanged، برای چک کردن حالت Radio buttonها تعبیه شده اند که با توجه به حالت انتخاب هر Radio Button، نام آن در session variableای به نام PgTheme ذخیره می شود. session variable مقادیر صفحه را در طول یک web session نگه می دارد. در حالت واقعی، تم در یک application global ذخیره می شود، چرا که تنظیمات وب است و توسط ادمین تنظیم می شود.

کد آن به شکل زیر است:

//Sample 1.0 : Set theme session variable when theme selected  
protected void radThemeOcean_CheckedChanged(object sender, EventArgs e)  
{  
   if (radThemeOcean.Checked == true)  
   {  
      Session["PgTheme"] = "Ocean";  
   }  
   else  
   {  
      Session["PgTheme"] = null;  
   }  
}  
  
protected void radThemeDesert_CheckedChanged(object sender, EventArgs e)  
{  
   if (radThemeDesert.Checked == true)  
   {  
      Session["PgTheme"] = "Desert";  
   }  
   else  
   {  
      Session["PgTheme"] = null;  
   }  
} 

2. این صفحه از یک متد به نام SetSkins استفاده می کند که درواقع، skinId را برای Lableهای این صفحه تنظیم می کند.

//4.0 Set SkinIds  
  
protected void SetSkins(String Theme)  
{  
   if (Theme == "Ocean")  
   {  
      LblTitle.SkinID = "PT";  
      LblOcean.SkinID = "NormalLBL";  
      LblDesert.SkinID = "NormalLBL";  
   }  
   else if (Theme == "Desert")  
   {  
      LblTitle.SkinID = "DPT";  
      LblOcean.SkinID = "DNormalLBL";  
      LblDesert.SkinID = "DNormalLBL";  
   }  
}   

3. زمانی که دکمه "Apply" کلیک می شود، Server.Transfer را فراخوانی می کنیم. با فراخوانی این متد، صفحه دوباره اجرا می شود و چرخه حیات صفحه از سر گرفته می شود. زمانی که صفحه بارگذاری می شود، تغییر تم را مشاهده می کنید. کد آن به شکل زیر است:

//3.0 Re-execute the current page  
protected void Button1_Click(object sender, EventArgs e)  
{  
   Server.Transfer(Request.FilePath);  
}   

4. درنهایت، تم صفحه و skinIdها را پیش از راه اندازی (pre-initialization) صفحه تنظیم می کنیم. در ابتدا اطمینان حاصل می کنیم که session variable خالی نباشد، سپس نام تم را از PgTheme می گیریم. پس از تنظیم تم، skinIdها را با فراخوانی متد SetSkins تنظیم می کنیم.

//2.0 Set Page theme when before page initialized  
protected void Page_PreInit(object sender, EventArgs e)  
{  
   if (Session["PgTheme"] == null)  
      Page.Theme = null;  
   else  
   {  
      String theme = Session["PgTheme"].ToString();  
      Page.Theme = theme;  
      SetSkins(theme);  
   }  
}

Code Behind مربوط به صفحات دیگر:

در دو صفحه دیگر، تم را در زمان راه اندازی (initialization) صفحه تنظیم می کنیم. تم از session variable جاری یعنی PgTheme گرفته می شود و قبل از آنکه درواقع راه اندازی صفحه اتفاق بیفتد، اعمال می شود. کد زیر، برای هر دو صفحه Default.aspx و Confirm.aspx استفاده می شود.

Confirm.aspx:

public partial class Confirm : System.Web.UI.Page  
{  
   //7.0 Set the the skin ids based on theme  
   protected void SetSkins(String Theme)  
   {  
      if (Theme == "Ocean")  
      {  
         lblPageTitle.SkinID = "PT";  
         lblInformation.SkinID = "NormalLBL";  
      }  
      else if (Theme == "Desert")  
      {  
         lblPageTitle.SkinID = "DPT";  
         lblInformation.SkinID = "DNormalLBL";  
      }  
   }  
  
   //8.0 Set theme during page initialization  
   protected void Page_PreInit(object sender, EventArgs e)  
   {  
      if (Session["PgTheme"] == null)  
         Page.Theme = null;  
      else  
      {  
         String theme = Session["PgTheme"].ToString();  
         Page.Theme = theme;  
         SetSkins(theme);  
      }  
   }  
} 

Default.aspx:

public partial class _Default : System.Web.UI.Page  
{  
   //5.0 Set Skin function for Default Page  
   protected void SetSkins(String Theme)  
   {  
      if (Theme == "Ocean")  
      {  
         lblPageTitle.SkinID = "PT";  
      }  
      ehttp://barnamenevisan.org/Users/Articles/EditArticle/3439lse if (Theme == "Desert")  
      {  
         lblPageTitle.SkinID = "DPT";  
      }  
   }  
  
   //6.0 Set theme during page initialization  
   protected void Page_PreInit(object sender, EventArgs e)  
   {  
      if (Session["PgTheme"] == null)  
         Page.Theme = null;  
      else  
      {  
         String theme = Session["PgTheme"].ToString();  
         Page.Theme = theme;  
         SetSkins(theme);  
      }  
   }  
}