वाडिन 7 में जावास्क्रिप्ट का उपयोग करना या मैंने चार्ट पर $ 490 कैसे बचाया (भाग 1)

इस लेख में मैं आपको बताऊंगा कि मैंने अपनी DOM24x7 उपयोगिता पैमाइश सेवा में सुंदर ग्राफिक्स कैसे लागू किया और मुझे किन समस्याओं और असुविधाओं का सामना करना पड़ा।

वाडिन 7 के लिए चार्ट के साथ काम करने के लिए एक महान आधिकारिक ऐड-ऑन है, लेकिन समस्या यह है कि यह मुफ़्त नहीं है और इसकी लागत लगभग $ 500 है! मैं उस तरह का पैसा खर्च नहीं करना चाहता था, और मैंने मुफ्त में एक विकल्प की तलाश करने का फैसला किया, लेकिन, दुर्भाग्य से, मुझे जो कुछ भी मिला वह गुणवत्ता में पूरी तरह से असंतोषजनक था और फिर मैंने चार्ट पर काम करने के लिए आधिकारिक ऐड-ऑन पर अपना ध्यान लौटाया और इसे और अधिक बारीकी से अध्ययन करने का फैसला किया।

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

वैसे, वाडिन डेवलपर्स समझाते हैं कि वे चार्ट के साथ काम करने के लिए इतने प्यारे तरीके से क्यों पूछते हैं कि उन्हें कॉर्पोरेट लाइसेंस खरीदना पड़ता है।

पुस्तकालय पर निर्णय लेने के बाद, यह सवाल को हल करने के लिए बना हुआ है, आप इसे किसी भी तरह अपनी परियोजना से कैसे जोड़ सकते हैं?
लेख में दो भाग होते हैं। पहला भाग जावास्क्रिप्ट परियोजनाओं को वाडिन परियोजनाओं से जोड़ने के बारे में एक लेख का अनुवाद है, और दूसरा भाग इस बारे में बताता है कि कैसे मैंने ज्ञान प्राप्त किया, ग्राफ़ प्रदर्शित करने के लिए एक पुस्तकालय लिखा।
इसलिए ...

वादिन 7 को जावास्क्रिप्ट घटकों से प्यार है

Vaadin 7 में जावास्क्रिप्ट घटकों का उपयोग करना आसान है। बेशक, वाडिन के पास लंबे समय से एक Window.executeJavaScript () विधि है, लेकिन इस पद्धति की कुछ सीमाएं हैं। उदाहरण के लिए, यदि आपके पास जावास्क्रिप्ट फ़ाइलों के साथ निर्भरता है, तो कॉल से पहले उनके लोडिंग की गारंटी देना मुश्किल है।

अन्य वाडिन 7 GWT घटकों की तरह, जावास्क्रिप्ट घटक में 4 भाग होते हैं:

• सर्वर घटक (सर्वर-साइड घटक),
• हालत (राज्य),
• कनेक्टर (कनेक्टर)
• और क्लाइंट घटक क्लाइंट-साइड विजेट है।

सरल उदाहरणों में (उदाहरण के लिए, जैसा कि नीचे चर्चा की गई है), कनेक्टर और क्लाइंट विजेट को संयोजित करना अधिक आसान है। हालाँकि, जावास्क्रिप्ट घटक की कार्यक्षमता के साथ समाप्त javacsript विजेट को जोड़कर, आप केवल कनेक्टर ही लिखते हैं, जो विजेट को नियंत्रित करेगा (जो एक पुस्तकालय है)।

लगभग सभी चीजें जो आप GWT विजेट के साथ कर सकते हैं, आप जावास्क्रिप्ट विजेट के साथ भी कर सकते हैं। नीचे हम एक सरल उदाहरण देखेंगे जिसमें दिखाया गया है कि इसके विभिन्न भाग कैसे काम करते हैं।

नीचे दिए गए उदाहरण में, हम केवल संदेश प्रदर्शित करते हैं।

सर्वर साइड

@JavaScript({ "js_label.js" }) public class JsLabel extends AbstractJavaScriptComponent { public JsLabel(String xhtml) { getState().xhtml = xhtml; } @Override protected JsLabelState getState() { return (JsLabelState) super.getState(); } } 

जैसा कि हम देख सकते हैं, हमारा घटक बहुत सरल है। केवल एक पैरामीटर वाला कंस्ट्रक्टर इसमें घोषित किया गया है - वह पाठ जिसे प्रदर्शित करने की आवश्यकता है। यह पैरामीटर सामान्य स्थिति का उपयोग करके क्लाइंट पक्ष को दिया जाता है। कोड का एक महत्वपूर्ण हिस्सा एनोटेशन है, जो जेस्लाब वर्ग का विस्तार करता है।

जावास्क्रिप्ट किसी भी जावास्क्रिप्ट फाइल के बारे में वैदीन को बताता है कि आपके विजेट की जरूरत है। हमारे उदाहरण में, केवल js_label.js की आवश्यकता है, जो कि JsLabel के ग्राहक पक्ष का कार्यान्वयन है। चूंकि हमने फ़ाइल के सापेक्ष पथ को निर्दिष्ट किया है, इसलिए इसे JLLabel वर्ग के समान जावा पैकेज में होना चाहिए। इसलिए मेरी आईडीई में, js_label.js और JsLabel.java अगल-बगल स्थित हैं। यदि आवश्यक हो, तो आप जावास्क्रिप्ट एनोटेशन में स्ट्रिंग सरणी के रूप में कई फ़ाइलों को सूचीबद्ध कर सकते हैं, और आप URL प्रारूप में पथ भी निर्दिष्ट कर सकते हैं।

AbstractJavaScriptComponent वह वर्ग है जिसका हम विस्तार कर रहे हैं। यह आपको साझा स्थिति का उपयोग करके जावास्क्रिप्ट और वाडिन के बीच दो-तरफ़ा संचार बनाने की अनुमति देता है।

ध्यान दें कि वाडिन जानता है कि किस राज्य वर्ग का उपयोग किया जाता है क्योंकि हम अपने सामान्य राज्य वर्ग के साथ काम करने के लिए गेटस्टेट () विधि को ओवरराइड करते हैं। यह व्यवहार JavaScriptComponent के लिए विशिष्ट नहीं है, लेकिन सभी Vaadin 7 घटकों के लिए सामान्य है।

राज्य का निर्धारण

 public class JsLabelState extends JavaScriptComponentState { public String xhtml; } 

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

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

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

ग्राहक पक्ष

 org_vaadin_blog_JsLabel = function() { var e = this.getElement(); this.onStateChange = function() { e.innerHTML = this.getState().xhtml; } } 

यह js_label.js फ़ाइल है जिसे हमने पहले जावास्क्रिप्ट एनोटेशन में निर्दिष्ट किया था। यहां दो बातें ध्यान देने योग्य हैं: फ़ंक्शन का नाम और इस का उपयोग।

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

अतिरिक्त जानकारी AbstractJavaScriptComponent class के JavaDoc में पाई जा सकती है ( अल्फा 3 के JavaDoc डॉक्यूमेंटेशन से लिंक। उदाहरण में, हम केवल DOM.getElement का उपयोग करते हैं) DOM तत्व को प्राप्त करने के लिए जो हमारे Vainin विजेट के लिए बनाया गया था और इस .getState () को राज्य तक पहुँच प्राप्त करने के लिए। हमारे मामले में, हम राज्य से एक एक्सएचटीएमएल स्ट्रिंग पढ़ते हैं और इसे आंतरिक HTML डोम तत्व में डालते हैं। दुर्भाग्य से, राज्य घटक को क्लाइंट साइड पर अपडेट नहीं किया जा सकता है, ताकि सर्वर साइड पर ये परिवर्तन प्राप्त हों।

जैसा कि ऊपर उल्लेख किया गया है, यह फ़ाइल उसी समय एक कनेक्टर और एक विजेट है। कनेक्टर की जिम्मेदारी राज्य और विजेट को बांधने की है। हमारे मामले में, अलगाव केवल कोड को जटिल करेगा, इसलिए हमने एक जावास्क्रिप्ट फ़ाइल में विजेट और कनेक्टर को संयोजित किया।

कृपया ध्यान दें कि राज्य में किसी भी गेटर्स और सेटर का उपयोग जावास्क्रिप्ट पक्ष पर नहीं किया जा सकता है और हम नियमित गुणों के साथ खेतों के साथ काम करते हैं। यह तब भी सच है जब आपने स्पष्ट रूप से अपने राज्य वर्ग में पहुंच के तरीके लिखे हैं।

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

अगले लेख में मैं विस्तार से वर्णन करूंगा कि कैसे इस ज्ञान का उपयोग करते हुए, मैंने हाईचार्ज चार्ट के साथ काम करने के लिए लाइब्रेरी के लिए जावास्क्रिप्ट रैपर बनाया।