Creating Themes in ASP.NET

ASP.NET Application के लिए ASP.NET Theme Create करना काफी आसान काम होता है, हालांकि कई बार किसी Specific प्रकार की जरूरत को पूरा करने के लिए हमें Artistic व Designer Capabilities की जरूरत होती है और यहां हम जिन ASP.NET Themes को Create करने के बारे में जानेंगे, उन्हें किसी भी Web Application में Application, Page या Control Level पर Apply किया जा सकता है।

Theme Folder Structure

जब हम हमारा स्वयं का ASP.NET Theme Create करना चाहते हैं, तब सबसे पहले हमें हमारे Theme के लिए Proper Folder Structure Create करना होता है और Folder Structure Create करने के लिए सबसे पहले हमें निम्न चित्रानुसार हमारे Solution Explorer में Right-Click करके Display होने वाले Popup Menu के माध्‍यम से “App_Themes” Folder को Create करना होता है:

परिणामस्वरूप Solution Explorer में निम्न चित्रानुसार App_Themes Folder Create हो जाता है, और इस Folder में एक Sub-Folder भी Create होता है, जिसका नाम हमने “BccFalna” रखा है, जो कि हमारे Newly Create की जाने वाली Theme का नाम है:

हम चाहें तो इस App_Themes Folder में और Sub-Folders Create कर सकते हैं जहां हर Sub-Folder एक अलग Theme को Represent करता है।

हम एक ही Application के App_Themes Folder में कई Themes इसलिए Create कर सकते हैं, क्‍योंकि ASP.NET हमें ये सुविधा देता है कि हम एक ही Web Application के Different Pages पर Different Themes Apply कर सकते हैं।

App_Themes Folder Create करने व उसमें अपने Custom Theme का Sub-Folder Create करने के बाद हमें हमारी किसी भी Custom Theme में निम्नानुसार कुल तीन Elements को Compulsory रूप से Create करना होता है:

• Skin Files
• CSS Files
• Images

Working with Skins

Skin वास्तव में उन Styles का एक Definition होता है, जिन्हें हमारे ASP.NET Page के Server Controls पर Apply करना होता है। ये Skins, CSS Files या Images के Combination से बनते हैं।

अपने ASP.NET Application पर Apply करने हेतु Theme Create करने के लिए हम हमारे Themes Folder में एक Single Skin File Use करते हैं। इस Skin File का नाम कुछ भी हो सकता है, लेकिन Extension हमेंशा .skin ही होना जरूरी होता है।

इसलिए अपने Theme BccFalna के लिए Skin File Create करने हेतु Theme Name “BccFalna” पर Right Click करके Display होने वाले Popup Menu से “Add New Item” को Click करने पर जो Dialog Box Display होता है, उसमें निम्न चित्रानुसार “Skin File” Option Select करके व उसका एक Specific नाम Specify करके “Add” Button पर Click करते ही हमारे Theme में एक Skin File Add हो जाती है:

इस Skin File में Default रूप से निम्नानुसार Code Content लिखा होता है, जो इस बात को Indicate करता है कि इस Skin File में किस प्रकार का Content व Program Logic लिखा जा सकता है:

<%--
Default skin template. The following skins are provided as examples only.

1. Named control skin. The SkinId should be uniquely defined because
   duplicate SkinId's per control type are not allowed in the same theme.

<asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
   <AlternatingRowStyle BackColor="Blue" />
</asp:GridView>

2. Default skin. The SkinId is not defined. Only one default 
   control skin per control type is allowed in the same theme.

<asp:Image runat="server" ImageUrl="~/images/image1.jpg" />
--%>

इस Skin File में हमें हमारे Web Application के प्रत्‍येक Server Control के लिए एक Definition Specify करना होता है। चूंकि हमारे Sample Webpage पर कुल तीन Controls Label, TextBox व Button हैं, इसलिए इस Skin File में हमें कुल तीन Definitions Specify करने होंगे।

जिस तरह से हम अन्‍य Regular Server Controls के Markup में Runat=”server“ Attribute को Specify करते हुए उन्हें .aspx Page पर Place करते हैं, ठीक उसी तरह से इन Skin Controls के Markups में भी Runat=”server“ Attribute को Specify करना जरूरी होता है।

यदि हम इस Attribute को Control के Skinned Version में Specify करते हैं, तो उस स्थिति में हम इन Controls को अपने .aspx Page में भी Include कर सकते हैं अन्‍यथा हम Skinned Controls के Markups को अपने .aspx Page में Specify नहीं कर सकते।

साथ ही Control के Skinned Version में ID Attribute को Specify नहीं किया जाता। यदि ID Attribute को Specify किया जाए, तो उस स्थिति में वह Theme जब किसी Page पर Apply होने की कोशिश करता है, तो Error Generate होता है।

जैसाकि हम जानते हैं कि हमारे Webpage पर कुल तीन Web Controls हैं और तीनों ही Web Controls को हम विभिन्न प्रकार के Visual Attributes (BackColor, ForeColor, etc…) द्वारा अलग-अलग Definitions दे सकते हैं और ये Definitions हमारे Page को एक Specific Look and Feel Provide करते हैं।

इस प्रकार से हम हमारे Sample .aspx Page के लिए Apply की जाने वाली Custom Theme की Skin को निम्नानुसार Specify कर सकते हैं:

File Name: SkinFile.skin
<asp:Textbox Runat="server" BackColor="Yellow" ForeColor="Red" />
<asp:Button Runat="server"  BackColor="Red" />

और फिर अपनी इस BccFalna नाम की Custom Theme को @Page Directive में  Theme=”BccFalna“ Specify करते हुए निम्नानुसार Apply कर सकते हैं:

File Name: Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" Theme="BccFalna" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <h1>BccFalna.com</h1><br />
        <asp:Textbox ID="TextBox1" Runat="server" /><br /><br />
        <asp:Calendar ID="Calendar1" Runat="server" /><br />
        <asp:Button ID="Button1" Runat="server" Text="Button" />
    </form>
</body>
</html>

परिणामस्वरूप अब जब हम हमारे Default.aspx Page को Run करते हैं, तो हमें हमारा Resultant Output निम्नानुसार दिखाई देता है:

हम देख सकते हैं कि इस Output में हमारे TextBox का Background व Foreground दोनों तथा Button Control का Background Color Change हो गया है, जबकि इस Style को हमने हमारे Custom Theme BccFalna की Skin File SkinFile.skin में Specify किया है। लेकिन क्‍योंकि इस Skin File वाली Theme को हमने Default.aspx Page पर Apply किया है, इसलिए जब ये Page Run होता है, तो Skin File में Specified Definitions का Effect Webpage के Controls पर दिखाई देता है।

Working with CSS
Working with Images
Same Control Multiple Skins

ASP.NET WebForms के अन्‍तर्गत अपने ASP.NET Application के लिए नई Theme and Skins Create करने से सम्‍बंधित अन्‍य सभी Concepts जैसे कि CSS Files, Skin Files, Images, आदि को Step by Step विस्‍तार से सीखने के लिए आप इस पुस्‍तक को खरीद सकते हैं।