वास्तविक परियोजना में सिल्वरलाइट के लिए PivotViewer का उपयोग कैसे करें (भाग I)

Habré पर कई बार उन्होंने PivotViewer नियंत्रण के बारे में लिखा, बड़ी मात्रा में डेटा की कल्पना और फ़िल्टर करने के लिए डिज़ाइन किया गया। मैं एक वास्तविक परियोजना में इस अत्यंत दिलचस्प तत्व का उपयोग करने का अनुभव साझा करना चाहता हूं।



यदि आप केवल यह जानना चाहते हैं कि यह क्या है और क्या यह खेत में उपयोगी हो सकता है, तो xaoccps से सिल्वरलाइट रिव्यू के लिए अच्छा PivotViewer पढ़ें, यह विवरण और उदाहरण काफी पर्याप्त होगा। लेकिन अगर आप अपनी किसी भी परियोजना में PivotViewer को एकीकृत करने पर विचार कर रहे हैं, तो यह कहानी आपको कुछ समय बचाएगी।



वैसे, समीक्षाओं में से एक पर टिप्पणी ने मुझे इस विषय को लिखने के लिए प्रेरित किया:

मैं "कैसे" (WPF और SL के लिए कम से कम, शायद अन्य रूपरेखाओं के लिए स्थिति समान है) के बारे में पसंद नहीं करता - वे घने जंगल में कई अच्छी तरह से जलाए गए डामर पथ के साथ यात्रा करने की तरह हैं। जब तक आप कहीं नहीं मुड़ते - तब तक सब कुछ शांत, स्वस्थ और प्राथमिक है। लेकिन अगर आप कम से कम एक कदम - और आप घने जंगल से पूरी तरह से प्राप्त करते हैं।

मैं तुरंत कहूंगा, इस मामले में हम एक घने जंगल का सामना नहीं करेंगे, लेकिन हमें थोड़ा खोना होगा।



इससे पहले कि आप सड़क पर आएँ, इस तत्व के बारे में अर्ध-दार्शनिक विचारों के एक जोड़े (यदि आप केवल कार्यान्वयन में रुचि रखते हैं - उन्हें छोड़ने के लिए स्वतंत्र महसूस करें)।



सच कहूं, जब मैंने पिवट के बारे में सुना और विकी के साथ "छत" उदाहरण देखने को मिला, तो पहले विचार "शांत" और "क्या नरक?" थे। Google पर "विकी सिल्वरलाइट" टाइप करना बहुत आसान है और लेख की एक गुच्छा के विवरण के साथ एक cxml फ़ाइल अपलोड करने की तुलना में आपको पहली पंक्ति पर जिस लिंक की आवश्यकता है, उसे फ़िल्टर में "वेब डेवलपमेंट सॉफ्टवेयर" और 2009 चुनें, और सुंदर ग्राफिक्स की प्रशंसा करें और वांछित के साथ कार्ड प्राप्त करें। लिंक (यह केवल पहली धारणा है, मेरा मानना ​​है कि ऐसे परिदृश्य हैं जब ऐसा दृष्टिकोण उपयोगी हो सकता है और हो सकता है)। यह मुझे सिनेमाघरों में से एक के नए संस्करण की याद दिलाता है, जो एक फ्लैश पर बनाया गया था। रंगीन एनीमेशन, विस्फोट और संगीत के साथ कोई भी क्लिक किया गया था, और जब आगंतुक विशेष प्रभावों पर विचार करते हुए थक गया था, तो उसने एक असंगत लिंक "खराब इंटरनेट के लिए साइट का पुराना संस्करण" खोजना शुरू कर दिया :)



जब मैंने नए कंप्यूटर के लिए पिक लेने की कोशिश की तो पिवट के लिए मेरा रवैया बदल गया। वैसे, पिछली बार जब मैं लोहे में रुचि रखता था, तीन साल पहले, जब मैं एक पुराना कंप्यूटर चुन रहा था। इसलिए अब मुझे विभिन्न तकनीकों के साथ और विभिन्न निर्माताओं से विभिन्न घटकों के लिए सैकड़ों विकल्पों में से चुनना था (मैंने खुद को "आत्मा के लिए" इकट्ठा करने का फैसला किया, अपने छात्र वर्षों को याद करने के लिए, व्यक्तिगत रूप से प्रत्येक "हार्डवेयर के टुकड़े" को चुनने और बजट में फिट होने के लिए)।



पसंद को बहुत कुछ साइटों द्वारा सुविधाजनक बनाया गया था, जिससे उत्पादों की वांछित श्रेणी का चयन करना संभव हो गया, विभिन्न मापदंडों द्वारा इसे फ़िल्टर किया गया और जल्दी से तुलना की: "GigaByte के पास क्या है?", "शायद वही, लेकिन 140 मिमी प्रशंसक के साथ?" या इसे जोड़ा जाएगा? अगर मैं $ 20 की कीमत बढ़ाता हूं तो क्या सूची में कुछ अच्छा है? "



यह वास्तव में बहुत सुविधाजनक था, और फिर मैंने सोचा कि यह PivotViewer का कार्यान्वयन है। आखिरकार, इसे विशेष रूप से डिज़ाइन किया गया है ताकि आप बहुत बड़े (और यहां तक ​​कि :) वस्तुओं के बड़े पैमाने पर विभिन्न फिल्टर के साथ खेल सकें। इसमें फ़िल्टर के साथ एक क्षेत्र, सूची के लिए एक क्षेत्र और चयनित आइटम के विवरण के साथ एक "संपत्ति पृष्ठ" है। और यह सब कार्यक्षमता हमें एक सरल (उपयोग के दृष्टिकोण से) नियंत्रण में मिलती है, जिसे बस xml प्रारूप में वस्तुओं की सूची को "फीड" करना है। इसके अलावा, सामानों के सभी प्रकार के कई ऑनलाइन सुपरमार्केट - यह सिर्फ एक उदाहरण है। उसी तरह, आप व्यंजनों के व्यंजनों को प्रदर्शित कर सकते हैं (हम सामग्री द्वारा फ़िल्टर करते हैं, व्यंजनों के प्रकार, व्यंजनों की जातीयता, रेटिंग, आप कभी नहीं जानते हैं), ट्रैवल एजेंसियों (देशों, रिसॉर्ट्स, होटल, भोजन के प्रकार, लागत ...), रियल एस्टेट (स्थान, फुटेज के यात्रा पैकेज) कमरों की संख्या, आदि)। और सूची आगे बढ़ती है।







जिन लोगों ने एक टिकट "कहीं" लेने की कोशिश की या यह तय किया कि वह कहाँ और कितने किराए पर एक अपार्टमेंट किराए पर लेना चाहिए (क्या होगा अगर आप कोप्पेक के टुकड़े को सिर्फ 100 डॉलर अधिक महंगा कर सकते हैं?) महसूस करेंगे कि यह दृष्टिकोण कितना सुविधाजनक हो सकता है। सही है, हमारे समाधान के लिए "विशेष प्रभावों के साथ बेकार साइट" में बदलने के लिए, हमें कम से कम तीन चीजों की आवश्यकता है:

• वास्तव में वस्तुओं की एक बड़ी संख्या। यदि आपके पास चाय की एक दर्जन किस्मों की दुकान है, तो पिवट सिर्फ एक सुंदर खिलौना होगा। कुछ सौ पहले से बेहतर है। दसियों और सैकड़ों? यहाँ वह अपने आप को अपनी सारी महिमा में दिखाएगा (यदि आपके चैनल की चौड़ाई उसके लिए पर्याप्त है; लेकिन जो आप चाहते थे वह दुनिया में सही नहीं है :)
  
  
  
  
• अधिकांश वस्तुओं के लिए विस्तृत विनिर्देश। यदि कोई पैरामीटर चुनते हैं, तो हमारा पूरा संग्रह "चयनित" (10%) और "(कोई जानकारी नहीं)" (90%) समूहों में विभाजित हो जाएगा, पिवट फिर से एक सुंदर खिलौने में बदल जाएगा।
  
  
  
  
• सभी वस्तुओं के लिए चित्र, उच्च रिज़ॉल्यूशन, बेहतर। यह वह जगह है जहां सिल्वरलाइट डीप ज़ूम तकनीक की पूरी शक्ति प्रकट होती है, जो आपको बहुत बड़ी और उच्च-गुणवत्ता वाली छवियां प्रदर्शित करने की अनुमति देती है, जिससे यातायात लोड कम से कम हो जाता है। वैसे, इंटरनेट में चुनते समय छवियां बहुत महत्वपूर्ण भूमिका निभाती हैं। यदि खरीदार एक सूची देखता है, जिसमें एक-तिहाई वस्तुओं में फ़ोटो नहीं हैं, तो वह आकर्षक विशेषताओं के बावजूद केवल उन्हें अनदेखा करेगा। इसके अलावा, यह तब भी काम करेगा जब उपस्थिति की आवश्यकता नहीं लगती है, उदाहरण के लिए, जब प्रिंटर के लिए मदरबोर्ड या पेपर चुनते हैं।

भाइयो, पीछे देखो और समझो कि दार्शनिकता अनंत हो सकती है। यह व्यापार का समय है।



"घने जंगल" के माध्यम से टहलने से पहले, आइए हमारे बैकपैक की जांच करें। इसमें शामिल होना चाहिए:

• विजुअल स्टूडियो 2010 (एक्सप्रेस वही करेगा)
  
  
• दृश्य स्टूडियो 2010 के लिए सिल्वरलाइट 4 टूल
  
  
• सिल्वरलाइट 4 टूलकिट (अप्रैल 2010 को रिलीज़)
• Microsoft सिल्वरलाइट PivotViewer ही

हम प्रोटोटाइप के साथ शुरू करेंगे। जो लोग पहले प्रोग्राम करना पसंद करते हैं और फिर सोचते हैं (यह विडंबना नहीं है, कभी-कभी यह एक कार्यशील प्रोटोटाइप "कार्यक्रम" के लिए बेहतर होता है, और फिर यह सोचें कि प्राप्त अनुभव के आधार पर इसे लागू करना बेहतर है; यहां मुख्य बात यह नहीं है कि विवरणों से निपटें और प्रोटोटाइप को पूर्णता में न लाएं, यहां यह है - सही ढंग से खोया समय) सुरक्षित रूप से प्रोटोटाइप के साथ मंच को छोड़ सकता है और तुरंत प्रोग्रामिंग पर जा सकता है।



प्रोटोटाइप हमारी मदद कैसे करेगा? सबसे पहले, हम बेहतर तरीके से समझ सकते हैं कि हमें फ़िल्टर और विवरण में कौन से पैरामीटर रखे जाने चाहिए (डेटा को प्रोग्रामेटिक रूप से उत्पन्न करने की आवश्यकता होगी, इसलिए यह हमें परिवर्तन से बचाएगा)। दूसरे (और बल्कि, सबसे पहले!) हम ग्राहक को प्रोटोटाइप दिखाने में सक्षम होंगे ताकि वह इस विचार से प्रेरित हो, आगे बढ़े और अपने महत्वपूर्ण निर्देश दे। इसके अलावा, जब आप विशेष रूप से अपने चित्रों के साथ इस खिलौने का एक कामकाजी मॉडल देखते हैं, तो यह आपको अतिरिक्त ऊर्जा के साथ चार्ज करता है और आपको "जल्दी से इस तरह की ठंडी चीज बनाने की इच्छा देता है!"।



प्रोटोटाइप के साथ टिंकर करने का सबसे आसान तरीका माइक्रोसॉफ्ट एक्सेल के लिए पिवट कलेक्शन टूल का उपयोग करना है। यह एक्सेल के लिए एक प्लगइन है, जो आपको कई तत्वों के एक उदाहरण को जल्दी से स्केच करने की अनुमति देगा, आवश्यक पैरामीटर जोड़ देगा और डेटा के साथ xml उत्पन्न करेगा और सबसे महत्वपूर्ण बात, डीप ज़ूम प्रारूप में परिवर्तित छवियों वाला एक फ़ोल्डर। यह कैसे किया जाता है यह हबर की एक अन्य पोस्ट में अच्छी तरह से वर्णित है - PivotViewer और सिल्वरलाइट में डेटा प्रदर्शित करने के लिए त्वरित कदम



हमने अभी तक प्रोग्रामिंग शुरू नहीं की है, और किसी तरह मैं परिणाम देखना चाहता हूं। इसके लिए, Pivot Viewer के बड़े भाई को डाउनलोड करने का सबसे आसान तरीका Pivot है, जो डेटा ब्राउज़र का एक डेस्कटॉप WPF संस्करण है।



डाउनलोड करें, हमारे संग्रह खोलें, खेलें, विशेषताओं और सेटिंग्स को बदलें (यदि हमें नए तत्वों को जोड़ने की आवश्यकता नहीं है, तो अब xml को मैन्युअल रूप से संपादित करना आसान है), परिणाम पर खुशी मनाएं और काम पर पहुंचें।



हम मान लेंगे कि आपके पास पहले से ही ASP.NET प्रोजेक्ट है जिसमें आप Pivot Viewer को जोड़ना चाहते हैं। हमारे पास पूरा करने के लिए 5 बुनियादी चरण हैं:

1. प्रोजेक्ट में पिवट व्यूअर जोड़ें
2. स्थानीयकरण (बेशक, यदि आपकी साइट रनेट के लिए है)
3. IIS कॉन्फ़िगर करें
4. दीप ज़ूम प्रारूप में डेटा और छवियों के साथ xml को प्रोग्रामेटिक रूप से जनरेट करने का तरीका जानें
5. फ़ाइल के साथ फ़ाइल समाप्त करें (वैकल्पिक, लेकिन उपयोगी :)

तो, चरण 1, प्रोजेक्ट में पिवट जोड़ें

1. अपने हल के लिए सिल्वरलाइट एप्लिकेशन प्रकार की एक नई परियोजना जोड़ें। उसे समाधान में एक वेब एप्लिकेशन ढूंढना होगा और उसमें एक नया प्रोजेक्ट "होस्ट" करना होगा।
   
   
   
   
   
   
   
   
2. विज़ुअल स्टूडियो आपके वेब प्रोजेक्ट में "क्लाइंटबिन" डायरेक्टरी बनाएगा और .xap फ़ाइल को वहाँ रखेगा - एक संकलित और "ज़िप्ड" सिल्वरलाइट प्रोजेक्ट। यदि आप निर्देशिका नाम को कुछ और दृश्य में बदलना चाहते हैं, तो वेब प्रोजेक्ट के "प्रॉपर्टी पेज" डायलॉग में "सिल्वरलाइट एप्लिकेशन" टैब पर प्रोजेक्ट सिल्वरलाइट बाइंडिंग को बदलना न भूलें।
   
   
   
   
3. उन पर रखे गए PivotViewer के साथ दो पृष्ठ (.aspx और .html) को आपकी परियोजना में जोड़ा जाना चाहिए। कार्यक्षमता के संदर्भ में, वे समान हैं, इसलिए हम .html संस्करण को हटाते हैं, और .aspx को आधार के रूप में उपयोग करते हैं: हम स्क्रिप्ट को एक बाहरी फ़ाइल में निकालते हैं, आसपास की सामग्री को जोड़ते हैं, आदि। <ऑब्जेक्ट> टैग की सेटिंग में, .xap फ़ाइल का सही पथ निर्दिष्ट करें।
   
   
   
   
4. एक वेब प्रोजेक्ट के लिए हमारे प्रोटोटाइप (.cxml फ़ाइल को डेटा और डीप ज़ूम छवियों के साथ एक निर्देशिका) के साथ कॉपी करें, उदाहरण के लिए, एक .xap फ़ाइल के लिए। हम इसे सिल्वरलाइट प्रोजेक्ट से पेज कंस्ट्रक्टर में लोडकॉलिनेशन विधि का उपयोग करके पिवट में लोड करते हैं (डिफ़ॉल्ट रूप से, यह मेनपेज। xaml है)
   
   

   public MainPage()

{

InitializeComponent();

...

MainPivotViewer.LoadCollection(collectionUri, String .Empty);

}

* This source code was highlighted with Source Code Highlighter .
   
   
   
   

   
   
   जहां collectionUri .cxml डेटा फ़ाइल के लिए पूर्ण url है।
   
   

अगर अचानक कुछ गलत हो जाता है - Pivot फ़ोल्डर में उदाहरण देखें (मेरे पास "C: \ Program Files (x86) \ Microsoft SDKs \ Silverlight \ v4.0 \ PivotViewer \ Jun10 \ Source") है। यह एक सरल एक पृष्ठ साइट है, इसलिए इसमें लगभग कुछ भी अतिरिक्त नहीं है। वैकल्पिक, लेकिन उपयोगी बिंदुओं के एक जोड़े हैं, लेकिन बाद में उस पर और अधिक।

चरण 2, स्थानीयकरण

यहां सब कुछ सरल है। हमें सिल्वरलाइट परियोजना में स्ट्रिंग संसाधनों के साथ एक फ़ाइल बनाने और वहां पूर्वनिर्धारित आईडी के साथ आवश्यक लाइनें जोड़ने की आवश्यकता है। संसाधन ऑब्जेक्ट के गुणों में सभी संभव लाइनों की एक पूरी सूची पाई जा सकती है। डिफ़ॉल्ट मान आपको इस पंक्ति का उद्देश्य बताएगा। कृपया ध्यान दें कि अधिकांश लाइनों का उपयोग "... से ... से" या "से अधिक या बराबर ..." प्रकार के फिल्टर का विवरण तैयार करने के लिए किया जाता है। यदि आप फ़िल्टर के साथ कड़ी मेहनत नहीं करते हैं, तो आप उनसे नहीं मिल सकते हैं, लेकिन इसका मतलब यह नहीं है कि उनकी आवश्यकता नहीं है।



अब हम अनुवाद का अपना संस्करण नियंत्रण को देते हैं:

public MainPage()

{

InitializeComponent();

...

System.Windows.Pivot.PivotViewer.SetResourceManager(LocalizationStrings.ResourceManager);

}



* This source code was highlighted with Source Code Highlighter .

शायद, यह दिखाने का समय है कि यह सब जीवन में कैसा दिखता है। बेशक, किसी भी तरह के इलेक्ट्रॉनिक्स सुपरमार्केट में पिवोट व्यूअर को पेंच करना बेहतर होगा, लेकिन ... "हाथ में क्या है और किसी और चीज़ की तलाश न करें" का उपयोग करें, फिलास फॉग और उनकी यात्रा के बारे में अच्छे पुराने कार्टून को याद करें? इसलिए मैंने अपने शाब्दिक पसंदीदा खिलौने पर इस तत्व का पता लगाया - आकस्मिक खेलों के साथ एक साइट। मैं आगे के स्पष्टीकरण में इस उदाहरण का उल्लेख करूंगा, और आप इस पृष्ठ पर अनुवाद के मेरे संस्करण को देख सकते हैं।

चरण 3, IIS कॉन्फ़िगर करें

सबसे आसान कदम। इसके लिए नए प्रकार के एक्सटेंशन को पहचानने के लिए हमें IIS की आवश्यकता होती है। IIS 7.0 और इसके बाद के संस्करण के लिए, बस web.config में लाइनें जोड़ें:

< configuration >

< system.webServer >

< staticContent >

< mimeMap fileExtension =".cxml" mimeType ="text/xml" />

< mimeMap fileExtension =".dzc" mimeType ="text/xml" />

< mimeMap fileExtension =".dzi" mimeType ="text/xml" />

</ staticContent >



* This source code was highlighted with Source Code Highlighter .

पहले के संस्करणों में, आपको इसे IIS कॉन्फ़िगरेशन पैनल में मैन्युअल रूप से पंजीकृत करना होगा।



काहे, मैं देख रहा हूं कि बहुत सारा पाठ है और कोई व्यक्ति सबसे दिलचस्प भाग - उपयोगी क्षणों और समस्याओं को पढ़ना नहीं छोड़ सकता है जिनका आप सामना कर सकते हैं। इसलिए मैं इस लेख को दो भागों में विभाजित करने की कोशिश करूंगा, मैं कल दूसरे को बाहर करने की कोशिश करूंगा।



हमारे साथ रहें, अंत होना चाहिए ... :)