Using native HTML tags

The idea of the JSF 2.2 HTML5 dialect is to start with a native HTML page, and to add a few JSF attributes to make it an JSF view. AngularFaces take this idea to another level.

AngularFaces allows you to use these tags without a preceding "h:", even if there's no "jsf:" attribute:

<head /> becomes <h:head />
<body /> becomes <h:body />
<form /> becomes <h:form />
<label /> becomes <h:outputLabel />
<button /> becomes <h:commandButton (unless it has a "jsf:outcome" attribute, which converts <button /> into an <h:button>). />
<input /> can become many things, depending on the "type" attribute. AngularFaces 2.0 allows you to drop the "type" attribute. In this case, the type is derived from the JSF beans type. Numeric datatypes become "text='number'", java.util.Date becomes "type='date", boolean turns the input field into a check box and everything else becomes "type='text'".

What it looks like

Even if it's only a handful of changes, it's astonishing how much tidier these few changes make your JSF file looks:

<f:view xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:jsf="http://xmlns.jcp.org/jsf"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:ng="http://xmlns.jcp.org/jsf/passthrough">
  <head>
    <title>AngularFaces 2.0 Tetris demo</title>
  </head>
  <body style="width:1000px" 
    ng-controller="AngularTetrisController"
    ng-app="AngularTetris">
    <form>
      <h3>AngularTetris</h3>
      <h:panelGrid columns="3">
        <input jsf:value="{{settingsBean.numberOfColumns}}" />
        <input jsf:value="{{settingsBean.numberOfRows}}" />
        <input jsf:value="{{settingsBean.preview}}" />
        <input jsf:value="{{settingsBean.ignoreGravity}}" />
      </h:panelGrid>
    </form>
  </body>
</f:view>