Problem navigating with rich:page
Hi you there,
Good evening. I don't have a large experience using richfaces, i tried many ways to solve the problem i had before posting this topic, but i wasn't able to solve it by myself.
I implemented some functionalities using a data grid with modal panel for updating data in the grid that is very similar to the example on Rich Faces Demo web page and everything was working fine.
I was wondering how to organize the page layout using divs, iframes and other html elements when i found out the rich:page component that is a great solution for that.
I've created a new xhtml file implementing a rich:page to put all the things the togheter: the main page the top presentation frame, menu files and the funcionalities i'd like to navigate to from the menu options. The idea was that when i navigate from the options clicked in the menu area, the top and the menu areas was kept as it was and there is a main area for the functionalities that should be updated.
I didn't found any documentation about navigation using rich:page. So i did the following: i didn't created any navigation rule in the faces-config.xml file and in the main area i've implemented a facelet ui:include component that have its src property controled by a managed bean component.
When i tested it looks that everything was working fine, the navigation was working too. But when i try to use the modalPanel to update data, the modal window didn't showed up with the information from the row in the table that was selected and when i click on the save button nothing happens (obviously because the modal panel doesn't have the correct reference for the object to update).
This is the code for the main page that implements the rich:page component:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:ui="http://java.sun.com/jsf/facelets">
<rich:page markupType="xhtml" width="1500" theme="simple">
<f:facet name="header">
<h:panelGroup>
<h:graphicImage url="/images/topo2.JPG"/>
</h:panelGroup>
</f:facet>
<f:facet name="footer">
<h:outputText
value="Copyright (c) 2009 RichFaces. All rights reserved. RichFaces version #{environment.version}" />
</f:facet>
<rich:layout>
<rich:layoutPanel position="left" width="10%">
<ui:include src="menu.xhtml">
</ui:include>
</rich:layoutPanel>
<rich:layoutPanel id="system" position="center" width="90%" >
<ui:include src="#{menu.viewId}" >
</ui:include>
</rich:layoutPanel>
</rich:layout>
</rich:page>
<a4j:status onstart="javascript:Richfaces.showModalPanel('wait');" onstop="javascript:Richfaces.hideModalPanel('wait');"/>
<rich:modalPanel id="wait" autosized="true" width="200" height="120" moveable="false" resizeable="false">
<f:facet name="header">
<h:outputText value="Processando"/>
</f:facet>
<h:outputText value="Por favor, aguarde..."/>
</rich:modalPanel>
This is the code for the data grid with modal panel (categorias.xhtml):
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:form id="frmCategorias" >
<a4j:region>
<h:panelGrid width="80%">
<rich:dataTable id="tablecategorias" width="50%" rows="8"
value="#{MBCategorias.categorias}" var="categoria" rowKeyVar="row" align="center" >
<f:facet name="header">
<h:outputText value="Categorias"/>
</f:facet>
<rich:column width="5%">
<f:facet name="header">Id</f:facet>
<h:outputText value="#{categoria.categoriaId}"></h:outputText>
</rich:column>
<rich:column width="80%">
<f:facet name="header">Descrição</f:facet>
<h:outputText value="#{categoria.descricao}"></h:outputText>
</rich:column>
<rich:column width="10%">
<f:facet name="header">Editar</f:facet>
<a4j:commandLink ajaxSingle="true" id="editlink"
oncomplete="javascript:Richfaces.showModalPanel('editPanel');">
<h:graphicImage value="/images/edit.gif" style="border:0"/>
<f:setPropertyActionListener value="#{categoria}"
target="#{MBCategorias.categoria}" />
<f:setPropertyActionListener value="#{row}"
target="#{MBCategorias.currentRow}" />
</a4j:commandLink>
<rich:toolTip for="editlink" value="Edicao"/>
<rich:spacer width="5px"></rich:spacer>
<f:facet name="header">Excluir</f:facet>
<a4j:commandLink ajaxSingle="true" id="deletelink"
oncomplete="javascript:Richfaces.showModalPanel('deletePanel');">
<h:graphicImage value="/images/delete.gif" style="border:0"/>
<f:setPropertyActionListener value="#{categoria}"
target="#{MBCategorias.categoria}" />
<f:setPropertyActionListener value="#{row}"
target="#{MBCategorias.currentRow}" />
</a4j:commandLink>
<rich:toolTip for="deletelink" value="Exclusao"/>
</rich:column>
<f:facet name="footer">
<rich:datascroller for="tablecategorias" maxPages="1" >
</rich:datascroller>
</f:facet>
</rich:dataTable>
</h:panelGrid>
</a4j:region>
</h:form>
<rich:modalPanel id="editPanel" autosized="true" width="450">
<f:facet name="header">
<h:outputText value="Editar Categoria" />
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/images/close.png" id="hidelink" styleClass="hidelink"/>
<rich:componentControl for="editPanel" attachTo="hidelink" operation="hide" event="onclick" />
</h:panelGroup>
</f:facet>
<h:form>
<rich:messages style="color:red;"></rich:messages>
<h:panelGrid columns="1">
<a4j:outputPanel ajaxRendered="true">
<h:panelGrid columns="2">
<h:outputText value="Categoria"/>
<h:inputText value="#{MBCategorias.categoria.descricao}" label="description"/>
</h:panelGrid>
<!-- <rich:message showSummary="true" showDetail="false" for="description"/>-->
</a4j:outputPanel>
<a4j:commandButton value="Salvar" action="#{MBCategorias.editCategoria}" reRender="tablecategorias"
oncomplete="if (#{facesContext.maximumSeverity==null}) javascript:Richfaces.hideModalPanel('editPanel');" />
</h:panelGrid>
</h:form>
</rich:modalPanel>
<rich:modalPanel id="deletePanel" autosized="true" width="200">
<f:facet name="header">
<h:outputText value="Deseja apagar esta categoria?"
style="padding-right:15px;" />
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/images/close.png" styleClass="hidelink" id="hidelink2" />
<rich:componentControl for="deletePanel" attachTo="hidelink2" operation="hide" event="onclick" />
</h:panelGroup>
</f:facet>
<h:form>
<a4j:commandButton value="Sim" ajaxSingle="true" action="#{MBCategorias.removeCategoria}"
oncomplete="javascript:Richfaces.hideModalPanel('deletePanel');" reRender="tablecategorias" />
<a4j:commandButton value="Nao" onclick="javascript:Richfaces.hideModalPanel('deletePanel');return false;" />
</h:form>
</rich:modalPanel>
<rich:messages></rich:messages>
</ui:composition>
It seems that the problem is related to the way i've implemented the navigation, because if i replace the code for the ui:include component as it follows:
<ui:include src="categorias.xhtml" >
</ui:include>
it works perfectly.
It seems this is some stuff related to updating the model or view, but i can't find the solution. Can anybody give some help?
Thanks and sorry for my poor english...