Automatic Binding
webforJ biedt verschillende functies die het configuratie- en automatische bindproces voor ontwikkelaars stroomlijnen. Deze sectie toont aan hoe je deze functies effectief kunt gebruiken.
Gebruik BindingContext.of
De BindingContext.of
methode bindt automatisch UI-componenten aan de eigenschappen van een opgegeven bean-klasse, waardoor het bindproces vereenvoudigd wordt en handmatige configuratie verminderd. Het legt bindbare componenten, die zijn verklaard als velden binnen een formulier of app, in lijn met bean-eigenschappen op basis van hun namen.
public class HeroRegistration extends App {
// Bindbare componenten
TextField name = new TextField("Text Field");
ComboBox power = new ComboBox("Power");
// ...
@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 en getters
}
UseProperty
annotatie
Gebruik de UseProperty
annotatie om de naam van de bean-eigenschap op te geven wanneer de naam van het UI-veld niet overeenkomt met de naam van de bean-eigenschap.
public class HeroRegistration extends App {
// Bindbare componenten
@UseProperty("name")
TextField nameField = new TextField("Text Field");
ComboBox power = new ComboBox("Power");
// ...
}
In het bovenstaande voorbeeld is de naam van het UI-veld nameField
, maar de bean-eigenschap is name
. Je kunt het UI-veld annoteren met de naam van de bean-eigenschap om een juiste binding te waarborgen.
BindingExclude
annotatie
Gebruik de BindingExclude
annotatie om een component uit te sluiten van automatische bindconfiguraties wanneer je deze handmatig wilt binden of helemaal wilt uitsluiten.
public class HeroRegistration extends App {
// Bindbare componenten
@UseProperty("name")
TextField nameField = new TextField("Text Field");
@BindingExclude
ComboBox power = new ComboBox("Power");
// ...
}
UseValidator
annotatie
Gebruik de UseValidator
annotatie om validators te declareren die extra validatieregels afdwingen tijdens binding. Validators worden toegepast in de volgorde waarin je ze opgeeft.
public class UserRegistration extends App {
@UseValidator(EmailValidator.class)
TextField email = new TextField("Email Address");
}
UseTransformer
annotatie
Gebruik de UseTransformer
annotatie om een transformerklasse direct op een UI-veld te declareren. De BindingContext
past automatisch de opgegeven transformer toe.
public class UserRegistration extends App {
@UseProperty("date")
@UseTransformer(DateTransformer.class)
DateField dateField = new DateField("Date Field");
}
BindingReadOnly
annotatie
Gebruik de BindingReadOnly
om een binding als alleen-lezen te markeren.
public class UserRegistration extends App {
@BindingReadOnly
TextField IDField = new TextField("User ID");
}
BindingRequired
annotatie
Gebruik de BindingRequired
om een binding als vereist te markeren. Zie ook vereiste binddetecties.
public class UserRegistration extends App {
@BindingRequired
TextField emailField = new TextField("User Email");
}
Gegevens automatisch schrijven
Om de responsiviteit en dynamiek van applicaties te verbeteren, kun je de observe
methode gebruiken. Deze methode zorgt ervoor dat wijzigingen in UI-componenten onmiddellijk worden doorgegeven aan het datamodel. Het is bijzonder nuttig wanneer je continue synchronisatie tussen het datamodel en de UI nodig hebt.
De observe
methode registreert een ValueChangeEvent
listener op alle bindings in de context om wijzigingen van de gebruiker te monitoren, waarna het deze wijzigingen onmiddellijk naar de gebonden eigenschappen van het model schrijft als ze geldig zijn. Wanneer je deze methode voor het eerst aanroept, worden de bean-eigenschappen weerspiegeld in de UI-componenten.
Hier is een voorbeeld van hoe je observe
gebruikt:
Hero bean = new Hero("Superman", "Fly");
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()) {
// Neem actie met de bean.
}
});
Deze automatische binding is unidirectioneel; updates worden weerspiegeld in het model wanneer je UI-componenten bijwerkt, maar wijzigingen in het model worden alleen eenmaal in de UI-componenten weerspiegeld, wanneer je de methode voor het eerst aanroept.
Hoewel observe
de interactie van applicaties verhoogt, is het belangrijk om het verstandig te gebruiken:
- Prestatie-impact: Frequent updates kunnen de prestaties beïnvloeden, vooral met complexe modellen of trage backend-services.
- Gebruikerservaring: Automatische updates mogen de gebruiker niet verstoren bij het comfortabel invoeren van gegevens.
Vereiste binddetecties
Wanneer je een binding als vereist markeert, markeert dit de component als vereist, mits de component deze staat ondersteunt via de RequiredAware
interface. De binding handhaaft deze staat niet zelf, maar stelt het in op de component wanneer van toepassing.
BindingContext<User> context = new BindingContext<>(User.class, true);
context
.bind(emailField, "email")
.required()
.add()
Wanneer je gebruikmaakt van Jakarta-annotaties, kan de binding automatisch de vereiste staat detecteren op basis van de aanwezigheid van een van de volgende annotaties op bean-eigenschappen:
@NotNull
@NotEmpty
@NotBlank
@Size