UI Backend-Driven dengan widget

Gunakan kasing

1. Daftar akun yang tersedia untuk ditransfer;
2. Nama jenis terjemahan;
3. Bidang untuk memasukkan nomor telepon (memiliki topeng untuk memasukkan dan berisi ikon untuk memilih kontak dari perangkat);
4. Bidang untuk memasukkan jumlah transfer.

Konsep widget

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

1. Lihat kelas, tempat tata letak tata letak dan menampilkan konten terjadi;
   
   

   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. Kelas untuk presenter, di mana logika dasar widget dijelaskan, misalnya:
   
   
   1. memuat data dan mengirimkannya untuk render;
   2. Berlangganan berbagai acara dan memancarkan acara perubahan input widget;
   
   

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

   
   Dalam implementasi kami, kelas RxBus adalah bus berbasis PublishSubject untuk mengirim acara dan berlangganan.
   
3. Kelas untuk model layar, dengan bantuan yang presenter menerima data dan mentransfernya untuk rendering dalam tampilan (dalam hal pola Model Presentasi);
   
   

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

   
   
4. Kelas konfigurator untuk mengimplementasikan DI, dengan bantuan dependensi widget yang memiliki cakupan yang diinginkan, dan presenter disuntikkan ke dalam pandangannya.
   
   

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

   
   

Menggunakan widget dinamis

1. Di presenter layar, data untuk formulir terjemahan dimuat, data ditransmisikan ke tampilan untuk rendering. Pada tahap ini, tidak masalah bagi kami apakah tampilan layar aktivitas adalah fragmen atau widget. Kami hanya tertarik memiliki RecyclerView dan merender bentuk dinamis dengannya.
   
   

   // 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. Data formulir ditransfer ke adaptor daftar dan diterjemahkan menggunakan widget yang ada di ViewHolder untuk setiap elemen formulir unik. ViewHolder yang diinginkan untuk rendering komponen ditentukan berdasarkan tipe komponen form yang telah ditentukan.
   
   

   // 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. Widget diinisialisasi dalam metode mengikat ViewHolder. Selain mentransmisikan data untuk render, penting juga untuk menetapkan id unik untuk widget, atas dasar di mana ruang lingkup DI-nya akan dibentuk. Dalam kasus kami, setiap elemen formulir memiliki id unik, yang bertanggung jawab untuk pengangkatan input dan datang sebagai respons selain jenis elemen (jenis dapat diulang pada formulir).
   
   

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

   
   
4. Metode inisialisasi menginisialisasi data tampilan widget, yang kemudian dikirim ke presenter menggunakan metode siklus hidup onCreate, di mana nilai-nilai bidang diatur ke model widget dan render-nya.
   
   

   // 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)
   }
   

   
   

Batuan bawah laut

Pertimbangkan siklus hidup widget

// 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();
}

Selalu bersihkan pendengarnya

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

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

Tangani langganan acara widget dengan benar

// 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()
}

Unify All Requirements

• Jenis bidang. Setiap bidang harus diharapkan oleh aplikasi seluler untuk tampilan dan pemrosesan yang benar.
• — , , , .
• , .
• . , : , , — , -, .

Kesimpulan

tautan yang bermanfaat

1. Kerangka pengembangan aplikasi Android Surf
2. Modul widget
3. Implementasi kami dalam membuat daftar sederhana yang rumit
4. Pola PresentationModel