[shale][clay] Reusing the components declaring in the snippet body. Proposal

[Sergey Smirnov]

PROBLEM

I have found that the <span jsfid="contactTable"> content on
the hrolodex.html is totally mock, the the contactTable component build its
content from the scratch inside the clay config file.
>From the first sight, I used to expect that the content of the result
panelGrid can be also taken from the html content of the inner table.


PROPOSAL

Involve the inner elements that are marked with jsfids as children elements if 
they are presented.

In case of allowBody="false", strip down all the html mockup and process only 
the tags marked with jsfids.

This is an example.
html:

<table jsfid="myPanel">
<tr>
    <td jsfid="fnPrompt">First Name:</td>
    <td><input type="text" jsfid="firstNameInput" /></td>
 </tr>
 <tr>
    <td jsfid="lnPrompt">Last Name:</td>
    <td><input type="text" jsfid="lastNameInput" /></td>
  </tr>
  <tr>
     <td colspan="2"><input type="submit"  jsfid="submitForm"/></td>
  </tr>
</table>

clay config file:

 <component jsfid="myPanel"  allowBody="false" extends="panelGrid">
  <attributes>
   <set name="columns" value="2"/>
  </attributes>
 </component>

 <component jsfid="fnPrompt"  allowBody="false" extends="outputText">
  <attributes>
   <set name="value" value="#{msg.fnPrompt}"/>
  </attributes>
 </component>

 <component jsfid="lnPrompt"  allowBody="false" extends="outputText">
  <attributes>
   <set name="value" value="#{msg.lnPrompt}"/>
  </attributes>
 </component>

 <component jsfid="firstNameInput" extends="inputText" id="fn">
  <attributes>
   <set name="value" useValueLateBinding="true"
            value="#{managed-bean-name.firstName}"/>
  </attributes>
 </component>

<component jsfid="lastNameInput" extends="inputText" id="ln">
  <attributes>
   <set name="value" useValueLateBinding="true"
            value="#{managed-bean-name.lastName}"/>
  </attributes>
 </component>

 <component jsfid="submitForm" facet="footer" allowBody="false"
extends="commandButton">
  <attributes>
   <set name="value" value="#{msg.submitPrompt}"/>
   <set name="action" value="showData"/>
  </attributes>
 </component>

Result of the composition equals to:

<h:panelGrid columns="2">
    <h:outputText value="#{msg.fnPrompt}"/>
    <h:inputText id="fn" value="#{user.firstName}"/>

    <h:outputText value="#{msg.lnPrompt}"/>
    <h:inputText id="fn" value="#{user.lastName}"/>

    <f:facet name="footer">
        <h:commandButton value="#{msg.submitPrompt}" action="showData"/>
    </f:facet>
</h:panelGrid>