Interface do usuário orientada a back-end com widgets

Caso de uso

1. Lista de contas disponíveis para transferência;
2. O nome do tipo de tradução;
3. Campo para inserir um número de telefone (possui uma máscara para inserir e contém um ícone para selecionar contatos do dispositivo);
4. Campo para inserir o valor da transferência.

Conceito de widget

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

1. Visualizar classe, onde ocorre o layout do layout e a exibição do conteúdo;
   
   

   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. Uma classe para o apresentador, onde a lógica básica do widget é descrita, por exemplo:
   
   
   1. carregar dados e transmiti-los para uma renderização;
   2. Assinando vários eventos e emitindo eventos de alterações na entrada do widget;
   
   

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

   
   Em nossa implementação, a classe RxBus é um barramento PublishSubject para enviar eventos e se inscrever neles.
   
3. Uma classe para o modelo de tela, com a ajuda da qual o apresentador recebe dados e os transfere para renderização em uma exibição (em termos do padrão Modelo de Apresentação);
   
   

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

   
   
4. Uma classe de configurador para implementar DI, com a ajuda de quais dependências para o widget são entregues com o escopo desejado e o apresentador é injetado em sua visualização.
   
   

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

   
   

Usando widgets dinâmicos

1. No apresentador de tela, os dados para o formulário de conversão são carregados, os dados são transmitidos para a visualização para renderização. Nesse estágio, não importa se a exibição da tela de atividades é um fragmento ou widget. Estamos interessados ​​apenas em ter o RecyclerView e renderizar um formulário dinâmico com ele.
   
   

   // 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. Os dados do formulário são transferidos para o adaptador de lista e renderizados usando widgets que estão no ViewHolder para cada elemento de formulário exclusivo. O ViewHolder desejado para renderizar o componente é determinado com base em tipos predefinidos de componentes do formulário.
   
   

   // 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. O widget é inicializado no método de ligação do ViewHolder. Além de transmitir dados para a renderização, também é importante definir um ID exclusivo para o widget, com base no qual seu escopo de DI será formado. No nosso caso, cada elemento do formulário tinha um ID exclusivo, responsável pela nomeação da entrada e veio em resposta além do tipo de elemento (os tipos podem ser repetidos no formulário).
   
   

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

   
   
4. O método initialize inicializa os dados de exibição do widget, que são transmitidos ao apresentador usando o método de ciclo de vida onCreate, onde os valores do campo são definidos para o modelo do widget e sua renderização.
   
   

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

   
   

Rochas subaquáticas

Considere o ciclo de vida dos 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();
}

Sempre limpe os ouvintes

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

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

Manipular assinaturas de eventos de widget corretamente

// 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 os requisitos

• Tipos de campo. Cada campo deve ser esperado pelo aplicativo móvel para sua exibição e processamento corretos.
• — , , , .
• , .
• . , : , , — , -, .

Conclusão

Links Úteis

1. Estrutura de desenvolvimento de aplicativos Android Surf
2. Módulo de widget
3. Nossa implementação de renderização simples de listas complexas
4. Modelo de apresentação