Как реализовать проверку с использованием ViewModel и Databinding? - PullRequest
0 голосов
/ 17 сентября 2018

Каков наилучший подход для проверки данных формы с использованием ViewModel и привязки данных?

У меня есть простое действие по регистрации, связывающее макет привязки и ViewModel

class StartActivity : AppCompatActivity() {

    private lateinit var binding: StartActivityBinding
    private lateinit var viewModel: SignUpViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        viewModel = ViewModelProviders.of(this, SignUpViewModelFactory(AuthFirebase()))
                .get(SignUpViewModel::class.java);

        binding = DataBindingUtil.setContentView(this, R.layout.start_activity)
        binding.viewModel = viewModel;

        signUpButton.setOnClickListener {

        }
    }
}

ViewModel с4 ObservableFields и signUp() метод, который должен проверять данные перед отправкой данных на сервер.

class SignUpViewModel(val auth: Auth) : ViewModel() {
    val name: MutableLiveData<String> = MutableLiveData()
    val email: MutableLiveData<String> = MutableLiveData()
    val password: MutableLiveData<String> = MutableLiveData()
    val passwordConfirm: MutableLiveData<String> = MutableLiveData()

    fun signUp() {

        auth.createUser(email.value!!, password.value!!)
    }
}

Я полагаю, мы можем добавить четыре логических ObservableFields для каждого ввода, а в signUp() мы можем проверить входные данныеи измените состояние логического ObservableField, которое приведет к появлению ошибки в макете

val isNameError: ObservableField<Boolean> = ObservableField()


fun signUp() {

        if (name.value == null || name.value!!.length < 2 ) {
            isNameError.set(true)
        }

        auth.createUser(email.value!!, password.value!!)
    }

Но я не уверен, что ViewModel должен нести ответственность за проверку и отображение ошибки для пользователя, и у нас будет шаблонный код

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

        <import type="android.view.View" />

        <variable
            name="viewModel"
            type="com.maximdrobonoh.fitnessx.SignUpViewModel" />
    </data>

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorGreyDark"
        android:orientation="vertical"
        android:padding="24dp">

        <TextView
            android:id="@+id/appTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:text="@string/app_title"
            android:textColor="@color/colorWhite"
            android:textSize="12sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <LinearLayout
            android:id="@+id/screenTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:orientation="horizontal"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/appTitle">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="4dp"
                android:text="@string/sign"
                android:textColor="@color/colorWhite"
                android:textSize="26sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/up"
                android:textColor="@color/colorWhite"
                android:textSize="26sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/form"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:orientation="vertical"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/screenTitle">

            <android.support.v7.widget.AppCompatEditText
                style="@style/SignUp.InputBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/sign_up_name"
                android:inputType="textPersonName"
                android:text="@={viewModel.name}" />

            <android.support.v7.widget.AppCompatEditText
                style="@style/SignUp.InputBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/sign_up_email"
                android:inputType="textEmailAddress"
                android:text="@={viewModel.email}"
               />

            <android.support.v7.widget.AppCompatEditText
                style="@style/SignUp.InputBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/sign_up_password"
                android:inputType="textPassword"
                android:text="@={viewModel.password}" />

            <android.support.v7.widget.AppCompatEditText
                style="@style/SignUp.InputBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/sign_up_confirm_password"
                android:inputType="textPassword"
                android:text="@={viewModel.passwordConfirm}" />

            <Button
                android:id="@+id/signUpButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:background="@drawable/button_gradient"
                android:text="@string/sign_up_next_btn"
                android:textAllCaps="true"
                android:textColor="@color/colorBlack" />

        </LinearLayout>

    </android.support.constraint.ConstraintLayout>
</layout>

Ответы [ 5 ]

0 голосов
/ 18 августа 2019

Этот подход использует TextInputLayouts, пользовательский адаптер привязки, и создает перечисление для ошибок формы.Я думаю, что результат хорошо читается в xml и сохраняет всю логику проверки внутри ViewModel.

ViewModel:

class SignUpViewModel() : ViewModel() {

   val name: MutableLiveData<String> = MutableLiveData()
   // the rest of your fields as normal

   val formErrors = ObservableArrayList<FormErrors>()

   fun isFormValid(): Boolean {
      formErrors.clear()
      if (name.value?.isNullOrEmpty()) {
          formErrors.add(FormErrors.MISSING_NAME)
      }
      // all the other validation you require
      return formErrors.isEmpty()
   }

   fun signUp() {
      auth.createUser(email.value!!, password.value!!)
   }

   enum class FormErrors {
      MISSING_NAME,
      INVALID_EMAIL,
      INVALID_PASSWORD,
      PASSWORDS_NOT_MATCHING,
   }

}

BindingAdapter:

@BindingAdapter("app:errorText")
fun setErrorMessage(view: TextInputLayout, errorMessage: String) {
    view.error = errorMessage
}

XML:

<layout>

  <data>

        <import type="com.example.SignUpViewModel.FormErrors" />

        <variable
            name="viewModel"
            type="com.example.SignUpViewModel" />

  </data>

<!-- The rest of your layout file etc. -->

       <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/text_input_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:errorText='@{viewModel.formErrors.contains(FormErrors.MISSING_NAME) ? "Required" : ""}'>

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Name"
                android:text="@={viewModel.name}"/>

        </com.google.android.material.textfield.TextInputLayout>

<!-- Any other fields as above format -->

И затем ViewModel можно вызвать из действия / фрагмента, как показано ниже:

class YourActivity: AppCompatActivity() {

   val viewModel: SignUpViewModel
  // rest of class

  fun onFormSubmit() {
     if (viewModel.isFormValid()) {
        viewModel.signUp()
        // the rest of your logic to proceed to next screen etc.
     }
     // no need for else block if form invalid, as ViewModel, Observables
     // and databinding will take care of the UI
  }


}
0 голосов
/ 31 июля 2019

Я нашел несколько сообщений о реализации проверки формы с точки зрения компонентов архитектуры Android, и большинство решений: «добавьте свойство в вашу модель для каждого поля, которое вы редактируете, и добавьте еще одно свойство для каждой ошибки поля».В результате вы получите довольно шаблонный код, но зачем?Библиотека ViewModel предназначена для того, чтобы облегчить нашу жизнь, а не усложнить ее.

Если для проверки требуется доступ к представлению, чтобы показать ошибки, тосты и т. Д., Почему бы не оставить логику в представлении?ViewModel загружает данные и предоставляет их представлению, которое проверяет данные и передает обратно в ViewModel.Представление сохраняет состояние компонентов, таких как EditText по умолчанию, компонент просто должен иметь идентификаторы.Вы не потеряете сохраненное состояние при воссоздании Действия / Фрагмента, несмотря на то, что компоненты связаны, потому что сохраненное состояние имеет больший приоритет.

ViewModel.kt

data class User(
    val id: String,
    val firstName: String,
    val lastName: String
)

class MainVM : ViewModel() {
    val user: LiveData<User> = ...
    fun save(firstName: CharSequence, lastName: CharSequence) { ... }
}

ActivityMain.xml

...
  <EditText android:id="@+id/firstNameInput"
            android:text="@{model.user.firstName}"
            ... />

  <EditText android:id="@+id/lastNameInput"
            android:text="@{model.user.lastName}"
            ... />

  <Button android:onClick="onSaveButtonClick" ... />
...

MainActivity.kt

class MainActivity : AppCompatActivity() {
    private lateinit var model: MainVM
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        model = ViewModelProviders.of(this)[MainVM::class.java]

        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        binding.lifecycleOwner = this
        binding.model = model
    }

    fun onSaveButtonClick(button: View) {
        val firstName = binding.firstNameInput.text.trim()
        if (firstName.isBlank()) {
            binding.firstNameInput.error = getString(R.string.first_name_is_blank)
            return
        }

        val lastName = binding.lastNameInput.text.trim()
        if (lastName.isBlank()) {
            binding.lastNameInput.error = getString(R.string.last_name_is_blank)
            return
        }

        model.saveUser(firstName, lastName)
    }
}

Полный пример можно найти здесь .

0 голосов
/ 18 сентября 2018

Да, вы можете использовать свою логику проверки из ViewModel, потому что у вас есть наблюдаемые переменные из ViewModel и ваш xml также извлекает данные из ViewModel класс тоже.

Итак, Решение:

  • Вы можете создать @BindingAdapter в ViewModel и связать свой нажмите кнопку с ним. Проверьте свою валидацию там и сделайте некоторые другие также.

  • Вы можете создать Listener и реализовать его на ViewModel, чтобы получать щелчки от кнопки и привязывать этого слушателя к xml.

  • Вы можете использовать Двухстороннее связывание данных также (хотя учитывайте бесконечные циклы) .

    //Let's say it's your binding adapter from ViewModel
    fun signUp() {
       if (check validation logic) {
          // Produce errors
       }
       // Further successful stuffs
    }
    
0 голосов
/ 18 сентября 2018

Может быть много способов реализовать это. Я говорю вам о двух решениях, оба хорошо работают, вы можете использовать то, что вам подходит.

Я использую extends BaseObservable, потому что это проще, чем преобразовывать все поля в Observers. Вы также можете использовать ObservableFields.

Решение 1 (с использованием пользовательских BindingAdapter)

В xml

<variable
    name="model"
    type="sample.data.Model"/>

<EditText
    passwordValidator="@{model.password}"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@={model.password}"/>

Model.java

public class Model extends BaseObservable {
    private String password;

    @Bindable
    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
        notifyPropertyChanged(BR.password);
    }
}

DataBindingAdapter.java

public class DataBindingAdapter {
    @BindingAdapter("passwordValidator")
    public static void passwordValidator(EditText editText, String password) {
        // ignore infinite loops
        int minimumLength = 5;
        if (TextUtils.isEmpty(password)) {
            editText.setError(null);
            return;
        }
        if (editText.getText().toString().length() < minimumLength) {
            editText.setError("Password must be minimum " + minimumLength + " length");
        } else editText.setError(null);
    }
}

Решение 2 (с использованием пользовательских afterTextChanged)

В xml

<variable
    name="model"
    type="com.innovanathinklabs.sample.data.Model"/>

<variable
    name="handler"
    type="sample.activities.MainActivityHandler"/>

<EditText
    android:id="@+id/etPassword"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:afterTextChanged="@{(edible)->handler.passwordValidator(edible)}"
    android:text="@={model.password}"/>

MainActivityHandler.java

public class MainActivityHandler {
    ActivityMainBinding binding;

    public void setBinding(ActivityMainBinding binding) {
        this.binding = binding;
    }

    public void passwordValidator(Editable editable) {
        if (binding.etPassword == null) return;
        int minimumLength = 5;
        if (!TextUtils.isEmpty(editable.toString()) && editable.length() < minimumLength) {
            binding.etPassword.setError("Password must be minimum " + minimumLength + " length");
        } else {
            binding.etPassword.setError(null);
        }
    }
}

MainActivity.java

public class MainActivity extends AppCompatActivity {
    ActivityMainBinding binding;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        binding.setModel(new Model());
        MainActivityHandler handler = new MainActivityHandler();
        handler.setBinding(binding);
        binding.setHandler(handler);
    }
}

Обновление

Вы также можете заменить

android:afterTextChanged="@{(edible)->handler.passwordValidator(edible)}"

с

android:afterTextChanged="@{handler::passwordValidator}"

Поскольку параметры совпадают с android:afterTextChanged и passwordValidator.

0 голосов
/ 17 сентября 2018

То, что вы имеете в виду, на самом деле правильно.Модель представления не должна ничего знать о системе Android и будет работать только с чистым Java / Kotlin.Таким образом, делать то, о чем вы думаете, правильно.ViewModel не должен знать о системе Android, так как все представления должны обрабатываться в представлении.Но их свойства могут быть привязаны к виду.

TL; DR

Это будет работать

fun signUp() {

    if (name.value == null || name.value!!.length < 2 ) {
        isNameError.set(true)
    }

    auth.createUser(email.value!!, password.value!!)
}

Предложение

Я хотел бы предложить, если вы хотите углубиться, вы можете использовать пользовательские адаптеры привязки.Таким образом, вам:

  • не потребуются дополнительные переменные для вашей модели представления
  • имеет более чистую модель представления, так как обработка ошибок выполняется на адаптере привязки пользователя
  • было бы легче читать ваши представления XML, поскольку вы могли бы определить необходимые вам валидации

Я позволю вашему воображению испытать на себе то, как вы можете сделать так, чтобы пользовательский адаптер привязки имел только валидации.На данный момент лучше понять основы пользовательских адаптеров привязки. Приветствия

...