मोबाइल अनुप्रयोगों में Image घटक कार्यप्रवाह वेब अनुप्रयोगों में कार्यप्रवाह से थोड़ा अलग होता है। यह आलेख विवरण में वर्णन करता है कि मोबाइल एप्लिकेशन में Image घटक का उपयोग कैसे करें। दोहराए जाने वाले तत्वों में, जैसे List और Grid घटकों के तत्व, डेटा मॉडल से Image लोड करना स्पष्ट नहीं है और बीपी का उपयोग करके लोड करने के लिए एक निश्चित प्रक्रिया की आवश्यकता होती है।
दोहराए जाने वाले तत्वों में Image घटक उपयोग ( List/Grid )
आइए एक उदाहरण देखें जहां हमारे पास फ़्लाइट टेबल है और प्रत्येक फ़्लाइट ऑब्जेक्ट का अपना कवर ImageFile फ़ील्ड [ file ] द्वारा दर्शाया गया है।
कल्पना कीजिए कि List घटक के साथ उड़ानों की सूची का प्रतिनिधित्व किया जाता है। List घटक का प्रत्येक तत्व - प्रासंगिक उड़ान जानकारी प्रदर्शित करने के लिए Image और कुछ अन्य घटकों वाला एक Card घटक है। UI डिज़ाइनर में यह निम्न तरीके से दिखता है:
सबसे पहले, Data Source को मूल घटक (इस मामले में List घटक) के लिए निर्दिष्ट किया जाना है।
डेटाबेस से Image घटक में डेटा अपलोड करने के लिए, हमें Image घटक के लिए एक नई व्यावसायिक प्रक्रिया बनाने की आवश्यकता है।
आवश्यक बीपी एप्लिकेशन में एक छवि तत्व के निर्माण के साथ शुरू होता है, अर्थात् onCreate ट्रिगर। सबसे पहले, दी गई छवि के अनुरूप डेटा मॉडल की वस्तु प्राप्त करना आवश्यक है। ऐसा करने के लिए, आप उस डेटा का उपयोग कर सकते हैं जो पहले से ही मूल तत्व (इस मामले में List ) द्वारा प्राप्त किया गया है। List से डेटा प्राप्त करने के लिए, List Get Data ब्लॉक का उपयोग किया जाता है।
बीपी का तर्क जो हम बना रहे हैं वह इस प्रकार है: यदि Data सरणी तत्वों ( flight मॉडल ऑब्जेक्ट) में से एक में Record ID के बराबर पहचानकर्ता ( ID ) है, तो हमें फ्लाइट टेबल तत्व मिल गया है जिसकी हमें आवश्यकता है। फिर, छवि फ़ाइल ID को फ़्लाइट मॉडल ऑब्जेक्ट से लिया जाता है और आवश्यक Widget ID के साथ छवि घटक में लोड किया जाता है।
Data सरणी के सभी तत्वों पर पुनरावृति करने के For each loop के लिए BP ब्लॉक का उपयोग किया जाता है, और लूप के मुख्य भाग में, Data सरणी के प्रत्येक तत्व का Expand Flight ब्लॉक का उपयोग करके किया जाता है। यदि Flight ID = Record ID , तो ImageFile फाइल आइडेंटिफायर लिया जाता है और फाइल ऑब्जेक्ट को Server request GET /_files/:id/download/ ब्लॉक का उपयोग करके लोड किया जाता है। संबंधित बीपी का उदाहरण इस प्रकार है।
अगले चरण में, Image Update Properties ब्लॉक की Data प्रॉपर्टी में इनपुट के रूप में बाइट्स एरे को पास करने के लिए एक्सपैंड Expand file ब्लॉक का उपयोग करके इमेज फाइल का विस्तार किया जाता है। शीट में एक विशिष्ट छवि तत्व की Widget ID निर्दिष्ट करना भी आवश्यक है, इसे बीपी की शुरुआत में ऑनक्रिएट ब्लॉक से मान पास करना। बीपी के अंतिम भाग का परिणाम नीचे के उदाहरण में दिखाया गया है:
अंत में Break Loop ब्लॉक का उपयोग किया जाता है ताकि व्यर्थ में सरणी के शेष तत्वों पर पुनरावृति न हो।
उपयोगकर्ता के स्मार्टफोन के फाइल सिस्टम से एक छवि लोड हो रही है
उपयोगकर्ता प्रोफ़ाइल अवतार लोड करने के एक उदाहरण पर विचार करें। वेब इंटरफ़ेस में एक छवि और एक बटन होता है जो BP को लॉन्च करता है, और इस तरह दिखता है:
फिर, संबंधित बीपी उपयोगकर्ता को Select Files ब्लॉक के उपयोग के साथ अपने डिवाइस से फाइलों का चयन करने की अनुमति देता है। और अगर फाइलों को सफलतापूर्वक चुना गया तो index = 0 वाला तत्व लिया जाता है। संगत बीपी इस तरह दिखता है:
Files सरणी के परिणामी फ़ाइल तत्व को आगे उपयोग के लिए वेब एप्लिकेशन सर्वर पर अपलोड किया जाना चाहिए ( Server request POST /_files/ )। यदि अनुरोध सफल होता है, तो Server request POST /_files/ ब्लॉक के आउटपुट पर फ़ाइल ऑब्जेक्ट को Bytes Array प्राप्त करने के लिए Expand file ब्लॉक के इनपुट में पास किया जाता है, जो Image Update Properties ब्लॉक के इनपुट को पास किया जाता है Data संपत्ति।
