Errai: The browser as a platform

Monday, March 6, 2017

Errai 4.0.0.CR2 released!

As of today Errai 4.0.0.CR2 is available. This release contains mostly bug fixes and enhancements to some of our demos.

Below are some of the highlights.

Fix Maven Parallel Build Issues

Previously doing a parallel Maven build of an Errai project could occasionally lead to compilation failures. This release provides a fix so that parallel builds can now reliably execute on Errai projects.

Add Jetty Profiles Back to Errai Demos

During the migration from GWT 2.7 to 2.8 many Errai demo Jetty configurations stopped working, and consequently they were simply removed. Thanks to Dmitrii Tikhomirov, many of the Errai demos now have Jetty profiles once more so you can see how to build an Errai application for deployment outside of a Java EE app server.

Source Translation of Stack Traces in Google Chrome Fixed

A bug in Errai logging had broken source mapping of stack traces in errors logged through Errai. The result was that stack traces printed to the console in Google Chrome would only show obfuscated method names and line numbers. The problem has been fixed so that stack traces logged to the console once again use source maps to show line numbers from the Java source.

Stay Tuned

Stay tuned as we get closer to our first final release of Errai 4. Until then, happy coding!

Friday, January 27, 2017

Errai 4.0.0.CR1 released!

Since our last post we've done several beta releases, but today I'm happy to announce our first candidate release of Errai 4! Since we haven't blogged about our last few Beta releases, this post will contain highlights of all the changes introduced since 4.0.0.Beta4.

  • Client-side support for the CDI @Typed annotation
  • Global translation keys for Errai i18n
  • Removed ResponseCallback
  • Message bus enhancments (better clustering and CSRF protection)
  • General purpose gatekeepers on @Pages

Without further ado, let's dive right in.

Client-side support @Typed

The @Typed annotation allows you to restrict the types of injection sites that a bean may satisfy. What does that mean? To explain, we'll use the example from the @Typed javadoc. Consider the following class:

With normal CDI resolution, this bean will satisfy any unqualified injection site for any the following types, because the bean is assignable to any of these: Shop, BookShop, Business, and Object. Typically this is desirable, but we could reasonably want this bean to only satisfy injection sites of type Shop so that other developers don't depend on the implementation.

The @Typed annotation allows us to specify a subset of this bean's assignable types as its bean types, like so:

With this declaration, BookShop now only satisfies injection sites with types Shop or Object, preventing other developers from injecting this as a BookShop or a Business.

Global Translation Keys in Errai i18n

If you use Errai i18n, then you know that translation bundles use templated class names as prefixes for the keys. For example, consider this templated bean.

If we used Errai i18n to translate the "hello" data-field, we would define the translation of this element with the key "I18nTemplatedBean.hello-key". The disadvantage of this prefixing is that it made it impossible to share translations of common words between templates, leading to lots of duplication.

Now Errai i18n supports unprefixed translation keys that can be used in any template. Global translation keys have a lower priority than prefixed translations, and so they will only be used to translate a data-field if there is no translation key for the field specific to that template. So we could use the value associated with the key "hello-key" to translate the data-field in the above example provided there is no value for the key "I18nTemplatedBean.hello-key".

No more ResponseCallback for JAX-RS RPCs

The ResponseCallback was introduced to Errai to allow developers to access the underlying Response object returned from a JAX-RS RPC call. Unfortunately, this feature caused a serious problem for client-side RPC interceptors (including those used by Errai Security), where it became impossible to intercept the result of an RPC calls without a ClassCastException in some cases.

To solve this problem, we've removed the ResponseCallback, so that every RPC method has a single expected callback type that directly corresponds to the return type of the RPC method. In cases where a Response object is needed, you can modify your JAX-RS method to return a, allowing you to use a RemoteCallback<> from the client call site.

Message Bus Enhancements

Clustering Fixes

This release fixes a bug where the message bus could enter a reconnect loop after failover in certain clustering setups. With this fix the message bus is now more resilient at handling failover when working behind a load balancer.

CSRF Protection

The Errai Bus now provides basic CSRF protection. This protection is disabled by default. It can be enabled setting this property to true (as a System property or in errai.bus.enable_csrf_token

When enabled, a CSRF token is generated on the server that must be included as a header in every bus request. This token can be embedded on a GWT host page with a provided filter, or else negotiated as part of the message bus connection.

General purpose gatekeepers for @Pages

Since the release of Errai Security it has been possible to control access to pages via required roles, but there was no general way to redirect before a page was displayed based on business logic.

As a recent change, you can now intercept navigation by adding a NavigationControl parameter to a @PageShowing method like so:

We on the Errai team would like to thank Ben Dol for both suggesting and implementing this feature.

Still Time for Feedback

As always, we encourage and welcome community feedback. If you are still on Errai 3, consider checking out our migration guide and trying out Errai 4 today!

Until the next time, happy coding!

Thursday, November 10, 2016

Errai 4.0.0.Beta4 released!


Errai 4.0.0.Beta4 is now available. This release contains mostly bug fixes, but here are some noteworthy changes:
  • Upgrade GWT to 2.8.0 and Guava to 20.0
  • The Errai Tutorial now showcases Errai's JS interop integration

Errai Tutorial Enhancments

A major vision of Errai 4 has been more support for working directly with the DOM and more support for using JS interop. With this latest round of enhancements, the Errai Tutorial now showcases this vision and below I'll highlight some of the major features in action.

UI Components without GWT Widgets

The Errai Tutorial now showcases UI components built without any GWT widgets [1] [2]. These components are built with Errai templating using JS interop wrappers for interacting with the DOM; Element wrappers are used in place of GWT widgets and DOM events in place of GWT widget events.

One big advantage of this approach is that the markup of these UI components at runtime is exactly the same as the template HTML. Because GWT widgets are often implemented with multiple tags and custom CSS classes, using widgets as @DataFields can result in UI components rendering differently than their templates render when viewed outside the application.

Custom JS Interop Wrappers for DOM Elements and Web Components

The Errai Tutorial demonstrates how you can integrate web components with your Errai app, and how you can write your own custom element wrappers with specialized data-binding behaviour.

The tutorial now uses the Polymer paper-input and paper-textarea web components as part of a @Templated form. These components can be injected and used as @DataFields (as they are here). By using Errai's new HasValue interface for native @JsTypes with the @JsProperty annotation, these wrappers declaratively instruct Errai to use the "value" property of the paper elements for data-binding.

The tutorial also includes custom anchor element wrappers that showcase more complex data-binding behaviour. The BindableEmailAnchor is a wrapper for an anchor element that uses HasValue and @JsOverlay so that @Bound instances will display an email address as a mailto link as well as in the anchor text content.

Since the @JsOverlay method implementation is the only code generated by the GWT-compiler for a native @JsType, this is a light-weight way to declare element interfaces with custom data-binding behaviour.

Uses JQuery to Demonstrate Third-Party JavaScript Integration

The Errai Tutorial has a wrapper for a small subset of JQuery to showcase third-party JavaScript integration. With only a single @Produces annotation added to the JQuery wrapper, it is possible to inject the JQuery function for use in GWT code.

In general, we on the Errai team believe that using dependency injection is a best practice, but this is especially important with native JavaScript objects. By injecting the JQuery function rather than accessing it through a static method, it is much easier to mock out that object and test the code using it in a Java SE environment.

Try It Out and Give Us Your Feedback

We encourage you all to check out Errai 4.0.0.Beta4 and our new tutorial and share with us your feedback, whether that feedback is bug reports to our JIRA page, or more general disucssion in our forum.

Until the next time, happy coding!

Friday, September 30, 2016

Errai 4.0.0.Beta3 released!


Today we have the pleasure of announcing a new Errai release, 4.0.0.Beta3. Some important highlights in this release are:
  • GWT version upgraded to 2.8.0-rc2.
  • support for different merging strategies on @DataField attributes.
  • support for JS interop DOM event wrappers for @EventHandler methods.
Without any delay, let's talk about what these changes mean for you.

GWT Version Upgrade to 2.8.0-rc2

If you tried using Errai 4.0.0.Beta2 with GWT 2.8 snapshots or 2.8.0-rc2 you may have experienced issues running Super Dev Mode because of transitive dependency conflicts between GWT and Errai. These issues are resolved in 4.0.0.Beta3.

Data-Field Attribute Merging Strategies

When Errai initialises a templated bean, it merges attributes of data-fields in the HTML file with attributes on @DataFields in the @Templated Java file. In previous versions, attribute values of the data-fields in the HTML file always overrode @DataField attribute values. For example, for the Errai template below, the value of the title attribute at runtime would be "template".

As of this release, you can select between two strategies: USE_BEAN and USE_TEMPLATE.

Merging Single-Valued Attributes

For most attributes, USE_TEMPLATE (the default) causes merging to happen as in previous Errai versions: attribute values on a data-fields in the HTML file will override values of the respective @DataFields.

Conversely, the USE_BEAN strategy will preserve attribute values from the @DataField, only copying attribute values from a data-field in the HTML template if that attribute is not set in the respective @DataField.

You can declare which strategies to use as part of the @DataField annotation, with the ability to specify strategies for specific attributes, or a default strategy for all other attributes. In the example below, the "title" attribute will keep whatever value is set on the @DataField and all other attributes will have the value from the template data-field.

Merging List-Valued Attributes

Both strategies behave a bit differently when merging the "style" and "class" attributes because these attributes have list values.

When merging class values, all class names from the template and Java field are preserved. In other words, all CSS classes are combined between template data-fields and Java @DataFields regardless of which strategy is selected.

For example, below the "container" div will have the following classes (even if a different merging strategy was specified on the @DataField): "template bean both"

When merging style properties, individual CSS rules are kept from both the Java @DataField and the template data-fields as long as they do not conflict with each other. When there is a conflict, the selected strategy is used to resolve it, where USE_TEMPLATE causes the HTML data-field style value to win, and USE_BEAN causes the Java @DataField value to win.

In the example below, the "container" div will have the following style after the merging strategy is applied: "color: red; font-weight: bold; background-color: black"

JS Interop DOM Event Wrappers

In this release we have introduced a @BrowserEvent annotation for defining a native @JsType as an interface for a DOM Event. Annotated types can be used with the @EventHandler annotation to define methods as event listeners similarly to how @EventHandler is used with GWT Widget events. Several @BrowserEvent interfaces can be found in errai-common, covering the more common DOM event interfaces.

Below is an excerpt from the MouseEvent interface in errai-common.

Unlike GWT Widget events, multiple kinds of DOM events can share the same interface. The @BrowserEvent value for MouseEvent specifies the names of DOM events for which MouseEvent is an interface.

Because of this many-to-one mapping, declaring a handler method with a @BrowserEvent works similarly to declaring a native GWT event. There is a new @ForEvent annotation that is used to specify for which DOM event a handler should listen (which is analogous to @SinkNative for native GWT events).

An @EventHandler with a @BrowserEvent type can be registered for any data-field in the template HTML file, whether or not it has a corresponding @DataField in the Java bean.

Next Steps

Keep an eye out for upcoming blog posts focusing on some of the more advanced new features in Errai 4 such as JS interop support.

Until then, happy coding!

Friday, July 1, 2016

Errai 4.0.0.Beta2 released!


Today we're happy to announce the release of Errai 4.0.0.Beta2. This release includes lots of little fixes and enhancements including:
  • The EmbeddedWildflyLauncher for Super Dev Mode has been upgraded to use WildFly 10
  • Errai Navigation has new annotations for linking native anchors to Errai Navigation pages
  • Improved code-generation performance
  • Better support for declarative data-binding to native DOM elements
  • An injectable ManagedInstance for dynamically creating bean instances that manages the instances' life-cycles
Below we'll explain what some of these changes mean before talking about next steps.

WildFly 10 Upgrade

The EmbeddedWildflyLauncher now support WidFly 10+. Because of API changes in WildFly, it was not possible to maintain backwards compatibility with WildFly 8. That means that you have two options when upgrading Errai to 4.0.0.Beta2.

Upgrading to WildFly 10 (Recommended)

If you use the same WildFly configuration shown in the Errai Tutorial then you need only upgrade the as.version property to 10.0.0.Final. If you have any other configuration, just make sure that the errai.jboss.home system property in your Super Dev Mode configuration points to the root of a WildFly 10 installation.

Don't Upgrade errai-cdi-jboss

If you can't migrate to WildFly 10 right away, you can use an older version of errai-cdi-jboss (which contains the launcher) while still using the newest beta release for all other Errai jars.

Errai Navigation Links with Native Anchors

Errai Navigation has two new annotations that you can use on native Anchors for linking to Errai Navigation pages:
  • org.jboss.errai.ui.nav.client.local.api.TransitionTo
  • org.jboss.errai.ui.nav.client.local.api.TransitionToRole

These annotations are meant to replace the widget-based TransitionAnchor. Below we show them used in an Errai UI templated bean.

The first anchor links directly to the FAQPage while the second links to the page with the DefaultPage role. As with the previous transition anchors, Anchors with TransitionTo or TransitionToRole are validated at compile-time.

Better Data-Binding Support for Native DOM Elements

There were two issues with declarative data-binding of native elements in Errai 4.0.0.Beta1:
  • @Bound on a native element would fail in some cases for beans that were not @Templated
  • @Bound(onKeyUp=true) on an input element (TextInput, NumberInput, etc.) was not supported (and would cause compilation errors)
Both of these issues are fixed in 4.0.0.Beta2, moving Errai two small steps closer to the goal of GWT widget-free UI development.

Creating Beans Dynamically with Managed Life-Cycles

Errai supports CDI's Instance<T> for dynamically creating bean instances, but this API has some practical issues:
  • An instance created by an Instance<T> is managed by the caller. The caller is responsible for destroying the bean, which can lead to memory leaks.
  • Calling destroy on an Instance<T> destroys a bean regardless of its scope. But usually it is only desirable to destroy @Dependent beans, since @ApplicationScoped beans tend to be used throughout the entire runtime of an application.
Errai 4.0.0.Beta2 includes a new ManagedInstance<T> interface with similar methods but slightly different semantics that aim to simplify dynamic bean creation:
  • The destroy method on ManagedInstance<T> destroys @Dependent instances and is a no-op for all other scopes.
  • ManagedInstance<T> has a destroyAll method that destroys all @Dependent instances created by it.
  • When a ManagedInstance<T> is destroyed, its destroyAll method is called. A ManagedInstance<T> is destroyed when the bean it is injected into is destroyed.
In case the significance of that last point isn't immediately clear, this means that every dynamically created @Dependent instance from ManagedInstance<T> is cleaned-up when the type that injected that ManagedInstance<T> is destroyed. This avoids memory leaks and boiler-plate in short-lived components that create dynamic instances (like lists of UI elements).

Next Steps

In the coming weeks here are some of the features and tasks we will be working on:
In the interim, please try out Errai 4.0.0.Beta2 and tell us what you think.

Happy coding!