विजेट्स के साथ बैक-ड्रिव्ड यूआई

उदाहरण

1. हस्तांतरण के लिए उपलब्ध खातों की सूची;
2. अनुवाद के प्रकार का नाम;
3. फ़ोन नंबर दर्ज करने के लिए फ़ील्ड (इसमें प्रवेश के लिए मास्क होता है और डिवाइस से संपर्क चुनने के लिए एक आइकन होता है);
4. हस्तांतरण राशि दर्ज करने के लिए फ़ील्ड।

विजेट अवधारणा

• , , «» , — UI- , .
• , , .
• , — : , , .

1. देखें वर्ग, जहां लेआउट लेआउट और सामग्री प्रदर्शित होती है;
   
   

   class TextInputFieldWidget @JvmOverloads constructor(
           context: Context,
           attrs: AttributeSet? = null
   ) : CoreFrameLayoutView(context, attrs) {
   @Inject
   lateinit var presenter: TextInputFieldPresenter
   …
   init {
        inflate(context, R.layout.view_field_text_input, this)
     }
   }
   

   
   
2. प्रस्तुतकर्ता के लिए एक वर्ग, जहाँ विजेट के मूल तर्क का वर्णन किया गया है, उदाहरण के लिए:
   
   
   1. डेटा लोड करना और रेंडर के लिए इसे ट्रांसमिट करना;
   2. विभिन्न घटनाओं की सदस्यता और विजेट इनपुट परिवर्तनों की घटनाओं का उत्सर्जन;
   
   

   @PerScreen
   class TextInputFieldPresenter @Inject constructor(
           basePresenterDependency: BasePresenterDependency,
           rxBus: RxBus
   ) : BaseInputFieldPresenter<TextInputFieldWidget>(
          basePresenterDependency, rxBus
   ) {
   private val sm = TextInputFieldScreenModel()
   ...
   }
   

   
   हमारे कार्यान्वयन में, RxBus वर्ग घटनाओं को भेजने और उनकी सदस्यता लेने के लिए पब्लिशसबजेक्ट आधारित बस है।
   
3. स्क्रीन मॉडल के लिए एक वर्ग, जिसकी मदद से प्रस्तुतकर्ता डेटा प्राप्त करता है और इसे एक दृश्य में प्रस्तुत करने के लिए स्थानांतरित करता है (प्रस्तुति मॉडल पैटर्न के संदर्भ में);
   
   

   class TextInputFieldScreenModel : ScreenModel() {
   	val value = String = “”
   	val hint = String = “”
   	val errorText = String = “”
   }
   

   
   
4. DI को लागू करने के लिए एक विन्यासकर्ता वर्ग, जिसकी सहायता से विजेट के लिए निर्भरताएँ वितरित की जाती हैं, जिनमें वांछित गुंजाइश होती है, और प्रस्तुतकर्ता को इसके दृश्य में इंजेक्ट किया जाता है।
   
   

   class TextInputFieldWidgetConfigurator : WidgetScreenConfigurator() {
   	// logic for components injection
   }
   

   
   

गतिशील विगेट्स का उपयोग करना

1. स्क्रीन प्रस्तुतकर्ता में, अनुवाद फॉर्म के लिए डेटा लोड किया गया है, डेटा को रेंडरिंग के लिए दृश्य में प्रेषित किया गया है। इस स्तर पर, यह हमारे लिए महत्वपूर्ण नहीं है कि गतिविधि स्क्रीन का दृश्य एक टुकड़ा या विजेट है या नहीं। हम केवल RecyclerView रखने और इसके साथ एक गतिशील रूप प्रदान करने में रुचि रखते हैं।
   
   

   // TransferFormPresenter
   private val sm = TransferFormScreenModel()
   …
   private fun loadData() {
   	loadDataDisposable.dispose()
     	loadDataDisposable = subscribe(
                 observerDataForTransfer().io(), 
                 { data -> 
                         sm.data = data
                         view.render(sm)
                 },
                 { error -> /* error handling */ }
     	)
    }
   

   
   
2. प्रपत्र डेटा को सूची एडाप्टर में स्थानांतरित किया जाता है और विजेट का उपयोग करके प्रदान किया जाता है जो प्रत्येक अद्वितीय फॉर्म तत्व के लिए व्यूहॉल्डर में हैं। घटक को प्रस्तुत करने के लिए वांछित ViewHolder पूर्वनिर्धारित प्रकार के घटकों के आधार पर निर्धारित किया जाता है।
   
   

   // TransferFormView
   fun render(sm: TransferFormScreenModel) {
       //      
       //   EasyAdapter [3]
       val list = ItemList.create()
       //       Controller,
       //       
   
       sm.data
           .filter { transferField -> transferField.visible }
           .forEach { transferField ->
               when (transferField.type) {
                   TransferFieldType.PHONE_INPUT -> {
                       list.add(
                           PhoneInputFieldData(transferField),
                           phoneInputController
                       )
                   }
                   TransferFieldType.MONEY -> {
                       list.add(
                           MoneyInputFieldData(transferField),
                           moneyInputController
                       )
                   }
                   TransferFieldType.BUTTON -> {
                       list.add(
                           ButtonInputFieldData(transferField),
                           buttonController
                       )
                   }
                   else -> {
                       list.add(
                           TextInputFieldData(transferField),
                           textInputController
                       )
                   }
               }
           }
           //     RecyclerView
           adapter.setItems(list)
   }  
   

   
   
3. विजेट ViewHolder की बाइंड विधि में आरंभीकृत है। रेंडर के लिए डेटा प्रसारित करने के अलावा, विजेट के लिए एक अद्वितीय आईडी सेट करना भी महत्वपूर्ण है, जिसके आधार पर इसका DI स्कोप बनेगा। हमारे मामले में, फॉर्म के प्रत्येक तत्व की एक अद्वितीय आईडी थी, जो इनपुट की नियुक्ति के लिए जिम्मेदार थी और तत्व के प्रकार के अलावा प्रतिक्रिया में आई (प्रकार को फार्म पर दोहराया जा सकता है)।
   
   

   // ViewHolder
   override fun bind(data: TransferFieldUi) {
   	// get initialize params from given data
   	itemView.findViewById(R.id.field_tif).initialize(...)
   }
   

   
   
4. प्रारंभिक विधि विजेट दृश्य डेटा को इनिशियलाइज़ करती है, जो फिर ऑनक्रीट लाइफ साइकल पद्धति का उपयोग करके प्रस्तुतकर्ता को प्रेषित की जाती है, जहाँ फ़ील्ड मान विजेट मॉडल और इसके रेंडर पर सेट होते हैं।
   
   

   // TextInputFieldWidget
   fun initialize(
          id: String = this.id,
          value: String = this.value,
          hint: String = this.hint,
          errorText: String = this.errorText
   ) {
          this.id = id
          this.value = value
          this.hint = hint
          this.errorText = errorText
   }
       
   override fun onCreate() {
          presenter.onCreate(value, hint, errorText)
          // other logic...
   }
   // TextInputFieldPresenter
   fun onCreate(value: String, hint: String, errorText: String) {
          sm.value = value
          sm.hint = hint
          sm.errorText = errorText
          view.render(sm)
   }
   

   
   

पानी के नीचे की चट्टानें

विगेट्स के जीवन चक्र पर विचार करें

// CoreFrameLayoutView (      ViewGroup)
public abstract class CoreFrameLayoutView
          extends FrameLayout implements CoreWidgetViewInterface {
…
@Override
protected void onAttachedToWindow() {
   super.onAttachedToWindow();
   if (!isManualInitEnabled) {
        widgetViewDelegate = createWidgetViewDelegate();
        widgetViewDelegate.onCreate();
   }
}

public void onCreate() {
    //empty. define in descendant class if needed
}

// WidgetViewDelegate
public class WidgetViewDelegate {
…
public void onCreate() {
   // other logic of widget initialization
   coreWidgetView.onCreate();
}

हमेशा श्रोताओं की सफाई करें

// TextInputFieldWidget
override fun onCreate() {
     initListeners()
}

override fun onDetachedFromWindow() {
      super.onDetachedFromWindow()
      clearListeners()
}

विजेट विजेट ईवेंट सदस्यता सही ढंग से

// TextInputFieldWidget
private val defaultTextChangedListener = object : OnMaskedValueChangedListener {
        override fun onValueChanged(value: String) {
            presenter.onTextChange(value, id)
        }
}

// Events.kt
sealed class InputValueType(val id: String)

class TextValue(id: String, val value: String) : InputValueType(id)

class DataEvent(val data: InputValueType)

// TextInputFieldPresenter -  
fun onTextChange(value: String, id: String) {
	rxBus.emitEvent(DataEvent(data = TextValue(id = id, value = value)))
}

// TransferFormPresenter -  
private fun subscribeToEvents() {
	subscribe(rxBus.observeEvents(DataEvent::class.java))
        {
            handleValue(it.data) // handle data
        }
}

private fun handleValue(value: InputValueType) {
	 val id = value.id
	 when (value) {
		 // handle event using its type, saving event value using its id
	 	 is TextValue -> {
       		 	 sm.fieldValuesMap[id] = value.value
       	 	 }
		 else -> {
			// handle other events
		 }
 	 }
}
// TransferScreenModel
class TransferScreenModel : ScreenModel() {
 	 // map for form values: key = input id
	 val fieldValuesMap: MutableMap<String, String> = mutableMapOf()
}

सभी आवश्यकताओं को एकजुट करें

• फ़ील्ड प्रकार। प्रत्येक क्षेत्र को उसके सही प्रदर्शन और प्रसंस्करण के लिए मोबाइल एप्लिकेशन द्वारा उम्मीद की जानी चाहिए।
• — , , , .
• , .
• . , : , , — , -, .

निष्कर्ष

उपयोगी कड़ियाँ

1. एंड्रॉइड एप्लिकेशन डेवलपमेंट फ्रेमवर्क सर्फ
2. विजेट मॉड्यूल
3. जटिल सूचियों के सरल रेंडर का हमारा कार्यान्वयन
4. प्रस्तुति मॉडेल पैटर्न