واجهة مستخدم تستند إلى الواجهة الخلفية مع عناصر واجهة المستخدم

حالة الاستخدام

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 عبارة عن ناقل يستند إلى PublishSubject لإرسال الأحداث والاشتراك فيها.
   
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 لكل عنصر نموذج فريد. يتم تحديد 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. يقوم أسلوب التهيئة بتهيئة بيانات عرض عنصر واجهة المستخدم ، والتي يتم إرسالها بعد ذلك إلى المقدم باستخدام طريقة دورة حياة onCreate ، حيث يتم تعيين قيم الحقول على نموذج عنصر واجهة المستخدم وعرضه.
   
   

   // 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. إطار تطوير تطبيقات Android Surf
2. وحدة القطعة
3. لدينا تنفيذ بسيطة تجعل من القوائم المعقدة
4. نموذج العرض التقديمي