O Problema
Em minha aplicação necessitava vincular a cidade do endereço de uma pessoa, não podia usar um elemento html select pois o número de cidades era muito grande então resolvi fazer um popup que listava todas as cidades e com um filtro para que o usuário pude-se escolher a cidade.
A Solução
Na Visão
Para abrir a minha popup este código foi usado
<h:graphicImage value="/img/magnifier.gif" style="margin-left:5px; cursor:pointer"
onclick="window.open('CidadeList.seam?pessoaCodigo=#{pessoaHome.pessoaCodigo}&cid=#{conversation.id}',
'Buscar Área do Conhecimento', 'height = 500, width = 400, scrollbars = 1')"/>
Pontos Importantes
- Não é possível utilizar o & para concatenar mais parâmetros a URL, é necessário ‘escapar’ o & através o &
- cid=#{conversation.id}: foi usado para manter a conversação entre a janela atual e a popup, sem isso você acaba iniciando um novo workspace, e com isso o que você manipula na popup não é refletido na janela parent;
Na tela onde estavam sendo listadas as cidades foi criado um h:commandLink que ao ser clicado chamava o método que vinculava a pessoa a cidade e setava os dados relativos na janela parent.
O XHTML que foi aberto pelo popup se parece com isso aqui:
<h:form id="arConhecimentoSearch" styleClass="edit">
<rich:simpleTogglePanel label="Parâmetros de Busca" switchType="ajax">
<s:decorate template="layout/display.xhtml">
<ui:define name="label">Descrição</ui:define>
<h:inputText id="arCnhDescricao" value="#{cidadeList.cidade.nome}"/>
</s:decorate>
</rich:simpleTogglePanel>
<div class="actionButtons">
<h:commandButton id="search" value="Pesquisar" action="/cidadeList.xhtml"/>
</div>
</h:form>
<rich:panel>
<f:facet name="header">Cidades Localizadas</f:facet>
<div class="results" id="cidadeList">
<h:outputText value="Nenhuma cidade localizada."
rendered="#{empty cidadeList.resultList}"/>
<rich:dataTable id="cidadeList"
var="cidade"
value="#{cidade.resultList}"
rendered="#{not empty cidade.resultList}">
<h:column>
<f:facet name="header">Código</f:facet>
#{cidade.codigo}
</h:column>
<h:column>
<f:facet name="header">Nome</f:facet>
#{cidade.nome}
</h:column>
<h:column>
<f:facet name="header">Ações</f:facet>
<h:form>
<h:commandLink value="Select" action="#{cidadeHome.cidadeLocalizada(cidade)}"
onclick="window.opener.document.getElementById('cidade_codigo').value = '#{cidade.codigo}';
window.opener.document.getElementById('cidade_descricao').innerHTML = '#{cidade.descricao';
window.close()"/>
</h:form>
</h:column>
</rich:dataTable>
Pontos Importantes
- Não use s:link pois ele não permite que se passe parâmetros para o método, perdi um tempão pra descobrir isso :(.
- action=”#{cidadeHome.cidadeLocalizada(cidade)}: chama o método que irá ligar a cidade a pessoa;
- Para dar uma ‘enfeitada’ quando o cidadão clica na cidade então a janela será fechada e os dados serão exibidos na janela parent, isso é feito usando o código em javascript window.opener.document.getElementById(‘cidade_descricao’).innerHTML = ‘#{cidade.descricao’};
No Modelo
Para pedir ao SEAM que ligue a entidade cidade com a entidade pessoa então será usado o método
public void cidadeLocalizada(Cidade cidade)
{
pessoaHome.getInstance().setCidade(cidade);
}
Finalizando
Aqui não está o código completo mas da pra ter uma idéia de como a ciosa funciona. Espero de alguma forma ter contribuído com alguém.