Layout para filtros + resultado com JSF

Front-end
#1

Bom dia amigos!

Este é meu primeiro post neste fórum, peço ajuda e orientação para elaborar uma página de consulta, onde tenho que informar o período inicial / final e carregar os registros em um dataTable.
Eu já desenvolvi utilizando o componente calendar em um comandButton que aciona meu Bean, esta ok, respeita o filtro tudo, porém o resultado aparece em uma outra tela (página), gostaria de saber como faço para fique igual aos sistemas desktop em geral, a grade (datatable) abaixo do período, se o usuário alterar o período e processar novamente atualizar a grade.
Adianto que estou iniciando em java, aprendi recentemente JSF, Hibernate, JBoss, Richfaces, digo isto porque acredito que esta dúvida é simples para muitos, mas deixo claro que sou leigo em ambiente web, estou gatinhando ainda rsrsrsrs.
Fiz muitas buscas na web, primeiro para conseguir filtrar, codificar o Bean e redirecionar o resultado para um página, meu faces-config está assim:

<navigation-rule>
		<display-name>receber</display-name>
		<from-view-id>/receber.xhtml</from-view-id>
		<navigation-case>
			<from-outcome>pesquisar_rec_vcto</from-outcome>
			<to-view-id>/listaReceber.xhtml</to-view-id>
		</navigation-case>
	</navigation-rule>

Uma parte da tela para filtro: (receber.xhtml)

		<a4j:form>
			<rich:panelBar>
				<rich:panelBarItem label="Filtrar Contas a Receber por Vencimento">
					<h:outputLabel for="dataInicio" value="Data Inicial: " />
					<rich:calendar id="dataInicio" value="#{receberMB.dataInicio}"
						datePattern="dd/MM/yyyy" enableManualInput="true"
						style="width:200px">
					</rich:calendar>

					<h:outputLabel for="dataFinal" value="Data Final: " />
					<rich:calendar id="dataFinal" value="#{receberMB.dataFinal}"
						datePattern="dd/MM/yyyy" enableManualInput="true"
						style="width:200px">
					</rich:calendar>

					<a4j:commandButton ajaxSingle="false" action="pesquisar_rec_vcto"
						value="Pesquisar" />
				</rich:panelBarItem>

			</rich:panelBar>
			<h:messages />
		</a4j:form>

Tela de resultados (listaReceber.xhtml)

			<a4j:form>
				<rich:dataTable id="gridVenc" value="#{receberMB.filtravcto}"
					var="contas" border="0" cellpadding="2" cellspacing="0" rows="20">
					<rich:column>
						<f:facet name="header">Vencimento</f:facet>
						<h:outputText value="#{contas.recven}">
							<f:convertDateTime pattern="dd/MM/yyyy" />
						</h:outputText>
					</rich:column>
					<rich:column>
						<f:facet name="header">Documento</f:facet>
						<h:outputText value="#{contas.recdoc}" />
					</rich:column>
					<rich:column width="300px">
						<f:facet name="header">Cliente</f:facet>
						<h:outputText value="#{contas.cliente.nome}" />
					</rich:column>
					<rich:column width="250px">
						<f:facet name="header">Histórico</f:facet>
						<h:outputText value="#{contas.rechis}" />
					</rich:column>
					<rich:column style="text-align:right">
						<f:facet name="header">Valor</f:facet>
						<h:outputText value="#{contas.recval}">
							<f:convertNumber maxFractionDigits="2" groupingUsed="true"
								maxIntegerDigits="14" type="currency" currencySymbol="" />
						</h:outputText>
					</rich:column>
				</rich:dataTable>

				<rich:spacer height="10" />
				<a4j:outputPanel id="outputPanel2">
					<rich:datascroller align="left" for="gridVenc" maxPages="20"
						id="sc2" />
				</a4j:outputPanel>
				<br />
				<h:messages />
			</a4j:form>

Bom é o que consegui até o momento, estou achando show de bola trabalhar com JSF, Hibernate, Annotations, to tomando um coro violento, mas estamos ai, conto com ajuda e desculpas pelos erros ai.

Obrigado

César

#2