বিল্ডিং UI
ড্র্যাগ-এন্ড-ড্রপ অ্যাপমাস্টার ওয়েব ডিজাইনারের সাথে কীভাবে সুন্দর এবং কাঠামোগত ওয়েব অ্যাপ ইন্টারফেস তৈরি করা যায় তার একটি সহজ নির্দেশিকা।
একটি ব্যবহারযোগ্যতা এবং কাঠামোগত ইন্টারফেস ডিজাইন করতে, অ্যাপমাস্টার ওয়েব ডিজাইনার পারমাণবিক UI উপাদানগুলির একটি বিস্তৃত অ্যারে সরবরাহ করে। আপনার উদ্দেশ্য এবং লক্ষ্যগুলির সাথে সারিবদ্ধ করার জন্য এই উপাদানগুলিকে বিভিন্ন উপায়ে একত্রিত এবং গোষ্ঠীবদ্ধ করা যেতে পারে।
AppMaster নিম্নলিখিত UI উপাদানগুলি অফার করে:
- ধারক: অন্যান্য উপাদানকে যুক্তিযুক্তভাবে গঠন এবং গোষ্ঠীবদ্ধ করার জন্য মৌলিক উপাদান।
- মডেল এবং ড্রয়ার: বর্তমান স্ক্রীন না রেখে অতিরিক্ত তথ্য বা ক্রিয়া প্রদর্শনের জন্য ইন্টারেক্টিভ উপাদান।
- ডাইনামিক ভ্যালু আউটপুট উপাদান: ডাটা ডাইনামিকভাবে উপস্থাপনের জন্য তালিকা , গ্রিড এবং টেবিল অন্তর্ভুক্ত করে।
- বেসিক UI এলিমেন্ট: যেমন বোতাম , টেক্সট এবং আইকন , মৌলিক ইন্টারফেস ইন্টারঅ্যাকশনের জন্য অপরিহার্য।
- নেভিগেশন উপাদান: উল্লম্ব এবং অনুভূমিক মেনু , ট্যাব এবং অনুরূপ নেভিগেশন সরঞ্জাম সহ।
- ফর্ম উপাদান: ব্যবহারকারীর মিথস্ক্রিয়া এবং ডেটা সংগ্রহের জন্য বিভিন্ন ইনপুট এবং নিয়ন্ত্রণ।
কম্পোনেন্ট লাইব্রেরিতে নিয়মিত আপডেটগুলি আপনার ওয়েব অ্যাপ্লিকেশনগুলিকে আরও দক্ষতার সাথে বিকাশ করার ক্ষমতা বাড়ায়।
একটি অ্যাপমাস্টার ড্র্যাগ-এন্ড-ড্রপ ওয়েবসাইট নির্মাতার সম্ভাবনা প্রদর্শনের জন্য আমাদের সাধারণ ক্যালকুলেটর অ্যাপ্লিকেশনের জন্য একটি UI তৈরি করা যাক। এই অ্যাপটি ইনপুট মানের উপর ভিত্তি করে বিভিন্ন গাণিতিক ক্রিয়াকলাপের ফলাফল প্রদর্শন করবে।
ফ্লেক্স ধারক
ফ্লেক্স কন্টেইনারের সাহায্যে, আপনি একটি পাত্রে থাকা সমস্ত চাইল্ড উপাদানের জন্য সহজেই সারিবদ্ধকরণ এবং স্ট্যাকিং ব্যবস্থাপনা পরিচালনা করতে পারেন।
ফ্লেক্স কন্টেইনার হল আপনার ওয়েব পৃষ্ঠার কাঠামো তৈরি করার জন্য একটি বেস উপাদান। অ্যাপমাস্টার ওয়েব অ্যাপ ডিজাইনার-এ ফ্লেক্স কন্টেইনার ব্যবহারকারীদের নমনীয়ভাবে চাইল্ড এলিমেন্ট (উইজেট বা কন্টেনার) সাজানোর অনুমতি দেয়। এটি অনুভূমিক এবং উল্লম্ব উভয় প্রান্তিককরণ সমর্থন করে, বিকাশকারীদের বিভিন্ন স্ক্রীন আকারের সাথে খাপ খাইয়ে জটিল লেআউট তৈরি করতে সক্ষম করে।
পাত্রে যোগ করা হচ্ছে
আমরা দুটি প্রধান পাত্র ব্যবহার করব: একটি ডেটা এন্ট্রির জন্য এবং অন্যটি একটি সাধারণ পাত্রে মোড়ানো গণনার ফলাফল প্রদর্শনের জন্য।
প্রথমে, অন্যান্য সমস্ত উপাদান রাখার জন্য ক্যানভাসে ফ্লেক্স কন্টেইনার যোগ করুন।
চেহারা প্যানেলে , আপনি সেটিংসের একটি পরিসর অন্বেষণ করতে পারেন:
- এলিমেন্ট আইডি: ব্যবসায়িক প্রক্রিয়ায় কন্টেইনার উল্লেখ করার জন্য একটি অনন্য শনাক্তকারী।
- সাধারণ গোষ্ঠী: দৃশ্যমানতা এবং কার্সার শৈলীর মতো উপাদানটির ডিফল্ট অবস্থা সংজ্ঞায়িত করার জন্য সেটিংস।
- ফ্লেক্স চাইল্ড গ্রুপ: ফ্লেক্স-প্যারেন্ট উপাদানের মধ্যে উপাদানটি কীভাবে আচরণ করে তা নির্ধারণ করে।
- লেআউট: পাত্রের মধ্যে শিশু আইটেমগুলি সাজানোর জন্য সেটিংস।
- আকার: উপাদানের মাত্রা নির্দিষ্ট করতে।
- ব্যবধান : উপাদানের ভিতরে এবং চারপাশে স্থান সামঞ্জস্য করে।
- পটভূমি: পটভূমির রঙ এবং স্তরগুলির জন্য বিকল্প।
- কোণার ব্যাসার্ধ, সীমানা, ছায়া: উপাদানের প্রান্ত, সীমানা এবং ছায়া প্রভাবগুলির জন্য কাস্টমাইজেশন।
- টুলটিপ: হোভার বা ফোকাস অ্যাকশনের জন্য একটি টুলটিপ যোগ করে।
আপনার প্রধান ধারক কাস্টমাইজ করুন. উদাহরণস্বরূপ, চলুন অনুভূমিকভাবে দিকনির্দেশ সেট করি এবং গ্যাপ , প্যাডিং , কর্নার ব্যাসার্ধ , এবং সীমানা সমন্বয় করি।
এর পরে, ফর্মের ইনপুট মানগুলির জন্য আপনার প্রধানটির ভিতরে আরেকটি ফ্লেক্স কন্টেন r যোগ করুন। মূল পাত্রে উপলব্ধ স্থান পূরণ করতে এটিকে সম্পূর্ণ প্রস্থে সেট করুন।
ফলাফল প্রদর্শনের জন্য একটি পৃথক ব্লক তৈরি করতে এই ধারকটি ( CTRL/⌘+D ব্যবহার করে) নকল করুন। প্রস্থ সম্পত্তি 30% সেট করুন।
UI উপাদান যোগ করা হচ্ছে
আপনার অ্যাপ্লিকেশন নির্মাণ চালিয়ে যেতে, প্রয়োজনীয় UI উপাদান যোগ করার সময় এসেছে।
ফর্ম যোগ করুন
আমাদের ব্যবসায়িক প্রক্রিয়ার জন্য ব্যবহারকারীকে দুটি নম্বর ইনপুট করতে হবে, উভয় ফ্লোট টাইপের। এটি সম্ভব করার জন্য, গণনা প্রক্রিয়া শুরু করতে দুটি ফ্লোট ইনপুট এবং একটি বোতাম যোগ করুন।
বাম দিকের ফ্লেক্স কন্টেইনারের দিকটি উল্লম্বে স্যুইচ করুন এবং নেস্টেড উপাদানগুলির মধ্যে একটি ফাঁক যোগ করুন যাতে তাদের মধ্যে সামান্য স্থান থাকে। এই ফ্লেক্স পাত্রের ভিতরে প্রথম মানের জন্য একটি ইনপুট ফ্লোট যোগ করুন, যাকে আমরা 'X' হিসাবে লেবেল করব:
- ইনপুট ফ্লোট উপাদানটিকে বাম দিকের পাত্রে টেনে আনুন এবং ড্রপ করুন।
- উপস্থিতি প্যানেলে , একটি লেবেল এবং স্থানধারক যোগ করে ক্ষেত্রটিকে ব্যক্তিগতকৃত করুন৷
- আপনার অ্যাপ্লিকেশনের ডিজাইনের সাথে মানানসই ক্ষেত্রের চেহারাটি সূক্ষ্ম সুর করুন।
ক্যানভাসে যোগ করা ক্ষেত্রটি নির্বাচন করুন এবং CTRL/⌘+D ব্যবহার করে ডুপ্লিকেট করুন। দ্বিতীয় মান, 'Y' উপস্থাপন করতে ডুপ্লিকেটেড ক্ষেত্রের লেবেল এবং স্থানধারক পরিবর্তন করুন।
এখন যোগ করা ক্ষেত্রগুলির নীচে একটি বোতাম উপাদান টেনে আনুন। চেহারা প্যানেলে , পূর্ণ প্রস্থের জন্য বোতামটি সামঞ্জস্য করুন। ফ্লেক্স চাইল্ড গ্রুপে অ্যালাইন প্রপার্টি স্ট্রেচ- এ সেট করে এটি অর্জন করা যেতে পারে।
বোতামের জন্য একটি লেবেল ইনপুট করুন, এবং ঐচ্ছিকভাবে, এর ভিজ্যুয়াল আবেদন বাড়াতে একটি আইকন যোগ করুন।
এই উপাদানগুলি যোগ করার পরে, স্পষ্টতা এবং সনাক্তকরণের সহজতার জন্য তাদের নাম পরিবর্তন করা একটি ভাল অভ্যাস। এটি আপনার ব্যবসায়িক প্রক্রিয়াগুলিতে তাদের উল্লেখ করা সহজ করে তোলে, বোধগম্যতা বৃদ্ধি করে এবং বিকাশ প্রক্রিয়াকে দ্রুততর করে।
ফলাফল ব্লক যোগ করুন
প্যারেন্ট কন্টেইনারের ডানদিকে, আমরা আমাদের ব্যবসায়িক প্রক্রিয়া চালানোর পর ফলাফল প্রদর্শনের জন্য একটি স্থান কনফিগার করব। প্রথমে, এই কন্টেইনারের দিকনির্দেশ সম্পত্তিটি উল্লম্বে সেট করুন এবং উপাদানগুলিকে সুন্দরভাবে ব্যবধানে রাখতে একটি ছোট ফাঁক যুক্ত করুন। এর প্রস্থ 30% এ পরিবর্তন করুন।
এই ডান পাত্রের মধ্যে, একটি নতুন অনুভূমিক ফ্লেক্স কন্টেইনার ঢোকান এবং এর ভিতরে অপারেশনের প্রতিনিধিত্বকারী একটি আইকন উপাদান যোগ করুন, একটি সমান প্রতীক সহ একটি পাঠ্য ব্লক এবং পাঠ্য ব্লক যেখানে অপারেশনের ফলাফল প্রদর্শিত হবে। আমাদের সংজ্ঞায়িত গাণিতিক ক্রিয়াকলাপের জন্য প্রতিটি আপডেট করে এই ধারকটি চারবার নকল করুন।
এপিয়ারেন্স প্যানেলের সাথে আপনার ইচ্ছামত প্রতিটি উপাদান কাস্টমাইজ করুন।
ইঙ্গিত ব্লক যোগ করুন
ইন্টারফেসের ব্যবহারযোগ্যতা বাড়ানোর জন্য, আমরা একটি স্থানধারক তৈরি করি যা ফলাফল না পাওয়া পর্যন্ত প্রদর্শন করবে। এর জন্য, একটি অতিরিক্ত ফ্লেক্স কন্টেইনার যোগ করুন, ডান পাত্রের প্রস্থ (30%) মিরর করে, এবং একটি বর্ণনামূলক ইঙ্গিত সহ ভিতরে একটি টেক্সট ব্লক রাখুন।
ফলাফল সহ ধারকটির একটি মূল বৈশিষ্ট্য হল এর প্রাথমিক দৃশ্যমানতার অবস্থা। ডিফল্টরূপে, দৃশ্যমান সুইচ বন্ধ সেট করুন, প্রাথমিকভাবে এটিকে অদৃশ্য করে।
উপাদান লুকান
আমরা এই কন্টেইনারটিকে দৃশ্যমান করব এবং শুধুমাত্র ব্যবসায়িক প্রক্রিয়া চালানোর পরে এবং ফলাফল প্রাপ্ত হওয়ার পরে ডেটা আপডেট করব। টেক্সট ব্লকের নাম বরাদ্দ করা গুরুত্বপূর্ণ, ব্যবসায়িক প্রক্রিয়া তৈরির সময় সহজে শনাক্তকরণ নিশ্চিত করা এবং প্রদর্শনের জন্য ফলাফল লেখা।
🎉 ভালো কাজ! আমরা আমাদের অ্যাপ্লিকেশনের জন্য নিখুঁত UI তৈরি করেছি এবং আমাদের উপাদানগুলিতে ইন্টারঅ্যাক্টিভিটি যুক্ত করতে প্রস্তুত।