मौजूदा कोड के लिए कॉम्पोनेंट मैप करें

डेवलपर, जनरेट किए गए कोड के बजाय, यूज़र इंटरफ़ेस (यूआई) पैकेज और मौजूदा कोड कॉम्पोनेंट के बीच मैपिंग करके, कोड जनरेशन की प्रोसेस को पसंद के मुताबिक बना सकते हैं. यह तब फ़ायदेमंद होता है, जब मौजूदा लागू किए गए वर्शन में ऐसी सुविधाएं हों जिन्हें जनरेट किए गए कोड से हासिल नहीं किया जा सकता. जैसे, ऐनिमेशन या ड्रॉप-डाउन मेन्यू जैसा जटिल व्यवहार.

डेवलपर, मैपिंग फ़ाइल का इस्तेमाल करके कॉम्पोनेंट को मैप करने का तरीका तय करते हैं. मैपिंग फ़ाइल, कोड जनरेटर को कम से कम टारगेट किए गए कॉम्पोज़ेबल फ़ंक्शन तक पहुंचने का तरीका बताती है, ताकि सही क्लाइंट कोड बनाया जा सके.

उदाहरण के लिए:

Figma में, कोई डिज़ाइनर एक ऐसा कार्ड कॉम्पोनेंट बनाता है जिसमें प्ले बार कॉम्पोनेंट का इंस्टेंस शामिल होता है. इसके बाद, वह दोनों कॉम्पोनेंट को पैकेज करता है और डेवलपर को भेजता है.

जब डेवलपर, Figma से यूज़र इंटरफ़ेस (यूआई) पैकेज इंपोर्ट करता है, तो ui-packages में दो डायरेक्ट्री बनाई जाती हैं: card और play_bar. प्रोजेक्ट बनाने पर, दो कंपोज़ेबल फ़ंक्शन बनते हैं: Card और PlayBar. आम तौर पर, Figma में कार्ड में प्ले बार का एक इंस्टेंस होता है. इसलिए, कोड में Card composable फ़ंक्शन में PlayBar composable को कॉल किया जाता है.

हालांकि, डिज़ाइनर और डेवलपर चाहते हैं कि Card, MyExistingPlaybar के तौर पर किसी मौजूदा कॉम्पोज़ेबल का इस्तेमाल करे. इस कॉम्पोज़ेबल की सुविधाओं के बारे में Figma में बताना मुश्किल है. इसलिए, डेवलपर play_bar.json नाम की एक मैपिंग फ़ाइल जोड़ता है, जो play_bar यूज़र इंटरफ़ेस (यूआई) पैकेज को MyExistingPlaybar से मैप करती है:

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

अब, जब डेवलपर प्रोजेक्ट बनाता है, तो Card, PlayBar के बजाय MyExistingPlaybar को कॉल करता है. ध्यान दें कि MyExistingPlaybar में वही पैरामीटर होने चाहिए जो PlayBar में हैं. हालांकि, कुछ अंतर हो सकते हैं, जैसा कि नीचे अन्य डायरेक्टिव में बताया गया है.

फ़ाइल मैप करना

Android Studio प्रोजेक्ट में, मैपिंग फ़ाइलें ui-packages फ़ोल्डर के बगल में ui-package-resources/mappings में जोड़ी जाती हैं. रिले, बिल्ड के दौरान मैपिंग फ़ाइलों को खोजता है.

मैपिंग फ़ाइल जनरेट करना

Relay, इंपोर्ट किए गए किसी भी यूज़र इंटरफ़ेस (यूआई) पैकेज के लिए, मैपिंग फ़ाइल जनरेट कर सकता है. यह तरीका अपनाएं:

1. टारगेट ui-package फ़ोल्डर में मौजूद पैकेज फ़ोल्डर या किसी फ़ाइल पर राइट क्लिक करें. मैपिंग फ़ाइल जनरेट करें को चुनें.

   

2. डायलॉग में ये विकल्प कॉन्फ़िगर करें:

   

   • फ़ाइल की जगह: जनरेट की गई मैपिंग फ़ाइल की जगह सेट करता है.

   • टारगेट कॉम्पोज़ेबल: यह कस्टम कॉम्पोज़ेबल सेट करता है, जिसका इस्तेमाल जनरेट किए गए कॉम्पोज़ेबल के बजाय किया जाता है. आपके पास किसी मौजूदा कॉम्पोज़ेबल का इस्तेमाल करने या डायलॉग से नया कॉम्पोज़ेबल बनाने का विकल्प होता है. नया कॉम्पोज़ेबल बनाने पर, उसी पैरामीटर के साथ कॉम्पोज़ेबल बनता है जो यूज़र इंटरफ़ेस (यूआई) पैकेज में तय किए गए हैं.

   • जनरेट की गई फ़ाइल: यह मैपिंग फ़ाइल में generateImplementation और generatePreview विकल्प सेट करती है. ज़्यादा जानकारी के लिए, यहां फ़ाइल के कॉन्टेंट को मैप करना देखें.

3. मैपिंग फ़ाइल जनरेट करें पर क्लिक करें. तय किए गए कॉन्फ़िगरेशन के साथ, ui-package-resources/mapping फ़ोल्डर में एक नई मैपिंग फ़ाइल बनाई जाती है.

Relay package module यूज़र इंटरफ़ेस (यूआई) से, मैपिंग फ़ाइल जनरेट करें डायलॉग बॉक्स को भी खोला जा सकता है. इसके लिए, यह तरीका अपनाएं:

1. टारगेट ui-package फ़ोल्डर में, यूज़र इंटरफ़ेस (यूआई) पैकेज की किसी भी फ़ाइल पर क्लिक करें.

2. अगर रीले टूल की विंडो अपने-आप नहीं खुलती है, तो विंडो खोलने के लिए रीले आइकॉन पर क्लिक करें.

3. पैकेज के विकल्प में जाकर, मैपिंग फ़ाइल जनरेट करें बटन पर क्लिक करें.

   

मैपिंग फ़ाइल का नाम

किसी मैपिंग फ़ाइल का नाम, उस कॉम्पोनेंट के यूज़र इंटरफ़ेस (यूआई) पैकेज फ़ोल्डर के नाम से मेल खाना चाहिए जिसे वह बदलती है. इसलिए, play_bar.json, ui-packages/mappings फ़ोल्डर में मौजूद यूज़र इंटरफ़ेस (यूआई) पैकेज को किसी मौजूदा कोड कॉम्पोनेंट से मैप करता है.

फ़ाइल के कॉन्टेंट को मैप करना

मैपिंग फ़ाइल में ये प्रॉपर्टी शामिल होती हैं:

• target: (ज़रूरी है) आपके कस्टम कंपोजेबल फ़ंक्शन का नाम. डिफ़ॉल्ट रूप से, जनरेट किए गए कोड से बनाए गए फ़ंक्शन का नाम यही होता है.

  "target" : "CustomComposableName"
  

• package: (ज़रूरी है) उस पैकेज का नाम जिसमें आपका कस्टम कॉम्पोज़ेबल मौजूद है. डिफ़ॉल्ट रूप से, यह जनरेट किए गए कोड से बनाए गए फ़ंक्शन का पैकेज होता है.

  "package" : "com.example.podcastapp.ui.components"
  

• generateImplementation: (ज़रूरी नहीं) सही या गलत. अगर यह सही है, तो जनरेट की गई कोड फ़ाइल में अब भी इस यूज़र इंटरफ़ेस पैकेज का लागू किया गया वर्शन बनाया जाता है. अगर यह 'गलत है' पर सेट है, तो लागू करने की प्रोसेस नहीं बनाई जाएगी. यह डिफ़ॉल्ट रूप से 'सही' पर सेट होता है.

  "generateImplementation" : true
  

• generatePreviews: (ज़रूरी नहीं) सही या गलत. अगर यह सही है, तो जनरेट की गई कोड फ़ाइल में, मैप किए गए कस्टम कॉम्पोनेंट की झलक बनाई जाती है. अगर यह 'गलत है' पर सेट है, तो कोई स्क्रीनशॉट नहीं बनाया जाएगा. यह डिफ़ॉल्ट रूप से 'सही' पर सेट होता है.

  "generatePreviews" : true
  

मैप किए गए वैरिएंट

अगर किसी Figma कॉम्पोनेंट में वैरिएंट हैं, तो जनरेट किए गए कॉम्पोज़ेबल में वैरिएंट को कोड में बदलने वाले एनम पैरामीटर होते हैं. इनके बारे में डिज़ाइन वैरिएंट मैनेज करने वाले ट्यूटोरियल में बताया गया है. अगर आपको किसी Figma कॉम्पोनेंट को वैरिएंट के साथ मौजूदा कोड पर मैप करना है, तो उसे ऐसे कॉम्पोज़ेबल पर मैप करना होगा जो जनरेट किए गए कॉम्पोज़ेबल के जैसे पैरामीटर लेता हो. उदाहरण के लिए, Chip नाम के ऐसे Figma कॉम्पोनेंट के लिए जिसका वैरिएंट ChipType प्रॉपर्टी है, Chip का जनरेट किया गया कॉम्पोज़ेबल सिग्नेचर इस तरह दिखता है:

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

अगर आपको चिप Figma कॉम्पोनेंट को किसी मौजूदा MyChip कॉम्पोज़ेबल से मैप करना है, तो MyChip के हस्ताक्षर का वही होना चाहिए जो जनरेट किए गए कॉम्पोज़ेबल का है. ऐसा तब माना जाता है, जब कोई अतिरिक्त निर्देश न दिया गया हो. कॉन्सेप्ट के हिसाब से, इससे पता चलता है कि मौजूदा कोड कॉम्पोनेंट, Figma कॉम्पोनेंट के जैसे ही डिज़ाइन वैरिएंट के साथ काम कर सकता है.

अन्य निर्देश

उदाहरण के लिए, अगर आपको जिस कॉम्पोज़ेबल फ़ंक्शन को टारगेट करना है उसका यह सिग्नेचर है:

@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: यह यूज़र इंटरफ़ेस (यूआई) पैकेज के फ़ील्ड को कोड पैरामीटर से मैप करता है.
  • source: पैरामीटर का नाम, जैसा कि यूज़र इंटरफ़ेस (यूआई) पैकेज में बताया गया है.
  • target: टारगेट कोड कॉम्पोनेंट में बताए गए पैरामीटर का नाम.
• lambda: यह यूज़र इंटरफ़ेस (यूआई) पैकेज फ़ील्ड को कॉन्टेंट लैम्ब्डा पर मैप करता है.
  • source: पैरामीटर का नाम, जैसा कि यूज़र इंटरफ़ेस (यूआई) पैकेज में बताया गया है.
  • target: टारगेट कोड कॉम्पोनेंट में बताए गए पैरामीटर का नाम.

• modifier: यूज़र इंटरफ़ेस (यूआई) पैकेज के फ़ील्ड को बदलाव करने वाले तरीके से मैप करता है.

  • source: पैरामीटर का नाम, जैसा कि यूज़र इंटरफ़ेस (यूआई) पैकेज में बताया गया है.
  • method: मॉडिफ़ायर ऑब्जेक्ट पर मौजूद वह तरीका जिसे जनरेट किए गए कोड में शुरू किया जाना चाहिए.
  • parameter: दिए गए मॉडिफ़ायर तरीके में पैरामीटर का नाम.
  • library: मॉडिफ़ायर के तरीके को ऐक्सेस करने के लिए, इंपोर्ट किए जाने वाले पैकेज का नाम.
  • scope: मॉडिफ़ायर के दायरे को दिखाने के लिए, इनमें से कोई एक वैल्यू:
  • any: मॉडिफ़ायर का इस्तेमाल, पैसे पाने वाले व्यक्ति या कंपनी के किसी भी दायरे में किया जा सकता है.
  • relay: मॉडिफ़ायर का इस्तेमाल, रिले के RelayContainer ऑब्जेक्ट के रिसीवर स्कोप में किया जाना चाहिए.