Interfaz de usuario basada en backend con widgets

Caso de uso

1. Lista de cuentas disponibles para transferir;
2. El nombre del tipo de traducción;
3. Campo para ingresar un número de teléfono (tiene una máscara para ingresar y contiene un icono para seleccionar contactos desde el dispositivo);
4. Campo para ingresar el monto de la transferencia.

Concepto de widget

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

1. Ver clase, donde se produce el diseño del diseño y la visualización del contenido;
   
   

   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. Una clase para el presentador, donde se describe la lógica básica del widget, por ejemplo:
   
   
   1. cargar datos y transmitirlos para un render;
   2. Suscribirse a varios eventos y emitir eventos de cambios de entrada de widget;
   
   

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

   
   En nuestra implementación, la clase RxBus es un bus basado en PublishSubject para enviar eventos y suscribirse a ellos.
   
3. Una clase para el modelo de pantalla, con la ayuda de la cual el presentador recibe datos y los transfiere para representarlos en una vista (en términos del patrón del Modelo de presentación);
   
   

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

   
   
4. Una clase de configurador para implementar DI, con la ayuda de qué dependencias para el widget se entregan que tienen el alcance deseado, y el presentador se inyecta en su vista.
   
   

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

   
   

Usando widgets dinámicos

1. En el presentador de pantalla, se cargan los datos para el formulario de traducción, los datos se transmiten a la vista para su representación. En esta etapa, no nos importa si la vista de la pantalla de actividad es un fragmento o un widget. Solo estamos interesados ​​en tener RecyclerView y renderizar un formulario dinámico con él.
   
   

   // 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. Los datos del formulario se transfieren al adaptador de lista y se procesan utilizando widgets que se encuentran en ViewHolder para cada elemento de formulario único. El ViewHolder deseado para representar el componente se determina en función de los tipos predefinidos de componentes de formulario.
   
   

   // 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. El widget se inicializa en el método de enlace de ViewHolder. Además de transmitir datos para el render, también es importante establecer una identificación única para el widget, sobre la base de la cual se formará su alcance DI. En nuestro caso, cada elemento del formulario tenía una identificación única, que era responsable de la designación de entrada y respondía además del tipo de elemento (los tipos se pueden repetir en el formulario).
   
   

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

   
   
4. El método initialize inicializa los datos de la vista del widget, que luego se transmiten al presentador utilizando el método del ciclo de vida onCreate, donde los valores de campo se establecen para el modelo del widget y su representación.
   
   

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

   
   

Rocas bajo el agua

Considere el ciclo de vida de los widgets

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

Siempre limpia a los oyentes

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

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

Manejar suscripciones de eventos de widget correctamente

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

Unificar todos los requisitos

• Tipos de campo La aplicación móvil debe esperar cada campo para su visualización y procesamiento correctos.
• — , , , .
• , .
• . , : , , — , -, .

Conclusión

Enlaces útiles

1. Marco de desarrollo de aplicaciones de Android Surf
2. Módulo de widgets
3. Nuestra implementación de render simple de listas complejas
4. Presentación Patrón de modelo