AngularFaces: Check Boxes, Drop Down Menus And Tables

Posted on Posted in AngularFaces, AngularJS, JSF, simpliying JSF

Fork me on GitHubThe AngularFaces saga continues! AngularFaces now offers seven components, and I learned how to angularize JSF components without having to derive from them.

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. Have a look at the tutorial at if you’re interested in AngularFaces 2.0 and above.

Since my last AngularFaces post I’ve added two simple components: <a:selectBooleanCheckbox> and <a:selectOneMenu>. Suffice it to say they are derived from the corresponding PrimeFaces components and work exactly the same way <a:inputText> does.

Angularizing data tables proved to be much more difficult.

This didn’t come as a surprise. AngularJS and JSF treat tables in a fundamentally different way. Adding insult to injury, the PrimeFaces data table component is a highly elaborated tool. I didn’t expect to be able to port the full wealth of features to AngularFaces.

However, I was disappointed to see how little is possible. My first approach was to angularize each cell of the data table individually. That approach seemed to work fine until I remembered Angular’s ng-repeat directive. JSF renders each row of the table. AngularJS forbids to do so. It wants you to define a single row of the table and uses it as a template. The table is built on the client using the model’s data.

In my eyes, the Angular approach is much more sensible in a Javascript-centric environment, so I decided to follow it. Unfortunately, this means I have to write my own data table component from scratch. I had to abandon my preferred approach: to derive from a PrimeFaces class and to modify it as little as possible.

The current state of development is a very simple data table allowing you to display <h:outputTexts> as well as editable <h:inputTexts>, <h:selectBooleanCheckboxes> and <h:selectOneMenus>. The funny thing is simple JSF components currently work better than their AngularFaces counterparts.

An editable AngularFaces data table. AngularFaces is a JSF component library bringing AngularJS support to JSF. (C) 2013 by Stephan Rauh,

There’s a live demo at AngularFaces’s show case. You can find the example’s source code at AngularFaces GitHub repository.. Don’t be surprised if the source code changes rapidly: the data table component is far from being finished.

The next challenge will be to send the edited content back to the JSF bean. As long as you simply edit the cell content, this shouldn’t be too difficult. However, AngularJS allows you to add or remove columns on the fly. Clicking a command button should add or remove the corresponding rows on the server side, too. At this point, it’s a pity Java 5 introduced generic data types with type erasure. So there is no simple generic way to add elements to an array. Such a feature would come in handy to implement a generic AngularFaces “add row” button. Most likely I’ll have to resort to a clumsy solution, such a using a dedicated attribute:

<a:dataTable var="car" value="#{tableBean.carsSmall}" 
   showAddButton="true"                                  <!-- yet to be implemented -->
   elementClass="de.beyondjava.jsf.sample.datatable.Car" <!-- yet to be implemented -->

Further reading
The AngularFaces GitHub repositoy. You can participate with the project by forking AngularFaces and sending me a pull request.
live demo of AngularFaces on OpenShift.

3 thoughts on “AngularFaces: Check Boxes, Drop Down Menus And Tables

  1. HI,

    I would like to particape in your project by helping you to improve angularfaces datatable as datatable.js. The kind of datatable with sorting column,pagination and search at the navigation bar. I think this would be very usefull for many users,


    1. Great! The datatable really needs some improvement :). I’m looking forward to your contributions!


Leave a Reply

Your email address will not be published.