Exploring the Errai Framework

Posted: April 11th, 2013 | Author: | Filed under: Technology | Tags: , , , | No Comments »

Errai UI

When developing GWT applications, there are typically two approaches when designing individual pages: adding components directly to the canvas, or using UIBinder declarative markup. Errai adds another option by featuring a templating engine which allows for the creation of components using straight HTML5. These components are similar to custom GWT components as they extend the Composite class, but leverage HTML5 for the markup. To enable Errai UI to an application, the following was added to the MathErrai.gwt.xml file:

<inherits name="org.jboss.errai.ui.UI" />

While you are free to add the markup to the host page (ErraiMath.html), my preference is to keep this page as clean as possible as to not limit the potential of the application. The template file utilized in the application is found in the MathErraiUiForm.html in the com.redhat.errai.math.client.local package. Errai takes advantage of the HTML5 custom data attribute where any component which needs to be referenced from a template utilizes the data-field attribute within the markup as follows:

<div data-field="mathPanel">

To display a template within the div above, we annotated the Java class MathErraiUiForm with the @Templated annotation. Since we are targeting a specific DOM element, we specify the name of the component in our annotation as such:

@Templated("#mathPanel")
public class MathErraiUiForm extends Composite {

Looking back at our requirements of the application, we want to be able to specify the type of operation, allow for input by the user and display the executions in a scoreboard component. Errai UI makes it easy to build a page quickly because the end result is a basic HTML markup. Similar to the template described earlier, all that is needed to allow the Java class to access to components is to add the data-field attribute to each element. For example, one of the input TextBoxes was configured on the HTML page with the following:

<input data-field="lhs" id="lhs" type="number" required="required" placeholder="Enter Value"/>

To reference the component in the Java class, we inject it as follows:

@Inject
@DataField
TextBox lhs;

We are also not limited to injecting only basic form components. To demonstrate we can utilize the full power of the GWT toolkit, the calculation scoreboard was built using GWT UiBinder. To reference the calculation scoreboard in the mathPanel Errai UI template, the following div component with the required data-field attribute was added:

<div data-field="calculationStatisticsWidget">Calculation Statistics Table</div>

Similar to the TextBox example from above, we inject the component into our Java class:

@Inject
@DataField
CalculationStatisticsWidget calculationStatisticsWidget;

Finally, Errai UI provides event handling mechanisms by wiring methods annotated with the @EventHandler annotation. This is demonstrated in the MathErraiUiForm class to respond when a user changes the value of the operation ListBox.

@EventHandler("operations")
void onOperationChange(ChangeEvent e)

This coding model is similar to GWT’s UiHandler annotation within UiBinder.

1 2 3 4 5

Leave a Reply