जावास्क्रिप्ट कार्यों के माध्यम से Umi.CMS और फ्लैश की बातचीत

मान लीजिए कि लगभग इस प्रकार की साइट पर माल को छानने का एक काम करना है:



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

एक अच्छी श्रेणी के चयन फॉर्म में निम्नलिखित शर्तों को पूरा करना चाहिए:

1) परियोजना प्रशासक द्वारा सीमा की सीमाओं का प्रबंधन किया जाना चाहिए। कीमतें बढ़ रही हैं, सब कुछ बदल रहा है।
2) घसीटते समय स्लाइडर्स को पार करते समय, रेंज को नियंत्रणीय रहना चाहिए।
3) स्लाइडर्स को मान दर्ज करने के लिए पाठ फ़ील्ड के साथ सहभागिता करनी चाहिए।

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

इसलिए, मूल्य सीमा के आधार पर फ़िल्टरिंग का एक कार्यशील रूप बनाने के लिए, आपको निम्नलिखित तीन चरणों से गुजरना होगा:

1) एनीमेशन स्लाइडर के साथ एक swf फ़ाइल तैयार करना।

स्लाइडर्स चयन फॉर्म के इंटरफ़ेस में निम्नलिखित घटक शामिल होंगे:

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

- उस लाइन को क्लिप करता है जिस पर स्लाइडर्स स्थित हैं: निचला मुख्य और ऊपरी, जो चयनित रेंज प्रदर्शित करेगा।

- प्रशासनिक क्षेत्र में निर्दिष्ट सीमा सीमाओं को प्रदर्शित करने वाले पाठ क्षेत्र।

- पृष्ठभूमि क्लिप। किसी भी।

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

यह डेटा आपको कक्षाओं के पैकेज को प्राप्त करने की अनुमति देता है ActionScript बाहरी। एक्सटर्नेटरफेस क्लास आपको एक फॉर्म पेज पर एक swf फ़ाइल और जावास्क्रिप्ट कोड के बीच डेटा के आदान-प्रदान के लिए आवश्यक तरीकों को पंजीकृत करने की अनुमति देता है। उदाहरण के लिए

if (ExternalInterface.available) { ExternalInterface.addCallback("getDiapasonData", getDiapasonData); ExternalInterface.addCallback("setDiapasonValue", setDiapasonValue); } 

यहाँ, यदि बाह्य वस्तु उपलब्ध है, तो दो विधियाँ पंजीकृत हैं:

getDiapasonData - स्लाइडर्स के सही संचालन के लिए आवश्यक डेटा की प्राप्ति और प्राथमिक प्रसंस्करण के लिए जिम्मेदार है। जावास्क्रिप्ट फ़ाइल को स्थानांतरित करने के लिए आवश्यक पैरामीटर उत्पन्न करने के बाद इसे एक बार निष्पादित किया जाता है।

 private function getDiapasonData(begin_diapason:Number, next_diapason:Number, price_status:Number = 0, min_price:Number = 0, max_price:Number = 0):void { // ..  ,        .. //  price_status   ,     ,      //    ,       ,      if (price_status > 0) { //         var all_summ:Number = next_diapason - begin_diapason; var start_relation:Number = min_price / all_summ; var end_relation:Number = max_price / all_summ; // 276 -            var line_x:Number = (276 * (min_price - begin_diapason)) / (next_diapason - begin_diapason); var line_x_width:Number = (276 * (max_price - begin_diapason)) / (next_diapason - begin_diapason) - line_x; var next_x:Number = line_x + line_x_width; // ..           } } 

setDiapasonValue - भविष्य के उपयोग के लिए जावास्क्रिप्ट फ़ंक्शन से विशिष्ट श्रेणी मानों को पारित करने के लिए जिम्मेदार। हर बार HTML फॉर्म में रेंज के टेक्स्ट मान भरे जाते हैं।

 private function setDiapasonValue(temp_min_price:int, temp_max_price:int):void { //         if(temp_min_price < temp_max_price) { //        var temp_relation:Number = (end_diapason - start_diapason) / 276; var temp_x_start:int = 0; if(temp_min_price < start_diapason) { temp_min_price = start_diapason; } temp_x_start = (temp_min_price - start_diapason) / temp_relation; var temp_x_end:int = 0; if(temp_max_price > end_diapason) { temp_max_price = end_diapason; } if(temp_max_price < start_diapason) { temp_max_price = start_diapason; } temp_x_end = (temp_max_price - start_diapason) / temp_relation; // ..           } } 

जावास्क्रिप्ट फ़ंक्शन से पारित पैरामीटर एक्शनस्क्रिप्ट विधियों के पूर्ण-स्तरीय पैरामीटर बन जाते हैं और प्रोग्रामिंग स्लाइडर्स एनिमेशन के लिए उपयुक्त हैं।

ActionScript से JavaScript फ़ंक्शन में मानों के पोस्टबैक को निष्पादित करने के लिए, एक्सटर्नलइंटरफेस क्लास की कॉल विधि का उपयोग किया जाता है, जिसे मापदंडों के साथ आवश्यक जावास्क्रिप्ट फ़ंक्शन का नाम दिया गया है।

उदाहरण के लिए, एक्शनस्क्रिप्ट से संबंधित जावास्क्रिप्ट फ़ंक्शंस में प्रत्येक स्लाइडर के मूल्यों को पारित करने के लिए निम्नलिखित विधियां सेवा करती हैं। कीमत की गणना स्लाइडर की स्थिति के आधार पर 100 रूबल से की जाती है:

 private function setStartDiapason():void { var relation:Number = line_mc.x / 276; var current_diapason:Number = Math.round((start_diapason + Math.round((end_diapason - start_diapason) * relation)) / 100) * 100; ExternalInterface.call("setStartDiapason", current_diapason); } private function setEndDiapason():void { var relation:Number = (line_mc.x + line_mc.width) / 276; var current_diapason:Number = Math.round((start_diapason + Math.round((end_diapason - start_diapason) * relation)) / 100) * 100; ExternalInterface.call("setEndDiapason", current_diapason); } 

2) Umi.CMS व्यवस्थापक पैनल में रेंज फॉर्म के लिए पैरामीटर तैयार करना और उनके लिए XSLT टेम्प्लेट स्थापित करना।

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

Umi.CMS में उपयोगकर्ता गुणों को संग्रहीत करने के लिए, एक विशेष डेटा प्रकार के पृष्ठ बनाने का प्रस्ताव है, उदाहरण के लिए, "सामान्य साइट पैरामीटर"। इस पृष्ठ पर, आप मूल्य सीमा संपत्ति समूह बना सकते हैं, और इसमें संख्यात्मक प्रकार के दो गुण रख सकते हैं:
न्यूनतम मूल्य स्तर (minimalnyj_uroven_cen) और अधिकतम मूल्य स्तर (maksimalnyj_uroven_cen)। हम सिस्टम द्वारा उत्पन्न इन गुणों के पहचानकर्ताओं को याद करते हैं या उन्हें अधिक पठनीय में बदलते हैं और उन्हें याद भी करते हैं।
उसके बाद, पृष्ठों के संरचनात्मक वृक्ष में हम "सामान्य साइट पैरामीटर" पेज बनाते हैं या पाते हैं और इन गुणों के मूल्यों को इंगित करते हैं।

XSLT टेम्पलेट में, मूल्य श्रेणी के मानों का चयन करें और चर में सहेजें:

 <xsl:variable name="minPriceValue" select="$commonParams//property[@name = 'minimalnyj_uroven_cen']/value" /> <xsl:variable name="maxPriceValue" select="$commonParams//property[@name = 'maksimalnyj_uroven_cen']/value" /> 

यहां सामान्यप्रेम एक चर है जो सामान्य साइट सेटिंग्स पृष्ठ के गुणों के बारे में जानकारी संग्रहीत करता है।

हम निम्नलिखित जावास्क्रिप्ट कोड को सीधे XSLT टेम्पलेट में रखते हैं

 <script type="text/javascript"> //      ,       min_price_product = parseFloat('<xsl:value-of select="$minPriceValue" />'); max_price_product = parseFloat('<xsl:value-of select="$maxPriceValue" />') + 100; start_diapason_price = min_price_product; end_diapason_price = max_price_product - 100; if(start_diapason_price > 0) { current_start_diapason_price = start_diapason_price; } else { current_start_diapason_price = min_price_product; start_diapason_price = min_price_product; } if(end_diapason_price > 0) { current_end_diapason_price = end_diapason_price; } else { current_end_diapason_price = max_price_product; end_diapason_price = max_price_product; } //  ,       <xsl:if test="$min_price !='' or $max_price !=''"> price_status = 1; min_price = parseFloat('<xsl:value-of select="$min_price" />'); max_price = parseFloat('<xsl:value-of select="$max_price" />'); </xsl:if> </script> 

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

3) फॉर्म और स्लाइडर्स के बीच बातचीत को व्यवस्थित करने के लिए जावास्क्रिप्ट कोड तैयार करना।

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

जावास्क्रिप्ट और ActionScript की बातचीत के आयोजन के लिए किसी विशेष पुस्तकालयों की आवश्यकता नहीं है। सब कुछ पहले से ही है और सीधे भाषाओं में सीधे उपयोग के लिए तैयार है।

जावास्क्रिप्ट कार्यों की एक सूची इस तरह दिख सकती है:

 //      ActionScript         function setStartDiapason(start_diapason) { current_start_diapason_price = start_diapason; document.filter_form.min_price.value = current_start_diapason_price; } //      ActionScript         function setEndDiapason(end_diapason) { current_end_diapason_price = end_diapason; document.filter_form.max_price.value = current_end_diapason_price; } 

इन कार्यों द्वारा निर्धारित मूल्य बाद में निर्दिष्ट मूल्य सीमा में उत्पादों का चयन करने के लिए उपयोग किया जाता है।

 //   swf-        jQuery(document).ready(function(){ if(document.diapason) { document.diapason.getDiapasonData(start_diapason_price, end_diapason_price, price_status, min_price, max_price); } }); //      : <body onLoad="setDiapasonPrice();"> //        swf- function setDiapasonPrice() { if(document.diapason) { document.diapason.getDiapasonData(start_diapason_price, end_diapason_price, price_status, min_price, max_price); } }; //     swf-       function setDiapasonValue() { var temp_min_price = parseInt(document.filter_form.min_price.value); var temp_max_price = parseInt(document.filter_form.max_price.value); if(temp_min_price <= temp_max_price) { document.diapason.setDiapasonValue(temp_min_price, temp_max_price); } } 

इन चरणों को पूरा करने के बाद, साइट विज़िटर को एक उत्पाद फ़िल्टरिंग फ़ॉर्म प्राप्त होता है, जिसमें वह swf फ़ाइल या सामान्य पाठ इनपुट फ़ील्ड के स्लाइडर का उपयोग करके मूल्य सीमा निर्धारित कर सकता है।

इस योजना के अनुसार, Umi.CMS मध्यस्थ के रूप में जावास्क्रिप्ट कोड का उपयोग करके फ्लैश फिल्मों के साथ बातचीत कर सकता है।