Tech and Sports Make the World Go Round

Errai Data Binding

Integrated with Errai UI is Errai Data Binding which provides the ability to bind model objects to fields and widgets. This relieves the developer from manually having to set data from the widget and the model object. Data Binding is enabled by adding the following to the ErraiMath.gwt.xml:

<inherits name="org.jboss.errai.databinding.DataBinding" />

Model objects become eligible for Data Binding by adding the @Bindable annotation. In the application, a MathRequest represents the text boxes used for data entry and is annotated with the @Bindable annotation. If we had a model object which could not be annotated, such as objects in third party packages, we can set the errai.ui.bindableTypes property in the ErraiApp.properties file with the fully qualified class name. Once an object is configured to be bound, an instance of DataBinder is created in the CalculationStatisticsWidget class as shown below:

@Inject
@AutoBound
DataBinder<MathRequest> request;

The @AutoBound annotation signifies that automatic binding will take place.

Finally, to bind the model object to an individual component, the @Bound annotation is applied.

@Inject
@Bound
@DataField
private TextBox lhs;

Property names will match both the @DataField and the @Bound model. A different name can also be specified within the annotation such as @Bound(“leftHandSide”)

With the configuration for the Data Binding now complete, our application is able to send the values entered into the input fields to the Restful service. To obtain the values of the lhs and rhs textboxes, the application uses the following commands within the MathErraiUiForm:

request.getModel().getLhs()
request.getModel().getRhs()

By now, you should be familiar with some of the key components within Errai. While we have given an overview of features such as CDI and support for JAX-RS, additional components such as RPC services and JPA support are part of the framework. Feel free to review the latest documentation to learn about all of these features. To experience the full functionality of this application, simultaneously navigate to the application using multiple browsers or multiple tabs within the same browser. Any submission will result in the calculations scoreboard to update on all sessions. Any request on the exposed JAX-RS endpoint will also result in the calculations scoreboard to update. Ultimately, it is the hope that this application can be used as a starting point to build powerful web applications of your own built on the Errai framework.