Interface utilisateur pilotée par le backend avec des widgets

Cas d'utilisation

1. Liste des comptes disponibles pour le transfert;
2. Le nom du type de traduction;
3. Champ pour entrer un numéro de téléphone (il a un masque pour entrer et contient une icône pour sélectionner les contacts de l'appareil);
4. Champ de saisie du montant du virement.

Concept de widget

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

1. Afficher la classe, où la mise en page et l'affichage du contenu se produisent;
   
   

   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. Une classe pour le présentateur, où la logique de base du widget est décrite, par exemple:
   
   
   1. charger des données et les transmettre pour un rendu;
   2. Abonnement à divers événements et émission d'événements de modifications d'entrée de widget;
   
   

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

   
   Dans notre implémentation, la classe RxBus est un bus basé sur PublishSubject pour envoyer des événements et s'y abonner.
   
3. Une classe pour le modèle d'écran, à l'aide de laquelle le présentateur reçoit des données et les transfère pour le rendu dans une vue (en termes de modèle de modèle de présentation);
   
   

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

   
   
4. Une classe de configurateur pour implémenter DI, à l'aide de laquelle sont fournies les dépendances pour le widget qui ont la portée souhaitée, et le présentateur est injecté dans sa vue.
   
   

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

   
   

Utilisation de widgets dynamiques

1. Dans le présentateur d'écran, les données du formulaire de traduction sont chargées, les données sont transmises à la vue pour le rendu. À ce stade, peu importe que la vue de l'écran d'activité soit un fragment ou un widget. Nous voulons seulement avoir RecyclerView et rendre un formulaire dynamique avec.
   
   

   // 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. Les données de formulaire sont transférées vers l'adaptateur de liste et rendues à l'aide de widgets qui se trouvent dans le ViewHolder pour chaque élément de formulaire unique. Le ViewHolder souhaité pour le rendu du composant est déterminé en fonction de types prédéfinis de composants de formulaire.
   
   

   // 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. Le widget est initialisé dans la méthode de liaison de ViewHolder. En plus de transmettre des données pour le rendu, il est également important de définir un identifiant unique pour le widget, sur la base duquel sa portée DI sera formée. Dans notre cas, chaque élément du formulaire avait un identifiant unique, qui était responsable de la nomination de l'entrée et est venu en réponse en plus du type d'élément (les types peuvent être répétés sur le formulaire).
   
   

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

   
   
4. La méthode d'initialisation initialise les données de vue de widget, qui sont ensuite transmises au présentateur à l'aide de la méthode de cycle de vie onCreate, où les valeurs de champ sont définies sur le modèle de widget et son rendu.
   
   

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

   
   

Roches sous-marines

Tenez compte du cycle de vie des 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();
}

Nettoyez toujours les auditeurs

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

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

Gérer correctement les abonnements aux événements de widget

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

Unifier toutes les exigences

• Types de champs. Chaque champ doit être attendu par l'application mobile pour son affichage et son traitement corrects.
• — , , , .
• , .
• . , : , , — , -, .

Conclusion

Liens utiles

1. Cadre de développement d'applications Android Surf
2. Module Widget
3. Notre implémentation de rendu simple de listes complexes
4. PrésentationModèle de modèle