মোবাইল অ্যাপ্লিকেশনে Image কম্পোনেন্ট ওয়ার্কফ্লো ওয়েব অ্যাপ্লিকেশনের ওয়ার্কফ্লো থেকে একটু ভিন্ন। এই নিবন্ধটি বিস্তারিতভাবে বর্ণনা করে কিভাবে মোবাইল অ্যাপ্লিকেশনে Image কম্পোনেন্ট ব্যবহার করতে হয়। পুনরাবৃত্ত উপাদানগুলিতে, যেমন List এবং Grid উপাদানগুলির উপাদান, ডেটা মডেল থেকে Image লোড করা দ্ব্যর্থহীন নয় এবং BP ব্যবহার করে লোড করার জন্য একটি নির্দিষ্ট পদ্ধতির প্রয়োজন।
পুনরাবৃত্তিমূলক উপাদানগুলিতে Image উপাদান ব্যবহার ( List/Grid )
আসুন একটি উদাহরণ দেখি যেখানে আমাদের ফ্লাইট টেবিল রয়েছে এবং প্রতিটি ফ্লাইট অবজেক্টের নিজস্ব কভার রয়েছে যা ImageFile ক্ষেত্র [ file ] দ্বারা প্রতিনিধিত্ব করে।
কল্পনা করুন যে ফ্লাইট তালিকাটি List উপাদানের সাথে উপস্থাপন করা হয়েছে। List উপাদানের প্রতিটি উপাদান - প্রাসঙ্গিক ফ্লাইট তথ্য প্রদর্শন করার জন্য Image এবং কয়েকটি অন্যান্য উপাদান ধারণকারী একটি Card উপাদান। UI ডিজাইনারে এটি নিম্নলিখিত ভাবে দেখায়:
প্রথমত, প্যারেন্ট কম্পোনেন্টের জন্য Data Source নির্দিষ্ট করতে হবে (এই ক্ষেত্রে List উপাদান)।
ডাটাবেস থেকে Image কম্পোনেন্টে ডাটা আপলোড করতে, আমাদের Image কম্পোনেন্টের জন্য একটি নতুন ব্যবসায়িক প্রক্রিয়া তৈরি করতে হবে।
প্রয়োজনীয় BP অ্যাপ্লিকেশনটিতে একটি চিত্র উপাদান তৈরির সাথে শুরু হয়, যেমন 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/ ব্লক ব্যবহার করে ফাইল অবজেক্ট লোড করা হয়। নিম্নরূপ সংশ্লিষ্ট BP উদাহরণ.
পরবর্তী ধাপে, Image Update Properties ব্লকের Data প্রপার্টিতে ইনপুট হিসেবে বাইট অ্যারে পাস করার জন্য Expand file ব্লক ব্যবহার করে ইমেজ ফাইলটি প্রসারিত করা হয়। শীটে একটি নির্দিষ্ট ইমেজ উপাদানের Widget ID উল্লেখ করাও প্রয়োজন, এটিকে BP-এর শুরুতে onCreate ব্লক থেকে মান পাস করে। BP এর শেষ অংশের ফলাফল নীচের উদাহরণে দেখানো হয়েছে:
শেষ পর্যন্ত Break Loop ব্লকটি ব্যবহার করা হয় যাতে অ্যারের অবশিষ্ট উপাদানগুলি নিরর্থকভাবে পুনরাবৃত্তি না হয়।
ব্যবহারকারীর স্মার্টফোনের ফাইল সিস্টেম থেকে একটি ছবি লোড করা হচ্ছে
ব্যবহারকারী প্রোফাইল অবতার লোড করার একটি উদাহরণ বিবেচনা করুন। ওয়েব ইন্টারফেসে একটি ইমেজ এবং একটি বোতাম রয়েছে যা BP চালু করে এবং দেখতে এইরকম:
তারপরে, প্রাসঙ্গিক BP ব্যবহারকারীকে তার ডিভাইস থেকে ফাইল নির্বাচন করার অনুমতি দেয় Select Files ব্লক ব্যবহার করে। এবং যদি ফাইলগুলি সফলভাবে নির্বাচন করা হয় তবে index = 0 সহ উপাদানটি নেওয়া হয়। অনুরূপ BP এর মত দেখাচ্ছে:
Files অ্যারের ফলস্বরূপ ফাইল উপাদানটি আরও ব্যবহারের জন্য ওয়েব অ্যাপ্লিকেশন সার্ভারে আপলোড করা আবশ্যক ( Server request POST /_files/ )। অনুরোধটি সফল হলে, Server request POST /_files/ ব্লকের আউটপুটে ফাইল অবজেক্টটি একটি Bytes Array পেতে এক্সপ্যান্ড Expand file ব্লকের ইনপুটে পাস করা হয়, যা Image Update Properties ব্লকের ইনপুটে পাস করা হয়। Data সম্পত্তি।
