বিদ্যমান কোড মানচিত্র উপাদান

বিকাশকারীরা জেনারেট করা কোডের পরিবর্তে একটি UI প্যাকেজ এবং একটি বিদ্যমান কোড উপাদানের মধ্যে একটি ম্যাপিং প্রদান করে কোড তৈরির প্রক্রিয়াটি কাস্টমাইজ করতে পারে। এটি উপকারী যখন বিদ্যমান বাস্তবায়নে এমন বৈশিষ্ট্য থাকে যা জেনারেট করা কোড যেমন অ্যানিমেশন বা জটিল আচরণ (যেমন ড্রপ ডাউন মেনু) দ্বারা অর্জন করা যায় না।

একটি ম্যাপিং ফাইল ব্যবহার করে কিভাবে উপাদান ম্যাপ করতে হয় তা ডেভেলপাররা উল্লেখ করে। একটি ম্যাপিং ফাইল কোড জেনারেটরকে বলে, ন্যূনতম, কীভাবে লক্ষ্য কম্পোজযোগ্য ফাংশনে পৌঁছাতে হয় যাতে সঠিক ক্লায়েন্ট কোড তৈরি করা যায়।

ম্যাপ করা কম্পোনেন্ট ওভারভিউ ডায়াগ্রাম

এখানে একটি উদাহরণ:

ফিগমা-তে, একজন ডিজাইনার একটি কার্ড কম্পোনেন্ট তৈরি করেন যাতে একটি প্লে বার কম্পোনেন্টের একটি উদাহরণ থাকে , উভয় উপাদান প্যাকেজ করে এবং ডেভেলপারের কাছে পাঠায়।

যখন ডেভেলপার ফিগমা থেকে UI প্যাকেজ আমদানি করে, ui-packages দুটি ডিরেক্টরি তৈরি হয়: card এবং play_bar । যখন তারা প্রকল্পটি তৈরি করে, তখন দুটি সংমিশ্রণযোগ্য ফাংশন তৈরি করা হয়: Card এবং PlayBar । সাধারণত, যেহেতু কার্ডে ফিগমাতে একটি প্লে বারের উদাহরণ রয়েছে, কোডে Card কম্পোজেবল ফাংশনে PlayBar কম্পোজেবলের জন্য একটি কল রয়েছে।

যাইহোক, ডিজাইনার এবং ডেভেলপার চান Card এর পরিবর্তে একটি বিদ্যমান কম্পোজেবল, MyExistingPlaybar ব্যবহার করুক, যার কার্যকারিতা রয়েছে যা ফিগমাতে বর্ণনা করা কঠিন। তাই বিকাশকারী play_bar.json নামে একটি ম্যাপিং ফাইল যোগ করে যা play_bar UI প্যাকেজকে MyExistingPlaybar এ ম্যাপ করে:

{
    "target": "MyExistingPlaybar",
    "package": "com.example.myApp"
}

এখন, যখন বিকাশকারী প্রকল্পটি তৈরি করে, Card PlayBar এর পরিবর্তে MyExistingPlaybar কল করে। মনে রাখবেন যে MyExistingPlaybar অবশ্যই PlayBar এর মতো একই পরামিতি থাকতে হবে (যদিও কিছু পার্থক্য থাকতে পারে, যা নীচের অতিরিক্ত নির্দেশে বর্ণিত হয়েছে)।

ম্যাপিং ফাইল

আপনার অ্যান্ড্রয়েড স্টুডিও প্রকল্পগুলিতে, ম্যাপিং ফাইলগুলি ui-package-resources/mappings অধীনে ui-packages ফোল্ডারের পাশে যোগ করা হয়। রিলে বিল্ড করার সময় ম্যাপিং ফাইলের জন্য দেখায়।

প্রকল্প দৃশ্যে ম্যাপিং ফাইল

একটি ম্যাপিং ফাইল তৈরি করুন

রিলে যেকোনো আমদানি করা UI প্যাকেজের জন্য একটি ম্যাপিং ফাইল তৈরি করতে পারে। এই পদক্ষেপগুলি অনুসরণ করুন:

  1. প্যাকেজ ফোল্ডারে বা টার্গেট ui-package ফোল্ডারের ভিতরের যেকোন ফাইলে ডান-ক্লিক করুন। ম্যাপিং ফাইল তৈরি করুন নির্বাচন করুন।

    ম্যাপিং ফাইল সামর্থ্য তৈরি করুন

  2. ডায়ালগে নিম্নলিখিত বিকল্পগুলি কনফিগার করুন:

    ম্যাপিং ফাইল তৈরি করার জন্য ডায়ালগ

    • ফাইলের অবস্থান: তৈরি করা ম্যাপিং ফাইলের জন্য অবস্থান সেট করে।

    • টার্গেট কম্পোজেবল: তৈরি করা কম্পোজেবলের পরিবর্তে ব্যবহার করা কাস্টম কম্পোজেবল সেট করে। আপনার কাছে একটি বিদ্যমান কম্পোজেবল ব্যবহার করার বা ডায়ালগ থেকে একটি নতুন তৈরি করার বিকল্প রয়েছে৷ একটি নতুন কম্পোজেবল তৈরি করা UI প্যাকেজে সংজ্ঞায়িত একই প্যারামিটার সহ একটি কম্পোজেবল তৈরি করে।

    • জেনারেটেড ফাইল: ম্যাপিং ফাইলে generateImplementation এবং generatePreview অপশন সেট করে। আরো বিস্তারিত জানার জন্য নীচের ম্যাপিং ফাইল বিষয়বস্তু দেখুন.
  3. ম্যাপিং ফাইল তৈরি করুন ক্লিক করুন। নির্দিষ্ট কনফিগারেশন সহ ui-package-resources/mapping ফোল্ডারের ভিতরে একটি নতুন ম্যাপিং ফাইল তৈরি করা হয়েছে।

আপনি এই পদক্ষেপগুলি ব্যবহার করে রিলে প্যাকেজ মডিউল UI থেকে ম্যাপিং ফাইল তৈরি করুন ডায়ালগ খুলতে পারেন:

  1. লক্ষ্য ui-package ফোল্ডারের ভিতরে একটি UI প্যাকেজের জন্য যেকোনো ফাইলে ক্লিক করুন।

  2. রিলে টুল উইন্ডো স্বয়ংক্রিয়ভাবে না খুললে, উইন্ডোটি খুলতে রিলে আইকনে ক্লিক করুন।

  3. প্যাকেজ বিকল্পের অধীনে ম্যাপিং ফাইল তৈরি করুন বোতামে ক্লিক করুন।

    ম্যাপিং ফাইল সামর্থ্য তৈরি করুন

ম্যাপিং ফাইলের নাম

একটি প্রদত্ত ম্যাপিং ফাইলের নাম অবশ্যই UI প্যাকেজ ফোল্ডারের নামের সাথে মিলতে হবে যা এটি প্রতিস্থাপন করে। সুতরাং play_bar.json ui-packages/mappings ফোল্ডারে UI প্যাকেজটিকে একটি বিদ্যমান কোড উপাদানে ম্যাপ করে।

ম্যাপিং ফাইল বিষয়বস্তু

ম্যাপিং ফাইলে নিম্নলিখিত বৈশিষ্ট্য রয়েছে:

  • লক্ষ্য: (প্রয়োজনীয়) আপনার কাস্টম কম্পোজেবল ফাংশনের নাম। ডিফল্টরূপে, এটি জেনারেটেড কোড দ্বারা তৈরি ফাংশনের নাম।

    "target" : "CustomComposableName"
    
  • প্যাকেজ: (প্রয়োজনীয়) প্যাকেজের নাম যেখানে আপনার কাস্টম কম্পোজেবল বসেছে। ডিফল্টরূপে, এটি জেনারেটেড কোড দ্বারা তৈরি ফাংশনের প্যাকেজ।

    "package" : "com.example.podcastapp.ui.components"
    
  • generate Implementation: (ঐচ্ছিক) সত্য বা মিথ্যা। সত্য হলে, এই UI প্যাকেজের একটি বাস্তবায়ন এখনও জেনারেট করা কোড ফাইলে তৈরি করা হয়। মিথ্যা হলে, বাস্তবায়ন তৈরি করা হয় না। ডিফল্টরূপে, এই সত্য.

    "generateImplementation" : true
    
  • generatePreviews: (ঐচ্ছিক) সত্য বা মিথ্যা। সত্য হলে, তৈরি করা কোড ফাইলে ম্যাপ করা কাস্টম উপাদানের একটি পূর্বরূপ তৈরি করা হয়। মিথ্যা হলে, কোন পূর্বরূপ তৈরি করা হয় না। ডিফল্টরূপে, এই সত্য.

    "generatePreviews" : true
    

ম্যাপ করা ভেরিয়েন্ট

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

@Composable
fun Chip(
    modifier: Modifier = Modifier,
    chipType: ChipType = ChipType.Red,
    chipText: String
) { ... }

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

অতিরিক্ত নির্দেশাবলী

উদাহরণস্বরূপ, যদি আপনি যে কম্পোজেবল ফাংশনটিকে লক্ষ্য করতে চান তাতে নিম্নলিখিত স্বাক্ষর থাকে:

@Composable
fun MyChip(
    modifier: Modifier = Modifier,
    chipType: ChipType = ChipType.Red,
    description: String  // instead of chipText
) { ... }

আপনি ম্যাপিং ফাইলে একটি fieldMappings ব্লক যোগ করতে পারেন যা প্যারামিটারগুলি কীভাবে ম্যাপ করা হয় তা প্রভাবিত করে। এই ক্ষেত্রে, এতে Chip chipText প্যারামিটার থেকে MyChip এর description প্যারামিটারে একটি ম্যাপিং রয়েছে।

{
    "target": "MyChip",
    "package": "com.example.myApp",
    "fieldMappings": [
        {
            "type": "parameter",
            "source": "chipText",
            "target": "description"
        }
    ]
}

fieldMappings ব্লকের প্রকারের মধ্যে রয়েছে:

  • parameter : একটি কোড প্যারামিটারে একটি UI প্যাকেজ ফিল্ড ম্যাপ করে।
    • source : UI প্যাকেজে নির্দিষ্ট করা প্যারামিটারের নাম।
    • target : টার্গেট কোড কম্পোনেন্টে নির্দিষ্ট করা প্যারামিটারের নাম।
  • lambda : একটি বিষয়বস্তু ল্যাম্বডাতে একটি UI প্যাকেজ ক্ষেত্র ম্যাপ করে।
    • source : UI প্যাকেজে নির্দিষ্ট করা প্যারামিটারের নাম।
    • target : টার্গেট কোড কম্পোনেন্টে নির্দিষ্ট করা প্যারামিটারের নাম।
  • modifier : একটি সংশোধক পদ্ধতিতে একটি UI প্যাকেজ ক্ষেত্রকে মানচিত্র করে।

    • source : UI প্যাকেজে নির্দিষ্ট করা প্যারামিটারের নাম।
    • method : সংশোধক বস্তুর পদ্ধতি যা জেনারেটেড কোডে আহ্বান করা উচিত।
    • parameter : নির্দিষ্ট পরিবর্তক পদ্ধতির মধ্যে প্যারামিটারের নাম।
    • library : সংশোধক পদ্ধতি অ্যাক্সেস করতে আমদানি করার জন্য যোগ্য প্যাকেজ নাম।
    • scope : পরিবর্তকের সুযোগ নির্দেশ করতে দুটি মানের একটি:
    • any : সংশোধকটি যেকোনো রিসিভারের সুযোগে ব্যবহার করা যেতে পারে।
    • relay : রিলে এর RelayContainer অবজেক্টের রিসিভার স্কোপে মডিফায়ার ব্যবহার করা আবশ্যক।
{% শব্দার্থে %} {% endverbatim %} {% শব্দার্থে %} {% endverbatim %}