वर्कफ़्लो
वेब-अनुप्रयोग घटकों के लिए कार्यप्रवाह
और यहां हम वेब एप्लिकेशन बनाने के महत्वपूर्ण क्षण में पहुंचे। आखिरकार, हमने अब तक जो कुछ भी किया है वह सिर्फ एक तस्वीर बना रहा है। बहुत प्यारा, शायद, लेकिन बहुत ज्यादा बेकार। अब हमें मुख्य काम करने की जरूरत है। इसे पुनर्जीवित करें, और हमारे कार्यों पर प्रतिक्रिया जोड़ें।
इस कार्य के लिए प्रत्येक घटक में Workflow टैब होता है। इसमें, आप व्यावसायिक प्रक्रियाएं बना सकते हैं और उनके लॉन्च के लिए शर्तों (ट्रिगर) को परिभाषित कर सकते हैं। आइए Calculate बटन के लिए ऐसी व्यावसायिक प्रक्रिया बनाएं।
ट्रिगर्स
एक व्यावसायिक प्रक्रिया बनाना बहुत कुछ वैसा ही है जैसा हमने पहले मॉड्यूल 4 में देखा था जब हमने बैकएंड के लिए एक व्यावसायिक प्रक्रिया बनाई थी। एक सामान्य कैनवास है, वहां जोड़े गए ब्लॉक, और उनके बीच संबंध क्रियाओं के क्रम को निर्धारित करते हैं। एक महत्वपूर्ण अंतर यह है कि व्यवसाय प्रक्रिया शुरू करने के लिए फ्रंट-एंड वर्कफ़्लो में कई अलग-अलग ब्लॉक हैं। ये ट्रिगर हैं जो व्यवसाय प्रक्रिया शुरू करते हैं। ट्रिगर स्वयं प्रत्येक घटक के लिए भिन्न हो सकते हैं (एक बटन पर एक क्लिक होता है, एक तालिका में डेटा अपडेट होता है, और एक सूची में कुछ विकल्प का विकल्प होता है), लेकिन काम का सामान्य तर्क किसी भी मामले में समान होता है। एक ईवेंट होता है, और यह ईवेंट संबंधित व्यवसाय प्रक्रिया प्रारंभ करता है।
आइए एक सामान्य योजना पर निर्णय लें। बटन क्लिक करने पर हमें क्या करना चाहिए:
- X और Y मान ज्ञात कीजिए। उन्हें संबंधित इनपुट फ़ील्ड से प्राप्त करें।
- गणना के लिए एक समापन बिंदु लॉन्च करें और इसे X और Y पैरामीटर पास करें।
- परिणाम कंटेनर को दृश्यमान बनाएं।
- परिकलन परिणाम को आवश्यक Label फ़ील्ड में रखें।
व्यापार प्रक्रिया ब्लॉक
पहले चरण के लिए एक InputFloat Get Properties ब्लॉक की आवश्यकता होती है। यह घटक के वर्तमान मूल्यों को पढ़ता है, न केवल उपयोगकर्ता ने जो दर्ज किया है, बल्कि अन्य सेटिंग्स (उदाहरण के लिए, उपस्थिति सेटिंग्स या मूल्यों की अनुमत सीमा) को भी पढ़ता है। हमें Value प्राप्त करने की आवश्यकता है, इसमें उपयोगकर्ता द्वारा दर्ज किया गया डेटा शामिल है। इसके इनपुट क्षेत्र से प्रत्येक मान और इसके लिए हमें दो ब्लॉक चाहिए (एक्स के लिए और वाई के लिए)। उनमें, आपको इनपुट पर Component ID मान का चयन करना होगा। यदि आप बनाते समय उनका नाम निर्दिष्ट करना नहीं भूले, तो आवश्यक घटक को ढूंढना और चुनना मुश्किल नहीं होगा।
अगला कदम एंडपॉइंट लॉन्च करना है। यह वह जगह है जहां फ्रंट-एंड और बैकएंड के बीच संबंध होता है, और गणना के लिए कमांड ब्राउज़र से सर्वर तक प्रेषित होता है। हमारे आवेदन के प्रत्येक समापन बिंदु को एक अलग ब्लॉक के रूप में दर्शाया गया है। आपको बस अपनी जरूरत का चयन करने और इसे कनेक्ट करने की आवश्यकता है। पांचवें मॉड्यूल के दौरान इस समापन बिंदु को एक GET विधि और एक module4-basic URL सौंपा गया था। यह इस नाम के तहत ब्लॉक की सूची में होगा - Server request GET /module4-basic/
घटकों के विपरीत, एंडपॉइंट को अपनी Endpoint ID सेट करने की आवश्यकता नहीं होती है (यह डिफ़ॉल्ट रूप से सही ढंग से सेट होती है)। केवल पिछले चरण में प्राप्त इनपुट एक्स और वाई पर लागू करना आवश्यक है।
अगला कार्य परिणाम कंटेनर को दृश्यमान बनाना है। ऐसा करने के लिए, Container Update Properties ब्लॉक का उपयोग करें। ब्लॉक में ही वांछित कंटेनर की ID चुनें और Visible = true सेट करें।
आखिरी चीज जो करना बाकी है वह है सरणी से 5 परिणाम तत्वों को वेब एप्लिकेशन के संबंधित घटकों में वितरित करना। हम जानते हैं कि परिणाम हमेशा एक कड़ाई से परिभाषित क्रम में आना चाहिए, इसलिए हमें केवल वांछित सूचकांक के साथ तत्व को क्रमिक रूप से लेने की आवश्यकता है और इसके मूल्य को Label घटक को निर्दिष्ट करना है। ऐसा करने के लिए, हम Label टेक्स्ट को बदलने और परिणाम प्रदर्शित करने के लिए Array Element ब्लॉक (0 से 4 तक एक इंडेक्स के साथ), toString ( Float डेटा को String में कनवर्ट करने के लिए) और Label Update Properties का उपयोग करते हैं।
आपने देखा होगा कि किसी भी घटक के गुणों को अद्यतन करने के लिए दो ब्लॉक विकल्प हैं - Update Properties करें और Set Properties । उनके बीच का अंतर रेस्ट एपीआई में Patch और Put विधियों के समान है। पहला केवल स्पष्ट रूप से निर्दिष्ट गुणों को बदलता है, जबकि दूसरा उन सभी को अधिलेखित कर देता है।
अंतिम परिणाम
यह व्यवसाय प्रक्रिया के निर्माण को पूरा करता है। आप अंतिम परिणाम को सहेज, प्रकाशित और जांच सकते हैं।
यदि सब कुछ सही ढंग से किया गया था, तो अंतिम परिणाम इस तरह दिखना चाहिए: