ASP.NET Theme in Hindi

 इस ट्यूटोरियल में हम ASP.NET Theme के बारे में समझेंगे 

Theme और मास्टर पेज में अंतर होता है।

मास्टर पेज की सहायता से जहां एक ओर एक ही तरह के कंटेंट को अनेकानेक वेबपेज पर शेयर/ सांझा किया जाता है वहीं दूसरी ओर थीम का उपयोग करके किसी भी कंटेंट के अपीरियंस को प्रभावित किया जाता है। कंटेंट के अपीरियंस से अभिप्राय उसके फॉन्ट, बैककलर, बॉर्डर कलर, बॉर्डर साइज इत्यादि से है।

माइक्रोसॉफ्ट के अनुसार

ASP.NET themes are a collection of properties that define the appearance of pages and controls in your Web site. A theme can include skin files, which define property settings for ASP.NET Web server controls, and can also include cascading style sheet files (.css files) and graphics. By applying a theme, you can give the pages in your Web site a consistent appearance.

Theme और Skin File

Theme अप्लाई करने के लिए स्किन फाइल को क्रिएट करना पड़ता है। स्किन फाइल का एक्सटेंशन .skin होता है और इसका उपयोग थीम को क्रिएट करने के लिए किया जाता है।

ASP.NET के अंतर्गत Theme का यूज़ किसी भी कंट्रोल के अपीयरेंस को प्रभावित करने के लिए किया जाता है। उदाहरण के लिए, मान लीजिए, किसी फॉर्म में कई सारे टेक्सटबॉक्स है और आप चाहते हैं कि उन सभी टेक्सटबॉक्स के बैककलर पीला रंग का हो और उनका बॉर्डर डॉटेड लाइन का हो तो ऐसा करने के लिए हम Theme का उपयोग कर सकते हैं। ASP.NET के भीतर Theme उस पेज पर उपलब्ध सारे टेक्स्ट बॉक्स का बैककलर पीला कर देगा और उसके बॉर्डर को डॉटेड लाइन का बना देगा। 

ध्यातव्य है कि Theme के यूज से कंट्रोल का कॉन्टेंट प्रभावित नहीं होता है।

Creating Theme

अब सवाल है कि ASP.NET के अंतर्गत Theme कैसे बनाते हैं? 

ASP.NET के अंतर्गत Theme का अभिप्राय एक स्पेशल फोल्डर से है जिसके भीतर CSS और स्किन फाइल्स रखे जाते हैं। Theme से जुड़े हुए CSS और स्किन फाइल्स को एक स्पेशल फोल्डर के भीतर रखते हैं जिसे App_Theme करते हैं। जिस प्रकार App_Data नाम का एक स्पेशल फोल्डर होता है जिसमें हम डाटाबेस से जुड़े हुए फाइल रखते हैं, ठीक उसी तरह Theme से संबंधित जितने भी फाइल्स होते हैं उन सभी फाइल्स को App_Theme फोल्डर के भीतर रखते हैं। यह फोल्डर एप्लिकेशन के रूट में स्थित होता है। Theme का अभिप्राय वेबपेज के Page डिरेक्टिव के एटट्रिब्यूट से भी है जिसको हम आगे देखेंगे।

ASP.NET के अंतर्गत Theme के लिए एक .skin एक्सटेंशन पेज होता है जिसमें हम जिस कंट्रोल के अपीयरेंस को चेंज करना चाहते हैं उसकी प्रॉपर्टी और वैल्यू को स्किन पेज के भीतर दे देते हैं। बस यह ध्यान रखना है कि हम वहां पर कंट्रोल की आईडी प्रॉपर्टी का यूज नहीं करते हैं। आईडी प्रॉपर्टी के अलावा जो भी अपीरियंस से जुड़े हुए कंट्रोल के प्रॉपर्टीज हैं उन सबको हम उनके वैल्यूज के साथ लिख देते हैं और उस फाइल को सेव कर देते हैं। उदाहरण के लिए, Simple/TextBox.skin फ़ाइल के भीतर की कोडिंग निम्नलिखित है

<asp: TextBox BackColor= "Yellow" BorderStyle= "Dotted" />

Adding Skin to Theme

ASP.NET के किसी वेब फॉर्म के भीतर Theme को यूज करने के लिए हमें उस पेज के Page डायरेक्टिव के भीतर Theme एटट्रिब्यूट देना होता है। उदाहरण के लिए,

<%@ Page Language="VB" Theme="Simple" Runat="server" %>

ध्यातव्य है कि Theme का वैल्यू App_Theme फोल्डर के भीतर स्थित फोल्डर होता है जिसमें स्किन और CSS फाइल्स रखे हुए हैं।

इसके द्वारा यह पता चल जाता है कि किस Theme को वेबपेज पर यूज करना है। थीम को अनुप्रयोग करने के लिए App_Theme फोल्डर के भीतर उस स्किन फाइल का सर्च होता है जिसका रिफरेंस डायरेक्टिव के भीतर कि Theme एट्रिब्यूट के साथ दिया हुआ होता है।

आप चाहे तो एक ही स्किन फाइल बना ले और उसमें जितने भी कंट्रोल की चाहे उनकी प्रॉपर्टीज वैल्यूज को डिफाइन कर दे अथवा ऐसा भी हम कर सकते हैं कि हम अलग-अलग स्किन फाइल बना ले और उन फाइल में हम अलग-अलग कंट्रोल्स के लिए Theme बना ले।

Creating Named Skin

ऊपर जो उदाहरण दिया गया है उसमें स्किन फाइल एक डिफॉल्ट स्किन फाइल है। जब इस फाइल के थीम को किसी वेबपेज पर अप्लाई किया जाता है तो यह वेब पेज के सारे टेक्स्ट बॉक्स को प्रभावित करेगा। 

डिफॉल्ट स्किन फाइल में SkinID एटट्रिब्यूट का उपयोग कंट्रोल के साथ नहीं किया जाता है।

ऐसा भी हो सकता है कि आप चाहते हो कि आपके वेबपेज के कुछ ही टेक्सटबॉक्स पर आपका थीम अप्लाई हो तो इसके लिए आपको Named Skin फाइल को बनाना होगा। इस फाइल के भीतर जिस कंट्रोल की भी हम स्किन बना रहे हैं उसके साथ एक SkinID प्रॉपर्टी भी देनी पड़ती है। स्किन आईडी प्रॉपर्टी एक यूनिक वैल्यू एक्सेप्ट करता है और जब आप वेब पेज के भीतर किसी कंट्रोल के ऊपर स्किन अप्लाई करना चाहते हैं तो उस कंट्रोल के स्किन आईडी प्रॉपर्टी में इसी यूनीक वैल्यू को यूज करते हुए आप उस टेक्सटबॉक्स पर या कंट्रोल पर थीम अप्लाई कर सकते हैं।

उदाहरण के लिए, आप स्किन फ़ाइल में टेक्सटबॉक्स के लिए दो तरह का स्किन बनाते हैं १) डिफॉल्ट स्किन २) नेम्ड स्किन

उदाहरण के लिए, Simple2/TextBox.skin फ़ाइल के भीतर की कोडिंग निम्नलिखित है

<asp: TextBox SkinID="DashedTextBox" BackColor= "Yellow" BorderStyle= "Dashed" />

<asp: TextBox BackColor= "Yellow" BorderStyle= "Dotted" />

<%@ Page Language="VB" Theme="Simple2" Runat="server" %>

<head>Learn Theme</head>

<html>

<body>

<asp: TextBox id ="txtBox1" SkinID="DashedTextBox" Runat = "server" />

<asp: TextBox id="txtBox2"  Runat = "server" />

</body>

</html>

Theme vs StyleSheetTheme

जैसा कि हमने देखा कि पेज डायरेक्टिव के भीतर Theme एटट्रिब्यूट यूज करके हम किसी भी वेबपेज के भीतर किसी Theme को अप्लाई कर सकते हैं। अगर एक ही तरह के Theme को कई सारे वेब पेज पर अप्लाई करना हो तो यह कठिन कार्य होगा क्योंकि तब प्रत्येक पेज के पेज डायरेक्ट के भीतर Theme को लिखना पड़ेगा और अगर इसमें किसी प्रकार का परिवर्तन करना होगा तो हमें प्रत्येक पेज पर जाकर उस Theme को परिवर्तित करना होगा। 

इस तरह की समस्या से बचने के लिए हम ऐसे Theme जिसका यूज़ सारे वेबपेजेस पर करना है, उसको वेब कंफीग्रेशन फाइल के भीतर डिफाइन कर देते हैं। 

<pages theme="ThemeFileName" > 

टैग के भीतर Theme एटट्रिब्यूट यूज किया जाता है और उसमें Theme फाइल का नाम वैल्यू के रूप में दिया जाता है जिसका उपयोग हमें अपने एप्लीकेशन के विभिन्न पेज पर यूज करना है।

Global Theme

ASP.NET के अंतर्गत अगर एक ही वेबसर्वर के भीतर कई सारे वेब एप्लीकेशन रन हो रहे हो और हम चाहते हैं कि उन सभी में पब्लिकेशन के ऊपर एक समान Theme यूज हो तो इसके लिए हमें ग्लोबल Theme का उपयोग करना होता है। 

कई बार किसी कंपनी की वेबसाइट के भीतर में समान रूप से एक जैसा थीम प्रदान करना होता है। इसके लिए हम ग्लोबल Theme यूज करते हैं। ग्लोबल Theme का यूज करने के लिए हमें अपने Theme को निम्नलिखित डायरेक्टरी के अंदर रखना पड़ता है

इसी तरह अगर आपका वेबसाइट HTTP आधारित वेब एप्लीकेशन है तो उसके लिए आपको निम्नलिखित डायरेक्टरी के भीतर अपने Theme के फोल्डर को कॉपी करके रखना पड़ता है

© अजीत कुमार, सर्वाधिकार सुरक्षित।

इस आलेख को उद्धृत करते हुए इस लेख के लिंक का भी विवरण दें। इस आलेख को कॉपीराइट सूचना के साथ यथावत साझा करने की अनुमति है। कृपया इसे ऐसे स्थान पर साझा न करें जहाँ इसे देखने के लिए शुल्क देना पडे।