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

दोहराए जाने वाले तत्वों में Image घटक उपयोग ( List/Grid )

आइए एक उदाहरण देखें जहां हमारे पास फ़्लाइट टेबल है और प्रत्येक फ़्लाइट ऑब्जेक्ट का अपना कवर ImageFile फ़ील्ड [ file ] द्वारा दर्शाया गया है।

0_dataModel

कल्पना कीजिए कि List घटक के साथ उड़ानों की सूची का प्रतिनिधित्व किया जाता है। List घटक का प्रत्येक तत्व - प्रासंगिक उड़ान जानकारी प्रदर्शित करने के लिए Image और कुछ अन्य घटकों वाला एक Card घटक है। UI डिज़ाइनर में यह निम्न तरीके से दिखता है:

uiux

सबसे पहले, Data Source को मूल घटक (इस मामले में List घटक) के लिए निर्दिष्ट किया जाना है।

01_select_from_model

डेटाबेस से Image घटक में डेटा अपलोड करने के लिए, हमें Image घटक के लिए एक नई व्यावसायिक प्रक्रिया बनाने की आवश्यकता है।

02_openBP

आवश्यक बीपी एप्लिकेशन में एक छवि तत्व के निर्माण के साथ शुरू होता है, अर्थात् onCreate ट्रिगर। सबसे पहले, दी गई छवि के अनुरूप डेटा मॉडल की वस्तु प्राप्त करना आवश्यक है। ऐसा करने के लिए, आप उस डेटा का उपयोग कर सकते हैं जो पहले से ही मूल तत्व (इस मामले में List ) द्वारा प्राप्त किया गया है। List से डेटा प्राप्त करने के लिए, List Get Data ब्लॉक का उपयोग किया जाता है।

03_bp_1

बीपी का तर्क जो हम बना रहे हैं वह इस प्रकार है: यदि 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/ ब्लॉक का उपयोग करके लोड किया जाता है। संबंधित बीपी का उदाहरण इस प्रकार है।

03_bp_2

अगले चरण में, Image Update Properties ब्लॉक की Data प्रॉपर्टी में इनपुट के रूप में बाइट्स एरे को पास करने के लिए एक्सपैंड Expand file ब्लॉक का उपयोग करके इमेज फाइल का विस्तार किया जाता है। शीट में एक विशिष्ट छवि तत्व की Widget ID निर्दिष्ट करना भी आवश्यक है, इसे बीपी की शुरुआत में ऑनक्रिएट ब्लॉक से मान पास करना। बीपी के अंतिम भाग का परिणाम नीचे के उदाहरण में दिखाया गया है:

03_bp_3

अंत में Break Loop ब्लॉक का उपयोग किया जाता है ताकि व्यर्थ में सरणी के शेष तत्वों पर पुनरावृति न हो।

break loop

उपयोगकर्ता के स्मार्टफोन के फाइल सिस्टम से एक छवि लोड हो रही है

उपयोगकर्ता प्रोफ़ाइल अवतार लोड करने के एक उदाहरण पर विचार करें। वेब इंटरफ़ेस में एक छवि और एक बटन होता है जो BP को लॉन्च करता है, और इस तरह दिखता है:

11_ui

फिर, संबंधित बीपी उपयोगकर्ता को Select Files ब्लॉक के उपयोग के साथ अपने डिवाइस से फाइलों का चयन करने की अनुमति देता है। और अगर फाइलों को सफलतापूर्वक चुना गया तो index = 0 वाला तत्व लिया जाता है। संगत बीपी इस तरह दिखता है:

12_bp_1

Files सरणी के परिणामी फ़ाइल तत्व को आगे उपयोग के लिए वेब एप्लिकेशन सर्वर पर अपलोड किया जाना चाहिए ( Server request POST /_files/ )। यदि अनुरोध सफल होता है, तो Server request POST /_files/ ब्लॉक के आउटपुट पर फ़ाइल ऑब्जेक्ट को Bytes Array प्राप्त करने के लिए Expand file ब्लॉक के इनपुट में पास किया जाता है, जो Image Update Properties ब्लॉक के इनपुट को पास किया जाता है Data संपत्ति।

13_bp_2

Was this article helpful?

AppMaster.io 101 क्रैश कोर्स

10 मॉड्यूल
2 सप्ताह

निश्चित नहीं हूं कि कहां से शुरुआत की जाए? शुरुआती लोगों के लिए हमारे क्रैश कोर्स के साथ आगे बढ़ें और ऐपमास्टर को ए से ज़ेड तक एक्सप्लोर करें।

कोर्स शुरू करें
Development it’s so easy with AppMaster!

और अधिक मदद की आवश्यकता है?

हमारे विशेषज्ञों की मदद से किसी भी मुद्दे को हल करें। समय बचाएं और अपने एप्लिकेशन बनाने पर ध्यान दें।

headphones

सहयोग टीम से संपर्क करें

हमें अपनी समस्या के बारे में बताएं, और हम आपको समाधान ढूंढेंगे।

message

सामुदायिक चैट

हमारे चैट में अन्य उपयोगकर्ताओं के साथ प्रश्नों पर चर्चा करें।

समुदाय में शामिल हों