HTML5 Templates
Create standard-conform HTML5 templates or use existing HTML and CSS files to design your applications. Cleanly separate layout and logic.
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 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
Join the Errai open source community! Errai is developed under the Apache License, Version 2.0.
Latest major release of Errai
Recommended for new projects
Latest 3.x release of Errai
Upgrade any older production systems to this release
Live on the bleeding edge with up-to-the-minute features and fixes delivered continuously.
Source | Binaries | Known Issues | Forums | Docs
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.