Backend-gesteuerte Benutzeroberfläche mit Widgets

Anwendungsfall

1. Liste der zur Übertragung verfügbaren Konten;
2. Der Name der Art der Übersetzung;
3. Feld zur Eingabe einer Telefonnummer (es hat eine Maske zur Eingabe und ein Symbol zur Auswahl von Kontakten vom Gerät);
4. Feld zur Eingabe des Überweisungsbetrags.

Widget-Konzept

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

1. Ansichtsklasse, in der das Layoutlayout und die Inhaltsanzeige erfolgen;
   
   

   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. Eine Klasse für den Präsentator, in der die Grundlogik des Widgets beschrieben wird, zum Beispiel:
   
   
   1. Laden und Übertragen von Daten für ein Rendering;
   2. Abonnieren verschiedener Ereignisse und Ausgeben von Ereignissen bei Änderungen der Widget-Eingabe;
   
   

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

   
   In unserer Implementierung ist die RxBus-Klasse ein PublishSubject-basierter Bus zum Senden und Abonnieren von Ereignissen.
   
3. Eine Klasse für das Bildschirmmodell, mit deren Hilfe der Präsentator Daten empfängt und zum Rendern in einer Ansicht überträgt (in Bezug auf das Präsentationsmodellmuster);
   
   

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

   
   
4. Eine Konfiguratorklasse zum Implementieren von DI, mit deren Hilfe Abhängigkeiten für das Widget bereitgestellt werden, die den gewünschten Bereich haben, und der Präsentator in seine Ansicht eingefügt wird.
   
   

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

   
   

Dynamische Widgets verwenden

1. In der Bildschirmdarstellung werden die Daten für das Übersetzungsformular geladen, die Daten werden zum Rendern an die Ansicht übertragen. In diesem Stadium spielt es für uns keine Rolle, ob die Ansicht des Aktivitätsbildschirms ein Fragment oder ein Widget ist. Wir sind nur daran interessiert, RecyclerView zu haben und damit ein dynamisches Formular zu rendern.
   
   

   // 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. Formulardaten werden an den Listenadapter übertragen und mithilfe von Widgets gerendert, die sich im ViewHolder für jedes eindeutige Formularelement befinden. Der gewünschte ViewHolder zum Rendern der Komponente wird basierend auf vordefinierten Typen von Formularkomponenten bestimmt.
   
   

   // 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. Das Widget wird in der Bindemethode von ViewHolder initialisiert. Neben der Übertragung von Daten für das Rendern ist es auch wichtig, eine eindeutige ID für das Widget festzulegen, auf deren Grundlage der DI-Bereich gebildet wird. In unserem Fall hatte jedes Element des Formulars eine eindeutige ID, die für die Ernennung der Eingabe verantwortlich war und zusätzlich zum Elementtyp als Antwort kam (Typen können im Formular wiederholt werden).
   
   

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

   
   
4. Die Initialisierungsmethode initialisiert die Widget-Ansichtsdaten, die dann mithilfe der onCreate-Lebenszyklusmethode an den Präsentator übertragen werden, wobei die Feldwerte auf das Widget-Modell und dessen Rendering festgelegt werden.
   
   

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

   
   

Unterwasserfelsen

Betrachten Sie den Lebenszyklus von 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();
}

Reinigen Sie immer die Zuhörer

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

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

Behandeln Sie Widget-Ereignisabonnements korrekt

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

Vereinheitlichen Sie alle Anforderungen

• Feldtypen. Jedes Feld sollte von der mobilen Anwendung für seine korrekte Anzeige und Verarbeitung erwartet werden.
• — , , , .
• , .
• . , : , , — , -, .

Fazit

Nützliche Links

1. Android-Anwendungsentwicklungs- Framework Surf
2. Widget-Modul
3. Unsere Implementierung des einfachen Renderns komplexer Listen
4. PresentationModel-Muster