Fork me on GitHub


Errai: Type-safe web apps in pure Java


Errai Icon


Flexible HTML5 Templating







Simple DOM Element Injection and Binding


@Templated @Page
public class CustomerForm extends Composite {

  @Inject @DataField TextBox name;
  @Inject @DataField TextBox phone;
  @Inject @DataField Button saveButton;

  @EventHandler("saveButton")
  public void onSave(ClickEvent event) {
    ...
  }
}

            


Bidirectional Model ↔ UI Binding


@Templated @Page
public class CustomerForm extends Composite {
  @Inject @Model Customer customer;
  @Inject @Bound @DataField TextBox name;
  @Inject @Bound @DataField TextBox phone;
  @Inject @DataField Button saveButton;

  @EventHandler("saveButton")
  public void onSave(ClickEvent event) {
    //customer already reflects form contents (two-way data binding)
    sendCustomerToServer(customer);
  }
}
            


Choice of JAX-RS or Bus RPC


@Path("/customers")
public interface CustomerEndpoint {
  @GET
  public long create(Customer customer);  
}

or

@Remote
public interface CustomerEndpoint {  
  public long create(Customer customer);  
}

            


Typesafe RPC Client


@Templated @Page
public class CustomerForm extends Composite {

  @Inject 
  Caller<CustomerEndpoint> customerEndpoint;

  private void sendCustomerToServer(Customer customer) { 
     RemoteCallback remoteCallback = ...     
     customerEndpoint.call(remoteCallback).create(customer);
  }
}
            


Bookmarkable Page Navigation




  @Templated
  public class MainMenu extends Composite {

    @Inject @DataField 
    private TransitionAnchor<CustomerForm> customerForm;
    ...
  }


            

Typesafe Distributed Events

@Stateless
public class CustomerEndpointImpl implements CustomerEndpoint {
  @Inject @New 
  private Event<Customer> customerEvent;

  public long create(Customer customer) {
    // fire an event on the server
    customerEvent.fire(customer); 
  }
}

@Templated
public class CustomerList extends Composite {
  // and simply observe the event on the client
  private void onNewCustomer(@Observes @New Customer customer) {...}
}
            


Integrated with Mobile hardware



@Templated @Page
public class CustomerForm extends Composite {

  @Inject 
  private Camera camera;

  private void onBatteryLow(@Observes BatteryLowEvent event) {
     ...
  }
}
            


Client-side JPA For Offline Storage


@Templated @Page
public class CustomerForm extends Composite {

  @Inject 
  private EntityManager em;

  public void save(Customer customer) {
    em.merge(customer);
    em.flush();
  }
}
            

Build your next generation web app now!

Download Now
HTML5 templates

HTML5 Templates

Create standard-conform HTML5 templates or use existing HTML and CSS files to design your applications. Cleanly separate layout and logic.

Share Code

Shared Code

Share code between the client and the server. Reuse your data model, validation and business logic in the browser. Don't repeat yourself!

Boilerplate-free

Boilerplate-free API

Leverage Errai's typesafe and declarative programming model. It's simple and powerful. No browser plugin required. Errai is based on GWT.

Open Source

Open Source

Join the Errai open source community! Errai is developed under the Apache License, Version 2.0.

Latest Releases
4.3.3.Final
Requires GWT 2.8.2 and targets Java EE7 (i.e. Wildfly 11+)

Latest major release of Errai
Recommended for new projects

Source | Binaries | Forums | Docs

4.2.3.Final
Requires GWT 2.8.2 and targets Java EE7 (i.e. Wildfly 11+)

Latest 4.2.x release of Errai

Source | Binaries | Forums | Docs


3.2.5.Final
Requires GWT 2.7+ and targets Java EE6 (i.e. Wildfly 8+)

Latest 3.x release of Errai
Upgrade any older production systems to this release

Source | Binaries | Forums | Docs

4.3.2-SNAPSHOT

Live on the bleeding edge with up-to-the-minute features and fixes delivered continuously.

Source | Binaries | Known Issues | Forums | Docs

4.2.4-SNAPSHOT

The newest features and fixes in Errai's 4.2.x branch.

Source | Binaries | Known Issues | Forums | Docs

HTML5 UIs!

In Errai, we use standard HTML and CSS for UI layout. Take an HTML file directly from your designer or brand team and use it in your application. No need to battle merge conflicts when bringing in design changes. The HTML files just serve as templates. All client-side logic is in companion Java classes that provide access to the fields in the templates. Check out this simple HTML form for filing complaints.

ComplaintForm.html
<div class="complaint">
 <input id="name" type="text" placeholder="Full Name">
 <input id="email" type="email" placeholder="you@example.com">
 <textarea id="text" placeholder="How can we help?"></textarea>
 <button id="saveButton">Save</button>
</div>
<div class="complaint">
 <input id="name" placeholder="Full Name">
 <input id="email" type="email">
 <textarea id="text"></textarea>
 <button id="saveButton">Save</button>
</div>

Attaching an event handler requires just a single annotation. Two-way data binding ensures that the model object and the UI fields are automatically kept in sync. Errai also comes with built-in page navigation support that allows transitioning between pages using bookmarkable URLs, all verified at compile time! Learn more about Errai UI here.

ComplaintForm.java
@Templated @Page
public class ComplaintForm extends Composite {
  @Inject @Model Complaint complaint;
  @Inject @Bound @DataField TextBox name;
  @Inject @Bound @DataField TextBox email;
  @Inject @Bound @DataField TextArea text;
  @Inject @DataField Button saveButton;

  @EventHandler("saveButton")
  public void onSave(ClickEvent event) {    
    sendComplaintToServer(complaint);
  }
}         
@Templated @Page
public class ComplaintForm 
  extends Composite {
  
  @Inject @Model Complaint complaint;
  @Inject @Bound @DataField TextBox name;
  @Inject @Bound @DataField TextBox email;
  @Inject @Bound @DataField TextArea text;
  @Inject @DataField Button saveButton;

  @EventHandler("saveButton")
  public void onSave(ClickEvent event) {   
    sendComplaintToServer(complaint);
  }
}         

Java EE in the Browser!

Errai brings Java EE to the browser. Leveraging the GWT compiler, Errai enables you to reuse existing Java EE code on the client. Simply persist your entities into the browser's local storage using JPA and keep them in sync with the server using our data sync module. Observe and fire CDI events on the client and exchange events between the client and server. Learn all about Errai's Java EE features here.

JPA in the Browser
@Templated @Page
public class CustomerForm extends Composite {
  @Inject 
  private EntityManager em;

  public void save(Customer customer) {
    em.merge(customer);
    em.flush();
  }
}       
CDI in the Browser
@ApplicationScoped
public class CustomerPresenter {
  @Inject @New 
  private Event<Customer> customerEvent;

  public long create(Customer customer) {
    customerEvent.fire(customer); 
  }
}           
@Templated
public class CustomerList extends Composite {
  private void onNewCustomer(@Observes @New Customer customer) {}
}           
@Templated
public class CustomerList extends Composite
{
  void onNew(@Observes @New Customer c) {}
}           
JAX-RS Integration

Construct type safe REST calls using JAX-RS annotations on shared interfaces. Let Errai handle the required communication and serialization logic.


@Path("/customers")
public interface CustomerEndpoint {
  @GET
  public long create(Customer customer);  
}         
@Templated @Page
public class CustomerForm extends Composite {
  @Inject 
  Caller<CustomerEndpoint> customerEndpoint;

  private void sendCustomerToServer(Customer customer) { 
    RemoteCallback remoteCallback = ...     
    customerEndpoint.call(remoteCallback).create(customer);
  }
}         
@Templated @Page
public class CustomerForm extends Composite
{
  @Inject 
  Caller<CustomerEndpoint> caller;

  void sendToServer(Customer customer) {
    RemoteCallback callback = ...
    caller.call(callback).create(customer);
  }
}       

Watch the quick tour video →

Your first steps with Errai

You can build a To-do List application with HTML 5 and Errai UI templates in minutes.

Get the source code of this example from GitHub.

Watch our GWT.create 2013 session →

Learn more about Errai

Rich HTML5 Web Apps: Typesafe Edition

Get the source code shown in this presentation from GitHub

Watch our JavaOne 2012 session →

Learn more about Errai

Taming the Spaghetti: Rich Web Application with Errai.


JBoss Community