DirkReske.de

Have you ever tried to edit your jsf code using a visual designer like dreamweaver? Or do you get your html layout from a professional designer and have to “translate” it to jsf?

In the first case, most times it will be look very strange, because the designer doesn’t understand the jsf tags and so it don’t know how to display it.

If you want to create a fast jsf prototype of your html layout you can use the jsfc attribute provided by the facelets compiler. By adding this attribute to standard html tags, you can tell the compiler, in which jsf component it has to “translate” the html component.

See the following simple html example:

<table>

  <tr>

    <td><strong>Name</strong></td>

    <td><strong>eMail</strong></td>

  </tr>

  <tr>

    <td>John Doe</td>

    <td>jon@doe.de</td>

  </tr>

</table>

You can convert this by replacing all with a h:dataTable tag, or you can use the jsfc attribute in several ways.
One way could be:

<table>

  <tr>

    <td><b>Name</b></td>

    <td><b>eMail</b></td>

  </tr>

  <tr jsfc="ui:repeat" value="#{userListBean.users}" var="user">

    <td>#{user.name}</td>

    <td>#{user.email}</td>

  </tr>

</table>

You see, there is no jsf tag in this code. Sou you can edit this html using your favorite designer, it will simply ignore the unknown attributes.

Another way would be, telling the facelets compiler to render the table as a h:dataTable, but because of the header row, you’ll have to use the f:facet tag.

<table jsfc="h:dataTable" value="#{userListBean.users}" var="user">

  <tr>

    <td jsfc="h:column">

      <f:facet name="header">Username</f:facet>

      #{user.name}

    </td>

    <td jsfc="h:column">

      <f:facet name="header">eMail</f:facet>

      #{user.email}

    </td>

  </tr>

</table>

So this way you still have to use jsf tags and so the visual designer can’t interpret it correctly.