Facelets is a great template framework that sits on top of JSF.  They have some fun template includes and parameters that you can pass into the included templates.  Here is an example with one gotcha pertaining to the parameter name.



If I want to do an include and pass in some sort of parameter value, I could do this:

```xml
<ui:include src="inclusion.xhtml">
  <ui:param name="ilikebeans" value="true" />
</ui:include>
```


Thus, in the inclusion.xhtml file, I could reference #{ilikebeans}, and the value would be "true".

Parameters can also be included on child templates and then read on parent templates.  Here's an example:

Parent:

```xml
<ui:composition>
  
  <ul>
    <li class="#{tab eq 'info' ? 'selected' : ''}">Info tab</li>
  </ul>
</ui:composition>
```

Child:

```xml
<ui:composition template="parent.xhtml">
  
  <ui:param name="tab" value="info" />
</ui:composition>
```

Thus, the child template can have certain values that affect the parent.  As seen in the example, this could be useful for showing certain tabs in a list as selected when that particular page (the child) is shown.

One note on my findings for parameter names...  they cannot have hyphens (-) in the name!  Otherwise, the value does not come thru properly.  Beats me!

Have fun with Facelets!

Facelets is a great template framework that sits on top of JSF.  They have some fun template includes and parameters that you can pass into the included tem

Facelets Template Includes and Params

Facelets is a great addition to jsf.  It is very extensible, and it makes creating custom components even easier.  It's fantastic.  This is almost TOO easy.  If you have a pile of view markup and/or client-side logic, then this is a good option.  And by good, I mean awesome.



In memory of a good [sandwich post](http://bentanner.blogspot.com/2009/02/lets-talk-about-sandwiches-baby.html), I present this to you al la phases.


#### 1. Create stub source file

This custom component is to wrap together a many-to-many picker than I made <a href="http://aprilandjake.com/content/manytomany-relationships-jsf/">earlier</a>.

```jsp
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="en" lang="en">

  <ui:component>
    
  </ui:component>

</html>
```

#### 2. Create Taglib

```xml
<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
    "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
    "http://java.sun.com/dtd/facelet-taglib_1_0.dtd">
<facelet-taglib>
    <namespace>http://www.lds.org/records</namespace>
    <tag>
        <tag-name>largeManyToManyPicker</tag-name>
        <source>components/large-many-to-many-picker.xhtml</source>
    </tag>
</facelet-taglib>
```

#### 3. Implement the component

```jsp
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:r="http://www.jtsnake.com/reallycool"
    xml:lang="en" lang="en">

  <ui:component>
    <style type="text/css">
          .selected-list a {
              display: block;
          }
      </style>
  
    <h:selectOneMenu id="list-choice" converter="#{entityConverter}">
      <f:selectItems value="#{r:convertSelectItemList(allChoices)}"/>
    </h:selectOneMenu>
    <a class="add-link-icon add-btn" href="#" style="text-decoration:none;" title="Add">&#160;</a>
    <br/>
    <h:selectManyListbox id="many-list" value="#{selectedChoices}"
               converter="#{entityConverter}" style="display:none;" required="#{requireSelection}"
               requiredMessage="#{requiredSelectionMsg}">
      <f:selectItems value="#{r:convertSelectItemList(allChoices)}"/>
    </h:selectManyListbox>
  
    <div class="selected-list">
      <ui:repeat var="choose" value="#{selectedChoices}">
        <a id="cit_#{r:getEntityConverterString(choose)}" class="delete-link-icon"
           href="javascript:removeSelection('#{r:getEntityConverterString(choose)}');">#{choose.label}</a>
      </ui:repeat>
    </div>
  
    <script src="#{request.contextPath}/scripts/jquery.selectboxes.js" type="text/javascript" charset="utf-8"></script>
  
    <script type="text/javascript">
      jQuery(document).ready(initLrgManyPicker);
  
      function initLrgManyPicker() {
        jQuery(".add-btn").click(function() {
          jQuery("[@id=#{idPrefix}:list-choice]").copyOptions("[@id=#{idPrefix}:many-list]");
          jQuery(".selected-list").append(addSelection());
        });
      }
  
      function addSelection() {
        var val = jQuery("[@id=#{idPrefix}:list-choice]").selectedValues();
        var label = jQuery("[@id=#{idPrefix}:list-choice]").children("[@selected]").text();
        return "&lt;a id=\"cit_" + val + "\" class=\"delete-link-icon\" href=\"javascript:removeSelection('" + val + "');\"&gt;" + label + "&lt;/a&gt;";
      }
  
      function removeSelection(poldiv) {
        jQuery("[@id=cit_" + poldiv + "]").remove();
        jQuery("[@id=#{idPrefix}:many-list]").deselectOptions(poldiv);
      }
    </script>
  </ui:component>
</html>
```

#### 4. Use the tag

```jsp

<dl>
  <dt>Recipients</dt>
  <dd>
    <r:largeManyToManyPicker allChoices="#{bean.emailBean.allRecipients}"
                 selectedChoices="#{email.sendToRecipients}"
                 requiredSelection="false"
                 idPrefix="form:emailrepeat:0" />
  </dd>
</dl>

```

We're throwing in page-level scripts and styles.  We're also linking to one external javascript.  That external file must be available at the stated location.  There's nothing special to ensure that this dependency is loaded otherwise.

Facelets is a great addition to jsf.  It is very extensible, and it makes creating custom components even easier.  It's fantastic.  This is almost TOO easy.

Create Custom Facelets Component

Sometimes it's useful to know what the invariant value is for your loop within a facelets loop.  I use ui:repeat a lot, but have seen <a href="http://aprilandjake.com/content/jsf-wont-submit-null-uirepeat/">some problems</a> with it in the past.   If you want to get the loop index for your ui:repeat, you may be disappointed.  Basically, it requires that you use a different looping mechanism.  A nice alternative is the a4j:repeat, which offers the same functionality, plus more awesomeness...



Enough talk, let's fight:

```jsp
<a4j:repeat var="email" id="repeatid" rowKeyVar="idx"
         value="#{collection}">
   #{idx},
</a4j:repeat>
```

If you loop four times, you should get 1,2,3,4,.

Another point of interest on these loops:

If you have jsf components within this a4j:repeat and need to know their exact id, the id on the loop will help this id be more predictable and readable.  For instance, in this situation:

```jsp
<h:form id="formid">
   <ui:repeat id="repeatid">
      <h:inputText id="textid" />
   </ui:repeat>
</h:form>
```

The id of the h:inputText component would be formid:repeatid:textid.  This is nice to know if you're trying to select dom elements by id in javascript.

Sometimes it's useful to know what the invariant value is for your loop within a facelets loop.  I use ui:repeat a lot, but have seen <a href="http://aprila

Loop Index in ui:repeat

It stinks when your jsf components don't do what they're supposed to or even what they usually do.    This was the case with my h:inputText field when trying to submit a null value -- but!  only within a ui:repeat component.



It stinks when your jsf components don't do what they're supposed to or even what they usually do.    This was the case with my h:inputText field when trying to submit a null value -- but!  only within a ui:repeat component.

So, the problem was that I could submit values like clockwork from a h:inputText field.  But, once I submitted a value, I could not submit a blank h:inputText to null out the value.  The old value would keep coming back.  

The solution is one of those "I don't know why this worked, but it fixed my problem" solutions.  If anyone has further light and knowledge to shed, that would be appreciated.  Once the h:inputText was removed from inside the ui:repeat that it was wrapped in, it worked like a charm.  So, still needing the repeat, I used a tomahawk dataList.  Were it available to me, I would have preferred an a4j:repeat, because I hear that t:dataList has problems of its own.

It stinks when your jsf components don't do what they're supposed to or even what they usually do.    This was the case with my h:inputText field when tryin