AngularFacessimpliying JSF

AngularFaces 2.1 Blurs the Difference Between JSF and HTML

I always considered JSF to be to verbose, to ceremoniously. AngularFaces allows you to write JSF pages that almost look like HTML pages.

What it looks like

JSF 2.2 introduced the new HTML5 style of writing JSF pages. Basically, that’s ordinary HTML decorated by a few JSF attributes. AngularFaces picks up this idea and takes it to another level. For example, look at this snippet from my Tetris demo that demonstrates both BootsFaces and AngularFaces 2.1 at the same time:

  <body style="width:1000px" 
          <tab title="Settings">
            <b:panelGrid colSpans="3,9">
              <selectBooleanCheckbox value="{{settingsBean.preview}}" 
                                     caption="preview (not implemented yet)" />
              <selectBooleanCheckbox value="{{settingsBean.ignoreGravity}}" 
              <inputText value="{{settingsBean.numberOfColumns}}" 
                         label="columns (width)"/>
              <inputText value="{{settingsBean.numberOfRows}}" 
                         label="rows (height)"/>
            <b:commandButton value="apply changes" ng-show="showApplyButton" />
            <messages showSummary="true" showDetail="true" globalOnly="true"  />

The embedded preview doesn’t work perfectly because of the scrollbar. Visit for a better experience.


You have to add a few lines to the web.xml to activate the feature. AngularFaces notifies you if you forget to add the context parameter:


Simplified JSF tags

The custom tag decorator of AngularFaces allows you to omit the h: prefix of <h:body>,<h:form> and <h:messages>. Plus, the HTML5 style of JSF 2.2 is supported, so you can write most forms in manner that strongly resembles native HTML.

The same applies to drop-down-menus (aka comboboxes, aka SelectOneMenu in JSF notion). Forget about <f:selectItem label=""/>. A simple <option> tag does the trick just as well:

<selectOneMenu value="{{carBean.type}}" id="typeID" label="Select your car">
  <option value="">(Please select)</option>
  <option>         Cinquecento    </option>
  <option>         Civic          </option>
  <option>         Astra          </option>
  <option>         Megane         </option>

The traditional <f:selectItems > is still needed to display ArrayList or HashMaps generated on the backend. But for simple use cases AngularFaces enables you to use simple HTML code.

Translation to foreign languages

AngularFaces simplifies the translation support of the previous version even further. Most attributes that are likely to contain a text are translated automatically. Sometimes, this isn’t enough. To translate an arbitrary text, you can simply surround it by an <translate> tag:

<translate>This text is translated to the reader's language!</translate>

The language files are simple property files in the root folder of your classpath. Read the full story at


If AngularFaces detects BootsFaces in your application’s classpath, it activates special support for BootsFaces. Most BootsFaces tags can be used without the b: prefix. Only tags that may be confused with a standard JSF tag require the prefix. This comes in handy for the structure tags, like <b:container>,<b:row> and <b:column>:

     <column span="2">
       small column
     <column span="4">
       medium column
     <column span="6">
       wide column

Leave a Reply

Your email address will not be published.