AngularFaces: Synchronize Angular Models With JSF Beans

Introducing <a:sync>

This component is different.

Thus far every AngularFaces component was essentially a JSF component with some AngularJS sugar on top of it. <a:sync> works the other way round. It enables a pure AngularJS application to benefit from the JSF engine. Every time a JSF request is submitted, <a:sync> moves parts of the AngularJS model to the JSF bean's attributes. A little later, when the response is send to the client, <a:sync> injects JSF bean attributes into the model of AngularJS.

Strictly speaking, the "a" prefix of the library makes <a:sync> sort of a misnomer. It's not about doing thing in an asynchronous way. It's about synchronizing AngularJS models with JSF beans.

Update Sept 16, 2014

AngularFaces 2.0 takes a different - and better - approach to adding fuctionality to JSF. This article describes the older version AngularFaces 1.0. However, <a:sync> is also part of the new version. Now it's called <ngsync>, and synchronizing data from the client back to the server has been postponed to version 2.1 of AngularFaces. Have a look at the tutorial at AngularFaces.com if you're interested in AngularFaces 2.0 and above.

How it's used

<a:sync> takes two parameters:

value denotes the JSF bean's attribute.
direction can take three values: direction="clientToServer" and direction="serverToClient" makes <a:sync> send data in one direction only. To achieve real two-way-synchronization set direction to both, or simply omit the parameter (direction="both" is the default value).

The value attribute also defines the AngularJS model attribute. For the sake of simplicity, only the term following the last dot is used as AngularJS attribute name. For instance,

injects the interest rate into $scope.interestRate.

Dealing with objects

Values can be both elementary bean attributes - ints, doubles, strings, just to name a few - and objects. Basically you can synchronize every object that can be serialized by Google's Gson library. You can send almost every object from the server to the client. However, when it comes to sending data to the server, there's a catch: type erasure. Gson cannot reconstruct generic data structures such as ArrayList and HashMap. If you need to send such a data structure to the server, you'll have to wrap it in a non-generic class.

AngularJS bootstrap

AngularFaces has to re-init AngularJS after each request. Unfortunately this means every variable of the scope is lost. Best you simply synchronize every important variable with the back end. <a:sync's> ability to synchronize entire objects should make this an easy task.

<a:sync> live demo

There's a tiny live demo at the showcase of AngularFaces. It's a simple loan calculator. Simple calculations are done on the client. But when it comes to generating the amortization table, storing it in a document management system and exporting it as a PDF file, you're probably better of with Java. So the amortization table is calculated on the server when the command button is hit.

I mentioned above <a:sync> allowes for pure AngularJS applications. Obviously, "pure" is a little exaggeration. AngularFaces applications want to use JSF, so they need a small JSF skeleton. But you can write an application consisting of an AngularJS part and an JSF part living in peaceful coexistence. They exchange data via <a:sync>, and that's it. So you're free to chose a fairly loose coupling via <a:sync> or a much stronger coupling using the other AngularFaces components, such as <a:inputText>.

interest rate: % p.a.

Javascript API

AngularFaces didn't implement a Javascript API yet, but probably you don't need it, anyways. In most cases it suffices to render an invisible command button (using CSS, not using rendered='false'!) and to simulate a button click via Javascript.

Beyond Java