Saltar al contenido principal

Automatic Binding

Abrir en ChatGPT

webforJ ofrece varias características que simplifican el proceso de configuración y enlace automático para los desarrolladores. Esta sección demuestra cómo utilizar estas características de manera efectiva.

Usando BindingContext.of

El método BindingContext.of vincula automáticamente los componentes de la interfaz de usuario a las propiedades de una clase bean especificada, simplificando el proceso de vinculación y reduciendo la configuración manual. Alinea los componentes vinculables, declarados como campos dentro de un formulario o aplicación, con las propiedades del bean según sus nombres.

public class HeroRegistration extends App {
// Componentes vinculables
TextField name = new TextField("Campo de texto");
ComboBox power = new ComboBox("Poder");

// ...

@Override
public void run() throws WebforjException {
BindingContext<Hero> context = BindingContext.of(this, Hero.class, true);
// ...
}
}
public class Hero {
private String name;
private String power;

// Setters y getters
}

Anotación UseProperty

Cuando desees vincular una propiedad de bean a un componente de interfaz de usuario que tenga un nombre diferente, utiliza la anotación UseProperty. Esta anotación proporciona mayor precisión al vincular propiedades de bean a componentes de interfaz de usuario, especialmente cuando trabajas con propiedades de bean anidadas.

public class HeroRegistration extends App {
// Vincula a la propiedad name
@UseProperty("name")
TextField nameField = new TextField("Nombre");

// Vincula a la propiedad anidada address.street
@UseProperty("address.street")
TextField streetField = new TextField("Calle");

// Vincula a la propiedad power
ComboBox power = new ComboBox("Poder");

// ...
}

Anotación BindingExclude

Utiliza la anotación BindingExclude para excluir un componente de las configuraciones de vinculación automática cuando prefieras vincularlo manualmente o excluirlo por completo.

public class HeroRegistration extends App {
// Componentes vinculables
@UseProperty("name")
TextField nameField = new TextField("Campo de texto");

@BindingExclude
ComboBox power = new ComboBox("Poder");

// ...
}

Anotación UseValidator

Utiliza la anotación UseValidator para declarar validadores que imponen reglas de validación adicionales durante la vinculación. Los validadores se aplican en el orden en que los especifiques.

public class UserRegistration extends App {

@UseValidator(EmailValidator.class)
TextField email = new TextField("Dirección de correo electrónico");
}

Anotación UseTransformer

Utiliza la anotación UseTransformer para declarar una clase transformadora directamente en un campo de interfaz de usuario. El BindingContext aplica automáticamente el transformador especificado.

public class UserRegistration extends App {

@UseProperty("date")
@UseTransformer(DateTransformer.class)
DateField dateField = new DateField("Campo de fecha");
}

Anotación BindingReadOnly

Utiliza BindingReadOnly para marcar un enlace como solo lectura.

public class UserRegistration extends App {

@BindingReadOnly
TextField IDField = new TextField("ID de usuario");
}

Anotación BindingRequired

Utiliza BindingRequired para marcar un enlace como requerido. Consulta también detecciones de enlace requeridas.

public class UserRegistration extends App {

@BindingRequired
TextField emailField = new TextField("Correo electrónico del usuario");
}

Escribiendo datos automáticamente

Para mejorar la capacidad de respuesta y dinamismo de las aplicaciones, puedes utilizar el método observe. Este método asegura que los cambios en los componentes de la interfaz de usuario se propaguen inmediatamente al modelo de datos. Es especialmente útil cuando necesitas una sincronización continua entre el modelo de datos y la interfaz de usuario.

El método observe registra un oyente de ValueChangeEvent en todos los enlaces en el contexto para monitorear los cambios realizados por el usuario y, luego, escribe instantáneamente estos cambios en las propiedades vinculadas del modelo si son válidos. Cuando invocas este método por primera vez, refleja las propiedades del bean en los componentes de la interfaz de usuario.

Aquí tienes un ejemplo de cómo utilizar observe:

Hero bean = new Hero("Superman", "Volador");
BindingContext<Hero> context = BindingContext.of(this, Hero.class, true);
context.observe(bean);
context.onValidate(e -> {
submit.setEnabled(e.isValid());
});

submit.onClick(e -> {
ValidationResult results = context.validate();
if (results.isValid()) {
// Toma acción con el bean.
}
});
Dirección de actualización

Este enlace automático es unidireccional; las actualizaciones se reflejan en el modelo cuando actualizas los componentes de la interfaz de usuario, pero los cambios en el modelo solo se reflejan en los componentes de la interfaz de usuario una vez, cuando invocas el método por primera vez.

Consideraciones

Si bien observe aumenta la interactividad de las aplicaciones, es importante usarlo con juicio:

  • Impacto en el rendimiento: Actualizaciones frecuentes pueden afectar el rendimiento, especialmente con modelos complejos o servicios de backend lentos.
  • Experiencia del usuario: Las actualizaciones automáticas no deben interrumpir la capacidad del usuario para ingresar datos cómodamente.

Detecciones de enlace requeridas

Cuando marcas un enlace como requerido, marca el componente como requerido, siempre que el componente admita este estado a través de la interfaz RequiredAware. El enlace no impone este estado por sí mismo, sino que lo establece en el componente cuando es aplicable.

BindingContext<User> context = new BindingContext<>(User.class, true);
context
.bind(emailField, "email")
.required()
.add()

Al utilizar anotaciones de Jakarta, el enlace puede detectar automáticamente el estado requerido según la presencia de alguna de las siguientes anotaciones en las propiedades del bean:

  1. @NotNull
  2. @NotEmpty
  3. @NotBlank
  4. @Size