JSF布局和模板

Question

我有一个模板化的search.xhtml页面，用于接受用户在页面上的搜索字词。用户点击＆＃34;搜索！＆＃34;按钮，结果将显示在搜索框下方的同一页面上，如下面的简单代码所示。

search.xhtml：

<ui:define name="search">
    <h:form id="wordForm">
            <h:inputText id="word" value="#{wordController.word}" />    
            <h:commandButton id="search" value="Search!"
                action="#{wordController.search}" />
    </h:form>
    </ui:define>

    /*** From here to display the search results!!! ***/
   <ui:define name="searchResult">      
    <h:outputText value="Search Results:"/>
    <c:forEach items="#{wordController.wordInfoList}" var="wordInfo">

        <h:outputText value="#{wordInfo.display}"
            rendered="#{not empty wordInfo.display}" /> 
         <ui:repeat value="#{wordInfo.relatedWords}" var="relatedInfo">
            <h:outputLink value="index.xhtml">
              <h:outputText value="#{relatedInfo}" />
              <f:param name="relatedWord" value="#{relatedInfo}" />
            </h:outputLink>
         </ui:repeat>
    </c:forEach>

/*Edit: Add a f:medatadata tag to accept the parameter "relatedWord" */
    <f:metadata>
            <f:viewParam id="related" name="relatedWord"
                value="#{wordController.word}" />
            <f:viewAction action="#{wordController.info()}" />
    </f:metadata> 
</ui:define>

layout.xhtml将search.xhtml插入页面。

layout.xhtml：

 <ui:fragment rendered="#{not empty wordController.word}">
        <div id="searchResult">
            <ui:insert name="searchResult">                 
            </ui:insert>
        </div>
</ui:fragment>

问题是，当用户访问该页面时，甚至在他点击“搜索”之前！按钮，搜索结果将始终与搜索框一起显示，但搜索结果将为空，但字符串＆＃34;搜索结果：＆＃34;不是空的。

如何修改此选项，以便在用户执行搜索之前，它只会显示搜索框。并且仅在用户单击搜索按钮后将搜索结果与搜索框一起显示。

谢谢。