How to use JSF Expression Language in predesigned plain HTML page

Question

JSF uses its own tags generally in XHTML page (ex : h:inputText etc). But suppose that we have an already designed plain HTML page and we want to use JSF Expression Language (EL) on it. How to achieve it?

<div class="col-md-10 col-md-offset-1">
  <form>
    <div class="input-group">
      <input id="textField" type= "text" class="form-control" name="searchingWord" placeholder="Search Something ..." value="#{wordController.searchingWord}"/>
      <span class="input-group-btn"> <a id="searchButton" class="btn btn-danger" href="search.html"> SEARCH </a> </span>
    </div>
  </form>
</div>

Answer 1

Easiest way to turn a plain HTML element into a JSF component is to replace id by jsf:id.

<... xmlns:jsf="http://xmlns.jcp.org/jsf">
...
<form jsf:id="form">
    ...
    <input jsf:id="textField" ... />
    ...
</form>

Rest is automatic if you map the FacesServlet on the URL-pattern matching the HTML pages (e.g. *.html). This JSF 2.2+ feature is called "passthrough elements".

See also:

• Is it possible to use JSF+Facelets with HTML 4/5?