tag:blogger.com,1999:blog-58737406204970627242024-03-19T02:16:58.456-07:00Errai Developer BlogJBoss Errai offers a set of components for building rich web applications using the Google Web Toolkit (GWT).Tiago Bentohttp://www.blogger.com/profile/14236407827666629993noreply@blogger.comBlogger96125tag:blogger.com,1999:blog-5873740620497062724.post-9906495233854289172017-11-07T11:51:00.000-08:002017-11-07T11:51:02.902-08:00Errai 4.1.0.Final ReleasedWe've recently released Errai 4.1.0.Final, the first release on master since branching off the 4.0.x series. In this short post, I will highlight some of cool new things you can find in 4.1.0.Final, which include:<div>
<ul>
<li>Size and performance improvements in code generated for Errai Marshalling and Errai Data Binding</li>
<li>Custom content delegation in Errai Navigation</li>
<li>ErraiApp.properties moved to META-INF</li>
<li>Templating and Data Binding support for Elemental 2</li>
</ul>
<div>
The best part: two of these changes were delivered by our fantastic community. Read below for descriptions about these features. At the end I will talk briefly about forward-development currently happening in Errai.</div>
</div>
<div>
<br /></div>
<h3>
Marshalling and Data Binding Improvments</h3>
<div>
Both Errai Marshalling and Data Binding use generated code to introspect and access members of annotated classes. In Errai 4.1.0.Final, this code has been refactored to decrease generated code size and better take advantage of optimisations for String literals in the GWT compiler.</div>
<div>
<br /></div>
<div>
If you use Errai Marshalling or Data Binding heavily, Errai 4.1.0.Final should noticeably decrease the size of your JavaScript payload. A big shout out to <a href="https://github.com/slavap">slavap</a> for this excellent contribution!</div>
<div>
<br /></div>
<h3>
Custom Content Delegation</h3>
<div>
Errai Navigation provides lots of page-specific mechanisms for hooking into the navigation lifecycle, but until now there were no convenient ways to generically customize how all pages were shown or hidden.</div>
<div>
<br /></div>
<div>
Errai 4.1.0.Final introduces a content delegation system. Users can override a ContentDelegation interface and replace the default implementation to insert their own custom logic for displaying and hiding all pages. The delegation is quite flexible, even allowing for asynchronous actions.</div>
<div>
<br /></div>
<div>
A big thanks to <a href="https://github.com/BenDol">BenDol</a> for the concept and implementation of this feature!</div>
<div>
<br /></div>
<h3>
Configuration Moved to META-INF</h3>
<div>
By convention, configuration files that don't require name-spacing are supposed to be placed in the META-INF folder. Errai 4.1.0.Final supports scanning ErraiApp.properties files in the META-INF folder, allowing users to follow this convention. Moving forward, you should consider this a best practice.</div>
<div>
<br /></div>
<div>
Errai 4.1.0.Final will still work properly with ErraiApp.properties files outside of a META-INF folder, but you may see an abundance of warnings in your logs, as we will likely phase out support for this in our next major release.</div>
<div>
<br /></div>
<h3>
Elemental 2 Support for Templating and Data Binding</h3>
<div>
<a href="https://github.com/google/elemental2">Elemental 2</a> is a project that exposes built-in web APIs in Java. Like the first Elemental, the project is automatically generated from external definitions of web APIs. Unlike its predecessor, Elemental 2 uses JS Interop.</div>
<div>
<br /></div>
<div>
Back when we began work on Errai 4, Elemental 2 was not yet available. We didn't want that to slow down our work on HTMLElement-based user interfaces and JS Interop support, and so we created a collection of hand-written element wrappers in Errai.</div>
<div>
<br /></div>
<div>
But now that Elemental 2 is available, it is in the best interests of the GWT community to standardise around these. As such, Errai's DOM wrappers have been deprecated and we have added full support to templating and data-binding for classes from Elemental 2.</div>
<div>
<br /></div>
<div>
We will not be removing the Errai element wrappers, but we will also not be updating them, and you are highly encouraged to use Elemental 2 going forward.</div>
<div>
<br /></div>
<h3>
Looking to the Future</h3>
<div>
The biggest priority for Errai in the coming months is preparing for migration to GWT 3. We've known for some time that GWT 3 will require big changes to the way we develop GWT applications. There probably won't be GWT Widgets. There definitely won't be GWT Generators.</div>
<div>
<br /></div>
<div>
We've already made large strides towards GWT-Widget-less UI development. Although there is some more work to be done here, we are also beginning progress on the even larger and equally important task: migrating Errai's GWT generators to annotation processors.</div>
<div>
<br /></div>
<div>
I'd like to take this opportunity to mention recent addition to our team, <a href="https://github.com/tiagobento">Tiago Bento</a>, who has been the driving force behind our APT migration efforts. It's not quite ready for a test drive yet, but keep an eye out in the future for blog posts about how to try out Errai annotation processors on our snapshot releases.</div>
<div>
<br /></div>
<div>
Until the next time, happy coding!</div>
Max Barkleyhttp://www.blogger.com/profile/03170705455986349394noreply@blogger.com27tag:blogger.com,1999:blog-5873740620497062724.post-2089934445707048532017-05-24T07:24:00.000-07:002017-05-24T07:24:38.386-07:00Errai 4.0.0.Final released!Today I'm thrilled to announce that Errai 4.0.0.Final has been released!<br />
<div>
<br /></div>
<div>
At a glance, here are the big changes from Errai 3 to 4:</div>
<div>
<ul>
<li>Uses GWT 2.8.0 and WildFly 10 for Super Dev Mode</li>
<li>Has a new Errai IoC container supporting incremental code regeneration, and greater compliance with CDI</li>
<li>Has advanced JS Interop support, including dependency injection of native JavaScript objects, and templating and data-binding with JS Interop wrappers of DOM elements and web components</li>
<li>Has message bus enhancements (better clustering support and CSRF protection)</li>
</ul>
<div>
<div>
All of these changes have been discussed in previous blog posts. Nonetheless, in this post I will summarise these changes with links to the more detailed descriptions.</div>
</div>
</div>
<div>
<br /></div>
<h3>
New Errai IoC Container</h3>
<div>
Errai 4 has a new IoC container, that supports incremental regeneration of code. The main benefit of this is to improve the performance of refreshing during Super Dev Mode. But this rewrite also allows for the possibility of migrating to annotation processors for all code generation in a future release.</div>
<div>
<br /></div>
<div>
The new IoC container also more closely aligns with CDI:</div>
<div>
<ul>
<li>@ApplicationScoped beans must be proxiable, and are lazily loaded like in Weld</li>
<li>@Singleton is a "pseudo-scope": it need not be proxiable but cannot be part of a circular injection</li>
<li>@Typed annotation is <a href="http://errai-blog.blogspot.ca/2017/01/errai-400cr1-released.html">supported</a></li>
</ul>
<div>
In some cases, beans may be resolved slightly differently than in Errai 3. Our <a href="http://docs.jboss.org/errai/latest/errai/reference/html_single/#_upgrading_to_errai_4_0_from_3_2">upgrade guide</a> highlights some important "gotchas" to look out for when upgrading to Errai 4.</div>
<h3>
Advanced JS Interop Support</h3>
</div>
<div>
The overarching theme of Errai 4 is working directly with JavaScript APIs and the DOM via JS Interop. If you don't already know about JS Interop, I encourage you to watch the first half of <a href="https://www.youtube.com/watch?v=7QI4DSkJ5DQ">this</a> talk by Daniel Kurka at GWTCon.</div>
<div>
<br /></div>
<div>
Here are the ways in which you can use JS Interop with Errai 4:</div>
<div>
<ul>
<li>Use JS Interop interfaces for DOM elements or web components as @DataFields in @Templated components</li>
<li>Use JS Interop interfaces for DOM elements or web components as @Bound UI components with Errai data-binding</li>
<li>Inject JavaScript objects into your application like normal GWT/Java objects</li>
</ul>
<div>
You can read more about Errai 4 JS Interop support <a href="http://errai-blog.blogspot.ca/2016/04/errai-400beta1-released.html">here</a> and <a href="http://errai-blog.blogspot.ca/2016/07/errai-400beta2-released.html">here</a>, or view examples in the <a href="https://github.com/errai/errai-tutorial">Errai Tutorial</a>.</div>
</div>
<div>
<br /></div>
<h3>
Message Bus Enhancements</h3>
<div>
The Errai message bus has received some love in Errai 4, with fixes that improve fail-over behaviour in clustered setups, and optional built-in CSRF protection.</div>
<div>
<br /></div>
<div>
Both of these are described briefly in <a href="http://errai-blog.blogspot.ca/2017/01/errai-400cr1-released.html">this</a> blog post.</div>
<div>
<br /></div>
<h3>
Thanks to the Community</h3>
<div>
I'd like to end by thanking everyone in the Errai community who contributed to the quality of this release, through pull requests with new features and reports of important issues in our beta and candidate releases. In particular, the Errai JS Interop support was greatly improved by the important feedback from our community.</div>
<div>
<br /></div>
<div>
Until the next time, happy coding!</div>
Max Barkleyhttp://www.blogger.com/profile/03170705455986349394noreply@blogger.com13tag:blogger.com,1999:blog-5873740620497062724.post-33625164465732932132017-03-06T08:47:00.002-08:002017-03-06T08:47:42.914-08:00Errai 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.<br />
<br />
Below are some of the highlights.<br />
<h3>
Fix Maven Parallel Build Issues</h3>
<div>
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.</div>
<h3>
Add Jetty Profiles Back to Errai Demos</h3>
<div>
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 <a href="https://issues.jboss.org/secure/ViewProfile.jspa?name=treblereel" style="background-color: white; color: #3b73af; cursor: pointer; font-family: Arial, sans-serif; font-size: 14px; text-decoration: none; white-space: nowrap;">Dmitrii Tikhomirov</a>, 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.</div>
<h3>
Source Translation of Stack Traces in Google Chrome Fixed</h3>
<div>
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.</div>
<h3>
Stay Tuned</h3>
<div>
Stay tuned as we get closer to our first final release of Errai 4. Until then, happy coding!</div>
Max Barkleyhttp://www.blogger.com/profile/03170705455986349394noreply@blogger.com358tag:blogger.com,1999:blog-5873740620497062724.post-11540453856507578472017-01-27T09:34:00.000-08:002017-03-06T08:16:32.485-08:00Errai 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.<br />
<br />
<ul>
<li>Client-side support for the CDI @Typed annotation</li>
<li>Global translation keys for Errai i18n</li>
<li>Removed ResponseCallback</li>
<li>Message bus enhancments (better clustering and CSRF protection)</li>
<li>General purpose gatekeepers on @Pages</li>
</ul>
<div>
<br /></div>
<div>
Without further ado, let's dive right in.</div>
<h3>
Client-side support @Typed</h3>
<div>
The <a href="https://docs.jboss.org/cdi/api/1.0/javax/enterprise/inject/Typed.html">@Typed annotation</a> 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:</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/mbarkley/d494d577739c65028d20b498d3a8bb91.js"></script></div>
<div>
<br /></div>
<div>
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<book> so that other developers don't depend on the implementation.</book></div>
<div>
<br /></div>
<div>
The @Typed annotation allows us to specify a subset of this bean's assignable types as its bean types, like so:</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/mbarkley/4e75fe95c48034bb5d21d4ae30852f8b.js"></script></div>
<div>
<br /></div>
<div>
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.</div>
<h3>
Global Translation Keys in Errai i18n</h3>
<div>
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.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/mbarkley/7ca0daf09b997d878e0e25cd884f3682.js"></script></div>
<div>
<br /></div>
<div>
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.</div>
<div>
<br /></div>
<div>
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".</div>
<h3>
No more ResponseCallback for JAX-RS RPCs</h3>
<div>
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.</div>
<div>
<br /></div>
<div>
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 javax.ws.rs.core.Response, allowing you to use a RemoteCallback<com.google.gwt.http.client.Response> from the client call site.</div>
<h3>
Message Bus Enhancements</h3>
<h4>
Clustering Fixes</h4>
<div>
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.</div>
<h4>
CSRF Protection</h4>
<div>
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 ErraiApp.properties): errai.bus.enable_csrf_token</div>
<div>
<br /></div>
<div>
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.</div>
<h3>
General purpose gatekeepers for @Pages</h3>
<div>
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.</div>
<div>
<br /></div>
<div>
As a recent change, you can now intercept navigation by adding a NavigationControl parameter to a @PageShowing method like so:</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/mbarkley/eb0a881441091b3398a769bb283bea11.js"></script></div>
<div>
<br /></div>
<div>
We on the Errai team would like to thank <a href="https://github.com/BenDol">Ben Dol</a> for both suggesting and implementing this feature.</div>
<h3>
Still Time for Feedback</h3>
<div>
As always, we encourage and welcome community feedback. If you are still on Errai 3, consider checking out our <a href="http://docs.jboss.org/errai/latest/errai/reference/html_single/#_upgrading_to_errai_4_0_from_3_2">migration guide</a> and trying out Errai 4 today!</div>
<div>
<br /></div>
<div>
Until the next time, happy coding!</div>
Max Barkleyhttp://www.blogger.com/profile/03170705455986349394noreply@blogger.com12tag:blogger.com,1999:blog-5873740620497062724.post-87498884022359618222016-11-10T07:53:00.000-08:002016-11-10T07:53:11.911-08:00Errai 4.0.0.Beta4 released!Greetings!<br />
<br />
Errai 4.0.0.Beta4 is now available. This release contains mostly bug fixes, but here are some noteworthy changes:<br />
<ul>
<li>Upgrade GWT to 2.8.0 and Guava to 20.0</li>
<li>The <a href="https://github.com/errai/errai-tutorial">Errai Tutorial</a> now showcases Errai's JS interop integration</li>
</ul>
<h3>
Errai Tutorial Enhancments</h3>
<div>
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.<br />
<br /></div>
<h4>
UI Components without GWT Widgets</h4>
<div>
The Errai Tutorial now showcases UI components built without any GWT widgets [<a href="https://github.com/errai/errai-tutorial/blob/master/src/main/java/org/jboss/errai/demo/client/local/ContactDisplay.java#L76-L105">1</a>] [<a href="https://github.com/errai/errai-tutorial/blob/master/src/main/java/org/jboss/errai/demo/client/local/NavBar.java#L59-L65">2</a>]. 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.</div>
<div>
<br /></div>
<div>
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.<br />
<br /></div>
<h4>
Custom JS Interop Wrappers for DOM Elements and Web Components</h4>
<div>
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.</div>
<div>
<br /></div>
<div>
The tutorial now uses the Polymer <a href="https://github.com/errai/errai-tutorial/blob/master/src/main/java/org/jboss/errai/demo/client/local/PaperInput.java">paper-input</a> and <a href="https://github.com/errai/errai-tutorial/blob/master/src/main/java/org/jboss/errai/demo/client/local/PaperTextArea.java">paper-textarea</a> web components as part of a @Templated form. These components can be injected and used as @DataFields (as they are <a href="https://github.com/errai/errai-tutorial/blob/master/src/main/java/org/jboss/errai/demo/client/local/ContactEditor.java#L69-L94">here</a>). 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.</div>
<div>
<br /></div>
<div>
The tutorial also includes custom anchor element wrappers that showcase more complex data-binding behaviour. The <a href="https://github.com/errai/errai-tutorial/blob/master/src/main/java/org/jboss/errai/demo/client/local/BindableEmailAnchor.java">BindableEmailAnchor</a> 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.</div>
<div>
<br /></div>
<div>
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.<br />
<br /></div>
<h4>
Uses JQuery to Demonstrate Third-Party JavaScript Integration</h4>
<div>
The Errai Tutorial has a <a href="https://github.com/errai/errai-tutorial/blob/master/src/main/java/org/jboss/errai/demo/client/local/JQueryProducer.java">wrapper for a small subset of JQuery</a> to showcase third-party JavaScript integration. With only a single @Produces annotation added to the JQuery wrapper, it is possible to <a href="https://github.com/errai/errai-tutorial/blob/master/src/main/java/org/jboss/errai/demo/client/local/AppSetup.java#L50-L51">inject the JQuery function</a> for use in GWT code.</div>
<div>
<br /></div>
<div>
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.<br />
<br /></div>
<h3>
Try It Out and Give Us Your Feedback</h3>
<div>
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 <a href="https://issues.jboss.org/projects/ERRAI/">JIRA page</a>, or more general disucssion in our <a href="https://developer.jboss.org/en/errai">forum</a>.</div>
<div>
<br /></div>
<div>
Until the next time, happy coding!</div>
Max Barkleyhttp://www.blogger.com/profile/03170705455986349394noreply@blogger.com14tag:blogger.com,1999:blog-5873740620497062724.post-82056151567149922992016-09-30T07:52:00.002-07:002016-09-30T07:52:33.649-07:00Errai 4.0.0.Beta3 released!Greetings!<br />
<br />
Today we have the pleasure of announcing a new Errai release, 4.0.0.Beta3. Some important highlights in this release are:<br />
<ul>
<li>GWT version upgraded to 2.8.0-rc2.</li>
<li>support for different merging strategies on @DataField attributes.</li>
<li>support for JS interop DOM event wrappers for @EventHandler methods.</li>
</ul>
<div>
Without any delay, let's talk about what these changes mean for you.</div>
<h3>
GWT Version Upgrade to 2.8.0-rc2</h3>
<div>
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.</div>
<h3>
Data-Field Attribute Merging Strategies</h3>
<div>
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".<br />
<br />
<script src="https://gist.github.com/mbarkley/79d0f93c819da75333ed682f2915c99a.js"></script>
As of this release, you can select between two strategies: USE_BEAN and USE_TEMPLATE.<br />
<br />
<h4>
Merging Single-Valued Attributes</h4>
</div>
<div>
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.<br />
<br />
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.</div>
<div>
<br /></div>
<div>
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.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/mbarkley/1187631d280272c66274d1f2da9c553d.js"></script><br />
<h4>
Merging List-Valued Attributes</h4>
</div>
<div>
Both strategies behave a bit differently when merging the "style" and "class" attributes because these attributes have list values.</div>
<div>
<br /></div>
<div>
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.<br />
<br />
For example, below the "container" div will have the following classes (even if a different merging strategy was specified on the @DataField): <code>"template bean both"</code><br />
<br />
<script src="https://gist.github.com/mbarkley/f8e559a5f002534d949692227fdafd2e.js"></script></div>
<div>
<br /></div>
<div>
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.<br />
<br />
In the example below, the "container" div will have the following style after the merging strategy is applied: <code>"color: red; font-weight: bold; background-color: black"</code><br />
<br />
<script src="https://gist.github.com/mbarkley/d092115f72058e837af6e55f9688449e.js"></script></div>
<h3>
JS Interop DOM Event Wrappers</h3>
<div>
In this release we have introduced a <a href="https://github.com/errai/errai/blob/4.0.0.Beta3/errai-common/src/main/java/org/jboss/errai/common/client/api/annotations/BrowserEvent.java">@BrowserEvent</a> annotation for defining a native @JsType as an interface for a DOM Event. Annotated types can be used with the <a href="https://github.com/errai/errai/blob/4.0.0.Beta3/errai-ui/src/main/java/org/jboss/errai/ui/shared/api/annotations/EventHandler.java">@EventHandler</a> 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.<br />
<br />
Below is an excerpt from the MouseEvent interface in errai-common.<br />
<br />
<script src="https://gist.github.com/mbarkley/28759ea3c80ee0f3066934efda98d165.js"></script><br />
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.<br />
<br />
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).<br />
<br />
<script src="https://gist.github.com/mbarkley/af2c9ba6e56dbfb9f82d8aeeae0b9902.js"></script>
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.<br />
<br />
<h3>
Next Steps</h3>
</div>
<div>
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.</div>
<div>
<br /></div>
<div>
Until then, happy coding!</div>
Max Barkleyhttp://www.blogger.com/profile/03170705455986349394noreply@blogger.com7tag:blogger.com,1999:blog-5873740620497062724.post-23146050116533341742016-07-01T08:14:00.000-07:002016-07-01T08:14:00.503-07:00Errai 4.0.0.Beta2 released!Salutations!<br />
<br />
Today we're happy to announce the release of Errai 4.0.0.Beta2. This release includes <a href="https://issues.jboss.org/secure/ReleaseNote.jspa?projectId=12310890&version=12330735" target="_blank">lots of little fixes and enhancements</a> including:<br />
<ul>
<li>The EmbeddedWildflyLauncher for Super Dev Mode has been upgraded to use WildFly 10</li>
<li>Errai Navigation has new annotations for linking native anchors to Errai Navigation pages</li>
<li>Improved code-generation performance</li>
<li>Better support for declarative data-binding to native DOM elements</li>
<li>An injectable ManagedInstance<t> for dynamically creating bean instances that manages the instances' life-cycles</t></li>
</ul>
<div>
Below we'll explain what some of these changes mean before talking about next steps.</div>
<br />
<h3>
WildFly 10 Upgrade</h3>
<div>
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.</div>
<h4>
Upgrading to WildFly 10 (Recommended)</h4>
<div>
If you use the same WildFly configuration <a href="https://github.com/errai/errai-tutorial/blob/master/pom.xml" target="_blank">shown in the Errai Tutorial</a> then you need only upgrade the <code>as.version</code> property to <code>10.0.0.Final</code>. If you have any other configuration, just make sure that the <code>errai.jboss.home</code> system property in your Super Dev Mode configuration points to the root of a WildFly 10 installation.<br />
<h4>
Don't Upgrade errai-cdi-jboss</h4>
</div>
<div>
If you can't migrate to WildFly 10 right away, you can use an older version of <code>errai-cdi-jboss</code> (which contains the launcher) while still using the newest beta release for all other Errai jars.</div>
<br />
<h3>
Errai Navigation Links with Native Anchors</h3>
<div>
Errai Navigation has two new annotations that you can use on native Anchors for linking to Errai Navigation pages:<br />
<ul>
<li><code>org.jboss.errai.ui.nav.client.local.api.TransitionTo</code></li>
<li><code>org.jboss.errai.ui.nav.client.local.api.TransitionToRole</code></li>
</ul>
<br />
These annotations are meant to replace the widget-based <code>TransitionAnchor</code>. Below we show them used in an Errai UI templated bean.<br />
<br />
<script src="https://gist.github.com/mbarkley/59e8f18c3f177397c0fbeabba550d4f5.js"></script>
The first anchor links directly to the <code>FAQPage</code> while the second links to the page with the <code>DefaultPage</code> role. As with the previous transition anchors, Anchors with <code>TransitionTo</code> or <code>TransitionToRole</code> are validated at compile-time.<br />
<br />
<h3>
Better Data-Binding Support for Native DOM Elements</h3>
</div>
<div>
There were two issues with declarative data-binding of native elements in Errai 4.0.0.Beta1:</div>
<div>
<ul>
<li><code>@Bound</code> on a native element would fail in some cases for beans that were not <code>@Templated</code></li>
<li><code>@Bound(onKeyUp=true)</code> on an input element (<code>TextInput</code>, <code>NumberInput</code>, etc.) was not supported (and would cause compilation errors)</li>
</ul>
<div>
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.</div>
</div>
<div>
<br />
<h3>
<t>Creating Beans Dynamically with Managed Life-Cycles</t></h3>
</div>
<div>
Errai supports CDI's <code>Instance<T></code> for dynamically creating bean instances, but this API has some practical issues:</div>
<div>
<ul>
<li>An instance created by an <code>Instance<T></code> is managed by the caller. The caller is responsible for destroying the bean, which can lead to memory leaks.</li>
<li>Calling <code>destroy</code> on an <code>Instance<T></code> destroys a bean regardless of its scope. But usually it is only desirable to destroy <code>@Dependent</code> beans, since <code>@ApplicationScoped</code> beans tend to be used throughout the entire runtime of an application.</li>
</ul>
<div>
Errai 4.0.0.Beta2 includes a new <a href="https://github.com/errai/errai/blob/4.0.0.Beta2/errai-ioc/src/main/java/org/jboss/errai/ioc/client/api/ManagedInstance.java" target="_blank"><span style="font-family: "courier new" , "courier" , monospace;">ManagedInstance<T></span></a> interface with similar methods but slightly different semantics that aim to simplify dynamic bean creation:</div>
</div>
<div>
<ul>
<li>The <code>destroy</code> method on <code>ManagedInstance<T></code> destroys <code>@Dependent</code> instances and is a no-op for all other scopes.</li>
<li><code>ManagedInstance<T></code> has a <code>destroyAll</code> method that destroys all <code>@Dependent</code> instances created by it.</li>
<li>When a <code>ManagedInstance<T></code> is destroyed, its <code>destroyAll</code> method is called. A <code>ManagedInstance<T></code> is destroyed when the bean it is injected into is destroyed.</li>
</ul>
<div>
In case the significance of that last point isn't immediately clear, this means that every dynamically created <code>@Dependent</code> instance from <code>ManagedInstance<T></code> is cleaned-up when the type that injected that <code>ManagedInstance<T></code> is destroyed. This avoids memory leaks and boiler-plate in short-lived components that create dynamic instances (like lists of UI elements).<br />
<br />
<h3>
Next Steps</h3>
</div>
</div>
<div>
In the coming weeks here are some of the features and tasks we will be working on:<br />
<ul>
<li><a href="https://issues.jboss.org/browse/ERRAI-877" target="_blank">Support for a new scope</a> bound to Errai Navigation <code>@Page</code> life-cycles</li>
<li><a href="https://issues.jboss.org/browse/ERRAI-968" target="_blank">Thin DOM wrappers for browser events</a> supported by Errai UI <code>@EventHandler</code></li>
<li><a href="https://issues.jboss.org/browse/ERRAI-938" target="_blank">Configurable strategy </a>for merging <code>@DataField</code> element attributes</li>
<li>Testing with the newest GWT 2.8 snapshots and releases</li>
</ul>
<div>
In the interim, please try out Errai 4.0.0.Beta2 and tell us what you think.</div>
<div>
<br /></div>
<div>
Happy coding!</div>
</div>
Max Barkleyhttp://www.blogger.com/profile/03170705455986349394noreply@blogger.com25tag:blogger.com,1999:blog-5873740620497062724.post-81896651595524534422016-04-01T08:41:00.002-07:002016-04-01T08:41:54.507-07:00Errai 4.0.0.Beta1 released!Greetings everyone!<br />
<br />
As we write this, GWT and Errai are 10- and 6-years-old projects respectively. In those years, the web development community has progressed at an amazing speed, which has led some to ask the question: Is there still a place for these projects now and in the future?<br />
<br />
We on the Errai Team continue to see huge value in our type-safe and declarative programming model for developing large projects. It is because of this value that we continue to actively develop Errai and it is because of this value that we continue to say <a href="https://www.youtube.com/watch?v=V5ZWNOm4r2k&t=77" rel="nofollow" target="_blank">this</a>.<br />
<br />
Today we're happy to announce the release of Errai 4.0.0.Beta1, targeting GWT 2.8.0-Beta1. This release brings exciting new features for working with native JavaScript and HTML, as well as improved refresh times in Super Dev Mode. In particular, 4.0.0.Beta1 includes:<br />
<br />
<ul>
<li>A new Errai IoC container supporting partial code regeneration for improved refresh performance in Super Dev Mode</li>
</ul>
<ul>
<li>Greater compliance with CDI such as:</li>
<ul>
<li>Lazy singleton support (the new default for @ApplicationScoped beans)</li>
<li><a href="https://issues.jboss.org/secure/ReleaseNote.jspa?projectId=12310890&version=12326946" target="_blank">More CDI-like resolution</a> of IOC beans</li>
</ul>
</ul>
<ul>
<li>Support for injecting native JavaScript objects into IoC beans with JS interop</li>
</ul>
<ul>
<li>Support for injecting Errai IoC beans across separately compiled GWT scripts</li>
</ul>
<ul>
<li>Support for native DOM-based UI development with:</li>
<ul>
<li>JS interop wrappers for common DOM elements</li>
<li>A declarative way of defining custom element wrappers available for injection in Errai IoC</li>
<li>Ability to use native DOM elements with Errai UI @DataFields, Errai Navigation @Pages, and Errai Data Binding @Bound fields</li>
</ul>
</ul>
<div>
<br /></div>
<div>
So what do all these changes mean for you?</div>
<h3>
Performance Improvements</h3>
<div>
When developing in Super Dev Mode, refreshing after modifying an IoC managed type requires generating significantly less code, decreasing the overall refresh time.</div>
<div>
At runtime, applications with many @ApplicationScoped beans will notice decreased start-up times as @ApplicationScoped beans are now lazily instantiated by default.</div>
<h3>
Templated Beans with Native HTML Elements</h3>
<div>
In Errai 4 it's now possible to develop UI components without Widgets, and instead with thin-wrappers around native HTML elements. Here is a @Templated bean for a form using Errai UI and Data Binding.</div>
<div>
<br /></div>
<script src="https://gist.github.com/mbarkley/3166136209d2b672fc23.js"></script>
<br />
<div>
How is this different from Errai 3?</div>
<div>
<ul>
<li><a href="https://github.com/errai/errai/blob/4.0.0.Beta1/errai-common/src/main/java/org/jboss/errai/common/client/dom/Div.java" target="_blank">Div</a>, <a href="https://github.com/errai/errai/blob/4.0.0.Beta1/errai-common/src/main/java/org/jboss/errai/common/client/dom/TextInput.java" target="_blank">TextInput</a>, and <a href="https://github.com/errai/errai/blob/4.0.0.Beta1/errai-common/src/main/java/org/jboss/errai/common/client/dom/TextArea.java" target="_blank">TextArea</a> are not Widgets. Rather they are thin-wrappers around the div, input, and textarea elements respectively (using the GWT 2.8 JS Interop API)</li>
<li>The ContactForm does not extend Composite</li>
<li>The root element of the template is accessible as a @DataField. (This can be used to manually add this template to the DOM.)</li>
</ul>
<h3>
Injecting Other DOM Elements</h3>
</div>
<div>
Errai 4 provides built-in thin-wrappers for most commonly used HTML elements, which you can you use in place of Widgets. The complete collection can be found in <a href="https://github.com/errai/errai/tree/4.0.0.Beta1/errai-common/src/main/java/org/jboss/errai/common/client/dom" target="_blank">this package</a>.</div>
<div>
In case you wish to inject elements which do not have specific wrappers provided by Errai, you may use either of the following options.</div>
<h4>
Use the @Named Qualifier</h4>
<div>
Using the @Named qualifier, it is possible to inject an HTMLElement with any tag name. For example, here is how you could inject a nav element.</div>
<div>
<script src="https://gist.github.com/mbarkley/8230106d1b82e0e26b60.js"></script></div>
<h4>
Create your own @Element</h4>
<div>
It's also very simple to declare your own thin DOM wrappers using the new @Element annotation. For example, here is a thin wrapper for the nav element that, if included in your project, can be available for injection in the IoC.</div>
<div>
<script src="https://gist.github.com/mbarkley/cb719416132987d44043.js"></script></div>
<h3>
Next Steps</h3>
<div>
For those of you itching to learn more, our next blog post will take a deep dive into native JavaScript support in Errai 4, including how you can make arbitrary JavaScript objects injectable and how you can inject Errai IoC beans across separately compiled GWT scripts.</div>
<div>
Until then you can check out our new and improved <a href="https://github.com/mbarkley/errai-tutorial" target="_blank">Errai Tutorial</a>, which showcases all of the features mentioned here.<br />
<br />
Happy coding!</div>
<div>
</div>
Max Barkleyhttp://www.blogger.com/profile/03170705455986349394noreply@blogger.com10tag:blogger.com,1999:blog-5873740620497062724.post-16616520282856036912015-08-06T09:27:00.000-07:002015-08-06T11:18:56.601-07:00Errai 3.2.0.Final released and 4.0 in the making!Hi everyone,<br />
<br />
It's time for a quick update: Errai 3.2.0.Final has been released which contains a number of important fixes and quite a few new features, like <a href="http://docs.jboss.org/errai/latest/errai/reference/html_single/#_template_providers">runtime template</a> support and an embedded WildFly launcher for Super Dev Mode (see the <a href="https://issues.jboss.org/secure/ReleaseNote.jspa?projectId=12310890&version=12326326">release notes</a> for all details).<br />
<br />
We've also just started work on Errai 4.0! In the short-term, we will be focusing on the following features and enhancements:<br />
<br />
<ul>
<li>Errai IoC: Injection of types provided at runtime by dynamically loaded modules (external scripts)</li>
</ul>
<ul>
<li>Errai IoC: Incremental generation of our bootstrapping logic (to significantly improve refresh times)</li>
</ul>
<ul>
<li>Errai UI: Ease the integration of web components and allow the use of light-weight DOM wrappers instead of GWT widgets</li>
</ul>
<div>
<br />
Max Barkley is back in full force and will be leading most of this development.<br />
<br /></div>
<div>
What other features or enhancements would you like to see in Errai 4? We rely on your feedback so please join us on Freenode #errai, the errai-dev <a href="mailto:errai-dev@lists.jboss.org">mailing list</a>, or on our <a href="https://community.jboss.org/en/errai?view=discussions">community forums</a>.</div>
<div>
<br /></div>
<div>
Happy coding!</div>
Unknownnoreply@blogger.com15tag:blogger.com,1999:blog-5873740620497062724.post-52431250575096688802015-02-05T08:56:00.000-08:002015-02-05T08:56:24.060-08:00Upcoming Errai talksWe're happy to announce that there will be three Errai talks this March!<br />
<br />
<a href="https://twitter.com/jobarop">Johannes Barop</a>, a long-time Errai contributor and community member, will present at <a href="http://www.javaland.eu/javaland-2015/">JavaLand</a> on March, 25. You can find the details of his talk <a href="https://www.doag.org/konferenz/konferenzplaner/konferenzplaner_details.php?locS=0&id=483801&vid=491420">here</a>. If you plan to attend JavaLand (and why wouldn't you? They have Java, beer, and roller coasters!) make sure to stop by and check out his talk!<br />
<br />
<a href="https://twitter.com/haraldpehl">Harald Pehl</a>, core developer on Red Hat's WildFly team and long-time GWT developer, will present Errai at the <a href="https://sites.google.com/site/jugffm/">Java Users Group in Frankfurt</a>.<br />
<br />
Finally, I am really excited and looking forward to presenting at <a href="http://qconsp.com/">QCon São Paulo</a> on March, 26. The details of my talk can be found <a href="http://qconsp.com/presentation/building-type-safe-html5-applications-java">here</a>.<br />
<br />
Happy coding!Unknownnoreply@blogger.com9tag:blogger.com,1999:blog-5873740620497062724.post-69175313889969800862015-01-19T16:26:00.000-08:002015-01-19T16:26:00.820-08:00Errai 3.1.1.Final released!Hi everyone,<br />
<br />
Just a quick note that we released Errai 3.1.1.Final today. This is a maintenance release containing a few bug fixes (see the <a href="https://issues.jboss.org/secure/ReleaseNote.jspa?projectId=12310890&version=12326327">release notes</a> for details). We have also switched master to 3.2.0-SNAPSHOT for future development. So far 3.2 contains a new feature that allows for server-side (dynamic) Errai UI templates. Please stay tuned for more information and an updated roadmap.<br />
<br />
Everything is set for <a href="http://gwtcreate.com/%C2%A0">GWT.create</a> now and I hope to see many of you in Mountain View and Munich in the coming days!<br />
<br />
Happy coding!Unknownnoreply@blogger.com11tag:blogger.com,1999:blog-5873740620497062724.post-71961243468376198122015-01-14T06:41:00.001-08:002015-01-14T06:41:16.588-08:00SSO with Errai and Keycloak.jsThe <a href="http://artificer.jboss.org/">Artificer</a> project (<a href="http://artificer.jboss.org/">http://artificer.jboss.org</a>) has been a long-time fan of Errai, relying on it for the majority of our powerful UI. We recently switched to using <a href="http://keycloak.jboss.org/">Keycloak</a>, an out-of-the-box security solution, for authentication and authorization. Typically, you'd protect your Errai index.html page with a simple <i>security-constraint</i> in the WAR's <i>web.xml</i>. However, due to various issues, we investigated the use of Keycloak's pure-Javascript adapter (keycloak.js). This post will quickly capture the approach and a few gotchas.<br />
<br />
Note that Errai has a built-in <a href="http://docs.jboss.org/errai/3.1.0.Final/errai/reference/html_single/#_using_keycloak_for_authentication">Keycloak module</a>, based on Errai Security. Although that may be the best way to go, we were interested in making keycloak.js work on its own with plain Errai.<br />
<h3>
index.html</h3>
So, first things first. When you run Keycloak, either using its standalone appliance or within a container of your choice, it serves up the <i>keycloak.js</i> file. Add it to your page's header:<br />
<br />
<script src="https://gist.github.com/brmeyer/f6adae97a5232e4dbbe3.js"></script><br />
Right off the bat, there's a few things to notice:<br />
<br />
<ul>
<li>The <i>keycloak</i> variable is attached to the <i>window</i> object. More on that later...</li>
<li>The <i>init</i> call includes the <i>{onLoad: 'login-required'}</i> option. This tells Keycloak to redirect users to the built-in login screen, if un-authenticated. If left off, the user must be pre-authenticated by other means.</li>
<li>Keycloak revolves around the use of tokens. Server-side, those tokens expire after a configurable period. For Javascript-based solutions, such as Errai, that may never refresh the page, manually refreshing the token is vital. However, Keycloak's <i>updateToken</i> is currently <b>asynchronous</b> and uses a promise. Rather than deal with a complicated callback setup, we're simply updating the token on a 10 second timer. By default, Keycloak tokens expire after a minute, however this value is configurable.</li>
</ul>
<h3>
REST</h3>
<div>
The back-end REST services are also protected by Keyloak. In order to use them, without requiring basic authentication, the Errai app must provide a "bearer token" on each call. To accomplish this, we created a <i>RestClientInterceptor</i> to intercept each call and add the token.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/brmeyer/3f882296d945f549e825.js"></script></div>
<div>
<script src="https://gist.github.com/brmeyer/eff52f03f23f1d88ce64.js"></script></div>
<div>
<br /></div>
<div>
Here, we use a bit of JSNI to obtain the Keycloak token from <i>index.html</i>. Here's where the <i>window</i> object necessity comes in. Since this interceptor technically runs in a nested frame, simple global variables will not work. Attaching the variable to <i>window</i>, then referring to it through JSNI's <i>$wnd</i>, allows the cross-frame sharing.</div>
<div>
<br /></div>
<div>
After obtaining the token, the interceptor adds it to the request. Note that the header key is "Authorization" and the value is "Bearer [token]". The "Bearer" bit is vital, but can be easily forgotten.</div>
<h3>
RPC</h3>
<div>
The above approach works similarly for RPC, but is instead based on <i>RpcInterceptor</i>.</div>
<h3>
Servlets</h3>
<div>
What about Servlets? In our case, Servlets are used directly from GWT <i>FormPanel</i> for needs such as local file uploads. The Servlets themselves are not protected by Keycloak, but they turn around and call the same REST services described above. So, the bearer token is still needed, but in a proxied manner. Since there's not a request originating from Errai to intercept, we have to use this workaround.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/brmeyer/e30be3bad319affe7214.js"></script></div>
<div>
<br /></div>
<div>
We automatically add a <i>Hidden</i> input, called "Authorization", to the form. When the form is submitted, we're re-using the JSNI in <i>KeycloakBearerTokenInterceptor</i> to set the input's value to "Bearer [token]". Then, in the Servlet's <i>doPost</i>, the "Authorization" parameter is pulled from the <i>HttpServletRequest</i>. The token is then used on the proceeding call to the REST services.</div>
<div>
<br /></div>
<div>
One caveat that's often overlooked: if your form sends <i>multipart</i> data, such as our file upload, the "Authorization" parameter is a part of the request's file/form items, <b>not</b> in <i>request.getParameter("Authorization")</i>.</div>
<div>
<br /></div>
<div>
For GET, it's obviously easier. Simply add the "Authorization" parameter, identical to the above (if in a form) or by adding it to the URL query string. The Servlet grabs it through <i>request.getParameter("Authorization")</i>.</div>
Unknownnoreply@blogger.com17tag:blogger.com,1999:blog-5873740620497062724.post-25883327267578380892014-10-21T13:17:00.000-07:002014-10-21T13:17:20.561-07:00Using Polymer's Web Components with Errai<div dir="ltr" style="text-align: left;" trbidi="on">
Web Components is an emerging web technology that allows web developers to use custom HTML elements and encapsulation in their applications. Currently, <a href="https://www.polymer-project.org/" target="_blank">Polymer</a> is the leading web framework that implements this technology. A few members of the Errai community have expressed interest in using Polymer elements in their web apps, hence we spent some time creating an early prototype at <a href="https://github.com/errai/errai-tutorial/tree/web_components" target="_blank">Errai Tutorial - Web Components</a>. In this blog post, I will outline the steps needed to use Polymer components with Errai UI in your web application.<br />
<br />
<h3 style="text-align: left;">
Downloading Polymer Elements</h3>
Download Polymer and the relevant Polymer components, and place them under <i>src/main/webapp</i>. The Polymer elements and code used in our <a href="https://github.com/errai/errai-tutorial/tree/web_components">prototype</a> are located in the <i>components/</i> directory under <i>src/main/webapp/</i>. Detailed instructions on how to download and update Polymer's libraries and components can be found <a href="https://www.polymer-project.org/docs/start/getting-the-code.html" target="_blank">here</a>.<br />
<br />
<h3 style="text-align: left;">
Using Polymer Elements in Errai HTML Templates</h3>
In order to use Polymer elements in your web page with Errai UI, you can create an HTML layout using any combination of Polymer elements and regular HTML elements. For example, this template was created using Polymer's <span style="font-family: Courier New, Courier, monospace;"><paper-input></span> and <span style="font-family: Courier New, Courier, monospace;"><paper-button></span> elements in a <span style="font-family: Courier New, Courier, monospace;"><form></span> element:<br />
<br />
<script src="https://gist.github.com/divd/ca74fc8f51a78f48ecd8.js"></script>
The above example will also work with Errai Data Binding. You can further create your own custom element and use it in your HTML template. For information on how to create your own Polymer-based element, see <a href="https://www.polymer-project.org/docs/start/creatingelements.html" target="_blank">Creating elements - Polymer</a>.<br />
<br />
<div style="background-color: #ffc68d; border: 1px; margin: 0px 20px; padding: 10px; text-align: left;">
<b>Note: </b>
When importing Polymer elements into your app, the polyfill support script (platform.js) as well as the HTML imports required to use each element <b>must</b> be included in your GWT host page.</div>
<br />
<h3 style="text-align: left;">
Integration with GWT</h3>
To use Polymer's elements (or your own custom elements) with GWT, we need to create <i>Elements</i> and <i>Widgets</i>, similar to the ones for HTML elements that currently exist in GWT. You can create an <i>Element</i> class for the Polymer element by extending <a href="http://www.gwtproject.org/javadoc/latest/com/google/gwt/dom/client/Element.html" target="_blank">com.google.gwt.dom.client.Element</a> or one of its subclasses. The purpose of this class is to provide Java methods for the Polymer element, by wrapping calls to Polymer's methods and attributes in JSNI code. This <i>Element</i> class represents the Polymer element's DOM implementation.<br />
<br />
GWT uses <i>Widget</i> classes that wrap Elements, to provide user interaction capabilities. Thus for all UI-based elements, we need to create a <i>Widget</i> class that extends <a href="http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/ui/Widget.html" target="_blank">com.google.gwt.user.client.ui.Widget</a> or one of its subclasses. This <i>Widget</i> class should contain methods to handle user interaction with the Polymer element. Refer to the tutorial and to existing GWT <i>Elements</i> and <i>Widgets</i> for examples on how to create your own custom GWT widgets. Here is an example of how to use the <i>Element</i> class and <i>Widget</i> class to interact with the user and with other widgets in your app. The Polymer element used in this example is the <span style="font-family: Courier New, Courier, monospace;"><paper-button></span><span style="font-family: inherit;">. The example shows how to use the <i>PaperButton</i> <i>Element</i> and <i>Widget</i> classes to add an Enter key handler to the <i>ComplaintForm.</i></span><br />
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
The <i>PaperButtonElement</i> class provides JSNI methods to access the Polymer element's click() method:
<script src="https://gist.github.com/divd/3fc825adaeeecdb8786e.js"></script>
<br />
The <i>PaperButtonWidget</i> class creates a UI wrapper around the <i>PaperButtonElement</i>:
<script src="https://gist.github.com/divd/9b1f8ee7ed43df48104f.js"></script>
<br />
Finally, the <i>ComplaintForm</i> allows the user to submit the form by pressing Enter, which then calls the methods defined in the <i>PaperButton</i> classes above:
<script src="https://gist.github.com/divd/9aa790c402f00f1e4a80.js"></script>
<br />
<h3 style="text-align: left;">
Using Polymer Elements in your web app</h3>
<div>
As the example in the previous section illustrates, once you have the requisite <i>Element</i> and <i>Widget</i> classes, you can now use the Polymer element as a regular GWT widget in your web page, using <i>@Inject</i> or manual construction. All of Polymer's functionality should be accessible through the <i>Element</i> class, and you can now use the <i>Widget</i> class to make the element interact with the rest of your web app as needed.<br />
<br />
<h3 style="text-align: left;">
Styling Polymer Elements</h3>
<div>
An important feature of web components is that they provide style encapsulation from the rest of the document. You can take advantage of this feature to style your web components in Errai web apps as well, by using Polymer's style descriptors such as /deep/ and ::shadow (see this link about <a href="https://www.polymer-project.org/docs/polymer/styling.html" target="_blank">Polymer styling</a> for more information).<br />
<br />
While Polymer's default styling works out of the box, custom styles applied externally to Polymer elements do not. In order to use these styles, you need to add the attribute <a href="https://www.polymer-project.org/docs/polymer/styling.html#sdcss" target="_blank"><i>shim-shadowdom</i></a><b> </b>to your style tag. In this tutorial, the <i>shim-shadowdom </i>tag has been added to <i>application.css</i> in the <i>index.html</i> file, to enable external Polymer styling to work.<br />
<br /></div>
<div style="background-color: #ffc68d; border: 1px; margin: 0px 20px; padding: 10px; text-align: left;">
<b>Note: </b>
Currently, while Polymer can prevent styles from leaking <i>out of</i> the element's shadow DOM, <a href="https://groups.google.com/forum/#!msg/polymer-dev/BPZnbYXU7bs/3Y0IIM_1ax0J" target="_blank">styles can still leak <i>into</i> the custom elements' shadow trees</a>. Currently only Google Chrome offers complete style encapsulation. For other browsers, you may need to use custom identifiers to style elements outside of Polymer elements.</div>
<br />
<br />
The purpose of this Errai Web Components prototype is to illustrate how to use Polymer elements in your Errai web app. This is an early attempt to investigate how Errai can integrate web components into GWT apps. We welcome community feedback, so please feel free to contact us with questions, comments and suggestions regarding the use of Polymer and web components with Errai. </div>
</div>
Unknownnoreply@blogger.com8tag:blogger.com,1999:blog-5873740620497062724.post-5353852257769171192014-08-13T12:08:00.000-07:002014-08-13T12:08:07.458-07:00Errai 3.1.0.CR1, 3.0.2.Final and 2.4.5.Final released!Today we're happy to announce three new Errai releases!<br />
<br />
Errai <a href="https://issues.jboss.org/secure/ReleaseNote.jspa?projectId=12310890&version=12325327">3.0.2.Final</a> and <a href="https://issues.jboss.org/secure/ReleaseNote.jspa?projectId=12310890&version=12325392">2.4.5.Final</a> are maintenance releases containing fixes to all reported problems. 3.0.2.Final also contains significant performance improvements for development mode. Browser refreshes to load changes should be significantly faster on average due to a newly introduced caching mechanism and several classpath scanning optimizations.<br />
<br />
Errai <a href="https://issues.jboss.org/secure/ReleaseNote.jspa?projectId=12310890&version=12324525">3.1.0.CR1</a> contains all the same fixes and improvements as well as number of new features requested in our <a href="https://community.jboss.org/en/errai?view=discussions">forums</a>.<br />
<ul>
<li><i>Support for JSR-356 WebSockets:</i> ErraiBus can now leverage JSR-356 WebSocket support when available (i.e. in WildFly 8.0 or higher). Check out our <a href="http://docs.jboss.org/errai/3.1.0-SNAPSHOT/errai/reference/html_single/#_jsr_356_websocket_support_deploying_to_wildfly_8_0_or_higher">reference guide</a> for details. Thanks to Michel Werren for the pull requests!</li>
<li><i>Built-in offline manifest linker:</i> Errai now provides an <a href="http://docs.jboss.org/errai/3.1.0-SNAPSHOT/errai/reference/html_single/#Offline-Mode">offline linker</a> to generate HTML5 cache manifest files at compile time.</li>
<li><i>PushState support in Errai Navigation: </i>Errai Navigation can now optionally leverage HTML5 pushState (using Johannes Barop's great <a href="https://github.com/jbarop/gwt-pushstate">GWT library</a>). This allows for more flexibility when <a href="http://docs.jboss.org/errai/3.1.0-SNAPSHOT/errai/reference/html_single/#sid-54493676_ErraiUINavigation-PageStateParameters">designing your page URLs</a> (i.e. you can now make use of path parameters).</li>
<li><i>Errai Security Enhancements: </i>Errai Security now has a <a href="http://keycloak.jboss.org/">Keycloak</a> integration module for SSO support and allows for fine-grained authorization rules.</li>
</ul>
<div>
<br />
The last item deserves more details. So, here they are, provided by Max Barkley who also did most of the implementation work:<br />
<br /></div>
Errai Security provides a uniform, declarative syntax for securing RPC Services, Messaging Services, Navigation Pages, and UI elements (you can read more <a href="http://errai-blog.blogspot.ca/2014/05/whats-new-in-errai-3-part-2-role-based.html" target="_blank">here</a>). We've listened to your feedback and have some new features in Errai Security.<br />
<h3>
Fine-Grained Authorization with Custom Roles</h3>
<div>
In Errai 3.0, roles must be specified as String constants. In Errai 3.1, it is now possible to define a <span style="font-family: Courier New, Courier, monospace;">RequiredRolesProvider</span> that can return your custom implementation of the <span style="font-family: Courier New, Courier, monospace;">Role</span> interface. By overriding the <span style="font-family: Courier New, Courier, monospace;">equals</span> and <span style="font-family: Courier New, Courier, monospace;">hashcode</span> methods with your own role matching logic, it is now possible to create more fine-grained authorization rules.<br />
<br />
Here is an example two RPC Services that both require the same roles, but one uses the String role syntax while the other uses a <span style="font-family: Courier New, Courier, monospace;">RequiredRolesProvider</span>:<br />
<br />
<script src="https://gist.github.com/mbarkley/e0f92e3a081747d42455.js"></script>
Note that implementations <span style="font-family: Courier New, Courier, monospace;">RequiredRolesProvider</span> will be looked up through the bean manager, so they can inject dependencies and use other IOC features.<br />
<br />
<h3>
Keycloak SSO Integration</h3>
</div>
<div>
<a href="http://keycloak.jboss.org/" target="_blank">JBoss Keycloak</a> is a framework that makes Single Sign On (SSO) and Social Media logins a walk in the park. In Errai 3.1, Errai Security has a keycloak module that provides an implementation of the <span style="font-family: Courier New, Courier, monospace;">AuthenticationService</span> that can accept logins from Keycloak.</div>
<div>
<br /></div>
<div>
The best part is that you can still use this feature with the <span style="font-family: Courier New, Courier, monospace;">PicketLinkAuthenticationService</span> (or your own custom implementation) if you want to also allow logins from your own database. When added to the classpath, the <span style="font-family: Courier New, Courier, monospace;">KeycloakAuthenticationService</span> will wrap any other <span style="font-family: Courier New, Courier, monospace;">AuthenticationService</span> it finds. This way, you can either direct your users to a Keycloak server for SSO, or call the <span style="font-family: Courier New, Courier, monospace;">AuthenticationService.login</span> method to log in through an alternate service.</div>
<div>
<br /></div>
<div>
You can read about configuring Keycloak with your app <a href="http://docs.jboss.org/errai/3.1.0-SNAPSHOT/errai/reference/html_single/#_using_keycloak_for_authentication" target="_blank">here</a>, or follow this <a href="https://github.com/errai/errai/blob/master/errai-demos/errai-security-demo/README.md" target="_blank">README</a> to see it in action with the Errai Security demo.</div>
<div>
<br /></div>
<div>
Happy coding and please keep the feedback and feature requests coming!</div>
Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-5873740620497062724.post-24789687948452144062014-06-02T15:51:00.000-07:002014-06-02T15:55:48.534-07:00Errai 3.0.0.Final released!Today we're excited to announce the <a href="http://search.maven.org/#search%7Cga%7C1%7Cg%3A%22org.jboss.errai%22%20AND%20v%3A%223.0.0.Final%22">Errai 3.0.0.Final</a> release! Don't worry if a feature you wanted didn't make it in yet. We'll switch our master branch to 3.1.0-SNAPSHOT where we'll be working on new features and merging your pull requests ;). Fixes will also be released as 3.0.x, if required.<br />
<br />
Check out the <a href="https://issues.jboss.org/secure/ReleaseNote.jspa?projectId=12310890&version=12324518">release notes</a> for details on all fixes and improvements of this release. Also make sure to read our recent blog posts introducing all new features of Errai 3.0 (<a href="http://errai-blog.blogspot.ca/2014/05/whats-new-in-errai-3-part-1-rpc.html">Part 1</a> on RPC enhancements, <a href="http://errai-blog.blogspot.ca/2014/05/whats-new-in-errai-3-part-2-role-based.html">Part 2</a> on Errai Security, <a href="http://errai-blog.blogspot.ca/2014/05/whats-new-in-errai-3-part-3-smaller-but.html">Part 3</a> as a summary of smaller features, and a <a href="http://errai-blog.blogspot.ca/2014/02/errai-forge-addon-release.html">description</a> of our Forge Addon).<br />
<br />
A big thank you to everyone who contributed features and patches as well as everyone who provided feedback and shared their experiences with us. We love working on open source.<br />
<br />
<span style="background-color: white; color: #202020; line-height: 19.5px;"><span style="font-family: inherit;">Please join us on Freenode #errai, the errai-dev mailing list, or on our <a href="https://community.jboss.org/en/errai?view=discussions">community forums</a>.</span></span><br />
<span style="background-color: white; color: #202020; line-height: 19.5px;"><span style="font-family: inherit;"><br /></span></span>
<span style="background-color: white; color: #202020; line-height: 19.5px;"><span style="font-family: inherit;">Happy Coding!</span></span><br />
<br />
<br />Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-5873740620497062724.post-77735916408164489352014-05-21T14:08:00.000-07:002014-05-21T14:08:47.869-07:00What's new in Errai 3? Part 3: The Smaller (But No Less Powerful) FeaturesThis is the third post in a series describing new features in Errai 3.0. This post is a summary of some of the smaller features and enhancements coming in 3.0.0.Final.<br />
<h3>
Improved HTML Form Support</h3>
<div>
Asynchronous form submission can make it difficult to trigger useful events in the web browser (such as prompting to remember a user's password). To help you overcome this issue, Errai UI now contains a base class for <i>@Templated</i> Widgets that provides better HTML form support.</div>
<div>
<br /></div>
<div>
By extending the <i>AbstractForm</i> class and invoking its submit method, Errai simulates native HTML form submission. Below is an example login form that causes modern browsers to prompt the user to remember a password when the "Login" button is clicked.</div>
<div>
<br />
<script src="https://gist.github.com/csadilek/970a5611ce568547d340.js"></script></div>
<h3>
Test Generation with the Errai Forge Addon</h3>
<div>
If you haven't heard, there is an <a href="https://github.com/errai/errai/tree/master/errai-forge-addon" target="_blank">Errai Addon</a> for <a href="https://github.com/forge/core#jboss-forge-20" target="_blank">JBoss Forge 2</a>. This addon can set up Errai in an existing Java project for running in Dev Mode or compiling to production mode. But in the 3.0.0.Final release, you will be able to use the addon to generate unit and integration tests.</div>
<div>
<br /></div>
<div>
Unit tests are generated with <a href="https://github.com/google/gwtmockito" target="_blank">GWT Mockito</a>. <a href="https://code.google.com/p/mockito/" target="_blank">Mockito</a> is a test framework that allows you to inject mocks into classes and assert conditions on how these mocks are used. GWT Mockito adds extra GWT compatibility, allowing you to test classes with <i>GWT.create</i> calls or JSNI methods.</div>
<div>
<br /></div>
<div>
Integration tests extend the <i>AbstractErraiCDITest</i> (which in turn extends the <i>GWTTestCase</i>). In addition to the normal GWTTestCase functionality, the <i>AbstractErraiCDITest</i> initializes the Errai framework, including the Message Bus and IoC/CDI container.</div>
<h3>
WildFly 8.0 Support for Dev Mode</h3>
<div>
Previously we announced an <a href="http://errai-blog.blogspot.ca/2013/11/new-development-mode-setup-in-errai-30.html" target="_blank">improved Dev Mode setup</a> using the JBossLauncher. This setup allowed the GWT Dev Mode to control a full JBoss 7 instance, making it easier to develop a GWT app using Java EE on the server.</div>
<div>
<br /></div>
<div>
It is now possible to use the this launcher with WildFly 8.0. If you haven't yet, give it a try since there have been many performance improvements to WildFly 8.0 that make a noticeable difference in startup time.<br />
<h3>
Asynchronous IOC with Fragment Control</h3>
</div>
<div>
Errai's <i>@LoadAsync</i> annotation allows for managed beans to be loaded asynchronously. That means the code for these beans will reside in a separate JavaScript file that will be downloaded the first time it is needed. In Errai 3.0.0.Final you have more control over these split points. A code fragment name can optionally be specified using a Java class literal (i.e. <i>@LoadAsync(Admin.class)</i> to group all beans related to admin functionality). GWT's code splitter will then put the code of all managed bean types with the same fragment name into the same code fragment (JavaScript file).</div>
<h3>
Error Detection for Common Pitfalls in Your IDE</h3>
<div>
By adding the following dependency to your project you will get automatic error detection for common Errai pitfalls directly in your IDE. While this covers an increasing amount of pitfalls, we are happy to accept your contributions. If you can think of more checks we should include please let us know or send us a pull request! Note that in Eclipse you will have to manually enable annotation processing: Go to <i>Eclipse Workspace Preferences->Maven->Annotation Processing</i> and select the "Automatically Configure JDT APT" radio button. In Eclipse you will also need to install the <i>m2e-apt </i>plugin.<br />
<br /></div>
<script src="https://gist.github.com/csadilek/7e82063c18b4b6a9bc44.js"></script>
<div>
<br />
That is all for today. Happy Coding!
</div>
Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-5873740620497062724.post-1098893057139285982014-05-08T12:36:00.000-07:002014-05-08T12:36:37.126-07:00What's new in Errai 3? Part 2: Role-Based Access Control and PicketLink IntegrationThis is the second post in a series describing new features in Errai 3.0. This article is about Errai Security, which provides role-based access control with optional PicketLink integration.<br />
<br />
<div>
Errai Security provides a declarative way of securing pages, UI elements, and remote services. Below we'll show how it is used, and how you can use it with PicketLink or another server-side security framework of your choice.</div>
<h3>
@RestrictedAccess</h3>
<div>
Role-based access control in Errai Security is focused around the @RestrictedAccess annotation. Whether you're securing a @Page, @Remote interface or UI element, you simply annotate the secured resource with @RestrictedAccess.</div>
<div>
<br /></div>
<div>
The annotation takes an optional array of role names (Strings). For a user to be able to access a resource, they must have all of these roles; if they do not have all of the required roles, we say that the user is <b>unauthorized</b>. @RestrictedAccess without roles blocks access to those not logged-in; if a user is denied access because they are not logged-in, we say that they are <b>unauthenticated</b>.</div>
<h3>
Restricting @Page</h3>
<div>
Here is an Errai Navigation @Page that restricts access to users lacking the <i>admin</i> role:</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/mbarkley/118e6c7ae3552d86db6a.js"></script></div>
<div>
<br /></div>
<div>
When a user is denied access to this page, one of two things will happen:</div>
<div>
<ul>
<li>They will be redirected to the application's <b>login page</b> if <b>unauthenticated</b>.</li>
<li>They will be redirected to the application's <b>security error page</b> if <b>unauthorized</b>.</li>
</ul>
<div>
You can define any Errai Navigation page as login page or security error page with the @Page annotation role attribute. For example, here is a class that functions as both a login and security error page:</div>
</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/mbarkley/10159d23919b8889e241.js"></script></div>
<h3>
Restricting @DataFields</h3>
<div>
In @Templated widgets, Errai Security can be used to apply CSS styles to template-bound fields (for example for hiding UI elements from unauthorized users).</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/mbarkley/9c78d53d7db6199171f3.js"></script></div>
<div>
<br /></div>
<div>
When a user lacks permissions for one of the @DataFields above, the element in the template will have the CSS class, <i>errai-restricted-access-style</i>, applied. The CSS definitions ensure that the admin anchor will not be displayed to unauthorized users while the logout anchor will only be seen by unauthenticated users.</div>
<h3>
Restricting Remote Services</h3>
<div>
Errai Security can be used to secure Errai Bus RPCs, JAX-RS Endpoints, and Errai Messaging Services. When access to a service is denied, a <b>UnauthenticatedException</b> or <b>UnauthorizedException</b> is thrown on the server, which can be handled on the client with an ErrorCallback.<br />
<br />
The default error handling provides behaviour similar to @RestrictedAccess on @Pages: unauthorized access causes navigation to the security error page and unauthenticated access causes navigation to the login page.</div>
<h4>
Errai Bus RPC</h4>
<div>
<script src="https://gist.github.com/mbarkley/03cd031cd51c3b635273.js"></script></div>
<h4>
Errai JAX-RS Endpoint</h4>
<div>
<script src="https://gist.github.com/mbarkley/dae9123a618295947739.js"></script></div>
<div>
<h3>
Authentication and Server-Side Integration</h3>
</div>
<div>
The single point of contact between Errai Security and your preferred server-side security framework is the <a href="https://github.com/errai/errai/blob/master/errai-security/errai-security-server/src/main/java/org/jboss/errai/security/shared/service/AuthenticationService.java" target="_blank">AuthenticationService</a>. This interface is used to log in and out, and obtain an instance of the current User. The AuthenticationService is an @Remote interface, so you can use Errai RPC to call it from the client.
<b>errai-security-picketlink.jar</b> provides a default <a href="https://github.com/errai/errai/blob/master/errai-security/errai-security-picketlink/src/main/java/org/jboss/errai/security/server/PicketLinkAuthenticationService.java" target="_blank">AuthenticationService implementation</a> using PicketLink. Using this implementation requires no configuration: just have the jar on your classpath and you're good to go.<br />
<br />
Here is a login page that uses an AuthenticationService caller for logging in.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/mbarkley/f40d774458c673f03ebd.js"></script></div>
<div>
<br /></div>
<div>
<h4>
Using a Custom AuthenticationService</h4>
</div>
<div>
Integrating Errai Security with a different security back-end is as simple as implementing the AuthenticationService, and making your implementation a valid CDI bean. You can even implement your own User and Role types: for example, the Errai JPA Demo <a href="https://github.com/errai/errai/blob/master/errai-demos/errai-jpa-demo-todo-list/src/main/java/org/jboss/errai/demo/todo/server/AuthenticationServiceImpl.java" target="_blank">AuthenticationService</a> uses a custom <a href="https://github.com/errai/errai/blob/master/errai-demos/errai-jpa-demo-todo-list/src/main/java/org/jboss/errai/demo/todo/shared/TodoListUser.java" target="_blank">User implementation</a> that is a JPA entity.</div>
<h3>
See It In Action</h3>
<div>
If you'd like to see Errai Security in action, you should checkout the <a href="https://github.com/errai/errai/tree/master/errai-demos/errai-security-demo" target="_blank">Errai Security Demo</a>. If you have any feedback, we'd love to hear it!</div>
Max Barkleyhttp://www.blogger.com/profile/03170705455986349394noreply@blogger.com6tag:blogger.com,1999:blog-5873740620497062724.post-34728395596793865482014-05-01T12:42:00.000-07:002014-05-01T12:53:23.927-07:00What's new in Errai 3? Part 1: RPC EnhancementsThis is the first post in a series describing new features in Errai 3 that we haven't blogged about so far. We have recently published the <a href="http://errai-blog.blogspot.ca/2014/04/errai-300cr1-released.html">first release candidate</a> and plan to release 3.0.0.Final by the end of the month.<br />
<br />
Today's focus is on enhancements made to Errai's RPC mechanism. You can find all details in our <a href="http://docs.jboss.org/errai/3.0-SNAPSHOT/errai/reference/html_single/">reference guide</a>.<br />
<br />
<b><span style="font-size: large;">Global Exception Handlers</span></b><br />
<br />
In your application you will likely find many remote procedure calls that potentially throw the same type of exception, usually related to some cross-cutting concern (i.e. authorization/authentication). Errai's new global exception handling feature supports handling these exceptions in a centralized way. It relieves you from having to provide error callbacks at each RPC invocation. Methods annotated with <span style="font-family: Courier New, Courier, monospace;">@UncaughtException</span> are called when an exception occurs during a remote call that is not handled by an error callback. This feature is also used internally by Errai's new security module that we'll describe in detail in a future post.
<br />
<b><br /></b>
<script src="https://gist.github.com/csadilek/448831e58680944a76ad.js"></script>
<br />
<b><span style="font-size: large;">Asynchronous handling of RPCs on the server</span></b><br />
<b><br /></b>Sometimes computing the result of an RPC call can take a significant amount of time (i.e. because a slow database query needs to be executed or a third party service needs to be contacted). It then might be preferable to release the request-processing thread so it can perform other work and provide the RPC result from a different execution context farther in the future. Errai provides a special return type for this named <span style="font-family: Courier New, Courier, monospace;">CallableFuture</span> which indicates to the RPC system that the result of the RPC will be provided asynchronously (after the remote method call has returned).
<br />
<br />
Here’s an example returning a future result of type String:<br />
<script src="https://gist.github.com/csadilek/0d99ef8c5491cb037e34.js"></script>
<script src="https://gist.github.com/csadilek/4b92f06d6bfec5b22270.js"></script>
<br />
<b><span style="font-size: large;">Enhancements to client-side remote call interceptors</span></b><br />
<br />
In Errai 3, the new annotation <span style="font-family: Courier New, Courier, monospace;">@InterceptsRemoteCall</span> can be used to define the interceptor target directly on the actual interceptor. This is useful in case you can't or don't want to annotate the remote interface with <span style="font-family: Courier New, Courier, monospace;">@InterceptedCall</span>. Client-side interceptors can now also be IOC managed beans, which means you can now simply @Inject dependencies into it. Thanks to Eric Wittman for implementing these features!<br />
<br />
<script src="https://gist.github.com/csadilek/ee8cd941cd3d0520f9c6.js"></script>
<br />
Stay tuned for more new features in Errai 3 and as always, feedback is welcome and appreciated!
Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-5873740620497062724.post-55627113991107024812014-04-26T08:25:00.000-07:002014-04-26T08:25:07.846-07:00Errai 3.0.0.CR1 released!The Errai team is proud to announce the availability of <a href="http://search.maven.org/#search%7Cga%7C1%7Cg%3A%22org.jboss.errai%22%20AND%20v%3A%223.0.0.CR1%22">Errai 3.0.0.CR1</a>. We have finished our series of milestone releases, completed and hardened all planned features and are now getting ready for the 3.0.0.Final release (planned for the end of May).<br />
<br />
Errai 3.0.0.CR1 contains stable versions of the new <a href="http://docs.jboss.org/errai/3.0.0.CR1/errai/reference/html_single/#_errai_security_2">Errai Security</a> and <a href="http://docs.jboss.org/errai/3.0.0.CR1/errai/reference/html_single/#sid-65274252">Errai Mobile</a> modules. Relative to the last milestone release, this release also brings <a href="https://issues.jboss.org/browse/ERRAI-703">improved code splitting</a> support in Errai IOC, development mode performance improvements and an improved Errai Forge Addon.<br />
<br />
Check out the <a href="https://issues.jboss.org/secure/ReleaseNote.jspa?projectId=12310890&version=12324517">release notes</a> for a full list of fixes and improvements and watch this space for more details as we're moving towards 3.0.0.Final. Please upgrade your projects and help us test and harden Errai 3.<br />
<br />
Our project <a href="https://docs.google.com/document/d/1luJzaZzSwsLyt4dY_jyot1ERpJ8fC1lQD1VXG7Yof3g">roadmap</a> can be found here. We're always looking for feedback!<br />
<br />
Please join us on Freenode #errai, the errai-dev mailing list, or on our <a href="https://community.jboss.org/en/errai?view=discussions">community forums</a>.<br />
<br />
Happy coding!Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-5873740620497062724.post-33215522119289778842014-03-05T12:24:00.002-08:002014-03-05T12:24:40.659-08:00Have you taken Errai Data Sync for a spin yet?Last June we released the first version of the Errai Data Sync module. It complements Errai JPA and provides functionality to automatically keep your local entities (persisted in local storage) in sync with the server. See the <a href="http://errai-blog.blogspot.ca/2013/06/take-data-sync-for-spin.html">original blog</a> post for details.
<br><br>
We have just added a new declarative, annotation-driven API that will make using Errai Data Sync even easier. Here's a short example: <br>
<br>
<script src="https://gist.github.com/csadilek/9373876.js"></script>
<br>
When a user navigates to this page, either by browsing to <i>#GroceryListView;activeUserId=1</i> or by transitioning from another page, a data sync worker will start to periodically synchronize the entities that match the query specified in the parameter to <i>@Sync</i>. This query parameter refers to a named query defined on an entity type: in this case <i>GroceryList</i>. The <i>@SyncParam</i>s refer to fields of the enclosing managed bean to use them as query parameter values. In the example above we make use of the <i>activeUserId</i> field to only synchronize the grocery list of the currently active user.
<br><br>
The <i>onDataSyncComplete</i> method is invoked every time a synchronization cycle completes. It can be used to update the UI with the new data or to resolve conflicts. By default, conflicts are resolved in a favour of the server but you can change this behaviour (see the <a href="http://docs.jboss.org/errai/3.0-SNAPSHOT/errai/reference/html_single/#sid-71467090">documentation</a> for details).
<br><br>
We encourage you to try out Errai DataSync and are eager to get your feedback! What additional functionality would you like to see? Do you like the API or have changes to propose?
<br><br>
Please join us on Freenode #errai, the errai-dev mailing list, or on our <a href="https://community.jboss.org/en/errai?view=discussions">community forums</a>.Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-5873740620497062724.post-50308166795189879952014-02-07T12:41:00.000-08:002014-04-22T08:31:55.717-07:00Errai Forge Addon ReleaseMany of you may have followed the recent release of <a href="https://github.com/forge/core#jboss-forge-20" target="_blank">Forge 2.0.0.Final</a>. With this new release there is an accompanying Eclipse plugin so that you can now use Forge and its addons from the comfort of your IDE.<br />
<br />
And with that preface, we at Errai are happy to announce the first release of the Errai Forge Addon. With Forge 2.0 and the Errai Addon, it's now easier than ever to create a new Errai project in Eclipse. You can find instructions on how to use Forge 2.0 and the Errai Addon <a href="https://github.com/errai/errai/blob/3.0.0.20140325-M5/errai-forge-addon/README.asciidoc" target="_blank">here</a>.<br />
<br />
Here is a quick overview of its features:<br />
<ul>
<li>Perform a basic setup for an Errai project, including configuring maven plugins for running development mode with JBoss AS 7 and Wildfly 8 and configuring production compilation.</li>
<li>Add Errai to an existing GWT project.</li>
<li>Add or remove dependencies and configurations for Errai features to a Maven/Eclipse project, including:</li>
<ul>
<li>Errai Messaging</li>
<li>Errai IOC</li>
<li>Errai CDI</li>
<li>Errai UI</li>
<li>Errai Navigation</li>
<li>Errai Databinding</li>
<li>Errai Jaxrs</li>
<li>Errai JPA</li>
<li>Errai Datasync</li>
<li>Errai Cordova</li>
</ul>
</ul>
<div>
Note that the plugin will be compatible with our upcoming milestone 4 release. Until then you can try it out with Errai 3.0-SNAPSHOT.</div>
Max Barkleyhttp://www.blogger.com/profile/03170705455986349394noreply@blogger.com8tag:blogger.com,1999:blog-5873740620497062724.post-86009969792032589772013-11-07T15:46:00.001-08:002013-11-07T15:46:06.508-08:00Errai and GWT: State of the UnionIf you've seen our recent blog posts, you know that work on Errai 3 is progressing quickly with even more additions to our declarative programming model, performance improvements and a number of simplifications that aim to make getting started a lot easier. All details can be found in our <a href="https://docs.google.com/document/d/1luJzaZzSwsLyt4dY_jyot1ERpJ8fC1lQD1VXG7Yof3g/edit">roadmap</a>. Please take a few minutes to review our plan. We're always looking for feedback. At Red Hat we innovate together with our open source communities and we rely on your input and collaboration!<br />
<br />
As you know, Errai is based on <a href="http://www.gwtproject.org/">GWT</a> which itself is a healthy open source project with a large and active community. GWT is a fantastic technology that not only boosts developer productivity, especially in complex browser-based applications, its extensibility also allows for building frameworks like Errai on top of it. Since 2006 I have been using GWT successfully in a number of different projects and I am happy to announce that I got the opportunity to join the <a href="https://groups.google.com/forum/#!topic/gwt-steering/pvTD10S-P4g">GWT Steering Committee</a>. I am honored to represent Red Hat and continue the work that Mike Brock has led in regards to Errai and GWT. I look forward to contributing to one of the best ecosystems in the Java open source landscape.<br />
<br />
Red Hat's investment in GWT is not only based on Errai but also on a number of customer facing applications as well as new project called <a href="http://droolsjbpm.github.io/uberfire/">UberFire</a>, a web-based workbench framework implemented with GWT and Errai, led by Jonathan Fuerth. <br />
<br />
Errai will also be represented at the <a href="http://gwtcreate.com/">GWT.create</a> conference, the biggest GWT community event happening in San Francisco and Frankfurt this December. Jonathan and myself will be presenting in San Francisco, Erik Jan de Wit in Frankfurt. We hope to meet many of you at these events and discuss the future of Errai and GWT or engage in other technology debates :).<br />
<br />
GWT and Errai are both mature technologies with a bright future ahead!<br />
<br />
<div id="stcpDiv" style="left: -1988px; position: absolute; top: -1999px;">
We hope to meet many of you at these eventsWe</div>
<div id="stcpDiv" style="left: -1988px; position: absolute; top: -1999px;">
We hope to meet many of you at these events</div>
Unknownnoreply@blogger.com11tag:blogger.com,1999:blog-5873740620497062724.post-44169928919730960862013-11-06T09:50:00.000-08:002013-11-06T09:50:31.781-08:00New Development Mode Setup in Errai 3.0 Milestone 2One of the new features in our <a href="http://errai-blog.blogspot.ca/2013/11/milestone-2-of-errai-30-and-errai.html" target="_blank">latest 3.0 release</a> is a new development mode setup using JBoss 7 (or Wildfly 8). Until this point, our demos have either:<br />
<div>
<ol>
<li>used an embedded Jetty server, or</li>
<li>have required you to manually run your own JBoss AS instance.</li>
</ol>
<div>
But both of these setups have drawbacks. Having an embedded server makes the development process much more convenient, but it is often necessary to develop with an enterprise capable application server.</div>
</div>
<div>
<br /></div>
<div>
The newest development mode setup brings us one step closer to having our cake and eating it too. Using the <a href="https://community.jboss.org/wiki/CommandLineInterface" target="_blank">JBoss CLI interface</a>, we now control an external JBoss or Wildfly instance with the GWT-Maven plugin.</div>
<h4>
The Setup</h4>
<div>
All it takes to get started is two new Errai dependencies and some minor changes to the gwt-maven-plugin configurations.</div>
<h4>
The Workflow</h4>
<div>
Want to run your app in development mode? Just ru<span style="font-family: inherit;">n <code>mvn gwt:run</code> .</span><br />
<span style="font-family: inherit;"><br /></span>
Need to update the server-side code? Run <code>mvn compile</code> and then press "Restart Server".</div>
<div>
<h4>
How Can I Get In On This?</h4>
</div>
<div>
You can check out this feature on <a href="https://github.com/errai/errai-tutorial/tree/master" target="_blank">errai-tutorial</a>. In our new <a href="https://github.com/errai/errai-tutorial/blob/master/tutorial-guide/INDEX.adoc" target="_blank">tutorial guide</a> you can get a thorough introduction on how to setup your environment to run and develop with Errai. (But you can skip to <a href="https://github.com/errai/errai-tutorial/blob/master/tutorial-guide/DEVELOP.adoc" target="_blank">here</a> to get straight to the development mode instructions).</div>
<h4>
But What If I'm Still On Errai 2.4.x?</h4>
<div>
Don't worry, you're invited too! The two new dependencies (errai-cdi-jboss and errai-client-local-class-hider) have no other Errai dependencies themselves. That means you can add these artifacts to your maven project without any conflicts. Just add the following to your pom:<br />
<script src="https://gist.github.com/mbarkley/44b0093b36123b179ac7.js"></script>
And make sure that your gwt-maven-plugin configuration is consistent with the following (specifically the extraJvmArgs, noServer, server properties):<br />
<script src="https://gist.github.com/mbarkley/93871b4ee5e0d297d001.js"></script>
Hope you enjoy it.</div>
Max Barkleyhttp://www.blogger.com/profile/03170705455986349394noreply@blogger.com7tag:blogger.com,1999:blog-5873740620497062724.post-1331318651863174192013-11-01T10:51:00.001-07:002013-11-03T08:49:10.762-08:00Milestone 2 of Errai 3.0 and Errai 2.4.2.Final released!We've just released the second milestone of Errai 3.0 with a long list of <a href="https://issues.jboss.org/secure/ReleaseNote.jspa?projectId=12310890&version=12321999" target="_blank">fixes and enhancements</a>. The exact version number is 3.0.0.20131101-M2. The high level roadmap for Errai 3 can be found <a href="https://docs.google.com/document/d/1luJzaZzSwsLyt4dY_jyot1ERpJ8fC1lQD1VXG7Yof3g/" target="_blank">here</a>. We're always looking for feedback! What features/improvements would you like to see and what is most important to you and your applications? Feel free to leave a comment on this blog, create a <a href="https://community.jboss.org/en/errai?view=discussions" target="_blank">forum post</a> or file a <a href="https://issues.jboss.org/browse/ERRAI" target="_blank">JIRA</a> for us.<br />
<br />
Watch this space for a follow up post by Max Barkley showing the new development mode support for JBoss AS 7 or WildFly 8 in Errai 3. This will greatly simplify the getting started experience and allow you to develop and test an Errai/GWT application in your actual runtime container. <br />
<br />
Errai 2.4.2.Final was also just released and contains a <a href="https://issues.jboss.org/secure/ReleaseNote.jspa?projectId=12310890&version=12323148" target="_blank">small number of fixes</a>. Most importantly it makes sure applications built with Errai 2.4 can be deployed to WildFly 8.0.0.Beta1.<br />
<br />
Happy coding!<br />
<br />Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-5873740620497062724.post-33298954969888881382013-10-07T07:45:00.000-07:002013-10-07T07:45:18.599-07:00More Errai Basics -- Climb on the Magic Message Bus!In my <a href="http://errai-blog.blogspot.ca/2013/08/block-drop-fun-demo-and-tool-for.html" target="_blank">last post</a>, I talked about <a href="https://docs.jboss.org/author/display/ERRAI/Events" target="_blank">Errai CDI Events</a> and began showing how they can be used to implement part of a typical lobby page for a multiplayer web-game. Near the end we encountered a typical use case that could not be handled by Events. As promised, I will now discuss how the <a href="https://docs.jboss.org/author/display/ERRAI/Messaging" target="_blank">Errai Message Bus</a> can be used by the server to target a subset of the connected clients.<br />
<br />
<h3>
The Problem</h3>
<div>
To quickly recap: we have a set of clients in a game room lobby. We want <b>Client A</b> to invite <b>Client B</b> to a game. We've already figured out how to send an <b>invitation e</b><b>vent</b> from Client A to the server, but we need a way to relay this invitation to Client B without broadcasting it to all the other clients.</div>
<h3>
Some Message Bus Basics</h3>
<h4>
Service Endpoints</h4>
<div>
The Errai Message Bus is used to send messages between service endpoints. Defining a service endpoint requires only two things:</div>
<div>
<ol>
<li><b>Subject</b>: A string (not necessarily unique), used by senders to address messages to this endpoint</li>
<li><b>Callback</b>: A method to be invoked by Errai when a message to this endpoint is received</li>
</ol>
<div>
When an endpoint is created we say that code has <b>subscribed</b> to the given subject. It is possible to dynamically define service endpoints, but as with most features of the framework the declarative syntax is preferable. Here is an example declaring a service in Errai.<br />
<br /></div>
<script src="https://gist.github.com/mbarkley/e91aadfa30471e9dec61.js"></script>
</div>
<div>
It is also possible to annotate methods, such that a class may offer multiple services.<br />
<br />
<h4>
Sending a Message</h4>
</div>
<div>
To send a message we construct it with the <b>MessageBuilder</b> and then send it with the <b>MessageBus</b> like so.</div>
<div>
<br />
<script src="https://gist.github.com/mbarkley/3889279f4448ba5aa373.js"></script></div>
<div>
<br />
It is possible to send objects with a message by adding parts. In the following example we will send a Greeting object to everyone subscribed to the subject "LonelyPeople".<br />
<br />
<script src="https://gist.github.com/mbarkley/5eaf44998ecf6f4368ce.js"></script>
<br />
<h4>
Message Visibility</h4>
</div>
<div>
As with Errai CDI Events, there is only one degree of visibility of message. If the server sends a message to the subject "ErraiLovers", every subscriber to this subject will receive the message. But if a client sends a message to "ErraiLovers", only subscribers on that same client and the server will receive it.</div>
<h3>
Back to the Lobby</h3>
<div>
As you may have already guessed, a simple way to deliver messages to a single client is to dynamically subscribe them to a unique service endpoint.</div>
<h4>
Using Unique Ids</h4>
<div>
Here is the simple model used in <a href="http://blockdrop-erraiproject.rhcloud.com/App.html" target="_blank">Errai Block Drop</a> that can be used to establish a direct line of communication to a single client.</div>
<div>
<ol>
<li>When a client first joins the lobby in Block Drop, they <b>fire</b> a <b>CDI Event to the server</b></li>
<li>The server <b>generates</b> a <b>unique id</b> and adds the client to the lobby</li>
<li>The server<b> fires </b>back the<b> unique id</b> using a <a href="https://docs.jboss.org/author/display/ERRAI/Events#Events-Conversationalevents" target="_blank">Conversational Event</a> (which will only be observed by the original client)</li>
<li>The <b>client observes the event</b> and <b>subscribes</b> to the subject "client<i>id</i><id>" where <i>id</i><id> is the unique id received from the server</id></id></li>
</ol>
<div>
(For those who prefer the concrete, here are the implementations of this pattern in block-drop: <a href="https://github.com/mbarkley/block-drop/blob/master/src/main/java/demo/server/Server.java#L182" target="_blank">server side</a>, <a href="https://github.com/mbarkley/block-drop/blob/master/src/main/java/demo/client/local/lobby/Lobby.java#L178" target="_blank">client side</a>, and <a href="https://github.com/mbarkley/block-drop/blob/master/src/main/java/demo/client/shared/meta/Player.java" target="_blank">shared code</a>. You'll note that the client side code uses dynamic subscription, since the client's unique id cannot be known at compile time.)</div>
<h4>
Finishing the Invitation</h4>
<div>
With services based on unique ids setup for each player, it is now possible for server to target individual players in an invitation by accessing their unique ids. The relayed invitations are sent using the <b>MessageBuilder</b> as previously demonstrated. (Once again, here is the <a href="https://github.com/mbarkley/block-drop/blob/master/src/main/java/demo/server/Server.java#L219-L239" target="_blank">Block Drop implementation</a>.)</div>
<div>
<br /></div>
<h3>
Final Note</h3>
<div>
I hope this helps you to understand the power and flexibility that the Errai Bus provides. This is just one example out of the plethora of potential use cases that the Message Bus could fulfill. When you want the loose-coupling of CDI Events, but need a more fine-grained (or dynamic) control over recipients, Errai Messaging might be the right fit for the job.</div>
</div>
Max Barkleyhttp://www.blogger.com/profile/03170705455986349394noreply@blogger.com5