জিইউআই ডিজাইন ও বাস্তবায়নের জন্য কি কোনও ধরণের পদ্ধতিগত কৌশল আছে?


18

আমি সি # তে জিইউআই অ্যাপ্লিকেশন তৈরি করতে ভিজ্যুয়াল স্টুডিওটি ব্যবহার করছি। টুলবক্স একটি নিফটি উপাদান প্যালেট হিসাবে পরিবেশন করে যা আমাকে সহজেই আমার ফর্মটিতে বোতাম এবং অন্যান্য উপাদানগুলিকে টেনে আনে এবং ছাড়ার অনুমতি দেয় (স্পষ্টতার জন্য আমি যখনই "নিয়ন্ত্রণ" বলতে চাইব তখন বোতামটি বলব) যা স্থির রূপগুলি বেশ সহজ করে তোলে। তবে, আমি দুটি সমস্যার মধ্যে পড়ে:

  • প্রথম স্থানে বোতাম তৈরি করা অনেক কাজ। আমার যখন এমন একটি ফর্ম থাকে যা স্থিতিশীল নয় (যেমন, ব্যবহারকারীরা যা করে তা চালানোর সময় বোতাম বা অন্যান্য নিয়ন্ত্রণ তৈরি করা হয়) আমি প্যালেটটি মোটেও ব্যবহার করতে পারি না। পরিবর্তে আমাকে প্রতিটি বোতাম নিজেই তৈরি করতে হবে, আমি যে পদ্ধতিতে ব্যবহার করছি তাতে কনস্ট্রাক্টরকে কল করে এবং তারপরে বোতামের উচ্চতা, প্রস্থ, অবস্থান, লেবেল, ইভেন্ট হ্যান্ডলার ইত্যাদি উল্লেখ করে ম্যানুয়ালি আরম্ভ করতে হবে। এটি অত্যন্ত ক্লান্তিকর কারণ আমি ফর্মটি কেমন হবে তা দেখতে না পেরে এই সমস্ত প্রসাধনী পরামিতিগুলিতে অনুমান করতে হবে এবং এটি প্রতিটি বোতামের জন্য পুনরাবৃত্তি কোডের অনেকগুলি লাইন উত্পন্ন করে।
  • বোতামগুলি কিছু করাও অনেক কাজ। পূর্ণ বৈশিষ্ট্যযুক্ত অ্যাপ্লিকেশনটিতে ইভেন্টগুলি মোকাবেলা করা একটি বিশাল ব্যথা। আমি কীভাবে এটি করতে পারি তা জানার একমাত্র উপায় হ'ল একটি বোতাম নির্বাচন করা, তার বৈশিষ্ট্যগুলিতে ইভেন্ট ট্যাবটিতে যাওয়া, OnClickইভেন্টটি ক্লিক করুন যাতে এটি ইভেন্টটির Formকোডে উত্পন্ন করে , তারপরে ইভেন্টের শৃঙ্খলা পূরণ করে। যেহেতু আমি যুক্তি এবং উপস্থাপনাটি পৃথক করতে চাই, তাই আমার ইভেন্টের সমস্ত হ্যান্ডলারগুলি উপযুক্ত ব্যবসায়িক লজিক ফাংশনে একক-লাইন কল হতে শুরু করে। তবে এটি অনেকগুলি বোতামের জন্য ব্যবহার করে (উদাহরণস্বরূপ, এমএস ওয়ার্ডের মতো অ্যাপ্লিকেশনটিতে উপস্থিত বোতামগুলির সংখ্যাটি কল্পনা করুন) Formকয়েক ডজন বয়লারপ্লেট ইভেন্ট হ্যান্ডলার পদ্ধতি সহ আমার কোডটিকে দূষিত করে এবং এটি বজায় রাখা কঠিন।

এগুলির কারণে, হ্যালো ওয়ার্ল্ডের চেয়ে জটিল যে কোনও জিইউআই প্রোগ্রাম আসলে আমার পক্ষে তৈরি করা খুব অবৈধ। স্পষ্টতই, আমি লিখি যে প্রোগ্রামগুলিতে ন্যূনতম ইউআই রয়েছে তেমন জটিলতার সাথে আমার কোনও সমস্যা নেই - আমার মনে হয় আমি আমার ব্যবসায়ের লজিক কোডটি সুস্পষ্টভাবে কাঠামো গঠনে উপযুক্ত দক্ষতার সাথে ওওপি ব্যবহার করতে সক্ষম হয়েছি। কিন্তু জিইউআই বিকাশ করার সময় আমি আটকে আছি। এটিকে এতটাই ক্লান্তিকর বলে মনে হচ্ছে যে আমি চাকাটি পুনরায় উদ্ভাবন করছি এবং কোথাও কোথাও একটি বই রয়েছে যাতে আমি জিডিআইআই সঠিকভাবে কীভাবে করব তা আমি পড়িনি।

আমি কিছু অনুপস্থিত করছি? বা সমস্ত সি # বিকাশকারী কেবল পুনরাবৃত্তি ইভেন্ট হ্যান্ডলার এবং বোতাম তৈরির কোডের অন্তহীন তালিকাগুলি গ্রহণ করে?


একটি (আশাবাদী সহায়ক) ইঙ্গিত হিসাবে, আমি আশা করি যে একটি ভাল উত্তর সম্পর্কে কথা বলতে হবে:

  • পুনরাবৃত্তি বোতাম তৈরি সহজ করতে ওওপি কৌশলগুলি (যেমন কারখানার প্যাটার্ন) ব্যবহার করে
  • অনেক ইভেন্ট হ্যান্ডলারকে একক পদ্ধতিতে সংমিশ্রণ করা Senderহয় যা কোন বোতামটি এটি বলেছিল তা নির্ধারণ করে এবং সেই অনুযায়ী আচরণ করে
  • এক্সএএমএল এবং উইন্ডোজ ফর্মগুলির পরিবর্তে ডাব্লুপিএফ ব্যবহার করছে

আপনি না আছে অবশ্যই এর মধ্যে যে কোনো উল্লেখ করতে। আমি কী ধরণের উত্তর খুঁজছি তা সম্পর্কে এটি আমার সেরা অনুমান।


আমি এটি দেখতে হ্যাঁ কারখানাটি একটি ভাল প্যাটার্ন হবে তবে আমি কমান্ডস সহ একটি মডেল-ভিউ-কন্ট্রোলার প্যাটার্নটি সরাসরি ঘটনার পরিবর্তে নিয়ন্ত্রণগুলিতে ঝুঁকিতে দেখি। ডাব্লুপিএফ সাধারণত এমভিভিএম হয় তবে এমভিসি ভালভাবে সম্ভব। আমাদের কাছে বর্তমানে ডাব্লুপিএফ-তে এমভিসি ব্যবহার করে 90% রয়েছে software সমস্ত কমান্ডগুলি নিয়ামকের কাছে ফরোয়ার্ড করা হয়েছে এবং তিনি যে কোনও কিছুই হ্যান্ডেল করেন
ফ্রাঙ্ক

আপনি জিইউআই সম্পাদকের সাহায্যে সমস্ত সম্ভাব্য বোতামগুলি দিয়ে গতিশীল ফর্ম তৈরি করতে পারবেন না এবং কেবল এমন জিনিসগুলি তৈরি করতে পারবেন যা আপনার গতিশীলরূপে অদৃশ্য নয়? অনেক কম কাজের মতো মনে হচ্ছে।
হ্যান্স-পিটার স্টার

@hstoerr তবে লেআউটটি কাজ করা শক্ত হবে। অনেকগুলি বোতাম ওভারল্যাপ হবে।
সুপারবেস্ট

উত্তর:


22

আপনার উল্লিখিত সমস্যাগুলির সাথে মোকাবিলা করার জন্য বেশ কয়েকটি পদ্ধতি রয়েছে যা কয়েক বছর ধরে বিবর্তিত হয়েছে, যা হ'ল আমি সম্মত হলাম, সাম্প্রতিক বছরগুলিতে ইউআই ফ্রেমওয়ার্কগুলির দুটি মূল সমস্যা যা মোকাবিলা করতে হয়েছিল। ডাব্লুপিএফ ব্যাকগ্রাউন্ড থেকে আগত, এগুলি নিম্নলিখিত হিসাবে যোগাযোগ করা হয়েছে:

আবশ্যক না করে ঘোষণামূলক নকশা

আপনি যখন নিয়ন্ত্রণগুলি ইনস্ট্যান্টিয়েট করতে এবং তাদের বৈশিষ্ট্যগুলি নির্ধারণের জন্য কঠোরভাবে লিখিত কোডটি বর্ণনা করেন, আপনি ইউআই ডিজাইনের আবশ্যকীয় মডেলটি বর্ণনা করছেন। এমনকি উইনফর্মস ডিজাইনারের সাথে, আপনি কেবল সেই মডেলটির উপরে একটি মোড়ক ব্যবহার করছেন - ফর্ম্যাট 1.ডিজাইনার.সি. ফাইলটি খুলুন এবং আপনি সেই সমস্ত কোডটি সেখানে বসে দেখেন।

ডাব্লুপিএফ এবং এক্সএএমএল - এবং এইচটিএমএল থেকে অবশ্যই অন্য ফ্রেমওয়ার্কগুলিতে অনুরূপ মডেলগুলির সাথে - আপনি নিজের বিন্যাসটি বর্ণনা করার আশা করছেন এবং ফ্রেমওয়ার্কটি এটি বাস্তবায়নের ভারী উত্তোলন করতে দেয়। ইউআই উপাদানগুলির মধ্যে সম্পর্কের বর্ণনা দেওয়ার জন্য আপনি প্যানেল (গ্রিড বা র‌্যাপপ্যানেল ইত্যাদি) হিসাবে স্মার্ট নিয়ন্ত্রণগুলি ব্যবহার করেন তবে প্রত্যাশাটি হ'ল আপনি ম্যানুয়ালি এগুলিকে স্থাপন করবেন না। পুনরুক্তযোগ্য নিয়ন্ত্রণগুলির মতো নমনীয় ধারণাগুলি - যেমন এএসপি.এনইটি'র রিপিটার বা ডাব্লুপিএফ-এর আইটেমস কন্ট্রোল - আপনাকে পুনরাবৃত্তি কোড না লিখে গতিশীলভাবে স্কেলিং ইউআই তৈরি করতে সহায়তা করে, গতিশীলভাবে বর্ধমান ডেটা সত্তাকে নিয়ন্ত্রণ হিসাবে গতিশীলভাবে প্রতিনিধিত্ব করার অনুমতি দেয়।

ডাব্লুপিএফের ডেটা টেম্পলেটগুলি আপনাকে আবারও ঘোষণামূলকভাবে - ইউআই ধার্মিকতার ছোট্ট ন্যাগেটগুলি সংজ্ঞায়িত করতে এবং সেগুলি আপনার ডেটার সাথে মেলে; উদাহরণস্বরূপ, গ্রাহক ডেটা অবজেক্টের একটি তালিকা আইটেমসন্ট্রোলের সাথে আবদ্ধ হতে পারে এবং তিনি কোনও নিয়মিত কর্মচারী (নাম এবং ঠিকানা সহ একটি স্ট্যান্ডার্ড গ্রিড সারি টেম্পলেট ব্যবহার করুন) বা প্রাইম গ্রাহক, তার উপর নির্ভর করে একটি ভিন্ন ডেটা টেম্পলেট আহ্বান করা যেতে পারে, তবে অন্য কোনও টেম্পলেট চিত্র সহ এবং সহজেই অ্যাক্সেসযোগ্য বোতামগুলি প্রদর্শিত হয়। আবার, নির্দিষ্ট উইন্ডোতে কোড না লিখে , কেবলমাত্র চৌকস নিয়ন্ত্রণগুলি যা তাদের ডেটা-প্রসঙ্গের বিষয়ে অবগত, এবং সুতরাং এগুলি আপনাকে কেবল আপনার ডেটার সাথে আবদ্ধ করতে এবং প্রাসঙ্গিক ক্রিয়াকলাপগুলি করতে দেয়।

ডেটা বাইন্ডিং এবং কমান্ড পৃথকীকরণ

ডেটা বাইন্ডিংয়ের উপর স্পর্শ করে ডাব্লুপিএফ-র ডেটাবাইন্ডিং (এবং আবার অন্যান্য ফ্রেমওয়ার্কগুলিতেও যেমন অ্যাংুলারজেএস) আপনাকে নিয়ন্ত্রণের (যেমন একটি পাঠ্যবাক্স) ডেটা সত্তার সাথে (যেমন, গ্রাহকের নাম) লিঙ্ক করে আপনার উদ্দেশ্যটি প্রকাশ করতে দেয় এবং যাক কাঠামো নদীর গভীরতানির্ণয় পরিচালনা করে। যুক্তি একইভাবে পরিচালনা করা হয়। কন্ট্রোলার-ভিত্তিক ব্যবসায়-যুক্তিতে ম্যানুয়ালি কোড-পেছনের ইভেন্ট-হ্যান্ডলারের ওয়্যারিংয়ের পরিবর্তে আপনি কোনও নিয়ন্ত্রণের আচরণের (যেমন একটি বোতামের কমান্ডের সম্পত্তি) কোনও ক্রিয়াকলাপের ডাকে প্রতিনিধিত্ব করে এমন কোনও কমান্ড অবজেক্টের সাথে লিঙ্ক করতে ডেটা বাঁধাই পদ্ধতি ব্যবহার করেন।

এটি প্রতিটি সময় ইভেন্ট হ্যান্ডলারদের আবার না লিখে এই কমান্ডটিকে উইন্ডোজের মধ্যে ভাগ করার অনুমতি দেয়।

উচ্চ স্তরের বিমূর্ততা

আপনার দুটি সমস্যার এই উভয় সমাধানই উইন্ডোজ ফর্মগুলির ইভেন্ট-চালিত দৃষ্টান্তের তুলনায় উচ্চতর স্তরের বিমূর্ততার একটি পদক্ষেপের প্রতিনিধিত্ব করে যা আপনি যথাযথভাবে ক্লান্তিকর খুঁজে পান।

ধারণাটি হ'ল আপনি কোডটিতে, নিয়ন্ত্রণে থাকা প্রতিটি একক সম্পত্তি এবং বোতাম থেকে ক্লিক করে শুরু হওয়া প্রতিটি একক আচরণের সংজ্ঞা দিতে চান না। আপনি চান যে আপনার নিয়ন্ত্রণ এবং অন্তর্নিহিত কাঠামোটি আপনার জন্য আরও কাজ করতে পারে এবং আপনাকে ডেটা বাইন্ডিংয়ের আরও বিমূর্ত ধারণা (যা উইনফোর্মে বিদ্যমান, তবে ডাব্লুপিএফ হিসাবে কার্যকর হিসাবে এর কাছাকাছি নেই) এবং ইউআইয়ের মধ্যে সংযোগগুলি সংজ্ঞায়িত করার জন্য কমান্ড প্যাটার্নটি ভাবার অনুমতি দেয় এবং এমন আচরণ যা ধাতুতে নামার দরকার নেই।

MVVM প্যাটার্ন এই দৃষ্টান্ত থেকে Microsoft এর পন্থা। আমি এটি পড়তে পরামর্শ দিচ্ছি।

এই মডেলটি কীভাবে প্রদর্শিত হবে এবং কীভাবে এটি আপনার সময় এবং কোডের লাইনগুলি সাশ্রয় করবে তার একটি মোটামুটি উদাহরণ। এটি সংকলন করবে না, তবে এটি সিউডো-ডাব্লুপিএফ। :)

আপনার অ্যাপ্লিকেশন সংস্থানগুলিতে কোথাও, আপনি ডেটা টেম্পলেটগুলি সংজ্ঞায়িত করেন:

<DataTemplate x:DataType="Customer">
   <TextBox Text="{Binding Name}"/> 
</DataTemplate>

<DataTemplate x:DataType="PrimeCustomer">
   <Image Source="GoldStar.png"/>
   <TextBox Text="{Binding Name}"/> 
</DataTemplate>

এখন, আপনি আপনার মূল স্ক্রিনটি ভিউমোডেলের সাথে লিঙ্ক করেছেন, এটি একটি শ্রেণি যা আপনার ডেটা প্রকাশ করে। বলুন, গ্রাহকগণের সংগ্রহ (কেবলমাত্র একটি List<Customer>) এবং একটি কমান্ড অবজেক্ট (আবার, সাধারণ ধরণের সাধারণ সম্পত্তি ICommand) property এই লিঙ্কটি বাঁধাইয়ের অনুমতি দেয়:

public class CustomersnViewModel
{
     public List<Customer> Customers {get;}
     public ICommand RefreshCustomerListCommand {get;}  
}

এবং ইউআই:

<ListBox ItemsSource="{Binding Customers}"/>
<Button Command="{Binding RefreshCustomerListCommand}">Refresh</Button>

এবং এটাই. লিস্টবক্সের সিনট্যাক্সটি ভিউমডেল থেকে বন্ধ গ্রাহকদের তালিকাটি দখল করবে এবং সেগুলি ইউআইতে রেন্ডার করার চেষ্টা করবে। আমরা পূর্বে নির্ধারিত দুটি ডেটা টেম্পলেটগুলির কারণে এটি প্রাসঙ্গিক টেম্পলেটটি আমদানি করবে (গ্রাহকের কাছ থেকে প্রাইম কাস্টমারের উত্তরাধিকার হিসাবে ধরে রেখে ডেটাটাইপের উপর ভিত্তি করে) এবং এটিকে তালিকাবক্সের বিষয়বস্তু হিসাবে রাখবে। কোনও লুপিং নয়, কোডের মাধ্যমে নিয়ন্ত্রণের কোনও গতিশীল প্রজন্ম নেই।

বোতামটিতে একইভাবে আইকোমন্ড বাস্তবায়নের সাথে তার আচরণের সংযোগ স্থাপনের জন্য পূর্বনির্মাণের সিনট্যাক্স রয়েছে, যা সম্ভবত Customersসম্পত্তিটি আপডেট করতে জানে - আবার স্বয়ংক্রিয়ভাবে, ইউআই আপডেট করার জন্য ডেটা- বন্ডিং ফ্রেমওয়ার্ককে অনুরোধ করে।

আমি এখানে কিছু শর্টকাট নিয়েছি অবশ্যই, তবে এটি এর মূল বক্তব্য।


5

প্রথমে, আমি এই নিবন্ধের সিরিজটি সুপারিশ করছি: http://codebetter.com/jeremymiller/2007/07/26/the-build-your-own-cab-series-table-of-contents/ - এতে বিস্তারিত সমস্যার সমাধান করা যায় না আপনার বোতামের কোড সহ, তবে এটি আপনাকে আপনার নিজস্ব অ্যাপ্লিকেশন কাঠামোটি ডিজাইন এবং প্রয়োগের জন্য একটি পদ্ধতিগত কৌশল দেয়, বিশেষত জিইউআই অ্যাপ্লিকেশনগুলির জন্য, আপনাকে দেখায় যে কীভাবে আপনার সাধারণ ফর্ম অ্যাপ্লিকেশনগুলিতে এমভিসি, এমভিপি, এমভিভিএম প্রয়োগ করতে হয়।

"ইভেন্টগুলির সাথে ডিলিং" সম্পর্কে আপনার প্রশ্নের সমাধান: আপনার যদি একই রকমভাবে কাজ করে বোতামগুলির সাথে প্রচুর ফর্ম থাকে তবে এটি সম্ভবত আপনার "অ্যাপ্লিকেশন ফ্রেমওয়ার্ক" এ ইভেন্ট হ্যান্ডলার অ্যাসাইনমেন্টটি প্রয়োগ করার জন্য অর্থ প্রদান করবে। জিইউআই ডিজাইনার ব্যবহার করে ক্লিক ইভেন্টগুলি বরাদ্দ করার পরিবর্তে একটি নামকরণ কনভেনশন তৈরি করুন যাতে নির্দিষ্ট নামের বোতামটির জন্য কীভাবে "ক্লিক" হ্যান্ডলার নামকরণ করতে হয়। উদাহরণস্বরূপ - বোতামের MyNiftyButton_ClickHandlerজন্য বোতামের জন্য MyNiftyButton। তারপরে কোনও পুনরায় ব্যবহারযোগ্য রুটিন (প্রতিবিম্ব ব্যবহার করে) লেখা ফর্মের সমস্ত বোতামের উপরে পুনরাবৃত্তি করা সত্যিই শক্ত নয়, ফর্মটিতে কোনও ক্লিকের হ্যান্ডলার রয়েছে কিনা তা পরীক্ষা করে হ্যান্ডলারটিকে স্বয়ংক্রিয়ভাবে ইভেন্টে বরাদ্দ করুন। একটি উদাহরণের জন্য এখানে দেখুন ।

এবং যদি আপনি কেবলমাত্র কয়েকটি ইভেন্ট বোতামের জন্য একটি ইভেন্ট হ্যান্ডলার ব্যবহার করতে চান তবে এটি সম্ভবও হবে। যেহেতু প্রতিটি ইভেন্ট হ্যান্ডলার প্রেরককে পাস হয়ে যায়, এবং প্রেরক সর্বদা বোতামটি বোতাম যা চাপানো ছিল, তাই আপনি প্রতিটি বোতামের "নাম" বৈশিষ্ট্যটি ব্যবহার করে ব্যবসায়ের কোডে প্রেরণ করতে পারেন।

বোতামগুলির গতিশীল তৈরির জন্য (বা অন্যান্য নিয়ন্ত্রণগুলি): আপনি কেবল কোনও টেম্পলেট মৌমাছি করার উদ্দেশ্যে ডিজাইনারের সাথে অব্যক্ত ফর্মটিতে বাটন বা অন্যান্য নিয়ন্ত্রণ তৈরি করতে পারেন । তারপরে, আপনি টেম্পলেট নিয়ন্ত্রণ ক্লোন করতে শুধুমাত্র অবস্থান বা আকারের মতো বৈশিষ্ট্যগুলি পরিবর্তন করতে প্রতিবিম্ব ( উদাহরণ হিসাবে এখানে দেখুন ) ব্যবহার করেন । কোডটিতে দুটি বা তিন ডজন বৈশিষ্ট্য ম্যানুয়ালি আরম্ভ করার চেয়ে এটি সম্ভবত অনেক সহজ হবে।

আমি উইনফরমগুলি মাথায় রেখেই এটি উপরে লিখেছি (ঠিক যেমন আপনি, আমি অনুমান করি) তবে সাধারণ নীতিগুলি অনুরূপ ক্ষমতা সহ ডাব্লুপিএফের মতো অন্যান্য জিইউআই পরিবেশে প্রয়োগ করা উচিত।


ডাব্লুপিএফ-এ করা সত্যিই সম্ভব এবং এটি আরও সহজ। আপনি কেবল কমান্ডের একটি তালিকা পূরণ করুন (প্রাক কোডড নির্দিষ্ট ফাংশন) এবং আপনার উইন্ডোতে উত্স সেট করুন। আপনি একটি দুর্দান্ত সরল ভিজ্যুয়াল টেম্পলেট তৈরি করেছেন এবং আপনার যে সমস্ত কমান্ডের যত্ন নেওয়া দরকার তা হ'ল আপনার পছন্দ মতো আদেশগুলি সংগ্রহ করা এবং দুর্দান্ত ডাব্লুপিএফ বাইন্ডিং আপনার জন্য দৃশ্যমানভাবে বিশ্রামের যত্ন নেবে।
ফ্রাঙ্ক
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.