Including several components from an XHTML file into other XHTML files

[Christopher Sharp]

Well, I have another problem that needs a solution.

I can use a <ui:include> to include all the contents of one file in a particular location in another one, such as: <ui:include src="include/logorow.xhtml"/>, but how do I extract different parts in one file and include them in different places in one or more other files?

I have a file with several <h:selectOneMenu> and <h:selectOneListbox> tags in a file which I'm calling menus.xhtml, and I want to include individual menus in several files.

In menus.xhtml I have the following code:

    </ui:composition>
      <ui:define name="physics">
        <h:panelGrid style="margin-left:auto; margin-right:auto;" cellpadding="10" columns="1">
          <ui:fragment>
            <fieldset>
              <legend>Choose the physics required</legend>
              <h:selectOneMenu id="physmenu" value="#{option.physics}" style="height:25px; width:180px;">
                <f:selectItems value="#{option.items}"/>
              </h:selectOneMenu>
            </fieldset>
          </ui:fragment>
         </h:panelGrid>
      </ui:define>
    </ui:composition>

.    <ui:composition>
    <ui:insert name="abundances">
    <h:selectOneListbox id="elements" value="Elements" style="height:100px; width:180px;">
    <!-- Eventually similar code to above -->
    </h:selectOneListbox>
    </ui:insert>
    </ui:composition>

<!-- Other similar menus -->

and then in my index.xhtml I have somethng like the following:

      <ui:decorate template="menus.xhtml">
      <ui:define name="physics"/>
      </ui:decorate>

and in two places in the option1.xhtml I have the following:

            <ui:decorate template="menus.xhtml">
              <ui:insert name="abundances"/>
            </ui:decorate>

However, I can't get anything like this to work. I have tried various combinations of <ui:insert name="whatever"/> and <ui:define name="whatever"/> as well as trying out combinations of <ui:composition> and <ui:decorate> in the various files.

I can only succeed in getting the physics menu included in index.xhtml, which I want, but in that case it's also included in the option1.xhtml page in the location where I want abundances inserted. That's the best so far I can do, otherwise either nothing is displayed or I get errors.

I've read up about templates, and see how various components can be included into a template, but I don't really need them, I just want to include components in one file, in this case menus, into several places in other files. The menus.xhtml file will not be displayed eventually, it's just a place to group some code together.

If anybody has any ideas on how to solve this, I would be very grateful.

[Tim Holloway]

I've never used ui:decorate. I admit that the abundance of similar-but-not-identical facelets component tags leaves me scratching my head sometimes.

I commonly design my webapps with a standard page layout that I tile to include masthead, footer, and menus either as a sidebar or as a horizontal menu under the masthead. Usually I use some sort of extended taglibrary menu controls, although one app used a tree control. The idea is that the same menu is (usually) consistently available from almost every page.

It is possible to take a master component and "use" only parts of it by enclosing them in elements subject to the "rendered" attribute, but on the whole, I'd probably go with separate discrete components.