এই টিউটোরিয়ালটি ওয়েব অ্যাপ্লিকেশনে Image কম্পোনেন্টের ব্যবহার বর্ণনা করে।
Look & Feel
- Upload - বোতাম টিপে এবং ফাইল সিস্টেম থেকে একটি চিত্র নির্বাচন করে একটি চিত্র পূর্বনির্ধারিত করা সম্ভব;
- Image alt [ string ] - যাকে alt ট্যাগ এবং Alt বর্ণনাও বলা হয়, Alt টেক্সট হল লিখিত অনুলিপি যা একটি ওয়েবপেজে একটি চিত্রের জায়গায় প্রদর্শিত হয় যদি চিত্রটি ব্যবহারকারীর স্ক্রিনে লোড হতে ব্যর্থ হয়। এই পাঠ্যটি স্ক্রিন-রিডিং সরঞ্জামগুলিকে দৃষ্টি প্রতিবন্ধী পাঠকদের কাছে চিত্রগুলি বর্ণনা করতে সহায়তা করে এবং অনুসন্ধান ইঞ্জিনগুলিকে আপনার ওয়েবসাইটকে আরও ভালভাবে ক্রল করতে এবং র্যাঙ্ক করার অনুমতি দেয়;
- Width [ string ] - ডিফল্টরূপে চিত্রের প্রস্থ;
- Height [ string ] - ডিফল্টরূপে চিত্রের উচ্চতা;
- Visible [ boolean ] - চিত্রটি দৃশ্যমান কিনা তা নির্ধারণ করে;
- Name [ string ] - উপাদানের নাম;
সম্পর্কিত ব্যবসায়িক প্রক্রিয়া
এইচটিএমএল-এ ইমেজ হল ইমেজ অবজেক্টের একটি রেফারেন্স। অতএব, চিত্র সর্বদা লিঙ্কগুলির সাথে কাজ করে এবং, চিত্র ডেটা ব্যবহার করার জন্য, আপনাকে এটির একটি লিঙ্ক পেতে হবে।
নিম্নলিখিত BPs ওয়েব অ্যাপ্লিকেশন ব্যবহারের জন্য পূর্বে তৈরি করা হয়েছে:
- Image Get Properties - চিত্র বৈশিষ্ট্যগুলি পায়:
- Component ID [ string ] - উপাদানের শনাক্তকারী;
- Width [ string ] - ছবির প্রস্থ;
- Height [ string ] - ছবির উচ্চতা;
- Image URL [ string ] - ছবির URL-ঠিকানা;
- Tooltip [ string ] - টুলটিপ স্ট্রিং হোভারে দেখানো হবে;
- Visible [ boolean ] - চিত্রটি দৃশ্যমান কিনা তা নির্ধারণ করে;
- Loading [ boolean ] - true হলে ইমেজকে " লোডিং " অবস্থায় সেট করে;
- Image Set Properties - নির্বাচিত চিত্রের সমস্ত বৈশিষ্ট্য পুনরায় সেট করে এবং পরিবর্তে প্রদত্তগুলি সেট করে:
- Component ID [ string ] - উপাদানের শনাক্তকারী;
- Width [ string ] - ছবির প্রস্থ;
- Height [ string ] - ছবির উচ্চতা;
- Image URL [ string ] - ছবির URL-ঠিকানা;;
- Tooltip [ string ] - টুলটিপ স্ট্রিং হোভারে দেখানো হবে;
- Visible [ boolean ] - চিত্রটি দৃশ্যমান কিনা তা নির্ধারণ করে;
- Loading [ boolean ] - true হলে ইমেজকে " লোডিং " অবস্থায় সেট করে;
- Image Update Properties - ইমেজ প্রোপার্টি আপডেট করে:
- Component ID [ string ] - উপাদানের শনাক্তকারী;
- Width [ string ] - ছবির প্রস্থ;
- Height [ string ] - ছবির উচ্চতা;
- Image URL [ string ] - ছবির URL-ঠিকানা;
- Tooltip [ string ] - টুলটিপ স্ট্রিং হোভারে দেখানো হবে;
- Visible [ boolean ] - চিত্রটি দৃশ্যমান কিনা তা নির্ধারণ করে;
- Loading [ boolean ] - true হলে ইমেজকে " লোডিং " অবস্থায় সেট করে;
ব্যবহারের উদাহরণ
ব্যবহারকারী প্রোফাইল অবতার লোড করার একটি উদাহরণ বিবেচনা করুন। ওয়েব ইন্টারফেসে একটি ইমেজ এবং একটি বোতাম থাকে যা BP কে ট্রিগার করে এবং দেখতে এইরকম:
BP onClick ট্রিগার থেকে শুরু হয়। ব্যবহারকারীর ডিভাইস ফাইল সিস্টেম থেকে ফাইলগুলি বাছাই করতে ফাইলগুলি Select Files ব্লক ব্যবহার করা হয় ( Max files = 1 , File types = Image )। যদি ফাইলটি সফলভাবে বাছাই করা হয় তাহলে index=0 সহ অ্যারে উপাদান নির্বাচন করতে হবে।
Files অ্যারের ফলস্বরূপ ফাইল উপাদানটি আরও ব্যবহারের জন্য ওয়েব অ্যাপ্লিকেশন সার্ভারে আপলোড করা আবশ্যক ( Server request POST /_files / )। যদি অনুরোধটি সফল হয়, Server request POST /_files/ ব্লকের ID পেতে এক্সপ্যান্ড Expand file ব্লকের ইনপুটে পাস করা হয়।
URL পেতে, আপনাকে ফাইল ID নিতে হবে এবং এর মানটিকে একটি স্ট্রিং ( To String ) এ রূপান্তর করতে হবে। আপেক্ষিক ফাইল পাথ হবে /api/_files/<ID>/download/ । সুতরাং, একটি ইমেজ আপলোড করার জন্য, ফাইল পাথটি Image Update Properties ব্লকের Image URL প্রপার্টিতে পাস করতে হবে।
প্রকাশিত অ্যাপ্লিকেশন নীচের উদাহরণে আছে
