How to create a grouped XBL control

I am trying to create an XBL control which groups together a xform date, a drop down and a text box in Orbeon with the following code snippet:

<xbl:binding id="fb-generalform" element="fr|GeneralForm">
    <metadata xmlns="http://orbeon.org/oxf/xml/form-builder">
        <display-name lang="en">General Form</display-name>
        <display-name lang="fr">Bouton navigateur</display-name>
        <icon lang="en">
            <small-icon>/forms/orbeon/builder/images/button.png</small-icon>
            <large-icon>/forms/orbeon/builder/images/button.png</large-icon>
        </icon> 
        <datatype>xs:string</datatype>
        <template>
            <xforms:select id="" appearance="xxforms:tree" ref="" xmlns="">
                <xforms:label ref=""/>
                <xforms:hint ref=""/>
                <xforms:help ref=""/>
                <xforms:alert ref="$fr-resources/detail/labels/alert"/>
                <xforms:itemset nodeset="">
                    <xforms:label ref="label"/>
                    <xforms:value ref="value"/>
                </xforms:itemset>
            </xforms:select>                
        </template>开发者_如何学编程;             
    </metadata>
</xbl:binding>

It works properly with one control but when I try to add more controls in the template, it does not reflect any changes on the screen. It only displays one control on the UI.

Can someone please guide me how can I make a grouped XBL control?

-Thanks

The issue is that you are implementing the component inside the metadata/template. Instead, what you want to put inside <template> is how the component is to be used. That is: if you were writing XForms by hand (not using Form Builder), and were to use that component, what would it look like? Instead, the implementation of the component goes into <xbl:template>, which is missing in your code.

A simple example which you might find to be good inspiration is the date picker, for which you can see the source code.